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 @@

  • @@ -177,7 +196,9 @@ - + + +
  • @@ -187,7 +208,9 @@ - + + +
  • @@ -197,7 +220,9 @@ - + + +
  • @@ -207,7 +232,9 @@ - + + +
  • @@ -217,7 +244,9 @@ - + + +
  • @@ -227,7 +256,9 @@ - + + +
  • @@ -237,7 +268,9 @@ - + + +
  • @@ -247,7 +280,9 @@ - + + +
  • @@ -260,7 +295,9 @@ - + + +
  • @@ -273,7 +310,9 @@ - + + +
  • @@ -286,7 +325,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%
    - - + + + + + +