Skip to content

Commit 2198726

Browse files
web-padawanweb-padawan
authored
docs: list parts and attributes in JSDoc of all field components (#10068)
1 parent 843764b commit 2198726

20 files changed

+511
-221
lines changed

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

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -175,24 +175,36 @@ export interface ComboBoxEventMap<TItem> extends HTMLElementEventMap {
175175
* `--vaadin-combo-box-overlay-width` | Width of the overlay | `auto`
176176
* `--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`
177177
*
178-
* `<vaadin-combo-box>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
179-
* See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
178+
* The following shadow DOM parts are available for styling:
180179
*
181-
* In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
180+
* Part name | Description
181+
* ---------------------|----------------
182+
* `label` | The label element
183+
* `input-field` | The element that wraps prefix, value and buttons
184+
* `clear-button` | The clear button
185+
* `error-message` | The error message element
186+
* `helper-text` | The helper text element wrapper
187+
* `required-indicator` | The `required` state indicator element
188+
* `toggle-button` | The toggle button
189+
* `overlay` | The overlay container
190+
* `content` | The overlay content
191+
* `loader` | The loading indicator shown while loading items
182192
*
183-
* Part name | Description
184-
* -----------------|------------------
185-
* `toggle-button` | The toggle button
186-
* `overlay` | The overlay container
187-
* `content` | The overlay content
188-
* `loader` | The loading indicator shown while loading items
193+
* The following state attributes are available for styling:
189194
*
190-
* In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
191-
*
192-
* Attribute | Description
193-
* ----------|----------------------------------------
194-
* `opened` | Set when the combo box dropdown is open
195-
* `loading` | Set when new items are expected
195+
* Attribute | Description
196+
* ---------------------|---------------------------------
197+
* `disabled` | Set when the element is disabled
198+
* `has-value` | Set when the element has a value
199+
* `has-label` | Set when the element has a label
200+
* `has-helper` | Set when the element has helper text or slot
201+
* `has-error-message` | Set when the element has an error message
202+
* `invalid` | Set when the element is invalid
203+
* `focused` | Set when the element is focused
204+
* `focus-ring` | Set when the element is keyboard focused
205+
* `readonly` | Set when the element is readonly
206+
* `opened` | Set when the overlay is opened
207+
* `loading` | Set when loading items from the data provider
196208
*
197209
* ### Internal components
198210
*

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

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -107,24 +107,36 @@ import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
107107
* `--vaadin-combo-box-overlay-width` | Width of the overlay | `auto`
108108
* `--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`
109109
*
110-
* `<vaadin-combo-box>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
111-
* See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
110+
* The following shadow DOM parts are available for styling:
112111
*
113-
* In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
112+
* Part name | Description
113+
* ---------------------|----------------
114+
* `label` | The label element
115+
* `input-field` | The element that wraps prefix, value and buttons
116+
* `clear-button` | The clear button
117+
* `error-message` | The error message element
118+
* `helper-text` | The helper text element wrapper
119+
* `required-indicator` | The `required` state indicator element
120+
* `toggle-button` | The toggle button
121+
* `overlay` | The overlay container
122+
* `content` | The overlay content
123+
* `loader` | The loading indicator shown while loading items
114124
*
115-
* Part name | Description
116-
* -----------------|------------------
117-
* `toggle-button` | The toggle button
118-
* `overlay` | The overlay container
119-
* `content` | The overlay content
120-
* `loader` | The loading indicator shown while loading items
125+
* The following state attributes are available for styling:
121126
*
122-
* In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
123-
*
124-
* Attribute | Description
125-
* ----------|----------------------------------------
126-
* `opened` | Set when the combo box dropdown is open
127-
* `loading` | Set when new items are expected
127+
* Attribute | Description
128+
* ---------------------|---------------------------------
129+
* `disabled` | Set when the element is disabled
130+
* `has-value` | Set when the element has a value
131+
* `has-label` | Set when the element has a label
132+
* `has-helper` | Set when the element has helper text or slot
133+
* `has-error-message` | Set when the element has an error message
134+
* `invalid` | Set when the element is invalid
135+
* `focused` | Set when the element is focused
136+
* `focus-ring` | Set when the element is keyboard focused
137+
* `readonly` | Set when the element is readonly
138+
* `opened` | Set when the overlay is opened
139+
* `loading` | Set when loading items from the data provider
128140
*
129141
* ### Internal components
130142
*

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

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -78,24 +78,36 @@ 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-
* `backdrop` | Backdrop of the overlay
90-
* `overlay` | The overlay container
91-
* `content` | The overlay content
92-
*
93-
* In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
94-
*
95-
* Attribute | Description
96-
* ---------------|----------------------------------------------
97-
* `opened` | Set when the date selector overlay is opened
98-
* `week-numbers` | Set when week numbers are shown in the calendar
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+
* `backdrop` | Backdrop of the overlay
93+
* `overlay` | The overlay container
94+
* `content` | The overlay content
95+
*
96+
* The following state attributes are available for styling:
97+
*
98+
* Attribute | Description
99+
* ---------------------|---------------------------------
100+
* `disabled` | Set when the element is disabled
101+
* `has-value` | Set when the element has a value
102+
* `has-label` | Set when the element has a label
103+
* `has-helper` | Set when the element has helper text or slot
104+
* `has-error-message` | Set when the element has an error message
105+
* `invalid` | Set when the element is invalid
106+
* `focused` | Set when the element is focused
107+
* `focus-ring` | Set when the element is keyboard focused
108+
* `readonly` | Set when the element is readonly
109+
* `opened` | Set when the overlay is opened
110+
* `week-numbers` | Set when week numbers are shown in the calendar
99111
*
100112
* ### Internal components
101113
*

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

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -42,24 +42,36 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
4242
* -------------------------------|----------------------------|---------
4343
* `--vaadin-field-default-width` | Default width of the field | `12em`
4444
*
45-
* `<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
46-
* See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
45+
* The following shadow DOM parts are available for styling:
4746
*
48-
* In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
47+
* Part name | Description
48+
* ---------------------|----------------
49+
* `label` | The label element
50+
* `input-field` | The element that wraps prefix, value and buttons
51+
* `clear-button` | The clear button
52+
* `error-message` | The error message element
53+
* `helper-text` | The helper text element wrapper
54+
* `required-indicator` | The `required` state indicator element
55+
* `toggle-button` | The toggle button
56+
* `backdrop` | Backdrop of the overlay
57+
* `overlay` | The overlay container
58+
* `content` | The overlay content
4959
*
50-
* Part name | Description
51-
* -----------------|--------------------
52-
* `toggle-button` | Toggle button
53-
* `backdrop` | Backdrop of the overlay
54-
* `overlay` | The overlay container
55-
* `content` | The overlay content
60+
* The following state attributes are available for styling:
5661
*
57-
* In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
58-
*
59-
* Attribute | Description
60-
* ---------------|----------------------------------------------
61-
* `opened` | Set when the date selector overlay is opened
62-
* `week-numbers` | Set when week numbers are shown in the calendar
62+
* Attribute | Description
63+
* ---------------------|---------------------------------
64+
* `disabled` | Set when the element is disabled
65+
* `has-value` | Set when the element has a value
66+
* `has-label` | Set when the element has a label
67+
* `has-helper` | Set when the element has helper text or slot
68+
* `has-error-message` | Set when the element has an error message
69+
* `invalid` | Set when the element is invalid
70+
* `focused` | Set when the element is focused
71+
* `focus-ring` | Set when the element is keyboard focused
72+
* `readonly` | Set when the element is readonly
73+
* `opened` | Set when the overlay is opened
74+
* `week-numbers` | Set when week numbers are shown in the calendar
6375
*
6476
* ### Internal components
6577
*

‎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
@@ -16,8 +16,33 @@ import { emailFieldStyles } from './styles/vaadin-email-field-base-styles.js';
1616
*
1717
* ### Styling
1818
*
19-
* `<vaadin-email-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
20-
* See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
19+
* The following shadow DOM parts are available for styling:
20+
*
21+
* Part name | Description
22+
* ---------------------|----------------
23+
* `label` | The label element
24+
* `input-field` | The element that wraps prefix, value and suffix
25+
* `clear-button` | The clear button
26+
* `error-message` | The error message element
27+
* `helper-text` | The helper text element wrapper
28+
* `required-indicator` | The `required` state indicator element
29+
*
30+
* The following state attributes are available for styling:
31+
*
32+
* Attribute | Description
33+
* ---------------------|---------------------------------
34+
* `disabled` | Set when the element is disabled
35+
* `has-value` | Set when the element has a value
36+
* `has-label` | Set when the element has a label
37+
* `has-helper` | Set when the element has helper text or slot
38+
* `has-error-message` | Set when the element has an error message
39+
* `invalid` | Set when the element is invalid
40+
* `input-prevented` | Temporarily set when invalid input is prevented
41+
* `focused` | Set when the element is focused
42+
* `focus-ring` | Set when the element is keyboard focused
43+
* `readonly` | Set when the element is readonly
44+
*
45+
* Note, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.
2146
*
2247
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
2348
*

‎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)