Skip to content

Commit 6578464

Browse files
nmergetnmerget
authored
fix: made input properties optional (#1621)
1 parent 6f37b4c commit 6578464

File tree

5 files changed

+34
-40
lines changed

5 files changed

+34
-40
lines changed

‎packages/db-ui-elements-react/src/react-component-lib/utils/case.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,4 @@ export const dashToPascalCase = (str: string) =>
44
.split('-')
55
.map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
66
.join('');
7-
export const camelToDashCase = (str: string) =>
8-
str.replace(/([A-Z])/g, (m: string) => `-${m[0].toLowerCase()}`);
7+
export const camelToDashCase = (str: string) => str.replace(/([A-Z])/g, (m: string) => `-${m[0].toLowerCase()}`);

‎packages/db-ui-elements-stencil/src/components/db-accordion/db-accordion.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,9 @@ export class DbAccordion {
3333
data-size={this.size}
3434
open={this.open}
3535
>
36-
<summary>{this.summary}</summary>
36+
<summary>
37+
{this.summary}
38+
</summary>
3739
<slot />
3840
</details>
3941
);

‎packages/db-ui-elements-stencil/src/components/db-icon/readme.md

-7
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,6 @@
1212
| `icon` _(required)_ | `icon` | The icon attribute specifies the icon to use. | `string` | `undefined` |
1313
| `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` |
1414

15-
## CSS Custom Properties
16-
17-
| Property | Description |
18-
| ------------------------- | --------------------------------------------------------- |
19-
| `--icon-font-size-before` | Overwrite `font-size` by the icon set before the contents |
20-
| `--icon-font-size-after` | Overwrite `font-size` by the icon set after the contents |
21-
2215

2316
## Dependencies
2417

‎packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx

+24-24
Original file line numberDiff line numberDiff line change
@@ -10,46 +10,46 @@ export class DbInput {
1010
/**
1111
* 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.
1212
*/
13-
@Prop({ reflect: true }) ariainvalid:
13+
@Prop({ reflect: true }) ariainvalid?:
1414
| 'false'
1515
| 'grammar'
1616
| 'spelling'
17-
| 'true';
17+
| 'true' = null;
1818

1919
/**
2020
* The ariarequired attribute can be applied to a form element, to indicate to an AT that it is required to complete the form.
2121
*/
22-
@Prop({ reflect: true }) ariarequired: 'false' | 'true';
22+
@Prop({ reflect: true }) ariarequired?: 'false' | 'true' = null;
2323

2424
/**
2525
* User agents sometimes have features for helping users fill forms in, for example prefilling the user's address based on earlier user input.
2626
*/
27-
@Prop({ reflect: true }) autocomplete: 'off' | 'on';
27+
@Prop({ reflect: true }) autocomplete?: 'off' | 'on' = null;
2828

2929
/**
3030
* 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.
3131
*/
32-
@Prop({ reflect: true }) autofocus: boolean;
32+
@Prop({ reflect: true }) autofocus = false;
3333

3434
/**
3535
* The description attribute specifies the description/hint of the input.
3636
*/
37-
@Prop({ reflect: true }) description: string;
37+
@Prop({ reflect: true }) description?: string;
3838

3939
/**
4040
* 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.
4141
*/
42-
@Prop({ reflect: true }) dirname: string;
42+
@Prop({ reflect: true }) dirname?: string;
4343

4444
/**
4545
* The disabled attribute can be set to keep a user from clicking on the input.
4646
*/
47-
@Prop({ reflect: true }) disabled: boolean;
47+
@Prop({ reflect: true }) disabled = false;
4848

4949
/**
5050
* 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.
5151
*/
52-
@Prop({ reflect: true }) input_id: string = 'input-' + uuid();
52+
@Prop({ reflect: true }) input_id?: string = 'input-' + uuid();
5353

5454
/**
5555
* The label attribute specifies the caption of the input.
@@ -59,77 +59,77 @@ export class DbInput {
5959
/**
6060
* The list attribute is used to identify an element that lists predefined options suggested to the user.
6161
*/
62-
@Prop({ reflect: true }) list: string;
62+
@Prop({ reflect: true }) list?: string;
6363

6464
/**
6565
/* The maxlength attribute, controlled by a dirty value flag, declares a limit on the number of characters a user can input.
6666
*/
67-
@Prop({ reflect: true }) maxlength: number;
67+
@Prop({ reflect: true }) maxlength?: number;
6868

6969
/**
7070
/* The minlength attribute, when it applies, is a form control minlength attribute.
7171
*/
72-
@Prop({ reflect: true }) minlength: number;
72+
@Prop({ reflect: true }) minlength?: number;
7373

7474
/**
7575
* 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.
7676
*/
77-
@Prop({ reflect: true }) name!: string;
77+
@Prop({ reflect: true }) name?: string;
7878

7979
/**
8080
* The pattern attribute specifies a regular expression against which the control's value is to be checked.
8181
*/
82-
@Prop({ reflect: true }) pattern: string;
82+
@Prop({ reflect: true }) pattern?: string;
8383

8484
/**
8585
* The step attribute specifies the granularity that the value must obey to on increasing or decreasing by the users selection.
8686
*/
87-
@Prop({ reflect: true }) step: number;
87+
@Prop({ reflect: true }) step?: number;
8888

8989
/**
9090
* The min attribute specifies the minimum value that is sufficient for this input.
9191
*/
92-
@Prop({ reflect: true }) min: number;
92+
@Prop({ reflect: true }) min?: number;
9393

9494
/**
9595
* The max attribute specifies the maximum value that is sufficient for this input.
9696
*/
97-
@Prop({ reflect: true }) max: number;
97+
@Prop({ reflect: true }) max?: number;
9898

9999
/**
100100
* The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry.
101101
*/
102-
@Prop({ reflect: true }) placeholder: string;
102+
@Prop({ reflect: true }) placeholder?: string;
103103

104104
/**
105105
* The readonly attribute controls whether or not the user can edit the form control.
106106
*/
107-
@Prop({ reflect: true }) readonly: boolean;
107+
@Prop({ reflect: true }) readonly?: boolean;
108108

109109
/**
110110
* The required attribute is a boolean attribute. When specified, the element is required.
111111
*/
112-
@Prop({ reflect: true }) required: boolean;
112+
@Prop({ reflect: true }) required?: boolean;
113113

114114
/**
115115
* 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.
116116
*/
117-
@Prop({ reflect: true }) size: number;
117+
@Prop({ reflect: true }) size?: number;
118118

119119
/**
120120
* The type attribute changes the input type to text, number etc.
121121
*/
122-
@Prop({ reflect: true }) type = 'text';
122+
@Prop({ reflect: true }) type?: string = 'text';
123123

124124
/**
125125
* The value content attribute gives the default value of the input element.
126126
*/
127-
@Prop({ reflect: true }) value: string;
127+
@Prop({ reflect: true }) value?: string;
128128

129129
/**
130130
* The variant attribute specifies a visual expression of a select.
131131
*/
132-
@Prop({ reflect: true }) variant:
132+
@Prop({ reflect: true }) variant?:
133133
| 'semitransparent'
134134
| 'white'
135135
| 'solid'

‎packages/db-ui-elements-stencil/src/components/db-input/readme.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,21 @@
99

1010
| Property | Attribute | Description | Type | Default |
1111
| -------------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ------------------- |
12-
| `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` |
13-
| `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` |
14-
| `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` |
15-
| `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` |
12+
| `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` |
13+
| `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` |
14+
| `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` |
15+
| `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` |
1616
| `description` | `description` | The description attribute specifies the description/hint of the input. | `string` | `undefined` |
1717
| `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` |
18-
| `disabled` | `disabled` | The disabled attribute can be set to keep a user from clicking on the input. | `boolean` | `undefined` |
18+
| `disabled` | `disabled` | The disabled attribute can be set to keep a user from clicking on the input. | `boolean` | `false` |
1919
| `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()` |
2020
| `label` _(required)_ | `label` | The label attribute specifies the caption of the input. | `string` | `undefined` |
2121
| `list` | `list` | The list attribute is used to identify an element that lists predefined options suggested to the user. | `string` | `undefined` |
2222
| `max` | `max` | The max attribute specifies the maximum value that is sufficient for this input. | `number` | `undefined` |
2323
| `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` |
2424
| `min` | `min` | The min attribute specifies the minimum value that is sufficient for this input. | `number` | `undefined` |
2525
| `minlength` | `minlength` | /* The minlength attribute, when it applies, is a form control minlength attribute. | `number` | `undefined` |
26-
| `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` |
26+
| `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` |
2727
| `pattern` | `pattern` | The pattern attribute specifies a regular expression against which the control's value is to be checked. | `string` | `undefined` |
2828
| `placeholder` | `placeholder` | The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. | `string` | `undefined` |
2929
| `readonly` | `readonly` | The readonly attribute controls whether or not the user can edit the form control. | `boolean` | `undefined` |

0 commit comments

Comments
 (0)