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

rename caret => with-caret

Browse Source
This commit is contained in:
Cory LaViska
2025-06-26 12:18:07 -04:00
parent dc556e5379
commit f2b05600a5
10 changed files with 39 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/webawesome/docs/_includes/visual-tests/size.njk
View File

@@ -258,14 +258,14 @@
<th><code>small</code>/<code>s</code></th>
<td>
<wa-dropdown size="small">
<wa-button slot="trigger" caret>Dropdown</wa-button>
<wa-button slot="trigger" with-caret>Dropdown</wa-button>
<wa-dropdown-item>Menu Item 1</wa-dropdown-item>
<wa-dropdown-item>Menu Item 2</wa-dropdown-item>
</wa-dropdown>
</td>
<td>
<wa-dropdown class="wa-size-s">
<wa-button slot="trigger" caret>Dropdown</wa-button>
<wa-button slot="trigger" with-caret>Dropdown</wa-button>
<wa-dropdown-item>Menu Item 1</wa-dropdown-item>
<wa-dropdown-item>Menu Item 2</wa-dropdown-item>
</wa-dropdown>
@@ -275,14 +275,14 @@
<th><code>medium</code>/<code>m</code></th>
<td>
<wa-dropdown size="medium">
<wa-button slot="trigger" caret>Dropdown</wa-button>
<wa-button slot="trigger" with-caret>Dropdown</wa-button>
<wa-dropdown-item>Menu Item 1</wa-dropdown-item>
<wa-dropdown-item>Menu Item 2</wa-dropdown-item>
</wa-dropdown>
</td>
<td>
<wa-dropdown class="wa-size-m">
<wa-button slot="trigger" caret>Dropdown</wa-button>
<wa-button slot="trigger" with-caret>Dropdown</wa-button>
<wa-dropdown-item>Menu Item 1</wa-dropdown-item>
<wa-dropdown-item>Menu Item 2</wa-dropdown-item>
</wa-dropdown>
@@ -292,14 +292,14 @@
<th><code>large</code>/<code>l</code></th>
<td>
<wa-dropdown size="large">
<wa-button slot="trigger" caret>Dropdown</wa-button>
<wa-button slot="trigger" with-caret>Dropdown</wa-button>
<wa-dropdown-item>Menu Item 1</wa-dropdown-item>
<wa-dropdown-item>Menu Item 2</wa-dropdown-item>
</wa-dropdown>
</td>
<td>
<wa-dropdown class="wa-size-l">
<wa-button slot="trigger" caret>Dropdown</wa-button>
<wa-button slot="trigger" with-caret>Dropdown</wa-button>
<wa-dropdown-item>Menu Item 1</wa-dropdown-item>
<wa-dropdown-item>Menu Item 2</wa-dropdown-item>
</wa-dropdown>

2
packages/webawesome/docs/docs/components/button-group.md
View File

@@ -165,7 +165,7 @@ Dropdowns can be placed into button groups.
<wa-button-group label="Example Button Group">
<wa-button>Button</wa-button>
<wa-dropdown>
<wa-button slot="trigger" caret>Dropdown</wa-button>
<wa-button slot="trigger" with-caret>Dropdown</wa-button>
<wa-dropdown-item>Item 1</wa-dropdown-item>
<wa-dropdown-item>Item 2</wa-dropdown-item>
<wa-dropdown-item>Item 3</wa-dropdown-item>

8
packages/webawesome/docs/docs/components/button.md
View File

@@ -186,12 +186,12 @@ Use the `start` and `end` slots to add presentational elements like `<wa-icon>`
### Caret
Use the `caret` attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.
Use the `with-caret` attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.
```html {.example}
<wa-button size="small" caret>Small</wa-button>
<wa-button size="medium" caret>Medium</wa-button>
<wa-button size="large" caret>Large</wa-button>
<wa-button size="small" with-caret>Small</wa-button>
<wa-button size="medium" with-caret>Medium</wa-button>
<wa-button size="large" with-caret>Large</wa-button>
```
### Loading

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

@@ -59,7 +59,7 @@ Use dividers in [menus](/docs/components/menu) to visually group menu items.
```html {.example}
<wa-dropdown style="max-width: 200px;">
<wa-button slot="trigger" caret>Menu</wa-button>
<wa-button slot="trigger" with-caret>Menu</wa-button>
<wa-dropdown-item value="1">Option 1</wa-dropdown-item>
<wa-dropdown-item value="2">Option 2</wa-dropdown-item>
<wa-dropdown-item value="3">Option 3</wa-dropdown-item>

22
packages/webawesome/docs/docs/components/dropdown.md
View File

@@ -11,7 +11,7 @@ Dropdowns are designed to work well with [dropdown items](/docs/components/dropd
```html {.example}
<wa-dropdown>
<wa-button slot="trigger" caret>Dropdown</wa-button>
<wa-button slot="trigger" with-caret>Dropdown</wa-button>
<wa-dropdown-item>
<wa-icon slot="icon" name="scissors"></wa-icon>
@@ -51,7 +51,7 @@ When an item is selected, the `wa-select` event will be emitted by the dropdown.
```html {.example}
<div class="dropdown-selection">
<wa-dropdown>
<wa-button slot="trigger" caret>View</wa-button>
<wa-button slot="trigger" with-caret>View</wa-button>
<wa-dropdown-item value="full-screen">Enter full screen</wa-dropdown-item>
<wa-dropdown-item value="actual">Actual size</wa-dropdown-item>
<wa-dropdown-item value="zoom-in">Zoom in</wa-dropdown-item>
@@ -79,7 +79,7 @@ Use the `icon` slot to add icons to [dropdown items](/docs/components/dropdown-i
```html {.example}
<wa-dropdown>
<wa-button slot="trigger" caret>Edit</wa-button>
<wa-button slot="trigger" with-caret>Edit</wa-button>
<wa-dropdown-item value="cut">
<wa-icon slot="icon" name="scissors"></wa-icon>
@@ -109,7 +109,7 @@ Use any heading, e.g. `<h1>`–`<h6>` to add labels and the [`<wa-divider>`](/do
```html {.example}
<wa-dropdown>
<wa-button slot="trigger" caret>Device</wa-button>
<wa-button slot="trigger" with-caret>Device</wa-button>
<h3>Type</h3>
<wa-dropdown-item value="phone">Phone</wa-dropdown-item>
@@ -128,7 +128,7 @@ Use the `details` slot to display details, such as keyboard shortcuts, inside [d
```html {.example}
<wa-dropdown>
<wa-button slot="trigger" caret>Message</wa-button>
<wa-button slot="trigger" with-caret>Message</wa-button>
<wa-dropdown-item value="reply">
Reply
@@ -166,7 +166,7 @@ You can turn a [dropdown item](/docs/components/dropdown-item) into a checkable
```html {.example}
<div class="dropdown-checkboxes">
<wa-dropdown>
<wa-button slot="trigger" caret>View</wa-button>
<wa-button slot="trigger" with-caret>View</wa-button>
<wa-dropdown-item type="checkbox" value="canvas" checked>Show canvas</wa-dropdown-item>
<wa-dropdown-item type="checkbox" value="grid" checked>Show grid</wa-dropdown-item>
@@ -204,7 +204,7 @@ Add `variant="danger"` to any [dropdown item](/docs/components/dropdown-item) to
```html {.example}
<wa-dropdown>
<wa-button slot="trigger" caret>Project</wa-button>
<wa-button slot="trigger" with-caret>Project</wa-button>
<wa-dropdown-item value="share">
<wa-icon slot="icon" name="share"></wa-icon>
@@ -258,7 +258,7 @@ The distance from the panel to the trigger can be customized using the `distance
```html {.example}
<wa-dropdown distance="30">
<wa-button slot="trigger" caret>Edit</wa-button>
<wa-button slot="trigger" with-caret>Edit</wa-button>
<wa-dropdown-item>Cut</wa-dropdown-item>
<wa-dropdown-item>Copy</wa-dropdown-item>
@@ -277,7 +277,7 @@ The offset of the panel along the trigger can be customized using the `offset` a
```html {.example}
<wa-dropdown offset="30">
<wa-button slot="trigger" caret>Edit</wa-button>
<wa-button slot="trigger" with-caret>Edit</wa-button>
<wa-dropdown-item>Cut</wa-dropdown-item>
<wa-dropdown-item>Copy</wa-dropdown-item>
@@ -297,7 +297,7 @@ To create submenus, nest [dropdown items](/docs/components/dropdown-item) inside
```html {.example}
<div class="dropdown-submenus">
<wa-dropdown>
<wa-button slot="trigger" caret>Export</wa-button>
<wa-button slot="trigger" with-caret>Export</wa-button>
<wa-dropdown-item>
Documents
@@ -359,7 +359,7 @@ Add the `disabled` attribute to any [dropdown item](/docs/components/dropdown-it
```html {.example}
<wa-dropdown>
<wa-button slot="trigger" caret>Payment method</wa-button>
<wa-button slot="trigger" with-caret>Payment method</wa-button>
<wa-dropdown-item value="cash">Cash</wa-dropdown-item>
<wa-dropdown-item value="check" disabled>Personal check</wa-dropdown-item>

8
packages/webawesome/docs/docs/experimental/size.md
View File

@@ -39,7 +39,7 @@ Dropdown:
<p>
Small dropdown:
<wa-dropdown size="small">
<wa-button slot="trigger" caret>Dropdown</wa-button>
<wa-button slot="trigger" with-caret>Dropdown</wa-button>
<wa-dropdown-item>Dropdown Item 1</wa-dropdown-item>
<wa-dropdown-item>Dropdown Item 2</wa-dropdown-item>
<wa-dropdown-item>Dropdown Item 3</wa-dropdown-item>
@@ -49,7 +49,7 @@ Dropdown:
<p>
Small menu:
<wa-dropdown>
<wa-button slot="trigger" caret>Dropdown</wa-button>
<wa-button slot="trigger" with-caret>Dropdown</wa-button>
<wa-dropdown-item size="small">Dropdown Item 1</wa-dropdown-item>
<wa-dropdown-item size="small">Dropdown Item 2</wa-dropdown-item>
<wa-dropdown-item size="small">Dropdown Item 3</wa-dropdown-item>
@@ -59,7 +59,7 @@ Dropdown:
<p>
Small menu item:
<wa-dropdown>
<wa-button slot="trigger" caret>Dropdown</wa-button>
<wa-button slot="trigger" with-caret>Dropdown</wa-button>
<wa-dropdown-item size="small">Dropdown Item 1</wa-dropdown-item>
<wa-dropdown-item size="small">Dropdown Item 2</wa-dropdown-item>
<wa-dropdown-item size="small">Dropdown Item 3</wa-dropdown-item>
@@ -69,7 +69,7 @@ Dropdown:
<p>
No size:
<wa-dropdown>
<wa-button slot="trigger" caret>Dropdown</wa-button>
<wa-button slot="trigger" with-caret>Dropdown</wa-button>
<wa-dropdown-item>Dropdown Item 1</wa-dropdown-item>
<wa-dropdown-item>Dropdown Item 2</wa-dropdown-item>
<wa-dropdown-item>Dropdown Item 3</wa-dropdown-item>

10
packages/webawesome/docs/docs/experimental/themer.md
View File

@@ -2319,7 +2319,7 @@ hasOutline: false
<td style="text-align: center;"><wa-tag variant="warning" size="small">Pending</wa-tag></td>
<td>
<wa-dropdown>
<wa-button slot="trigger" caret size="small">Action</wa-button>
<wa-button slot="trigger" with-caret size="small">Action</wa-button>
<wa-dropdown-item>
<wa-icon slot="start" name="check" variant="regular"></wa-icon>
Resolved
@@ -2347,7 +2347,7 @@ hasOutline: false
<td style="text-align: center;"><wa-tag variant="success" size="small">Resolved</wa-tag></td>
<td>
<wa-dropdown>
<wa-button slot="trigger" caret size="small">Action</wa-button>
<wa-button slot="trigger" with-caret size="small">Action</wa-button>
<wa-dropdown-item>
<wa-icon slot="start" name="check" variant="regular"></wa-icon>
Resolved
@@ -2375,7 +2375,7 @@ hasOutline: false
<td style="text-align: center;"><wa-tag variant="warning" size="small">Pending</wa-tag></td>
<td>
<wa-dropdown>
<wa-button slot="trigger" caret size="small">Action</wa-button>
<wa-button slot="trigger" with-caret size="small">Action</wa-button>
<wa-dropdown-item>
<wa-icon slot="start" name="check" variant="regular"></wa-icon>
Resolved
@@ -2403,7 +2403,7 @@ hasOutline: false
<td style="text-align: center;"><wa-tag variant="danger" size="small">Bounced</wa-tag></td>
<td>
<wa-dropdown>
<wa-button slot="trigger" caret size="small">Action</wa-button>
<wa-button slot="trigger" with-caret size="small">Action</wa-button>
<wa-dropdown-item>
<wa-icon slot="start" name="check" variant="regular"></wa-icon>
Resolved
@@ -2431,7 +2431,7 @@ hasOutline: false
<td style="text-align: center;"><wa-tag variant="neutral" size="small">Expired</wa-tag></td>
<td>
<wa-dropdown>
<wa-button slot="trigger" caret size="small">Action</wa-button>
<wa-button slot="trigger" with-caret size="small">Action</wa-button>
<wa-dropdown-item>
<wa-icon slot="start" name="check" variant="regular"></wa-icon>
Resolved

3
packages/webawesome/docs/docs/resources/changelog.md
View File

@@ -23,7 +23,8 @@ 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]
- 🚨 BREAKING: Renamed certain boolean attributes to be more consistent using the `with-*` and `without-*` pattern:
- 🚨 BREAKING: Renamed certain boolean attributes to be consistent using the `with-*` and `without-*` pattern:
- `<wa-button caret>` => `<wa-button with-caret>`
- `<wa-color-picker no-format-toggle>` => `<wa-color-picker without-format-toggle>`
- `<wa-format-number no-grouping>` => `<wa-format-number without-grouping>`
- `<wa-input no-spin-buttons>` => `<wa-input without-spin-buttons>`

4
packages/webawesome/src/components/button/button.test.ts
View File

@@ -75,9 +75,9 @@ describe('<wa-button>', () => {
});
});
describe('when caret', () => {
describe('when with-caret', () => {
it('should have a caret present', async () => {
const el = await fixture<WaButton>(html` <wa-button caret>Button Label</wa-button> `);
const el = await fixture<WaButton>(html` <wa-button with-caret>Button Label</wa-button> `);
expect(el.shadowRoot!.querySelector('[part~="caret"]')).to.exist;
});
});

6
packages/webawesome/src/components/button/button.ts
View File

@@ -81,7 +81,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
/** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */
@property({ type: Boolean, reflect: true }) caret = false;
@property({ attribute: 'with-caret', type: Boolean, reflect: true }) withCaret = false;
/** Disables the button. Does not apply to link buttons. */
@property({ type: Boolean }) disabled = false;
@@ -258,7 +258,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
part="base"
class=${classMap({
button: true,
caret: this.caret,
caret: this.withCaret,
disabled: this.disabled,
loading: this.loading,
rtl: this.localize.dir() === 'rtl',
@@ -286,7 +286,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
<slot part="label" class="label" @slotchange=${this.handleLabelSlotChange}></slot>
<slot name="end" part="end" class="end"></slot>
${
this.caret
this.withCaret
? html`
<wa-icon part="caret" class="caret" library="system" name="chevron-down" variant="solid"></wa-icon>
`