Skip to content

Commit

Permalink
feat(sbb-select): introduce size s (#3011)
Browse files Browse the repository at this point in the history
  • Loading branch information
DavideMininni-Fincons authored Aug 22, 2024
1 parent bd03798 commit b614923
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 2 deletions.
9 changes: 8 additions & 1 deletion src/elements/form-field/form-field/form-field.scss
Original file line number Diff line number Diff line change
Expand Up @@ -388,7 +388,14 @@
.sbb-form-field__input {
display: flex;

:host([size='s']:is([data-input-type='input'], [data-input-type='select'])) & {
:host(
[size='s']:is(
[data-input-type='input'],
[data-input-type='select'],
[data-input-type='sbb-select']
)
)
& {
// In size s, the natural height of the text input is too small.
// To not reserve too much space, we decrease the height.
margin-block-end: #{sbb.px-to-rem-build(-2)};
Expand Down
11 changes: 11 additions & 0 deletions src/elements/select/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,17 @@ the selected values will be displayed in selection order, separated by a comma.
</sbb-form-field>
```

## Style

The component has no `size` property but, when slotted in a `sbb-form-field`, it adapts to the parent `size`.

```html
<sbb-form-field size="s">
<label>Train types</label>
<sbb-select> ... </sbb-select>
</sbb-form-field>
```

## Events

Consumers can listen to the native `change`/`input` event on the `sbb-select` component to intercept the selection's change;
Expand Down
48 changes: 48 additions & 0 deletions src/elements/select/select.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,16 @@ const borderless: InputType = {
},
};

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

const negative: InputType = {
control: {
type: 'boolean',
Expand Down Expand Up @@ -160,6 +170,7 @@ const disableGroup: InputType = {

const defaultArgTypes: ArgTypes = {
borderless,
size,
negative,
floatingLabel,
value,
Expand All @@ -176,6 +187,7 @@ const defaultArgTypes: ArgTypes = {

const defaultArgs: Args = {
borderless: false,
size: size.options![0],
negative: false,
floatingLabel: false,
value: undefined,
Expand Down Expand Up @@ -280,6 +292,7 @@ const createOptionsGroup = (

const FormFieldTemplate = ({
borderless,
size,
negative,
floatingLabel,
numberOfOptions,
Expand All @@ -291,6 +304,7 @@ const FormFieldTemplate = ({
<div>
<sbb-form-field
?borderless=${borderless}
size=${size}
?negative=${negative}
?floating-label=${floatingLabel}
data-testid="form-field"
Expand All @@ -313,6 +327,7 @@ const FormFieldTemplate = ({

const SelectEllipsisTemplate = ({
borderless,
size,
negative,
floatingLabel,
numberOfOptions,
Expand All @@ -330,6 +345,7 @@ const SelectEllipsisTemplate = ({
<div>
<sbb-form-field
?borderless=${borderless}
size=${size}
?negative=${negative}
?floating-label=${floatingLabel}
data-testid="form-field"
Expand Down Expand Up @@ -359,6 +375,7 @@ const SelectEllipsisTemplate = ({

const FormFieldTemplateWithError = ({
borderless,
size,
negative,
floatingLabel,
numberOfOptions,
Expand All @@ -377,6 +394,7 @@ const FormFieldTemplateWithError = ({
<div>
<sbb-form-field
?borderless=${borderless}
size=${size}
?negative=${negative}
?floating-label=${floatingLabel}
id="sbb-form-field"
Expand Down Expand Up @@ -411,12 +429,14 @@ const FormFieldTemplateWithError = ({

const KeyboardInteractionTemplate = ({
borderless,
size,
negative,
floatingLabel,
...args
}: Args): TemplateResult => html`
<sbb-form-field
?borderless=${borderless}
size=${size}
?negative=${negative}
?floating-label=${floatingLabel}
data-testid="form-field"
Expand Down Expand Up @@ -470,6 +490,34 @@ export const MultipleSelectNegative: StoryObj = {
play: isChromatic() ? playStory : undefined,
};

export const SingleSelectSizeS: StoryObj = {
render: FormFieldTemplate,
argTypes: defaultArgTypes,
args: { ...defaultArgs, size: size.options![1] },
play: isChromatic() ? playStory : undefined,
};

export const SingleSelectNegativeSizeS: StoryObj = {
render: FormFieldTemplate,
argTypes: defaultArgTypes,
args: { ...defaultArgs, negative: true, size: size.options![1] },
play: isChromatic() ? playStory : undefined,
};

export const MultipleSelectSizeS: StoryObj = {
render: FormFieldTemplate,
argTypes: defaultArgTypes,
args: { ...defaultArgs, multiple: true, size: size.options![1] },
play: isChromatic() ? playStory : undefined,
};

export const MultipleSelectNegativeSizeS: StoryObj = {
render: FormFieldTemplate,
argTypes: defaultArgTypes,
args: { ...defaultArgs, multiple: true, negative: true, size: size.options![1] },
play: isChromatic() ? playStory : undefined,
};

export const SingleSelectWithGrouping: StoryObj = {
render: FormFieldTemplate,
argTypes: defaultArgTypes,
Expand Down
28 changes: 27 additions & 1 deletion src/elements/select/select.visual.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ describe('sbb-select', () => {
const valueEllipsis: string = 'This label name is so long that it needs ellipsis to fit.';
const defaultArgs = {
borderless: false,
size: 'm',
negative: false,
disableOption: false,
withOptionGroup: false,
Expand Down Expand Up @@ -53,6 +54,7 @@ describe('sbb-select', () => {

const template = ({
borderless,
size,
negative,
disableOption,
withOptionGroup,
Expand All @@ -64,7 +66,7 @@ describe('sbb-select', () => {
args.value = [args.value as string];
}
return html`
<sbb-form-field ?borderless=${borderless} ?negative=${negative}>
<sbb-form-field ?borderless=${borderless} ?negative=${negative} size=${size}>
<label>Select</label>
<sbb-select
value=${args.value || nothing}
Expand Down Expand Up @@ -194,6 +196,30 @@ describe('sbb-select', () => {
}),
);

for (const value of [undefined, 'Option 1']) {
it(
`negative=${negative} multiple=${multiple} value=${value} size=s`,
visualDiffDefault.with(async (setup) => {
await setup.withFixture(
template({
...defaultArgs,
negative,
multiple,
size: 's',
value,
}),
{
minHeight: '600px',
backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
},
);
setup.withPostSetupAction(() => {
const select = setup.snapshotElement.querySelector('sbb-select')!;
select.open();
});
}),
);
}
it(
`negative=${negative} multiple=${multiple} disableOption=true`,
visualDiffDefault.with(async (setup) => {
Expand Down

0 comments on commit b614923

Please sign in to comment.