Skip to content

Commit

Permalink
Merge branch 'main' into fix-step-list
Browse files Browse the repository at this point in the history
  • Loading branch information
jeripeierSBB committed Aug 29, 2024
2 parents bf55fae + 6c965c5 commit c29dd6f
Show file tree
Hide file tree
Showing 13 changed files with 143 additions and 46 deletions.
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
6 changes: 6 additions & 0 deletions src/elements/core/styles/core.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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)};
}
}
}
Expand Down Expand Up @@ -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);
}
}
21 changes: 20 additions & 1 deletion src/elements/stepper/step-label/step-label.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,15 @@ snapshots["sbb-stepper renders DOM"] =
data-disable-animation=""
orientation="horizontal"
selected-index="0"
size="m"
>
<sbb-step-label
aria-controls="sbb-step-0"
data-action=""
data-button=""
data-orientation="horizontal"
data-selected=""
data-size="m"
dir="ltr"
id="sbb-step-label-0"
role="tab"
Expand All @@ -36,6 +38,7 @@ snapshots["sbb-stepper renders DOM"] =
data-action=""
data-button=""
data-orientation="horizontal"
data-size="m"
dir="ltr"
id="sbb-step-label-1"
role="tab"
Expand All @@ -59,6 +62,7 @@ snapshots["sbb-stepper renders DOM"] =
data-button=""
data-disabled=""
data-orientation="horizontal"
data-size="m"
dir="ltr"
disabled=""
id="sbb-step-label-2"
Expand Down
1 change: 1 addition & 0 deletions src/elements/stepper/stepper/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ Use an `aria-label` attribute to describe the purpose of the stepper. The `sbb-s
| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Steps orientation, either horizontal or vertical. |
| `selected` | - | public | `SbbStepElement \| undefined` | | The currently selected step. |
| `selectedIndex` | `selected-index` | public | `number \| undefined` | | The currently selected step index. |
| `size` | `size` | public | `'s' \| 'm'` | `'m'` | Size variant, either s or m. |
| `steps` | - | public | `SbbStepElement[]` | | The steps of the stepper. |

## Methods
Expand Down
11 changes: 11 additions & 0 deletions src/elements/stepper/stepper/stepper.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -397,4 +397,15 @@ describe('sbb-stepper', () => {
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<SbbStepLabelElement>('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;
});
});
15 changes: 15 additions & 0 deletions src/elements/stepper/stepper/stepper.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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,
Expand Down
15 changes: 15 additions & 0 deletions src/elements/stepper/stepper/stepper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down
9 changes: 9 additions & 0 deletions src/elements/stepper/stepper/stepper.visual.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,14 @@ describe(`sbb-stepper`, () => {
orientation?: string,
longLabel?: boolean,
horizontalFrom?: string,
size: 's' | 'm' = 'm',
): TemplateResult => html`
<sbb-stepper
selected-index="0"
?linear=${linear}
orientation=${orientation || nothing}
horizontal-from=${horizontalFrom || nothing}
size=${size}
>
<sbb-step-label icon-name="pen-small">Step 1</sbb-step-label>
<sbb-step>
Expand Down Expand Up @@ -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'));
}),
);
}
});
});
7 changes: 5 additions & 2 deletions src/elements/time-input/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
<sbb-form-field width="collapse">
<sbb-form-field width="collapse" size="s">
<input value="13:30" />
<sbb-time-input></sbb-time-input>
</sbb-form-field>
Expand Down
28 changes: 14 additions & 14 deletions src/elements/time-input/time-input.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ const value: InputType = {
type: 'text',
},
table: {
category: 'Native input attribute',
category: 'Native input',
},
};

Expand All @@ -81,7 +81,7 @@ const readonly: InputType = {
type: 'boolean',
},
table: {
category: 'Native input attribute',
category: 'Native input',
},
};

Expand All @@ -90,7 +90,7 @@ const disabled: InputType = {
type: 'boolean',
},
table: {
category: 'Native input attribute',
category: 'Native input',
},
};

Expand All @@ -99,17 +99,17 @@ const required: InputType = {
type: 'boolean',
},
table: {
category: 'Native input attribute',
category: 'Native input',
},
};

const size: InputType = {
control: {
type: 'inline-radio',
},
options: ['m', 'l'],
options: ['s', 'm', 'l'],
table: {
category: 'Form-field attribute',
category: 'Form-field',
},
};

Expand All @@ -118,7 +118,7 @@ const negative: InputType = {
type: 'boolean',
},
table: {
category: 'Form-field attribute',
category: 'Form-field',
},
};

Expand All @@ -127,7 +127,7 @@ const label: InputType = {
type: 'text',
},
table: {
category: 'Form-field attribute',
category: 'Form-field',
},
};

Expand All @@ -136,7 +136,7 @@ const optional: InputType = {
type: 'boolean',
},
table: {
category: 'Form-field attribute',
category: 'Form-field',
},
};

Expand All @@ -145,7 +145,7 @@ const borderless: InputType = {
type: 'boolean',
},
table: {
category: 'Form-field attribute',
category: 'Form-field',
},
};

Expand All @@ -154,7 +154,7 @@ const iconStart: InputType = {
type: 'text',
},
table: {
category: 'Form-field attribute',
category: 'Form-field',
},
};

Expand All @@ -163,7 +163,7 @@ const iconEnd: InputType = {
type: 'text',
},
table: {
category: 'Form-field attribute',
category: 'Form-field',
},
};

Expand Down Expand Up @@ -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,
Expand All @@ -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',
Expand Down
Loading

0 comments on commit c29dd6f

Please sign in to comment.