Skip to content

Commit 55acba9

Browse files
lidord-wixlidord-wix
authored
Infra/ migrate Pickers to design tokens (#1942)
1 parent f3baa5d commit 55acba9

File tree

14 files changed

+42
-42
lines changed

14 files changed

+42
-42
lines changed

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ interface State {
1212
paletteChange: boolean
1313
}
1414

15-
const INITIAL_COLOR = Colors.blue30;
15+
const INITIAL_COLOR = Colors.$backgroundPrimaryHeavy;
1616
const colors = [
1717
'#20303C', '#43515C', '#66737C', '#858F96', '#A3ABB0', '#C2C7CB', '#E0E3E5', '#F2F4F5',
1818
'#3182C8', '#4196E0', '#459FED', '#57a8ef', '#8fc5f4', '#b5d9f8', '#daecfb', '#ecf5fd',
@@ -28,7 +28,7 @@ const colors = [
2828
export default class ColorPickerScreen extends Component<Props, State> {
2929
state: State = {
3030
color: INITIAL_COLOR,
31-
textColor: Colors.white,
31+
textColor: Colors.$textDefaultLight,
3232
customColors: [],
3333
paletteChange: false
3434
};
@@ -63,17 +63,17 @@ export default class ColorPickerScreen extends Component<Props, State> {
6363

6464
return (
6565
<ScrollView style={styles.container} contentContainerStyle={{paddingBottom: 20}}>
66-
<View center bg-white marginV-10>
66+
<View center bg-$backgroundDefault marginV-10>
6767
<Text text60 margin-10 style={{color}}>
6868
Selected Color: {color}
6969
</Text>
70-
<View center marginB-10 style={{height: 50, width: 200, backgroundColor: color}}>
70+
<View center marginB-10 style={{height: 50, width: 200, backgroundColor: color}} >
7171
<Text text60 style={{color: textColor}}>
7272
{color}
7373
</Text>
7474
</View>
7575
</View>
76-
<View bg-white>
76+
<View bg-$backgroundDefault>
7777
<Text text60 marginL-20 marginB-4 marginT-24>
7878
Theme Color
7979
</Text>
@@ -93,7 +93,7 @@ export default class ColorPickerScreen extends Component<Props, State> {
9393
/>
9494
</View>
9595

96-
<View marginV-10 bg-white>
96+
<View marginV-10 bg-$backgroundDefault>
9797
<Text center text60 marginT-10>
9898
Color Name
9999
</Text>
@@ -117,6 +117,6 @@ export default class ColorPickerScreen extends Component<Props, State> {
117117
const styles = StyleSheet.create({
118118
container: {
119119
flex: 1,
120-
backgroundColor: Colors.grey80
120+
backgroundColor: Colors.$backgroundNeutralLight
121121
}
122122
});

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {Component} from 'react';
22
import {ScrollView} from 'react-native';
3-
import {DateTimePicker, Text, TouchableOpacity, Colors} from 'react-native-ui-lib'; // eslint-disable-line
3+
import {DateTimePicker, Text, TouchableOpacity} from 'react-native-ui-lib'; // eslint-disable-line
44

55
export default class DateTimePickerScreen extends Component {
66
getCustomInputValue = (value: string) => {
@@ -22,7 +22,7 @@ export default class DateTimePickerScreen extends Component {
2222
}}
2323
>
2424
<Text>Valid from</Text>
25-
<Text absR color={Colors.primary} text80BO>
25+
<Text absR $textPrimary text80BO>
2626
{this.getCustomInputValue(value)}
2727
</Text>
2828
</TouchableOpacity>

‎demo/src/screens/incubatorScreens/WheelPickerScreen.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@ export default () => {
5353
<Text h3>Months</Text>
5454
<Incubator.WheelPicker
5555
initialValue={'February'}
56-
activeTextColor={Colors.primary}
57-
inactiveTextColor={Colors.grey20}
56+
activeTextColor={Colors.$textPrimary}
57+
inactiveTextColor={Colors.$textNeutralHeavy}
5858
items={monthItems}
5959
textStyle={Typography.text60R}
6060
numberOfVisibleRows={3}
@@ -76,7 +76,7 @@ export default () => {
7676
<Text body>
7777
Move the wheel programmatically
7878
</Text>
79-
<Text bodySmall grey30>
79+
<Text bodySmall $textNeutral>
8080
(by updating the initialValue prop)
8181
</Text>
8282
<View marginT-10 row>

‎src/components/colorPalette/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -367,8 +367,8 @@ class ColorPalette extends PureComponent<Props, State> {
367367
</Carousel>
368368
<PageControl
369369
size={6}
370-
color={Colors.grey10}
371-
inactiveColor={Colors.grey50}
370+
color={Colors.$backgroundInverted}
371+
inactiveColor={Colors.$backgroundDisabled}
372372
spacing={8}
373373
numOfPages={colorGroups.length}
374374
currentPage={currentPage}
@@ -393,11 +393,11 @@ const styles = StyleSheet.create({
393393
},
394394
paginationContainer: {
395395
flex: 1,
396-
backgroundColor: Colors.white,
396+
backgroundColor: Colors.$backgroundDefault,
397397
paddingBottom: VERTICAL_PADDING
398398
},
399399
scrollContainer: {
400-
backgroundColor: Colors.white
400+
backgroundColor: Colors.$backgroundDefault
401401
},
402402
page: {
403403
flexWrap: 'wrap'

‎src/components/colorPicker/ColorPickerDialog.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ class ColorPickerDialog extends PureComponent<Props, State> {
7272
static displayName = 'ColorPicker';
7373

7474
static defaultProps = {
75-
initialColor: Colors.grey80
75+
initialColor: Colors.$backgroundNeutralLight
7676
};
7777

7878
constructor(props: Props) {
@@ -229,7 +229,7 @@ class ColorPickerDialog extends PureComponent<Props, State> {
229229
<Button
230230
link
231231
iconSource={Assets.icons.x}
232-
iconStyle={{tintColor: Colors.grey10}}
232+
iconStyle={{tintColor: Colors.$iconDefault}}
233233
onPress={this.onDismiss}
234234
accessibilityLabel={_.get(accessibilityLabels, 'dismissButton')}
235235
/>
@@ -247,7 +247,7 @@ class ColorPickerDialog extends PureComponent<Props, State> {
247247

248248
renderSliders() {
249249
const {keyboardHeight, color} = this.state;
250-
const colorValue = color.a === 0 ? Colors.black : Colors.getHexString(color);
250+
const colorValue = color.a === 0 ? Colors.$backgroundInverted : Colors.getHexString(color);
251251

252252
return (
253253
<ColorSliderGroup

‎src/components/colorPicker/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -104,8 +104,8 @@ class ColorPicker extends PureComponent<Props> {
104104
/>
105105
<View style={styles.buttonContainer}>
106106
<Button
107-
color={Colors.grey10}
108-
outlineColor={Colors.grey10}
107+
color={Colors.$textDefault}
108+
outlineColor={Colors.$textDefault}
109109
style={styles.button}
110110
round
111111
outline
@@ -156,7 +156,7 @@ const styles = StyleSheet.create({
156156
alignItems: 'flex-end',
157157
justifyContent: 'center',
158158
paddingTop: 1,
159-
backgroundColor: Colors.white
159+
backgroundColor: Colors.$backgroundDefault
160160
},
161161
button: {
162162
width: SWATCH_SIZE,

‎src/components/dateTimePicker/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -236,11 +236,11 @@ class DateTimePicker extends Component<DateTimePickerPropsInternal, DateTimePick
236236
const {headerStyle, useCustomTheme} = this.props;
237237

238238
return (
239-
<View row spread bg-white paddingH-20 style={[styles.header, headerStyle]}>
239+
<View row spread bg-$backgroundDefault paddingH-20 style={[styles.header, headerStyle]}>
240240
<Button
241241
link
242242
iconSource={Assets.icons.x}
243-
iconStyle={{tintColor: Colors.grey10}}
243+
iconStyle={{tintColor: Colors.$iconDefault}}
244244
onPress={this.toggleExpandableOverlay}
245245
/>
246246
<Button link iconSource={Assets.icons.check} useCustomTheme={useCustomTheme} onPress={this.onDonePressed}/>
@@ -306,10 +306,10 @@ const styles = StyleSheet.create({
306306
header: {
307307
height: 56,
308308
borderBottomWidth: 1,
309-
borderBottomColor: Colors.grey80
309+
borderBottomColor: Colors.$outlineNeutral
310310
},
311311
dialog: {
312-
backgroundColor: Colors.white,
312+
backgroundColor: Colors.$backgroundDefault,
313313
borderTopLeftRadius: 12,
314314
borderTopRightRadius: 12
315315
}

‎src/components/picker/NativePicker.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ class NativePicker extends BaseComponent {
118118
const label = this.getLabel();
119119
return (
120120
<TextField
121-
color={Colors.grey10}
121+
color={Colors.$textDefault}
122122
{...textInputProps}
123123
value={label}
124124
expandable

‎src/components/picker/PickerDialog.android.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ class PickerDialog extends BaseComponent {
8383
const styles = StyleSheet.create({
8484
dialog: {
8585
flex: 1,
86-
backgroundColor: Colors.white,
86+
backgroundColor: Colors.$backgroundDefault,
8787
overflow: 'hidden',
8888
borderRadius: BorderRadiuses.br10,
8989
paddingHorizontal: 24

‎src/components/picker/PickerDialog.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ class PickerDialog extends BaseComponent {
4343
const {panDirection} = this.props;
4444
return (
4545
<Dialog {...dialogProps} width="100%" bottom animationConfig={{duration: 300}} panDirection={panDirection}>
46-
<View flex bg-white>
46+
<View flex bg-$backgroundDefault>
4747
{this.renderHeader()}
4848
<View centerV flex>
4949
{this.props.children}
@@ -58,7 +58,7 @@ class PickerDialog extends BaseComponent {
5858
const styles = StyleSheet.create({
5959
header: {
6060
height: 44,
61-
backgroundColor: Colors.grey80,
61+
backgroundColor: Colors.$backgroundNeutralLight,
6262
paddingHorizontal: 17,
6363
flexDirection: 'row',
6464
justifyContent: 'space-between',

‎src/components/picker/PickerItem.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const PickerItem = (props: PickerItemProps) => {
2424
labelStyle,
2525
disabled,
2626
selectedIcon = Assets.icons.check,
27-
selectedIconColor = Colors.primary,
27+
selectedIconColor = Colors.$iconPrimary,
2828
testID
2929
} = props;
3030
const context = useContext(PickerContext);
@@ -52,7 +52,7 @@ const PickerItem = (props: PickerItemProps) => {
5252

5353
const selectedIndicator = useMemo(() => {
5454
if (isSelected) {
55-
return <Image source={selectedIcon} tintColor={isItemDisabled ? Colors.grey60 : selectedIconColor}/>;
55+
return <Image source={selectedIcon} tintColor={isItemDisabled ? Colors.$iconDisabled : selectedIconColor}/>;
5656
}
5757
}, [isSelected, isItemDisabled, selectedIcon, selectedIconColor]);
5858

@@ -102,17 +102,17 @@ const styles = StyleSheet.create({
102102
container: {
103103
height: 56.5,
104104
paddingHorizontal: 23,
105-
borderColor: Colors.rgba(Colors.grey10, 0.1),
105+
borderColor: Colors.$outlineNeutral,
106106
borderBottomWidth: 1
107107
},
108108
labelText: {
109109
...Typography.text70,
110-
color: Colors.grey10,
110+
color: Colors.$textDefault,
111111
flex: 1,
112112
textAlign: 'left'
113113
},
114114
labelTextDisabled: {
115-
color: Colors.grey60
115+
color: Colors.$textDisabled
116116
}
117117
});
118118

‎src/components/picker/PickerItemsList.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ const styles = StyleSheet.create({
7878
alignItems: 'center',
7979
paddingLeft: 16,
8080
borderBottomWidth: StyleSheet.hairlineWidth,
81-
borderBottomColor: Colors.grey60
81+
borderBottomColor: Colors.$outlineNeutral
8282
},
8383
searchIcon: {
8484
marginRight: 12

‎src/incubator/WheelPicker/Item.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@ const WheelPickerItem = memo(({
4141
itemHeight,
4242
onSelect,
4343
offset,
44-
activeColor = Colors.primary,
45-
inactiveColor = Colors.grey20,
44+
activeColor = Colors.$textPrimary,
45+
inactiveColor = Colors.$textNeutralHeavy,
4646
style,
4747
testID,
4848
centerH = true,
@@ -86,7 +86,7 @@ const WheelPickerItem = memo(({
8686
{label}
8787
</AnimatedText>
8888
{fakeLabel && (
89-
<Text marginL-s2 marginR-s5 text80M color={'white'} {...fakeLabelProps} style={fakeLabelStyle}>
89+
<Text marginL-s2 marginR-s5 text80M $textDefaultLight {...fakeLabelProps} style={fakeLabelStyle}>
9090
{fakeLabel}
9191
</Text>
9292
)}

‎src/incubator/WheelPicker/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ const WheelPicker = ({
8484
items: propItems,
8585
itemHeight = 44,
8686
numberOfVisibleRows = 5,
87-
activeTextColor = Colors.primary,
87+
activeTextColor = Colors.$textPrimary,
8888
inactiveTextColor,
8989
textStyle,
9090
label,
@@ -255,7 +255,7 @@ const WheelPicker = ({
255255
}, []);
256256

257257
return (
258-
<View testID={testID} bg-white style={style}>
258+
<View testID={testID} bg-$backgroundDefault style={style}>
259259
<View row centerH>
260260
<View flexG>
261261
<AnimatedFlatList
@@ -302,7 +302,7 @@ const styles = StyleSheet.create({
302302
borderTopWidth: 1,
303303
borderBottomWidth: 1,
304304
height: Spacings.s9,
305-
borderColor: Colors.grey60
305+
borderColor: Colors.$outlineNeutral
306306
},
307307
label: {
308308
position: 'absolute',

0 commit comments

Comments
 (0)