Skip to content

Commit a6b2707

Browse files
ethansharethanshar
committed
Separate icon color passed in Button from icon style (#3180)
* Separate icon color passed in Button from icon style * Update snapshot tests * Add more examples and tests for icon color in Button
1 parent 20ee507 commit a6b2707

File tree

5 files changed

+255
-48
lines changed

5 files changed

+255
-48
lines changed

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2770,9 +2770,7 @@ exports[`TextField Screen renders screen 1`] = `
27702770
"tintColor": "#5A48F5",
27712771
},
27722772
[
2773-
{
2774-
"tintColor": "#5A48F5",
2775-
},
2773+
{},
27762774
{
27772775
"tintColor": "#A6ACB1",
27782776
},
@@ -3439,9 +3437,7 @@ exports[`TextField Screen renders screen 1`] = `
34393437
"tintColor": "#20303C",
34403438
},
34413439
[
3442-
{
3443-
"tintColor": "#20303C",
3444-
},
3440+
{},
34453441
undefined,
34463442
],
34473443
]

‎demo/src/screens/componentScreens/ButtonsScreen.tsx

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,10 @@ export default class ButtonsScreen extends Component {
215215
</View>
216216

217217
<Button style={{marginBottom: ButtonSpace}} size={Button.sizes.small} iconSource={plusIcon} label="Icon"/>
218+
219+
<Button marginB-s5 iconSource={plusIcon} iconProps={{tintColor: 'red'}} label="Custom icon color"/>
220+
221+
<Button marginB-s5 iconSource={plusIcon} iconStyle={{tintColor: 'pink'}} label="Custom icon style"/>
218222

219223
<Button style={{marginBottom: ButtonSpace}} outline iconSource={plusIcon} label="Icon"/>
220224

@@ -234,15 +238,16 @@ export default class ButtonsScreen extends Component {
234238
style={{marginBottom: ButtonSpace}}
235239
iconSource={iconStyle => (
236240
<View
237-
style={{
238-
width: 20,
239-
height: 20,
240-
// @ts-expect-error
241-
backgroundColor: iconStyle[0]?.tintColor,
242-
borderRadius: 10,
243-
// @ts-expect-error
244-
marginRight: iconStyle[0]?.marginRight
245-
}}
241+
style={[
242+
iconStyle,
243+
{
244+
width: 20,
245+
height: 20,
246+
// @ts-expect-error
247+
backgroundColor: iconStyle[0]?.tintColor,
248+
borderRadius: 10
249+
}
250+
]}
246251
/>
247252
)}
248253
/>

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

Lines changed: 214 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1133,7 +1133,6 @@ exports[`Button container size should have no padding of button is an icon butto
11331133
[
11341134
{
11351135
"marginRight": 8,
1136-
"tintColor": "#FFFFFF",
11371136
},
11381137
undefined,
11391138
],
@@ -2257,9 +2256,7 @@ exports[`Button icon should apply color on icon 1`] = `
22572256
"tintColor": "green",
22582257
},
22592258
[
2260-
{
2261-
"tintColor": "green",
2262-
},
2259+
{},
22632260
undefined,
22642261
],
22652262
]
@@ -2327,9 +2324,7 @@ exports[`Button icon should apply color on icon 2`] = `
23272324
"tintColor": "#FC3D2F",
23282325
},
23292326
[
2330-
{
2331-
"tintColor": "#FC3D2F",
2332-
},
2327+
{},
23332328
undefined,
23342329
],
23352330
]
@@ -2339,7 +2334,75 @@ exports[`Button icon should apply color on icon 2`] = `
23392334
</View>
23402335
`;
23412336

2342-
exports[`Button icon should include custom iconStyle provided as a prop 1`] = `
2337+
exports[`Button icon should apply the right icon color 1`] = `
2338+
<View
2339+
accessibilityRole="button"
2340+
accessibilityState={
2341+
{
2342+
"busy": undefined,
2343+
"checked": undefined,
2344+
"disabled": undefined,
2345+
"expanded": undefined,
2346+
"selected": undefined,
2347+
}
2348+
}
2349+
accessibilityValue={
2350+
{
2351+
"max": undefined,
2352+
"min": undefined,
2353+
"now": undefined,
2354+
"text": undefined,
2355+
}
2356+
}
2357+
accessible={true}
2358+
collapsable={false}
2359+
focusable={true}
2360+
onClick={[Function]}
2361+
onLayout={[Function]}
2362+
onResponderGrant={[Function]}
2363+
onResponderMove={[Function]}
2364+
onResponderRelease={[Function]}
2365+
onResponderTerminate={[Function]}
2366+
onResponderTerminationRequest={[Function]}
2367+
onStartShouldSetResponder={[Function]}
2368+
style={
2369+
{
2370+
"alignItems": "center",
2371+
"backgroundColor": "#5A48F5",
2372+
"borderRadius": 999,
2373+
"flexDirection": "row",
2374+
"justifyContent": "center",
2375+
"minWidth": undefined,
2376+
"opacity": 1,
2377+
"paddingHorizontal": undefined,
2378+
"paddingVertical": undefined,
2379+
}
2380+
}
2381+
>
2382+
<Image
2383+
accessibilityRole="image"
2384+
accessible={false}
2385+
source={12}
2386+
style={
2387+
[
2388+
undefined,
2389+
undefined,
2390+
undefined,
2391+
{
2392+
"tintColor": "red",
2393+
},
2394+
[
2395+
{},
2396+
undefined,
2397+
],
2398+
]
2399+
}
2400+
testID="undefined.icon"
2401+
/>
2402+
</View>
2403+
`;
2404+
2405+
exports[`Button icon should apply the right icon color 2`] = `
23432406
<View
23442407
accessibilityRole="button"
23452408
accessibilityState={
@@ -2397,9 +2460,147 @@ exports[`Button icon should include custom iconStyle provided as a prop 1`] = `
23972460
"tintColor": "#FFFFFF",
23982461
},
23992462
[
2463+
{},
2464+
{
2465+
"tintColor": "#ffee22",
2466+
},
2467+
],
2468+
]
2469+
}
2470+
testID="undefined.icon"
2471+
/>
2472+
</View>
2473+
`;
2474+
2475+
exports[`Button icon should apply the right icon color 3`] = `
2476+
<View
2477+
accessibilityRole="button"
2478+
accessibilityState={
2479+
{
2480+
"busy": undefined,
2481+
"checked": undefined,
2482+
"disabled": undefined,
2483+
"expanded": undefined,
2484+
"selected": undefined,
2485+
}
2486+
}
2487+
accessibilityValue={
2488+
{
2489+
"max": undefined,
2490+
"min": undefined,
2491+
"now": undefined,
2492+
"text": undefined,
2493+
}
2494+
}
2495+
accessible={true}
2496+
collapsable={false}
2497+
focusable={true}
2498+
onClick={[Function]}
2499+
onLayout={[Function]}
2500+
onResponderGrant={[Function]}
2501+
onResponderMove={[Function]}
2502+
onResponderRelease={[Function]}
2503+
onResponderTerminate={[Function]}
2504+
onResponderTerminationRequest={[Function]}
2505+
onStartShouldSetResponder={[Function]}
2506+
style={
2507+
{
2508+
"alignItems": "center",
2509+
"backgroundColor": "#5A48F5",
2510+
"borderRadius": 999,
2511+
"flexDirection": "row",
2512+
"justifyContent": "center",
2513+
"minWidth": undefined,
2514+
"opacity": 1,
2515+
"paddingHorizontal": undefined,
2516+
"paddingVertical": undefined,
2517+
}
2518+
}
2519+
>
2520+
<Image
2521+
accessibilityRole="image"
2522+
accessible={false}
2523+
source={12}
2524+
style={
2525+
[
2526+
undefined,
2527+
undefined,
2528+
undefined,
2529+
{
2530+
"tintColor": "red",
2531+
},
2532+
[
2533+
{},
24002534
{
2401-
"tintColor": "#FFFFFF",
2535+
"tintColor": "#ffee22",
24022536
},
2537+
],
2538+
]
2539+
}
2540+
testID="undefined.icon"
2541+
/>
2542+
</View>
2543+
`;
2544+
2545+
exports[`Button icon should include custom iconStyle provided as a prop 1`] = `
2546+
<View
2547+
accessibilityRole="button"
2548+
accessibilityState={
2549+
{
2550+
"busy": undefined,
2551+
"checked": undefined,
2552+
"disabled": undefined,
2553+
"expanded": undefined,
2554+
"selected": undefined,
2555+
}
2556+
}
2557+
accessibilityValue={
2558+
{
2559+
"max": undefined,
2560+
"min": undefined,
2561+
"now": undefined,
2562+
"text": undefined,
2563+
}
2564+
}
2565+
accessible={true}
2566+
collapsable={false}
2567+
focusable={true}
2568+
onClick={[Function]}
2569+
onLayout={[Function]}
2570+
onResponderGrant={[Function]}
2571+
onResponderMove={[Function]}
2572+
onResponderRelease={[Function]}
2573+
onResponderTerminate={[Function]}
2574+
onResponderTerminationRequest={[Function]}
2575+
onStartShouldSetResponder={[Function]}
2576+
style={
2577+
{
2578+
"alignItems": "center",
2579+
"backgroundColor": "#5A48F5",
2580+
"borderRadius": 999,
2581+
"flexDirection": "row",
2582+
"justifyContent": "center",
2583+
"minWidth": undefined,
2584+
"opacity": 1,
2585+
"paddingHorizontal": undefined,
2586+
"paddingVertical": undefined,
2587+
}
2588+
}
2589+
>
2590+
<Image
2591+
accessibilityRole="image"
2592+
accessible={false}
2593+
source={12}
2594+
style={
2595+
[
2596+
undefined,
2597+
undefined,
2598+
undefined,
2599+
{
2600+
"tintColor": "#FFFFFF",
2601+
},
2602+
[
2603+
{},
24032604
{
24042605
"marginRight": 9,
24052606
"tintColor": "red",
@@ -2472,9 +2673,7 @@ exports[`Button icon should return icon style according to different variations
24722673
"tintColor": "#5A48F5",
24732674
},
24742675
[
2475-
{
2476-
"tintColor": "#5A48F5",
2477-
},
2676+
{},
24782677
undefined,
24792678
],
24802679
]
@@ -2542,9 +2741,7 @@ exports[`Button icon should return icon style according to different variations
25422741
"tintColor": "#5A48F5",
25432742
},
25442743
[
2545-
{
2546-
"tintColor": "#5A48F5",
2547-
},
2744+
{},
25482745
undefined,
25492746
],
25502747
]
@@ -2612,9 +2809,7 @@ exports[`Button icon should return icon style according to different variations
26122809
"tintColor": "#FFFFFF",
26132810
},
26142811
[
2615-
{
2616-
"tintColor": "#FFFFFF",
2617-
},
2812+
{},
26182813
undefined,
26192814
],
26202815
]
@@ -3856,9 +4051,7 @@ exports[`Button labelColor should return undefined color if this is an icon butt
38564051
"tintColor": "#FFFFFF",
38574052
},
38584053
[
3859-
{
3860-
"tintColor": "#FFFFFF",
3861-
},
4054+
{},
38624055
undefined,
38634056
],
38644057
]

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -253,6 +253,14 @@ describe('Button', () => {
253253
it('should include custom iconStyle provided as a prop', () => {
254254
expect(renderer.create(<Button iconSource={12} iconStyle={{marginRight: 9, tintColor: 'red'}}/>).toJSON()).toMatchSnapshot();
255255
});
256+
257+
it('should apply the right icon color', () => {
258+
expect(renderer.create(<Button iconSource={12} iconProps={{tintColor: 'red'}}/>).toJSON()).toMatchSnapshot();
259+
expect(renderer.create(<Button iconSource={12} iconStyle={{tintColor: '#ffee22'}}/>).toJSON()).toMatchSnapshot();
260+
expect(renderer
261+
.create(<Button iconSource={12} iconProps={{tintColor: 'red'}} iconStyle={{tintColor: '#ffee22'}}/>)
262+
.toJSON()).toMatchSnapshot();
263+
});
256264
});
257265
});
258266

0 commit comments

Comments
 (0)