Skip to content

Commit

Permalink
fix: fix type of form associated controls (#3242)
Browse files Browse the repository at this point in the history 
Closes #3238

(cherry picked from commit cbf839c)
  • Loading branch information
@jeripeierSBB
jeripeierSBB committed Nov 26, 2024
1 parent 2ceba00 commit c925c64
Show file tree
Hide file tree
Showing 14 changed files with 96 additions and 50 deletions.
27 changes: 14 additions & 13 deletions src/elements/checkbox/checkbox-panel/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,19 +75,20 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la

## Properties

| Name | Attribute | Privacy | Type | Default | Description |
| --------------- | --------------- | ------- | --------------------------------- | --------- | -------------------------------------------------------------- |
| `borderless` | `borderless` | public | `boolean` | `false` | Whether the unselected panel has a border. |
| `checked` | `checked` | public | `boolean` | `false` | Whether the checkbox is checked. |
| `color` | `color` | public | `'white' \| 'milk'` | `'white'` | The background color of the panel. |
| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. |
| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. |
| `group` | - | public | `SbbCheckboxGroupElement \| null` | `null` | Reference to the connected checkbox group. |
| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. |
| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. |
| `required` | `required` | public | `boolean` | `false` | Whether the component is required. |
| `size` | `size` | public | `SbbPanelSize` | `'m'` | Size variant. |
| `value` | `value` | public | `string \| null` | `null` | Value of the form element. |
| Name | Attribute | Privacy | Type | Default | Description |
| --------------- | --------------- | ------- | --------------------------------- | ------------ | -------------------------------------------------------------- |
| `borderless` | `borderless` | public | `boolean` | `false` | Whether the unselected panel has a border. |
| `checked` | `checked` | public | `boolean` | `false` | Whether the checkbox is checked. |
| `color` | `color` | public | `'white' \| 'milk'` | `'white'` | The background color of the panel. |
| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. |
| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. |
| `group` | - | public | `SbbCheckboxGroupElement \| null` | `null` | Reference to the connected checkbox group. |
| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. |
| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. |
| `required` | `required` | public | `boolean` | `false` | Whether the component is required. |
| `size` | `size` | public | `SbbPanelSize` | `'m'` | Size variant. |
| `type` | - | public | `string` | `'checkbox'` | Form type of element. |
| `value` | `value` | public | `string \| null` | `null` | Value of the form element. |

## Events

Expand Down
27 changes: 14 additions & 13 deletions src/elements/checkbox/checkbox/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,19 +81,20 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la

## Properties

| Name | Attribute | Privacy | Type | Default | Description |
| --------------- | ---------------- | ------- | --------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
| `checked` | `checked` | public | `boolean` | `false` | Whether the checkbox is checked. |
| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. |
| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. |
| `group` | - | public | `SbbCheckboxGroupElement \| null` | `null` | Reference to the connected checkbox group. |
| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'end'` | The label position relative to the labelIcon. Defaults to end |
| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. |
| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. |
| `required` | `required` | public | `boolean` | `false` | Whether the component is required. |
| `size` | `size` | public | `SbbCheckboxSize` | `'m'` | Size variant. |
| `value` | `value` | public | `string \| null` | `null` | Value of the form element. |
| Name | Attribute | Privacy | Type | Default | Description |
| --------------- | ---------------- | ------- | --------------------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------- |
| `checked` | `checked` | public | `boolean` | `false` | Whether the checkbox is checked. |
| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. |
| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. |
| `group` | - | public | `SbbCheckboxGroupElement \| null` | `null` | Reference to the connected checkbox group. |
| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'end'` | The label position relative to the labelIcon. Defaults to end |
| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. |
| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. |
| `required` | `required` | public | `boolean` | `false` | Whether the component is required. |
| `size` | `size` | public | `SbbCheckboxSize` | `'m'` | Size variant. |
| `type` | - | public | `string` | `'checkbox'` | Form type of element. |
| `value` | `value` | public | `string \| null` | `null` | Value of the form element. |

## Events

Expand Down
1 change: 1 addition & 0 deletions src/elements/checkbox/common/checkbox-common.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,7 @@ describe(`checkbox common behaviors`, () => {
})) as unknown as CheckboxAccessibilitySnapshot;

expect(snapshot.role).to.equal('checkbox');
expect(element.type).to.be.equal('checkbox');

expect(snapshot.checked, `ariaChecked in ${JSON.stringify(snapshot)}`).to.be.equal(
isFirefox && assertions.ariaChecked === false ? undefined : assertions.ariaChecked,
Expand Down
8 changes: 8 additions & 0 deletions src/elements/core/mixins/form-associated-checkbox-mixin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,14 @@ export const SbbFormAssociatedCheckboxMixin = <T extends Constructor<LitElement>
}
private _checked: boolean = false;

/**
* Form type of element.
* @default 'checkbox'
*/
public override get type(): string {
return 'checkbox';
}

protected constructor() {
super();
/** @internal */
Expand Down
3 changes: 3 additions & 0 deletions src/elements/file-selector/file-selector.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,9 @@ describe(`sbb-file-selector`, () => {
);
});

expect(element.role, 'compare to native role').to.be.equal(input.role);
expect(element.type, 'compare to native type').to.be.equal(input.type);

// Compare formData
const formData = new FormData(form);
const fileSelectorFormData = formData.getAll('fs');
Expand Down
8 changes: 8 additions & 0 deletions src/elements/file-selector/file-selector.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,14 @@ class SbbFileSelectorElement extends SbbDisabledMixin(SbbFormAssociatedMixin(Lit
}
private _files: File[] = [];

/**
* Form type of element.
* @default 'file'
*/
public override get type(): string {
return 'file';
}

/** An event which is emitted each time the file list changes. */
private _fileChangedEvent: EventEmitter<File[]> = new EventEmitter(
this,
Expand Down
1 change: 1 addition & 0 deletions src/elements/file-selector/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@ It's suggested to have a different value for each variant, e.g.:
| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. |
| `size` | `size` | public | `'s' \| 'm'` | `'m'` | Size variant, either s or m. |
| `titleContent` | `title-content` | public | `string` | `''` | The title displayed in `dropzone` variant. |
| `type` | - | public | `string` | `'file'` | Form type of element. |
| `value` | `value` | public | `string \| null` | `null` | The path of the first selected file. Empty string ('') if no file is selected |
| `variant` | `variant` | public | `'default' \| 'dropzone'` | `'default'` | Whether the component has a dropzone area or not. |

Expand Down
25 changes: 13 additions & 12 deletions src/elements/select/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,18 +139,19 @@ Opened panel:

## Properties

| Name | Attribute | Privacy | Type | Default | Description |
| ------------- | ------------- | ------- | ---------------------------- | ------- | -------------------------------------------------------------- |
| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. |
| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. |
| `isOpen` | - | public | `boolean` | | Whether the element is open. |
| `multiple` | `multiple` | public | `boolean` | `false` | Whether the select allows for multiple selection. |
| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. |
| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. |
| `placeholder` | `placeholder` | public | `string` | `''` | The placeholder used if no value has been selected. |
| `readonly` | `readonly` | public | `boolean` | `false` | Whether the select is readonly. |
| `required` | `required` | public | `boolean` | `false` | Whether the component is required. |
| `value` | `value` | public | `string \| string[] \| null` | `null` | Value of the form element. |
| Name | Attribute | Privacy | Type | Default | Description |
| ------------- | ------------- | ------- | ---------------------------- | -------------------------------- | -------------------------------------------------------------- |
| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. |
| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. |
| `isOpen` | - | public | `boolean` | | Whether the element is open. |
| `multiple` | `multiple` | public | `boolean` | `false` | Whether the select allows for multiple selection. |
| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. |
| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. |
| `placeholder` | `placeholder` | public | `string` | `''` | The placeholder used if no value has been selected. |
| `readonly` | `readonly` | public | `boolean` | `false` | Whether the select is readonly. |
| `required` | `required` | public | `boolean` | `false` | Whether the component is required. |
| `type` | - | public | `string` | `'select-one / select-multiple'` | Form type of element. |
| `value` | `value` | public | `string \| string[] \| null` | `null` | Value of the form element. |

## Methods

Expand Down
1 change: 1 addition & 0 deletions src/elements/select/select.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -460,6 +460,7 @@ describe(`sbb-select`, () => {
expect(elemInputEvent.count, 'compare to native - input counts').to.be.equal(
nativeInputEvent.count,
);
expect(element.type, 'compare to native - type').to.be.equal(nativeSelect.type);
}

it('should set default value', async () => {
Expand Down
8 changes: 8 additions & 0 deletions src/elements/select/select.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,14 @@ class SbbSelectElement extends SbbUpdateSchedulerMixin(
@property({ type: Boolean })
public accessor readonly: boolean = false;

/**
* Form type of element.
* @default 'select-one / select-multiple'
*/
public override get type(): string {
return this.multiple ? 'select-multiple' : 'select-one';
}

/** The value displayed by the component. */
@state() private accessor _displayValue: string | null = null;

Expand Down
Loading

0 comments on commit c925c64

Please sign in to comment.