From d2e32a0a53f521492081d4fb8aab262184464ed4 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 5 Jun 2025 15:16:03 -0400 Subject: [PATCH] Support icon buttons directly in `` (#1030) * support icon buttons directly in * [progress] replace `` instances * change close buttons to `` * fix formatting * change scroll buttons to `` * update tests * change tag remove button to `` * fix tag tests * remove nonexistent parts from tab docs * change viewport demo controls to `` * 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 --- packages/webawesome/.gitignore | 4 + .../webawesome/docs/_includes/sidebar.njk | 1 - .../docs/_includes/svgs/icon-button.njk | 4 - .../docs/_includes/theme-showcase.njk | 28 ++- .../docs/_includes/visual-tests/alignment.njk | 4 +- packages/webawesome/docs/_layouts/palette.njk | 30 +-- packages/webawesome/docs/_utils/copy-code.js | 2 +- .../docs/assets/examples/page/demo-1.html | 4 +- .../docs/assets/examples/page/demo-2.html | 91 ++++++--- .../docs/assets/scripts/sidebar-tweaks.js | 8 +- .../webawesome/docs/assets/styles/docs.css | 35 +--- .../docs/assets/styles/theme-headers.css | 12 +- packages/webawesome/docs/assets/styles/ui.css | 9 +- .../assets/vue/components/editable-text.js | 8 +- .../docs/assets/vue/components/ui-slider.js | 4 +- .../webawesome/docs/docs/components/button.md | 13 ++ .../webawesome/docs/docs/components/card.md | 4 +- .../webawesome/docs/docs/components/dialog.md | 6 +- .../webawesome/docs/docs/components/drawer.md | 6 +- .../docs/docs/components/icon-button.md | 76 -------- .../docs/docs/components/progress-bar.md | 12 +- .../docs/docs/components/tab-group.md | 12 +- .../docs/docs/experimental/themer.md | 78 ++++++-- .../docs/docs/resources/changelog.md | 1 + .../docs/docs/themes/edit/index.njk | 8 +- .../docs/docs/themes/edit/style.css | 4 +- .../docs/docs/themes/preview/content.css | 2 +- .../docs/docs/themes/preview/content.njk | 12 +- .../docs/docs/tokens/component-groups.md | 4 +- .../webawesome/docs/docs/utilities/frame.md | 20 +- .../webawesome/docs/docs/utilities/split.md | 16 +- packages/webawesome/docs/index.md | 3 +- .../breadcrumb-item/breadcrumb-item.ts | 4 +- .../src/components/button/button.css | 12 +- .../src/components/button/button.ts | 64 +++++-- .../src/components/dialog/dialog.css | 12 +- .../src/components/dialog/dialog.ts | 26 +-- .../src/components/drawer/drawer.css | 11 +- .../src/components/drawer/drawer.ts | 26 +-- .../src/components/dropdown/dropdown.ts | 6 +- .../components/icon-button/icon-button.css | 53 ------ .../icon-button/icon-button.test.ts | 180 ------------------ .../src/components/icon-button/icon-button.ts | 139 -------------- .../src/components/select/select.ts | 10 +- .../components/tab-group/tab-group.test.ts | 16 +- .../src/components/tab-group/tab-group.ts | 38 ++-- packages/webawesome/src/components/tab/tab.ts | 2 - .../webawesome/src/components/tag/tag.css | 12 +- .../webawesome/src/components/tag/tag.test.ts | 4 +- packages/webawesome/src/components/tag/tag.ts | 17 +- .../viewport-demo/viewport-demo.css | 8 +- .../components/viewport-demo/viewport-demo.ts | 42 ++-- .../src/styles/themes/matter/overrides.css | 6 - 53 files changed, 469 insertions(+), 740 deletions(-) create mode 100644 packages/webawesome/.gitignore delete mode 100644 packages/webawesome/docs/_includes/svgs/icon-button.njk delete mode 100644 packages/webawesome/docs/docs/components/icon-button.md delete mode 100644 packages/webawesome/src/components/icon-button/icon-button.css delete mode 100644 packages/webawesome/src/components/icon-button/icon-button.test.ts delete mode 100644 packages/webawesome/src/components/icon-button/icon-button.ts diff --git a/packages/webawesome/.gitignore b/packages/webawesome/.gitignore new file mode 100644 index 000000000..489dbe635 --- /dev/null +++ b/packages/webawesome/.gitignore @@ -0,0 +1,4 @@ +_site +dist +dist-cdn +src/react diff --git a/packages/webawesome/docs/_includes/sidebar.njk b/packages/webawesome/docs/_includes/sidebar.njk index 8336b8b52..75a882f78 100644 --- a/packages/webawesome/docs/_includes/sidebar.njk +++ b/packages/webawesome/docs/_includes/sidebar.njk @@ -126,7 +126,6 @@
  • Format Date
  • Format Number
  • Icon
    • -
  • Icon Button
  • Include
  • Input
  • diff --git a/packages/webawesome/docs/_includes/svgs/icon-button.njk b/packages/webawesome/docs/_includes/svgs/icon-button.njk deleted file mode 100644 index ccb8fa3e1..000000000 --- a/packages/webawesome/docs/_includes/svgs/icon-button.njk +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/webawesome/docs/_includes/theme-showcase.njk b/packages/webawesome/docs/_includes/theme-showcase.njk index 6a9625547..48683d9d4 100644 --- a/packages/webawesome/docs/_includes/theme-showcase.njk +++ b/packages/webawesome/docs/_includes/theme-showcase.njk @@ -3,7 +3,9 @@ @@ -253,7 +265,9 @@ - + + + Copy link Rename diff --git a/packages/webawesome/docs/_includes/visual-tests/alignment.njk b/packages/webawesome/docs/_includes/visual-tests/alignment.njk index 768fa203f..b62f49b6a 100644 --- a/packages/webawesome/docs/_includes/visual-tests/alignment.njk +++ b/packages/webawesome/docs/_includes/visual-tests/alignment.njk @@ -70,7 +70,9 @@
    - + + +
    diff --git a/packages/webawesome/docs/_layouts/palette.njk b/packages/webawesome/docs/_layouts/palette.njk index 06e9b4a9c..ed311a403 100644 --- a/packages/webawesome/docs/_layouts/palette.njk +++ b/packages/webawesome/docs/_layouts/palette.njk @@ -33,14 +33,14 @@

    {{ title }} @@ -71,10 +71,8 @@ - - - - + + Reset @@ -130,7 +128,9 @@ @input="tweaking.grayChroma = true" @change="tweaking.grayChroma = false">
    Gray colorfulness - + + +
    Neutral
    @@ -149,7 +149,9 @@ @change="tweaking.hue = tweaking.{{ hue }} = false">
    Tweak {{ hue }} hue - + + +
    More {{hueBefore}}
    @@ -193,7 +195,9 @@ style="--min: {{ chromaScaleBounds[0] }}; --max: {{ chromaScaleBounds[1] }};"> @change="tweaking.chroma = false">
    Overall colorfulness - + + +
    More muted
    diff --git a/packages/webawesome/docs/_utils/copy-code.js b/packages/webawesome/docs/_utils/copy-code.js index 3b56ae933..93f8ed526 100644 --- a/packages/webawesome/docs/_utils/copy-code.js +++ b/packages/webawesome/docs/_utils/copy-code.js @@ -32,7 +32,7 @@ export function copyCodePlugin(eleventyConfig, options = {}) { } // Add a copy button - pre.innerHTML += ` + pre.innerHTML += ` `; }); diff --git a/packages/webawesome/docs/assets/examples/page/demo-1.html b/packages/webawesome/docs/assets/examples/page/demo-1.html index 603043cd7..7a4688b34 100644 --- a/packages/webawesome/docs/assets/examples/page/demo-1.html +++ b/packages/webawesome/docs/assets/examples/page/demo-1.html @@ -32,7 +32,9 @@

    • @@ -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 > * { diff --git a/packages/webawesome/docs/assets/scripts/sidebar-tweaks.js b/packages/webawesome/docs/assets/scripts/sidebar-tweaks.js index 168004c53..8d4a1bb24 100644 --- a/packages/webawesome/docs/assets/scripts/sidebar-tweaks.js +++ b/packages/webawesome/docs/assets/scripts/sidebar-tweaks.js @@ -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: '', }); deleteButton.addEventListener('click', () => entity.delete()); append.push(deleteButton); diff --git a/packages/webawesome/docs/assets/styles/docs.css b/packages/webawesome/docs/assets/styles/docs.css index 7b7f81577..3dbf19a0d 100644 --- a/packages/webawesome/docs/assets/styles/docs.css +++ b/packages/webawesome/docs/assets/styles/docs.css @@ -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); diff --git a/packages/webawesome/docs/assets/styles/theme-headers.css b/packages/webawesome/docs/assets/styles/theme-headers.css index 02192e96c..168e0811a 100644 --- a/packages/webawesome/docs/assets/styles/theme-headers.css +++ b/packages/webawesome/docs/assets/styles/theme-headers.css @@ -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); } diff --git a/packages/webawesome/docs/assets/styles/ui.css b/packages/webawesome/docs/assets/styles/ui.css index 903e0c354..3b341ba29 100644 --- a/packages/webawesome/docs/assets/styles/ui.css +++ b/packages/webawesome/docs/assets/styles/ui.css @@ -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%; } } diff --git a/packages/webawesome/docs/assets/vue/components/editable-text.js b/packages/webawesome/docs/assets/vue/components/editable-text.js index fffe00a82..f2e7b51a0 100644 --- a/packages/webawesome/docs/assets/vue/components/editable-text.js +++ b/packages/webawesome/docs/assets/vue/components/editable-text.js @@ -4,11 +4,15 @@ const template = ` `; diff --git a/packages/webawesome/docs/assets/vue/components/ui-slider.js b/packages/webawesome/docs/assets/vue/components/ui-slider.js index 8b56f6bf0..5d7370028 100644 --- a/packages/webawesome/docs/assets/vue/components/ui-slider.js +++ b/packages/webawesome/docs/assets/vue/components/ui-slider.js @@ -8,7 +8,9 @@ const template = `
    - + + +
    diff --git a/packages/webawesome/docs/docs/components/button.md b/packages/webawesome/docs/docs/components/button.md index 2d1d98206..5cabbf00a 100644 --- a/packages/webawesome/docs/docs/components/button.md +++ b/packages/webawesome/docs/docs/components/button.md @@ -103,6 +103,19 @@ It's often helpful to have a button that works like a link. This is possible by Download ``` +### 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} + +``` + ### 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. diff --git a/packages/webawesome/docs/docs/components/card.md b/packages/webawesome/docs/docs/components/card.md index 1795dd39e..1100f7b3e 100644 --- a/packages/webawesome/docs/docs/components/card.md +++ b/packages/webawesome/docs/docs/components/card.md @@ -57,7 +57,9 @@ If using SSR, you need to also use the `with-header` attribute to add a header t This card has a header. You can put all sorts of things in it! diff --git a/packages/webawesome/docs/docs/components/dialog.md b/packages/webawesome/docs/docs/components/dialog.md index 1e3e233f9..9670315f2 100644 --- a/packages/webawesome/docs/docs/components/dialog.md +++ b/packages/webawesome/docs/docs/components/dialog.md @@ -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} - + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Close diff --git a/packages/webawesome/docs/docs/components/drawer.md b/packages/webawesome/docs/docs/components/drawer.md index 191d70306..5001b2cef 100644 --- a/packages/webawesome/docs/docs/components/drawer.md +++ b/packages/webawesome/docs/docs/components/drawer.md @@ -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} - + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Close diff --git a/packages/webawesome/docs/docs/components/icon-button.md b/packages/webawesome/docs/docs/components/icon-button.md deleted file mode 100644 index e8490e915..000000000 --- a/packages/webawesome/docs/docs/components/icon-button.md +++ /dev/null @@ -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} - -``` - -## Examples - -### Sizes - -Icon buttons inherit their parent element's `font-size`. - -```html {.example} - - - -``` - -### 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} -
    - - - -
    - - -``` - -### Link Buttons - -Use the `href` attribute to convert the button to a link. - -```html {.example} - -``` - -### Icon Button with Tooltip - -Add a tooltip that references the `id` of the icon button to provide contextual information. - -```html {.example} - -Settings -``` - -### Disabled - -Use the `disabled` attribute to disable the icon button. - -```html {.example} - -``` diff --git a/packages/webawesome/docs/docs/components/progress-bar.md b/packages/webawesome/docs/docs/components/progress-bar.md index 187587d9b..985e38dbb 100644 --- a/packages/webawesome/docs/docs/components/progress-bar.md +++ b/packages/webawesome/docs/docs/components/progress-bar.md @@ -38,15 +38,19 @@ Use the default slot to show a value. 50%
    - - + + + + + +