From 375bdad9f8413ce00cbc1f50c6a815bb0d6e5016 Mon Sep 17 00:00:00 2001 From: Tommaso Menga Date: Wed, 28 Aug 2024 14:14:34 +0200 Subject: [PATCH 1/3] 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 })); - }), - ); } }); }); From 280d9dd6f70421d3c5ea30081d8a2ec943fa4892 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 28 Aug 2024 12:15:29 +0000 Subject: [PATCH 2/3] chore(deps): update commitlint to v19.4.1 --- package.json | 4 ++-- yarn.lock | 36 ++++++++++++++++++------------------ 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index 5c64250a53..2ba53a5ef7 100644 --- a/package.json +++ b/package.json @@ -73,8 +73,8 @@ "lit": "3.2.0" }, "devDependencies": { - "@commitlint/cli": "19.4.0", - "@commitlint/config-conventional": "19.2.2", + "@commitlint/cli": "19.4.1", + "@commitlint/config-conventional": "19.4.1", "@custom-elements-manifest/analyzer": "0.10.3", "@custom-elements-manifest/to-markdown": "0.1.0", "@eslint/eslintrc": "3.1.0", diff --git a/yarn.lock b/yarn.lock index 78c782bcd0..6cc5feab39 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1015,23 +1015,23 @@ "@babel/helper-validator-identifier" "^7.24.7" to-fast-properties "^2.0.0" -"@commitlint/cli@19.4.0": - version "19.4.0" - resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-19.4.0.tgz#9f93d3ed07e531fcfa371015c8c87e0aa26d974f" - integrity sha512-sJX4J9UioVwZHq7JWM9tjT5bgWYaIN3rC4FP7YwfEwBYiIO+wMyRttRvQLNkow0vCdM0D67r9NEWU0Ui03I4Eg== +"@commitlint/cli@19.4.1": + version "19.4.1" + resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-19.4.1.tgz#51dbd88750620c9e5fb6f5bc773872728a29674a" + integrity sha512-EerFVII3ZcnhXsDT9VePyIdCJoh3jEzygN1L37MjQXgPfGS6fJTWL/KHClVMod1d8w94lFC3l4Vh/y5ysVAz2A== dependencies: "@commitlint/format" "^19.3.0" - "@commitlint/lint" "^19.2.2" + "@commitlint/lint" "^19.4.1" "@commitlint/load" "^19.4.0" "@commitlint/read" "^19.4.0" "@commitlint/types" "^19.0.3" execa "^8.0.1" yargs "^17.0.0" -"@commitlint/config-conventional@19.2.2": - version "19.2.2" - resolved "https://registry.yarnpkg.com/@commitlint/config-conventional/-/config-conventional-19.2.2.tgz#1f4e6975d428985deacf2b3ff6547e02c9302054" - integrity sha512-mLXjsxUVLYEGgzbxbxicGPggDuyWNkf25Ht23owXIH+zV2pv1eJuzLK3t1gDY5Gp6pxdE60jZnWUY5cvgL3ufw== +"@commitlint/config-conventional@19.4.1": + version "19.4.1" + resolved "https://registry.yarnpkg.com/@commitlint/config-conventional/-/config-conventional-19.4.1.tgz#c6f05d478c7576d5affff82d67d9ca37e96c94e6" + integrity sha512-D5S5T7ilI5roybWGc8X35OBlRXLAwuTseH1ro0XgqkOWrhZU8yOwBOslrNmSDlTXhXLq8cnfhQyC42qaUCzlXA== dependencies: "@commitlint/types" "^19.0.3" conventional-changelog-conventionalcommits "^7.0.2" @@ -1077,14 +1077,14 @@ "@commitlint/types" "^19.0.3" semver "^7.6.0" -"@commitlint/lint@^19.2.2": - version "19.2.2" - resolved "https://registry.yarnpkg.com/@commitlint/lint/-/lint-19.2.2.tgz#57f69e24bd832a7dcce8ebf82d11e3bf03ccc2a9" - integrity sha512-xrzMmz4JqwGyKQKTpFzlN0dx0TAiT7Ran1fqEBgEmEj+PU98crOFtysJgY+QdeSagx6EDRigQIXJVnfrI0ratA== +"@commitlint/lint@^19.4.1": + version "19.4.1" + resolved "https://registry.yarnpkg.com/@commitlint/lint/-/lint-19.4.1.tgz#0760d34fcdaee0bf05befe666ca14c0fc1ecb57e" + integrity sha512-Ws4YVAZ0jACTv6VThumITC1I5AG0UyXMGua3qcf55JmXIXm/ejfaVKykrqx7RyZOACKVAs8uDRIsEsi87JZ3+Q== dependencies: "@commitlint/is-ignored" "^19.2.2" "@commitlint/parse" "^19.0.3" - "@commitlint/rules" "^19.0.3" + "@commitlint/rules" "^19.4.1" "@commitlint/types" "^19.0.3" "@commitlint/load@^19.4.0": @@ -1140,10 +1140,10 @@ lodash.mergewith "^4.6.2" resolve-from "^5.0.0" -"@commitlint/rules@^19.0.3": - version "19.0.3" - resolved "https://registry.yarnpkg.com/@commitlint/rules/-/rules-19.0.3.tgz#de647a9055847cae4f3ae32b4798096b604584f3" - integrity sha512-TspKb9VB6svklxNCKKwxhELn7qhtY1rFF8ls58DcFd0F97XoG07xugPjjbVnLqmMkRjZDbDIwBKt9bddOfLaPw== +"@commitlint/rules@^19.4.1": + version "19.4.1" + resolved "https://registry.yarnpkg.com/@commitlint/rules/-/rules-19.4.1.tgz#df15baad1092e2be1b39aa1aa7cc05e12f59f677" + integrity sha512-AgctfzAONoVxmxOXRyxXIq7xEPrd7lK/60h2egp9bgGUMZK9v0+YqLOA+TH+KqCa63ZoCr8owP2YxoSSu7IgnQ== dependencies: "@commitlint/ensure" "^19.0.3" "@commitlint/message" "^19.0.0" From 6c965c503bda51c3f646eb1400fdf4620883870f Mon Sep 17 00:00:00 2001 From: Tommaso Menga Date: Wed, 28 Aug 2024 15:49:14 +0200 Subject: [PATCH 3/3] feat(sbb-stepper): add size 's' (#3026) --- .../stepper/step-label/step-label.scss | 21 ++++++++++++++++++- .../stepper.snapshot.spec.snap.js | 4 ++++ src/elements/stepper/stepper/readme.md | 1 + src/elements/stepper/stepper/stepper.spec.ts | 11 ++++++++++ .../stepper/stepper/stepper.stories.ts | 15 +++++++++++++ src/elements/stepper/stepper/stepper.ts | 15 +++++++++++++ .../stepper/stepper/stepper.visual.spec.ts | 9 ++++++++ 7 files changed, 75 insertions(+), 1 deletion(-) diff --git a/src/elements/stepper/step-label/step-label.scss b/src/elements/stepper/step-label/step-label.scss index 111b7a6514..5dd362e1d1 100644 --- a/src/elements/stepper/step-label/step-label.scss +++ b/src/elements/stepper/step-label/step-label.scss @@ -13,6 +13,7 @@ --sbb-step-label-prefix-border-style: solid; --sbb-step-label-prefix-border-color: var(--sbb-color-cloud); --sbb-step-label-prefix-background-color: var(--sbb-color-white); + --sbb-step-label-gap: var(--sbb-spacing-fixed-4x); position: relative; min-width: 0; @@ -57,6 +58,20 @@ } } +:host([data-size='s']) { + --sbb-step-label-gap: var(--sbb-spacing-fixed-3x); + --sbb-step-label-prefix-size: var(--sbb-size-element-xxxs); + + &::before { + // The `--sbb-font-size-text-m` is beign used here to align the bubble's inner text to + // the label text which includes the `sbb.text-m--bold` mixin. + inset-block-start: calc( + var(--sbb-font-size-text-m) * (var(--sbb-typo-line-height-body-text) / 2) + + (var(--sbb-border-width-1x) / 2) + ); + } +} + :host([disabled]) { --sbb-step-label-color: var(--sbb-color-granite); --sbb-step-label-prefix-border-style: dashed; @@ -100,8 +115,12 @@ cursor: var(--sbb-step-label-cursor); position: relative; display: flex; - gap: var(--sbb-spacing-fixed-4x); + gap: var(--sbb-step-label-gap); color: var(--sbb-step-label-color); + + :host([data-size='s']) & { + @include sbb.text-m--bold; + } } .sbb-step-label__prefix { diff --git a/src/elements/stepper/stepper/__snapshots__/stepper.snapshot.spec.snap.js b/src/elements/stepper/stepper/__snapshots__/stepper.snapshot.spec.snap.js index f6909850dc..e86d986551 100644 --- a/src/elements/stepper/stepper/__snapshots__/stepper.snapshot.spec.snap.js +++ b/src/elements/stepper/stepper/__snapshots__/stepper.snapshot.spec.snap.js @@ -6,6 +6,7 @@ snapshots["sbb-stepper renders DOM"] = data-disable-animation="" orientation="horizontal" selected-index="0" + size="m" > { expect(stepLabelThree).to.have.attribute('data-selected'); expect(stepLabelThree.step).to.have.attribute('data-selected'); }); + + it('proxy size to step children', async () => { + const stepLabels = Array.from(element.querySelectorAll('sbb-step-label')!); + + expect(stepLabels.every((l) => l.getAttribute('data-size') === element.size)).to.be.true; + + element.size = 's'; + await waitForLitRender(element); + + expect(stepLabels.every((l) => l.getAttribute('data-size') === element.size)).to.be.true; + }); }); diff --git a/src/elements/stepper/stepper/stepper.stories.ts b/src/elements/stepper/stepper/stepper.stories.ts index cba7e33cf6..6fa954ea17 100644 --- a/src/elements/stepper/stepper/stepper.stories.ts +++ b/src/elements/stepper/stepper/stepper.stories.ts @@ -47,16 +47,25 @@ const horizontalFrom: InputType = { options: ['unset', 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'], }; +const size: InputType = { + control: { + type: 'inline-radio', + }, + options: ['s', 'm'], +}; + const defaultArgTypes: ArgTypes = { linear, orientation, 'horizontal-from': horizontalFrom, + size, }; const defaultArgs: Args = { linear: false, orientation: 'horizontal', 'horizontal-from': 'unset', + size: size.options![1], }; const codeStyle: Args = { @@ -356,6 +365,12 @@ export const Vertical: StoryObj = { args: { ...defaultArgs, orientation: orientation.options![1] }, }; +export const SizeS: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { ...defaultArgs, size: size.options![0] }, +}; + export const HorizontalFromSmall: StoryObj = { render: Template, argTypes: defaultArgTypes, diff --git a/src/elements/stepper/stepper/stepper.ts b/src/elements/stepper/stepper/stepper.ts index 771cd12aff..a6ff30d23a 100644 --- a/src/elements/stepper/stepper/stepper.ts +++ b/src/elements/stepper/stepper/stepper.ts @@ -48,6 +48,9 @@ export class SbbStepperElement extends SbbHydrationMixin(LitElement) { @property({ reflect: true }) public orientation: SbbOrientation = 'horizontal'; + /** Size variant, either s or m. */ + @property({ reflect: true }) public size: 's' | 'm' = 'm'; + /** The currently selected step. */ @property({ attribute: false }) public set selected(step: SbbStepElement) { @@ -200,6 +203,7 @@ export class SbbStepperElement extends SbbHydrationMixin(LitElement) { label.configure(i + 1, array.length, this._loaded); }); this._select(this.selected || this._enabledSteps[0]); + this._proxySize(); } private _updateLabels(): void { @@ -271,6 +275,17 @@ export class SbbStepperElement extends SbbHydrationMixin(LitElement) { if (changedProperties.has('linear') && this._loaded) { this._configureLinearMode(); } + + if (changedProperties.has('size')) { + this._proxySize(); + this._setMarkerSize(); + } + } + + private _proxySize(): void { + this.steps.forEach((step) => { + step.label?.setAttribute('data-size', this.size); + }); } private _handleKeyDown(evt: KeyboardEvent): void { diff --git a/src/elements/stepper/stepper/stepper.visual.spec.ts b/src/elements/stepper/stepper/stepper.visual.spec.ts index 9280b977d1..4ceb226016 100644 --- a/src/elements/stepper/stepper/stepper.visual.spec.ts +++ b/src/elements/stepper/stepper/stepper.visual.spec.ts @@ -25,12 +25,14 @@ describe(`sbb-stepper`, () => { orientation?: string, longLabel?: boolean, horizontalFrom?: string, + size: 's' | 'm' = 'm', ): TemplateResult => html` Step 1 @@ -87,6 +89,13 @@ describe(`sbb-stepper`, () => { await setup.withFixture(template(false, orientation, true)); }), ); + + it( + `orientation=${orientation} size=s`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture(template(false, orientation, false, undefined, 's')); + }), + ); } }); });