ActionSheet does not follow theme colors from the designTokens

[Tolga Yiğit]

Description

The ActionSheet component does not follow theme colors from the designTokens.

Related to

• Components
• Demo
• Docs
• Typings

Steps to reproduce

1. Use the ActionSheet component in a project.
2. Apply theme colors from designTokens.
3. Open the ActionSheet.

Expected behavior

I expected the ActionSheet to follow the theme colors specified in designTokens.

Actual behavior

The ActionSheet does not adopt the theme colors from designTokens, and instead, it displays using static color modifiers.

More Info

In the given code snippets, both the styles of the action sheet and the renderAction function contain static color modifiers. They should be modified to utilize colors from the designTokens.

Code snippet

export const MyComponent = () => {
  const [showActionSheet, setShowActionSheet] = useState(false);

  return (
    <ActionSheet
      useSafeArea
      migrateDialog
      options={[
        {
          label: 'Refresh',
          onPress: () => {
            console.log('Refresh');
          },
        },
      ]}
      visible={showActionSheet}
      onDismiss={() => setShowActionSheet(false)}
    />
  );
};

Here is the style of the action sheet:

react-native-ui-lib/src/components/actionSheet/index.tsx

Lines 288 to 306 in 6089796

 const styles = StyleSheet.create({ 
   sheet: { 
     backgroundColor: Colors.white 
   }, 
   dialog: { 
     backgroundColor: Colors.white 
   }, 
   incubatorDialog: { 
     backgroundColor: Colors.white, 
     marginBottom: 0 
   }, 
   listWithTitle: { 
     paddingBottom: VERTICAL_PADDING 
   }, 
   listNoTitle: { 
     paddingTop: VERTICAL_PADDING, 
     paddingBottom: VERTICAL_PADDING 
   } 
 }); 

renderAction function:

react-native-ui-lib/src/components/actionSheet/index.tsx

Lines 165 to 183 in 6089796

 renderAction(option: ButtonProps, index: number) { 
   return ( 
     <ListItem 
       style={{backgroundColor: 'transparent'}} 
       height={48} 
       key={index} 
       testID={option.testID} 
       onPress={() => this.onOptionPress(index)} 
       activeBackgroundColor={Colors.grey80} 
     > 
       <View row paddingL-16 flex centerV> 
         {this.handleRenderIcon(option)} 
         <Text text70 grey10 numberOfLines={1} style={option.labelStyle}> 
           {option.label} 
         </Text> 
       </View> 
     </ListItem> 
   ); 
 } 

Screenshots/Video

Environment

• React Native version: 0.72.6
• React Native UI Lib version: 7.14.5

Affected platforms

• Android
• iOS
• Web

[Tolga Yiğit]

Here is the pull request for the fix: #2952