Skip to content

Commit cb8646e

Browse files
nalogiudicenalogiudice
authored
fix(image): fix incorrect data causing error in srcSet 'w' value (#422)
* Fixes wrong w value and updates incorrect logic * Updates snapshots * Removes logic
1 parent 54918b9 commit cb8646e

File tree

2 files changed

+62
-20
lines changed

2 files changed

+62
-20
lines changed

‎packages/fast-components-react-msft/src/image/__snapshots__/image.spec.ts.snap

Lines changed: 60 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,35 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`image image: 0 1`] = `
4-
<img
5-
alt="Placeholder with grey background and dimension watermark without any imagery"
6-
className="image-0-1-1 image_round-0-1-2"
7-
sizes={null}
8-
src="https://placehold.it/600x600/2F2F2F/171717"
9-
srcSet={null}
10-
/>
4+
<picture
5+
className="picture-0-1-3"
6+
>
7+
<source
8+
media="(min-width: 1400px)"
9+
srcSet="https://placehold.it/600x600/2F2F2F/171717"
10+
/>
11+
<source
12+
media="(min-width: 1084px)"
13+
srcSet="https://placehold.it/600x600/2F2F2F/171717"
14+
/>
15+
<source
16+
media="(min-width: 768px)"
17+
srcSet="https://placehold.it/500x500/2F2F2F/171717"
18+
/>
19+
<source
20+
media="(min-width: 540px)"
21+
srcSet="https://placehold.it/400x400/2F2F2F/171717"
22+
/>
23+
<source
24+
media="(min-width: 0)"
25+
srcSet="https://placehold.it/300x300/2F2F2F/171717"
26+
/>
27+
<img
28+
alt="Placeholder with grey background and dimension watermark without any imagery"
29+
className="image-0-1-1 image_round-0-1-2"
30+
src="https://placehold.it/300x300/2F2F2F/171717"
31+
/>
32+
</picture>
1133
`;
1234

1335
exports[`image image: 1 1`] = `
@@ -16,7 +38,7 @@ exports[`image image: 1 1`] = `
1638
className="image-0-1-4 image_round-0-1-5"
1739
sizes="100vw"
1840
src="https://placehold.it/300x300/2F2F2F/171717"
19-
srcSet="https://placehold.it/600x600/2F2F2F/171717 2048w, https://placehold.it/600x600/2F2F2F/171717 1778w, https://placehold.it/1600x600/2F2F2F/171717 1399w, https://placehold.it/500x500/2F2F2F/171717 1083w, https://placehold.it/400x400/2F2F2F/171717 767w, https://placehold.it/300x300/2F2F2F/171717 0w"
41+
srcSet="https://placehold.it/600x600/2F2F2F/171717 2048w, https://placehold.it/600x600/2F2F2F/171717 1778w, https://placehold.it/1600x600/2F2F2F/171717 1399w, https://placehold.it/500x500/2F2F2F/171717 1083w, https://placehold.it/400x400/2F2F2F/171717 767w, https://placehold.it/300x300/2F2F2F/171717 1w"
2042
/>
2143
`;
2244

@@ -31,13 +53,35 @@ exports[`image image: 2 1`] = `
3153
`;
3254

3355
exports[`image image: 3 1`] = `
34-
<img
35-
alt="Placeholder with grey background and dimension watermark without any imagery"
36-
className="image-0-1-10"
37-
sizes={null}
38-
src="https://placehold.it/600x600/2F2F2F/171717"
39-
srcSet={null}
40-
/>
56+
<picture
57+
className="picture-0-1-12"
58+
>
59+
<source
60+
media="(min-width: 1400px)"
61+
srcSet="https://placehold.it/600x600/2F2F2F/171717"
62+
/>
63+
<source
64+
media="(min-width: 1084px)"
65+
srcSet="https://placehold.it/600x600/2F2F2F/171717"
66+
/>
67+
<source
68+
media="(min-width: 768px)"
69+
srcSet="https://placehold.it/500x500/2F2F2F/171717"
70+
/>
71+
<source
72+
media="(min-width: 540px)"
73+
srcSet="https://placehold.it/400x400/2F2F2F/171717"
74+
/>
75+
<source
76+
media="(min-width: 0)"
77+
srcSet="https://placehold.it/300x300/2F2F2F/171717"
78+
/>
79+
<img
80+
alt="Placeholder with grey background and dimension watermark without any imagery"
81+
className="image-0-1-10"
82+
src="https://placehold.it/300x300/2F2F2F/171717"
83+
/>
84+
</picture>
4185
`;
4286

4387
exports[`image image: 4 1`] = `
@@ -46,7 +90,7 @@ exports[`image image: 4 1`] = `
4690
className="image-0-1-13"
4791
sizes="100vw"
4892
src="https://placehold.it/539x300/2F2F2F/171717"
49-
srcSet="https://placehold.it/2048x600/2F2F2F/171717 2048w, https://placehold.it/1778x600/2F2F2F/171717 1778w, https://placehold.it/1399x600/2F2F2F/171717 1399w, https://placehold.it/1083x500/2F2F2F/171717 1083w, https://placehold.it/767x400/2F2F2F/171717 767w, https://placehold.it/539x300/2F2F2F/171717 0w"
93+
srcSet="https://placehold.it/2048x600/2F2F2F/171717 2048w, https://placehold.it/1778x600/2F2F2F/171717 1778w, https://placehold.it/1399x600/2F2F2F/171717 1399w, https://placehold.it/1083x500/2F2F2F/171717 1083w, https://placehold.it/767x400/2F2F2F/171717 767w, https://placehold.it/539x300/2F2F2F/171717 1w"
5094
/>
5195
`;
5296

‎packages/fast-components-react-msft/src/image/examples.data.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ export default {
1111
data: [
1212
{
1313
round: true,
14-
src: "https://placehold.it/600x600/2F2F2F/171717",
1514
vp5: "https://placehold.it/600x600/2F2F2F/171717",
1615
vp4: "https://placehold.it/600x600/2F2F2F/171717",
1716
vp3: "https://placehold.it/500x500/2F2F2F/171717",
@@ -23,7 +22,7 @@ export default {
2322
round: true,
2423
src: "https://placehold.it/300x300/2F2F2F/171717",
2524
/* tslint:disable-next-line */
26-
srcSet: "https://placehold.it/600x600/2F2F2F/171717 2048w, https://placehold.it/600x600/2F2F2F/171717 1778w, https://placehold.it/1600x600/2F2F2F/171717 1399w, https://placehold.it/500x500/2F2F2F/171717 1083w, https://placehold.it/400x400/2F2F2F/171717 767w, https://placehold.it/300x300/2F2F2F/171717 0w",
25+
srcSet: "https://placehold.it/600x600/2F2F2F/171717 2048w, https://placehold.it/600x600/2F2F2F/171717 1778w, https://placehold.it/1600x600/2F2F2F/171717 1399w, https://placehold.it/500x500/2F2F2F/171717 1083w, https://placehold.it/400x400/2F2F2F/171717 767w, https://placehold.it/300x300/2F2F2F/171717 1w",
2726
sizes: "100vw",
2827
alt: "Placeholder with grey background and dimension watermark without any imagery"
2928
},
@@ -33,7 +32,6 @@ export default {
3332
alt: "Placeholder with grey background and dimension watermark without any imagery"
3433
},
3534
{
36-
src: "https://placehold.it/600x600/2F2F2F/171717",
3735
vp5: "https://placehold.it/600x600/2F2F2F/171717",
3836
vp4: "https://placehold.it/600x600/2F2F2F/171717",
3937
vp3: "https://placehold.it/500x500/2F2F2F/171717",
@@ -44,7 +42,7 @@ export default {
4442
{
4543
src: "https://placehold.it/539x300/2F2F2F/171717",
4644
/* tslint:disable-next-line */
47-
srcSet: "https://placehold.it/2048x600/2F2F2F/171717 2048w, https://placehold.it/1778x600/2F2F2F/171717 1778w, https://placehold.it/1399x600/2F2F2F/171717 1399w, https://placehold.it/1083x500/2F2F2F/171717 1083w, https://placehold.it/767x400/2F2F2F/171717 767w, https://placehold.it/539x300/2F2F2F/171717 0w",
45+
srcSet: "https://placehold.it/2048x600/2F2F2F/171717 2048w, https://placehold.it/1778x600/2F2F2F/171717 1778w, https://placehold.it/1399x600/2F2F2F/171717 1399w, https://placehold.it/1083x500/2F2F2F/171717 1083w, https://placehold.it/767x400/2F2F2F/171717 767w, https://placehold.it/539x300/2F2F2F/171717 1w",
4846
sizes: "100vw",
4947
alt: "Placeholder with grey background and dimension watermark without any imagery"
5048
},

0 commit comments

Comments
 (0)