Skip to content

Commit d42d77c

Browse files
stomitastomita
authored
Merge pull request #203 from mashmatrix/bondz-patch-1
Set SvgIcon href without __dangerouslySetInnerHtm
2 parents c3e4b4a + 45a2e85 commit d42d77c

File tree

17 files changed

+3725
-5584
lines changed

17 files changed

+3725
-5584
lines changed

‎.storybook/__storyshots__/Button.shot‎

Lines changed: 32 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1157,12 +1157,10 @@ exports[`Button Icon`] = `
11571157
<svg
11581158
aria-hidden={true}
11591159
className="slds-button__icon"
1160-
dangerouslySetInnerHTML={
1161-
Object {
1162-
"__html": "<use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#settings\"></use>",
1163-
}
1164-
}
1165-
style={undefined} />
1160+
style={undefined}>
1161+
<use
1162+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#settings" />
1163+
</svg>
11661164
</button>
11671165
</div>
11681166
</div>
@@ -1696,12 +1694,10 @@ exports[`Button Icon Border`] = `
16961694
<svg
16971695
aria-hidden={true}
16981696
className="slds-button__icon"
1699-
dangerouslySetInnerHTML={
1700-
Object {
1701-
"__html": "<use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#settings\"></use>",
1702-
}
1703-
}
1704-
style={undefined} />
1697+
style={undefined}>
1698+
<use
1699+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#settings" />
1700+
</svg>
17051701
</button>
17061702
</div>
17071703
</div>
@@ -2242,12 +2238,10 @@ exports[`Button Icon Border and Filled`] = `
22422238
<svg
22432239
aria-hidden={true}
22442240
className="slds-button__icon"
2245-
dangerouslySetInnerHTML={
2246-
Object {
2247-
"__html": "<use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#settings\"></use>",
2248-
}
2249-
}
2250-
style={undefined} />
2241+
style={undefined}>
2242+
<use
2243+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#settings" />
2244+
</svg>
22512245
</button>
22522246
</div>
22532247
</div>
@@ -2898,12 +2892,10 @@ exports[`Button Icon Container`] = `
28982892
<svg
28992893
aria-hidden={true}
29002894
className="slds-button__icon"
2901-
dangerouslySetInnerHTML={
2902-
Object {
2903-
"__html": "<use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#settings\"></use>",
2904-
}
2905-
}
2906-
style={undefined} />
2895+
style={undefined}>
2896+
<use
2897+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#settings" />
2898+
</svg>
29072899
</button>
29082900
</div>
29092901
</div>
@@ -3444,12 +3436,10 @@ exports[`Button Icon Inverse`] = `
34443436
<svg
34453437
aria-hidden={true}
34463438
className="slds-button__icon slds-button__icon--inverse"
3447-
dangerouslySetInnerHTML={
3448-
Object {
3449-
"__html": "<use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#close\"></use>",
3450-
}
3451-
}
3452-
style={undefined} />
3439+
style={undefined}>
3440+
<use
3441+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#close" />
3442+
</svg>
34533443
</button>
34543444
</div>
34553445
</div>
@@ -4108,12 +4098,10 @@ exports[`Button Icon Inverse in dark background`] = `
41084098
<svg
41094099
aria-hidden={true}
41104100
className="slds-button__icon slds-button__icon--inverse"
4111-
dangerouslySetInnerHTML={
4112-
Object {
4113-
"__html": "<use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#close\"></use>",
4114-
}
4115-
}
4116-
style={undefined} />
4101+
style={undefined}>
4102+
<use
4103+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#close" />
4104+
</svg>
41174105
</button>
41184106
</div>
41194107
</div>
@@ -9071,12 +9059,10 @@ exports[`Neutral with left icon`] = `
90719059
<svg
90729060
aria-hidden={true}
90739061
className="slds-button__icon slds-button__icon--left"
9074-
dangerouslySetInnerHTML={
9075-
Object {
9076-
"__html": "<use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#download\"></use>",
9077-
}
9078-
}
9079-
style={undefined} />
9062+
style={undefined}>
9063+
<use
9064+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#download" />
9065+
</svg>
90809066
Button Neutral
90819067
</button>
90829068
</div>
@@ -9684,12 +9670,10 @@ exports[`Neutral with right icon`] = `
96849670
<svg
96859671
aria-hidden={true}
96869672
className="slds-button__icon slds-button__icon--right"
9687-
dangerouslySetInnerHTML={
9688-
Object {
9689-
"__html": "<use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#down\"></use>",
9690-
}
9691-
}
9692-
style={undefined} />
9673+
style={undefined}>
9674+
<use
9675+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#down" />
9676+
</svg>
96939677
</button>
96949678
</div>
96959679
</div>

‎.storybook/__storyshots__/ButtonGroup.shot‎

Lines changed: 24 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -78,12 +78,10 @@ exports[`Default`] = `
7878
<svg
7979
aria-hidden={true}
8080
className="slds-button__icon slds-button__icon--left"
81-
dangerouslySetInnerHTML={
82-
Object {
83-
"__html": "<use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#download\"></use>",
84-
}
85-
}
86-
style={undefined} />
81+
style={undefined}>
82+
<use
83+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#download" />
84+
</svg>
8785
Download
8886
</button>
8987
</div>
@@ -1046,12 +1044,10 @@ exports[`Default disalbed`] = `
10461044
<svg
10471045
aria-hidden={true}
10481046
className="slds-button__icon slds-button__icon--left"
1049-
dangerouslySetInnerHTML={
1050-
Object {
1051-
"__html": "<use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#download\"></use>",
1052-
}
1053-
}
1054-
style={undefined} />
1047+
style={undefined}>
1048+
<use
1049+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#download" />
1050+
</svg>
10551051
Download
10561052
</button>
10571053
</div>
@@ -2030,12 +2026,10 @@ exports[`Inverse`] = `
20302026
<svg
20312027
aria-hidden={true}
20322028
className="slds-button__icon slds-button__icon--left slds-button__icon--inverse"
2033-
dangerouslySetInnerHTML={
2034-
Object {
2035-
"__html": "<use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#download\"></use>",
2036-
}
2037-
}
2038-
style={undefined} />
2029+
style={undefined}>
2030+
<use
2031+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#download" />
2032+
</svg>
20392033
Download
20402034
</button>
20412035
<div
@@ -2060,12 +2054,10 @@ exports[`Inverse`] = `
20602054
<svg
20612055
aria-hidden={true}
20622056
className="slds-button__icon slds-button__icon--inverse"
2063-
dangerouslySetInnerHTML={
2064-
Object {
2065-
"__html": "<use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#down\"></use>",
2066-
}
2067-
}
2068-
style={undefined} />
2057+
style={undefined}>
2058+
<use
2059+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#down" />
2060+
</svg>
20692061
</button>
20702062
</div>
20712063
</div>
@@ -3950,12 +3942,10 @@ exports[`More`] = `
39503942
<svg
39513943
aria-hidden={true}
39523944
className="slds-button__icon slds-button__icon--left"
3953-
dangerouslySetInnerHTML={
3954-
Object {
3955-
"__html": "<use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#download\"></use>",
3956-
}
3957-
}
3958-
style={undefined} />
3945+
style={undefined}>
3946+
<use
3947+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#download" />
3948+
</svg>
39593949
Download
39603950
</button>
39613951
<div
@@ -3980,12 +3970,10 @@ exports[`More`] = `
39803970
<svg
39813971
aria-hidden={true}
39823972
className="slds-button__icon"
3983-
dangerouslySetInnerHTML={
3984-
Object {
3985-
"__html": "<use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#down\"></use>",
3986-
}
3987-
}
3988-
style={undefined} />
3973+
style={undefined}>
3974+
<use
3975+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#down" />
3976+
</svg>
39893977
</button>
39903978
</div>
39913979
</div>

‎.storybook/__storyshots__/DateInput.shot‎

Lines changed: 32 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -90,12 +90,10 @@ exports[`Controlled with knobs`] = `
9090
<svg
9191
aria-hidden={true}
9292
className="slds-icon slds-icon-text-default slds-input__icon"
93-
dangerouslySetInnerHTML={
94-
Object {
95-
"__html": "<use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#event\"></use>",
96-
}
97-
}
98-
style={undefined} />
93+
style={undefined}>
94+
<use
95+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#event" />
96+
</svg>
9997
</span>
10098
</div>
10199
</div>
@@ -758,12 +756,10 @@ exports[`Default`] = `
758756
<svg
759757
aria-hidden={true}
760758
className="slds-icon slds-icon-text-default slds-input__icon"
761-
dangerouslySetInnerHTML={
762-
Object {
763-
"__html": "<use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#event\"></use>",
764-
}
765-
}
766-
style={undefined} />
759+
style={undefined}>
760+
<use
761+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#event" />
762+
</svg>
767763
</span>
768764
</div>
769765
</div>
@@ -1454,12 +1450,10 @@ exports[`Disabled`] = `
14541450
<svg
14551451
aria-hidden={true}
14561452
className="slds-icon slds-icon-text-default slds-input__icon"
1457-
dangerouslySetInnerHTML={
1458-
Object {
1459-
"__html": "<use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#event\"></use>",
1460-
}
1461-
}
1462-
style={undefined} />
1453+
style={undefined}>
1454+
<use
1455+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#event" />
1456+
</svg>
14631457
</span>
14641458
</div>
14651459
</div>
@@ -2163,12 +2157,10 @@ exports[`Error`] = `
21632157
<svg
21642158
aria-hidden={true}
21652159
className="slds-icon slds-icon-text-default slds-input__icon"
2166-
dangerouslySetInnerHTML={
2167-
Object {
2168-
"__html": "<use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#event\"></use>",
2169-
}
2170-
}
2171-
style={undefined} />
2160+
style={undefined}>
2161+
<use
2162+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#event" />
2163+
</svg>
21722164
</span>
21732165
</div>
21742166
</div>
@@ -2899,12 +2891,10 @@ exports[`Include time data`] = `
28992891
<svg
29002892
aria-hidden={true}
29012893
className="slds-icon slds-icon-text-default slds-input__icon"
2902-
dangerouslySetInnerHTML={
2903-
Object {
2904-
"__html": "<use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#event\"></use>",
2905-
}
2906-
}
2907-
style={undefined} />
2894+
style={undefined}>
2895+
<use
2896+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#event" />
2897+
</svg>
29082898
</span>
29092899
</div>
29102900
</div>
@@ -3635,12 +3625,10 @@ exports[`Required`] = `
36353625
<svg
36363626
aria-hidden={true}
36373627
className="slds-icon slds-icon-text-default slds-input__icon"
3638-
dangerouslySetInnerHTML={
3639-
Object {
3640-
"__html": "<use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#event\"></use>",
3641-
}
3642-
}
3643-
style={undefined} />
3628+
style={undefined}>
3629+
<use
3630+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#event" />
3631+
</svg>
36443632
</span>
36453633
</div>
36463634
</div>
@@ -4340,12 +4328,10 @@ exports[`With date format`] = `
43404328
<svg
43414329
aria-hidden={true}
43424330
className="slds-icon slds-icon-text-default slds-input__icon"
4343-
dangerouslySetInnerHTML={
4344-
Object {
4345-
"__html": "<use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#event\"></use>",
4346-
}
4347-
}
4348-
style={undefined} />
4331+
style={undefined}>
4332+
<use
4333+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#event" />
4334+
</svg>
43494335
</span>
43504336
</div>
43514337
</div>
@@ -5062,12 +5048,10 @@ exports[`With min/max date`] = `
50625048
<svg
50635049
aria-hidden={true}
50645050
className="slds-icon slds-icon-text-default slds-input__icon"
5065-
dangerouslySetInnerHTML={
5066-
Object {
5067-
"__html": "<use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#event\"></use>",
5068-
}
5069-
}
5070-
style={undefined} />
5051+
style={undefined}>
5052+
<use
5053+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#event" />
5054+
</svg>
50715055
</span>
50725056
</div>
50735057
</div>

0 commit comments

Comments
 (0)