From 224a73b0387160c9810899d55f647e8b1da9fc48 Mon Sep 17 00:00:00 2001 From: Andrew Jakubowicz Date: Thu, 22 Jun 2023 13:49:58 -0700 Subject: [PATCH] fix(select)!: change compound attribute names to kebab-case BREAKING_CHANGE: Attributes `errortext`, `supportingtext`, `menufixed`, `hasleadingicon`, `hastrailingicon`, `displaytext`, `typeaheadbuffertime` and `selectedindex` have been renamed to `error-text`, `supporting-text`, `menu-fixed`, `has-leading-icon`, `has-trailing-icon`, `display-text`, `typeahead-delay` and `selected-index` respectively. The property `typeaheadBufferTime` has been renamed `typeaheadDelay`. PiperOrigin-RevId: 542657808 --- select/demo/demo.ts | 2 +- select/demo/stories.ts | 6 +++--- select/lib/select.ts | 21 ++++++++++++--------- 3 files changed, 16 insertions(+), 13 deletions(-) diff --git a/select/demo/demo.ts b/select/demo/demo.ts index 429ccdd127..ba55c00590 100644 --- a/select/demo/demo.ts +++ b/select/demo/demo.ts @@ -16,7 +16,7 @@ const collection = new MaterialCollection>('Select', [ new Knob('md-select', {ui: title()}), new Knob('label', {ui: textInput(), defaultValue: ''}), - new Knob('typeaheadBufferTime', {ui: numberInput(), defaultValue: 200}), + new Knob('typeaheadDelay', {ui: numberInput(), defaultValue: 200}), new Knob('quick', {ui: boolInput(), defaultValue: false}), new Knob('required', {ui: boolInput(), defaultValue: false}), new Knob('disabled', {ui: boolInput(), defaultValue: false}), diff --git a/select/demo/stories.ts b/select/demo/stories.ts index 8e870b06e2..fa57ea9a08 100644 --- a/select/demo/stories.ts +++ b/select/demo/stories.ts @@ -16,7 +16,7 @@ import {html, nothing} from 'lit'; export interface StoryKnobs { 'md-select': void; label: string; - typeaheadBufferTime: number; + typeaheadDelay: number; quick: boolean; required: boolean; disabled: boolean; @@ -42,7 +42,7 @@ const outlined: MaterialStoryInit = { .errorText=${knobs.errorText} .supportingText=${knobs.supportingText} .menuFixed=${knobs.menuFixed} - .typeaheadBufferTime=${knobs.typeaheadBufferTime} + .typeaheadDelay=${knobs.typeaheadDelay} .error=${knobs.error}> ${renderIcon(knobs['slot=leadingicon'], 'leadingicon')} ${renderIcon(knobs['slot=trailingicon'], 'trailingicon')} @@ -64,7 +64,7 @@ const filled: MaterialStoryInit = { .errorText=${knobs.errorText} .supportingText=${knobs.supportingText} .menuFixed=${knobs.menuFixed} - .typeaheadBufferTime=${knobs.typeaheadBufferTime} + .typeaheadDelay=${knobs.typeaheadDelay} .error=${knobs.error}> ${renderIcon(knobs['slot=leadingicon'], 'leadingicon')} ${renderIcon(knobs['slot=trailingicon'], 'trailingicon')} diff --git a/select/lib/select.ts b/select/lib/select.ts index 445078a93d..67c11ff78f 100644 --- a/select/lib/select.ts +++ b/select/lib/select.ts @@ -48,7 +48,7 @@ export abstract class Select extends LitElement { * Calling `reportValidity()` will automatically update `errorText` to the * native `validationMessage`. */ - @property({type: String}) errorText = ''; + @property({type: String, attribute: 'error-text'}) errorText = ''; /** * The floating label for the field. */ @@ -57,7 +57,7 @@ export abstract class Select extends LitElement { * Conveys additional information below the text field, such as how it should * be used. */ - @property({type: String}) supportingText = ''; + @property({type: String, attribute: 'supporting-text'}) supportingText = ''; /** * Gets or sets whether or not the text field is in a visually invalid state. * @@ -68,24 +68,27 @@ export abstract class Select extends LitElement { * Whether or not the underlying md-menu should be position: fixed to display * in a top-level manner. */ - @property({type: Boolean}) menuFixed = false; + @property({type: Boolean, attribute: 'menu-fixed'}) menuFixed = false; /** * The max time between the keystrokes of the typeahead select / menu behavior * before it clears the typeahead buffer. */ - @property({type: Number}) typeaheadBufferTime = DEFAULT_TYPEAHEAD_BUFFER_TIME; + @property({type: Number, attribute: 'typeahead-delay'}) + typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME; /** * Whether or not the text field has a leading icon. Used for SSR. */ - @property({type: Boolean}) hasLeadingIcon = false; + @property({type: Boolean, attribute: 'has-leading-icon'}) + hasLeadingIcon = false; /** * Whether or not the text field has a trailing icon. Used for SSR. */ - @property({type: Boolean}) hasTrailingIcon = false; + @property({type: Boolean, attribute: 'has-trailing-icon'}) + hasTrailingIcon = false; /** * Text to display in the field. Only set for SSR. */ - @property() displayText = ''; + @property({attribute: 'display-text'}) displayText = ''; /** * When set to true, the error text's `role="alert"` will be removed, then * re-added after an animation frame. This will re-announce an error message @@ -131,7 +134,7 @@ export abstract class Select extends LitElement { * rather than setting `selectedIndex` setting `selectedIndex` will incur a * DOM query. */ - @property({type: Number}) + @property({type: Number, attribute: 'selected-index'}) get selectedIndex(): number { // tslint:disable-next-line:enforce-name-casing const [_option, index] = (this.getSelectedOptions() ?? [])[0] ?? []; @@ -283,7 +286,7 @@ export abstract class Select extends LitElement { .open=${this.open} .quick=${this.quick} .fixed=${this.menuFixed} - .typeaheadBufferTime=${this.typeaheadBufferTime} + .typeaheadBufferTime=${this.typeaheadDelay} @opening=${this.handleOpening} @closing=${this.handleClosing} @close-menu=${this.handleCloseMenu}