diff --git a/docs/components/tag.md b/docs/components/tag.md index 06a043d1d..6a7ab9d87 100644 --- a/docs/components/tag.md +++ b/docs/components/tag.md @@ -34,21 +34,21 @@ Use the `pill` attribute to give tabs rounded edges. Large ``` -### Clearable +### Removable -Use the `clearable` attribute to add a clear button to the tag. +Use the `removable` attribute to add a remove button to the tag. ```html preview -
- Small - Medium - Large +
+ Small + Medium + Large
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 664f28540..a301b3096 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -8,6 +8,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis ## Next +- 🚨 BREAKING: renamed the `sl-clear` event to `sl-remove`, the `clear-button` part to `remove-button`, and the `clearable` property to `removable` in `` - Added the `disabled` prop to `` - Fixed a bug in `` where setting `disabled` initially didn't work diff --git a/src/components/select/select.ts b/src/components/select/select.ts index 188eac782..d7ae089a3 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -51,8 +51,8 @@ let id = 0; * @csspart prefix - The select's prefix. * @csspart label - The select's label. * @csspart suffix - The select's suffix. - * @csspart menu - The select menu, a element. - * @csspart tag - The multiselect option, a element. + * @csspart menu - The select menu, an element. + * @csspart tag - The multiselect option, an element. * @csspart tags - The container in which multiselect options are rendered. */ @customElement('sl-select') @@ -336,7 +336,7 @@ export default class SlSelect extends LitElement { const clearButton = path.find((el: SlIconButton) => { if (el instanceof HTMLElement) { const element = el as HTMLElement; - return element.classList.contains('tag__clear'); + return element.classList.contains('tag__remove'); } return false; }); @@ -382,10 +382,10 @@ export default class SlSelect extends LitElement { type="neutral" size=${this.size} ?pill=${this.pill} - clearable + removable @click=${this.handleTagInteraction} @keydown=${this.handleTagInteraction} - @sl-clear=${(event: CustomEvent) => { + @sl-remove=${(event: CustomEvent) => { event.stopPropagation(); if (!this.disabled) { item.checked = false; diff --git a/src/components/tag/tag.styles.ts b/src/components/tag/tag.styles.ts index 4b37e2ef9..d76d55497 100644 --- a/src/components/tag/tag.styles.ts +++ b/src/components/tag/tag.styles.ts @@ -18,7 +18,7 @@ export default css` cursor: default; } - .tag__clear::part(base) { + .tag__remove::part(base) { color: inherit; padding: 0; } @@ -69,7 +69,7 @@ export default css` padding: 0 var(--sl-spacing-x-small); } - .tag--small .tag__clear { + .tag--small .tag__remove { margin-left: var(--sl-spacing-2x-small); margin-right: calc(-1 * var(--sl-spacing-3x-small)); } @@ -82,7 +82,7 @@ export default css` padding: 0 var(--sl-spacing-small); } - .tag__clear { + .tag__remove { margin-left: var(--sl-spacing-2x-small); margin-right: calc(-1 * var(--sl-spacing-2x-small)); } @@ -95,7 +95,7 @@ export default css` padding: 0 var(--sl-spacing-medium); } - .tag__clear { + .tag__remove { margin-left: var(--sl-spacing-2x-small); margin-right: calc(-1 * var(--sl-spacing-x-small)); } diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts index b68dc6500..2e72d077d 100644 --- a/src/components/tag/tag.ts +++ b/src/components/tag/tag.ts @@ -14,11 +14,11 @@ import '../icon-button/icon-button'; * * @slot - The tag's content. * - * @event sl-clear - Emitted when the clear button is activated. + * @event sl-remove - Emitted when the remove button is activated. * * @csspart base - The component's base wrapper. * @csspart content - The tag content. - * @csspart clear-button - The clear button. + * @csspart remove-button - The remove button. */ @customElement('sl-tag') export default class SlTag extends LitElement { @@ -33,11 +33,11 @@ export default class SlTag extends LitElement { /** Draws a pill-style tag with rounded edges. */ @property({ type: Boolean, reflect: true }) pill = false; - /** Makes the tag clearable. */ - @property({ type: Boolean }) clearable = false; + /** Makes the tag removable. */ + @property({ type: Boolean }) removable = false; - handleClearClick() { - emit(this, 'sl-clear'); + handleRemoveClick() { + emit(this, 'sl-remove'); } render() { @@ -62,21 +62,21 @@ export default class SlTag extends LitElement { // Modifers 'tag--pill': this.pill, - 'tag--clearable': this.clearable + 'tag--removable': this.removable })} > - ${this.clearable + ${this.removable ? html` ` : ''}