js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add min-block-size to divider; fixes #675 (#964)

Browse Source 
* add min-block-size to divider; fixes #675

* Remove unnecessary divider heights from patterns

* Update src/components/divider/divider.css

Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>

---------

Co-authored-by: lindsaym-fa <dev@lindsaym.design>
Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
This commit is contained in:
Cory LaViska
2025-05-22 11:05:38 -04:00
committed by GitHub
parent 5c950a7874
commit 35338ef643
7 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/docs/components/divider.md
View File

@@ -44,7 +44,7 @@ Use the `--spacing` custom property to change the amount of space between the di
The default orientation for dividers is `horizontal`. Set `orientation` attribute to `vertical` to draw a vertical divider. The divider will span the full height of its container.
```html {.example}
<div style="display: flex; align-items: center; height: 2rem;">
<div style="display: flex; align-items: center;">
First
<wa-divider orientation="vertical"></wa-divider>
Middle

6
docs/docs/patterns/app/activity-log.md
View File

@@ -66,7 +66,7 @@ description: 'Track and organize recent user actions or events.'
<wa-format-date date="2025-04-01" month="short" day="numeric"></wa-format-date>
</div>
</article>
<wa-divider orientation="vertical" style="height: 1em; margin-left: 1rem"></wa-divider>
<wa-divider orientation="vertical" style="margin-left: 1rem"></wa-divider>
<article class="wa-flank" style="flex-wrap: nowrap">
<wa-avatar style="--size: 2rem">
<wa-icon slot="icon" name="seedling"></wa-icon>
@@ -76,7 +76,7 @@ description: 'Track and organize recent user actions or events.'
<wa-format-date date="2025-05-29" month="short" day="numeric"></wa-format-date>
</div>
</article>
<wa-divider orientation="vertical" style="height: 1em; margin-left: 1rem"></wa-divider>
<wa-divider orientation="vertical" style="margin-left: 1rem"></wa-divider>
<article class="wa-flank" style="flex-wrap: nowrap">
<wa-avatar style="--size: 2rem">
<wa-icon slot="icon" name="tree-deciduous"></wa-icon>
@@ -86,7 +86,7 @@ description: 'Track and organize recent user actions or events.'
<wa-format-date date="2025-09-15" month="short" day="numeric"></wa-format-date>
</div>
</article>
<wa-divider orientation="vertical" style="height: 1em; margin-left: 1rem"></wa-divider>
<wa-divider orientation="vertical" style="margin-left: 1rem"></wa-divider>
<article class="wa-flank" style="flex-wrap: nowrap">
<wa-avatar style="--size: 2rem">
<wa-icon slot="icon" name="crate-apple"></wa-icon>

4
docs/docs/patterns/app/description-list.md
View File

@@ -195,7 +195,7 @@ isPro: true
</span>
<div class="wa-cluster wa-gap-2xs">
<wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
<wa-divider orientation="vertical" style="height: 1em"></wa-divider>
<wa-divider orientation="vertical"></wa-divider>
<wa-button appearance="plain" variant="danger" size="small">Delete</wa-button>
</div>
</div>
@@ -210,7 +210,7 @@ isPro: true
</span>
<div class="wa-cluster wa-gap-2xs">
<wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
<wa-divider orientation="vertical" style="height: 1em"></wa-divider>
<wa-divider orientation="vertical"></wa-divider>
<wa-button appearance="plain" variant="danger" size="small">Delete</wa-button>
</div>
</div>

2
docs/docs/patterns/ecommerce/order-summary.md
View File

@@ -102,7 +102,7 @@ isPro: true
>Order placed
<wa-format-date date="2025-02-26T09:00:00-04:00" month="long" day="numeric" year="numeric"></wa-format-date
></span>
<wa-divider orientation="vertical" style="height: 2em"></wa-divider>
<wa-divider orientation="vertical"></wa-divider>
<span>Order # 45646456-4656-4542</span>
</div>
<wa-button size="small" appearance="outlined" pill>View Invoice</wa-button>

2
docs/docs/patterns/ecommerce/product-preview.md
View File

@@ -24,7 +24,7 @@ isPro: true
<div class="wa-stack wa-gap-xl">
<div class="wa-cluster">
<span class="wa-heading-2xl">$32</span>
<wa-divider orientation="vertical" style="height: 2em"></wa-divider>
<wa-divider orientation="vertical"></wa-divider>
<wa-rating label="Rating" value="3.75" readonly></wa-rating>
<a href="" class="wa-caption-m">36 Reviews</a>
</div>

1
docs/docs/resources/changelog.md
View File

@@ -18,6 +18,7 @@ During the alpha period, things might break! We take breaking changes very serio
- 🚨 BREAKING: Renamed the `classic` theme to `shoelace`
- 🚨 BREAKING: Renamed `pulse` attribute in `<wa-badge>` to `attention="pulse"` and added `attention="bounce"` [issue:#940]
- 🚨 BREAKING: Renamed the `vertical` attribute to `orientation="vertical"` in `<wa-split-panel>` and `<wa-divider>` to align with other components and the platform [issue:674]
- Added a `min-block-size` to `<wa-divider orientation="vertical">` to ensure the divider is visible regardless of container height [issue:675]
- Fixed a bug in `<wa-radio-group>` that caused radios to uncheck when assigning a numeric value [issue:924]
- Fixed `<wa-button-group>` so dividers properly show between buttons

3
src/components/divider/divider.css
View File

@@ -13,6 +13,7 @@
:host([orientation='vertical']) {
display: inline-block;
height: 100%;
border-left: solid var(--width) var(--color);
border-inline-start: solid var(--width) var(--color);
margin: 0 var(--spacing);
min-block-size: 1lh;
}