@charcoal-ui/react 4.3.0 → 4.4.0

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.
Files changed (40) hide show
  1. package/dist/components/MultiSelect/context.d.ts +14 -0
  2. package/dist/components/MultiSelect/context.d.ts.map +1 -0
  3. package/dist/components/MultiSelect/index.d.ts +38 -0
  4. package/dist/components/MultiSelect/index.d.ts.map +1 -0
  5. package/dist/index.cjs.js +318 -216
  6. package/dist/index.cjs.js.map +1 -1
  7. package/dist/index.css +111 -0
  8. package/dist/index.css.map +1 -1
  9. package/dist/index.d.ts +1 -0
  10. package/dist/index.d.ts.map +1 -1
  11. package/dist/index.esm.js +281 -181
  12. package/dist/index.esm.js.map +1 -1
  13. package/dist/layered.css +111 -0
  14. package/dist/layered.css.map +1 -1
  15. package/package.json +6 -7
  16. package/src/components/Button/__snapshots__/index.story.storyshot +89 -71
  17. package/src/components/Checkbox/CheckboxInput/__snapshots__/index.story.storyshot +50 -53
  18. package/src/components/Checkbox/__snapshots__/index.story.storyshot +108 -102
  19. package/src/components/Clickable/__snapshots__/index.story.storyshot +19 -17
  20. package/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot +45 -54
  21. package/src/components/DropdownSelector/MenuList/__snapshots__/index.story.storyshot +238 -275
  22. package/src/components/DropdownSelector/Popover/__snapshots__/index.story.storyshot +28 -50
  23. package/src/components/DropdownSelector/__snapshots__/index.story.storyshot +780 -1158
  24. package/src/components/Icon/__snapshots__/index.story.storyshot +9 -7
  25. package/src/components/IconButton/__snapshots__/index.story.storyshot +43 -37
  26. package/src/components/LoadingSpinner/__snapshots__/index.story.storyshot +52 -64
  27. package/src/components/Modal/__snapshots__/index.story.storyshot +568 -716
  28. package/src/components/MultiSelect/__snapshots__/index.story.storyshot +531 -0
  29. package/src/components/MultiSelect/context.ts +23 -0
  30. package/src/components/MultiSelect/index.css +139 -0
  31. package/src/components/MultiSelect/index.story.tsx +118 -0
  32. package/src/components/MultiSelect/index.test.tsx +255 -0
  33. package/src/components/MultiSelect/index.tsx +153 -0
  34. package/src/components/Radio/__snapshots__/index.story.storyshot +313 -367
  35. package/src/components/SegmentedControl/__snapshots__/index.story.storyshot +116 -228
  36. package/src/components/Switch/__snapshots__/index.story.storyshot +74 -73
  37. package/src/components/TagItem/__snapshots__/index.story.storyshot +177 -193
  38. package/src/components/TextArea/__snapshots__/TextArea.story.storyshot +372 -533
  39. package/src/components/TextField/__snapshots__/TextField.story.storyshot +444 -583
  40. package/src/index.ts +6 -0
package/src/components/TagItem/__snapshots__/index.story.storyshot CHANGED
@@ -1,250 +1,234 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
3
  exports[`Storybook Tests > react/TagItem > Active 1`] = `
4
- <div
5
- data-dark={false}
6
- >
7
- <button
8
- className="charcoal-tag-item charcoal-tag-item__bg"
9
- data-bg-variant="color"
10
- data-size="M"
11
- data-state="active"
12
- style={
13
- Object {
14
- "--charcoal-tag-item-bg": "#7ACCB1",
15
- }
16
- }
4
+ <div>
5
+ <div
6
+ data-dark="false"
17
7
  >
18
- <div
19
- className="charcoal-tag-item__label"
20
- data-has-translate={false}
8
+ <button
9
+ class="charcoal-tag-item charcoal-tag-item__bg"
10
+ data-bg-variant="color"
11
+ data-size="M"
12
+ data-state="active"
13
+ style="--charcoal-tag-item-bg: #7ACCB1;"
21
14
  >
22
- <span
23
- className="charcoal-tag-item__label__text"
24
- data-has-translate={false}
15
+ <div
16
+ class="charcoal-tag-item__label"
17
+ data-has-translate="false"
25
18
  >
26
- #女の子
27
- </span>
28
- </div>
29
- <pixiv-icon
30
- name="16/Remove"
31
- />
32
- </button>
19
+ <span
20
+ class="charcoal-tag-item__label__text"
21
+ data-has-translate="false"
22
+ >
23
+ #女の子
24
+ </span>
25
+ </div>
26
+ <pixiv-icon
27
+ name="16/Remove"
28
+ />
29
+ </button>
30
+ </div>
33
31
  </div>
34
32
  `;
35
33
 
36
34
  exports[`Storybook Tests > react/TagItem > BGColor 1`] = `
37
- <div
38
- data-dark={false}
39
- >
40
- <button
41
- className="charcoal-tag-item charcoal-tag-item__bg"
42
- data-bg-variant="color"
43
- data-size="M"
44
- data-state="default"
45
- style={
46
- Object {
47
- "--charcoal-tag-item-bg": "var(--charcoal-brand)",
48
- }
49
- }
35
+ <div>
36
+ <div
37
+ data-dark="false"
50
38
  >
51
- <div
52
- className="charcoal-tag-item__label"
53
- data-has-translate={false}
39
+ <button
40
+ class="charcoal-tag-item charcoal-tag-item__bg"
41
+ data-bg-variant="color"
42
+ data-size="M"
43
+ data-state="default"
44
+ style="--charcoal-tag-item-bg: var(--charcoal-brand);"
54
45
  >
55
- <span
56
- className="charcoal-tag-item__label__text"
57
- data-has-translate={false}
46
+ <div
47
+ class="charcoal-tag-item__label"
48
+ data-has-translate="false"
58
49
  >
59
- 女の子
60
- </span>
61
- </div>
62
- </button>
50
+ <span
51
+ class="charcoal-tag-item__label__text"
52
+ data-has-translate="false"
53
+ >
54
+ 女の子
55
+ </span>
56
+ </div>
57
+ </button>
58
+ </div>
63
59
  </div>
64
60
  `;
65
61
 
66
62
  exports[`Storybook Tests > react/TagItem > BGImage 1`] = `
67
- <div
68
- data-dark={false}
69
- >
70
- <button
71
- className="charcoal-tag-item charcoal-tag-item__bg"
72
- data-bg-variant="image"
73
- data-size="M"
74
- data-state="default"
75
- style={
76
- Object {
77
- "--charcoal-tag-item-bg": "url(data:image/png;base64,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)",
78
- }
79
- }
63
+ <div>
64
+ <div
65
+ data-dark="false"
80
66
  >
81
- <div
82
- className="charcoal-tag-item__label"
83
- data-has-translate={false}
67
+ <button
68
+ class="charcoal-tag-item charcoal-tag-item__bg"
69
+ data-bg-variant="image"
70
+ data-size="M"
71
+ data-state="default"
72
+ style="--charcoal-tag-item-bg: url(data:image/png;base64,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);"
84
73
  >
85
- <span
86
- className="charcoal-tag-item__label__text"
87
- data-has-translate={false}
74
+ <div
75
+ class="charcoal-tag-item__label"
76
+ data-has-translate="false"
88
77
  >
89
- #女の子
90
- </span>
91
- </div>
92
- </button>
78
+ <span
79
+ class="charcoal-tag-item__label__text"
80
+ data-has-translate="false"
81
+ >
82
+ #女の子
83
+ </span>
84
+ </div>
85
+ </button>
86
+ </div>
93
87
  </div>
94
88
  `;
95
89
 
96
90
  exports[`Storybook Tests > react/TagItem > Default 1`] = `
97
- <div
98
- data-dark={false}
99
- >
100
- <button
101
- className="charcoal-tag-item charcoal-tag-item__bg"
102
- data-bg-variant="color"
103
- data-size="M"
104
- data-state="default"
105
- style={
106
- Object {
107
- "--charcoal-tag-item-bg": "#7ACCB1",
108
- }
109
- }
91
+ <div>
92
+ <div
93
+ data-dark="false"
110
94
  >
111
- <div
112
- className="charcoal-tag-item__label"
113
- data-has-translate={false}
95
+ <button
96
+ class="charcoal-tag-item charcoal-tag-item__bg"
97
+ data-bg-variant="color"
98
+ data-size="M"
99
+ data-state="default"
100
+ style="--charcoal-tag-item-bg: #7ACCB1;"
114
101
  >
115
- <span
116
- className="charcoal-tag-item__label__text"
117
- data-has-translate={false}
102
+ <div
103
+ class="charcoal-tag-item__label"
104
+ data-has-translate="false"
118
105
  >
119
- #女の子
120
- </span>
121
- </div>
122
- </button>
106
+ <span
107
+ class="charcoal-tag-item__label__text"
108
+ data-has-translate="false"
109
+ >
110
+ #女の子
111
+ </span>
112
+ </div>
113
+ </button>
114
+ </div>
123
115
  </div>
124
116
  `;
125
117
 
126
118
  exports[`Storybook Tests > react/TagItem > Disabled 1`] = `
127
- <div
128
- data-dark={false}
129
- >
130
- <button
131
- className="charcoal-tag-item charcoal-tag-item__bg"
132
- data-bg-variant="color"
133
- data-size="M"
134
- data-state="default"
135
- disabled={true}
136
- style={
137
- Object {
138
- "--charcoal-tag-item-bg": "#7ACCB1",
139
- }
140
- }
119
+ <div>
120
+ <div
121
+ data-dark="false"
141
122
  >
142
- <div
143
- className="charcoal-tag-item__label"
144
- data-has-translate={false}
123
+ <button
124
+ class="charcoal-tag-item charcoal-tag-item__bg"
125
+ data-bg-variant="color"
126
+ data-size="M"
127
+ data-state="default"
128
+ disabled=""
129
+ style="--charcoal-tag-item-bg: #7ACCB1;"
145
130
  >
146
- <span
147
- className="charcoal-tag-item__label__text"
148
- data-has-translate={false}
131
+ <div
132
+ class="charcoal-tag-item__label"
133
+ data-has-translate="false"
149
134
  >
150
- #女の子
151
- </span>
152
- </div>
153
- </button>
135
+ <span
136
+ class="charcoal-tag-item__label__text"
137
+ data-has-translate="false"
138
+ >
139
+ #女の子
140
+ </span>
141
+ </div>
142
+ </button>
143
+ </div>
154
144
  </div>
155
145
  `;
156
146
 
157
147
  exports[`Storybook Tests > react/TagItem > InActive 1`] = `
158
- <div
159
- data-dark={false}
160
- >
161
- <button
162
- className="charcoal-tag-item charcoal-tag-item__bg"
163
- data-bg-variant="color"
164
- data-size="M"
165
- data-state="inactive"
166
- style={
167
- Object {
168
- "--charcoal-tag-item-bg": "#7ACCB1",
169
- }
170
- }
148
+ <div>
149
+ <div
150
+ data-dark="false"
171
151
  >
172
- <div
173
- className="charcoal-tag-item__label"
174
- data-has-translate={false}
152
+ <button
153
+ class="charcoal-tag-item charcoal-tag-item__bg"
154
+ data-bg-variant="color"
155
+ data-size="M"
156
+ data-state="inactive"
157
+ style="--charcoal-tag-item-bg: #7ACCB1;"
175
158
  >
176
- <span
177
- className="charcoal-tag-item__label__text"
178
- data-has-translate={false}
159
+ <div
160
+ class="charcoal-tag-item__label"
161
+ data-has-translate="false"
179
162
  >
180
- #女の子
181
- </span>
182
- </div>
183
- </button>
163
+ <span
164
+ class="charcoal-tag-item__label__text"
165
+ data-has-translate="false"
166
+ >
167
+ #女の子
168
+ </span>
169
+ </div>
170
+ </button>
171
+ </div>
184
172
  </div>
185
173
  `;
186
174
 
187
175
  exports[`Storybook Tests > react/TagItem > Small 1`] = `
188
- <div
189
- data-dark={false}
190
- >
191
- <button
192
- className="charcoal-tag-item charcoal-tag-item__bg"
193
- data-bg-variant="color"
194
- data-size="S"
195
- data-state="default"
196
- style={
197
- Object {
198
- "--charcoal-tag-item-bg": "#7ACCB1",
199
- }
200
- }
176
+ <div>
177
+ <div
178
+ data-dark="false"
201
179
  >
202
- <div
203
- className="charcoal-tag-item__label"
204
- data-has-translate={false}
180
+ <button
181
+ class="charcoal-tag-item charcoal-tag-item__bg"
182
+ data-bg-variant="color"
183
+ data-size="S"
184
+ data-state="default"
185
+ style="--charcoal-tag-item-bg: #7ACCB1;"
205
186
  >
206
- <span
207
- className="charcoal-tag-item__label__text"
208
- data-has-translate={false}
187
+ <div
188
+ class="charcoal-tag-item__label"
189
+ data-has-translate="false"
209
190
  >
210
- #女の子
211
- </span>
212
- </div>
213
- </button>
191
+ <span
192
+ class="charcoal-tag-item__label__text"
193
+ data-has-translate="false"
194
+ >
195
+ #女の子
196
+ </span>
197
+ </div>
198
+ </button>
199
+ </div>
214
200
  </div>
215
201
  `;
216
202
 
217
203
  exports[`Storybook Tests > react/TagItem > TranslatedLabel 1`] = `
218
- <div
219
- data-dark={false}
220
- >
221
- <button
222
- className="charcoal-tag-item charcoal-tag-item__bg"
223
- data-bg-variant="color"
224
- data-size="M"
225
- data-state="default"
226
- style={
227
- Object {
228
- "--charcoal-tag-item-bg": "#7ACCB1",
229
- }
230
- }
204
+ <div>
205
+ <div
206
+ data-dark="false"
231
207
  >
232
- <div
233
- className="charcoal-tag-item__label"
234
- data-has-translate={true}
208
+ <button
209
+ class="charcoal-tag-item charcoal-tag-item__bg"
210
+ data-bg-variant="color"
211
+ data-size="M"
212
+ data-state="default"
213
+ style="--charcoal-tag-item-bg: #7ACCB1;"
235
214
  >
236
- <span
237
- className="charcoal-tag-item__label__translated"
215
+ <div
216
+ class="charcoal-tag-item__label"
217
+ data-has-translate="true"
238
218
  >
239
- girl
240
- </span>
241
- <span
242
- className="charcoal-tag-item__label__text"
243
- data-has-translate={true}
244
- >
245
- #女の子
246
- </span>
247
- </div>
248
- </button>
219
+ <span
220
+ class="charcoal-tag-item__label__translated"
221
+ >
222
+ girl
223
+ </span>
224
+ <span
225
+ class="charcoal-tag-item__label__text"
226
+ data-has-translate="true"
227
+ >
228
+ #女の子
229
+ </span>
230
+ </div>
231
+ </button>
232
+ </div>
249
233
  </div>
250
234
  `;