fix: breakMode for button and tag and high contrast tag (#167)

carbon-design-system · Nov 22, 2023 · f4dedfa · f4dedfa
1 parent f15b373
commit f4dedfa
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 17 deletions.
diff --git a/example/src/Views/Button.tsx b/example/src/Views/Button.tsx
@@ -134,6 +134,18 @@ export default class TestButton extends React.Component {
             this.alert('Long pressed danger');
           }}
         />
+        <Button
+          style={itemStyle}
+          disabled={disabled}
+          breakMode="wrap"
+          text="Long text that will need to wrap or ellipsis. See checkbox above."
+          onPress={() => {
+            this.alert('Pressed long text');
+          }}
+          onLongPress={() => {
+            this.alert('Long pressed long text');
+          }}
+        />
         <Button
           style={itemStyle}
           disabled={disabled}
@@ -323,6 +335,19 @@ export default class TestButton extends React.Component {
             this.alert('Long pressed icon');
           }}
         />
+        <Button
+          style={itemStyle}
+          disabled={disabled}
+          breakMode="wrap"
+          icon={AddIcon}
+          text="Long text with icon that will need to wrap or ellipsis. See checkbox above."
+          onPress={() => {
+            this.alert('Pressed long text with icon');
+          }}
+          onLongPress={() => {
+            this.alert('Long pressed long text with icon');
+          }}
+        />
       </ScrollView>
     );
   }

diff --git a/example/src/Views/Tag.tsx b/example/src/Views/Tag.tsx
@@ -23,20 +23,22 @@ export default class TestTag extends React.Component {
   state = {
     disabled: false,
     showFilterClose: false,
+    showWrapping: false,
   };
 
-  private textTypes = ['red', 'magenta', 'purple', 'blue', 'cyan', 'teal', 'green', 'gray', 'cool-gray', 'warm-gray'];
+  private textTypes = ['red', 'magenta', 'purple', 'blue', 'cyan', 'teal', 'green', 'gray', 'cool-gray', 'warm-gray', 'high-contrast'];
 
   render(): React.ReactNode {
-    const { disabled, showFilterClose } = this.state;
+    const { disabled, showFilterClose, showWrapping } = this.state;
 
     return (
       <ScrollView keyboardShouldPersistTaps="handled" contentInsetAdjustmentBehavior="automatic" contentContainerStyle={styles.container} style={styles.view}>
         <Checkbox checked={showFilterClose} id="filterClose" onPress={(value) => this.setState({ showFilterClose: value })} label="Show close" />
         <Checkbox checked={disabled} id="disable" onPress={(value) => this.setState({ disabled: value })} label="Make disabled" />
-        <Tag style={styles.tags} title="Default with long text that is really long and probably going to wrap." disabled={disabled} onClosePress={showFilterClose ? () => Alert.alert('Pressed filter close', 'default') : undefined} />
+        <Checkbox checked={showWrapping} id="showWrapping" onPress={(value) => this.setState({ showWrapping: value })} label="Make all wrap" />
+        <Tag style={styles.tags} title="Default with long text that is really long and probably going to wrap." breakMode={showWrapping ? 'wrap' : undefined} disabled={disabled} onClosePress={showFilterClose ? () => Alert.alert('Pressed filter close', 'default') : undefined} />
         {this.textTypes.map((type) => (
-          <Tag key={type} style={styles.baseSpacing} tagType={type as any} title={type} disabled={disabled} onClosePress={showFilterClose ? () => Alert.alert('Pressed filter close', type) : undefined} />
+          <Tag key={type} style={styles.baseSpacing} tagType={type as any} title={type} disabled={disabled} breakMode={showWrapping ? 'wrap' : undefined} onClosePress={showFilterClose ? () => Alert.alert('Pressed filter close', type) : undefined} />
         ))}
       </ScrollView>
     );

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -3,7 +3,7 @@ import { GestureResponderEvent, Keyboard, Pressable, PressableProps, PressableSt
 import type { CarbonIcon } from '../../types/shared';
 import { createIcon, pressableFeedbackStyle, styleReferenceBreaker } from '../../helpers';
 import { getColor } from '../../styles/colors';
-import { Text, TextTypes } from '../Text';
+import { Text, TextBreakModes, TextTypes } from '../Text';
 
 /** Props for Button component */
 export type ButtonProps = {
@@ -35,6 +35,8 @@ export type ButtonProps = {
   forwardRef?: Ref<View>;
   /** Disable extra padding on right of buttons */
   disableDesignPadding?: boolean;
+  /** Break mode used on string type content (default is tail) */
+  breakMode?: TextBreakModes;
 };
 
 /**
@@ -49,7 +51,7 @@ export class Button extends React.Component<ButtonProps> {
     paddingTop: 13,
     paddingBottom: 13,
     paddingRight: 48,
-    height: 48,
+    minHeight: 48,
     minWidth: 48,
   };
 
@@ -58,7 +60,9 @@ export class Button extends React.Component<ButtonProps> {
       iconStyle: {
         position: 'absolute',
         top: 14,
+        bottom: 14,
         right: 14,
+        justifyContent: 'center',
       },
     });
   }
@@ -236,11 +240,11 @@ export class Button extends React.Component<ButtonProps> {
   };
 
   render(): React.ReactNode {
-    const { text, disabled, onLongPress, componentProps, icon, iconOnlyMode, textType, forwardRef } = this.props;
+    const { text, disabled, onLongPress, componentProps, icon, iconOnlyMode, textType, forwardRef, breakMode } = this.props;
 
     return (
       <Pressable disabled={disabled} style={(state) => pressableFeedbackStyle(state, this.buttonStyle, this.getStateStyle)} accessibilityLabel={text} accessibilityRole="button" onPress={this.onPress} onLongPress={onLongPress} ref={forwardRef} {...(componentProps || {})}>
-        {!iconOnlyMode && <Text type={textType || 'body-compact-02'} style={this.textStyle} text={text} breakMode="tail" />}
+        {!iconOnlyMode && <Text type={textType || 'body-compact-02'} style={this.textStyle} text={text} breakMode={breakMode || 'tail'} />}
         {!!icon && <View style={this.styles.iconStyle}>{createIcon(icon, 20, 20, this.iconTextColor)}</View>}
       </Pressable>
     );

diff --git a/src/components/Tag/index.tsx b/src/components/Tag/index.tsx
@@ -3,10 +3,10 @@ import { GestureResponderEvent, ViewProps, StyleProp, StyleSheet, View, ViewStyl
 import { createIcon, pressableFeedbackStyle, styleReferenceBreaker } from '../../helpers';
 import CloseIcon from '@carbon/icons/es/close/20';
 import { getColor } from '../../styles/colors';
-import { Text } from '../Text';
+import { Text, TextBreakModes } from '../Text';
 
 /** Type of tags */
-export type TagTypes = 'red' | 'magenta' | 'purple' | 'blue' | 'cyan' | 'teal' | 'green' | 'gray' | 'cool-gray' | 'warm-gray';
+export type TagTypes = 'red' | 'magenta' | 'purple' | 'blue' | 'cyan' | 'teal' | 'green' | 'gray' | 'cool-gray' | 'warm-gray' | 'high-contrast';
 
 /** Props for Tag component */
 export type TagProps = {
@@ -18,6 +18,8 @@ export type TagProps = {
   tagType?: TagTypes;
   /** onPress event for the close action (if set will render the filter X) */
   onClosePress?: (event: GestureResponderEvent) => void;
+  /** Break mode used on string type content (default is tail) */
+  breakMode?: TextBreakModes;
   /** Style to set on the item */
   style?: StyleProp<ViewStyle>;
   /** Direct props to set on the React Native component (including iOS and Android specific props). Most use cases should not need this. */
@@ -35,9 +37,10 @@ export class Tag extends React.Component<TagProps> {
       wrapper: {
         alignSelf: 'flex-start',
         borderRadius: 32,
-        height: 32,
+        minHeight: 32,
         backgroundColor: getColor('tagBackgroundGray'),
         flexDirection: 'row',
+        overflow: 'hidden',
       },
       textStyle: {
         padding: 7,
@@ -51,6 +54,7 @@ export class Tag extends React.Component<TagProps> {
         height: 32,
         width: 32,
         alignSelf: 'center',
+        justifyContent: 'center',
       },
     });
   }
@@ -81,6 +85,8 @@ export class Tag extends React.Component<TagProps> {
         return getColor('tagHoverCoolGray');
       case 'warm-gray':
         return getColor('tagHoverWarmGray');
+      case 'high-contrast':
+        return getColor('tagHoverHighContrast');
       case 'blue':
       default:
         return getColor('tagHoverBlue');
@@ -113,6 +119,8 @@ export class Tag extends React.Component<TagProps> {
         return getColor('tagColorCoolGray');
       case 'warm-gray':
         return getColor('tagColorWarmGray');
+      case 'high-contrast':
+        return getColor('tagColorHighContrast');
       case 'blue':
       default:
         return getColor('tagColorBlue');
@@ -145,6 +153,8 @@ export class Tag extends React.Component<TagProps> {
         return getColor('tagBackgroundCoolGray');
       case 'warm-gray':
         return getColor('tagBackgroundWarmGray');
+      case 'high-contrast':
+        return getColor('tagBackgroundHighContrast');
       case 'blue':
       default:
         return getColor('tagBackgroundBlue');
@@ -170,15 +180,15 @@ export class Tag extends React.Component<TagProps> {
   }
 
   render(): React.ReactNode {
-    const { title, componentProps, style } = this.props;
+    const { title, componentProps, style, breakMode } = this.props;
     const textStyle = styleReferenceBreaker(this.styles.textStyle);
     const wrapperStyle = styleReferenceBreaker(this.styles.wrapper, style);
     wrapperStyle.backgroundColor = this.backgroundColor;
     textStyle.color = this.textColor;
 
     return (
       <View style={wrapperStyle} {...(componentProps || {})}>
-        <Text type="label-02" breakMode="tail" style={textStyle} text={title} />
+        <Text type="label-02" breakMode={breakMode || 'tail'} style={textStyle} text={title} />
         {this.closeAction}
       </View>
     );

diff --git a/src/components/Text/index.tsx b/src/components/Text/index.tsx
@@ -7,16 +7,22 @@ import { Body01, Body02, BodyCompact01, BodyCompact02, Code01, Code02, Heading01
 /** Types of Text items */
 export type TextTypes = 'code-01' | 'code-02' | 'label-01' | 'label-02' | 'helper-text-01' | 'helper-text-02' | 'legal-01' | 'legal-02' | 'body-compact-01' | 'body-compact-02' | 'body-01' | 'body-02' | 'heading-compact-01' | 'heading-compact-02' | 'heading-01' | 'heading-02' | 'heading-03' | 'heading-04' | 'heading-05' | 'heading-06' | 'heading-07';
 
-/** Types of text break modes (where to apply ellipsis) */
-export type TextBreakModes = 'head' | 'middle' | 'tail';
+/**
+ * Types of text break modes (where to apply ellipsis)
+ * `head` - Ellipsis at the beginning
+ * `middle` - Ellipsis at the middle of string
+ * `tail` - Ellipsis at the end of string
+ * `wrap` - No ellipsis. Text will just run on. Wrapping style may need to handle this
+ *  */
+export type TextBreakModes = 'head' | 'middle' | 'tail' | 'wrap';
 
 /** Props for Text component */
 export type TextProps = {
   /** Text to render */
   text?: string;
   /** Type of text to render (style of Carbon) body-compact-02 is default */
   type?: TextTypes;
-  /** If set will not wrap text and use break mode (tail is normal use) */
+  /** Define the break mode to use. Undefined is same as wrap (tail is normal use) */
   breakMode?: TextBreakModes;
   /** Style to set on the item */
   style?: StyleProp<TextStyle>;
@@ -108,7 +114,7 @@ export class Text extends React.Component<TextProps> {
     const { text, breakMode, componentProps } = this.props;
 
     return (
-      <ReactText style={this.textStyle} numberOfLines={breakMode ? 1 : undefined} ellipsizeMode={breakMode} {...(componentProps || {})}>
+      <ReactText style={this.textStyle} numberOfLines={breakMode !== 'wrap' && !!breakMode ? 1 : undefined} ellipsizeMode={breakMode === 'wrap' ? undefined : breakMode} {...(componentProps || {})}>
         {text}
       </ReactText>
     );

diff --git a/src/styles/colors.ts b/src/styles/colors.ts
@@ -115,6 +115,9 @@ export const componentsG10: { [key: string]: string } = {
   tagBackgroundWarmGray: '#e5e0df',
   tagColorWarmGray: '#3c3838',
   tagHoverWarmGray: '#cac5c4',
+  tagColorHighContrast: '#ffffff',
+  tagHoverHighContrast: '#4c4c4c',
+  tagBackgroundHighContrast: '#393939',
   notificationBackgroundError: '#fff1f1',
   notificationBackgroundWarning: '#fdf6dd',
   notificationBackgroundSuccess: '#defbe6',
@@ -171,6 +174,9 @@ export const componentsG100: { [key: string]: string } = {
   tagBackgroundWarmGray: '#565151',
   tagColorWarmGray: '#e5e0df',
   tagHoverWarmGray: '#696363',
+  tagColorHighContrast: '#161616',
+  tagHoverHighContrast: '#e5e5e5',
+  tagBackgroundHighContrast: '#f4f4f4',
   notificationBackgroundError: '#fff1f1',
   notificationBackgroundWarning: '#fdf6dd',
   notificationBackgroundSuccess: '#defbe6',