fix: bugs from Carbon migration from GHE (#154)

* fix: bugs from Carbon migration from GHE * fix(#125): text input full bleed style fix
carbon-design-system · Sep 20, 2023 · 920c699 · 920c699
1 parent e7e8d7c
commit 920c699
Show file tree

Hide file tree

Showing 17 changed files with 208 additions and 65 deletions.
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -1,6 +1,6 @@
 PODS:
   - boost (1.76.0)
-  - carbon-react-native (1.0.0):
+  - carbon-react-native (6.0.0):
     - React-Core
   - CocoaAsyncSocket (7.6.5)
   - DoubleConversion (1.1.6)
@@ -674,7 +674,7 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost: a7c83b31436843459a1961bfd74b96033dc77234
-  carbon-react-native: 5b61fba297337e90af0bea05b2bf11dc78971647
+  carbon-react-native: b66424b9c34711ac58fedc9d81b5595dbf0dff5a
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   FBLazyVector: 55cd4593d570bd9e5e227488d637ce6a9581ce51

diff --git a/example/src/Views/ActionSheet.tsx b/example/src/Views/ActionSheet.tsx
@@ -25,21 +25,24 @@ export default class TestActionSheet extends React.Component {
     lotItems: false,
     dangerItem: false,
     imageSupport: false,
+    showDivider: false,
+    fullBleed: false,
   };
 
   private openActionSheeet = (): void => {
     this.setState({ open: true });
   };
 
   private get items(): ActionSheetItem[] {
-    const { dangerItem, imageSupport } = this.state;
+    const { dangerItem, imageSupport, showDivider } = this.state;
 
     return [
       {
         text: 'Cancel',
         onPress: () => {
           this.setState({ open: false });
         },
+        divider: showDivider,
       },
       {
         text: 'Item 1',
@@ -48,6 +51,7 @@ export default class TestActionSheet extends React.Component {
           this.setState({ open: false });
         },
         icon: imageSupport ? { image: require('../assets/react.png') } : undefined,
+        divider: showDivider,
       },
       {
         text: 'Item 2 wtih really long name that may be too long for many views',
@@ -56,6 +60,7 @@ export default class TestActionSheet extends React.Component {
           this.setState({ open: false });
         },
         icon: imageSupport ? { icon: PhoneIcon } : undefined,
+        divider: showDivider,
       },
       {
         text: 'Item 3 that is hidden',
@@ -64,6 +69,7 @@ export default class TestActionSheet extends React.Component {
           Alert.alert('Pressed item 3 on action sheet');
           this.setState({ open: false });
         },
+        divider: showDivider,
       },
       {
         text: 'Item 4',
@@ -73,12 +79,13 @@ export default class TestActionSheet extends React.Component {
           this.setState({ open: false });
         },
         icon: imageSupport ? { icon: PhoneIcon } : undefined,
+        divider: showDivider,
       },
     ];
   }
 
   render(): React.ReactNode {
-    const { open, showBody, forceCustom, lotItems, dangerItem, imageSupport } = this.state;
+    const { open, showBody, forceCustom, lotItems, dangerItem, imageSupport, showDivider, fullBleed } = this.state;
 
     return (
       <ScrollView keyboardShouldPersistTaps="handled" contentInsetAdjustmentBehavior="automatic" contentContainerStyle={styles.container} style={styles.view}>
@@ -87,8 +94,10 @@ export default class TestActionSheet extends React.Component {
         <Checkbox checked={lotItems} id="lot" onPress={(value) => this.setState({ lotItems: value })} label="Load lots of items" />
         <Checkbox checked={dangerItem} id="dangerItem" onPress={(value) => this.setState({ dangerItem: value })} label="Add danger item" />
         <Checkbox checked={imageSupport} id="imageSupport" onPress={(value) => this.setState({ imageSupport: value })} label="Render images for custom" />
+        <Checkbox checked={showDivider} id="showDivider" onPress={(value) => this.setState({ showDivider: value })} label="Show divider for custom" />
+        <Checkbox checked={fullBleed} id="fullBleed" onPress={(value) => this.setState({ fullBleed: value })} label="Full bleed for custom" />
         <Button onPress={this.openActionSheeet} text="Open action sheet" style={styles.button} />
-        <ActionSheet open={open} title="Action sheet title" body={showBody ? 'Useful info about what this action sheet does' : undefined} cancelButtonIndex={0} items={lotItems ? [...this.items, ...this.items, ...this.items, ...this.items] : this.items} forceCustomActionSheet={forceCustom} />
+        <ActionSheet open={open} title="Action sheet title" body={showBody ? 'Useful info about what this action sheet does' : undefined} cancelButtonIndex={0} items={lotItems ? [...this.items, ...this.items, ...this.items, ...this.items] : this.items} fullBleed={fullBleed} forceCustomActionSheet={forceCustom} />
       </ScrollView>
     );
   }

diff --git a/example/src/Views/Dropdown.tsx b/example/src/Views/Dropdown.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyleSheet, ScrollView, View } from 'react-native';
-import { Dropdown, DropdownItem } from '@carbon/react-native';
+import { Dropdown, DropdownItem, getColor } from '@carbon/react-native';
+import CodeIcon from '@carbon/icons/es/code/20';
 
 const styles = StyleSheet.create({
   view: {
@@ -48,6 +49,8 @@ export default class TestDropdown extends React.Component {
       {
         id: '4',
         text: 'Item 4',
+        icon: CodeIcon,
+        iconColor: getColor('supportError'),
       },
       {
         text: 'Item 5',
@@ -59,7 +62,7 @@ export default class TestDropdown extends React.Component {
       },
       {
         id: '67',
-        text: 'Item 7',
+        text: 'Super long item with text that will not fit most views but should wrap in the dropdown but on the main view should ellipsis.',
       },
     ];
   }

diff --git a/example/src/Views/FormItem.tsx b/example/src/Views/FormItem.tsx
@@ -31,6 +31,7 @@ export default class TestFormItem extends React.Component {
     age: '',
     birthDay: '',
     toggleTest: false,
+    renderLeft: false,
     volume: '35',
     paymentType: 'card',
   };
@@ -40,17 +41,18 @@ export default class TestFormItem extends React.Component {
   };
 
   render(): React.ReactNode {
-    const { firstName, password, textArea, age, birthDay, toggleTest, volume, paymentType } = this.state;
+    const { firstName, password, textArea, age, birthDay, toggleTest, volume, paymentType, renderLeft } = this.state;
 
     return (
       <ScrollView keyboardShouldPersistTaps="handled" contentInsetAdjustmentBehavior="automatic" contentContainerStyle={styles.container} style={styles.view}>
         <FormItem type="header" label="Choose payment type" helperText="Select a payment type to complete purchase" />
-        <FormItem type="checkbox" overrideActiveCheckboxIcon={RadioIcon} label="Credit card" helperText="All major cards accepted" value={paymentType === 'card'} onChange={() => this.setState({ paymentType: 'card' })} />
-        <FormItem type="checkbox" overrideActiveCheckboxIcon={RadioIcon} label="Electronic check" value={paymentType === 'check'} onChange={() => this.setState({ paymentType: 'check' })} />
-        <FormItem type="checkbox" overrideActiveCheckboxIcon={RadioIcon} label="Cash on delivery" value={paymentType === 'cash'} onChange={() => this.setState({ paymentType: 'cash' })} />
+        <FormItem type="checkbox" renderToggleCheckboxLeft={renderLeft} overrideActiveCheckboxIcon={RadioIcon} label="Credit card" helperText="All major cards accepted" value={paymentType === 'card'} onChange={() => this.setState({ paymentType: 'card' })} />
+        <FormItem type="checkbox" renderToggleCheckboxLeft={renderLeft} overrideActiveCheckboxIcon={RadioIcon} label="Electronic check" value={paymentType === 'check'} onChange={() => this.setState({ paymentType: 'check' })} />
+        <FormItem type="checkbox" renderToggleCheckboxLeft={renderLeft} overrideActiveCheckboxIcon={RadioIcon} label="Cash on delivery" value={paymentType === 'cash'} onChange={() => this.setState({ paymentType: 'cash' })} />
         <FormItem type="header" label="Example header" helperText="Helper text to explain what the form section below includes" />
         <FormItem type="text" label="First name" helperText="This will be your first name" value={firstName} onChange={(value) => this.setState({ firstName: value })} textInputProps={{ required: true, getErrorText: () => 'Item is required', placeholder: 'Required' }} />
-        <FormItem type="toggle" label="Raise to wake" value={toggleTest} onChange={(value) => this.setState({ toggleTest: value })} toggleValueText={(value) => (value ? 'On' : 'Off')} />
+        <FormItem type="toggle" label="Raise to wake" value={toggleTest} renderToggleCheckboxLeft={renderLeft} onChange={(value) => this.setState({ toggleTest: value })} toggleValueText={(value) => (value ? 'On' : 'Off')} />
+        <FormItem type="toggle" label="Move to left" helperText="Move checkbox/toggle to left side" value={renderLeft} renderToggleCheckboxLeft={renderLeft} onChange={(value) => this.setState({ renderLeft: value })} toggleValueText={(value) => (value ? 'On' : 'Off')} />
         <FormItem type="password" label="Password" value={password} onChange={(value) => this.setState({ password: value })} />
         <FormItem type="text-area" lastItem={true} label="Text area" value={textArea} onChange={(value) => this.setState({ textArea: value })} />
         <FormItem type="header" label="Additional content" helperText="Provide more info here" />

diff --git a/example/src/Views/Menu.tsx b/example/src/Views/Menu.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyleSheet, ScrollView, View, Alert } from 'react-native';
-import { Menu, MenuItemProps } from '@carbon/react-native';
+import { Checkbox, Menu, MenuItemProps, getColor } from '@carbon/react-native';
+import CodeIcon from '@carbon/icons/es/code/20';
 
 const styles = StyleSheet.create({
   view: {
@@ -18,42 +19,67 @@ const styles = StyleSheet.create({
 });
 
 export default class TestMenu extends React.Component {
+  state = {
+    showIcons: false,
+    changeIconColor: false,
+    showDivider: false,
+  };
+
   private alert = (text: string): void => {
     Alert.alert(text);
   };
 
   private get regular(): MenuItemProps[] {
+    const { showIcons, changeIconColor, showDivider } = this.state;
+
     return [
       {
         text: 'Item 1',
         onPress: () => this.alert('Item 1 pressed'),
         onLongPress: () => this.alert('Item 1 long pressed'),
+        icon: showIcons ? CodeIcon : undefined,
+        iconColor: changeIconColor ? getColor('supportSuccess') : undefined,
+        divider: showDivider,
       },
       {
         text: 'Item 2 with really long text that will go into ellipsis instead of wrapping like the one below',
         textBreakMode: 'tail',
         onPress: () => this.alert('Item 2 pressed'),
+        icon: showIcons ? CodeIcon : undefined,
+        iconColor: changeIconColor ? getColor('supportSuccess') : undefined,
+        divider: showDivider,
       },
       {
         text: 'Item 3',
         disabled: true,
         onPress: () => this.alert('Item 3 pressed'),
         onLongPress: () => this.alert('Item 3 long pressed'),
+        icon: showIcons ? CodeIcon : undefined,
+        iconColor: changeIconColor ? getColor('supportSuccess') : undefined,
+        divider: showDivider,
       },
       {
         text: 'Item 4 with really long name for wrapping the text and not going to ellipsis',
         onPress: () => this.alert('Item 4 pressed'),
         onLongPress: () => this.alert('Item 4 long pressed'),
+        icon: showIcons ? CodeIcon : undefined,
+        iconColor: changeIconColor ? getColor('supportSuccess') : undefined,
+        divider: showDivider,
       },
     ];
   }
 
   private get many(): MenuItemProps[] {
+    const { showIcons, changeIconColor, showDivider } = this.state;
+
     const getItem = (num: number): MenuItemProps => {
       return {
         text: `Item ${num}`,
         onPress: () => this.alert(`Item ${num} pressed`),
         onLongPress: () => this.alert(`Item ${num}1 long pressed`),
+        icon: showIcons ? CodeIcon : undefined,
+        iconColor: changeIconColor ? getColor('supportSuccess') : undefined,
+        divider: showDivider,
       };
     };
 
@@ -69,8 +95,13 @@ export default class TestMenu extends React.Component {
   }
 
   render(): React.ReactNode {
+    const { showIcons, changeIconColor, showDivider } = this.state;
+
     return (
       <ScrollView keyboardShouldPersistTaps="handled" contentInsetAdjustmentBehavior="automatic" contentContainerStyle={styles.container} style={styles.view}>
+        <Checkbox checked={showIcons} id="showIcons" onPress={(value) => this.setState({ showIcons: value })} label="Show icons" />
+        <Checkbox checked={changeIconColor} id="changeIconColor" onPress={(value) => this.setState({ changeIconColor: value })} label="Render icon in custom color" />
+        <Checkbox checked={showDivider} id="showDivider" onPress={(value) => this.setState({ showDivider: value })} label="Show Divider" />
         <View style={styles.itemStyle}>
           <Menu items={this.regular} />
         </View>

diff --git a/example/src/Views/TextInput.tsx b/example/src/Views/TextInput.tsx
@@ -24,14 +24,15 @@ export default class TestTextInput extends React.Component {
     value5: '',
     value6: 'Can not change me',
     value7: '',
+    value8: '',
   };
 
   private changeText = (field: string, value: string): void => {
     this.setState({ [field]: value });
   };
 
   render(): React.ReactNode {
-    const { value1, value2, value3, value4, value5, value6, value7 } = this.state;
+    const { value1, value2, value3, value4, value5, value6, value7, value8 } = this.state;
 
     return (
       <ScrollView keyboardShouldPersistTaps="handled" contentInsetAdjustmentBehavior="automatic" contentContainerStyle={styles.container} style={styles.view}>
@@ -53,6 +54,9 @@ export default class TestTextInput extends React.Component {
         <View style={styles.itemStyle}>
           <TextInput label="I can be invalid" isInvalid={(value) => value?.toLowerCase().indexOf('https') !== 0} value={value7} placeholder="I must start with https or will error" onChangeText={(value) => this.changeText('value7', value)} getErrorText={() => 'Must start with https'} />
         </View>
+        <View style={styles.itemStyle}>
+          <TextInput label="I have a warning" required={true} value={value8} warningText="Here is a warning" helperText="I am helper text that is really long explaining how this input should work and stuff" onChangeText={(value) => this.changeText('value8', value)} getErrorText={() => 'This is required.'} />
+        </View>
         <View style={styles.itemStyle}>
           <TextInput label="I am disabled" disabled={true} value={value6} onChangeText={(value) => this.changeText('value6', value)} />
         </View>

diff --git a/src/components/ActionSheet/index.tsx b/src/components/ActionSheet/index.tsx
@@ -24,6 +24,8 @@ export type ActionSheetItem = {
   };
   /** Press event (this will also automatically close the ActionSheet as well) */
   onPress: () => void;
+  /** Indicate that divider should be rendered (does not apply to last item, and only for non system ActionSheet) */
+  divider?: boolean;
 };
 
 export type ActionSheetProps = {
@@ -39,6 +41,8 @@ export type ActionSheetProps = {
   open: boolean;
   /** Force use of the custom action sheet (even if System is supported) */
   forceCustomActionSheet?: boolean;
+  /** Indicate that Action Sheet should go full bleed */
+  fullBleed?: boolean;
 };
 
 /**
@@ -47,6 +51,8 @@ export type ActionSheetProps = {
  */
 export class ActionSheet extends React.Component<ActionSheetProps> {
   private get styles() {
+    const { fullBleed } = this.props;
+
     return StyleSheet.create({
       modal: {
         zIndex: zIndexes.actionSheet,
@@ -60,7 +66,7 @@ export class ActionSheet extends React.Component<ActionSheetProps> {
       containerWrapper: {
         flexGrow: 1,
         flexDirection: 'row-reverse',
-        margin: 16,
+        margin: fullBleed ? 0 : 16,
         maxWidth: 480,
       },
       blurBackground: {
@@ -205,6 +211,7 @@ export class ActionSheet extends React.Component<ActionSheetProps> {
                 <ScrollView bounces={false} style={this.styles.options}>
                   {options.map((item, index) => {
                     const finalStyle = styleReferenceBreaker(this.styles.option);
+                    const lastItem = index === options.length - 1;
 
                     let imageItem: React.ReactNode | undefined;
 
@@ -218,6 +225,11 @@ export class ActionSheet extends React.Component<ActionSheetProps> {
                       finalStyle.backgroundColor = getColor('buttonDangerPrimary');
                     }
 
+                    if (item.divider && !lastItem) {
+                      finalStyle.borderBottomColor = finalStyle.borderBottomColor || getColor('borderSubtle00');
+                      finalStyle.borderBottomWidth = finalStyle.borderBottomWidth || 1;
+                    }
+
                     return (
                       <Pressable
                         style={(state) => pressableFeedbackStyle(state, finalStyle, this.getStateStyle)}