diff --git a/components/select/src/vwc-select-coupling.scss b/components/select/src/vwc-select-coupling.scss index 9a22cd3b4b..83091c779e 100644 --- a/components/select/src/vwc-select-coupling.scss +++ b/components/select/src/vwc-select-coupling.scss @@ -10,10 +10,6 @@ .mdc-floating-label--float-above { @include typography.typography-mdc-coupling('subtitle1', 'caption'); } - - .mdc-select-helper-text { - @include typography.typography-mdc-coupling('caption', 'caption'); - } } :host([dense]) { diff --git a/components/select/src/vwc-select.scss b/components/select/src/vwc-select.scss index 48e1258997..afa946843a 100644 --- a/components/select/src/vwc-select.scss +++ b/components/select/src/vwc-select.scss @@ -26,9 +26,15 @@ $vvd-select-size-block: --vvd-select-size-block; --mdc-shape-small: var(--border-radius); + #{$vvd-select-size-block}: 48px; + display: inline-flex; flex-direction: column; font-stretch: var(--mdc-typography-subtitle1-font-stretch); // ! this was supposed to be set by MDC + + .mdc-select__selected-text { + padding: 22px 0 6px; + } } :host(:not([disabled])) .mdc-select.mdc-select--focused:not(.mdc-select--invalid) { @@ -57,18 +63,11 @@ $vvd-select-size-block: --vvd-select-size-block; :host([dense]) { #{$vvd-select-size-block}: 40px; -} + padding-top: 24px; -:host(:not([dense])) { - #{$vvd-select-size-block}: 48px; - - .mdc-select__selected-text { - padding: 22px 0 6px; + .mdc-select__selected-text { + padding: 0; } -} - -:host([dense][label]:not([label=''])) { - padding-top: 24px; .mdc-select { .mdc-floating-label { diff --git a/components/select/src/vwc-select.ts b/components/select/src/vwc-select.ts index 259dcec584..04917bcc4a 100644 --- a/components/select/src/vwc-select.ts +++ b/components/select/src/vwc-select.ts @@ -46,6 +46,13 @@ export class VWCSelect extends MWCSelect { @property({ type: String, reflect: true }) name: string | undefined; + connectedCallback(): void { + super.connectedCallback(); + if (!this.hasAttribute('outlined')) { + this.outlined = true; + } + } + async firstUpdated(): Promise { await super.firstUpdated(); this.replaceIcon(); @@ -53,13 +60,24 @@ export class VWCSelect extends MWCSelect { handleAutofocus(this); } - protected updated(changedProperties: PropertyValues): void { - super.updated(changedProperties); + protected update(changedProperties: PropertyValues): void { + super.update(changedProperties); if (this.shape === 'pill') { this.dense = true; } } + protected updated(changedProperties: PropertyValues): void { + super.updated(changedProperties); + const selectedText = this.shadowRoot?.querySelector( + '.mdc-select__selected-text' + ); + if (selectedText) { + selectedText.setAttribute('aria-label', 'current selection'); + selectedText.setAttribute('role', 'textbox'); + } + } + protected renderHelperText(): TemplateResult | string { if (!this.shouldRenderHelperText) { return ''; diff --git a/components/select/stories/select.stories.js b/components/select/stories/select.stories.js index ed40b50109..91062cade6 100644 --- a/components/select/stories/select.stories.js +++ b/components/select/stories/select.stories.js @@ -24,22 +24,25 @@ const Template = (args) => html` `; export const Default = Template.bind({}); -Default.args = { outlined: '', label: 'VWC Select', helper: 'Helper Text' }; +Default.args = { label: 'VWC Select', helper: 'Helper Text' }; export const Dense = Template.bind({}); -Dense.args = { dense: '', outlined: '', label: 'VWC Select' }; +Dense.args = { dense: '', label: 'VWC Select' }; -export const PillShape = Template.bind({}); -PillShape.args = { shape: 'pill', dense: '', outlined: '' }; +export const DenseNoLabel = Template.bind({}); +DenseNoLabel.args = { dense: '' }; + +export const PillAutoDense = Template.bind({}); +PillAutoDense.args = { shape: 'pill', label: 'VWC Select' }; export const Disabled = Template.bind({}); -Disabled.args = { disabled: '', outlined: '', label: 'VWC Select', helper: 'Helper Text' }; +Disabled.args = { disabled: '', label: 'VWC Select', helper: 'Helper Text' }; export const Required = Template.bind({}); -Required.args = { required: '', outlined: '', label: 'VWC Select', helper: 'Select your preference', validationMessage: 'This Field is Required' }; +Required.args = { required: '', label: 'VWC Select', helper: 'Select your preference', validationMessage: 'This Field is Required' }; export const Autofocus = Template.bind({}); -Autofocus.args = { outlined: '', label: 'VWC Select', helper: 'Select your preference', autofocus: true }; +Autofocus.args = { label: 'VWC Select', helper: 'Select your preference', autofocus: true }; function onSelected(e) { console.log(e);