From bf8702d9f5f91829c3507fbd26d3fb6f0cee3d97 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Mon, 25 Nov 2024 16:31:18 +0100 Subject: [PATCH] fix: review --- .../checkbox/checkbox-panel/readme.md | 27 ++++++++++--------- src/elements/checkbox/checkbox/readme.md | 27 ++++++++++--------- .../mixins/form-associated-checkbox-mixin.ts | 5 +++- .../form-associated-radio-button-mixin.ts | 5 +++- .../common/file-selector-common.ts | 5 +++- .../file-selector-dropzone/readme.md | 1 + .../file-selector/file-selector/readme.md | 1 + .../radio-button/radio-button-panel/readme.md | 1 + .../radio-button/radio-button/readme.md | 23 ++++++++-------- src/elements/select/readme.md | 25 ++++++++--------- src/elements/select/select.ts | 5 +++- src/elements/slider/readme.md | 25 ++++++++--------- src/elements/slider/slider.ts | 5 +++- src/elements/toggle-check/readme.md | 1 + 14 files changed, 90 insertions(+), 66 deletions(-) diff --git a/src/elements/checkbox/checkbox-panel/readme.md b/src/elements/checkbox/checkbox-panel/readme.md index a2a542115b..774ba72acc 100644 --- a/src/elements/checkbox/checkbox-panel/readme.md +++ b/src/elements/checkbox/checkbox-panel/readme.md @@ -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 diff --git a/src/elements/checkbox/checkbox/readme.md b/src/elements/checkbox/checkbox/readme.md index 6280437e87..fd0d8e8de9 100644 --- a/src/elements/checkbox/checkbox/readme.md +++ b/src/elements/checkbox/checkbox/readme.md @@ -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 diff --git a/src/elements/core/mixins/form-associated-checkbox-mixin.ts b/src/elements/core/mixins/form-associated-checkbox-mixin.ts index 5a3d8ad8e8..fb7aa4911f 100644 --- a/src/elements/core/mixins/form-associated-checkbox-mixin.ts +++ b/src/elements/core/mixins/form-associated-checkbox-mixin.ts @@ -88,7 +88,10 @@ export const SbbFormAssociatedCheckboxMixin = } private _checked: boolean = false; - /** @internal */ + /** + * Form type of element. + * @default 'checkbox' + */ public override get type(): string { return 'checkbox'; } diff --git a/src/elements/core/mixins/form-associated-radio-button-mixin.ts b/src/elements/core/mixins/form-associated-radio-button-mixin.ts index b33d256b9b..0a0eb4e112 100644 --- a/src/elements/core/mixins/form-associated-radio-button-mixin.ts +++ b/src/elements/core/mixins/form-associated-radio-button-mixin.ts @@ -68,7 +68,10 @@ export const SbbFormAssociatedRadioButtonMixin = [] = []; - /** @internal */ + /** + * Form type of element. + * @default 'file' + */ public override get type(): string { return 'file'; } diff --git a/src/elements/file-selector/file-selector-dropzone/readme.md b/src/elements/file-selector/file-selector-dropzone/readme.md index 845b83854d..8bd859c6e1 100644 --- a/src/elements/file-selector/file-selector-dropzone/readme.md +++ b/src/elements/file-selector/file-selector-dropzone/readme.md @@ -95,6 +95,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 | ## Methods diff --git a/src/elements/file-selector/file-selector/readme.md b/src/elements/file-selector/file-selector/readme.md index e6f3765eee..d8e17288ec 100644 --- a/src/elements/file-selector/file-selector/readme.md +++ b/src/elements/file-selector/file-selector/readme.md @@ -91,6 +91,7 @@ It's suggested to have a different value for each variant, e.g.: | `multipleMode` | `multiple-mode` | public | `'default' \| 'persistent'` | `'default'` | Whether the newly added files should override the previously added ones. | | `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. | +| `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 | ## Methods diff --git a/src/elements/radio-button/radio-button-panel/readme.md b/src/elements/radio-button/radio-button-panel/readme.md index 42e972f771..d429e77daf 100644 --- a/src/elements/radio-button/radio-button-panel/readme.md +++ b/src/elements/radio-button/radio-button-panel/readme.md @@ -77,6 +77,7 @@ The component's label can be displayed in bold using the `sbb-text--bold` class | `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` | `'radio'` | Form type of element. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Methods diff --git a/src/elements/radio-button/radio-button/readme.md b/src/elements/radio-button/radio-button/readme.md index eede67914c..07363e8d2a 100644 --- a/src/elements/radio-button/radio-button/readme.md +++ b/src/elements/radio-button/radio-button/readme.md @@ -58,17 +58,18 @@ The component's label can be displayed in bold using the `sbb-text--bold` class ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------------- | ----------------------- | ------- | ------------------------------------ | ------- | -------------------------------------------------------------- | -| `allowEmptySelection` | `allow-empty-selection` | public | `boolean` | `false` | Whether the radio can be deselected. | -| `checked` | `checked` | public | `boolean` | `false` | Whether the radio button 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 | `SbbRadioButtonGroupElement \| null` | `null` | Reference to the connected radio button group. | -| `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 | `SbbRadioButtonSize` | `'m'` | Size variant. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------------- | ----------------------- | ------- | ------------------------------------ | --------- | -------------------------------------------------------------- | +| `allowEmptySelection` | `allow-empty-selection` | public | `boolean` | `false` | Whether the radio can be deselected. | +| `checked` | `checked` | public | `boolean` | `false` | Whether the radio button 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 | `SbbRadioButtonGroupElement \| null` | `null` | Reference to the connected radio button group. | +| `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 | `SbbRadioButtonSize` | `'m'` | Size variant. | +| `type` | - | public | `string` | `'radio'` | Form type of element. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Methods diff --git a/src/elements/select/readme.md b/src/elements/select/readme.md index 8d50c861d8..3ab77cdccd 100644 --- a/src/elements/select/readme.md +++ b/src/elements/select/readme.md @@ -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 diff --git a/src/elements/select/select.ts b/src/elements/select/select.ts index a8279a53bb..3ce7b3932e 100644 --- a/src/elements/select/select.ts +++ b/src/elements/select/select.ts @@ -102,7 +102,10 @@ class SbbSelectElement extends SbbUpdateSchedulerMixin( @property({ type: Boolean }) public accessor readonly: boolean = false; - /** @internal */ + /** + * Form type of element. + * @default 'select-one / select-multiple' + */ public override get type(): string { return this.multiple ? 'select-multiple' : 'select-one'; } diff --git a/src/elements/slider/readme.md b/src/elements/slider/readme.md index 8011ad5322..74863391a6 100644 --- a/src/elements/slider/readme.md +++ b/src/elements/slider/readme.md @@ -70,18 +70,19 @@ The `sbb-slider` has the following behaviour on keypress when focused: ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------- | ----------------- | ------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `endIcon` | `end-icon` | public | `string` | `''` | Name of the icon at component's end, which will be forward to the nested `sbb-icon`. | -| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `max` | `max` | public | `string` | `'100'` | Maximum acceptable value for the inner HTMLInputElement. | -| `min` | `min` | public | `string` | `'0'` | Minimum acceptable value for the inner HTMLInputElement. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `readonly` | `readonly` | public | `boolean` | `false` | Readonly state for the inner HTMLInputElement. Since the input range does not allow this attribute, it will be merged with the `disabled` one. | -| `startIcon` | `start-icon` | public | `string` | `''` | Name of the icon at component's start, which will be forward to the nested `sbb-icon`. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. If no value is provided, default is the middle point between min and max. | -| `valueAsNumber` | `value-as-number` | public | `number \| null` | | Numeric value for the inner HTMLInputElement. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------- | ----------------- | ------- | ------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `endIcon` | `end-icon` | public | `string` | `''` | Name of the icon at component's end, which will be forward to the nested `sbb-icon`. | +| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `max` | `max` | public | `string` | `'100'` | Maximum acceptable value for the inner HTMLInputElement. | +| `min` | `min` | public | `string` | `'0'` | Minimum acceptable value for the inner HTMLInputElement. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `readonly` | `readonly` | public | `boolean` | `false` | Readonly state for the inner HTMLInputElement. Since the input range does not allow this attribute, it will be merged with the `disabled` one. | +| `startIcon` | `start-icon` | public | `string` | `''` | Name of the icon at component's start, which will be forward to the nested `sbb-icon`. | +| `type` | - | public | `string` | `'range'` | Form type of element. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. If no value is provided, default is the middle point between min and max. | +| `valueAsNumber` | `value-as-number` | public | `number \| null` | | Numeric value for the inner HTMLInputElement. | ## Events diff --git a/src/elements/slider/slider.ts b/src/elements/slider/slider.ts index a39aeba2f7..e3a9288a45 100644 --- a/src/elements/slider/slider.ts +++ b/src/elements/slider/slider.ts @@ -111,7 +111,10 @@ class SbbSliderElement extends SbbDisabledMixin(SbbFormAssociatedMixin(LitElemen @property({ attribute: 'end-icon' }) public accessor endIcon: string = ''; - /** @internal */ + /** + * Form type of element. + * @default 'range' + */ public override get type(): string { return 'range'; } diff --git a/src/elements/toggle-check/readme.md b/src/elements/toggle-check/readme.md index 532d0a7978..734c4f79b1 100644 --- a/src/elements/toggle-check/readme.md +++ b/src/elements/toggle-check/readme.md @@ -74,6 +74,7 @@ you can not provide it and then use `aria-label` to specify an appropriate label | `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 | `'xs' \| 's' \| 'm'` | `'s'` | Size variant, either m, s or xs. | +| `type` | - | public | `string` | `'checkbox'` | Form type of element. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Events