Skip to content

Commit c3bf6b0

Browse files
committed
BREAKING: drop dark prop in favor of color prop in various components
1 parent 160e36d commit c3bf6b0

File tree

6 files changed

+38
-48
lines changed

6 files changed

+38
-48
lines changed

src/components/Button.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ type Props = {
2323
*/
2424
mode?: 'text' | 'outlined' | 'contained',
2525
/**
26-
* Text color of button, a dark button will render light text and vice-versa. Only applicable for `contained` mode.
26+
* Whether the color is a dark color. A dark button will render light text and vice-versa. Only applicable for `contained` mode.
2727
*/
2828
dark?: boolean,
2929
/**

src/components/FAB.js

+15-12
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,6 @@ type Props = {
2727
* Whether FAB is mini-sized, used to create visual continuity with other elements. This has no effect if `label` is specified.
2828
*/
2929
small?: boolean,
30-
/**
31-
* Icon color of button, a dark button will render light text and vice-versa.
32-
*/
33-
dark?: boolean,
3430
/**
3531
* Custom color for the `FAB`.
3632
*/
@@ -72,10 +68,9 @@ class FAB extends React.Component<Props> {
7268
render() {
7369
const {
7470
small,
75-
dark,
7671
icon,
7772
label,
78-
color: iconColor,
73+
color: customColor,
7974
onPress,
8075
theme,
8176
style,
@@ -84,10 +79,18 @@ class FAB extends React.Component<Props> {
8479

8580
const { backgroundColor = theme.colors.accent } =
8681
StyleSheet.flatten(style) || {};
87-
const isDark =
88-
typeof dark === 'boolean' ? dark : !color(backgroundColor).light();
89-
const textColor = iconColor || (isDark ? white : 'rgba(0, 0, 0, .54)');
90-
const rippleColor = color(textColor)
82+
83+
let foregroundColor;
84+
85+
if (typeof customColor !== 'undefined') {
86+
foregroundColor = customColor;
87+
} else {
88+
foregroundColor = !color(backgroundColor).light()
89+
? white
90+
: 'rgba(0, 0, 0, .54)';
91+
}
92+
93+
const rippleColor = color(foregroundColor)
9194
.alpha(0.32)
9295
.rgb()
9396
.string();
@@ -110,12 +113,12 @@ class FAB extends React.Component<Props> {
110113
]}
111114
pointerEvents="none"
112115
>
113-
<CrossFadeIcon source={icon} size={24} color={textColor} />
116+
<CrossFadeIcon source={icon} size={24} color={foregroundColor} />
114117
{label ? (
115118
<Text
116119
style={[
117120
styles.label,
118-
{ color: textColor, fontFamily: theme.fonts.medium },
121+
{ color: foregroundColor, fontFamily: theme.fonts.medium },
119122
]}
120123
>
121124
{label.toUpperCase()}

src/components/Toolbar/Toolbar.js

+10-9
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,14 @@ import {
1010
} from 'react-native';
1111
import color from 'color';
1212

13-
import withTheme from '../../core/withTheme';
1413
import ToolbarContent from './ToolbarContent';
15-
14+
import withTheme from '../../core/withTheme';
15+
import { black, white } from '../../styles/colors';
1616
import type { Theme } from '../../types';
1717

1818
type Props = {
1919
/**
20-
* Theme color for the toolbar, a dark toolbar will render light text and vice-versa
21-
* Child elements can override this prop independently.
20+
* Whether the background color is a dark color. A dark toolbar will render light text and vice-versa.
2221
*/
2322
dark?: boolean,
2423
/**
@@ -173,11 +172,13 @@ class Toolbar extends React.Component<Props> {
173172
>
174173
<View style={[{ height, marginTop: statusBarHeight }, styles.wrapper]}>
175174
{childrenArray.filter(Boolean).map((child: any, i) => {
176-
const props: { dark: ?boolean, style?: any } = {
177-
dark:
178-
typeof child.props.dark === 'undefined'
179-
? isDark
180-
: child.props.dark,
175+
const props: { color: ?string, style?: any } = {
176+
color:
177+
typeof child.props.color !== 'undefined'
178+
? child.props.color
179+
: isDark
180+
? white
181+
: black,
181182
};
182183

183184
if (child.type === ToolbarContent) {

src/components/Toolbar/ToolbarAction.js

+8-17
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,11 @@
33
import * as React from 'react';
44
import color from 'color';
55

6-
import { black, white } from '../../styles/colors';
6+
import { black } from '../../styles/colors';
77
import TouchableIcon from '../TouchableIcon';
88
import type { IconSource } from '../Icon';
99

1010
type Props = {
11-
/**
12-
* A dark action icon will render a light icon and vice-versa.
13-
*/
14-
dark?: boolean,
1511
/**
1612
* Custom color for action icon.
1713
*/
@@ -40,20 +36,15 @@ export default class ToolbarAction extends React.Component<Props> {
4036
};
4137

4238
render() {
43-
const { color: customColor, dark, icon, onPress, ...rest } = this.props;
44-
45-
let iconColor;
46-
47-
if (customColor) {
48-
iconColor = customColor;
49-
} else if (dark) {
50-
iconColor = white;
51-
} else {
52-
iconColor = color(black)
39+
const {
40+
color: iconColor = color(black)
5341
.alpha(0.54)
5442
.rgb()
55-
.string();
56-
}
43+
.string(),
44+
icon,
45+
onPress,
46+
...rest
47+
} = this.props;
5748

5849
return (
5950
<TouchableIcon

src/components/Toolbar/ToolbarBackAction.js

-4
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,6 @@ import ToolbarAction from './ToolbarAction';
77
import Icon from '../Icon';
88

99
type Props = {
10-
/**
11-
* A dark action icon will render a light icon and vice-versa.
12-
*/
13-
dark?: boolean,
1410
/**
1511
* Custom color for back icon.
1612
*/

src/components/Toolbar/ToolbarContent.js

+4-5
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@ import color from 'color';
77
import Text from '../Typography/Text';
88

99
import withTheme from '../../core/withTheme';
10-
import { white, black } from '../../styles/colors';
10+
import { black } from '../../styles/colors';
1111

1212
import type { Theme } from '../../types';
1313

1414
type Props = {
1515
/**
16-
* Theme color for the text, a dark toolbar will render light text and vice-versa.
16+
* CUstom color for the text.
1717
*/
18-
dark?: boolean,
18+
color?: string,
1919
/**
2020
* Text for the title.
2121
*/
@@ -45,7 +45,7 @@ type Props = {
4545
class ToolbarContent extends React.Component<Props> {
4646
render() {
4747
const {
48-
dark,
48+
color: titleColor = black,
4949
subtitle,
5050
subtitleStyle,
5151
style,
@@ -55,7 +55,6 @@ class ToolbarContent extends React.Component<Props> {
5555
} = this.props;
5656
const { fonts } = theme;
5757

58-
const titleColor = dark ? white : black;
5958
const subtitleColor = color(titleColor)
6059
.alpha(0.7)
6160
.rgb()

0 commit comments

Comments
 (0)