Skip to content

Commit 8454ab2

Browse files
lidord-wixlidord-wix
authored
Infra/ migrate Slider and Stepper to design tokens (#1943)
* Infra/ migrate Slider and Stepper to design tokens * remove danger tokens from screen
1 parent 788afc0 commit 8454ab2

File tree

6 files changed

+123
-112
lines changed

6 files changed

+123
-112
lines changed

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

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
4444
return (
4545
<ScrollView showsVerticalScrollIndicator={false}>
4646
<View flex padding-20>
47-
<Text titleHuge marginB-20>
47+
<Text titleHuge $textDefault marginB-20>
4848
Sliders
4949
</Text>
5050

@@ -59,12 +59,14 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
5959
containerStyle={styles.sliderContainer}
6060
disableRTL
6161
/>
62-
<Text bodySmall grey30 style={styles.text}>
62+
<Text bodySmall $textNeutral style={styles.text}>
6363
{sliderValue}%
6464
</Text>
6565
</View>
6666

67-
<Text marginT-30>Negatives</Text>
67+
<Text $textDefault marginT-30>
68+
Negatives
69+
</Text>
6870
<Slider
6971
minimumValue={-100}
7072
maximumValue={100}
@@ -82,18 +84,14 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
8284
containerStyle={styles.slider}
8385
/>
8486

85-
<Text marginT-20>Disabled</Text>
86-
<Slider
87-
minimumValue={100}
88-
maximumValue={200}
89-
value={120}
90-
minimumTrackTintColor={Colors.red30}
91-
thumbTintColor={Colors.green30}
92-
containerStyle={styles.slider}
93-
disabled
94-
/>
87+
<Text $textDefault marginT-20>
88+
Disabled
89+
</Text>
90+
<Slider minimumValue={100} maximumValue={200} value={120} containerStyle={styles.slider} disabled/>
9591

96-
<Text marginT-15>Custom with Steps</Text>
92+
<Text $textDefault marginT-15>
93+
Custom with Steps
94+
</Text>
9795
<Slider
9896
value={50}
9997
minimumValue={0}
@@ -108,9 +106,11 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
108106
maximumTrackTintColor={Colors.violet70}
109107
/>
110108

111-
<Text marginT-15>Gradient Sliders</Text>
109+
<Text $textDefault marginT-15>
110+
Gradient Sliders
111+
</Text>
112112
<View row centerV>
113-
<Text text90 grey30>
113+
<Text text90 $textNeutral>
114114
DEFAULT
115115
</Text>
116116
<GradientSlider
@@ -123,7 +123,7 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
123123
</View>
124124
</View>
125125
<View row centerV>
126-
<Text text90 grey30>
126+
<Text text90 $textNeutral>
127127
HUE
128128
</Text>
129129
<GradientSlider
@@ -137,7 +137,7 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
137137
</View>
138138
</View>
139139

140-
<Text marginT-25 marginB-20>
140+
<Text $textDefault marginT-25 marginB-20>
141141
Color Slider Group
142142
</Text>
143143
<ColorSliderGroup
@@ -158,7 +158,7 @@ const styles = StyleSheet.create({
158158
flexDirection: 'row-reverse'
159159
},
160160
image: {
161-
tintColor: Colors.grey30
161+
tintColor: Colors.$iconNeutral
162162
},
163163
text: {
164164
width: 40
@@ -196,10 +196,10 @@ const styles = StyleSheet.create({
196196
height: 20,
197197
borderRadius: 4,
198198
borderWidth: 1,
199-
borderColor: Colors.grey60
199+
borderColor: Colors.$outlineNeutral
200200
},
201201
group: {
202-
backgroundColor: Colors.grey60,
202+
backgroundColor: Colors.$backgroundNeutralMedium,
203203
padding: 10,
204204
borderRadius: 6
205205
}

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

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, {Component} from 'react';
22
import {View, Text, Stepper} from 'react-native-ui-lib'; //eslint-disable-line
33

4-
54
export default class StepperScreen extends Component {
65
state = {
76
stepperValue: 1
@@ -22,32 +21,44 @@ export default class StepperScreen extends Component {
2221

2322
return (
2423
<View padding-page>
25-
<Text text40 marginB-20>Stepper</Text>
24+
<Text text40 $textDefault marginB-20>
25+
Stepper
26+
</Text>
2627

2728
<View centerV>
2829
<View row spread centerV>
29-
<Text text70>Default</Text>
30+
<Text text70 $textDefault>
31+
Default
32+
</Text>
3033
<Stepper/>
3134
</View>
3235

3336
<View row spread centerV marginT-30>
34-
<Text text70>Disabled</Text>
37+
<Text text70 $textDefault>
38+
Disabled
39+
</Text>
3540
<Stepper disabled/>
3641
</View>
3742

3843
<View row spread marginT-30>
39-
<Text text70>Step (0.5)</Text>
44+
<Text text70 $textDefault>
45+
Step (0.5)
46+
</Text>
4047
<Stepper step={0.5}/>
4148
</View>
4249

4350
<View row spread marginT-30>
44-
<Text text70>Small</Text>
51+
<Text text70 $textDefault>
52+
Small
53+
</Text>
4554
<Stepper small/>
4655
</View>
4756

4857
<View marginT-30>
4958
<View row spread centerV>
50-
<Text text70>Custom</Text>
59+
<Text text70 $textDefault>
60+
Custom
61+
</Text>
5162
<Stepper
5263
onValueChange={this.onValueChange}
5364
maxValue={this.stepperProps.maxValue}
@@ -57,10 +68,18 @@ export default class StepperScreen extends Component {
5768
/>
5869
</View>
5970
<View padding-5>
60-
<Text text80M>Stepper value: {stepperValue}</Text>
61-
<Text marginT-3>Initial value: {this.stepperProps.value}</Text>
62-
<Text marginT-3>Min value: {this.stepperProps.minValue}</Text>
63-
<Text marginT-3>Max value: {this.stepperProps.maxValue}</Text>
71+
<Text text80M $textDefault>
72+
Stepper value: {stepperValue}
73+
</Text>
74+
<Text $textDefault marginT-3>
75+
Initial value: {this.stepperProps.value}
76+
</Text>
77+
<Text $textDefault marginT-3>
78+
Min value: {this.stepperProps.minValue}
79+
</Text>
80+
<Text $textDefault marginT-3>
81+
Max value: {this.stepperProps.maxValue}
82+
</Text>
6483
</View>
6584
</View>
6685
</View>

‎src/components/slider/ColorSliderGroup.tsx

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -10,38 +10,38 @@ type SliderOnValueChange = (value: string) => void;
1010

1111
export type ColorSliderGroupProps = {
1212
/**
13-
* The gradient color
14-
*/
13+
* The gradient color
14+
*/
1515
initialColor: string;
1616
/**
17-
* Callback for onValueChange returns the new hex color
18-
*/
17+
* Callback for onValueChange returns the new hex color
18+
*/
1919
onValueChange?: SliderOnValueChange;
2020
/**
21-
* Group container style
22-
*/
21+
* Group container style
22+
*/
2323
containerStyle?: StyleProp<ViewStyle>;
2424
/**
25-
* Sliders style
26-
*/
25+
* Sliders style
26+
*/
2727
sliderContainerStyle?: StyleProp<ViewStyle>;
2828
/**
29-
* Show the sliders labels (defaults are: Hue, Lightness, Saturation)
30-
*/
29+
* Show the sliders labels (defaults are: Hue, Lightness, Saturation)
30+
*/
3131
showLabels?: boolean;
3232
/**
33-
* In case you would like to change the default labels (translations etc.), you can provide
34-
* this prop with a map to the relevant labels ({hue: ..., lightness: ..., saturation: ...}).
35-
*/
33+
* In case you would like to change the default labels (translations etc.), you can provide
34+
* this prop with a map to the relevant labels ({hue: ..., lightness: ..., saturation: ...}).
35+
*/
3636
labels?: {[key in GradientSliderTypes]: string};
3737
/**
38-
* The labels style
39-
*/
38+
* The labels style
39+
*/
4040
labelsStyle?: StyleProp<TextStyle>;
4141
/**
42-
* If true the component will have accessibility features enabled
43-
*/
44-
accessible?: boolean;
42+
* If true the component will have accessibility features enabled
43+
*/
44+
accessible?: boolean;
4545
};
4646

4747
interface ColorSliderGroupState {
@@ -62,35 +62,36 @@ class ColorSliderGroup extends PureComponent<ColorSliderGroupProps, ColorSliderG
6262

6363
state = {
6464
initialColor: this.props.initialColor
65-
}
65+
};
6666

67-
static getDerivedStateFromProps: GetDerivedStateFromProps<ColorSliderGroupProps, ColorSliderGroupState> = (nextProps, prevState) => {
67+
static getDerivedStateFromProps: GetDerivedStateFromProps<ColorSliderGroupProps, ColorSliderGroupState> = (nextProps,
68+
prevState) => {
6869
if (prevState.initialColor !== nextProps.initialColor) {
6970
return {
7071
initialColor: nextProps.initialColor
7172
};
7273
}
7374
return null;
74-
}
75+
};
7576

7677
onValueChange = (value: string) => {
7778
_.invoke(this.props, 'onValueChange', value);
78-
}
79+
};
7980

8081
renderSlider = (type: GradientSliderTypes) => {
8182
const {sliderContainerStyle, showLabels, labelsStyle, accessible, labels} = this.props;
8283

8384
return (
8485
<>
8586
{showLabels && labels && (
86-
<Text grey30 text80 style={labelsStyle} accessible={accessible}>
87+
<Text $textNeutral text80 style={labelsStyle} accessible={accessible}>
8788
{labels[type]}
8889
</Text>
8990
)}
90-
<GradientSlider
91-
color={this.props.initialColor}
92-
type={type}
93-
containerStyle={sliderContainerStyle}
91+
<GradientSlider
92+
color={this.props.initialColor}
93+
type={type}
94+
containerStyle={sliderContainerStyle}
9495
accessible={accessible}
9596
/>
9697
</>

0 commit comments

Comments
 (0)