From 657846403000c988474e397f8aac56ac60225cf5 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <104347736+nmerget@users.noreply.github.com>
Date: Tue, 15 Aug 2023 09:07:02 +0200
Subject: [PATCH] fix: made input properties optional (#1621)
---
.../src/react-component-lib/utils/case.ts | 3 +-
.../components/db-accordion/db-accordion.tsx | 4 +-
.../src/components/db-icon/readme.md | 7 ---
.../src/components/db-input/db-input.tsx | 48 +++++++++----------
.../src/components/db-input/readme.md | 12 ++---
5 files changed, 34 insertions(+), 40 deletions(-)
diff --git a/packages/db-ui-elements-react/src/react-component-lib/utils/case.ts b/packages/db-ui-elements-react/src/react-component-lib/utils/case.ts
index 047704f13d..786689dc98 100644
--- a/packages/db-ui-elements-react/src/react-component-lib/utils/case.ts
+++ b/packages/db-ui-elements-react/src/react-component-lib/utils/case.ts
@@ -4,5 +4,4 @@ export const dashToPascalCase = (str: string) =>
.split('-')
.map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
.join('');
-export const camelToDashCase = (str: string) =>
- str.replace(/([A-Z])/g, (m: string) => `-${m[0].toLowerCase()}`);
+export const camelToDashCase = (str: string) => str.replace(/([A-Z])/g, (m: string) => `-${m[0].toLowerCase()}`);
diff --git a/packages/db-ui-elements-stencil/src/components/db-accordion/db-accordion.tsx b/packages/db-ui-elements-stencil/src/components/db-accordion/db-accordion.tsx
index 97f423a112..00ab8c52e8 100644
--- a/packages/db-ui-elements-stencil/src/components/db-accordion/db-accordion.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-accordion/db-accordion.tsx
@@ -33,7 +33,9 @@ export class DbAccordion {
data-size={this.size}
open={this.open}
>
- {this.summary}
+
+ {this.summary}
+
);
diff --git a/packages/db-ui-elements-stencil/src/components/db-icon/readme.md b/packages/db-ui-elements-stencil/src/components/db-icon/readme.md
index 917a9563bc..2051c2de0c 100644
--- a/packages/db-ui-elements-stencil/src/components/db-icon/readme.md
+++ b/packages/db-ui-elements-stencil/src/components/db-icon/readme.md
@@ -12,13 +12,6 @@
| `icon` _(required)_ | `icon` | The icon attribute specifies the icon to use. | `string` | `undefined` |
| `variant` | `variant` | The variant attribute specifies the style and size of an icon. | `"16-filled" \| "16-outline" \| "20-filled" \| "20-outline" \| "24-filled" \| "24-outline" \| "32-filled" \| "32-outline" \| "48-filled" \| "48-outline" \| "64-filled" \| "64-outline"` | `undefined` |
-## CSS Custom Properties
-
-| Property | Description |
-| ------------------------- | --------------------------------------------------------- |
-| `--icon-font-size-before` | Overwrite `font-size` by the icon set before the contents |
-| `--icon-font-size-after` | Overwrite `font-size` by the icon set after the contents |
-
## Dependencies
diff --git a/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx b/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx
index 6f7ac9b882..b804443a08 100644
--- a/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx
@@ -10,46 +10,46 @@ export class DbInput {
/**
* The ariainvalid attribute is used to indicate that the value entered into an input field does not conform to the format expected by the application.
*/
- @Prop({ reflect: true }) ariainvalid:
+ @Prop({ reflect: true }) ariainvalid?:
| 'false'
| 'grammar'
| 'spelling'
- | 'true';
+ | 'true' = null;
/**
* The ariarequired attribute can be applied to a form element, to indicate to an AT that it is required to complete the form.
*/
- @Prop({ reflect: true }) ariarequired: 'false' | 'true';
+ @Prop({ reflect: true }) ariarequired?: 'false' | 'true' = null;
/**
* User agents sometimes have features for helping users fill forms in, for example prefilling the user's address based on earlier user input.
*/
- @Prop({ reflect: true }) autocomplete: 'off' | 'on';
+ @Prop({ reflect: true }) autocomplete?: 'off' | 'on' = null;
/**
* The autofocus content attribute allows the author to indicate that a control is to be focused as soon as the page is loaded, allowing the user to just start typing without having to manually focus the main control.
*/
- @Prop({ reflect: true }) autofocus: boolean;
+ @Prop({ reflect: true }) autofocus = false;
/**
* The description attribute specifies the description/hint of the input.
*/
- @Prop({ reflect: true }) description: string;
+ @Prop({ reflect: true }) description?: string;
/**
* The dirname attribute on a form control element enables the submission of the directionality of the element, and gives the name of the control that contains this value during form submission. If such an attribute is specified, its value must not be the empty string.
*/
- @Prop({ reflect: true }) dirname: string;
+ @Prop({ reflect: true }) dirname?: string;
/**
* The disabled attribute can be set to keep a user from clicking on the input.
*/
- @Prop({ reflect: true }) disabled: boolean;
+ @Prop({ reflect: true }) disabled = false;
/**
* The input_id of a labelable form-related element in the same document as the label element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element.
*/
- @Prop({ reflect: true }) input_id: string = 'input-' + uuid();
+ @Prop({ reflect: true }) input_id?: string = 'input-' + uuid();
/**
* The label attribute specifies the caption of the input.
@@ -59,77 +59,77 @@ export class DbInput {
/**
* The list attribute is used to identify an element that lists predefined options suggested to the user.
*/
- @Prop({ reflect: true }) list: string;
+ @Prop({ reflect: true }) list?: string;
/**
/* The maxlength attribute, controlled by a dirty value flag, declares a limit on the number of characters a user can input.
*/
- @Prop({ reflect: true }) maxlength: number;
+ @Prop({ reflect: true }) maxlength?: number;
/**
/* The minlength attribute, when it applies, is a form control minlength attribute.
*/
- @Prop({ reflect: true }) minlength: number;
+ @Prop({ reflect: true }) minlength?: number;
/**
* The name content attribute gives the name of the form control, as used in form submission and in the form element's elements object. If the attribute is specified, its value must not be the empty string.
*/
- @Prop({ reflect: true }) name!: string;
+ @Prop({ reflect: true }) name?: string;
/**
* The pattern attribute specifies a regular expression against which the control's value is to be checked.
*/
- @Prop({ reflect: true }) pattern: string;
+ @Prop({ reflect: true }) pattern?: string;
/**
* The step attribute specifies the granularity that the value must obey to on increasing or decreasing by the users selection.
*/
- @Prop({ reflect: true }) step: number;
+ @Prop({ reflect: true }) step?: number;
/**
* The min attribute specifies the minimum value that is sufficient for this input.
*/
- @Prop({ reflect: true }) min: number;
+ @Prop({ reflect: true }) min?: number;
/**
* The max attribute specifies the maximum value that is sufficient for this input.
*/
- @Prop({ reflect: true }) max: number;
+ @Prop({ reflect: true }) max?: number;
/**
* The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry.
*/
- @Prop({ reflect: true }) placeholder: string;
+ @Prop({ reflect: true }) placeholder?: string;
/**
* The readonly attribute controls whether or not the user can edit the form control.
*/
- @Prop({ reflect: true }) readonly: boolean;
+ @Prop({ reflect: true }) readonly?: boolean;
/**
* The required attribute is a boolean attribute. When specified, the element is required.
*/
- @Prop({ reflect: true }) required: boolean;
+ @Prop({ reflect: true }) required?: boolean;
/**
* The size attribute gives the number of characters that, in a visual rendering, the user agent is to allow the user to see while editing the element's value.
*/
- @Prop({ reflect: true }) size: number;
+ @Prop({ reflect: true }) size?: number;
/**
* The type attribute changes the input type to text, number etc.
*/
- @Prop({ reflect: true }) type = 'text';
+ @Prop({ reflect: true }) type?: string = 'text';
/**
* The value content attribute gives the default value of the input element.
*/
- @Prop({ reflect: true }) value: string;
+ @Prop({ reflect: true }) value?: string;
/**
* The variant attribute specifies a visual expression of a select.
*/
- @Prop({ reflect: true }) variant:
+ @Prop({ reflect: true }) variant?:
| 'semitransparent'
| 'white'
| 'solid'
diff --git a/packages/db-ui-elements-stencil/src/components/db-input/readme.md b/packages/db-ui-elements-stencil/src/components/db-input/readme.md
index dd2c49593f..6c697d8c42 100644
--- a/packages/db-ui-elements-stencil/src/components/db-input/readme.md
+++ b/packages/db-ui-elements-stencil/src/components/db-input/readme.md
@@ -9,13 +9,13 @@
| Property | Attribute | Description | Type | Default |
| -------------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ------------------- |
-| `ariainvalid` | `ariainvalid` | The ariainvalid attribute is used to indicate that the value entered into an input field does not conform to the format expected by the application. | `"false" \| "grammar" \| "spelling" \| "true"` | `undefined` |
-| `ariarequired` | `ariarequired` | The ariarequired attribute can be applied to a form element, to indicate to an AT that it is required to complete the form. | `"false" \| "true"` | `undefined` |
-| `autocomplete` | `autocomplete` | User agents sometimes have features for helping users fill forms in, for example prefilling the user's address based on earlier user input. | `"off" \| "on"` | `undefined` |
-| `autofocus` | `autofocus` | The autofocus content attribute allows the author to indicate that a control is to be focused as soon as the page is loaded, allowing the user to just start typing without having to manually focus the main control. | `boolean` | `undefined` |
+| `ariainvalid` | `ariainvalid` | The ariainvalid attribute is used to indicate that the value entered into an input field does not conform to the format expected by the application. | `"false" \| "grammar" \| "spelling" \| "true"` | `null` |
+| `ariarequired` | `ariarequired` | The ariarequired attribute can be applied to a form element, to indicate to an AT that it is required to complete the form. | `"false" \| "true"` | `null` |
+| `autocomplete` | `autocomplete` | User agents sometimes have features for helping users fill forms in, for example prefilling the user's address based on earlier user input. | `"off" \| "on"` | `null` |
+| `autofocus` | `autofocus` | The autofocus content attribute allows the author to indicate that a control is to be focused as soon as the page is loaded, allowing the user to just start typing without having to manually focus the main control. | `boolean` | `false` |
| `description` | `description` | The description attribute specifies the description/hint of the input. | `string` | `undefined` |
| `dirname` | `dirname` | The dirname attribute on a form control element enables the submission of the directionality of the element, and gives the name of the control that contains this value during form submission. If such an attribute is specified, its value must not be the empty string. | `string` | `undefined` |
-| `disabled` | `disabled` | The disabled attribute can be set to keep a user from clicking on the input. | `boolean` | `undefined` |
+| `disabled` | `disabled` | The disabled attribute can be set to keep a user from clicking on the input. | `boolean` | `false` |
| `input_id` | `input_id` | The input_id of a labelable form-related element in the same document as the label element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element. | `string` | `'input-' + uuid()` |
| `label` _(required)_ | `label` | The label attribute specifies the caption of the input. | `string` | `undefined` |
| `list` | `list` | The list attribute is used to identify an element that lists predefined options suggested to the user. | `string` | `undefined` |
@@ -23,7 +23,7 @@
| `maxlength` | `maxlength` | /* The maxlength attribute, controlled by a dirty value flag, declares a limit on the number of characters a user can input. | `number` | `undefined` |
| `min` | `min` | The min attribute specifies the minimum value that is sufficient for this input. | `number` | `undefined` |
| `minlength` | `minlength` | /* The minlength attribute, when it applies, is a form control minlength attribute. | `number` | `undefined` |
-| `name` _(required)_ | `name` | The name content attribute gives the name of the form control, as used in form submission and in the form element's elements object. If the attribute is specified, its value must not be the empty string. | `string` | `undefined` |
+| `name` | `name` | The name content attribute gives the name of the form control, as used in form submission and in the form element's elements object. If the attribute is specified, its value must not be the empty string. | `string` | `undefined` |
| `pattern` | `pattern` | The pattern attribute specifies a regular expression against which the control's value is to be checked. | `string` | `undefined` |
| `placeholder` | `placeholder` | The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. | `string` | `undefined` |
| `readonly` | `readonly` | The readonly attribute controls whether or not the user can edit the form control. | `boolean` | `undefined` |