From 1733b99bab30e470d1ef90baf326a5e3992c4be2 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Mon, 8 Apr 2024 11:57:44 +0200 Subject: [PATCH 1/8] feat: form-field size='s' first impl --- .../form-field/form-field/form-field.scss | 46 ++++++++-- .../form-field/form-field.stories.ts | 84 ++++++++++++++++++- .../form-field/form-field/form-field.ts | 2 +- .../form-field/form-field/readme.md | 17 +++- 4 files changed, 139 insertions(+), 10 deletions(-) diff --git a/src/components/form-field/form-field/form-field.scss b/src/components/form-field/form-field/form-field.scss index 85c43a6795..b65712f041 100644 --- a/src/components/form-field/form-field/form-field.scss +++ b/src/components/form-field/form-field/form-field.scss @@ -19,6 +19,7 @@ --sbb-form-field-error-padding-block-start: var(--sbb-form-field-error-divider-width); --sbb-form-field-gap: var(--sbb-spacing-fixed-2x); --sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x); + --sbb-form-field-floating-label-transform: #{sbb.px-to-rem-build(10.5)}; --sbb-form-field-select-inline-padding-end: calc( var(--sbb-icon-svg-width) + var(--sbb-form-field-gap) ); @@ -29,7 +30,7 @@ --sbb-form-field-input-size: calc( var(--sbb-font-size-text-m) * var(--sbb-typo-line-height-body-text) ); - --sbb-form-field-margin-block-start: calc( + --sbb-form-field-margin-block: calc( ( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var( --sbb-form-field-input-size @@ -71,6 +72,18 @@ } } +:host([size='s']) { + --sbb-form-field-min-height: var(--sbb-size-element-xs); + --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x); + --sbb-form-field-floating-label-transform: #{sbb.px-to-rem-build(6.5)}; + --sbb-form-field-input-size: calc( + var(--sbb-font-size-text-s) * var(--sbb-typo-line-height-body-text) + ); + --sbb-form-field-label-size: calc( + var(--sbb-font-size-text-xxs) * var(--sbb-typo-line-height-body-text) + ); +} + :host([size='l']) { --sbb-form-field-min-height: var(--sbb-size-element-l); --sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs); @@ -268,23 +281,30 @@ position: absolute; inset-inline-end: 0; - margin-block-start: calc(-1 * var(--sbb-form-field-margin-block-start) / 2); pointer-events: none; color: var(--sbb-form-field-arrow-color); + + :host(:not([size='s'])) { + margin-block-start: calc(-1 * var(--sbb-form-field-margin-block) / 2); + } } .sbb-form-field__input-container { flex: 1 1 auto; position: relative; - margin-block-start: var(--sbb-form-field-margin-block-start); + margin-block-start: var(--sbb-form-field-margin-block); // Prevents overflowing parent min-width: 0; + + :host([size='s']) & { + margin-block-end: var(--sbb-form-field-margin-block); + } } .sbb-form-field__label-spacer { display: flex; - height: calc(var(--sbb-font-size-text-xs) * var(--sbb-typo-line-height-body-text)); + height: var(--sbb-form-field-label-size); // Moves label down and input up to meet positioning requirements margin-block-end: calc(-1 * var(--sbb-form-field-label-to-input-overlapping)); @@ -311,6 +331,10 @@ inset-block-start: 0; color: var(--sbb-form-field-label-color); + :host([size='s']) & { + @include sbb.text-xxs--regular; + } + :host([data-input-type='select']) &, :host([data-input-type='sbb-select']) & { padding-inline-end: var(--sbb-form-field-select-inline-padding-end); @@ -344,7 +368,7 @@ transform: translateY(#{sbb.px-to-rem-build(8.5)}); @include sbb.mq($from: medium) { - transform: translateY(#{sbb.px-to-rem-build(10.5)}); + transform: translateY(var(--sbb-form-field-floating-label-transform)); } } } @@ -355,6 +379,12 @@ // Input +.sbb-form-field__input { + :host([size='s']) & { + line-height: initial !important; + } +} + .sbb-form-field__input ::slotted(:where(input, select, textarea, sbb-select)) { @include sbb.text-m--regular; @include sbb.ellipsis; @@ -398,6 +428,12 @@ } } + :host([size='s']) & { + @include sbb.text-s--regular; + + font-size: var(--sbb-font-size-text-s) !important; + } + // Fix positioning issue for select which occurs in Safari :host([data-input-type='select']) & { vertical-align: middle; 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 1e097be42c..acb930f03a 100644 --- a/src/components/form-field/form-field/form-field.stories.ts +++ b/src/components/form-field/form-field/form-field.stories.ts @@ -413,7 +413,7 @@ const size: InputType = { control: { type: 'inline-radio', }, - options: ['m', 'l'], + options: ['s', 'm', 'l'], table: { category: 'Form-field', }, @@ -463,7 +463,7 @@ const basicArgs: Args = { 'floating-label': false, optional: false, borderless: false, - size: size.options![0], + size: size.options![1], negative: false, cssClass: '', placeholder: 'Input placeholder', @@ -487,10 +487,16 @@ export const InputSizeL: StoryObj = { args: { ...basicArgs, value: 'This input value is so long that it needs ellipsis to fit.', - size: 'l', + size: size.options![2], }, }; +export const InputSizeS: StoryObj = { + render: TemplateInput, + argTypes: basicArgTypes, + args: { ...basicArgs, size: size.options![0] }, +}; + export const InputNoLabel: StoryObj = { render: TemplateInput, argTypes: basicArgTypes, @@ -533,6 +539,18 @@ export const InputOptionalAndIcons: StoryObj = { args: { ...basicArgs, optional: true }, }; +export const InputOptionalAndIconsSizeS: StoryObj = { + render: TemplateInputWithIcons, + argTypes: basicArgTypes, + args: { ...basicArgs, optional: true, size: size.options![0] }, +}; + +export const InputOptionalAndIconsSizeL: StoryObj = { + render: TemplateInputWithIcons, + argTypes: basicArgTypes, + args: { ...basicArgs, optional: true, size: size.options![2] }, +}; + export const InputWithMiniButton: StoryObj = { render: TemplateInputWithMiniButton, argTypes: basicArgTypes, @@ -644,6 +662,18 @@ export const SelectOptionalAndIcons: StoryObj = { args: { ...basicArgs, optional: true }, }; +export const SelectOptionalAndIconsSizeS: StoryObj = { + render: TemplateSelectWithIcons, + argTypes: basicArgTypes, + args: { ...basicArgs, optional: true, size: size.options![0] }, +}; + +export const SelectOptionalAndIconsSizeL: StoryObj = { + render: TemplateSelectWithIcons, + argTypes: basicArgTypes, + args: { ...basicArgs, optional: true, size: size.options![2] }, +}; + export const Textarea: StoryObj = { render: TemplateTextarea, argTypes: basicArgTypes, @@ -680,6 +710,18 @@ export const TextareaOptionalAndIcon: StoryObj = { args: { ...basicArgs, optional: true }, }; +export const TextareaOptionalAndIconSizeS: StoryObj = { + render: TemplateTextareaWithIcon, + argTypes: basicArgTypes, + args: { ...basicArgs, optional: true, size: size.options![0] }, +}; + +export const TextareaOptionalAndIconSizeL: StoryObj = { + render: TemplateTextareaWithIcon, + argTypes: basicArgTypes, + args: { ...basicArgs, optional: true, size: size.options![2] }, +}; + export const TextareaFloatingLabel: StoryObj = { render: TemplateTextarea, argTypes: basicArgTypes, @@ -759,6 +801,18 @@ export const InputOptionalAndIconsNegative: StoryObj = { args: { ...basicArgs, optional: true, negative: true }, }; +export const InputOptionalAndIconsNegativeSizeS: StoryObj = { + render: TemplateInputWithIcons, + argTypes: basicArgTypes, + args: { ...basicArgs, optional: true, negative: true, size: size.options![0] }, +}; + +export const InputOptionalAndIconsNegativeSizeL: StoryObj = { + render: TemplateInputWithIcons, + argTypes: basicArgTypes, + args: { ...basicArgs, optional: true, negative: true, size: size.options![2] }, +}; + export const InputWithMiniButtonNegative: StoryObj = { render: TemplateInputWithMiniButton, argTypes: basicArgTypes, @@ -873,6 +927,18 @@ export const SelectOptionalAndIconsNegative: StoryObj = { args: { ...basicArgs, optional: true, negative: true }, }; +export const SelectOptionalAndIconsNegativeSizeS: StoryObj = { + render: TemplateSelectWithIcons, + argTypes: basicArgTypes, + args: { ...basicArgs, optional: true, negative: true, size: size.options![0] }, +}; + +export const SelectOptionalAndIconsNegativeSizeL: StoryObj = { + render: TemplateSelectWithIcons, + argTypes: basicArgTypes, + args: { ...basicArgs, optional: true, negative: true, size: size.options![2] }, +}; + export const InputCollapsedWidthNegative: StoryObj = { render: TemplateInput, argTypes: basicArgTypes, @@ -921,6 +987,18 @@ export const TextareaOptionalAndIconNegative: StoryObj = { args: { ...basicArgs, optional: true, negative: true }, }; +export const TextareaOptionalAndIconNegativeSizeS: StoryObj = { + render: TemplateTextareaWithIcon, + argTypes: basicArgTypes, + args: { ...basicArgs, optional: true, negative: true, size: size.options![0] }, +}; + +export const TextareaOptionalAndIconNegativeSizeL: StoryObj = { + render: TemplateTextareaWithIcon, + argTypes: basicArgTypes, + args: { ...basicArgs, optional: true, negative: true, size: size.options![2] }, +}; + export const TextareaFloatingLabelNegative: StoryObj = { render: TemplateTextarea, 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 521b1576c1..71d4dfda61 100644 --- a/src/components/form-field/form-field/form-field.ts +++ b/src/components/form-field/form-field/form-field.ts @@ -75,7 +75,7 @@ export class SbbFormFieldElement extends SbbNegativeMixin(LitElement) { @property({ type: Boolean }) public optional?: boolean; /** Size variant, either l or m. */ - @property({ reflect: true }) public size?: 'l' | 'm' = 'm'; + @property({ reflect: true }) public size?: 'l' | 'm' | 's' = 'm'; /** Whether to display the form field without a border. */ @property({ reflect: true, type: Boolean }) public borderless = false; diff --git a/src/components/form-field/form-field/readme.md b/src/components/form-field/form-field/readme.md index 282d184c54..e12d447bfe 100644 --- a/src/components/form-field/form-field/readme.md +++ b/src/components/form-field/form-field/readme.md @@ -94,6 +94,21 @@ Please refer to their documentation for more details. ## Style +The component has a `size` property, which accepts three different values: `s`, `m` (default) and `l`. + +```html + + + + + + + + + This field is required! + +``` + By default, the component has a defined width and min-width. However, this behavior can be overridden by setting the `width` property to `collapse`: in this way the component adapts its width to the inner slotted input component. This is useful, for example, for the [sbb-time-input](/docs/components-sbb-time-input--docs) component. @@ -137,7 +152,7 @@ technology will announce errors when they appear. | --------------- | ---------------- | ------- | ------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `errorSpace` | `error-space` | public | `'none' \| 'reserve' \| undefined` | `'none'` | Whether to reserve space for an error message. `none` does not reserve any space. `reserve` does reserve one row for an error message. | | `optional` | `optional` | public | `boolean \| undefined` | | Indicates whether the input is optional. | -| `size` | `size` | public | `'l' \| 'm' \| undefined` | `'m'` | Size variant, either l or m. | +| `size` | `size` | public | `'l' \| 'm' \| 's' \| undefined` | `'m'` | Size variant, either l or m. | | `borderless` | `borderless` | public | `boolean` | `false` | Whether to display the form field without a border. | | `width` | `width` | public | `'default' \| 'collapse'` | `'default'` | Defines the width of the component: - `default`: the component has defined width and min-width; - `collapse`: the component adapts itself to its inner input content. | | `hiddenLabel` | `hidden-label` | public | `boolean` | `false` | Whether to visually hide the label. If hidden, screen readers will still read it. | From 6f730760533035839a3b8425e6171bf76f9d7c56 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Mon, 8 Apr 2024 18:50:33 +0200 Subject: [PATCH 2/8] feat: form-field size='s' second impl --- src/components/form-field/form-field/form-field.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/form-field/form-field/form-field.scss b/src/components/form-field/form-field/form-field.scss index b65712f041..8698bf631a 100644 --- a/src/components/form-field/form-field/form-field.scss +++ b/src/components/form-field/form-field/form-field.scss @@ -82,6 +82,7 @@ --sbb-form-field-label-size: calc( var(--sbb-font-size-text-xxs) * var(--sbb-typo-line-height-body-text) ); + --sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-2x); } :host([size='l']) { From 1f1254b21c6306b69428b53c5fa22c62acb95446 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Tue, 9 Apr 2024 16:39:55 +0200 Subject: [PATCH 3/8] feat: form-field size='s' second impl --- .../form-field/form-field/form-field.scss | 90 +++++++++---------- 1 file changed, 44 insertions(+), 46 deletions(-) diff --git a/src/components/form-field/form-field/form-field.scss b/src/components/form-field/form-field/form-field.scss index 8698bf631a..f1b2caa57b 100644 --- a/src/components/form-field/form-field/form-field.scss +++ b/src/components/form-field/form-field/form-field.scss @@ -19,24 +19,29 @@ --sbb-form-field-error-padding-block-start: var(--sbb-form-field-error-divider-width); --sbb-form-field-gap: var(--sbb-spacing-fixed-2x); --sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x); - --sbb-form-field-floating-label-transform: #{sbb.px-to-rem-build(10.5)}; --sbb-form-field-select-inline-padding-end: calc( var(--sbb-icon-svg-width) + var(--sbb-form-field-gap) ); --sbb-form-field-overflow: hidden; + --sbb-form-field-input-text-size: var(--sbb-font-size-text-m); + --sbb-form-field-label-text-size: var(--sbb-font-size-text-xs); --sbb-form-field-label-size: calc( - var(--sbb-font-size-text-xs) * var(--sbb-typo-line-height-body-text) + var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-body-text) ); --sbb-form-field-input-size: calc( - var(--sbb-font-size-text-m) * var(--sbb-typo-line-height-body-text) + var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-body-text) ); - --sbb-form-field-margin-block: calc( + --sbb-form-field-margin-block-start: calc( ( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var( --sbb-form-field-input-size ) + var(--sbb-form-field-label-to-input-overlapping) ) / 2 ); + --sbb-form-field-spacer-margin-block-end: calc( + -1 * var(--sbb-form-field-label-to-input-overlapping) + ); + --sbb-form-field-floating-label-transform: #{sbb.px-to-rem-build(8.5)}; // Lock sbb-icon size --sbb-icon-svg-width: var(--sbb-size-icon-ui-small); @@ -46,6 +51,10 @@ // to default color for cases where the form field is used in a negative context. --sbb-focus-outline-color: var(--sbb-focus-outline-color-default); + @include sbb.mq($from: medium) { + --sbb-form-field-floating-label-transform: #{sbb.px-to-rem-build(10.5)}; + } + @include sbb.if-forced-colors { --sbb-form-field-border-color: ButtonBorder; } @@ -72,24 +81,30 @@ } } -:host([size='s']) { - --sbb-form-field-min-height: var(--sbb-size-element-xs); - --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x); - --sbb-form-field-floating-label-transform: #{sbb.px-to-rem-build(6.5)}; - --sbb-form-field-input-size: calc( - var(--sbb-font-size-text-s) * var(--sbb-typo-line-height-body-text) - ); - --sbb-form-field-label-size: calc( - var(--sbb-font-size-text-xxs) * var(--sbb-typo-line-height-body-text) - ); - --sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-2x); -} - :host([size='l']) { --sbb-form-field-min-height: var(--sbb-size-element-l); --sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs); } +:host([size='s']) { + --sbb-form-field-min-height: var(--sbb-size-element-xs); + --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x); + --sbb-form-field-input-text-size: var(--sbb-font-size-text-s); + --sbb-form-field-label-text-size: var(--sbb-font-size-text-xxs); + + // fixme +2px to not cut low underscore letters + --sbb-form-field-input-size2: calc(var(--sbb-form-field-input-text-size) + 2px); + --sbb-form-field-label-to-input-overlapping: #{sbb.px-to-rem-build(10)}; // fixme + --sbb-form-field-spacer-margin-block-end: #{sbb.px-to-rem-build(-11)}; // fixme + --sbb-form-field-floating-label-transform: #{sbb.px-to-rem-build(5.125)}; + + @include sbb.mq($from: medium) { + --sbb-form-field-label-to-input-overlapping: #{sbb.px-to-rem-build(11)}; // fixme + --sbb-form-field-spacer-margin-block-end: #{sbb.px-to-rem-build(-8)}; // fixme + --sbb-form-field-floating-label-transform: #{sbb.px-to-rem-build(6.5)}; + } +} + :host([error-space='reserve']) { --form-field-error-min-height: calc( var(--sbb-typo-line-height-body-text) * var(--sbb-font-size-text-xs) @@ -282,33 +297,26 @@ position: absolute; inset-inline-end: 0; + margin-block-start: calc(-1 * var(--sbb-form-field-margin-block-start) / 2); pointer-events: none; color: var(--sbb-form-field-arrow-color); - - :host(:not([size='s'])) { - margin-block-start: calc(-1 * var(--sbb-form-field-margin-block) / 2); - } } .sbb-form-field__input-container { flex: 1 1 auto; position: relative; - margin-block-start: var(--sbb-form-field-margin-block); + margin-block-start: var(--sbb-form-field-margin-block-start); // Prevents overflowing parent min-width: 0; - - :host([size='s']) & { - margin-block-end: var(--sbb-form-field-margin-block); - } } .sbb-form-field__label-spacer { display: flex; - height: var(--sbb-form-field-label-size); + height: calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-body-text)); // Moves label down and input up to meet positioning requirements - margin-block-end: calc(-1 * var(--sbb-form-field-label-to-input-overlapping)); + margin-block-end: var(--sbb-form-field-spacer-margin-block-end); } // To avoid doubled payload, we group the rules. @@ -365,12 +373,8 @@ )[data-input-empty] ) & { - font-size: var(--sbb-font-size-text-m); - transform: translateY(#{sbb.px-to-rem-build(8.5)}); - - @include sbb.mq($from: medium) { - transform: translateY(var(--sbb-form-field-floating-label-transform)); - } + font-size: var(--sbb-form-field-input-text-size); + transform: translateY(var(--sbb-form-field-floating-label-transform)); } } @@ -378,14 +382,13 @@ @include sbb.ellipsis; } -// Input - .sbb-form-field__input { - :host([size='s']) & { - line-height: initial !important; - } + // TODO: find better solution + height: 0; } +// Input + .sbb-form-field__input ::slotted(:where(input, select, textarea, sbb-select)) { @include sbb.text-m--regular; @include sbb.ellipsis; @@ -406,9 +409,10 @@ // To be more specific than the styles in normalize.scss we need to use !important // TODO: Find a better solution - font-size: var(--sbb-font-size-text-m) !important; + font-size: var(--sbb-form-field-input-text-size) !important; font-family: var(--sbb-typo-type-face-sbb-roman) !important; line-height: var(--sbb-typo-line-height-body-text) !important; + height: var(--sbb-form-field-input-size2); &::placeholder { @include sbb.placeholder; @@ -429,12 +433,6 @@ } } - :host([size='s']) & { - @include sbb.text-s--regular; - - font-size: var(--sbb-font-size-text-s) !important; - } - // Fix positioning issue for select which occurs in Safari :host([data-input-type='select']) & { vertical-align: middle; From 3649ce086f12c4b0e8d0f9bbc286038fe25e36ed Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Mon, 22 Apr 2024 16:22:23 +0200 Subject: [PATCH 4/8] fix: slider in form-field size s --- .../form-field/form-field/form-field.scss | 9 +++ src/components/slider/slider.stories.ts | 67 +++++++++++++------ 2 files changed, 54 insertions(+), 22 deletions(-) diff --git a/src/components/form-field/form-field/form-field.scss b/src/components/form-field/form-field/form-field.scss index f1b2caa57b..44fa34f469 100644 --- a/src/components/form-field/form-field/form-field.scss +++ b/src/components/form-field/form-field/form-field.scss @@ -203,6 +203,15 @@ // Should be after other definitions to override overflow :host([data-input-type='sbb-slider']) { --sbb-form-field-overflow: visible; + --sbb-form-field-min-height: #{sbb.px-to-rem-build(48)}; // fixme + --sbb-form-field-label-to-input-overlapping: 0.5; // fixme + --sbb-form-field-spacer-margin-block-end: #{sbb.px-to-rem-build(-6)}; // fixme + + @include sbb.mq($from: medium) { + --sbb-form-field-min-height: #{sbb.px-to-rem-build(52)}; // fixme + --sbb-form-field-label-to-input-overlapping: #{sbb.px-to-rem-build(1)}; // fixme + --sbb-form-field-spacer-margin-block-end: #{sbb.px-to-rem-build(-3)}; // fixme + } } :host([data-input-type='textarea']) { diff --git a/src/components/slider/slider.stories.ts b/src/components/slider/slider.stories.ts index bf50de5994..c035b7655e 100644 --- a/src/components/slider/slider.stories.ts +++ b/src/components/slider/slider.stories.ts @@ -40,13 +40,18 @@ const TemplateSlottedIcons = (args: Args): TemplateResult => html` `; -const TemplateSbbSliderInFormField = ({ label, optional, ...args }: Args): TemplateResult => html` - +const TemplateSbbSliderInFormField = ({ + label, + optional, + size, + ...args +}: Args): TemplateResult => html` + ${label ? html`` : nothing} ${TemplateSbbSlider(args)} `; -const valueArg: InputType = { +const value: InputType = { control: { type: 'text', }, @@ -55,7 +60,7 @@ const valueArg: InputType = { }, }; -const valueAsNumberArg: InputType = { +const valueAsNumber: InputType = { control: { type: 'number', }, @@ -64,7 +69,7 @@ const valueAsNumberArg: InputType = { }, }; -const minArg: InputType = { +const min: InputType = { control: { type: 'text', }, @@ -73,7 +78,7 @@ const minArg: InputType = { }, }; -const maxArg: InputType = { +const max: InputType = { control: { type: 'text', }, @@ -82,7 +87,7 @@ const maxArg: InputType = { }, }; -const disabledArg: InputType = { +const disabled: InputType = { control: { type: 'boolean', }, @@ -91,7 +96,7 @@ const disabledArg: InputType = { }, }; -const readonlyArg: InputType = { +const readonly: InputType = { control: { type: 'boolean', }, @@ -100,7 +105,7 @@ const readonlyArg: InputType = { }, }; -const startIconArg: InputType = { +const startIcon: InputType = { control: { type: 'text', }, @@ -109,7 +114,7 @@ const startIconArg: InputType = { }, }; -const endIconArg: InputType = { +const endIcon: InputType = { control: { type: 'text', }, @@ -127,7 +132,7 @@ const ariaLabel: InputType = { }, }; -const labelArgArg: InputType = { +const label: InputType = { control: { type: 'text', }, @@ -136,7 +141,7 @@ const labelArgArg: InputType = { }, }; -const optionalArg: InputType = { +const optional: InputType = { control: { type: 'boolean', }, @@ -145,22 +150,33 @@ const optionalArg: InputType = { }, }; +const size: InputType = { + control: { + type: 'inline-radio', + }, + options: ['s', 'm', 'l'], + table: { + category: 'Form-field attribute', + }, +}; + const basicArgTypes: ArgTypes = { - max: maxArg, - min: minArg, - disabled: disabledArg, - readonly: readonlyArg, - value: valueArg, - 'value-as-number': valueAsNumberArg, - 'start-icon': startIconArg, - 'end-icon': endIconArg, + max, + min, + disabled, + readonly, + value, + 'value-as-number': valueAsNumber, + 'start-icon': startIcon, + 'end-icon': endIcon, 'aria-label': ariaLabel, }; const formFieldBasicArgsTypes: ArgTypes = { ...basicArgTypes, - label: labelArgArg, - optional: optionalArg, + label, + optional, + size, }; const basicArgs: Args = { @@ -179,6 +195,7 @@ const formFieldBasicArgs = { ...basicArgs, label: 'Label', optional: undefined, + size: size.options[1], }; export const sbbSlider: StoryObj = { @@ -239,6 +256,12 @@ export const sbbSliderInFormFieldDisabled: StoryObj = { args: { ...formFieldBasicArgs, disabled: true }, }; +export const sbbSliderInFormFieldSizeS: StoryObj = { + render: TemplateSbbSliderInFormField, + argTypes: { ...formFieldBasicArgsTypes }, + args: { ...formFieldBasicArgs, size: size.options[0] }, +}; + const meta: Meta = { decorators: [ (story) => html`
${story()}
`, From b8f47a892094fa8640573d7d065ca838f002d464 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Tue, 23 Apr 2024 10:28:33 +0200 Subject: [PATCH 5/8] fix: rebase --- src/components/slider/slider.stories.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/slider/slider.stories.ts b/src/components/slider/slider.stories.ts index c035b7655e..1fdd1056eb 100644 --- a/src/components/slider/slider.stories.ts +++ b/src/components/slider/slider.stories.ts @@ -195,7 +195,7 @@ const formFieldBasicArgs = { ...basicArgs, label: 'Label', optional: undefined, - size: size.options[1], + size: size.options![1], }; export const sbbSlider: StoryObj = { @@ -259,7 +259,7 @@ export const sbbSliderInFormFieldDisabled: StoryObj = { export const sbbSliderInFormFieldSizeS: StoryObj = { render: TemplateSbbSliderInFormField, argTypes: { ...formFieldBasicArgsTypes }, - args: { ...formFieldBasicArgs, size: size.options[0] }, + args: { ...formFieldBasicArgs, size: size.options![0] }, }; const meta: Meta = { From 6788287fd0b6d7a81db2d22474b346f65fda4b4d Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Tue, 23 Apr 2024 11:10:32 +0200 Subject: [PATCH 6/8] style: fix --- .../form-field/form-field/form-field.scss | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/form-field/form-field/form-field.scss b/src/components/form-field/form-field/form-field.scss index 44fa34f469..408a09e315 100644 --- a/src/components/form-field/form-field/form-field.scss +++ b/src/components/form-field/form-field/form-field.scss @@ -94,13 +94,13 @@ // fixme +2px to not cut low underscore letters --sbb-form-field-input-size2: calc(var(--sbb-form-field-input-text-size) + 2px); - --sbb-form-field-label-to-input-overlapping: #{sbb.px-to-rem-build(10)}; // fixme - --sbb-form-field-spacer-margin-block-end: #{sbb.px-to-rem-build(-11)}; // fixme + --sbb-form-field-label-to-input-overlapping: #{sbb.px-to-rem-build(10)}; + --sbb-form-field-spacer-margin-block-end: #{sbb.px-to-rem-build(-11)}; --sbb-form-field-floating-label-transform: #{sbb.px-to-rem-build(5.125)}; @include sbb.mq($from: medium) { - --sbb-form-field-label-to-input-overlapping: #{sbb.px-to-rem-build(11)}; // fixme - --sbb-form-field-spacer-margin-block-end: #{sbb.px-to-rem-build(-8)}; // fixme + --sbb-form-field-label-to-input-overlapping: #{sbb.px-to-rem-build(11)}; + --sbb-form-field-spacer-margin-block-end: #{sbb.px-to-rem-build(-8)}; --sbb-form-field-floating-label-transform: #{sbb.px-to-rem-build(6.5)}; } } @@ -203,14 +203,14 @@ // Should be after other definitions to override overflow :host([data-input-type='sbb-slider']) { --sbb-form-field-overflow: visible; - --sbb-form-field-min-height: #{sbb.px-to-rem-build(48)}; // fixme - --sbb-form-field-label-to-input-overlapping: 0.5; // fixme - --sbb-form-field-spacer-margin-block-end: #{sbb.px-to-rem-build(-6)}; // fixme + --sbb-form-field-min-height: #{sbb.px-to-rem-build(48)}; + --sbb-form-field-label-to-input-overlapping: #{sbb.px-to-rem-build(0.5)}; + --sbb-form-field-spacer-margin-block-end: #{sbb.px-to-rem-build(-6)}; @include sbb.mq($from: medium) { - --sbb-form-field-min-height: #{sbb.px-to-rem-build(52)}; // fixme - --sbb-form-field-label-to-input-overlapping: #{sbb.px-to-rem-build(1)}; // fixme - --sbb-form-field-spacer-margin-block-end: #{sbb.px-to-rem-build(-3)}; // fixme + --sbb-form-field-min-height: #{sbb.px-to-rem-build(52)}; + --sbb-form-field-label-to-input-overlapping: #{sbb.px-to-rem-build(1)}; + --sbb-form-field-spacer-margin-block-end: #{sbb.px-to-rem-build(-3)}; } } From 597a9047ae467f5444792c7d4400b9d133fce1d4 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Thu, 9 May 2024 11:34:02 +0200 Subject: [PATCH 7/8] fix: variable update --- src/components/form-field/form-field/form-field.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/form-field/form-field/form-field.scss b/src/components/form-field/form-field/form-field.scss index 9f637eddad..75eee093a6 100644 --- a/src/components/form-field/form-field/form-field.scss +++ b/src/components/form-field/form-field/form-field.scss @@ -28,13 +28,16 @@ --sbb-form-field-label-size: calc( var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-body-text) ); - --sbb-form-field-input-size: calc( + --sbb-form-field-text-size: calc( var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-body-text) ); + + // fixme +2px to not cut low underscore letters + --sbb-form-field-input-size: calc(var(--sbb-form-field-input-text-size) + 2px); --sbb-form-field-margin-block-start: calc( ( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var( - --sbb-form-field-input-size + --sbb-form-field-text-size ) + var(--sbb-form-field-label-to-input-overlapping) ) / 2 ); @@ -91,9 +94,6 @@ --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x); --sbb-form-field-input-text-size: var(--sbb-font-size-text-s); --sbb-form-field-label-text-size: var(--sbb-font-size-text-xxs); - - // fixme +2px to not cut low underscore letters - --sbb-form-field-input-size2: calc(var(--sbb-form-field-input-text-size) + 2px); --sbb-form-field-label-to-input-overlapping: #{sbb.px-to-rem-build(10)}; --sbb-form-field-spacer-margin-block-end: #{sbb.px-to-rem-build(-11)}; --sbb-form-field-floating-label-transform: #{sbb.px-to-rem-build(5.125)}; @@ -421,7 +421,7 @@ font-size: var(--sbb-form-field-input-text-size) !important; font-family: var(--sbb-typo-font-family) !important; line-height: var(--sbb-typo-line-height-body-text) !important; - height: var(--sbb-form-field-input-size2); + height: var(--sbb-form-field-input-size); &::placeholder { @include sbb.placeholder; From edf45202d13b64e7477785a69786748e1efe9f1e Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Fri, 24 May 2024 14:39:21 +0200 Subject: [PATCH 8/8] fix: chromatic (to be tested) --- src/components/form-field/form-field/form-field.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form-field/form-field/form-field.scss b/src/components/form-field/form-field/form-field.scss index 75eee093a6..d145b8cd53 100644 --- a/src/components/form-field/form-field/form-field.scss +++ b/src/components/form-field/form-field/form-field.scss @@ -421,7 +421,7 @@ font-size: var(--sbb-form-field-input-text-size) !important; font-family: var(--sbb-typo-font-family) !important; line-height: var(--sbb-typo-line-height-body-text) !important; - height: var(--sbb-form-field-input-size); + height: var(--sbb-form-field-text-size); &::placeholder { @include sbb.placeholder;