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

Support icon buttons directly in <wa-button> (#1030)

Browse Source 
* support icon buttons directly in <wa-button>

* [progress] replace `<wa-icon-button>` instances

* change close buttons to `<wa-button>`

* fix formatting

* change scroll buttons to `<wa-button>`

* update tests

* change tag remove button to `<wa-button>`

* fix tag tests

* remove nonexistent parts from tab docs

* change viewport demo controls to `<wa-button>`

* fix leftover icon button dependencies

* fix icon button usage in palettes and themes

* revert mistakenly committed change to theme preview heights

* fix icon button styles in old themer

* replace icon buttons in style utility examples

* fix import

* handle press on button, not icon-button, in select

* fix stray icon button references in docs

* fix broken home page button

* remove icon button overrides from Matter theme

* add generated directories so they're excluded from search results

* add dire

* remove icon-button component

---------

Co-authored-by: lindsaym-fa <dev@lindsaym.design>
This commit is contained in:
Cory LaViska
2025-06-05 15:16:03 -04:00
committed by GitHub
parent 71d45eabbd
commit d2e32a0a53
53 changed files with 469 additions and 740 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/webawesome/.gitignore vendored Normal file
View File

@@ -0,0 +1,4 @@
_site
dist
dist-cdn
src/react

1
packages/webawesome/docs/_includes/sidebar.njk
View File

@@ -126,7 +126,6 @@
<li><a href="/docs/components/format-date/">Format Date</a></li>
<li><a href="/docs/components/format-number/">Format Number</a></li>
<li><a href="/docs/components/icon/">Icon</a></li>
<li><a href="/docs/components/icon-button/">Icon Button</a></li>
<li><a href="/docs/components/include/">Include</a></li>
<li><a href="/docs/components/input/">Input</a></li>
<li>

4
packages/webawesome/docs/_includes/svgs/icon-button.njk
View File

@@ -1,4 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 6C0 2.68629 2.68629 0 6 0H26C29.3137 0 32 2.68629 32 6V26C32 29.3137 29.3137 32 26 32H6C2.68629 32 0 29.3137 0 26V6Z" fill="var(--wa-color-neutral-fill-normal)"/>
<path d="M23.4688 13.2188C23.5938 13.5 23.5 13.7812 23.2812 14L21.9375 15.2188C21.9688 15.4688 21.9688 15.75 21.9688 16C21.9688 16.2812 21.9688 16.5625 21.9375 16.8125L23.2812 18.0312C23.5 18.2188 23.5938 18.5312 23.4688 18.8125C23.3438 19.1875 23.1875 19.5312 23 19.875L22.8438 20.125C22.625 20.4688 22.4062 20.8125 22.1562 21.0938C21.9688 21.3438 21.6562 21.4062 21.375 21.3125L19.6562 20.7812C19.2188 21.0938 18.75 21.3438 18.2812 21.5625L17.875 23.3438C17.8125 23.625 17.5938 23.8438 17.3125 23.9062C16.875 23.9688 16.4375 24 15.9688 24C15.5312 24 15.0938 23.9688 14.6562 23.9062C14.375 23.8438 14.1562 23.625 14.0938 23.3438L13.6875 21.5625C13.1875 21.3438 12.75 21.0938 12.3125 20.7812L10.5938 21.3125C10.3125 21.4062 10 21.3438 9.8125 21.125C9.5625 20.8125 9.34375 20.4688 9.125 20.125L8.96875 19.875C8.78125 19.5312 8.625 19.1875 8.5 18.8125C8.375 18.5312 8.46875 18.25 8.6875 18.0312L10.0312 16.8125C10 16.5625 10 16.2812 10 16C10 15.75 10 15.4688 10.0312 15.2188L8.6875 14C8.46875 13.7812 8.375 13.5 8.5 13.2188C8.625 12.8438 8.78125 12.5 8.96875 12.1562L9.125 11.9062C9.34375 11.5625 9.5625 11.2188 9.8125 10.9062C10 10.6875 10.3125 10.625 10.5938 10.7188L12.3125 11.25C12.75 10.9375 13.2188 10.6562 13.6875 10.4688L14.0938 8.6875C14.1562 8.40625 14.375 8.1875 14.6562 8.125C15.0938 8.0625 15.5312 8 16 8C16.4375 8 16.875 8.0625 17.3125 8.125C17.5938 8.15625 17.8125 8.40625 17.875 8.6875L18.2812 10.4688C18.7812 10.6562 19.2188 10.9375 19.6562 11.25L21.375 10.7188C21.6562 10.625 21.9688 10.6875 22.1562 10.9062C22.4062 11.2188 22.625 11.5625 22.8438 11.9062L23 12.1562C23.1875 12.5 23.3438 12.8438 23.5 13.2188H23.4688ZM16 18.5C16.875 18.5 17.6875 18.0312 18.1562 17.25C18.5938 16.5 18.5938 15.5312 18.1562 14.75C17.6875 14 16.875 13.5 16 13.5C15.0938 13.5 14.2812 14 13.8125 14.75C13.375 15.5312 13.375 16.5 13.8125 17.25C14.2812 18.0312 15.0938 18.5 16 18.5Z" fill="var(--wa-color-neutral-on-normal)"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

28
packages/webawesome/docs/_includes/theme-showcase.njk
View File

@@ -3,7 +3,9 @@
<wa-card>
<div slot="header" class="wa-split">
<h3 class="wa-heading-m">Your Cart</h3>
<wa-icon-button name="xmark" tabindex="-1"></wa-icon-button>
<wa-button appearance="plain" size="small" tabindex="-1">
<wa-icon name="xmark" label="Close"></wa-icon>
</wa-button>
</div>
<div class="wa-stack wa-gap-xl">
<div class="wa-flank">
@@ -73,7 +75,9 @@
<div class="wa-stack">
<div class="wa-split">
<h3 class="wa-heading-m">To-Do</h3>
<wa-icon-button tabindex="-1" name="plus" label="Add task"></wa-icon-button>
<wa-button appearance="plain" size="small" tabindex="-1">
<wa-icon name="plus" label="Add task"></wa-icon>
</wa-button>
</div>
<wa-checkbox tabindex="-1" checked>Umbrella for Adelard</wa-checkbox>
<wa-checkbox tabindex="-1" checked>Waste-paper basket for Dora</wa-checkbox>
@@ -98,7 +102,9 @@
</div>
<span class="wa-caption-m">Samwise G</span>
</div>
<wa-icon-button tabindex="-1" name="ellipsis" label="Options"></wa-icon-button>
<wa-button appearance="plain" size="small" tabindex="-1">
<wa-icon name="ellipsis" label="Options"></wa-icon>
</wa-button>
</div>
<div class="wa-stack wa-gap-2xs">
<wa-progress-bar value="34" style="height: 0.5em"></wa-progress-bar>
@@ -108,9 +114,15 @@
</div>
</div>
<div class="wa-grid wa-align-items-center" style="--min-column-size: 1em; justify-items: center;">
<wa-icon-button tabindex="-1" name="backward" label="Skip backward"></wa-icon-button>
<wa-icon-button tabindex="-1" name="pause" style="font-size: var(--wa-font-size-2xl);" label="Pause"></wa-icon-button>
<wa-icon-button tabindex="-1" name="forward" label="Skip forward"></wa-icon-button>
<wa-button appearance="plain" tabindex="-1">
<wa-icon name="backward" label="Skip backward"></wa-icon>
</wa-button>
<wa-button appearance="plain" size="large" tabindex="-1">
<wa-icon name="pause" label="Pause"></wa-icon>
</wa-button>
<wa-button appearance="plain" tabindex="-1">
<wa-icon name="forward" label="Skip forward"></wa-icon>
</wa-button>
</div>
</div>
</wa-card>
@@ -253,7 +265,9 @@
</div>
</a>
<wa-dropdown>
<wa-icon-button id="more-actions-2" slot="trigger" name="ellipsis-vertical" label="View menu" tabindex="-1"></wa-icon-button>
<wa-button id="more-actions-2" slot="trigger" appearance="plain" size="small" tabindex="-1">
<wa-icon name="ellipsis-vertical" label="View menu"></wa-icon>
</wa-button>
<wa-menu>
<wa-menu-item>Copy link</wa-menu-item>
<wa-menu-item>Rename</wa-menu-item>

4
packages/webawesome/docs/_includes/visual-tests/alignment.njk
View File

@@ -70,7 +70,9 @@
<div class="alignment">
<wa-avatar></wa-avatar>
<wa-rating></wa-rating>
<wa-icon-button name="gear" label="Settings"></wa-icon-button>
<wa-button appearance="plain">
<wa-icon name="gear" label="Settings"></wa-icon>
</wa-button>
<wa-spinner></wa-spinner>
</div>
</div>

30
packages/webawesome/docs/_layouts/palette.njk
View File

@@ -33,14 +33,14 @@
<h1 class="title">
<span v-content="title">{{ title }}</span>
<template v-if="saved || tweaked">
<wa-icon-button name="pencil" label="Rename palette" @click="rename"></wa-icon-button>
<wa-icon-button v-if="saved" class="delete" name="trash" label="Delete palette" @click="deleteSaved"></wa-icon-button>
<wa-button appearance="plain" size="small" @click="rename">
<wa-icon name="pencil" label="Rename palette"></wa-icon>
</wa-button>
<wa-button appearance="plain" size="small" v-if="saved" class="delete" @click="deleteSaved">
<wa-icon name="trash" label="Delete palette"></wa-icon>
</wa-button>
<wa-button @click="save()" :disabled="!unsavedChanges"
:variant="unsavedChanges ? 'success' : 'neutral'" size="small" :appearance="unsavedChanges ? 'accent' : 'outlined'">
<span slot="prefix" class="icon-modifier">
<wa-icon name="sidebar" variant="regular"></wa-icon>
<wa-icon name="circle-plus" class="modifier" style="color: light-dark(var(--wa-color-green-70), var(--wa-color-green-60));"></wa-icon>
</span>
<span v-content="unsavedChanges ? 'Save' : 'Saved'">Save</span>
</wa-button>
</template>
@@ -71,10 +71,8 @@
<wa-tag v-for="tweakHumanReadable, param in tweaksHumanReadable" with-remove @wa-remove="reset(param)" v-content="tweakHumanReadable"></wa-tag>
</div>
<wa-button @click="reset()" appearance="outlined" variant="danger">
<span slot="prefix" class="icon-modifier">
<wa-icon name="circle-xmark" variant="regular"></wa-icon>
</span>
<wa-button @click="reset()" appearance="outlined" variant="danger" size="small">
<wa-icon slot="prefix" name="circle-xmark" variant="regular"></wa-icon>
Reset
</wa-button>
</wa-callout>
@@ -130,7 +128,9 @@
@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-button appearance="plain" @click="grayChroma = originalGrayChroma" class="clear-button">
<wa-icon name="circle-xmark" label="Reset" variant="regular"></wa-icon>
</wa-button>
</div>
</wa-slider>
<div class="label-min">Neutral</div>
@@ -149,7 +149,9 @@
@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-button appearance="plain" @click="hueShifts.{{ hue }} = 0" class="clear-button">
<wa-icon name="circle-xmark" label="Reset" variant="regular"></wa-icon>
</wa-button>
</div>
</wa-slider>
<div class="label-min">More {{hueBefore}}</div>
@@ -193,7 +195,9 @@ 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-button appearance="plain" @click="chromaScale = 1" class="clear-button">
<wa-icon name="circle-xmark" label="Reset" variant="regular"></wa-icon>
</wa-button>
</div>
</wa-slider>
<div class="label-min">More muted</div>

2
packages/webawesome/docs/_utils/copy-code.js
View File

@@ -32,7 +32,7 @@ export function copyCodePlugin(eleventyConfig, options = {}) {
}
// Add a copy button
pre.innerHTML += `<wa-icon-button href="#${preId}" class="block-link-icon" name="link"></wa-icon-button>
pre.innerHTML += `<wa-button href="#${preId}" class="block-link-icon" appearance="plain" size="small"><wa-icon name="link" label="Copy link"></wa-icon></wa-button>
<wa-copy-button from="${codeId}" class="copy-button"></wa-copy-button>`;
});

4
packages/webawesome/docs/assets/examples/page/demo-1.html
View File

@@ -32,7 +32,9 @@
</header>
<nav slot="subheader">
<div class="wa-cluster" style="flex-wrap: nowrap">
<wa-icon-button data-toggle-nav name="bars" label="Menu"></wa-icon-button>
<wa-button data-toggle-nav appearance="plain" size="small">
<wa-icon name="bars" label="Menu"></wa-icon>
</wa-button>
<wa-breadcrumb style="font-size: var(--wa-font-size-s)">
<wa-breadcrumb-item>Field Guides</wa-breadcrumb-item>
<wa-breadcrumb-item>Owls</wa-breadcrumb-item>

91
packages/webawesome/docs/assets/examples/page/demo-2.html
View File

@@ -12,7 +12,9 @@
<wa-page class="wa-dark">
<header slot="header">
<div class="wa-cluster">
<wa-icon-button name="bars" label="Menu" data-toggle-nav></wa-icon-button>
<wa-button data-toggle-nav appearance="plain" size="small">
<wa-icon name="bars" label="Menu"></wa-icon>
</wa-button>
<wa-icon name="record-vinyl"></wa-icon>
<span class="wa-heading-m">radiogaga</span>
</div>
@@ -30,7 +32,10 @@
</wa-input>
<div class="wa-split">
<h2 class="wa-heading-s">For You</h2>
<wa-icon-button id="settings" name="gear" label="Settings"></wa-icon-button>
<wa-button id="settings" appearance="plain" size="small">
<wa-icon name="gear" label="Settings"></wa-icon>
</wa-button>
<wa-tooltip for="settings">Settings</wa-tooltip>
</div>
</div>
<nav slot="navigation">
@@ -120,12 +125,18 @@
</ul>
</nav>
<div slot="main-header">
<wa-icon-button id="back" name="chevron-left" label="Back"></wa-icon-button>
<wa-button id="back" appearance="plain" size="small">
<wa-icon name="chevron-left" label="Back"></wa-icon>
</wa-button>
<wa-tooltip for="back" placement="bottom" distance="2">Back</wa-tooltip>
<div class="wa-cluster">
<wa-icon-button id="favorite" name="heart" variant="regular" label="Favorite"></wa-icon-button>
<wa-button id="favorite" appearance="plain" size="small">
<wa-icon name="heart" label="Favorite" variant="regular"></wa-icon>
</wa-button>
<wa-tooltip for="favorite" placement="bottom" distance="2">Favorite</wa-tooltip>
<wa-icon-button id="options" name="ellipsis" label="Options"></wa-icon-button>
<wa-button id="options" appearance="plain" size="small">
<wa-icon name="ellipsis" label="Options"></wa-icon>
</wa-button>
<wa-tooltip for="options" placement="bottom" distance="2">Options</wa-tooltip>
</div>
</div>
@@ -152,10 +163,16 @@
</div>
<div id="play-controls" class="wa-split wa-gap-xl">
<div class="wa-cluster wa-gap-xl">
<wa-icon-button name="play" label="Play"></wa-icon-button>
<wa-icon-button name="shuffle" label="Shuffle"></wa-icon-button>
<wa-button variant="brand" size="large">
<wa-icon name="play" label="Play"></wa-icon>
</wa-button>
<wa-button appearance="plain">
<wa-icon name="shuffle" label="Shuffle"></wa-icon>
</wa-button>
</div>
<wa-icon-button name="plus" label="Add to Library"></wa-icon-button>
<wa-button appearance="plain">
<wa-icon name="plus" label="Add to Library"></wa-icon>
</wa-button>
</div>
</div>
</div>
@@ -167,7 +184,9 @@
</span>
<span class="wa-cluster">
<span class="wa-caption-m">3:27</span>
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
<wa-button appearance="plain" size="small">
<wa-icon name="ellipsis" label="Song Options"></wa-icon>
</wa-button>
</span>
</li>
<li class="wa-split">
@@ -177,7 +196,9 @@
</span>
<span class="wa-cluster">
<span class="wa-caption-m">2:36</span>
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
<wa-button appearance="plain" size="small">
<wa-icon name="ellipsis" label="Song Options"></wa-icon>
</wa-button>
</span>
</li>
<li class="wa-split">
@@ -187,7 +208,9 @@
</span>
<span class="wa-cluster">
<span class="wa-caption-m">2:51</span>
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
<wa-button appearance="plain" size="small">
<wa-icon name="ellipsis" label="Song Options"></wa-icon>
</wa-button>
</span>
</li>
<li class="wa-split">
@@ -197,7 +220,9 @@
</span>
<span class="wa-cluster">
<span class="wa-caption-m">3:05</span>
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
<wa-button appearance="plain" size="small">
<wa-icon name="ellipsis" label="Song Options"></wa-icon>
</wa-button>
</span>
</li>
<li class="wa-split">
@@ -207,7 +232,9 @@
</span>
<span class="wa-cluster">
<span class="wa-caption-m">1:56</span>
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
<wa-button appearance="plain" size="small">
<wa-icon name="ellipsis" label="Song Options"></wa-icon>
</wa-button>
</span>
</li>
<li class="wa-split">
@@ -217,7 +244,9 @@
</span>
<span class="wa-cluster">
<span class="wa-caption-m">3:32</span>
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
<wa-button appearance="plain" size="small">
<wa-icon name="ellipsis" label="Song Options"></wa-icon>
</wa-button>
</span>
</li>
<li class="wa-split">
@@ -227,7 +256,9 @@
</span>
<span class="wa-cluster">
<span class="wa-caption-m">2:46</span>
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
<wa-button appearance="plain" size="small">
<wa-icon name="ellipsis" label="Song Options"></wa-icon>
</wa-button>
</span>
</li>
<li class="wa-split">
@@ -237,7 +268,9 @@
</span>
<span class="wa-cluster">
<span class="wa-caption-m">3:27</span>
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
<wa-button appearance="plain" size="small">
<wa-icon name="ellipsis" label="Song Options"></wa-icon>
</wa-button>
</span>
</li>
<li class="wa-split">
@@ -247,7 +280,9 @@
</span>
<span class="wa-cluster">
<span class="wa-caption-m">2:13</span>
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
<wa-button appearance="plain" size="small">
<wa-icon name="ellipsis" label="Song Options"></wa-icon>
</wa-button>
</span>
</li>
<li class="wa-split">
@@ -260,7 +295,9 @@
</span>
<span class="wa-cluster">
<span class="wa-caption-m">2:55</span>
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
<wa-button appearance="plain" size="small">
<wa-icon name="ellipsis" label="Song Options"></wa-icon>
</wa-button>
</span>
</li>
<li class="wa-split">
@@ -273,7 +310,9 @@
</span>
<span class="wa-cluster">
<span class="wa-caption-m">3:10</span>
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
<wa-button appearance="plain" size="small">
<wa-icon name="ellipsis" label="Song Options"></wa-icon>
</wa-button>
</span>
</li>
<li class="wa-split">
@@ -286,7 +325,9 @@
</span>
<span class="wa-cluster">
<span class="wa-caption-m">3:22</span>
<wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
<wa-button appearance="plain" size="small">
<wa-icon name="ellipsis" label="Song Options"></wa-icon>
</wa-button>
</span>
</li>
</ol>
@@ -380,8 +421,8 @@
aspect-ratio: 1;
color: var(--wa-color-brand-fill-loud);
display: flex;
height: var(--flank-size);
justify-content: center;
padding-block: 0.5em;
}
#recent wa-icon {
border-radius: var(--wa-border-radius-s);
@@ -420,16 +461,14 @@
[slot='main-header'] {
background-color: var(--wa-color-surface-raised);
}
#play-controls wa-icon-button::part(base) {
#play-controls wa-button::part(base) {
border: var(--wa-border-width-l) var(--wa-border-style) currentColor;
border-radius: var(--wa-border-radius-circle);
font-size: 1.5rem;
}
#play-controls wa-icon-button[name='play']::part(base) {
background-color: var(--wa-color-brand-fill-loud);
#play-controls wa-button:has(wa-icon[name='play'])::part(base) {
border: none;
color: var(--wa-color-brand-on-loud);
font-size: 3rem;
font-size: 2.5rem;
padding: 0.5em 0.45em 0.5em 0.55em;
}
[slot='main-footer'].wa-grid > * {

8
packages/webawesome/docs/assets/scripts/sidebar-tweaks.js
View File

@@ -79,10 +79,12 @@ const sidebar = {
let append = [...badges];
if (entity.delete) {
let deleteButton = Object.assign(document.createElement('wa-icon-button'), {
name: 'trash',
label: 'Delete',
let deleteButton = Object.assign(document.createElement('wa-button'), {
appearance: 'plain',
variant: 'danger',
size: 'small',
className: 'delete',
innerHTML: '<wa-icon name="trash" label="Delete"></wa-icon>',
});
deleteButton.addEventListener('click', () => entity.delete());
append.push(deleteButton);

35
packages/webawesome/docs/assets/styles/docs.css
View File

@@ -193,10 +193,13 @@ wa-badge.pro {
}
}
wa-icon-button.delete {
vertical-align: -0.2em;
wa-button.delete {
margin-inline-start: var(--wa-space-xs);
&:hover wa-icon {
color: var(--wa-color-danger-on-quiet);
}
&:not(li:hover > *, :focus) {
opacity: 0;
}
@@ -208,12 +211,9 @@ wa-badge.pro {
}
}
wa-icon-button.delete {
&:hover {
color: var(--wa-color-danger-on-quiet);
}
wa-button.delete {
&::part(base):hover {
color: var(--wa-color-danger-on-quiet);
background: var(--wa-color-danger-fill-quiet);
}
@@ -545,27 +545,6 @@ table.colors {
--icon-color: var(--wa-color-success-fill-quiet);
}
.icon-modifier {
position: relative;
display: inline-flex;
.modifier {
position: absolute;
bottom: -0.1em;
right: -0.3em;
font-size: 60%;
&::part(svg) {
stroke: var(--background-color, var(--wa-color-surface-default));
stroke-width: 100px;
paint-order: stroke;
overflow: visible;
stroke-linecap: round;
stroke-linejoin: round;
}
}
}
/* Layout Examples */
.layout-example-boundary {
border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);

12
packages/webawesome/docs/assets/styles/theme-headers.css
View File

@@ -124,7 +124,7 @@ html.wa-theme-tailspin .preview-container {
&::part(footer) {
border: none;
}
& wa-icon-button {
& wa-button {
color: var(--wa-color-base-50);
}
}
@@ -226,11 +226,11 @@ html.wa-theme-brutalist .preview-container {
--wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-gray-30), white 40%);
}
.message-composer [slot='header'] wa-icon-button::part(base) {
.message-composer [slot='header'] wa-button::part(base) {
color: var(--wa-color-neutral-on-loud);
}
.message-composer .grouped-buttons wa-icon-button::part(base):hover {
.message-composer .grouped-buttons wa-button::part(base):hover {
background-color: var(--wa-color-neutral-fill-normal);
color: var(--wa-color-text-normal);
}
@@ -421,7 +421,7 @@ html.wa-theme-playful .preview-container {
--wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
}
.message-composer wa-icon-button {
.message-composer wa-button {
color: var(--wa-text-color-normal);
font-size: var(--wa-font-size-l);
}
@@ -662,12 +662,12 @@ html.wa-theme-premium .preview-container {
--padding: var(--wa-space-s) var(--wa-space-xl);
}
.message-composer .grouped-buttons wa-icon-button::part(base) {
.message-composer .grouped-buttons wa-button::part(base) {
block-size: var(--wa-form-control-height-s);
inline-size: var(--wa-form-control-height-s);
justify-content: center;
}
.message-composer .grouped-buttons wa-icon-button::part(base):hover {
.message-composer .grouped-buttons wa-button::part(base):hover {
background-color: var(--wa-color-neutral-fill-normal);
color: var(--wa-color-text-normal);
}

9
packages/webawesome/docs/assets/styles/ui.css
View File

@@ -5,10 +5,11 @@
}
.title {
wa-icon-button {
font-size: var(--wa-font-size-l);
color: var(--wa-color-text-quiet);
display: flex;
align-items: center;
gap: var(--wa-space-xs);
wa-button:has(wa-icon) {
&:not(:hover, :focus) {
opacity: 0.5;
}
@@ -131,7 +132,7 @@
field-sizing: content;
}
wa-icon-button {
wa-button {
font-size: 90%;
}
}

8
packages/webawesome/docs/assets/vue/components/editable-text.js
View File

@@ -4,11 +4,15 @@ const template = `
<span class="editable-text">
<template v-if="isEditing">
<input ref="input" class="wa-size-s" :aria-label="label" :value="value" @input="handleInput" @keydown.enter="done" @keydown.esc="cancel" @blur="handleBlur" />
<wa-icon-button v-if="blur !== 'done'" name="check" label="Done editing" @click="done"></wa-icon-button>
<wa-button appearance="plain" v-if="blur !== 'done'" @click="done">
<wa-icon name="check" label="Done editing"></wa-icon>
</wa-button>
</template>
<template v-else>
<span class="text" ref="wrapper" @focus="edit" @click="edit" tabindex="0">{{ value }}</span>
<wa-icon-button name="pencil" :label="'Edit ' + label" @click="edit"></wa-icon-button>
<wa-button appearance="plain" @click="edit">
<wa-icon name="pencil" :label="'Edit ' + label"></wa-icon>
</wa-button>
</template>
</span>
`;

4
packages/webawesome/docs/assets/vue/components/ui-slider.js
View File

@@ -8,7 +8,9 @@ const template = `
<div class="ui-slider-header">
<label :for="sliderId">{{ label }}</label>
<info-tip v-if="clearable && (value !== defaultValue ?? initialValue)" :text="'Reset to ' + valueFormatter(defaultValue ?? initialValue)">
<wa-icon-button @click="value = defaultValue ?? initialValue" class="clear-button" name="circle-xmark" library="system" variant="regular" :label="'Reset to ' + tooltipFormatter(defaultValue ?? initialValue)"></wa-icon-button>
<wa-button @click="value = defaultValue ?? initialValue" class="clear-button">
<wa-icon name="circle-xmark" library="system" variant="regular" :label="'Reset to ' + tooltipFormatter(defaultValue ?? initialValue)"></wa-icon>
</wa-button>
</info-tip>
</div>
<info-tip v-if="$slots.min" :text="'Set to min (' + valueFormatter(min) + ')'">

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

@@ -103,6 +103,19 @@ It's often helpful to have a button that works like a link. This is possible by
<wa-button href="/assets/images/logo.svg" download="shoelace.svg">Download</wa-button>
```
### Icon Buttons
When only an [icon](/docs/components/icon) is slotted into the `label` slot, the button becomes an icon button. In this case, it's important to give the icon a label for users with assistive devices. Icon buttons can use any appearance or variant.
```html {.example}
<div class="wa-cluster">
<wa-button variant="neutral" appearance="accent"><wa-icon name="house" label="Home"></wa-icon></wa-button>
<wa-button variant="neutral" appearance="outlined"><wa-icon name="house" label="Home"></wa-icon></wa-button>
<wa-button variant="neutral" appearance="filled"><wa-icon name="house" label="Home"></wa-icon></wa-button>
<wa-button variant="neutral" appearance="plain"><wa-icon name="house" label="Home"></wa-icon></wa-button>
</div>
```
### Setting a Custom Width
As expected, buttons can be given a custom width by setting the `width` CSS property. This is useful for making buttons span the full width of their container on smaller screens.

4
packages/webawesome/docs/docs/components/card.md
View File

@@ -57,7 +57,9 @@ If using SSR, you need to also use the `with-header` attribute to add a header t
<wa-card class="card-header">
<div slot="header" class="wa-split">
Header Title
<wa-icon-button name="gear" variant="solid" label="Settings" class="wa-size-m"></wa-icon-button>
<wa-button appearance="plain">
<wa-icon name="gear" variant="solid" label="Settings"></wa-icon>
</wa-button>
</div>
This card has a header. You can put all sorts of things in it!

6
packages/webawesome/docs/docs/components/dialog.md
View File

@@ -135,11 +135,13 @@ By design, a dialog's height will never exceed that of the viewport. As such, di
### Header Actions
The header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/docs/components/icon-button) if needed.
The header shows a functional close button by default. You can use the `header-actions` slot to add additional [buttons](/docs/components/button) if needed.
```html {.example}
<wa-dialog label="Dialog" class="dialog-header-actions">
<wa-icon-button class="new-window" slot="header-actions" name="arrow-up-right-from-square" variant="solid"></wa-icon-button>
<wa-button class="new-window" slot="header-actions" appearance="plain">
<wa-icon name="arrow-up-right-from-square" variant="solid" label="Open in new window"></wa-icon>
</wa-button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<wa-button slot="footer" variant="brand" data-dialog="close">Close</wa-button>
</wa-dialog>

6
packages/webawesome/docs/docs/components/drawer.md
View File

@@ -193,11 +193,13 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
### Header Actions
The header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/docs/components/icon-button) if needed.
The header shows a functional close button by default. You can use the `header-actions` slot to add additional [buttons](/docs/components/button) if needed.
```html {.example}
<wa-drawer label="Drawer" class="drawer-header-actions">
<wa-icon-button class="new-window" slot="header-actions" name="arrow-up-right-from-square" variant="solid"></wa-icon-button>
<wa-button class="new-window" slot="header-actions" appearance="plain">
<wa-icon name="arrow-up-right-from-square" variant="solid" label="Open in new window"></wa-icon>
</wa-button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<wa-button slot="footer" variant="brand" data-drawer="close">Close</wa-button>
</wa-drawer>

76
packages/webawesome/docs/docs/components/icon-button.md
View File

@@ -1,76 +0,0 @@
---
title: Icon Button
description: Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
tags: [actions, apps]
icon: icon-button
---
For a full list of icons that come bundled with Web Awesome, refer to the [icon component](/docs/components/icon).
```html {.example}
<wa-icon-button name="gear" label="Settings"></wa-icon-button>
```
## Examples
### Sizes
Icon buttons inherit their parent element's `font-size`.
```html {.example}
<wa-icon-button name="pen-to-square" variant="solid" label="Edit" style="font-size: 1.5rem;"></wa-icon-button>
<wa-icon-button name="pen-to-square" variant="solid" label="Edit" style="font-size: 2rem;"></wa-icon-button>
<wa-icon-button name="pen-to-square" variant="solid" label="Edit" style="font-size: 2.5rem;"></wa-icon-button>
```
### Colors
Icon buttons are designed to have a uniform appearance, so their color is not inherited. However, you can still customize them by styling the `base` part.
```html {.example}
<div class="icon-button-color">
<wa-icon-button name="bold" variant="solid" label="Bold"></wa-icon-button>
<wa-icon-button name="italic" variant="solid" label="Italic"></wa-icon-button>
<wa-icon-button name="underline" variant="solid" label="Underline"></wa-icon-button>
</div>
<style>
.icon-button-color wa-icon-button::part(base) {
color: #b00091;
}
.icon-button-color wa-icon-button::part(base):hover,
.icon-button-color wa-icon-button::part(base):focus {
color: #c913aa;
}
.icon-button-color wa-icon-button::part(base):active {
color: #960077;
}
</style>
```
### Link Buttons
Use the `href` attribute to convert the button to a link.
```html {.example}
<wa-icon-button name="gear" variant="solid" label="Settings" href="https://example.com" target="_blank"></wa-icon-button>
```
### Icon Button with Tooltip
Add a tooltip that references the `id` of the icon button to provide contextual information.
```html {.example}
<wa-icon-button id="icon-button" name="gear" variant="solid" label="Settings"></wa-icon-button>
<wa-tooltip for="icon-button">Settings</wa-tooltip>
```
### Disabled
Use the `disabled` attribute to disable the icon button.
```html {.example}
<wa-icon-button name="gear" variant="solid" label="Settings" disabled></wa-icon-button>
```

12
packages/webawesome/docs/docs/components/progress-bar.md
View File

@@ -38,15 +38,19 @@ Use the default slot to show a value.
<wa-progress-bar value="50" id="progress-bar-demo">50%</wa-progress-bar>
<div>
<wa-icon-button pill name="minus" label="Decrease"></wa-icon-button>
<wa-icon-button pill name="plus" label="Increase"></wa-icon-button>
<wa-button pill appearance="filled">
<wa-icon name="minus" label="Decrease"></wa-icon>
</wa-button>
<wa-button pill appearance="filled">
<wa-icon name="plus" label="Increase"></wa-icon>
</wa-button>
</div>
</div>
<script>
const progressBar = document.querySelector('#progress-bar-demo');
const subtractButton = document.querySelector('wa-icon-button[name="minus"]');
const addButton = document.querySelector('wa-icon-button[name="plus"]');
const subtractButton = document.querySelector('wa-button:has(wa-icon[name="minus"])');
const addButton = document.querySelector('wa-button:has(wa-icon[name="plus"])');
addButton.addEventListener('click', () => {
const value = Math.min(100, progressBar.value + 10);

12
packages/webawesome/docs/docs/components/tab-group.md
View File

@@ -101,7 +101,9 @@ You can make a tab closable by adding a close button next to the tab and inside
<wa-tab-group class="tabs-closable">
<wa-tab panel="general">General</wa-tab>
<wa-tab panel="closable">Closable</wa-tab>
<wa-icon-button slot="nav" tabindex="-1" name="xmark" label="Close the closable tab"></wa-icon-button>
<wa-button slot="nav" tabindex="-1" appearance="plain" size="small">
<wa-icon name="xmark" label="Close the closable tab"></wa-icon>
</wa-button>
<wa-tab panel="closable-2">Advanced</wa-tab>
<wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
@@ -114,17 +116,17 @@ You can make a tab closable by adding a close button next to the tab and inside
<wa-button disabled>Restore tab</wa-button>
<style>
.tabs-closable wa-icon-button {
.tabs-closable wa-button {
position: relative;
left: -1rem;
top: .75rem; }
left: -1.5em;
top: 0.675em; }
</style>
<script>
const tabGroup = document.querySelector('.tabs-closable');
const generalTab = tabGroup.querySelectorAll('wa-tab')[0];
const closableTab = tabGroup.querySelectorAll('wa-tab')[1];
const closeButton = tabGroup.querySelector('wa-icon-button');
const closeButton = tabGroup.querySelector('wa-button');
const restoreButton = tabGroup.nextElementSibling.nextElementSibling;
// Remove the tab when the close button is clicked

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

@@ -1731,7 +1731,7 @@ hasOutline: false
grid-column-end: col-end;
}
.project-header wa-icon-button {
.project-header wa-button {
color: inherit;
font-size: var(--wa-font-size-l);
@@ -2002,9 +2002,15 @@ hasOutline: false
<span id="project-name" style="margin-inline-start: var(--wa-space-l);">Project Name</span>
</h1>
<div>
<wa-icon-button name="magnifying-glass" label="Search"></wa-icon-button>
<wa-icon-button name="user" label="Account"></wa-icon-button>
<wa-icon-button name="bag-shopping" label="Your Basket"></wa-icon-button>
<wa-button appearance="plain" size="small">
<wa-icon name="magnifying-glass" label="Search"></wa-icon>
</wa-button>
<wa-button appearance="plain" size="small">
<wa-icon name="user" label="Account"></wa-icon>
</wa-button>
<wa-button appearance="plain" size="small">
<wa-icon name="bag-shopping" label="Your Basket"></wa-icon>
</wa-button>
</div>
</header>
<section class="strata hero">
@@ -2142,31 +2148,49 @@ hasOutline: false
<wa-card class="card-header card-footer">
<div slot="header">
<div class="grouped-buttons">
<wa-icon-button id="bold" name="bold" label="Bold"></wa-icon-button>
<wa-button appearance="plain" size="small" id="bold">
<wa-icon name="bold" label="Bold"></wa-icon>
</wa-button>
<wa-tooltip for="bold">Bold</wa-tooltip>
<wa-icon-button id="italic" name="italic" label="Italic"></wa-icon-button>
<wa-button appearance="plain" size="small" id="italic">
<wa-icon name="italic" label="Italic"></wa-icon>
</wa-button>
<wa-tooltip for="italic">Italic</wa-tooltip>
<wa-icon-button id="strikethrough" name="strikethrough" label="strikethrough"></wa-icon-button>
<wa-button appearance="plain" size="small" id="strikethrough">
<wa-icon name="strikethrough" label="strikethrough"></wa-icon>
</wa-button>
<wa-tooltip for="strikethrough">Strikethrough</wa-tooltip>
</div>
<div class="grouped-buttons">
<wa-icon-button id="link" name="link" label="Link"></wa-icon-button>
<wa-button appearance="plain" size="small" id="link">
<wa-icon name="link" label="Link"></wa-icon>
</wa-button>
<wa-tooltip for="link">Link</wa-tooltip>
</div>
<div class="grouped-buttons">
<wa-icon-button id="list" name="list" label="Unordered List"></wa-icon-button>
<wa-button appearance="plain" size="small" id="list">
<wa-icon name="list" label="Unordered List"></wa-icon>
</wa-button>
<wa-tooltip for="list">Unordered List</wa-tooltip>
<wa-icon-button id="list-ol" name="list-ol" label="Ordered List"></wa-icon-button>
<wa-button appearance="plain" size="small" id="list-ol">
<wa-icon name="list-ol" label="Ordered List"></wa-icon>
</wa-button>
<wa-tooltip for="list-ol">Ordered List</wa-tooltip>
</div>
<div class="grouped-buttons">
<wa-icon-button id="block-quote" name="block-quote" label="Block Quote"></wa-icon-button>
<wa-button appearance="plain" size="small" id="block-quote">
<wa-icon name="block-quote" label="Block Quote"></wa-icon>
</wa-button>
<wa-tooltip for="block-quote">Block Quote</wa-tooltip>
</div>
<div class="grouped-buttons">
<wa-icon-button id="code" name="code" label="Code"></wa-icon-button>
<wa-button appearance="plain" size="small" id="code">
<wa-icon name="code" label="Code"></wa-icon>
</wa-button>
<wa-tooltip for="code">Code</wa-tooltip>
<wa-icon-button id="inline-code" name="terminal" label="Inline Code"></wa-icon-button>
<wa-button appearance="plain" size="small" id="inline-code">
<wa-icon name="terminal" label="Inline Code"></wa-icon>
</wa-button>
<wa-tooltip for="inline-code">Inline Code</wa-tooltip>
</div>
</div>
@@ -2176,23 +2200,37 @@ hasOutline: false
<div slot="footer">
<div class="tools">
<div class="grouped-buttons">
<wa-icon-button id="add-file" name="circle-plus" label="Add File"></wa-icon-button>
<wa-button appearance="plain" size="small" id="add-file">
<wa-icon name="circle-plus" label="Add File"></wa-icon>
</wa-button>
<wa-tooltip for="add-file">Add File</wa-tooltip>
<wa-icon-button id="formatting" name="font-case" label="Open Formatting"></wa-icon-button>
<wa-button appearance="plain" size="small" id="formatting">
<wa-icon name="font-case" label="Open Formatting"></wa-icon>
</wa-button>
<wa-tooltip for="formatting">Formatting</wa-tooltip>
<wa-icon-button id="emojis" name="face-smile" label="Emoji"></wa-icon-button>
<wa-button appearance="plain" size="small" id="emojis">
<wa-icon name="face-smile" label="Emoji"></wa-icon>
</wa-button>
<wa-tooltip for="emojis">Emojis</wa-tooltip>
<wa-icon-button id="mention" name="at" label="Mention"></wa-icon-button>
<wa-button appearance="plain" size="small" id="mention">
<wa-icon name="at" label="Mention"></wa-icon>
</wa-button>
<wa-tooltip for="mention">Mention</wa-tooltip>
</div>
<div class="grouped-buttons">
<wa-icon-button id="record-video" name="video" label="Video"></wa-icon-button>
<wa-button appearance="plain" size="small" id="record-video">
<wa-icon name="video" label="Video"></wa-icon>
</wa-button>
<wa-tooltip for="record-video">Record Video</wa-tooltip>
<wa-icon-button id="record-audio" name="microphone" label="Microphone"></wa-icon-button>
<wa-button appearance="plain" size="small" id="record-audio">
<wa-icon name="microphone" label="Microphone"></wa-icon>
</wa-button>
<wa-tooltip for="record-audio">Record Audio Clip</wa-tooltip>
</div>
<div class="grouped-buttons">
<wa-icon-button id="add-magic" name="sparkles" label="Magic"></wa-icon-button>
<wa-button appearance="plain" size="small" id="add-magic">
<wa-icon name="sparkles" label="Magic"></wa-icon>
</wa-button>
<wa-tooltip for="add-magic">Add Magic</wa-tooltip>
</div>
</div>

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

@@ -38,6 +38,7 @@ During the alpha period, things might break! We take breaking changes very serio
- Added convenience tokens for `--wa-font-size-smaller` and `--wa-font-size-larger`
- Updated components to use relative `em` values for internal padding and margin wherever appropriate
- 🚨 BREAKING: removed the `hint` property and slot from `<wa-radio>`; please apply hints directly to `<wa-radio-group>` instead
- 🚨 BREAKING: removed `<wa-icon-button>`; use `<wa-button><wa-icon name="..." label="..."></wa-icon></wa-button>` instead
- Added a new free component: `<wa-popover>` (#2 of 14 per stretch goals)
- Added a `min-block-size` to `<wa-divider orientation="vertical">` to ensure the divider is visible regardless of container height [issue:675]
- Added support for `name` in `<wa-details>` for exclusively opening one in a group

8
packages/webawesome/docs/docs/themes/edit/index.njk vendored
View File

@@ -23,15 +23,13 @@ unlisted: true
<div class="title">
<h1><editable-text :model-value="title" label="theme name" @submit="newTitle => save({title: newTitle})" blur="cancel"></editable-text></h1>
<wa-icon-button v-if="saved" class="delete" name="trash" label="Delete theme" @click="deleteSaved"></wa-icon-button>
<wa-button v-if="saved" class="delete" @click="deleteSaved" appearance="plain" size="small">
<wa-icon name="trash" label="Delete theme"></wa-icon>
</wa-button>
</div>
<wa-button v-if="tweaked || uid" @click="save()" :disabled="!unsavedChanges"
:variant="unsavedChanges ? 'success' : 'neutral'" size="small" :appearance="unsavedChanges ? 'accent' : 'outlined'">
<span slot="prefix" class="icon-modifier">
<wa-icon name="sidebar" variant="regular"></wa-icon>
<wa-icon name="circle-plus" class="modifier" style="color: light-dark(var(--wa-color-green-70), var(--wa-color-green-60));"></wa-icon>
</span>
<span v-content="unsavedChanges ? 'Save' : 'Saved'">Save</span>
</wa-button>
<wa-button size="small" @click="ui.showCode = !showCode" appearance="outlined">

4
packages/webawesome/docs/docs/themes/edit/style.css vendored
View File

@@ -45,11 +45,11 @@ wa-page > header {
margin: 0;
}
wa-icon-button {
wa-button {
transition: var(--wa-transition-slow);
}
&:not(:hover, :focus-within, :has(input)) wa-icon-button {
&:not(:hover, :focus-within, :has(input)) wa-button {
opacity: 0;
}
}

2
packages/webawesome/docs/docs/themes/preview/content.css vendored
View File

@@ -83,7 +83,7 @@ wa-input::part(input) {
grid-column-end: col-end;
}
.project-header wa-icon-button {
.project-header wa-button {
color: inherit;
font-size: var(--wa-font-size-l);

12
packages/webawesome/docs/docs/themes/preview/content.njk vendored
View File

@@ -21,9 +21,15 @@ noTheme: true
<span id="project-name" style="margin-inline-start: var(--wa-space-l);">Project Name</span>
</h1>
<div>
<wa-icon-button name="magnifying-glass" label="Search"></wa-icon-button>
<wa-icon-button name="user" label="Account"></wa-icon-button>
<wa-icon-button name="bag-shopping" label="Your Basket"></wa-icon-button>
<wa-button appearance="plain">
<wa-icon name="magnifying-glass" label="Search"></wa-icon>
</wa-button>
<wa-button appearance="plain">
<wa-icon name="user" label="Account"></wa-icon>
</wa-button>
<wa-button appearance="plain">
<wa-icon name="bag-shopping" label="Your Basket"></wa-icon>
</wa-button>
</div>
</header>
<section class="strata hero">

4
packages/webawesome/docs/docs/tokens/component-groups.md
View File

@@ -96,6 +96,8 @@ Tooltip styles are shared between the [tooltip](/docs/components/tooltip) compon
| `--wa-tooltip-line-height` | `var(--wa-line-height-normal)` |
```html {.example}
<wa-icon-button id="bullseye-example" label="Button" name="bullseye"></wa-icon-button>
<wa-button id="bullseye-example" appearance="plain">
<wa-icon label="Target" name="bullseye"></wa-icon>
</wa-button>
<wa-tooltip for="bullseye-example" open trigger="manual">This is a tooltip</wa-tooltip>
```

20
packages/webawesome/docs/docs/utilities/frame.md
View File

@@ -40,7 +40,9 @@ Frames are well-suited for images and image placeholders.
<h3>The Lord of the Rings: The Fellowship of the Ring</h3>
<span>J.R.R. Tolkien</span>
</div>
<wa-icon-button id="options-menu" name="ellipsis"></wa-icon-button>
<wa-button id="options-menu" appearance="plain">
<wa-icon name="ellipsis" label="Options"></wa-icon>
</wa-button>
<wa-tooltip for="options-menu">Options</wa-tooltip>
</div>
</div>
@@ -57,7 +59,9 @@ Frames are well-suited for images and image placeholders.
<span class="wa-body-s">Kitten &bull; Male</span>
<div class="wa-flank:end wa-gap-xs">
<wa-button size="small" appearance="filled" variant="brand">Adopt this pet</wa-button>
<wa-icon-button id="fav-whitesocks" name="heart" variant="regular"></wa-icon-button>
<wa-button id="fav-whitesocks" appearance="plain" size="small">
<wa-icon name="heart" variant="regular" label="Favorite"></wa-icon>
</wa-button>
<wa-tooltip for="fav-whitesocks">Favorite</wa-tooltip>
</div>
</div>
@@ -74,7 +78,9 @@ Frames are well-suited for images and image placeholders.
<span class="wa-body-s">Adult &bull; Male</span>
<div class="wa-flank:end wa-gap-xs">
<wa-button size="small" appearance="filled" variant="brand">Adopt this pet</wa-button>
<wa-icon-button id="fav-bumpkin" name="heart" variant="regular"></wa-icon-button>
<wa-button id="fav-bumpkin" appearance="plain" size="small">
<wa-icon name="heart" variant="regular" label="Favorite"></wa-icon>
</wa-button>
<wa-tooltip for="fav-bumpkin">Favorite</wa-tooltip>
</div>
</div>
@@ -88,7 +94,9 @@ Frames are well-suited for images and image placeholders.
<span class="wa-body-s">Kitten &bull; Female</span>
<div class="wa-flank:end wa-gap-xs">
<wa-button size="small" appearance="filled" variant="brand">Adopt this pet</wa-button>
<wa-icon-button id="fav-swishtail" name="heart" variant="regular"></wa-icon-button>
<wa-button id="fav-swishtail" appearance="plain" size="small">
<wa-icon name="heart" variant="regular" label="Favorite"></wa-icon>
</wa-button>
<wa-tooltip for="fav-swishtail">Favorite</wa-tooltip>
</div>
</div>
@@ -102,7 +110,9 @@ Frames are well-suited for images and image placeholders.
<span class="wa-body-s">Adult &bull; Female</span>
<div class="wa-flank:end wa-gap-xs">
<wa-button size="small" appearance="filled" variant="brand">Adopt this pet</wa-button>
<wa-icon-button id="fav-sharpears" name="heart" variant="regular"></wa-icon-button>
<wa-button id="fav-sharpears" appearance="plain" size="small">
<wa-icon name="heart" variant="regular" label="Favorite"></wa-icon>
</wa-button>
<wa-tooltip for="fav-sharpears">Favorite</wa-tooltip>
</div>
</div>

16
packages/webawesome/docs/docs/utilities/split.md
View File

@@ -36,13 +36,21 @@ Splits are especially helpful for navigation, header, and footer layouts.
<div class="wa-flank">
<div class="wa-split:column">
<div class="wa-stack">
<wa-icon-button name="house" label="Home"></wa-icon-button>
<wa-icon-button name="calendar" label="Calendar"></wa-icon-button>
<wa-icon-button name="envelope" label="Mail"></wa-icon-button>
<wa-button appearance="plain">
<wa-icon name="house" label="Home"></wa-icon>
</wa-button>
<wa-button appearance="plain">
<wa-icon name="calendar" label="Calendar"></wa-icon>
</wa-button>
<wa-button appearance="plain">
<wa-icon name="envelope" label="Mail"></wa-icon>
</wa-button>
</div>
<div class="wa-stack">
<wa-divider></wa-divider>
<wa-icon-button name="right-from-bracket" label="Sign Out"></wa-icon-button>
<wa-button appearance="plain">
<wa-icon name="right-from-bracket" label="Sign Out"></wa-icon>
</wa-button>
</div>
</div>
<div class="placeholder">

3
packages/webawesome/docs/index.md
View File

@@ -216,7 +216,6 @@ layout: page
border-color: var(--wa-color-surface-border);
border-radius: 0.75rem;
color: var(--wa-color-text-normal);
display: block;
height: 100%;
line-height: var(--wa-line-height-normal);
padding: 1.25rem;
@@ -240,7 +239,7 @@ layout: page
font-weight: var(--wa-font-weight-normal);
}
&::part(label) {
width: 100%;
flex-direction: column;
}
}
wa-callout {

4
packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.ts
View File

@@ -12,8 +12,8 @@ import styles from './breadcrumb-item.css';
* @since 2.0
*
* @slot - The breadcrumb item's label.
* @slot prefix - An optional prefix, usually an icon or icon button.
* @slot suffix - An optional suffix, usually an icon or icon button.
* @slot prefix - An optional prefix, usually an icon.
* @slot suffix - An optional suffix, usually an icon.
* @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If
* you want to change it for all items in the group, set the separator on `<wa-breadcrumb>` instead.
*

12
packages/webawesome/src/components/button/button.css
View File

@@ -89,6 +89,13 @@
border: 0;
}
/* Icon buttons */
.button.is-icon-button {
outline-offset: 2px;
width: var(--wa-form-control-height);
aspect-ratio: 1;
}
/* Pill modifier */
:host([pill]) .button {
border-radius: var(--wa-border-radius-pill);
@@ -107,11 +114,11 @@
}
.label {
display: inline-block;
display: flex;
}
.label::slotted(wa-icon) {
vertical-align: -2px;
align-self: center;
}
/*
@@ -164,6 +171,7 @@ wa-icon[part~='caret'] {
/*
* Badges
*/
button ::slotted(wa-badge) {
border-color: var(--wa-color-surface-default);
position: absolute;

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

@@ -64,13 +64,15 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
private readonly localize = new LocalizeController(this);
@query('.button') button: HTMLButtonElement | HTMLLinkElement;
@query('slot:not([name])') labelSlot: HTMLSlotElement;
@state() invalid = false;
@state() isIconButton = false;
@property() title = ''; // make reactive to pass through
/** The button's theme variant. Defaults to `neutral` if not within another element with a variant. */
@property({ reflect: true })
variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
@property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
/** The button's visual appearance. */
@property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'accent';
@@ -142,19 +144,6 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
/** Used to override the form owner's `target` attribute. */
@property({ attribute: 'formtarget' }) formTarget: '_self' | '_blank' | '_parent' | '_top' | string;
private handleClick() {
const form = this.getForm();
if (!form) return;
const lightDOMButton = this.constructLightDOMButton();
// form.append(lightDOMButton);
this.parentElement?.append(lightDOMButton);
lightDOMButton.click();
lightDOMButton.remove();
}
private constructLightDOMButton() {
const button = document.createElement('button');
button.type = this.type;
@@ -178,10 +167,52 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
return button;
}
private handleClick() {
const form = this.getForm();
if (!form) return;
const lightDOMButton = this.constructLightDOMButton();
// form.append(lightDOMButton);
this.parentElement?.append(lightDOMButton);
lightDOMButton.click();
lightDOMButton.remove();
}
private handleInvalid() {
this.dispatchEvent(new WaInvalidEvent());
}
private handleLabelSlotChange() {
const nodes = this.labelSlot.assignedNodes({ flatten: true });
let hasIconLabel = false;
let hasIcon = false;
let text = '';
// If there's only an icon and no text, it's an icon button
[...nodes].forEach(node => {
if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).localName === 'wa-icon') {
hasIcon = true;
if (!hasIconLabel) hasIconLabel = (node as HTMLElement).hasAttribute('label');
}
// Concatenate text nodes
if (node.nodeType === Node.TEXT_NODE) {
text += node.textContent;
}
});
this.isIconButton = text.trim() === '' && hasIcon;
if (this.isIconButton && !hasIconLabel) {
console.warn(
'Icon buttons must have a label for screen readers. Add <wa-icon label="..."> to remove this warning.',
this,
);
}
}
private isButton() {
return this.href ? false : true;
}
@@ -234,6 +265,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
'has-label': this.hasSlotController.test('[default]'),
'has-prefix': this.hasSlotController.test('prefix'),
'has-suffix': this.hasSlotController.test('suffix'),
'is-icon-button': this.isIconButton,
})}
?disabled=${ifDefined(isLink ? undefined : this.disabled)}
type=${ifDefined(isLink ? undefined : this.type)}
@@ -251,7 +283,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
@click=${this.handleClick}
>
<slot name="prefix" part="prefix" class="prefix"></slot>
<slot part="label" class="label"></slot>
<slot part="label" class="label" @slotchange=${this.handleLabelSlotChange}></slot>
<slot name="suffix" part="suffix" class="suffix"></slot>
${
this.caret

12
packages/webawesome/src/components/dialog/dialog.css
View File

@@ -72,8 +72,13 @@
flex: 0 0 auto;
display: flex;
flex-wrap: nowrap;
padding: var(--spacing);
padding-inline-start: var(--spacing);
padding-block-end: 0;
/* Subtract the close button's padding so that the X is visually aligned with the edges of the dialog content */
padding-inline-end: calc(var(--spacing) - var(--wa-form-control-padding-block));
padding-block-start: calc(var(--spacing) - var(--wa-form-control-padding-block));
}
.title {
@@ -96,12 +101,11 @@
padding-inline-start: var(--spacing);
}
.header-actions wa-icon-button,
.header-actions ::slotted(wa-icon-button) {
.header-actions wa-button,
.header-actions ::slotted(wa-button) {
flex: 0 0 auto;
display: flex;
align-items: center;
font-size: var(--wa-font-size-m);
}
.body {

26
packages/webawesome/src/components/dialog/dialog.ts
View File

@@ -12,7 +12,7 @@ import { HasSlotController } from '../../internal/slot.js';
import { watch } from '../../internal/watch.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
import { LocalizeController } from '../../utilities/localize.js';
import '../icon-button/icon-button.js';
import '../button/button.js';
import styles from './dialog.css';
/**
@@ -21,11 +21,11 @@ import styles from './dialog.css';
* @status stable
* @since 2.0
*
* @dependency wa-icon-button
* @dependency wa-button
*
* @slot - The dialog's main content.
* @slot label - The dialog's label. Alternatively, you can use the `label` attribute.
* @slot header-actions - Optional actions to add to the header. Works best with `<wa-icon-button>`.
* @slot header-actions - Optional actions to add to the header. Works best with `<wa-button>`.
* @slot footer - The dialog's footer, usually one or more buttons representing various options.
*
* @event wa-show - Emitted when the dialog opens.
@@ -38,9 +38,9 @@ import styles from './dialog.css';
* @event wa-after-hide - Emitted after the dialog closes and all animations are complete.
*
* @csspart header - The dialog's header. This element wraps the title and header actions.
* @csspart header-actions - Optional actions to add to the header. Works best with `<wa-icon-button>`.
* @csspart header-actions - Optional actions to add to the header. Works best with `<wa-button>`.
* @csspart title - The dialog's title.
* @csspart close-button - The close button, a `<wa-icon-button>`.
* @csspart close-button - The close button, a `<wa-button>`.
* @csspart close-button__base - The close button's exported `base` part.
* @csspart body - The dialog's body.
* @csspart footer - The dialog's footer.
@@ -236,16 +236,20 @@ export default class WaDialog extends WebAwesomeElement {
</h2>
<div part="header-actions" class="header-actions">
<slot name="header-actions"></slot>
<wa-icon-button
<wa-button
part="close-button"
exportparts="base:close-button__base"
class="close"
name="xmark"
label=${this.localize.term('close')}
library="system"
variant="solid"
appearance="plain"
@click="${(event: PointerEvent) => this.requestClose(event.target as Element)}"
></wa-icon-button>
>
<wa-icon
name="xmark"
label=${this.localize.term('close')}
library="system"
variant="solid"
></wa-icon>
</wa-button>
</div>
</header>
`

11
packages/webawesome/src/components/drawer/drawer.css
View File

@@ -136,8 +136,12 @@
.header {
display: flex;
flex-wrap: nowrap;
padding: var(--spacing);
padding-inline-start: var(--spacing);
padding-block-end: 0;
/* Subtract the close button's padding so that the X is visually aligned with the edges of the dialog content */
padding-inline-end: calc(var(--spacing) - var(--wa-form-control-padding-block));
padding-block-start: calc(var(--spacing) - var(--wa-form-control-padding-block));
}
.title {
@@ -160,12 +164,11 @@
padding-inline-start: var(--spacing);
}
.header-actions wa-icon-button,
.header-actions ::slotted(wa-icon-button) {
.header-actions wa-button,
.header-actions ::slotted(wa-button) {
flex: 0 0 auto;
display: flex;
align-items: center;
font-size: var(--wa-font-size-m);
}
.body {

26
packages/webawesome/src/components/drawer/drawer.ts
View File

@@ -12,7 +12,7 @@ import { HasSlotController } from '../../internal/slot.js';
import { watch } from '../../internal/watch.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
import { LocalizeController } from '../../utilities/localize.js';
import '../icon-button/icon-button.js';
import '../button/button.js';
import styles from './drawer.css';
/**
@@ -21,11 +21,11 @@ import styles from './drawer.css';
* @status stable
* @since 2.0
*
* @dependency wa-icon-button
* @dependency wa-button
*
* @slot - The drawer's main content.
* @slot label - The drawer's label. Alternatively, you can use the `label` attribute.
* @slot header-actions - Optional actions to add to the header. Works best with `<wa-icon-button>`.
* @slot header-actions - Optional actions to add to the header. Works best with `<wa-button>`.
* @slot footer - The drawer's footer, usually one or more buttons representing various options.
*
* @event wa-show - Emitted when the drawer opens.
@@ -39,9 +39,9 @@ import styles from './drawer.css';
* behavior such as data loss.
*
* @csspart header - The drawer's header. This element wraps the title and header actions.
* @csspart header-actions - Optional actions to add to the header. Works best with `<wa-icon-button>`.
* @csspart header-actions - Optional actions to add to the header. Works best with `<wa-button>`.
* @csspart title - The drawer's title.
* @csspart close-button - The close button, a `<wa-icon-button>`.
* @csspart close-button - The close button, a `<wa-button>`.
* @csspart close-button__base - The close button's exported `base` part.
* @csspart body - The drawer's body.
* @csspart footer - The drawer's footer.
@@ -252,16 +252,20 @@ export default class WaDrawer extends WebAwesomeElement {
</h2>
<div part="header-actions" class="header-actions">
<slot name="header-actions"></slot>
<wa-icon-button
<wa-button
part="close-button"
exportparts="base:close-button__base"
class="close"
name="xmark"
label=${this.localize.term('close')}
library="system"
variant="solid"
appearance="plain"
@click="${(event: PointerEvent) => this.requestClose(event.target as Element)}"
></wa-icon-button>
>
<wa-icon
name="xmark"
label=${this.localize.term('close')}
library="system"
variant="solid"
></wa-icon>
</wa-button>
</div>
</header>
`

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

@@ -13,7 +13,6 @@ import { watch } from '../../internal/watch.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
import sizeStyles from '../../styles/utilities/size.css';
import type WaButton from '../button/button.js';
import type WaIconButton from '../icon-button/icon-button.js';
import type WaMenu from '../menu/menu.js';
import '../popup/popup.js';
import type WaPopup from '../popup/popup.js';
@@ -282,14 +281,13 @@ export default class WaDropdown extends WebAwesomeElement {
switch (tagName) {
// Web Awesome buttons have to update the internal button so it's announced correctly by screen readers
case 'wa-button':
case 'wa-icon-button':
target = (accessibleTrigger as WaButton | WaIconButton).button;
target = (accessibleTrigger as WaButton).button;
// Either the tag hasn't registered, or it hasn't rendered.
// So, wait for the tag to register, and then try again.
if (target === undefined || target === null) {
customElements.whenDefined(tagName).then(async () => {
await (accessibleTrigger as WaButton | WaIconButton).updateComplete;
await (accessibleTrigger as WaButton).updateComplete;
this.updateAccessibleTrigger();
});

53
packages/webawesome/src/components/icon-button/icon-button.css
View File

@@ -1,53 +0,0 @@
:host {
--background-color-hover: var(--wa-color-neutral-fill-quiet);
--text-color-hover: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
--background-color-active: transparent;
--text-color-active: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
display: inline-block;
color: var(--wa-color-text-quiet);
}
.icon-button {
flex: 0 0 auto;
display: flex;
align-items: center;
background: none;
border: none;
border-radius: var(--wa-border-radius-m);
font-size: inherit;
color: inherit;
padding: 0.5em;
cursor: pointer;
transition: color var(--wa-transition-fast) var(--wa-transition-easing);
-webkit-appearance: none;
}
:host(:not([disabled])) .icon-button:hover,
:host(:not([disabled])) .icon-button:focus-visible {
background-color: var(--background-color-hover);
color: var(--text-color-hover);
}
:host(:not([disabled])) .icon-button:active {
background-color: var(--background-color-active);
color: var(--text-color-active);
}
.icon-button:focus {
outline: none;
}
:host([disabled]) .icon-button {
opacity: 0.5;
cursor: not-allowed;
}
.icon-button:focus-visible {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
.icon {
pointer-events: none;
}

180
packages/webawesome/src/components/icon-button/icon-button.test.ts
View File

@@ -1,180 +0,0 @@
import { expect, waitUntil } from '@open-wc/testing';
import { html } from 'lit';
import sinon from 'sinon';
import { fixtures } from '../../internal/test/fixture.js';
import type WaIconButton from './icon-button.js';
type LinkTarget = '_self' | '_blank' | '_parent' | '_top';
describe('<wa-icon-button>', () => {
for (const fixture of fixtures) {
describe(`with "${fixture.type}" rendering`, () => {
describe('defaults ', () => {
it('default properties', async () => {
const el = await fixture<WaIconButton>(html` <wa-icon-button></wa-icon-button> `);
expect(el.name).to.be.null;
expect(el.library).to.be.undefined;
expect(el.src).to.be.undefined;
expect(el.href).to.be.undefined;
expect(el.target).to.be.undefined;
expect(el.download).to.be.undefined;
expect(el.label).to.equal('');
expect(el.disabled).to.equal(false);
});
it('renders as a button by default', async () => {
const el = await fixture<WaIconButton>(html` <wa-icon-button></wa-icon-button> `);
expect(el.shadowRoot?.querySelector('button')).to.exist;
expect(el.shadowRoot?.querySelector('a')).not.to.exist;
});
});
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>
`);
const icon = el.shadowRoot!.querySelector('wa-icon')!;
const styles = getComputedStyle(icon);
expect(styles.color).to.equal('rgb(0, 136, 221)');
expect(styles.fontSize).to.equal('32px');
});
});
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>
`);
expect(el.shadowRoot?.querySelector('wa-icon')).to.exist;
});
it('renders an wa-icon from a src', async () => {
const fakeId = 'test-src';
const el = await fixture<WaIconButton>(html` <wa-icon-button></wa-icon-button> `);
el.src = `data:image/svg+xml,${encodeURIComponent(`<svg id="${fakeId}"></svg>`)}`;
await el.updateComplete;
const internalWaIcon = el.shadowRoot?.querySelector('wa-icon');
await waitUntil(() => internalWaIcon?.shadowRoot?.querySelector('svg'), 'SVG not rendered');
expect(internalWaIcon).to.exist;
expect(internalWaIcon?.shadowRoot?.querySelector('svg')).to.exist;
expect(internalWaIcon?.shadowRoot?.querySelector('svg')?.getAttribute('id')).to.equal(fakeId);
});
});
describe('when href is present', () => {
it('renders as an anchor', async () => {
const el = await fixture<WaIconButton>(html` <wa-icon-button href="some/path"></wa-icon-button> `);
expect(el.shadowRoot?.querySelector('a')).to.exist;
expect(el.shadowRoot?.querySelector('button')).not.to.exist;
});
it(`the anchor rel is not present`, async () => {
const el = await fixture<WaIconButton>(html` <wa-icon-button href="some/path"></wa-icon-button> `);
expect(el.shadowRoot?.querySelector(`a[rel]`)).not.to.exist;
});
describe('and target is present', () => {
['_blank', '_parent', '_self', '_top'].forEach((target: LinkTarget) => {
it(`the anchor target is the provided target: ${target}`, async () => {
const el = await fixture<WaIconButton>(html`
<wa-icon-button href="some/path" target="${target}"></wa-icon-button>
`);
expect(el.shadowRoot?.querySelector(`a[target="${target}"]`)).to.exist;
});
it(`the anchor rel is set to 'noreferrer noopener'`, async () => {
const el = await fixture<WaIconButton>(html`
<wa-icon-button href="some/path" target="${target}"></wa-icon-button>
`);
expect(el.shadowRoot?.querySelector(`a[rel="noreferrer noopener"]`)).to.exist;
});
});
});
describe('and download is present', () => {
it(`the anchor download attribute is the provided download`, async () => {
const fakeDownload = 'some/path';
const el = await fixture<WaIconButton>(html`
<wa-icon-button href="some/path" download="${fakeDownload}"></wa-icon-button>
`);
expect(el.shadowRoot?.querySelector(`a[download="${fakeDownload}"]`)).to.exist;
});
});
});
describe('when label is present', () => {
it('the internal aria-label attribute is set to the provided label when rendering a button', async () => {
const fakeLabel = 'some label';
const el = await fixture<WaIconButton>(html` <wa-icon-button label="${fakeLabel}"></wa-icon-button> `);
expect(el.shadowRoot?.querySelector(`button[aria-label="${fakeLabel}"]`)).to.exist;
});
it('the internal aria-label attribute is set to the provided label when rendering an anchor', async () => {
const fakeLabel = 'some label';
const el = await fixture<WaIconButton>(html`
<wa-icon-button href="some/path" label="${fakeLabel}"></wa-icon-button>
`);
expect(el.shadowRoot?.querySelector(`a[aria-label="${fakeLabel}"]`)).to.exist;
});
});
describe('when disabled is present', () => {
it('the internal button has a disabled attribute when rendering a button', async () => {
const el = await fixture<WaIconButton>(html` <wa-icon-button disabled></wa-icon-button> `);
expect(el.shadowRoot?.querySelector(`button[disabled]`)).to.exist;
});
it('the internal anchor has an aria-disabled attribute when rendering an anchor', async () => {
const el = await fixture<WaIconButton>(html` <wa-icon-button href="some/path" disabled></wa-icon-button> `);
expect(el.shadowRoot?.querySelector(`a[aria-disabled="true"]`)).to.exist;
});
});
describe('when using methods', () => {
it('should emit focus and blur when the button is focused and blurred', async () => {
const el = await fixture<WaIconButton>(html` <wa-icon-button></wa-icon-button> `);
const focusHandler = sinon.spy();
const blurHandler = sinon.spy();
el.addEventListener('focus', focusHandler);
el.addEventListener('blur', blurHandler);
el.focus();
await waitUntil(() => focusHandler.calledOnce);
el.blur();
await waitUntil(() => blurHandler.calledOnce);
expect(focusHandler).to.have.been.calledOnce;
expect(blurHandler).to.have.been.calledOnce;
});
it('should emit a click event when calling click()', async () => {
const el = await fixture<WaIconButton>(html` <wa-icon-button></wa-icon-button> `);
const clickHandler = sinon.spy();
el.addEventListener('click', clickHandler);
el.click();
await waitUntil(() => clickHandler.calledOnce);
expect(clickHandler).to.have.been.calledOnce;
});
});
});
}
});

139
packages/webawesome/src/components/icon-button/icon-button.ts
View File

@@ -1,139 +0,0 @@
import { customElement, property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { html, literal } from 'lit/static-html.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
import '../icon/icon.js';
import styles from './icon-button.css';
/**
* @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
* @documentation https://backers.webawesome.com/docs/components/icon-button
* @status stable
* @since 2.0
*
* @dependency wa-icon
*
* @event blur - Emitted when the icon button loses focus.
* @event focus - Emitted when the icon button gains focus.
*
* @cssproperty [--background-color-hover=var(--wa-color-neutral-fill-quiet)] - The color of the button's background on hover.
* @cssproperty [--background-color-active=var(--wa-color-neutral-fill-quiet)] - The color of the button's background on `:active`.
* @cssproperty --text-color-hover - The color of the button's background on hover.
* @cssproperty --text-color-active - The color of the button's background on `:active`.
*
* @csspart base - The component's base wrapper.
*/
@customElement('wa-icon-button')
export default class WaIconButton extends WebAwesomeFormAssociatedElement {
static css = styles;
@query('.icon-button') button: HTMLButtonElement | HTMLLinkElement;
/** The name of the icon to draw. Available names depend on the icon library being used. */
@property({ reflect: true }) name: string | null = null;
/**
* The family of icons to choose from. For Font Awesome, valid options include `classic`, `sharp`, `duotone`, and
* `brands`. Custom icon libraries may or may not use this property.
*/
@property({ reflect: true }) family: string;
/**
* The name of the icon's variant. For Font Awesome, valid options include `thin`, `light`, `regular`, and `solid` for
* the _classic_ and _sharp_ families. Custom icon libraries may or may not use this property.
*/
@property({ reflect: true }) variant: string;
/** The name of a registered custom icon library. */
@property() library?: string;
/**
* An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
* can result in XSS attacks.
*/
@property() src?: string;
/** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
@property() href?: string;
/** Tells the browser where to open the link. Only used when `href` is set. */
@property() target?: '_blank' | '_parent' | '_self' | '_top';
/** Tells the browser to download the linked file as this filename. Only used when `href` is set. */
@property() download?: string;
/**
* A description that gets read by assistive devices. For optimal accessibility, you should always include a label
* that describes what the icon button does.
*/
@property() label = '';
/** Disables the button. */
@property({ type: Boolean }) disabled = false;
private handleClick(event: MouseEvent) {
if (this.disabled) {
event.preventDefault();
event.stopPropagation();
}
}
/** Simulates a click on the icon button. */
click() {
this.button.click();
}
/** Sets focus on the icon button. */
focus(options?: FocusOptions) {
this.button.focus(options);
}
/** Removes focus from the icon button. */
blur() {
this.button.blur();
}
render() {
const isLink = this.href ? true : false;
const tag = isLink ? literal`a` : literal`button`;
/* eslint-disable lit/binding-positions, lit/no-invalid-html */
return html`
<${tag}
part="base"
class=${classMap({
'icon-button': true,
})}
?disabled=${ifDefined(isLink ? undefined : this.disabled)}
type=${ifDefined(isLink ? undefined : 'button')}
href=${ifDefined(isLink ? this.href : undefined)}
target=${ifDefined(isLink ? this.target : undefined)}
download=${ifDefined(isLink ? this.download : undefined)}
rel=${ifDefined(isLink && this.target ? 'noreferrer noopener' : undefined)}
role=${ifDefined(isLink ? undefined : 'button')}
aria-disabled=${this.disabled ? 'true' : 'false'}
aria-label="${this.label}"
tabindex=${this.disabled ? '-1' : '0'}
@click=${this.handleClick}
>
<wa-icon
class="icon"
name=${ifDefined(this.name)}
family=${ifDefined(this.family)}
variant=${ifDefined(this.variant)}
library=${ifDefined(this.library)}
src=${ifDefined(this.src)}
aria-hidden="true"
fixed-width
></wa-icon>
</${tag}>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'wa-icon-button': WaIconButton;
}
}

10
packages/webawesome/src/components/select/select.ts
View File

@@ -343,10 +343,10 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
private handleDocumentKeyDown = (event: KeyboardEvent) => {
const target = event.target as HTMLElement;
const isClearButton = target.closest('[part~="clear-button"]') !== null;
const isIconButton = target.closest('wa-icon-button') !== null;
const isButton = target.closest('wa-button') !== null;
// Ignore presses when the target is an icon button (e.g. the remove button in `<wa-tag>`)
if (isClearButton || isIconButton) {
// Ignore presses when the target is a button (e.g. the remove button in `<wa-tag>`)
if (isClearButton || isButton) {
return;
}
@@ -484,10 +484,10 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
private handleComboboxMouseDown(event: MouseEvent) {
const path = event.composedPath();
const isIconButton = path.some(el => el instanceof Element && el.tagName.toLowerCase() === 'wa-icon-button');
const isButton = path.some(el => el instanceof Element && el.tagName.toLowerCase() === 'wa-button');
// Ignore disabled controls and clicks on tags (remove buttons)
if (this.disabled || isIconButton) {
if (this.disabled || isButton) {
return;
}

16
packages/webawesome/src/components/tab-group/tab-group.test.ts
View File

@@ -19,7 +19,7 @@ interface ClientRectangles {
const waitForScrollButtonsToBeRendered = async (tabGroup: WaTabGroup): Promise<void> => {
await waitUntil(() => {
const scrollButtons = tabGroup.shadowRoot?.querySelectorAll('wa-icon-button');
const scrollButtons = tabGroup.shadowRoot?.querySelectorAll('wa-button');
return scrollButtons?.length === 2;
});
};
@@ -234,7 +234,7 @@ describe('<wa-tab-group>', () => {
await waitForScrollButtonsToBeRendered(tabGroup);
const scrollButtons = tabGroup.shadowRoot?.querySelectorAll('wa-icon-button');
const scrollButtons = tabGroup.shadowRoot?.querySelectorAll('wa-button');
expect(scrollButtons, 'Both scroll buttons should be shown').to.have.length(2);
tabGroup.disconnectedCallback();
@@ -248,7 +248,7 @@ describe('<wa-tab-group>', () => {
await aTimeout(0);
const scrollButtons = tabGroup.shadowRoot?.querySelectorAll('wa-icon-button');
const scrollButtons = tabGroup.shadowRoot?.querySelectorAll('wa-button');
expect(scrollButtons).to.have.length(0);
});
@@ -259,7 +259,7 @@ describe('<wa-tab-group>', () => {
await aTimeout(0);
const scrollButtons = tabGroup.shadowRoot?.querySelectorAll('wa-icon-button');
const scrollButtons = tabGroup.shadowRoot?.querySelectorAll('wa-button');
expect(scrollButtons).to.have.length(0);
});
@@ -270,7 +270,7 @@ describe('<wa-tab-group>', () => {
await aTimeout(0);
const scrollButtons = tabGroup.shadowRoot?.querySelectorAll('wa-icon-button');
const scrollButtons = tabGroup.shadowRoot?.querySelectorAll('wa-button');
expect(scrollButtons).to.have.length(0);
});
@@ -281,7 +281,7 @@ describe('<wa-tab-group>', () => {
await aTimeout(0);
const scrollButtons = tabGroup.shadowRoot?.querySelectorAll('wa-icon-button');
const scrollButtons = tabGroup.shadowRoot?.querySelectorAll('wa-button');
expect(scrollButtons).to.have.length(0);
});
@@ -293,7 +293,7 @@ describe('<wa-tab-group>', () => {
);
await waitForScrollButtonsToBeRendered(tabGroup);
const scrollButtons = tabGroup.shadowRoot?.querySelectorAll('wa-icon-button');
const scrollButtons = tabGroup.shadowRoot?.querySelectorAll('wa-button');
expect(scrollButtons).to.have.length(2);
const firstTab = tabGroup.querySelector('[panel="tab-0"]');
@@ -303,7 +303,7 @@ describe('<wa-tab-group>', () => {
expect(isElementVisibleFromOverflow(tabGroup, firstTab!)).to.be.true;
expect(isElementVisibleFromOverflow(tabGroup, lastTab!)).to.be.false;
const scrollToRightButton = tabGroup.shadowRoot?.querySelector('wa-icon-button[part*="scroll-button-end"]');
const scrollToRightButton = tabGroup.shadowRoot?.querySelector('wa-button[part*="scroll-button-end"]');
expect(scrollToRightButton).not.to.be.null;
await clickOnElement(scrollToRightButton!);

38
packages/webawesome/src/components/tab-group/tab-group.ts
View File

@@ -7,7 +7,7 @@ import { scrollIntoView } from '../../internal/scroll.js';
import { watch } from '../../internal/watch.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
import { LocalizeController } from '../../utilities/localize.js';
import '../icon-button/icon-button.js';
import '../button/button.js';
import '../tab-panel/tab-panel.js';
import type WaTabPanel from '../tab-panel/tab-panel.js';
import '../tab/tab.js';
@@ -20,7 +20,7 @@ import styles from './tab-group.css';
* @status stable
* @since 2.0
*
* @dependency wa-icon-button
* @dependency wa-button
* @dependency wa-tab
* @dependency wa-tab-panel
*
@@ -35,7 +35,7 @@ import styles from './tab-group.css';
* @csspart nav - The tab group's navigation container where tabs are slotted in.
* @csspart tabs - The container that wraps the tabs.
* @csspart body - The tab group's body where tab panels are slotted in.
* @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<wa-icon-button>`.
* @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, a `<wa-button>`.
* @csspart scroll-button-start - The starting scroll button.
* @csspart scroll-button-end - The ending scroll button.
* @csspart scroll-button__base - The scroll button's exported `base` part.
@@ -400,16 +400,20 @@ export default class WaTabGroup extends WebAwesomeElement {
<div class="nav-container" part="nav">
${this.hasScrollControls
? html`
<wa-icon-button
<wa-button
part="scroll-button scroll-button-start"
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')}
appearance="plain"
@click=${this.handleScrollToStart}
></wa-icon-button>
>
<wa-icon
name=${isRtl ? 'chevron-right' : 'chevron-left'}
library="system"
variant="solid"
label=${this.localize.term('scrollToStart')}
></wa-icon>
</wa-button>
`
: ''}
@@ -422,16 +426,20 @@ export default class WaTabGroup extends WebAwesomeElement {
${this.hasScrollControls
? html`
<wa-icon-button
<wa-button
part="scroll-button scroll-button-end"
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')}
appearance="plain"
@click=${this.handleScrollToEnd}
></wa-icon-button>
>
<wa-icon
name=${isRtl ? 'chevron-left' : 'chevron-right'}
library="system"
variant="solid"
label=${this.localize.term('scrollToEnd')}
></wa-icon>
</wa-button>
`
: ''}
</div>

2
packages/webawesome/src/components/tab/tab.ts
View File

@@ -18,8 +18,6 @@ let id = 0;
* @cssproperty --active-tab-color - The color of the active tab's label.
*
* @csspart base - The component's base wrapper.
* @csspart close-button - The close button, an `<wa-icon-button>`.
* @csspart base - The close button's exported `base` part.
*/
@customElement('wa-tab')
export default class WaTab extends WebAwesomeElement {

12
packages/webawesome/src/components/tag/tag.css
View File

@@ -24,19 +24,21 @@
[part='remove-button'] {
color: inherit;
padding: 0;
line-height: 1;
}
[part='remove-button']::part(base) {
padding: 0;
height: 1em;
width: 1em;
}
:host(:hover) > wa-icon-button {
color: color-mix(in oklab, var(--text-color), var(--wa-color-mix-hover));
:host(:hover) > [part='remove-button']::part(base) {
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
}
:host(:active) > wa-icon-button {
color: color-mix(in oklab, var(--text-color), var(--wa-color-mix-active));
:host(:active) > [part='remove-button']::part(base) {
color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
}
/*

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

@@ -31,7 +31,7 @@ describe('<wa-tag>', () => {
it('should set removable by attribute', async () => {
const el = await fixture<WaTag>(html` <wa-tag with-remove>Test</wa-tag> `);
const removeButton = el.shadowRoot!.querySelector('wa-icon-button');
const removeButton = el.shadowRoot!.querySelector('wa-button');
expect(el.withRemove).to.be.true;
expect(removeButton).to.exist;
@@ -40,7 +40,7 @@ describe('<wa-tag>', () => {
describe('removable', () => {
it('should emit remove event when remove button clicked', async () => {
const el = await fixture<WaTag>(html` <wa-tag with-remove>Test</wa-tag> `);
const removeButton = el.shadowRoot!.querySelector('wa-icon-button');
const removeButton = el.shadowRoot!.querySelector('wa-button');
const spy = sinon.spy();
el.addEventListener('wa-remove', spy, { once: true });

17
packages/webawesome/src/components/tag/tag.ts
View File

@@ -6,7 +6,7 @@ import appearanceStyles from '../../styles/utilities/appearance.css';
import sizeStyles from '../../styles/utilities/size.css';
import variantStyles from '../../styles/utilities/variants.css';
import { LocalizeController } from '../../utilities/localize.js';
import '../icon-button/icon-button.js';
import '../button/button.js';
import styles from './tag.css';
/**
@@ -15,7 +15,7 @@ import styles from './tag.css';
* @status stable
* @since 2.0
*
* @dependency wa-icon-button
* @dependency wa-button
*
* @slot - The tag's content.
*
@@ -23,7 +23,7 @@ import styles from './tag.css';
*
* @csspart base - The component's base wrapper.
* @csspart content - The tag's content.
* @csspart remove-button - The tag's remove button, an `<wa-icon-button>`.
* @csspart remove-button - The tag's remove button, a `<wa-button>`.
* @csspart remove-button__base - The remove button's exported `base` part.
*/
@customElement('wa-tag')
@@ -58,17 +58,16 @@ export default class WaTag extends WebAwesomeElement {
${this.withRemove
? html`
<wa-icon-button
<wa-button
part="remove-button"
exportparts="base:remove-button__base"
name="xmark"
library="system"
variant="solid"
label=${this.localize.term('remove')}
class="remove"
appearance="plain"
@click=${this.handleRemoveClick}
tabindex="-1"
></wa-icon-button>
>
<wa-icon name="xmark" library="system" variant="solid" label=${this.localize.term('remove')}></wa-icon>
</wa-button>
`
: ''}
`;

8
packages/webawesome/src/components/viewport-demo/viewport-demo.css
View File

@@ -116,14 +116,16 @@ slot {
}
wa-icon {
display: none;
vertical-align: -0.1em;
font-size: 85%;
}
wa-icon-button {
wa-button {
line-height: 1;
&::part(base) {
padding: 0;
height: 1em;
width: 1em;
}
}

42
packages/webawesome/src/components/viewport-demo/viewport-demo.ts
View File

@@ -6,7 +6,7 @@ import { styleMap } from 'lit/directives/style-map.js';
import { getComputedStyle } from '../../internal/computed-style.js';
import { watch } from '../../internal/watch.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
import '../icon-button/icon-button.js';
import '../button/button.js';
import styles from './viewport-demo.css';
export interface ViewportDimensions {
@@ -53,7 +53,7 @@ export const viewportPropertyConverter = {
* @status experimental
* @since 3.0
*
* @dependency wa-icon-button
* @dependency wa-button
*
* @slot - The iframe (usually an `<iframe>` element).
*
@@ -353,37 +353,23 @@ export default class WaViewportDemo extends WebAwesomeElement {
<div id="viewport" part="frame" style=${styleMap(viewportStyle)} class=${classMap(viewportClasses)}>
<span part="controls">
${resized
? html`<wa-icon-button
name="arrow-rotate-left"
variant="regular"
label="Revert resizing"
? html`<wa-button
appearance="plain"
@click=${() => this.iframe.removeAttribute('style')}
part="undo button"
>-</wa-icon-button
>`
>
<wa-icon name="arrow-rotate-left" variant="regular" label="Revert resizing"></wa-icon>
</wa-button>`
: ''}
${dimensions}
<span class="zoom">
<wa-icon-button
name="square-minus"
variant="regular"
label="Zoom out"
@click=${() => this.zoomOut()}
part="zoom-out button"
>-</wa-icon-button
>
<span class="zoom-level">
<wa-icon name="magnifying-glass-plus"></wa-icon>
${Math.round(this.computedZoom * 100)}%
</span>
<wa-icon-button
name="square-plus"
variant="regular"
label="Zoom in"
@click=${() => this.zoomIn()}
part="zoom-in button"
>+</wa-icon-button
>
<wa-button appearance="plain" @click=${() => this.zoomOut()} part="zoom-out button">
<wa-icon name="square-minus" variant="regular" label="Zoom out"></wa-icon>
</wa-button>
<span class="zoom-level"> ${Math.round(this.computedZoom * 100)}% </span>
<wa-button appearance="plain" @click=${() => this.zoomIn()} part="zoom-in button">
<wa-icon name="square-plus" variant="regular" label="Zoom in"></wa-icon>
</wa-button>
</span>
</span>
<slot @slotchange=${this.handleSlotChange}></slot>

6
packages/webawesome/src/styles/themes/matter/overrides.css
View File

@@ -73,12 +73,6 @@
--border-radius: calc(var(--wa-border-radius-s) / 2);
}
wa-icon-button::part(base) {
aspect-ratio: 1;
border-radius: var(--wa-border-radius-circle);
padding: 0.75em;
}
input:where(
:not(
[type='button'],