diff --git a/src/components/form-field/form-field/form-field.scss b/src/components/form-field/form-field/form-field.scss index a029f4a6c2..b8044d32a1 100644 --- a/src/components/form-field/form-field/form-field.scss +++ b/src/components/form-field/form-field/form-field.scss @@ -246,10 +246,17 @@ // Moves label down and input up to meet positioning requirements margin-block-end: var(--sbb-form-field-label-to-input-gap); +} +// To avoid doubled payload, we group the rules. +:is(.sbb-form-field__label, .sbb-form-field__label-spacer) { :host(:not([data-slot-names~='label'], [label])) & { display: none; } + + :host([hidden-label]) & { + @include sbb.screen-reader-only; + } } .sbb-form-field__label { @@ -262,10 +269,6 @@ inset-block-start: 0; color: var(--sbb-form-field-label-color); - :host(:not([data-slot-names~='label'], [label])) & { - display: none; - } - :host([data-input-type='select']) &, :host([data-input-type='sbb-select']) & { padding-inline-end: var(--sbb-form-field-select-inline-padding-end); diff --git a/src/components/form-field/form-field/form-field.stories.ts b/src/components/form-field/form-field/form-field.stories.ts index 72228d18b9..5fb08810e4 100644 --- a/src/components/form-field/form-field/form-field.stories.ts +++ b/src/components/form-field/form-field/form-field.stories.ts @@ -74,6 +74,7 @@ const TemplateInput = ({ borderless, width, negative, + 'hidden-label': hiddenLabel, 'floating-label': floatingLabel, ...args }: Args): TemplateResult => html` @@ -84,6 +85,7 @@ const TemplateInput = ({ size=${size} ?borderless=${borderless} width=${width} + ?hidden-label=${hiddenLabel} ?floating-label=${floatingLabel} ?negative=${negative} > @@ -99,6 +101,7 @@ const TemplateInputWithSlottedLabel = ({ borderless, width, negative, + 'hidden-label': hiddenLabel, 'floating-label': floatingLabel, ...args }: Args): TemplateResult => html` @@ -108,6 +111,7 @@ const TemplateInputWithSlottedLabel = ({ size=${size} ?borderless=${borderless} width=${width} + ?hidden-label=${hiddenLabel} ?floating-label=${floatingLabel} ?negative=${negative} > @@ -131,6 +135,7 @@ const TemplateInputWithErrorSpace = (args: Args): TemplateResult => { size=${args.size} ?borderless=${args.borderless} width=${args.width} + ?hidden-label=${args['hidden-label']} ?floating-label=${args['floating-label']} ?negative=${args.negative} > @@ -205,6 +210,7 @@ const TemplateSelect = (args: Args): TemplateResult => html` size=${args.size} ?borderless=${args.borderless} width=${args.width} + ?hidden-label=${args['hidden-label']} ?floating-label=${args['floating-label']} ?negative=${args.negative} > @@ -227,6 +233,7 @@ const TemplateSelectWithErrorSpace = (args: Args): TemplateResult => { size=${args.size} ?borderless=${args.borderless} width=${args.width} + ?hidden-label=${args['hidden-label']} ?floating-label=${args['floating-label']} ?negative=${args.negative} > @@ -354,6 +361,15 @@ const label: InputType = { }, }; +const hiddenLabel: InputType = { + control: { + type: 'boolean', + }, + table: { + category: 'Form-field attribute', + }, +}; + const floatingLabel: InputType = { control: { type: 'boolean', @@ -412,6 +428,7 @@ const active: InputType = { const basicArgTypes: ArgTypes = { 'error-space': errorSpace, label, + 'hidden-label': hiddenLabel, 'floating-label': floatingLabel, optional, borderless, @@ -430,6 +447,7 @@ const basicArgTypes: ArgTypes = { const basicArgs: Args = { 'error-space': 'none', label: 'Input name', + 'hidden-label': false, 'floating-label': false, optional: false, borderless: false, @@ -467,6 +485,12 @@ export const InputNoLabel: StoryObj = { args: { ...basicArgs, label: undefined }, }; +export const InputHiddenLabel: StoryObj = { + render: TemplateInput, + argTypes: basicArgTypes, + args: { ...basicArgs, 'hidden-label': true }, +}; + export const InputWithSlottedLabel: StoryObj = { render: TemplateInputWithSlottedLabel, argTypes: basicArgTypes, diff --git a/src/components/form-field/form-field/form-field.ts b/src/components/form-field/form-field/form-field.ts index 4203dac820..79d70b6d4d 100644 --- a/src/components/form-field/form-field/form-field.ts +++ b/src/components/form-field/form-field/form-field.ts @@ -62,24 +62,16 @@ export class SbbFormFieldElement extends LitElement { @property({ attribute: 'error-space', reflect: true }) public errorSpace?: 'none' | 'reserve' = 'none'; - /** - * Label text for the input which is internally rendered as `