@warp-ds/elements 2.9.0-next.4 → 2.9.0-next.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +3346 -3296
- package/dist/docs/affix/accessibility.md +7 -0
- package/dist/docs/affix/affix.md +172 -10
- package/dist/docs/affix/api.md +26 -10
- package/dist/docs/affix/examples.md +92 -0
- package/dist/docs/affix/usage.md +47 -0
- package/dist/index.d.ts +225 -225
- package/dist/packages/affix/affix.d.ts +23 -14
- package/dist/packages/affix/affix.js +24 -11
- package/dist/packages/affix/affix.js.map +4 -4
- package/dist/packages/affix/affix.stories.d.ts +3 -0
- package/dist/packages/affix/affix.stories.js +16 -0
- package/dist/packages/affix/affix.test.js +7 -0
- package/dist/packages/affix/locales/da/messages.d.mts +1 -0
- package/dist/packages/affix/locales/da/messages.mjs +1 -0
- package/dist/packages/affix/locales/en/messages.d.mts +1 -0
- package/dist/packages/affix/locales/en/messages.mjs +1 -0
- package/dist/packages/affix/locales/fi/messages.d.mts +1 -0
- package/dist/packages/affix/locales/fi/messages.mjs +1 -0
- package/dist/packages/affix/locales/nb/messages.d.mts +1 -0
- package/dist/packages/affix/locales/nb/messages.mjs +1 -0
- package/dist/packages/affix/locales/sv/messages.d.mts +1 -0
- package/dist/packages/affix/locales/sv/messages.mjs +1 -0
- package/dist/packages/badge/badge.react.stories.d.ts +1 -1
- package/dist/packages/box/box.react.stories.d.ts +1 -1
- package/dist/packages/breadcrumbs/breadcrumbs.react.stories.d.ts +1 -1
- package/dist/packages/button/button.react.stories.d.ts +1 -1
- package/dist/packages/card/card.react.stories.d.ts +1 -1
- package/dist/packages/combobox/combobox.react.stories.d.ts +1 -1
- package/dist/packages/datepicker/datepicker.react.stories.d.ts +1 -1
- package/dist/packages/expandable/expandable.react.stories.d.ts +1 -1
- package/dist/packages/link/link.react.stories.d.ts +1 -1
- package/dist/packages/page-indicator/page-indicator.react.stories.d.ts +1 -1
- package/dist/packages/pagination/pagination.react.stories.d.ts +1 -1
- package/dist/packages/pill/pill.react.stories.d.ts +1 -1
- package/dist/packages/select/select.react.stories.d.ts +1 -1
- package/dist/packages/textarea/textarea.react.stories.d.ts +1 -1
- package/dist/packages/textfield/textfield.react.stories.d.ts +1 -1
- package/dist/packages/textfield/textfield.stories.d.ts +3 -0
- package/dist/packages/textfield/textfield.stories.js +45 -0
- package/dist/web-types.json +111 -82
- package/package.json +2 -2
|
@@ -1 +1,8 @@
|
|
|
1
1
|
## Accessibility
|
|
2
|
+
|
|
3
|
+
When `search` or `clear` is enabled, `w-affix` renders a button and a matching `aria-label`. If the `aria-label` incorrect for your context, you may provide your own describing the action.
|
|
4
|
+
|
|
5
|
+
```html
|
|
6
|
+
<w-affix search aria-label="Ad Search"></w-affix>
|
|
7
|
+
<w-affix clear aria-label="Clear text input"></w-affix>
|
|
8
|
+
```
|
package/dist/docs/affix/affix.md
CHANGED
|
@@ -8,49 +8,211 @@ This component is usually used in other components like form elements to show a
|
|
|
8
8
|
|
|
9
9
|
## Usage
|
|
10
10
|
|
|
11
|
+
`w-affix` is typically used inside form controls to render prefix/suffix text or icon actions.
|
|
12
|
+
|
|
13
|
+
### In Textfield Slots
|
|
14
|
+
|
|
15
|
+
`w-affix` is usually slotted into the w-textfield form element. Use the w-textfield's `prefix` or `suffix` slots to add the affix to the component.
|
|
16
|
+
|
|
17
|
+
```html
|
|
18
|
+
<w-textfield label="Price">
|
|
19
|
+
<w-affix slot="suffix" label="kr"></w-affix>
|
|
20
|
+
</w-textfield>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### Text Label
|
|
24
|
+
|
|
25
|
+
Use `label` to render static text, such as currency or unit indicators.
|
|
26
|
+
|
|
27
|
+
```html
|
|
28
|
+
<w-affix label="kr"></w-affix>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### Icons
|
|
32
|
+
|
|
33
|
+
`w-affix` can also render any icon supported by `w-icon` using the attribute `icon`.
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
<w-textfield label="Award">
|
|
37
|
+
<w-affix slot="prefix" icon="AwardMedal"></w-affix>
|
|
38
|
+
</w-textfield>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Search Icon
|
|
42
|
+
|
|
43
|
+
Use `search` to render a clickable search icon button. If you wrap the w-affix and surrounding w-textfield in a form, clicking the w-affix will submit the form.
|
|
44
|
+
|
|
45
|
+
```html
|
|
46
|
+
<w-affix search aria-label="Search"></w-affix>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### Clear Icon
|
|
50
|
+
|
|
51
|
+
Use `clear` to render a clickable clear/reset icon button.
|
|
52
|
+
When the clear attribute is used inside a w-textfield, clicking the clear button will automatically reset the w-textfield.
|
|
53
|
+
|
|
54
|
+
```html
|
|
55
|
+
<w-affix clear aria-label="Clear input"></w-affix>
|
|
56
|
+
```
|
|
57
|
+
|
|
11
58
|
## Accessibility
|
|
12
59
|
|
|
60
|
+
When `search` or `clear` is enabled, `w-affix` renders a button and a matching `aria-label`. If the `aria-label` incorrect for your context, you may provide your own describing the action.
|
|
61
|
+
|
|
62
|
+
```html
|
|
63
|
+
<w-affix search aria-label="Ad Search"></w-affix>
|
|
64
|
+
<w-affix clear aria-label="Clear text input"></w-affix>
|
|
65
|
+
```
|
|
66
|
+
|
|
13
67
|
## Examples
|
|
14
68
|
|
|
69
|
+
### Prefix Label
|
|
70
|
+
|
|
71
|
+
<style-isolate>
|
|
72
|
+
<w-textfield label="Price">
|
|
73
|
+
<w-affix slot="prefix" label="kr"></w-affix>
|
|
74
|
+
</w-textfield>
|
|
75
|
+
</style-isolate>
|
|
76
|
+
|
|
77
|
+
```html
|
|
78
|
+
<w-textfield label="Price">
|
|
79
|
+
<w-affix slot="suffix" label="kr"></w-affix>
|
|
80
|
+
</w-textfield>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### Suffix Label
|
|
84
|
+
|
|
85
|
+
<style-isolate>
|
|
86
|
+
<w-textfield label="Price">
|
|
87
|
+
<w-affix slot="suffix" label="kr"></w-affix>
|
|
88
|
+
</w-textfield>
|
|
89
|
+
</style-isolate>
|
|
90
|
+
|
|
91
|
+
```html
|
|
92
|
+
<w-textfield label="Price">
|
|
93
|
+
<w-affix slot="suffix" label="kr"></w-affix>
|
|
94
|
+
</w-textfield>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### Prefix Search Icon
|
|
98
|
+
|
|
99
|
+
<style-isolate>
|
|
100
|
+
<w-textfield label="Search">
|
|
101
|
+
<w-affix slot="prefix" search></w-affix>
|
|
102
|
+
</w-textfield>
|
|
103
|
+
</style-isolate>
|
|
104
|
+
|
|
105
|
+
```html
|
|
106
|
+
<w-textfield label="Search">
|
|
107
|
+
<w-affix slot="prefix" search></w-affix>
|
|
108
|
+
</w-textfield>
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
### Suffix Search Icon
|
|
112
|
+
|
|
113
|
+
If you wrap the textfield with affix in a form element, clicking the search button will automatically submit the form
|
|
114
|
+
|
|
115
|
+
<style-isolate>
|
|
116
|
+
<form>
|
|
117
|
+
<w-textfield label="Search">
|
|
118
|
+
<w-affix slot="suffix" search></w-affix>
|
|
119
|
+
</w-textfield>
|
|
120
|
+
</form>
|
|
121
|
+
</style-isolate>
|
|
122
|
+
|
|
123
|
+
```html
|
|
124
|
+
<form>
|
|
125
|
+
<w-textfield label="Search">
|
|
126
|
+
<w-affix slot="prefix" search></w-affix>
|
|
127
|
+
</w-textfield>
|
|
128
|
+
</form>
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### Suffix Clear Icon
|
|
132
|
+
|
|
133
|
+
Clicking the clear button will reset the textfield
|
|
134
|
+
|
|
135
|
+
<style-isolate>
|
|
136
|
+
<w-textfield label="Search input">
|
|
137
|
+
<w-affix slot="suffix" clear></w-affix>
|
|
138
|
+
</w-textfield>
|
|
139
|
+
</style-isolate>
|
|
140
|
+
|
|
141
|
+
```html
|
|
142
|
+
<w-textfield label="Search input">
|
|
143
|
+
<w-affix slot="suffix" clear></w-affix>
|
|
144
|
+
</w-textfield>
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
### Icons
|
|
148
|
+
|
|
149
|
+
<style-isolate>
|
|
150
|
+
<w-textfield label="Award">
|
|
151
|
+
<w-affix slot="prefix" icon="AwardMedal"></w-affix>
|
|
152
|
+
</w-textfield>
|
|
153
|
+
</style-isolate>
|
|
154
|
+
|
|
155
|
+
```html
|
|
156
|
+
<w-textfield label="Award">
|
|
157
|
+
<w-affix slot="prefix" icon="AwardMedal"></w-affix>
|
|
158
|
+
</w-textfield>
|
|
159
|
+
```
|
|
160
|
+
|
|
15
161
|
## API Documentation
|
|
16
162
|
|
|
17
163
|
### Properties
|
|
18
164
|
|
|
19
165
|
| Name | Type | Default | Summary |
|
|
20
166
|
|-|-|-|-|
|
|
21
|
-
| ariaLabel | `string` |
|
|
22
|
-
| clear | `boolean` | `false` |
|
|
23
|
-
| search | `boolean` | `false` |
|
|
24
|
-
| label | `string` |
|
|
167
|
+
| ariaLabel | `string | null` | `null` | Accessible label for icon-button variants. |
|
|
168
|
+
| clear | `boolean` | `false` | Renders a clear icon button. |
|
|
169
|
+
| search | `boolean` | `false` | Renders a search icon button. |
|
|
170
|
+
| label | `string` | `''` | Text label shown as prefix/suffix content. |
|
|
171
|
+
| icon | `string | null` | `null` | Icon name rendered as prefix/suffix content. |
|
|
172
|
+
| _icon | `unknown` | `-` | - |
|
|
25
173
|
|
|
26
174
|
### Property Details
|
|
27
175
|
|
|
28
176
|
#### ariaLabel
|
|
29
177
|
|
|
178
|
+
Used to override the default `aria-label`s for the internal button when `search` or `clear` is enabled.
|
|
30
179
|
|
|
31
|
-
|
|
32
|
-
-
|
|
33
|
-
- Default: `-`
|
|
180
|
+
- Type: `string | null`
|
|
181
|
+
- Default: `null`
|
|
34
182
|
|
|
35
183
|
#### clear
|
|
36
184
|
|
|
37
|
-
|
|
185
|
+
Shows a clickable close icon meant for reset/clear actions, typically in a suffix slot.
|
|
38
186
|
|
|
39
187
|
- Type: `boolean`
|
|
40
188
|
- Default: `false`
|
|
41
189
|
|
|
42
190
|
#### search
|
|
43
191
|
|
|
44
|
-
|
|
192
|
+
Shows a clickable search icon, typically in a prefix slot for search fields.
|
|
45
193
|
|
|
46
194
|
- Type: `boolean`
|
|
47
195
|
- Default: `false`
|
|
48
196
|
|
|
49
197
|
#### label
|
|
50
198
|
|
|
51
|
-
|
|
199
|
+
Displays plain text such as a currency or unit label (for example `kr` or `%`) instead of an icon button.
|
|
52
200
|
|
|
53
201
|
- Type: `string`
|
|
202
|
+
- Default: `''`
|
|
203
|
+
|
|
204
|
+
#### icon
|
|
205
|
+
|
|
206
|
+
Displays a non-interactive `w-icon` in the affix area using the provided icon name (for example `Search` or `Close`) instead of text.
|
|
207
|
+
|
|
208
|
+
- Type: `string | null`
|
|
209
|
+
- Default: `null`
|
|
210
|
+
|
|
211
|
+
#### _icon
|
|
212
|
+
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
- Type: `unknown`
|
|
54
216
|
- Default: `-`
|
|
55
217
|
|
|
56
218
|
### Types
|
package/dist/docs/affix/api.md
CHANGED
|
@@ -4,39 +4,55 @@
|
|
|
4
4
|
|
|
5
5
|
| Name | Type | Default | Summary |
|
|
6
6
|
|-|-|-|-|
|
|
7
|
-
| ariaLabel | `string` |
|
|
8
|
-
| clear | `boolean` | `false` |
|
|
9
|
-
| search | `boolean` | `false` |
|
|
10
|
-
| label | `string` |
|
|
7
|
+
| ariaLabel | `string | null` | `null` | Accessible label for icon-button variants. |
|
|
8
|
+
| clear | `boolean` | `false` | Renders a clear icon button. |
|
|
9
|
+
| search | `boolean` | `false` | Renders a search icon button. |
|
|
10
|
+
| label | `string` | `''` | Text label shown as prefix/suffix content. |
|
|
11
|
+
| icon | `string | null` | `null` | Icon name rendered as prefix/suffix content. |
|
|
12
|
+
| _icon | `unknown` | `-` | - |
|
|
11
13
|
|
|
12
14
|
### Property Details
|
|
13
15
|
|
|
14
16
|
#### ariaLabel
|
|
15
17
|
|
|
18
|
+
Used to override the default `aria-label`s for the internal button when `search` or `clear` is enabled.
|
|
16
19
|
|
|
17
|
-
|
|
18
|
-
-
|
|
19
|
-
- Default: `-`
|
|
20
|
+
- Type: `string | null`
|
|
21
|
+
- Default: `null`
|
|
20
22
|
|
|
21
23
|
#### clear
|
|
22
24
|
|
|
23
|
-
|
|
25
|
+
Shows a clickable close icon meant for reset/clear actions, typically in a suffix slot.
|
|
24
26
|
|
|
25
27
|
- Type: `boolean`
|
|
26
28
|
- Default: `false`
|
|
27
29
|
|
|
28
30
|
#### search
|
|
29
31
|
|
|
30
|
-
|
|
32
|
+
Shows a clickable search icon, typically in a prefix slot for search fields.
|
|
31
33
|
|
|
32
34
|
- Type: `boolean`
|
|
33
35
|
- Default: `false`
|
|
34
36
|
|
|
35
37
|
#### label
|
|
36
38
|
|
|
37
|
-
|
|
39
|
+
Displays plain text such as a currency or unit label (for example `kr` or `%`) instead of an icon button.
|
|
38
40
|
|
|
39
41
|
- Type: `string`
|
|
42
|
+
- Default: `''`
|
|
43
|
+
|
|
44
|
+
#### icon
|
|
45
|
+
|
|
46
|
+
Displays a non-interactive `w-icon` in the affix area using the provided icon name (for example `Search` or `Close`) instead of text.
|
|
47
|
+
|
|
48
|
+
- Type: `string | null`
|
|
49
|
+
- Default: `null`
|
|
50
|
+
|
|
51
|
+
#### _icon
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
- Type: `unknown`
|
|
40
56
|
- Default: `-`
|
|
41
57
|
|
|
42
58
|
### Types
|
|
@@ -1 +1,93 @@
|
|
|
1
1
|
## Examples
|
|
2
|
+
|
|
3
|
+
### Prefix Label
|
|
4
|
+
|
|
5
|
+
<style-isolate>
|
|
6
|
+
<w-textfield label="Price">
|
|
7
|
+
<w-affix slot="prefix" label="kr"></w-affix>
|
|
8
|
+
</w-textfield>
|
|
9
|
+
</style-isolate>
|
|
10
|
+
|
|
11
|
+
```html
|
|
12
|
+
<w-textfield label="Price">
|
|
13
|
+
<w-affix slot="suffix" label="kr"></w-affix>
|
|
14
|
+
</w-textfield>
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
### Suffix Label
|
|
18
|
+
|
|
19
|
+
<style-isolate>
|
|
20
|
+
<w-textfield label="Price">
|
|
21
|
+
<w-affix slot="suffix" label="kr"></w-affix>
|
|
22
|
+
</w-textfield>
|
|
23
|
+
</style-isolate>
|
|
24
|
+
|
|
25
|
+
```html
|
|
26
|
+
<w-textfield label="Price">
|
|
27
|
+
<w-affix slot="suffix" label="kr"></w-affix>
|
|
28
|
+
</w-textfield>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### Prefix Search Icon
|
|
32
|
+
|
|
33
|
+
<style-isolate>
|
|
34
|
+
<w-textfield label="Search">
|
|
35
|
+
<w-affix slot="prefix" search></w-affix>
|
|
36
|
+
</w-textfield>
|
|
37
|
+
</style-isolate>
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<w-textfield label="Search">
|
|
41
|
+
<w-affix slot="prefix" search></w-affix>
|
|
42
|
+
</w-textfield>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### Suffix Search Icon
|
|
46
|
+
|
|
47
|
+
If you wrap the textfield with affix in a form element, clicking the search button will automatically submit the form
|
|
48
|
+
|
|
49
|
+
<style-isolate>
|
|
50
|
+
<form>
|
|
51
|
+
<w-textfield label="Search">
|
|
52
|
+
<w-affix slot="suffix" search></w-affix>
|
|
53
|
+
</w-textfield>
|
|
54
|
+
</form>
|
|
55
|
+
</style-isolate>
|
|
56
|
+
|
|
57
|
+
```html
|
|
58
|
+
<form>
|
|
59
|
+
<w-textfield label="Search">
|
|
60
|
+
<w-affix slot="prefix" search></w-affix>
|
|
61
|
+
</w-textfield>
|
|
62
|
+
</form>
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### Suffix Clear Icon
|
|
66
|
+
|
|
67
|
+
Clicking the clear button will reset the textfield
|
|
68
|
+
|
|
69
|
+
<style-isolate>
|
|
70
|
+
<w-textfield label="Search input">
|
|
71
|
+
<w-affix slot="suffix" clear></w-affix>
|
|
72
|
+
</w-textfield>
|
|
73
|
+
</style-isolate>
|
|
74
|
+
|
|
75
|
+
```html
|
|
76
|
+
<w-textfield label="Search input">
|
|
77
|
+
<w-affix slot="suffix" clear></w-affix>
|
|
78
|
+
</w-textfield>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### Icons
|
|
82
|
+
|
|
83
|
+
<style-isolate>
|
|
84
|
+
<w-textfield label="Award">
|
|
85
|
+
<w-affix slot="prefix" icon="AwardMedal"></w-affix>
|
|
86
|
+
</w-textfield>
|
|
87
|
+
</style-isolate>
|
|
88
|
+
|
|
89
|
+
```html
|
|
90
|
+
<w-textfield label="Award">
|
|
91
|
+
<w-affix slot="prefix" icon="AwardMedal"></w-affix>
|
|
92
|
+
</w-textfield>
|
|
93
|
+
```
|
package/dist/docs/affix/usage.md
CHANGED
|
@@ -1 +1,48 @@
|
|
|
1
1
|
## Usage
|
|
2
|
+
|
|
3
|
+
`w-affix` is typically used inside form controls to render prefix/suffix text or icon actions.
|
|
4
|
+
|
|
5
|
+
### In Textfield Slots
|
|
6
|
+
|
|
7
|
+
`w-affix` is usually slotted into the w-textfield form element. Use the w-textfield's `prefix` or `suffix` slots to add the affix to the component.
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<w-textfield label="Price">
|
|
11
|
+
<w-affix slot="suffix" label="kr"></w-affix>
|
|
12
|
+
</w-textfield>
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Text Label
|
|
16
|
+
|
|
17
|
+
Use `label` to render static text, such as currency or unit indicators.
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
<w-affix label="kr"></w-affix>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### Icons
|
|
24
|
+
|
|
25
|
+
`w-affix` can also render any icon supported by `w-icon` using the attribute `icon`.
|
|
26
|
+
|
|
27
|
+
```html
|
|
28
|
+
<w-textfield label="Award">
|
|
29
|
+
<w-affix slot="prefix" icon="AwardMedal"></w-affix>
|
|
30
|
+
</w-textfield>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Search Icon
|
|
34
|
+
|
|
35
|
+
Use `search` to render a clickable search icon button. If you wrap the w-affix and surrounding w-textfield in a form, clicking the w-affix will submit the form.
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<w-affix search aria-label="Search"></w-affix>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Clear Icon
|
|
42
|
+
|
|
43
|
+
Use `clear` to render a clickable clear/reset icon button.
|
|
44
|
+
When the clear attribute is used inside a w-textfield, clicking the clear button will automatically reset the w-textfield.
|
|
45
|
+
|
|
46
|
+
```html
|
|
47
|
+
<w-affix clear aria-label="Clear input"></w-affix>
|
|
48
|
+
```
|