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

Kill library="system" with 🔥

Browse Source
This commit is contained in:
Lea Verou
2025-05-02 10:59:59 -04:00
parent ac1d412a8f
commit c261f25c65
23 changed files with 34 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/_layouts/palette.njk
View File

@@ -141,7 +141,7 @@
@input="tweaking.grayChroma = true" @change="tweaking.grayChroma = false">
<div slot="label">
Gray colorfulness
<wa-icon-button @click="grayChroma = originalGrayChroma" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
<wa-icon-button @click="grayChroma = originalGrayChroma" class="clear-button" name="circle-xmark" variant="regular" label="Reset"></wa-icon-button>
</div>
</wa-slider>
<div class="label-min">Neutral</div>
@@ -160,7 +160,7 @@
@change="tweaking.hue = tweaking.{{ hue }} = false">
<div slot="label">
Tweak {{ hue }} hue
<wa-icon-button @click="hueShifts.{{ hue }} = 0" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
<wa-icon-button @click="hueShifts.{{ hue }} = 0" class="clear-button" name="circle-xmark" variant="regular" label="Reset"></wa-icon-button>
</div>
</wa-slider>
<div class="label-min">More {{hueBefore}}</div>
@@ -204,7 +204,7 @@ style="--min: {{ chromaScaleBounds[0] }}; --max: {{ chromaScaleBounds[1] }};">
@change="tweaking.chroma = false">
<div slot="label">
Overall colorfulness
<wa-icon-button @click="chromaScale = 1" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
<wa-icon-button @click="chromaScale = 1" class="clear-button" name="circle-xmark" variant="regular" label="Reset"></wa-icon-button>
</div>
</wa-slider>
<div class="label-min">More muted</div>

10
src/components/animated-image/animated-image.ts
View File

@@ -107,16 +107,10 @@ export default class WaAnimatedImage extends WebAwesomeElement {
<div part="control-box" class="control-box">
<slot name="play-icon">
<wa-icon
name="play"
library="system"
variant="solid"
class="default"
style="margin-inline-start: 3px;"
></wa-icon>
<wa-icon name="play" variant="solid" class="default" style="margin-inline-start: 3px;"></wa-icon>
</slot>
<slot name="pause-icon">
<wa-icon name="pause" library="system" variant="solid" class="default"></wa-icon>
<wa-icon name="pause" variant="solid" class="default"></wa-icon>
</slot>
</div>
`

2
src/components/avatar/avatar.ts
View File

@@ -81,7 +81,7 @@ export default class WaAvatar extends WebAwesomeElement {
} else {
avatarWithoutImage = html`
<slot name="icon" part="icon" class="icon" role="img" aria-label=${this.label}>
<wa-icon name="user" library="system" variant="solid"></wa-icon>
<wa-icon name="user" variant="solid"></wa-icon>
</slot>
`;
}

6
src/components/breadcrumb/breadcrumb.ts
View File

@@ -91,11 +91,7 @@ export default class WaBreadcrumb extends WebAwesomeElement {
<span hidden aria-hidden="true">
<slot name="separator">
<wa-icon
name=${this.localize.dir() === 'rtl' ? 'chevron-left' : 'chevron-right'}
library="system"
variant="solid"
></wa-icon>
<wa-icon name=${this.localize.dir() === 'rtl' ? 'chevron-left' : 'chevron-right'} variant="solid"></wa-icon>
</slot>
</span>
`;

8
src/components/button/button.ts
View File

@@ -263,13 +263,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
<slot name="prefix" part="prefix" class="prefix"></slot>
<slot part="label" class="label" @slotchange=${this.handleLabelSlotChange}></slot>
<slot name="suffix" part="suffix" class="suffix"></slot>
${
this.caret
? html`
<wa-icon part="caret" class="caret" library="system" name="chevron-down" variant="solid"></wa-icon>
`
: ''
}
${this.caret ? html` <wa-icon part="caret" class="caret" name="chevron-down" variant="solid"></wa-icon> ` : ''}
${this.loading ? html`<wa-spinner part="spinner"></wa-spinner>` : ''}
</${tag}>
`;

4
src/components/carousel/carousel.ts
View File

@@ -608,7 +608,7 @@ export default class WaCarousel extends WebAwesomeElement {
@click=${prevEnabled ? () => this.previous() : null}
>
<slot name="previous-icon">
<wa-icon library="system" name="${isRTL ? 'chevron-right' : 'chevron-left'}"></wa-icon>
<wa-icon name="${isRTL ? 'chevron-right' : 'chevron-left'}"></wa-icon>
</slot>
</button>
@@ -625,7 +625,7 @@ export default class WaCarousel extends WebAwesomeElement {
@click=${nextEnabled ? () => this.next() : null}
>
<slot name="next-icon">
<wa-icon library="system" name="${isRTL ? 'chevron-left' : 'chevron-right'}"></wa-icon>
<wa-icon name="${isRTL ? 'chevron-left' : 'chevron-right'}"></wa-icon>
</slot>
</button>
</div>

2
src/components/checkbox/checkbox.ts
View File

@@ -234,7 +234,7 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
@click=${this.handleClick}
/>
<wa-icon part="${iconState}-icon icon" library="system" name=${iconName}></wa-icon>
<wa-icon part="${iconState}-icon icon" name=${iconName}></wa-icon>
</span>
<slot part="label"></slot>

1
src/components/color-picker/color-picker.ts
View File

@@ -1041,7 +1041,6 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
@focus=${this.stopNestedEventPropagation}
>
<wa-icon
library="system"
name="eye-dropper"
variant="solid"
label=${this.localize.term('selectAColorFromTheScreen')}

2
src/components/comparer/comparer.ts
View File

@@ -133,7 +133,7 @@ export default class WaComparer extends WebAwesomeElement {
tabindex="0"
>
<slot name="handle">
<wa-icon library="system" name="grip-vertical" variant="solid"></wa-icon>
<wa-icon name="grip-vertical" variant="solid"></wa-icon>
</slot>
</div>
</div>

6
src/components/copy-button/copy-button.ts
View File

@@ -196,13 +196,13 @@ export default class WaCopyButton extends WebAwesomeElement {
<!-- Render a visually hidden label to appease the accessibility checking gods -->
<span class="wa-visually-hidden">${this.currentLabel}</span>
<slot part="copy-icon" name="copy-icon">
<wa-icon library="system" name="copy" variant="regular" fixed-width></wa-icon>
<wa-icon name="copy" variant="regular" fixed-width></wa-icon>
</slot>
<slot part="success-icon" name="success-icon" variant="solid" hidden>
<wa-icon library="system" name="check" fixed-width></wa-icon>
<wa-icon name="check" fixed-width></wa-icon>
</slot>
<slot part="error-icon" name="error-icon" variant="solid" hidden>
<wa-icon library="system" name="xmark" fixed-width></wa-icon>
<wa-icon name="xmark" fixed-width></wa-icon>
</slot>
<wa-tooltip
class=${classMap({

14
src/components/details/details.ts
View File

@@ -235,20 +235,10 @@ export default class WaDetails extends WebAwesomeElement {
<span part="icon">
<slot name="expand-icon">
<wa-icon
library="system"
variant="solid"
name=${isRtl ? 'chevron-left' : 'chevron-right'}
fixed-width
></wa-icon>
<wa-icon variant="solid" name=${isRtl ? 'chevron-left' : 'chevron-right'} fixed-width></wa-icon>
</slot>
<slot name="collapse-icon">
<wa-icon
library="system"
variant="solid"
name=${isRtl ? 'chevron-left' : 'chevron-right'}
fixed-width
></wa-icon>
<wa-icon variant="solid" name=${isRtl ? 'chevron-left' : 'chevron-right'} fixed-width></wa-icon>
</slot>
</span>
</summary>

1
src/components/dialog/dialog.ts
View File

@@ -239,7 +239,6 @@ export default class WaDialog extends WebAwesomeElement {
class="close"
name="xmark"
label=${this.localize.term('close')}
library="system"
variant="solid"
@click="${(event: PointerEvent) => this.requestClose(event.target as Element)}"
></wa-icon-button>

1
src/components/drawer/drawer.ts
View File

@@ -255,7 +255,6 @@ export default class WaDrawer extends WebAwesomeElement {
class="close"
name="xmark"
label=${this.localize.term('close')}
library="system"
variant="solid"
@click="${(event: PointerEvent) => this.requestClose(event.target as Element)}"
></wa-icon-button>

10
src/components/icon-button/icon-button.test.ts
View File

@@ -34,11 +34,7 @@ describe('<wa-icon-button>', () => {
describe('when styling the host element', () => {
it('renders the correct color and font size', async () => {
const el = await fixture<WaIconButton>(html`
<wa-icon-button
library="system"
name="check"
style="color: rgb(0, 136, 221); font-size: 2rem;"
></wa-icon-button>
<wa-icon-button name="check" style="color: rgb(0, 136, 221); font-size: 2rem;"></wa-icon-button>
`);
const icon = el.shadowRoot!.querySelector('wa-icon')!;
const styles = getComputedStyle(icon);
@@ -50,9 +46,7 @@ describe('<wa-icon-button>', () => {
describe('when icon attributes are present', () => {
it('renders an wa-icon from a library', async () => {
const el = await fixture<WaIconButton>(html`
<wa-icon-button library="system" name="check"></wa-icon-button>
`);
const el = await fixture<WaIconButton>(html` <wa-icon-button name="check"></wa-icon-button> `);
expect(el.shadowRoot?.querySelector('wa-icon')).to.exist;
});

10
src/components/icon/icon.test.ts
View File

@@ -53,7 +53,7 @@ describe('<wa-icon>', () => {
});
it('renders pre-loaded system icons and emits wa-load event', async () => {
const el = await fixture<WaIcon>(html` <wa-icon library="system"></wa-icon> `);
const el = await fixture<WaIcon>(html` <wa-icon></wa-icon> `);
const listener = oneEvent(el, 'wa-load') as Promise<WaLoadEvent>;
el.name = 'check';
@@ -65,12 +65,12 @@ describe('<wa-icon>', () => {
});
it('the icon is accessible', async () => {
const el = await fixture<WaIcon>(html` <wa-icon library="system" name="check"></wa-icon> `);
const el = await fixture<WaIcon>(html` <wa-icon name="check"></wa-icon> `);
await expect(el).to.be.accessible();
});
it('the icon has the correct default aria attributes', async () => {
const el = await fixture<WaIcon>(html` <wa-icon library="system" name="check"></wa-icon> `);
const el = await fixture<WaIcon>(html` <wa-icon name="check"></wa-icon> `);
expect(el.getAttribute('role')).to.be.null;
expect(el.getAttribute('aria-label')).to.be.null;
@@ -81,9 +81,7 @@ describe('<wa-icon>', () => {
describe('when a label is provided', () => {
it('the icon has the correct default aria attributes', async () => {
const fakeLabel = 'a label';
const el = await fixture<WaIcon>(html`
<wa-icon label="${fakeLabel}" library="system" name="check"></wa-icon>
`);
const el = await fixture<WaIcon>(html` <wa-icon label="${fakeLabel}" name="check"></wa-icon> `);
expect(el.getAttribute('role')).to.equal('img');
expect(el.getAttribute('aria-label')).to.equal(fakeLabel);

6
src/components/input/input.ts
View File

@@ -445,7 +445,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
tabindex="-1"
>
<slot name="clear-icon">
<wa-icon name="circle-xmark" library="system" variant="regular"></wa-icon>
<wa-icon name="circle-xmark" variant="regular"></wa-icon>
</slot>
</button>
`
@@ -463,12 +463,12 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
${!this.passwordVisible
? html`
<slot name="show-password-icon">
<wa-icon name="eye" library="system" variant="regular"></wa-icon>
<wa-icon name="eye" variant="regular"></wa-icon>
</slot>
`
: html`
<slot name="hide-password-icon">
<wa-icon name="eye-slash" library="system" variant="regular"></wa-icon>
<wa-icon name="eye-slash" variant="regular"></wa-icon>
</slot>
`}
</button>

9
src/components/menu-item/menu-item.ts
View File

@@ -211,7 +211,7 @@ export default class WaMenuItem extends WebAwesomeElement {
?aria-expanded="${isSubmenuExpanded ? true : false}"
>
<span part="checked-icon" class="check">
<wa-icon name="check" library="system" variant="solid" aria-hidden="true"></wa-icon>
<wa-icon name="check" variant="solid" aria-hidden="true"></wa-icon>
</span>
<slot name="prefix" part="prefix" class="prefix"></slot>
@@ -221,12 +221,7 @@ export default class WaMenuItem extends WebAwesomeElement {
<slot name="suffix" part="suffix" class="suffix"></slot>
<span part="submenu-icon" class="chevron">
<wa-icon
name=${isRtl ? 'chevron-left' : 'chevron-right'}
library="system"
variant="solid"
aria-hidden="true"
></wa-icon>
<wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} variant="solid" aria-hidden="true"></wa-icon>
</span>
${this.submenuController.renderSubmenu()} ${this.loading ? html`<wa-spinner part="spinner"></wa-spinner>` : ''}

9
src/components/option/option.ts
View File

@@ -184,14 +184,7 @@ export default class WaOption extends WebAwesomeElement {
render() {
return html`
<wa-icon
part="checked-icon"
class="check"
name="check"
library="system"
variant="solid"
aria-hidden="true"
></wa-icon>
<wa-icon part="checked-icon" class="check" name="check" variant="solid" aria-hidden="true"></wa-icon>
<slot part="prefix" name="prefix" class="prefix"></slot>
<slot part="label" class="label" @slotchange=${this.handleDefaultSlotChange}></slot>
<slot part="suffix" name="suffix" class="suffix"></slot>

3
src/components/rating/rating.ts
View File

@@ -68,8 +68,7 @@ export default class WaRating extends WebAwesomeElement {
* The function should return a string containing trusted HTML of the symbol to render at the specified value. Works
* well with `<wa-icon>` elements.
*/
@property() getSymbol: (value: number) => string = () =>
'<wa-icon name="star" library="system" variant="solid"></wa-icon>';
@property() getSymbol: (value: number) => string = () => '<wa-icon name="star" variant="solid"></wa-icon>';
/** The component's size. */
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';

4
src/components/select/select.ts
View File

@@ -957,7 +957,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
tabindex="-1"
>
<slot name="clear-icon">
<wa-icon name="circle-xmark" library="system" variant="regular"></wa-icon>
<wa-icon name="circle-xmark" variant="regular"></wa-icon>
</slot>
</button>
`
@@ -966,7 +966,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
<slot name="suffix" part="suffix" class="suffix"></slot>
<slot name="expand-icon" part="expand-icon" class="expand-icon">
<wa-icon library="system" name="chevron-down" variant="solid"></wa-icon>
<wa-icon name="chevron-down" variant="solid"></wa-icon>
</slot>
</div>

2
src/components/tab-group/tab-group.ts
View File

@@ -405,7 +405,6 @@ export default class WaTabGroup extends WebAwesomeElement {
exportparts="base:scroll-button__base"
class="scroll-button scroll-button-start"
name=${isRtl ? 'chevron-right' : 'chevron-left'}
library="system"
variant="solid"
label=${this.localize.term('scrollToStart')}
@click=${this.handleScrollToStart}
@@ -427,7 +426,6 @@ export default class WaTabGroup extends WebAwesomeElement {
class="scroll-button scroll-button-end"
exportparts="base:scroll-button__base"
name=${isRtl ? 'chevron-left' : 'chevron-right'}
library="system"
variant="solid"
label=${this.localize.term('scrollToEnd')}
@click=${this.handleScrollToEnd}

1
src/components/tag/tag.ts
View File

@@ -68,7 +68,6 @@ export default class WaTag extends WebAwesomeElement {
part="remove-button"
exportparts="base:remove-button__base"
name="xmark"
library="system"
variant="solid"
label=${this.localize.term('remove')}
class="remove"

4
src/components/tree-item/tree-item.ts
View File

@@ -276,10 +276,10 @@ export default class WaTreeItem extends WebAwesomeElement {
this.loading,
() => html` <wa-spinner part="spinner" exportparts="base:spinner__base"></wa-spinner> `,
)}
<wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" variant="solid"></wa-icon>
<wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} variant="solid"></wa-icon>
</slot>
<slot class="expand-icon-slot" name="collapse-icon">
<wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" variant="solid"></wa-icon>
<wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} variant="solid"></wa-icon>
</slot>
</div>