From 375bdad9f8413ce00cbc1f50c6a815bb0d6e5016 Mon Sep 17 00:00:00 2001 From: Tommaso Menga Date: Wed, 28 Aug 2024 14:14:34 +0200 Subject: [PATCH] feat(sbb-time-input): add size 's' (#3018) --- src/elements/core/styles/core.scss | 6 ++++ src/elements/time-input/readme.md | 7 ++-- src/elements/time-input/time-input.stories.ts | 28 ++++++++-------- .../time-input/time-input.visual.spec.ts | 32 +++++++++++++------ 4 files changed, 48 insertions(+), 25 deletions(-) diff --git a/src/elements/core/styles/core.scss b/src/elements/core/styles/core.scss index 733a264a8d..f1c9bb6630 100644 --- a/src/elements/core/styles/core.scss +++ b/src/elements/core/styles/core.scss @@ -27,6 +27,7 @@ // Time Input --sbb-time-input-max-width: #{functions.px-to-rem-build(58)}; + --sbb-time-input-s-max-width: #{functions.px-to-rem-build(51)}; // Overlay --sbb-overlay-default-z-index: 1000; @@ -41,6 +42,7 @@ // Time Input --sbb-time-input-max-width: #{functions.px-to-rem-build(65)}; + --sbb-time-input-s-max-width: #{functions.px-to-rem-build(58)}; } } } @@ -123,4 +125,8 @@ sbb-title + p { input[data-sbb-time-input] { max-width: var(--sbb-time-input-max-width); + + sbb-form-field[size='s'] & { + max-width: var(--sbb-time-input-s-max-width); + } } diff --git a/src/elements/time-input/readme.md b/src/elements/time-input/readme.md index c6f59852e0..501d8ca0a0 100644 --- a/src/elements/time-input/readme.md +++ b/src/elements/time-input/readme.md @@ -12,10 +12,13 @@ which accepts the id of the native input, or directly its reference. ## In `sbb-form-field` -If the `sbb-time-input` is used within a `sbb-form-field` with a native input, they are automatically linked. +If the `sbb-time-input` is used within a `sbb-form-field`: + +- It links to the native input automatically. +- It adapts to the form-field `size`. ```html - + diff --git a/src/elements/time-input/time-input.stories.ts b/src/elements/time-input/time-input.stories.ts index 8c05196ec2..d9368c37ff 100644 --- a/src/elements/time-input/time-input.stories.ts +++ b/src/elements/time-input/time-input.stories.ts @@ -72,7 +72,7 @@ const value: InputType = { type: 'text', }, table: { - category: 'Native input attribute', + category: 'Native input', }, }; @@ -81,7 +81,7 @@ const readonly: InputType = { type: 'boolean', }, table: { - category: 'Native input attribute', + category: 'Native input', }, }; @@ -90,7 +90,7 @@ const disabled: InputType = { type: 'boolean', }, table: { - category: 'Native input attribute', + category: 'Native input', }, }; @@ -99,7 +99,7 @@ const required: InputType = { type: 'boolean', }, table: { - category: 'Native input attribute', + category: 'Native input', }, }; @@ -107,9 +107,9 @@ const size: InputType = { control: { type: 'inline-radio', }, - options: ['m', 'l'], + options: ['s', 'm', 'l'], table: { - category: 'Form-field attribute', + category: 'Form-field', }, }; @@ -118,7 +118,7 @@ const negative: InputType = { type: 'boolean', }, table: { - category: 'Form-field attribute', + category: 'Form-field', }, }; @@ -127,7 +127,7 @@ const label: InputType = { type: 'text', }, table: { - category: 'Form-field attribute', + category: 'Form-field', }, }; @@ -136,7 +136,7 @@ const optional: InputType = { type: 'boolean', }, table: { - category: 'Form-field attribute', + category: 'Form-field', }, }; @@ -145,7 +145,7 @@ const borderless: InputType = { type: 'boolean', }, table: { - category: 'Form-field attribute', + category: 'Form-field', }, }; @@ -154,7 +154,7 @@ const iconStart: InputType = { type: 'text', }, table: { - category: 'Form-field attribute', + category: 'Form-field', }, }; @@ -163,7 +163,7 @@ const iconEnd: InputType = { type: 'text', }, table: { - category: 'Form-field attribute', + category: 'Form-field', }, }; @@ -196,7 +196,7 @@ const basicArgs: Args = { const formFieldBasicArgs = { ...basicArgs, label: 'Label', - size: size.options![0], + size: size.options![1], optional: false, borderless: false, iconStart: undefined, @@ -206,7 +206,7 @@ const formFieldBasicArgs = { const formFieldBasicArgsWithIcons = { ...basicArgs, label: 'Label', - size: size.options![0], + size: size.options![1], optional: false, borderless: false, iconStart: 'clock-small', diff --git a/src/elements/time-input/time-input.visual.spec.ts b/src/elements/time-input/time-input.visual.spec.ts index accb8e2a25..49c5385248 100644 --- a/src/elements/time-input/time-input.visual.spec.ts +++ b/src/elements/time-input/time-input.visual.spec.ts @@ -21,14 +21,25 @@ describe(`sbb-time-input`, () => { withError: [false, true], }; + const sizeCases = { + size: ['s', 'm', 'l'], + noIcons: [false, true], + }; + type ParamsType = { [K in keyof typeof cases]: (typeof cases)[K][number] } & { + [K in keyof typeof sizeCases]: (typeof sizeCases)[K][number]; + } & { readonly?: boolean; borderless?: boolean; disabled?: boolean; - noIcons?: boolean; }; const template = (args: Partial): TemplateResult => html` - + ${!args.noIcons ? html`` : nothing} @@ -62,6 +73,16 @@ describe(`sbb-time-input`, () => { ); }); + // Size and icons cases + describeEach(sizeCases, (params) => { + it( + state.name, + state.with(async (setup) => { + await setup.withFixture(template(params)); + }), + ); + }); + it( `disabled_${state.name}`, state.with(async (setup) => { @@ -82,13 +103,6 @@ describe(`sbb-time-input`, () => { await setup.withFixture(template({ borderless: true })); }), ); - - it( - `no icon_${state.name}`, - state.with(async (setup) => { - await setup.withFixture(template({ noIcons: true })); - }), - ); } }); });