Skip to content

Commit 9975617

Browse files
Inbal-TishInbal-Tish
authored
Badge - to design tokens (#1922)
1 parent 747f1a3 commit 9975617

File tree

2 files changed

+118
-137
lines changed

2 files changed

+118
-137
lines changed

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

Lines changed: 116 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
import React, {Component} from 'react';
22
import {ScrollView, StyleSheet} from 'react-native';
3-
import {Colors, View, Badge, Button, Text, Image} from 'react-native-ui-lib'; //eslint-disable-line
4-
3+
import {Colors, View, Badge, Text, Image, Stepper} from 'react-native-ui-lib'; //eslint-disable-line
54

65
const BadgesSpace = 30;
7-
const plusIcon = require('../../assets/icons/chevronUp.png');
8-
const minusIcon = require('../../assets/icons/chevronDown.png');
96
const star = require('../../assets/icons/star.png');
107
const bell = require('../../assets/icons/bell.png');
118

@@ -22,165 +19,149 @@ export default class BadgesScreen extends Component {
2219
}
2320
}
2421

25-
render() {
26-
const customElement1 = (
27-
<View row>
28-
<Image source={bell}/>
29-
<Image source={bell}/>
30-
</View>
31-
);
22+
customElement1 = (
23+
<View row>
24+
<Image source={bell}/>
25+
<Image source={bell}/>
26+
</View>
27+
);
28+
29+
customElement2 = (
30+
<View row>
31+
<Image source={bell}/>
32+
<Text white text90>
33+
37
34+
</Text>
35+
<Image source={bell}/>
36+
</View>
37+
);
38+
39+
onValueChange = (value: number, _?: string) => {
40+
this.setState({value});
41+
};
3242

33-
const customElement2 = (
34-
<View row>
35-
<Image source={bell}/>
36-
<Text white text90>
37-
37
38-
</Text>
39-
<Image source={bell}/>
40-
</View>
41-
);
43+
render() {
44+
const {value} = this.state;
4245

4346
return (
44-
<ScrollView style={{backgroundColor: Colors.grey70}} contentContainerStyle={styles.container}>
45-
<Text text50 row center marginB-15>
47+
<View flex>
48+
<Text h1 $textDefault margin-20>
4649
Badges
4750
</Text>
48-
<View row center style={{alignItems: 'flex-start'}}>
49-
<View center paddingH-10>
50-
<Badge size={20} label={this.state.value.toString()} backgroundColor={Colors.red30}/>
51-
<Badge
52-
label={this.state.value.toString()}
53-
containerStyle={{marginTop: BadgesSpace}}
54-
backgroundColor={Colors.red30}
55-
borderWidth={1}
56-
/>
57-
<Badge
58-
size={16}
59-
label={this.state.value.toString()}
60-
containerStyle={{marginTop: BadgesSpace}}
61-
backgroundColor={Colors.red30}
62-
/>
63-
</View>
6451

65-
<View center paddingH-10>
52+
<ScrollView contentContainerStyle={styles.container} showsVerticalScrollIndicator={false}>
53+
<View row spread>
6654
<Badge label={'9999'} labelFormatterLimit={3}/>
6755
<Badge
6856
label={'999'}
6957
labelFormatterLimit={2}
70-
containerStyle={{marginTop: BadgesSpace}}
7158
borderWidth={2}
7259
borderColor={Colors.white}
7360
/>
74-
<Badge labelFormatterLimit={1} size={16} label={'99999999'} containerStyle={{marginTop: BadgesSpace}}/>
75-
</View>
76-
</View>
77-
78-
<View row paddingT-20 marginB-15>
79-
<Button
80-
bg-grey60
81-
style={{width: 30, height: 30, borderWidth: 1, marginRight: 15}}
82-
iconSource={minusIcon}
83-
avoidMinWidth
84-
onPress={() => this.changeLabelValue(-1)}
85-
onLongPress={() => this.changeLabelValue(-10)}
86-
/>
87-
<Button
88-
bg-grey60
89-
style={{width: 30, height: 30, borderWidth: 1}}
90-
iconSource={plusIcon}
91-
avoidMinWidth
92-
onPress={() => this.changeLabelValue(1)}
93-
onLongPress={() => this.changeLabelValue(10)}
94-
/>
95-
</View>
96-
<Text center>Press buttons to change red badge value by 1.{'\n'}Long press to change it by 10.</Text>
97-
98-
<Text text50 row center marginT-40>
99-
Pimple Badges
100-
</Text>
101-
<View row>
102-
<View
103-
center
104-
style={{justifyContent: 'space-around', alignItems: 'flex-start', width: 140, height: 140}}
105-
>
106-
<Text text80 row>
107-
size={'{6}'}
108-
</Text>
109-
<Text text80>size={'{10}'}</Text>
110-
<Text text80 row>
111-
size={'{14}'}
112-
</Text>
61+
<Badge labelFormatterLimit={1} size={16} label={'99999999'}/>
11362
</View>
11463

115-
<View center style={{justifyContent: 'space-around', width: 40, height: 140}}>
116-
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.green30} size={6}/>
117-
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.red30} size={10}/>
118-
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.blue30} size={14}/>
64+
<View row spread marginV-20>
65+
<Badge size={20} label={value.toString()} backgroundColor={Colors.red30}/>
66+
<Badge
67+
label={value.toString()}
68+
backgroundColor={Colors.red30}
69+
borderWidth={1}
70+
borderColor={Colors.$outlinePrimary}
71+
/>
72+
<Badge
73+
size={16}
74+
label={value.toString()}
75+
backgroundColor={Colors.red30}
76+
/>
11977
</View>
120-
</View>
121-
<Text text50 marginB-10 row center marginT-25>
122-
Icon Badges
123-
</Text>
124-
<View row paddingH-15>
125-
<View style={styles.iconBadgeColumnContainer}>
126-
<Badge size={16} icon={star} borderWidth={1} borderColor={Colors.red30}/>
127-
<Text text80 style={{marginTop: 10}}>
128-
small(16)
129-
</Text>
78+
<View center>
79+
<Stepper onValueChange={this.onValueChange} value={value} maxValue={100} minValue={1}/>
13080
</View>
131-
132-
<View style={styles.iconBadgeColumnContainer}>
133-
<Badge icon={star} iconStyle={{tintColor: Colors.red30}}/>
134-
<Text text80 style={{marginTop: 10}}>
135-
default(20)
136-
</Text>
81+
<Text center $textDefault marginT-10>Press buttons to change red badge value by 1.{'\n'}Long press to change it by 10.</Text>
82+
83+
<Text row center text50 $textDefault marginT-40 >
84+
Pimple Badges
85+
</Text>
86+
<View row>
87+
<View center style={{justifyContent: 'space-around', alignItems: 'flex-start', width: 140, height: 140}}>
88+
<Text row text80 $textDefault>
89+
size={'{6}'}
90+
</Text>
91+
<Text text80 $textDefault>size={'{10}'}</Text>
92+
<Text row text80 $textDefault>
93+
size={'{14}'}
94+
</Text>
95+
</View>
96+
<View center style={{justifyContent: 'space-around', width: 40, height: 140}}>
97+
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.green30} size={6}/>
98+
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.red30} size={10}/>
99+
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.blue30} size={14}/>
100+
</View>
137101
</View>
138102

139-
<View style={styles.iconBadgeColumnContainer}>
140-
<Badge size={24} icon={star} iconStyle={{backgroundColor: Colors.red30}}/>
141-
<Text text80 style={{marginTop: 10}}>
142-
large(24)
143-
</Text>
103+
<Text row center text50 $textDefault margin-25>
104+
Icon Badges
105+
</Text>
106+
<View row spread>
107+
<View center>
108+
<Badge
109+
size={16}
110+
icon={star}
111+
borderWidth={1}
112+
borderColor={Colors.red30}
113+
iconStyle={{tintColor: Colors.red30}}
114+
/>
115+
<Text $textDefault text80 style={{marginTop: 10}}>
116+
small(16)
117+
</Text>
118+
</View>
119+
120+
<View center>
121+
<Badge icon={star} iconStyle={{tintColor: Colors.red30}}/>
122+
<Text $textDefault text80 style={{marginTop: 10}}>
123+
default(20)
124+
</Text>
125+
</View>
126+
127+
<View center>
128+
<Badge size={24} icon={star} iconStyle={{backgroundColor: Colors.red30}}/>
129+
<Text $textDefault text80 style={{marginTop: 10}}>
130+
large(24)
131+
</Text>
132+
</View>
133+
134+
<View center>
135+
<Badge icon={star} borderRadius={6} iconStyle={{backgroundColor: Colors.red30}}/>
136+
<Text $textDefault text80 style={{marginTop: 10}}>
137+
border radius
138+
</Text>
139+
</View>
144140
</View>
145141

146-
<View style={styles.iconBadgeColumnContainer}>
147-
<Badge icon={star} borderRadius={6} iconStyle={{backgroundColor: Colors.red30}}/>
148-
<Text text80 style={{marginTop: 10}}>
149-
border radius
150-
</Text>
142+
<Text row center text50 $textDefault margin-25>
143+
Counter Icon Badges
144+
</Text>
145+
<View row spread marginH-50>
146+
<Badge marginR-10 label={'9999'} labelFormatterLimit={3} icon={bell} backgroundColor={Colors.red30}/>
147+
<Badge marginR-10 label={'4'} icon={bell} backgroundColor={Colors.red30}/>
151148
</View>
152-
</View>
153-
154-
<Text text50 marginB-10 row center marginT-25>
155-
Counter Icon Badges
156-
</Text>
157-
<View row paddingH-15>
158-
<Badge marginR-10 label={'9999'} labelFormatterLimit={3} icon={bell} backgroundColor={Colors.red30}/>
159-
<Badge marginR-10 label={'4'} icon={bell} backgroundColor={Colors.red30}/>
160-
</View>
161149

162-
<Text text50 marginB-10 row center marginT-25>
163-
Custom Element Badges
164-
</Text>
165-
<View row paddingH-15>
166-
<Badge marginR-10 label={'17'} customElement={customElement1}/>
167-
<Badge marginR-10 customElement={customElement2} backgroundColor={Colors.grey30}/>
168-
</View>
169-
</ScrollView>
150+
<Text row center text50 $textDefault margin-25>
151+
Custom Element Badges
152+
</Text>
153+
<View row spread marginH-50>
154+
<Badge marginR-10 label={'17'} customElement={this.customElement1}/>
155+
<Badge marginR-10 customElement={this.customElement2} backgroundColor={Colors.grey30}/>
156+
</View>
157+
</ScrollView>
158+
</View>
170159
);
171160
}
172161
}
173162

174163
const styles = StyleSheet.create({
175164
container: {
176-
alignItems: 'center',
177-
padding: 20,
178-
backgroundColor: Colors.grey70
179-
},
180-
iconBadgeColumnContainer: {
181-
flex: 1,
182-
justifyContent: 'space-between',
183-
alignItems: 'center',
184-
flexDirection: 'column'
165+
padding: 20
185166
}
186167
});

‎src/components/badge/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -282,14 +282,14 @@ function createStyles(props: BadgeProps) {
282282
badge: {
283283
alignSelf: 'flex-start',
284284
borderRadius: BorderRadiuses.br100,
285-
backgroundColor: (!props.icon || props.customElement) ? Colors.primary : undefined,
285+
backgroundColor: (!props.icon || props.customElement) ? Colors.$backgroundPrimaryHeavy : undefined,
286286
alignItems: 'center',
287287
justifyContent: 'center',
288288
overflow: 'hidden'
289289
},
290290
label: {
291291
...Typography.text90,
292-
color: Colors.white,
292+
color: Colors.$textDefaultLight,
293293
backgroundColor: 'transparent'
294294
},
295295
labelSmall: {

0 commit comments

Comments
 (0)