Skip to content

Hint and Toast - design tokens #1940

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
Apr 5, 2022
Merged

Hint and Toast - design tokens #1940

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
16 changes: 8 additions & 8 deletions demo/src/screens/componentScreens/HintsScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default class HintsScreen extends Component<HintScreenProps> {

renderCustomContent() {
return (
<Text text70 white>
<Text text70 $textDefaultLight>
Click
<Text onPress={() => Alert.alert('custom content :)')} text70BO red40>
{' here '}
Expand All @@ -71,17 +71,17 @@ export default class HintsScreen extends Component<HintScreenProps> {
<Incubator.ExpandableOverlay
useDialog
expandableContent={this.renderScreenOptions()}
dialogProps={{bottom: true}}
dialogProps={{bottom: true, useSafeArea: true}}
>
<Button round iconSource={Assets.icons.demo.settings} white/>
<Button round iconSource={Assets.icons.demo.settings} $backgroundDefault/>
</Incubator.ExpandableOverlay>
</View>
);
}

renderScreenOptions() {
return (
<View bg-white br20 padding-20 collapsable={false}>
<View bg-$backgroundDefault br20 padding-20 collapsable={false}>
<Text h2 marginB-s4>
Hint Options
</Text>
Expand Down Expand Up @@ -141,14 +141,14 @@ export default class HintsScreen extends Component<HintScreenProps> {
flex
padding-20
paddingT-100
bg-grey80
bg-$backgroundNeutralLight
style={{zIndex: 10}}
key={useTargetFrame ? 'withTargetFrame' : 'withElement'}
>
{/* <Button bg-purple30 label="Background" style={{position: 'absolute', right: 50, bottom: 100}}/> */}
<Hint
visible={showHint}
// color={Colors.orange30}
// color={Colors.$backgroundMajorHeavy}
message={message}
// message={
// <Text>
Expand All @@ -170,15 +170,15 @@ export default class HintsScreen extends Component<HintScreenProps> {
// borderRadius={BorderRadiuses.br40}
// edgeMargins={30}
onBackgroundPress={useBackdrop && !useTargetFrame ? this.toggleHint : undefined}
backdropColor={Colors.rgba(Colors.grey10, 0.3)}
backdropColor={Colors.rgba(Colors.$backgroundInverted, 0.3)}
customContent={
showCustomContent
? this.renderCustomContent()
: showReactionStrip
? this.renderReactionStrip()
: undefined
}
color={!showCustomContent && showReactionStrip ? Colors.white : undefined}
color={!showCustomContent && showReactionStrip ? Colors.$backgroundDefault : undefined}
removePaddings={!showCustomContent && showReactionStrip}
enableShadow={enableShadow}
testID={'Hint'}
Expand Down
37 changes: 16 additions & 21 deletions demo/src/screens/incubatorScreens/IncubatorToastScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,17 @@ export default class ToastsScreen extends Component {

toggleVisibility = () => {
// Im using this for storing toast visible since setState is async and takes time to response
this.showToast = !this.showToast;
this.showToast = !this.showToast;
this.setState({
visible: this.showToast
});
};

renderCustomContent = () => {
return (
<View flex padding-10 bg-white>
<Text text60>This is a custom content</Text>
<Text>
<View bg-$backgroundNeutralLight flex padding-10>
<Text $textDefault text60>This is a custom content</Text>
<Text $textDefault>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book.
Expand All @@ -54,13 +54,17 @@ export default class ToastsScreen extends Component {
renderAboveToast = () => {
return (
<View flex bottom right paddingB-50 paddingR-20 pointerEvents={'box-none'}>
<Button iconSource={Assets.icons.demo.dashboard} color={Colors.white} style={{height: 50, width: 50}}/>
<Button
iconSource={Assets.icons.demo.dashboard}
color={Colors.$backgroundDefault}
style={{height: 50, width: 50}}
/>
</View>
);
};

renderBelowToast = () => {
return <Text>Attachment below toast</Text>;
return <Text $textDefault>Attachment below toast</Text>;
};

renderAttachment = () => {
Expand Down Expand Up @@ -103,10 +107,10 @@ export default class ToastsScreen extends Component {
swipeable={isSwipeable}
onDismiss={this.toggleVisibility}
autoDismiss={3500}
// backgroundColor={Colors.green70}
// backgroundColor={Colors.$backgroundSuccess}
// icon={Assets.icons.demo.add}
// iconColor={Colors.green20}
// style={{borderWidth: 1, borderColor: Colors.grey30}}
// iconColor={Colors.$backgroundSuccessHeavy}
// style={{borderWidth: 1, borderColor: Colors.$outlineNeutralMedium}}
// messageStyle={Typography.text80BO}
>
{isCustomContent ? this.renderCustomContent() : undefined}
Expand All @@ -131,11 +135,11 @@ export default class ToastsScreen extends Component {
render() {
return (
<View flex padding-page>
<Text h1 marginB-s4>
<Text $textDefault h1 marginB-s4>
Toast
</Text>

<View flex style={styles.scrollViewContainer}>
<View flex>
<ScrollView contentContainerStyle={styles.scrollView}>
{renderMultipleSegmentOptions.call(this, 'Toast Position', 'toastPosition', [
{label: 'Bottom', value: 'bottom'},
Expand All @@ -153,7 +157,7 @@ export default class ToastsScreen extends Component {
{None: '', Label: 'label', Icon: 'icon'},
{isRow: true})}

<Text h3 marginV-s2>
<Text $textDefault h3 marginV-s2>
Presets
</Text>

Expand All @@ -177,14 +181,5 @@ export default class ToastsScreen extends Component {
const styles = StyleSheet.create({
scrollView: {
paddingBottom: 80
},
color: {
width: 30,
height: 30,
borderRadius: 15
},
selected: {
borderWidth: 2,
borderColor: Colors.grey10
}
});
6 changes: 3 additions & 3 deletions src/components/hint/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import TouchableOpacity from '../touchableOpacity';
const sideTip = require('./assets/hintTipSide.png');
const middleTip = require('./assets/hintTipMiddle.png');

const DEFAULT_COLOR = Colors.primary;
const DEFAULT_COLOR = Colors.$backgroundPrimaryHeavy;
const DEFAULT_HINT_OFFSET = Spacings.s4;
const DEFAULT_EDGE_MARGINS = Spacings.s5;

Expand Down Expand Up @@ -647,12 +647,12 @@ const styles = StyleSheet.create({
},
hintMessage: {
...Typography.text70,
color: Colors.white,
color: Colors.$textDefaultLight,
flexShrink: 1
},
icon: {
marginRight: Spacings.s4,
tintColor: Colors.white
tintColor: Colors.$backgroundDefault
}
});

Expand Down