Skip to content

Commit 7620354

Browse files
author
Alexis Córdova
authored
fix(file-selector): Add unique ids (#4694)
1 parent 58707a6 commit 7620354

File tree

6 files changed

+580
-134
lines changed

6 files changed

+580
-134
lines changed

‎ui/components/file-selector/__tests__/__snapshots__/snapshot.spec.js.snap

Lines changed: 346 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,346 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`File Selector - Images renders a default file selector for images 1`] = `
4+
<div
5+
className="slds-form-element"
6+
>
7+
<span
8+
className="slds-form-element__label"
9+
id="file-selector-primary-label-17"
10+
>
11+
Attachment
12+
</span>
13+
<div
14+
className="slds-form-element__control"
15+
>
16+
<div
17+
className="slds-file-selector slds-file-selector_images"
18+
>
19+
<div
20+
className="slds-file-selector__dropzone"
21+
>
22+
<input
23+
accept="image/png"
24+
aria-describedby={null}
25+
aria-labelledby="file-selector-primary-label-17 file-selector-secondary-label18"
26+
className="slds-file-selector__input slds-assistive-text"
27+
id="file-upload-input-19"
28+
type="file"
29+
/>
30+
<label
31+
className="slds-file-selector__body"
32+
htmlFor="file-upload-input-19"
33+
id="file-selector-secondary-label18"
34+
>
35+
<span
36+
className="slds-file-selector__button slds-button slds-button_neutral"
37+
>
38+
<svg
39+
aria-hidden={true}
40+
className="slds-button__icon slds-button__icon_left"
41+
>
42+
<use
43+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#upload"
44+
/>
45+
</svg>
46+
Upload
47+
Image
48+
</span>
49+
<span
50+
className="slds-file-selector__text slds-medium-show"
51+
>
52+
or Drop
53+
Image
54+
</span>
55+
</label>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
`;
61+
62+
exports[`File Selector - Images renders a file selector for images with dragover 1`] = `null`;
63+
64+
exports[`File Selector - Images renders a file selector for images with dragover error 1`] = `null`;
65+
66+
exports[`File Selector - Images renders a file selector for images with error 1`] = `null`;
67+
68+
exports[`File Selector renders a default file selector 1`] = `
69+
<div
70+
className="slds-form-element"
71+
>
72+
<span
73+
className="slds-form-element__label"
74+
id="file-selector-primary-label-1"
75+
>
76+
Attachment
77+
</span>
78+
<div
79+
className="slds-form-element__control"
80+
>
81+
<div
82+
className="slds-file-selector slds-file-selector_files"
83+
>
84+
<div
85+
className="slds-file-selector__dropzone"
86+
>
87+
<input
88+
accept="image/png"
89+
aria-describedby={null}
90+
aria-labelledby="file-selector-primary-label-1 file-selector-secondary-label2"
91+
className="slds-file-selector__input slds-assistive-text"
92+
id="file-upload-input-3"
93+
type="file"
94+
/>
95+
<label
96+
className="slds-file-selector__body"
97+
htmlFor="file-upload-input-3"
98+
id="file-selector-secondary-label2"
99+
>
100+
<span
101+
className="slds-file-selector__button slds-button slds-button_neutral"
102+
>
103+
<svg
104+
aria-hidden={true}
105+
className="slds-button__icon slds-button__icon_left"
106+
>
107+
<use
108+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#upload"
109+
/>
110+
</svg>
111+
Upload
112+
Files
113+
</span>
114+
<span
115+
className="slds-file-selector__text slds-medium-show"
116+
>
117+
or Drop
118+
Files
119+
</span>
120+
</label>
121+
</div>
122+
</div>
123+
</div>
124+
</div>
125+
`;
126+
127+
exports[`File Selector renders a file selector dragover 1`] = `
128+
<div
129+
className="slds-form-element"
130+
>
131+
<span
132+
className="slds-form-element__label"
133+
id="file-selector-primary-label-9"
134+
>
135+
Attachment
136+
</span>
137+
<div
138+
className="slds-form-element__control"
139+
>
140+
<div
141+
className="slds-file-selector slds-file-selector_files"
142+
>
143+
<div
144+
className="slds-file-selector__dropzone"
145+
>
146+
<input
147+
accept="image/png"
148+
aria-describedby={null}
149+
aria-labelledby="file-selector-primary-label-9 file-selector-secondary-label10"
150+
className="slds-file-selector__input slds-assistive-text"
151+
id="file-upload-input-11"
152+
type="file"
153+
/>
154+
<label
155+
className="slds-file-selector__body"
156+
htmlFor="file-upload-input-11"
157+
id="file-selector-secondary-label10"
158+
>
159+
<span
160+
className="slds-file-selector__button slds-button slds-button_neutral"
161+
>
162+
<svg
163+
aria-hidden={true}
164+
className="slds-button__icon slds-button__icon_left"
165+
>
166+
<use
167+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#upload"
168+
/>
169+
</svg>
170+
Upload
171+
Files
172+
</span>
173+
<span
174+
className="slds-file-selector__text slds-medium-show"
175+
>
176+
or Drop
177+
Files
178+
</span>
179+
</label>
180+
</div>
181+
</div>
182+
</div>
183+
</div>
184+
`;
185+
186+
exports[`File Selector renders a file selector dragover with error 1`] = `
187+
<div
188+
className="slds-form-element"
189+
>
190+
<span
191+
className="slds-form-element__label"
192+
id="file-selector-primary-label-13"
193+
>
194+
Attachment
195+
</span>
196+
<div
197+
className="slds-form-element__control"
198+
>
199+
<div
200+
className="slds-file-selector slds-file-selector_files"
201+
>
202+
<div
203+
className="slds-file-selector__dropzone"
204+
>
205+
<input
206+
accept="image/png"
207+
aria-describedby={null}
208+
aria-labelledby="file-selector-primary-label-13 file-selector-secondary-label14"
209+
className="slds-file-selector__input slds-assistive-text"
210+
id="file-upload-input-15"
211+
type="file"
212+
/>
213+
<label
214+
className="slds-file-selector__body"
215+
htmlFor="file-upload-input-15"
216+
id="file-selector-secondary-label14"
217+
>
218+
<span
219+
className="slds-file-selector__button slds-button slds-button_neutral"
220+
>
221+
<svg
222+
aria-hidden={true}
223+
className="slds-button__icon slds-button__icon_left"
224+
>
225+
<use
226+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#upload"
227+
/>
228+
</svg>
229+
Upload
230+
Files
231+
</span>
232+
<span
233+
className="slds-file-selector__text slds-medium-show"
234+
>
235+
or Drop
236+
Files
237+
</span>
238+
</label>
239+
</div>
240+
</div>
241+
</div>
242+
</div>
243+
`;
244+
245+
exports[`File Selector renders a file selector with error 1`] = `
246+
<div
247+
className="slds-form-element"
248+
>
249+
<span
250+
className="slds-form-element__label"
251+
id="file-selector-primary-label-5"
252+
>
253+
Attachment
254+
</span>
255+
<div
256+
className="slds-form-element__control"
257+
>
258+
<div
259+
className="slds-file-selector slds-file-selector_files"
260+
>
261+
<div
262+
className="slds-file-selector__dropzone"
263+
>
264+
<input
265+
accept="image/png"
266+
aria-describedby={null}
267+
aria-labelledby="file-selector-primary-label-5 file-selector-secondary-label6"
268+
className="slds-file-selector__input slds-assistive-text"
269+
id="file-upload-input-7"
270+
type="file"
271+
/>
272+
<label
273+
className="slds-file-selector__body"
274+
htmlFor="file-upload-input-7"
275+
id="file-selector-secondary-label6"
276+
>
277+
<span
278+
className="slds-file-selector__button slds-button slds-button_neutral"
279+
>
280+
<svg
281+
aria-hidden={true}
282+
className="slds-button__icon slds-button__icon_left"
283+
>
284+
<use
285+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#upload"
286+
/>
287+
</svg>
288+
Upload
289+
Files
290+
</span>
291+
<span
292+
className="slds-file-selector__text slds-medium-show"
293+
>
294+
or Drop
295+
Files
296+
</span>
297+
</label>
298+
</div>
299+
</div>
300+
</div>
301+
</div>
302+
`;
303+
304+
exports[`Integrated File Selector renders a default integrated file selector 1`] = `
305+
<div
306+
className="slds-file-selector slds-file-selector_integrated slds-file-selector_integrated"
307+
>
308+
<div
309+
aria-hidden="true"
310+
className="slds-file-selector__dropzone slds-file-selector__dropzone_integrated"
311+
>
312+
<input
313+
accept="image/png"
314+
className="slds-file-selector__input slds-assistive-text"
315+
id="file-upload-input-01"
316+
tabIndex="-1"
317+
type="file"
318+
/>
319+
<label
320+
className="slds-file-selector__body slds-file-selector__body_integrated"
321+
htmlFor="file-upload-input-01"
322+
>
323+
<svg
324+
aria-hidden={true}
325+
className="slds-file-selector__body-icon slds-icon slds-icon-text-default"
326+
>
327+
<use
328+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#upload"
329+
/>
330+
</svg>
331+
<span
332+
className="slds-file-selector__text slds-file-selector__text_integrated slds-text-heading_medium slds-text-align_center"
333+
>
334+
Drop Files
335+
</span>
336+
</label>
337+
</div>
338+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
339+
</div>
340+
`;
341+
342+
exports[`Integrated File Selector renders an integrated file selector with drag 1`] = `null`;
343+
344+
exports[`Integrated File Selector renders an integrated file selector with dragover 1`] = `null`;
345+
346+
exports[`Integrated File Selector renders an integrated file selector with dragover error 1`] = `null`;

0 commit comments

Comments
 (0)