Skip to content

Commit 114164a

Browse files
web-padawanweb-padawan
authored
docs: list parts and attributes in JSDoc of all field components (#10068) (#10074)
1 parent e690020 commit 114164a

20 files changed

+483
-201
lines changed

‎packages/combo-box/src/vaadin-combo-box.d.ts‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -174,21 +174,33 @@ export interface ComboBoxEventMap<TItem> extends HTMLElementEventMap {
174174
* `--vaadin-combo-box-overlay-width` | Width of the overlay | `auto`
175175
* `--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`
176176
*
177-
* `<vaadin-combo-box>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
178-
* See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
177+
* The following shadow DOM parts are available for styling:
179178
*
180-
* In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
179+
* Part name | Description
180+
* ---------------------|----------------
181+
* `label` | The label element
182+
* `input-field` | The element that wraps prefix, value and buttons
183+
* `clear-button` | The clear button
184+
* `error-message` | The error message element
185+
* `helper-text` | The helper text element wrapper
186+
* `required-indicator` | The `required` state indicator element
187+
* `toggle-button` | The toggle button
181188
*
182-
* Part name | Description
183-
* ----------------|----------------
184-
* `toggle-button` | The toggle button
189+
* The following state attributes are available for styling:
185190
*
186-
* In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
187-
*
188-
* Attribute | Description
189-
* ----------|----------------------------------------
190-
* `opened` | Set when the combo box dropdown is open
191-
* `loading` | Set when new items are expected
191+
* Attribute | Description
192+
* ---------------------|---------------------------------
193+
* `disabled` | Set when the element is disabled
194+
* `has-value` | Set when the element has a value
195+
* `has-label` | Set when the element has a label
196+
* `has-helper` | Set when the element has helper text or slot
197+
* `has-error-message` | Set when the element has an error message
198+
* `invalid` | Set when the element is invalid
199+
* `focused` | Set when the element is focused
200+
* `focus-ring` | Set when the element is keyboard focused
201+
* `readonly` | Set when the element is readonly
202+
* `opened` | Set when the overlay is opened
203+
* `loading` | Set when loading items from the data provider
192204
*
193205
* If you want to replace the default `<input>` and its container with a custom implementation to get full control
194206
* over the input field, consider using the [`<vaadin-combo-box-light>`](#/elements/vaadin-combo-box-light) element.

‎packages/combo-box/src/vaadin-combo-box.js‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -105,21 +105,33 @@ registerStyles('vaadin-combo-box', inputFieldShared, { moduleId: 'vaadin-combo-b
105105
* `--vaadin-combo-box-overlay-width` | Width of the overlay | `auto`
106106
* `--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`
107107
*
108-
* `<vaadin-combo-box>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
109-
* See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
108+
* The following shadow DOM parts are available for styling:
110109
*
111-
* In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
110+
* Part name | Description
111+
* ---------------------|----------------
112+
* `label` | The label element
113+
* `input-field` | The element that wraps prefix, value and buttons
114+
* `clear-button` | The clear button
115+
* `error-message` | The error message element
116+
* `helper-text` | The helper text element wrapper
117+
* `required-indicator` | The `required` state indicator element
118+
* `toggle-button` | The toggle button
112119
*
113-
* Part name | Description
114-
* ----------------|----------------
115-
* `toggle-button` | The toggle button
120+
* The following state attributes are available for styling:
116121
*
117-
* In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
118-
*
119-
* Attribute | Description
120-
* ----------|----------------------------------------
121-
* `opened` | Set when the combo box dropdown is open
122-
* `loading` | Set when new items are expected
122+
* Attribute | Description
123+
* ---------------------|---------------------------------
124+
* `disabled` | Set when the element is disabled
125+
* `has-value` | Set when the element has a value
126+
* `has-label` | Set when the element has a label
127+
* `has-helper` | Set when the element has helper text or slot
128+
* `has-error-message` | Set when the element has an error message
129+
* `invalid` | Set when the element is invalid
130+
* `focused` | Set when the element is focused
131+
* `focus-ring` | Set when the element is keyboard focused
132+
* `readonly` | Set when the element is readonly
133+
* `opened` | Set when the overlay is opened
134+
* `loading` | Set when loading items from the data provider
123135
*
124136
* If you want to replace the default `<input>` and its container with a custom implementation to get full control
125137
* over the input field, consider using the [`<vaadin-combo-box-light>`](#/elements/vaadin-combo-box-light) element.

‎packages/date-picker/src/vaadin-date-picker.d.ts‎

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -78,23 +78,31 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
7878
* -------------------------------|----------------------------|---------
7979
* `--vaadin-field-default-width` | Default width of the field | `12em`
8080
*
81-
* `<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
82-
* See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
83-
*
84-
* In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
85-
*
86-
* Part name | Description
87-
* ----------------------|--------------------
88-
* `toggle-button` | Toggle button
89-
*
90-
* In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
91-
*
92-
* Attribute | Description | Part name
93-
* -----------|--------------------------------------------------|-----------
94-
* `opened` | Set when the date selector overlay is opened | :host
95-
*
96-
* If you want to replace the default `<input>` and its container with a custom implementation to get full control
97-
* over the input field, consider using the [`<vaadin-date-picker-light>`](#/elements/vaadin-date-picker-light) element.
81+
* The following shadow DOM parts are available for styling:
82+
*
83+
* Part name | Description
84+
* ---------------------|----------------
85+
* `label` | The label element
86+
* `input-field` | The element that wraps prefix, value and buttons
87+
* `clear-button` | The clear button
88+
* `error-message` | The error message element
89+
* `helper-text` | The helper text element wrapper
90+
* `required-indicator` | The `required` state indicator element
91+
* `toggle-button` | The toggle button
92+
*
93+
* The following state attributes are available for styling:
94+
*
95+
* Attribute | Description
96+
* ---------------------|---------------------------------
97+
* `disabled` | Set when the element is disabled
98+
* `has-value` | Set when the element has a value
99+
* `has-label` | Set when the element has a label
100+
* `has-helper` | Set when the element has helper text or slot
101+
* `has-error-message` | Set when the element has an error message
102+
* `invalid` | Set when the element is invalid
103+
* `focused` | Set when the element is focused
104+
* `focus-ring` | Set when the element is keyboard focused
105+
* `readonly` | Set when the element is readonly
98106
*
99107
* ### Internal components
100108
*

‎packages/date-picker/src/vaadin-date-picker.js‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -41,23 +41,31 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
4141
* -------------------------------|----------------------------|---------
4242
* `--vaadin-field-default-width` | Default width of the field | `12em`
4343
*
44-
* `<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
45-
* See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
44+
* The following shadow DOM parts are available for styling:
4645
*
47-
* In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
46+
* Part name | Description
47+
* ---------------------|----------------
48+
* `label` | The label element
49+
* `input-field` | The element that wraps prefix, value and buttons
50+
* `clear-button` | The clear button
51+
* `error-message` | The error message element
52+
* `helper-text` | The helper text element wrapper
53+
* `required-indicator` | The `required` state indicator element
54+
* `toggle-button` | The toggle button
4855
*
49-
* Part name | Description
50-
* ----------------------|--------------------
51-
* `toggle-button` | Toggle button
52-
*
53-
* In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
54-
*
55-
* Attribute | Description | Part name
56-
* -----------|--------------------------------------------------|-----------
57-
* `opened` | Set when the date selector overlay is opened | :host
56+
* The following state attributes are available for styling:
5857
*
59-
* If you want to replace the default `<input>` and its container with a custom implementation to get full control
60-
* over the input field, consider using the [`<vaadin-date-picker-light>`](#/elements/vaadin-date-picker-light) element.
58+
* Attribute | Description
59+
* ---------------------|---------------------------------
60+
* `disabled` | Set when the element is disabled
61+
* `has-value` | Set when the element has a value
62+
* `has-label` | Set when the element has a label
63+
* `has-helper` | Set when the element has helper text or slot
64+
* `has-error-message` | Set when the element has an error message
65+
* `invalid` | Set when the element is invalid
66+
* `focused` | Set when the element is focused
67+
* `focus-ring` | Set when the element is keyboard focused
68+
* `readonly` | Set when the element is readonly
6169
*
6270
* ### Internal components
6371
*

‎packages/email-field/src/vaadin-email-field.d.ts‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,33 @@ export interface EmailFieldEventMap extends HTMLElementEventMap, EmailFieldCusto
4848
*
4949
* ### Styling
5050
*
51-
* `<vaadin-email-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
52-
* See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
51+
* The following shadow DOM parts are available for styling:
52+
*
53+
* Part name | Description
54+
* ---------------------|----------------
55+
* `label` | The label element
56+
* `input-field` | The element that wraps prefix, value and suffix
57+
* `clear-button` | The clear button
58+
* `error-message` | The error message element
59+
* `helper-text` | The helper text element wrapper
60+
* `required-indicator` | The `required` state indicator element
61+
*
62+
* The following state attributes are available for styling:
63+
*
64+
* Attribute | Description
65+
* ---------------------|---------------------------------
66+
* `disabled` | Set when the element is disabled
67+
* `has-value` | Set when the element has a value
68+
* `has-label` | Set when the element has a label
69+
* `has-helper` | Set when the element has helper text or slot
70+
* `has-error-message` | Set when the element has an error message
71+
* `invalid` | Set when the element is invalid
72+
* `input-prevented` | Temporarily set when invalid input is prevented
73+
* `focused` | Set when the element is focused
74+
* `focus-ring` | Set when the element is keyboard focused
75+
* `readonly` | Set when the element is readonly
76+
*
77+
* Note, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.
5378
*
5479
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
5580
*

‎packages/email-field/src/vaadin-email-field.js‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,33 @@ registerStyles('vaadin-email-field', emailFieldStyles, { moduleId: 'vaadin-email
1919
*
2020
* ### Styling
2121
*
22-
* `<vaadin-email-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
23-
* See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
22+
* The following shadow DOM parts are available for styling:
23+
*
24+
* Part name | Description
25+
* ---------------------|----------------
26+
* `label` | The label element
27+
* `input-field` | The element that wraps prefix, value and suffix
28+
* `clear-button` | The clear button
29+
* `error-message` | The error message element
30+
* `helper-text` | The helper text element wrapper
31+
* `required-indicator` | The `required` state indicator element
32+
*
33+
* The following state attributes are available for styling:
34+
*
35+
* Attribute | Description
36+
* ---------------------|---------------------------------
37+
* `disabled` | Set when the element is disabled
38+
* `has-value` | Set when the element has a value
39+
* `has-label` | Set when the element has a label
40+
* `has-helper` | Set when the element has helper text or slot
41+
* `has-error-message` | Set when the element has an error message
42+
* `invalid` | Set when the element is invalid
43+
* `input-prevented` | Temporarily set when invalid input is prevented
44+
* `focused` | Set when the element is focused
45+
* `focus-ring` | Set when the element is keyboard focused
46+
* `readonly` | Set when the element is readonly
47+
*
48+
* Note, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.
2449
*
2550
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
2651
*

‎packages/integer-field/src/vaadin-integer-field.d.ts‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,15 +55,33 @@ export interface IntegerFieldEventMap extends HTMLElementEventMap, IntegerFieldC
5555
*
5656
* ### Styling
5757
*
58-
* `<vaadin-integer-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
59-
* See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
58+
* The following shadow DOM parts are available for styling:
6059
*
61-
* In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
60+
* Part name | Description
61+
* ---------------------|----------------
62+
* `label` | The label element
63+
* `input-field` | The element that wraps prefix, value and suffix
64+
* `clear-button` | The clear button
65+
* `error-message` | The error message element
66+
* `helper-text` | The helper text element wrapper
67+
* `required-indicator` | The `required` state indicator element
68+
* `increase-button` | Increase ("plus") button
69+
* `decrease-button` | Decrease ("minus") button
6270
*
63-
* Part name | Description
64-
* ------------------|-------------------------
65-
* `increase-button` | Increase ("plus") button
66-
* `decrease-button` | Decrease ("minus") button
71+
* The following state attributes are available for styling:
72+
*
73+
* Attribute | Description
74+
* ---------------------|---------------------------------
75+
* `disabled` | Set when the element is disabled
76+
* `has-value` | Set when the element has a value
77+
* `has-label` | Set when the element has a label
78+
* `has-helper` | Set when the element has helper text or slot
79+
* `has-error-message` | Set when the element has an error message
80+
* `invalid` | Set when the element is invalid
81+
* `input-prevented` | Temporarily set when invalid input is prevented
82+
* `focused` | Set when the element is focused
83+
* `focus-ring` | Set when the element is keyboard focused
84+
* `readonly` | Set when the element is readonly
6785
*
6886
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
6987
*

‎packages/integer-field/src/vaadin-integer-field.js‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,33 @@ import { NumberField } from '@vaadin/number-field/src/vaadin-number-field.js';
1515
*
1616
* ### Styling
1717
*
18-
* `<vaadin-integer-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
19-
* See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
18+
* The following shadow DOM parts are available for styling:
2019
*
21-
* In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
20+
* Part name | Description
21+
* ---------------------|----------------
22+
* `label` | The label element
23+
* `input-field` | The element that wraps prefix, value and suffix
24+
* `clear-button` | The clear button
25+
* `error-message` | The error message element
26+
* `helper-text` | The helper text element wrapper
27+
* `required-indicator` | The `required` state indicator element
28+
* `increase-button` | Increase ("plus") button
29+
* `decrease-button` | Decrease ("minus") button
2230
*
23-
* Part name | Description
24-
* ------------------|-------------------------
25-
* `increase-button` | Increase ("plus") button
26-
* `decrease-button` | Decrease ("minus") button
31+
* The following state attributes are available for styling:
32+
*
33+
* Attribute | Description
34+
* ---------------------|---------------------------------
35+
* `disabled` | Set when the element is disabled
36+
* `has-value` | Set when the element has a value
37+
* `has-label` | Set when the element has a label
38+
* `has-helper` | Set when the element has helper text or slot
39+
* `has-error-message` | Set when the element has an error message
40+
* `invalid` | Set when the element is invalid
41+
* `input-prevented` | Temporarily set when invalid input is prevented
42+
* `focused` | Set when the element is focused
43+
* `focus-ring` | Set when the element is keyboard focused
44+
* `readonly` | Set when the element is readonly
2745
*
2846
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
2947
*

0 commit comments

Comments
 (0)