Skip to content

Commit 243d328

Browse files
ethansharadids1221
ethanshar
and
adids1221
authored
Fix/button icon (#3158)
* Always use Icon component in Button and fix its tintColor * Add a note * Add missing accessibility props to icon and fix snapshot tests --------- Co-authored-by: adids1221 <[email protected]>
1 parent 94ced3f commit 243d328

File tree

4 files changed

+86
-146
lines changed

4 files changed

+86
-146
lines changed

‎demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap

Lines changed: 18 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1899,6 +1899,8 @@ exports[`TextField Screen renders screen 1`] = `
18991899
}
19001900
>
19011901
<Image
1902+
accessibilityRole="image"
1903+
accessible={false}
19021904
source={
19031905
{
19041906
"testUri": "../../../demo/src/assets/icons/info.png",
@@ -2754,25 +2756,13 @@ exports[`TextField Screen renders screen 1`] = `
27542756
<Image
27552757
accessibilityRole="image"
27562758
accessible={false}
2757-
assetGroup="icons"
2758-
onError={[Function]}
27592759
source={
27602760
{
27612761
"testUri": "../../../src/assets/icons/xFlat.png",
27622762
}
27632763
}
27642764
style={
27652765
[
2766-
undefined,
2767-
undefined,
2768-
undefined,
2769-
undefined,
2770-
undefined,
2771-
undefined,
2772-
undefined,
2773-
undefined,
2774-
undefined,
2775-
false,
27762766
[
27772767
{
27782768
"tintColor": "#5A48F5",
@@ -2781,14 +2771,21 @@ exports[`TextField Screen renders screen 1`] = `
27812771
"tintColor": "#A6ACB1",
27822772
},
27832773
],
2784-
false,
2774+
undefined,
2775+
undefined,
2776+
undefined,
2777+
{
2778+
"tintColor": "#5A48F5",
2779+
},
27852780
]
27862781
}
27872782
testID="undefined.clearButton.icon"
27882783
/>
27892784
</View>
27902785
</View>
27912786
<Image
2787+
accessibilityRole="image"
2788+
accessible={false}
27922789
source={
27932790
{
27942791
"testUri": "../../../demo/src/assets/icons/search.png",
@@ -3428,32 +3425,25 @@ exports[`TextField Screen renders screen 1`] = `
34283425
<Image
34293426
accessibilityRole="image"
34303427
accessible={false}
3431-
assetGroup="icons"
3432-
onError={[Function]}
34333428
source={
34343429
{
34353430
"testUri": "../../../demo/src/assets/icons/search.png",
34363431
}
34373432
}
34383433
style={
34393434
[
3440-
undefined,
3441-
undefined,
3442-
undefined,
3443-
undefined,
3444-
undefined,
3445-
undefined,
3446-
undefined,
3447-
undefined,
3448-
undefined,
3449-
false,
34503435
[
34513436
{
34523437
"tintColor": "#20303C",
34533438
},
34543439
undefined,
34553440
],
3456-
false,
3441+
undefined,
3442+
undefined,
3443+
undefined,
3444+
{
3445+
"tintColor": "#20303C",
3446+
},
34573447
]
34583448
}
34593449
testID="undefined.icon"
@@ -5399,6 +5389,8 @@ exports[`TextField Screen renders screen 1`] = `
53995389
}
54005390
>
54015391
<Image
5392+
accessibilityRole="image"
5393+
accessible={false}
54025394
marginL-s1={true}
54035395
source={
54045396
{

‎src/components/button/__tests__/__snapshots__/index.spec.js.snap

Lines changed: 48 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1121,29 +1121,22 @@ exports[`Button container size should have no padding of button is an icon butto
11211121
<Image
11221122
accessibilityRole="image"
11231123
accessible={false}
1124-
assetGroup="icons"
1125-
onError={[Function]}
11261124
source={14}
11271125
style={
11281126
[
1129-
undefined,
1130-
undefined,
1131-
undefined,
1132-
undefined,
1133-
undefined,
1134-
undefined,
1135-
undefined,
1136-
undefined,
1137-
undefined,
1138-
false,
11391127
[
11401128
{
11411129
"marginRight": 8,
11421130
"tintColor": "#FFFFFF",
11431131
},
11441132
undefined,
11451133
],
1146-
false,
1134+
undefined,
1135+
undefined,
1136+
undefined,
1137+
{
1138+
"tintColor": "#FFFFFF",
1139+
},
11471140
]
11481141
}
11491142
testID="undefined.icon"
@@ -2254,28 +2247,21 @@ exports[`Button icon should apply color on icon 1`] = `
22542247
<Image
22552248
accessibilityRole="image"
22562249
accessible={false}
2257-
assetGroup="icons"
2258-
onError={[Function]}
22592250
source={12}
22602251
style={
22612252
[
2262-
undefined,
2263-
undefined,
2264-
undefined,
2265-
undefined,
2266-
undefined,
2267-
undefined,
2268-
undefined,
2269-
undefined,
2270-
undefined,
2271-
false,
22722253
[
22732254
{
22742255
"tintColor": "green",
22752256
},
22762257
undefined,
22772258
],
2278-
false,
2259+
undefined,
2260+
undefined,
2261+
undefined,
2262+
{
2263+
"tintColor": "green",
2264+
},
22792265
]
22802266
}
22812267
testID="undefined.icon"
@@ -2331,28 +2317,21 @@ exports[`Button icon should apply color on icon 2`] = `
23312317
<Image
23322318
accessibilityRole="image"
23332319
accessible={false}
2334-
assetGroup="icons"
2335-
onError={[Function]}
23362320
source={12}
23372321
style={
23382322
[
2339-
undefined,
2340-
undefined,
2341-
undefined,
2342-
undefined,
2343-
undefined,
2344-
undefined,
2345-
undefined,
2346-
undefined,
2347-
undefined,
2348-
false,
23492323
[
23502324
{
23512325
"tintColor": "#FC3D2F",
23522326
},
23532327
undefined,
23542328
],
2355-
false,
2329+
undefined,
2330+
undefined,
2331+
undefined,
2332+
{
2333+
"tintColor": "#FC3D2F",
2334+
},
23562335
]
23572336
}
23582337
testID="undefined.icon"
@@ -2408,21 +2387,9 @@ exports[`Button icon should include custom iconStyle provided as a prop 1`] = `
24082387
<Image
24092388
accessibilityRole="image"
24102389
accessible={false}
2411-
assetGroup="icons"
2412-
onError={[Function]}
24132390
source={12}
24142391
style={
24152392
[
2416-
undefined,
2417-
undefined,
2418-
undefined,
2419-
undefined,
2420-
undefined,
2421-
undefined,
2422-
undefined,
2423-
undefined,
2424-
undefined,
2425-
false,
24262393
[
24272394
{
24282395
"tintColor": "#FFFFFF",
@@ -2432,7 +2399,12 @@ exports[`Button icon should include custom iconStyle provided as a prop 1`] = `
24322399
"tintColor": "red",
24332400
},
24342401
],
2435-
false,
2402+
undefined,
2403+
undefined,
2404+
undefined,
2405+
{
2406+
"tintColor": "#FFFFFF",
2407+
},
24362408
]
24372409
}
24382410
testID="undefined.icon"
@@ -2490,28 +2462,21 @@ exports[`Button icon should return icon style according to different variations
24902462
<Image
24912463
accessibilityRole="image"
24922464
accessible={false}
2493-
assetGroup="icons"
2494-
onError={[Function]}
24952465
source={12}
24962466
style={
24972467
[
2498-
undefined,
2499-
undefined,
2500-
undefined,
2501-
undefined,
2502-
undefined,
2503-
undefined,
2504-
undefined,
2505-
undefined,
2506-
undefined,
2507-
false,
25082468
[
25092469
{
25102470
"tintColor": "#5A48F5",
25112471
},
25122472
undefined,
25132473
],
2514-
false,
2474+
undefined,
2475+
undefined,
2476+
undefined,
2477+
{
2478+
"tintColor": "#5A48F5",
2479+
},
25152480
]
25162481
}
25172482
testID="undefined.icon"
@@ -2567,28 +2532,21 @@ exports[`Button icon should return icon style according to different variations
25672532
<Image
25682533
accessibilityRole="image"
25692534
accessible={false}
2570-
assetGroup="icons"
2571-
onError={[Function]}
25722535
source={12}
25732536
style={
25742537
[
2575-
undefined,
2576-
undefined,
2577-
undefined,
2578-
undefined,
2579-
undefined,
2580-
undefined,
2581-
undefined,
2582-
undefined,
2583-
undefined,
2584-
false,
25852538
[
25862539
{
25872540
"tintColor": "#5A48F5",
25882541
},
25892542
undefined,
25902543
],
2591-
false,
2544+
undefined,
2545+
undefined,
2546+
undefined,
2547+
{
2548+
"tintColor": "#5A48F5",
2549+
},
25922550
]
25932551
}
25942552
testID="undefined.icon"
@@ -2644,28 +2602,21 @@ exports[`Button icon should return icon style according to different variations
26442602
<Image
26452603
accessibilityRole="image"
26462604
accessible={false}
2647-
assetGroup="icons"
2648-
onError={[Function]}
26492605
source={12}
26502606
style={
26512607
[
2652-
undefined,
2653-
undefined,
2654-
undefined,
2655-
undefined,
2656-
undefined,
2657-
undefined,
2658-
undefined,
2659-
undefined,
2660-
undefined,
2661-
false,
26622608
[
26632609
{
26642610
"tintColor": "#FFFFFF",
26652611
},
26662612
undefined,
26672613
],
2668-
false,
2614+
undefined,
2615+
undefined,
2616+
undefined,
2617+
{
2618+
"tintColor": "#FFFFFF",
2619+
},
26692620
]
26702621
}
26712622
testID="undefined.icon"
@@ -3895,28 +3846,21 @@ exports[`Button labelColor should return undefined color if this is an icon butt
38953846
<Image
38963847
accessibilityRole="image"
38973848
accessible={false}
3898-
assetGroup="icons"
3899-
onError={[Function]}
39003849
source={12}
39013850
style={
39023851
[
3903-
undefined,
3904-
undefined,
3905-
undefined,
3906-
undefined,
3907-
undefined,
3908-
undefined,
3909-
undefined,
3910-
undefined,
3911-
undefined,
3912-
false,
39133852
[
39143853
{
39153854
"tintColor": "#FFFFFF",
39163855
},
39173856
undefined,
39183857
],
3919-
false,
3858+
undefined,
3859+
undefined,
3860+
undefined,
3861+
{
3862+
"tintColor": "#FFFFFF",
3863+
},
39203864
]
39213865
}
39223866
testID="undefined.icon"

0 commit comments

Comments
 (0)