From 325d6f211bcd25e6af7cc267cedb7e69b8bf7ae5 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Wed, 20 Aug 2025 12:20:18 -0400 Subject: [PATCH] Remove the unsupported button group `size` attribute (#1334) * remove unsupported example * remove old/incorrect example * remove unsupported attribute --- .../docs/_includes/visual-tests/size.njk | 60 ------------------- .../docs/docs/components/button-group.md | 35 ----------- .../docs/docs/resources/changelog.md | 1 + .../components/button-group/button-group.ts | 7 +-- 4 files changed, 2 insertions(+), 101 deletions(-) diff --git a/packages/webawesome/docs/_includes/visual-tests/size.njk b/packages/webawesome/docs/_includes/visual-tests/size.njk index 418159dad..312da1b31 100644 --- a/packages/webawesome/docs/_includes/visual-tests/size.njk +++ b/packages/webawesome/docs/_includes/visual-tests/size.njk @@ -40,66 +40,6 @@ -

Button Group

- -
- - - - - - - - - - - - - - - - - - - - - - - -
size="".wa-size-[s|m|l]
small/s - - Button L - Button R - - - -
medium/m - - Button L - Button R - - - -
large/l - - Button L - Button R - - - -
-
- -

Callout

diff --git a/packages/webawesome/docs/docs/components/button-group.md b/packages/webawesome/docs/docs/components/button-group.md index f3f57f7fc..b84debe74 100644 --- a/packages/webawesome/docs/docs/components/button-group.md +++ b/packages/webawesome/docs/docs/components/button-group.md @@ -15,41 +15,6 @@ category: Actions ## Examples -### Button Sizes - -Unless otherwise specified, -the size of [buttons](/docs/components/button) will be determined by the Button Group's `size` attribute. - -```html {.example} - - Left - Center - Right - - -

- - - Left - Center - Right - - -

- - - Left - Center - Right - -``` - -:::info -While you can still set the size of [buttons](/docs/components/button) individually, -and it will override the inherited size, -it is rarely a good idea to mix sizes within the same button group. -::: - ### Vertical Button Groups Set the `orientation` attribute to `vertical` to make a vertical button group. diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index 3dd1b6e9d..bcb298757 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -16,6 +16,7 @@ Components with the Experimental badge sh - Added the `auto-width` attribute to automatically size icons, since FA7 is fixed-width by default now - Improved support for duotone icons in ``, including custom colors, custom opacity, and opacity swapping - Removed the `fixed-width` attribute as it's now the default behavior +- 🚨 BREAKING: Removed the `size` attribute from `` as it only set the initial size and gets out of sync when buttons are updated (apply a `size` to each button instead) - Added the Hindi translation [pr:1307] - Fixed incorrectly named exported tooltip parts in `` [pr:1277] - Fixed a bug in `` that caused menus to overflow the viewport instead of resizing [issue:1267] diff --git a/packages/webawesome/src/components/button-group/button-group.ts b/packages/webawesome/src/components/button-group/button-group.ts index b0027fe23..df776767b 100644 --- a/packages/webawesome/src/components/button-group/button-group.ts +++ b/packages/webawesome/src/components/button-group/button-group.ts @@ -3,7 +3,6 @@ import { html } from 'lit'; import { customElement, property, query, state } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; import WebAwesomeElement from '../../internal/webawesome-element.js'; -import sizeStyles from '../../styles/utilities/size.css'; import variantStyles from '../../styles/utilities/variants.css'; import type WaButton from '../button/button.js'; import styles from './button-group.css'; @@ -20,7 +19,7 @@ import styles from './button-group.css'; */ @customElement('wa-button-group') export default class WaButtonGroup extends WebAwesomeElement { - static css = [sizeStyles, variantStyles, styles]; + static css = [variantStyles, styles]; @query('slot') defaultSlot: HTMLSlotElement; @@ -36,9 +35,6 @@ export default class WaButtonGroup extends WebAwesomeElement { /** The button group's orientation. */ @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal'; - /** The component's size. */ - @property({ reflect: true }) size: 'small' | 'medium' | 'large'; // unset by default to not override child elements - /** The button group's theme variant. Defaults to `neutral` if not within another element with a variant. */ @property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral'; @@ -85,7 +81,6 @@ export default class WaButtonGroup extends WebAwesomeElement { if (button) { if ((button as WaButton).appearance === 'outlined') this.hasOutlined = true; - if (this.size) button.setAttribute('size', this.size); button.classList.add('wa-button-group__button'); button.classList.toggle('wa-button-group__horizontal', this.orientation === 'horizontal'); button.classList.toggle('wa-button-group__vertical', this.orientation === 'vertical');