diff --git a/docs/components/radio-button.md b/docs/components/radio-button.md index 7dcf1b2f6..df6de475b 100644 --- a/docs/components/radio-button.md +++ b/docs/components/radio-button.md @@ -94,110 +94,6 @@ const App = () => ( ); ``` -### Variants - -Use the `variant` attribute to set the button's variant. - -```html preview - - Option 1 - Option 2 - Option 3 - - -
- - - Option 1 - Option 2 - Option 3 - - -
- - - Option 1 - Option 2 - Option 3 - - -
- - - Option 1 - Option 2 - Option 3 - - -
- - - Option 1 - Option 2 - Option 3 - - -
- - - Option 1 - Option 2 - Option 3 - -``` - -```jsx react -import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - - -
- - - Option 1 - Option 2 - Option 3 - - -
- - - Option 1 - Option 2 - Option 3 - - -
- - - Option 1 - Option 2 - Option 3 - - -
- - - Option 1 - Option 2 - Option 3 - - -
- - - Option 1 - Option 2 - Option 3 - -); -``` - ### Sizes Use the `size` attribute to change a radio button's size. diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 4016ad825..6b34f6054 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -12,6 +12,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis - Removed the `--sl-focus-ring-alpha` design token - Refactored `--sl-focus-ring` to be an `outline` property instead of a `box-shadow` property - Added `--sl-focus-ring-color`, `--sl-focus-ring-style`, and `--sl-focus-ring-offset` +- 🚨 BREAKING: removed `variant` from `` - Added `sl-label-change` event to `` - Added `blur()`, `click()`, and `focus()` methods as well as `sl-blur` and `sl-focus` events to `` [#730](https://github.com/shoelace-style/shoelace/issues/730) - Added Tabler Icons example to icons page diff --git a/src/components/radio-button/radio-button.ts b/src/components/radio-button/radio-button.ts index 3acd6bf59..7eb173f6a 100644 --- a/src/components/radio-button/radio-button.ts +++ b/src/components/radio-button/radio-button.ts @@ -127,10 +127,6 @@ export default class SlRadioButton extends LitElement { } } - /** The button's variant. */ - @property({ reflect: true }) variant: 'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = - 'default'; - /** The button's size. */ @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium'; @@ -145,12 +141,7 @@ export default class SlRadioButton extends LitElement { part="button" class=${classMap({ button: true, - 'button--default': this.variant === 'default', - 'button--primary': this.variant === 'primary', - 'button--success': this.variant === 'success', - 'button--neutral': this.variant === 'neutral', - 'button--warning': this.variant === 'warning', - 'button--danger': this.variant === 'danger', + 'button--default': true, 'button--small': this.size === 'small', 'button--medium': this.size === 'medium', 'button--large': this.size === 'large',