Skip to content

Badge - to design tokens #1922

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 28, 2022
Merged

Badge - to design tokens #1922

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
251 changes: 116 additions & 135 deletions demo/src/screens/componentScreens/BadgesScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
import React, {Component} from 'react';
import {ScrollView, StyleSheet} from 'react-native';
import {Colors, View, Badge, Button, Text, Image} from 'react-native-ui-lib'; //eslint-disable-line

import {Colors, View, Badge, Text, Image, Stepper} from 'react-native-ui-lib'; //eslint-disable-line

const BadgesSpace = 30;
const plusIcon = require('../../assets/icons/chevronUp.png');
const minusIcon = require('../../assets/icons/chevronDown.png');
const star = require('../../assets/icons/star.png');
const bell = require('../../assets/icons/bell.png');

Expand All @@ -22,165 +19,149 @@ export default class BadgesScreen extends Component {
}
}

render() {
const customElement1 = (
<View row>
<Image source={bell}/>
<Image source={bell}/>
</View>
);
customElement1 = (
<View row>
<Image source={bell}/>
<Image source={bell}/>
</View>
);

customElement2 = (
<View row>
<Image source={bell}/>
<Text white text90>
37
</Text>
<Image source={bell}/>
</View>
);

onValueChange = (value: number, _?: string) => {
this.setState({value});
};

const customElement2 = (
<View row>
<Image source={bell}/>
<Text white text90>
37
</Text>
<Image source={bell}/>
</View>
);
render() {
const {value} = this.state;

return (
<ScrollView style={{backgroundColor: Colors.grey70}} contentContainerStyle={styles.container}>
<Text text50 row center marginB-15>
<View flex>
<Text h1 $textDefault margin-20>
Badges
</Text>
<View row center style={{alignItems: 'flex-start'}}>
<View center paddingH-10>
<Badge size={20} label={this.state.value.toString()} backgroundColor={Colors.red30}/>
<Badge
label={this.state.value.toString()}
containerStyle={{marginTop: BadgesSpace}}
backgroundColor={Colors.red30}
borderWidth={1}
/>
<Badge
size={16}
label={this.state.value.toString()}
containerStyle={{marginTop: BadgesSpace}}
backgroundColor={Colors.red30}
/>
</View>

<View center paddingH-10>
<ScrollView contentContainerStyle={styles.container} showsVerticalScrollIndicator={false}>
<View row spread>
<Badge label={'9999'} labelFormatterLimit={3}/>
<Badge
label={'999'}
labelFormatterLimit={2}
containerStyle={{marginTop: BadgesSpace}}
borderWidth={2}
borderColor={Colors.white}
/>
<Badge labelFormatterLimit={1} size={16} label={'99999999'} containerStyle={{marginTop: BadgesSpace}}/>
</View>
</View>

<View row paddingT-20 marginB-15>
<Button
bg-grey60
style={{width: 30, height: 30, borderWidth: 1, marginRight: 15}}
iconSource={minusIcon}
avoidMinWidth
onPress={() => this.changeLabelValue(-1)}
onLongPress={() => this.changeLabelValue(-10)}
/>
<Button
bg-grey60
style={{width: 30, height: 30, borderWidth: 1}}
iconSource={plusIcon}
avoidMinWidth
onPress={() => this.changeLabelValue(1)}
onLongPress={() => this.changeLabelValue(10)}
/>
</View>
<Text center>Press buttons to change red badge value by 1.{'\n'}Long press to change it by 10.</Text>

<Text text50 row center marginT-40>
Pimple Badges
</Text>
<View row>
<View
center
style={{justifyContent: 'space-around', alignItems: 'flex-start', width: 140, height: 140}}
>
<Text text80 row>
size={'{6}'}
</Text>
<Text text80>size={'{10}'}</Text>
<Text text80 row>
size={'{14}'}
</Text>
<Badge labelFormatterLimit={1} size={16} label={'99999999'}/>
</View>

<View center style={{justifyContent: 'space-around', width: 40, height: 140}}>
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.green30} size={6}/>
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.red30} size={10}/>
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.blue30} size={14}/>
<View row spread marginV-20>
<Badge size={20} label={value.toString()} backgroundColor={Colors.red30}/>
<Badge
label={value.toString()}
backgroundColor={Colors.red30}
borderWidth={1}
borderColor={Colors.$outlinePrimary}
/>
<Badge
size={16}
label={value.toString()}
backgroundColor={Colors.red30}
/>
</View>
</View>
<Text text50 marginB-10 row center marginT-25>
Icon Badges
</Text>
<View row paddingH-15>
<View style={styles.iconBadgeColumnContainer}>
<Badge size={16} icon={star} borderWidth={1} borderColor={Colors.red30}/>
<Text text80 style={{marginTop: 10}}>
small(16)
</Text>
<View center>
<Stepper onValueChange={this.onValueChange} value={value} maxValue={100} minValue={1}/>
</View>

<View style={styles.iconBadgeColumnContainer}>
<Badge icon={star} iconStyle={{tintColor: Colors.red30}}/>
<Text text80 style={{marginTop: 10}}>
default(20)
</Text>
<Text center $textDefault marginT-10>Press buttons to change red badge value by 1.{'\n'}Long press to change it by 10.</Text>

<Text row center text50 $textDefault marginT-40 >
Pimple Badges
</Text>
<View row>
<View center style={{justifyContent: 'space-around', alignItems: 'flex-start', width: 140, height: 140}}>
<Text row text80 $textDefault>
size={'{6}'}
</Text>
<Text text80 $textDefault>size={'{10}'}</Text>
<Text row text80 $textDefault>
size={'{14}'}
</Text>
</View>
<View center style={{justifyContent: 'space-around', width: 40, height: 140}}>
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.green30} size={6}/>
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.red30} size={10}/>
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.blue30} size={14}/>
</View>
</View>

<View style={styles.iconBadgeColumnContainer}>
<Badge size={24} icon={star} iconStyle={{backgroundColor: Colors.red30}}/>
<Text text80 style={{marginTop: 10}}>
large(24)
</Text>
<Text row center text50 $textDefault margin-25>
Icon Badges
</Text>
<View row spread>
<View center>
<Badge
size={16}
icon={star}
borderWidth={1}
borderColor={Colors.red30}
iconStyle={{tintColor: Colors.red30}}
/>
<Text $textDefault text80 style={{marginTop: 10}}>
small(16)
</Text>
</View>

<View center>
<Badge icon={star} iconStyle={{tintColor: Colors.red30}}/>
<Text $textDefault text80 style={{marginTop: 10}}>
default(20)
</Text>
</View>

<View center>
<Badge size={24} icon={star} iconStyle={{backgroundColor: Colors.red30}}/>
<Text $textDefault text80 style={{marginTop: 10}}>
large(24)
</Text>
</View>

<View center>
<Badge icon={star} borderRadius={6} iconStyle={{backgroundColor: Colors.red30}}/>
<Text $textDefault text80 style={{marginTop: 10}}>
border radius
</Text>
</View>
</View>

<View style={styles.iconBadgeColumnContainer}>
<Badge icon={star} borderRadius={6} iconStyle={{backgroundColor: Colors.red30}}/>
<Text text80 style={{marginTop: 10}}>
border radius
</Text>
<Text row center text50 $textDefault margin-25>
Counter Icon Badges
</Text>
<View row spread marginH-50>
<Badge marginR-10 label={'9999'} labelFormatterLimit={3} icon={bell} backgroundColor={Colors.red30}/>
<Badge marginR-10 label={'4'} icon={bell} backgroundColor={Colors.red30}/>
</View>
</View>

<Text text50 marginB-10 row center marginT-25>
Counter Icon Badges
</Text>
<View row paddingH-15>
<Badge marginR-10 label={'9999'} labelFormatterLimit={3} icon={bell} backgroundColor={Colors.red30}/>
<Badge marginR-10 label={'4'} icon={bell} backgroundColor={Colors.red30}/>
</View>

<Text text50 marginB-10 row center marginT-25>
Custom Element Badges
</Text>
<View row paddingH-15>
<Badge marginR-10 label={'17'} customElement={customElement1}/>
<Badge marginR-10 customElement={customElement2} backgroundColor={Colors.grey30}/>
</View>
</ScrollView>
<Text row center text50 $textDefault margin-25>
Custom Element Badges
</Text>
<View row spread marginH-50>
<Badge marginR-10 label={'17'} customElement={this.customElement1}/>
<Badge marginR-10 customElement={this.customElement2} backgroundColor={Colors.grey30}/>
</View>
</ScrollView>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
alignItems: 'center',
padding: 20,
backgroundColor: Colors.grey70
},
iconBadgeColumnContainer: {
flex: 1,
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'column'
padding: 20
}
});
4 changes: 2 additions & 2 deletions src/components/badge/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,14 +282,14 @@ function createStyles(props: BadgeProps) {
badge: {
alignSelf: 'flex-start',
borderRadius: BorderRadiuses.br100,
backgroundColor: (!props.icon || props.customElement) ? Colors.primary : undefined,
backgroundColor: (!props.icon || props.customElement) ? Colors.$backgroundPrimaryHeavy : undefined,
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden'
},
label: {
...Typography.text90,
color: Colors.white,
color: Colors.$textDefaultLight,
backgroundColor: 'transparent'
},
labelSmall: {
Expand Down