react-native-molecules 0.5.0-beta.2 → 0.5.0-beta.20

package/components/IconButton/IconButton.tsx

@@ -5,15 +5,13 @@ import {
     type StyleProp,
     type TextStyle,
     type ViewProps,
-    type ViewStyle,
 } from 'react-native';
 
 import { useActionState } from '../../hooks/useActionState';
 import { resolveStateVariant } from '../../utils';
-import { Icon, type IconType } from '../Icon';
+import { Icon, type IconProps, type IconType } from '../Icon';
 import CrossFadeIcon from '../Icon/CrossFadeIcon';
 import { StateLayer } from '../StateLayer';
-import { Surface } from '../Surface';
 import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
 import type { IconButtonVariant } from './types';
 import { defaultStyles, iconButtonSizeToIconSizeMap } from './utils';
@@ -63,14 +61,11 @@ export type Props = Omit<TouchableRippleProps, 'children' | 'style'> & {
      */
     style?: StyleProp<TextStyle>;
     iconStyle?: StyleProp<TextStyle>;
+    iconProps?: Omit<IconProps, 'name' | 'type' | 'style' | 'color' | 'size'>;
     /**
      * color of the icon
      */
     color?: string;
-    /**
-     * Style of the innerContainer
-     */
-    innerContainerStyle?: ViewStyle;
     /**
      * Props for the state layer
      * */
@@ -92,10 +87,10 @@ const IconButton = (
         animated = false,
         variant = 'default',
         style,
-        innerContainerStyle: innerContainerStyleProp = emptyObject,
         testID,
         stateLayerProps = emptyObject,
-        iconStyle,
+        iconStyle: iconStyleProp,
+        iconProps,
         ...rest
     }: Props,
     ref: any,
@@ -126,9 +121,9 @@ const IconButton = (
         rippleColor,
         containerStyle,
         accessibilityState,
-        innerContainerStyle,
         // accessibilityTraits,
         stateLayerStyle,
+        iconStyle,
     } = useMemo(() => {
         const iconSizeInNum =
             iconButtonSizeToIconSizeMap[size as keyof typeof iconButtonSizeToIconSizeMap] ??
@@ -146,7 +141,6 @@ const IconButton = (
             iconColor: _iconColor,
             iconSize: iconSizeInNum,
             rippleColor: _rippleColor,
-            innerContainerStyle: [defaultStyles.innerContainer, innerContainerStyleProp],
             containerStyle: [
                 iconSizeInNum
                     ? {
@@ -157,60 +151,51 @@ const IconButton = (
                 defaultStyles.root,
                 style,
             ],
+            iconStyle: [defaultStyles.icon, iconStyleProp],
             // accessibilityTraits: disabled ? ['button', 'disabled'] : 'button',
             accessibilityState: { disabled },
             stateLayerStyle: [defaultStyles.stateLayer, stateLayerProps?.style],
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        _iconColor,
-        disabled,
-        innerContainerStyleProp,
-        size,
-        stateLayerProps?.style,
-        style,
-        state,
-        variant,
-    ]);
+    }, [_iconColor, disabled, size, stateLayerProps?.style, style, state, variant]);
 
     return (
-        <Surface style={containerStyle} elevation={0}>
-            <TouchableRipple
-                borderless
-                centered
-                onPress={onPress}
-                rippleColor={rippleColor}
-                accessibilityLabel={accessibilityLabel}
-                style={innerContainerStyle}
-                // accessibilityTraits={accessibilityTraits}
-                // accessibilityComponentType="button"
-                accessibilityRole="button"
-                accessibilityState={accessibilityState}
-                disabled={disabled}
-                hitSlop={
-                    // @ts-ignore
-                    TouchableRipple?.supported ? rippleSupportedHitSlop : rippleUnsupportedHitSlop
-                }
+        <TouchableRipple
+            borderless
+            centered
+            onPress={onPress}
+            rippleColor={rippleColor}
+            accessibilityLabel={accessibilityLabel}
+            style={containerStyle}
+            // accessibilityTraits={accessibilityTraits}
+            // accessibilityComponentType="button"
+            accessibilityRole="button"
+            accessibilityState={accessibilityState}
+            disabled={disabled}
+            hitSlop={
                 // @ts-ignore
-                ref={actionsRef}
-                testID={testID}
-                {...rest}>
-                <>
-                    <IconComponent
-                        color={iconColor}
-                        name={name}
-                        size={iconSize}
-                        type={type}
-                        style={iconStyle}
-                    />
-                    <StateLayer
-                        testID={testID ? `${testID}-stateLayer` : ''}
-                        {...stateLayerProps}
-                        style={stateLayerStyle}
-                    />
-                </>
-            </TouchableRipple>
-        </Surface>
+                TouchableRipple?.supported ? rippleSupportedHitSlop : rippleUnsupportedHitSlop
+            }
+            // @ts-ignore
+            ref={actionsRef}
+            testID={testID}
+            {...rest}>
+            <>
+                <IconComponent
+                    color={iconColor}
+                    name={name}
+                    size={iconSize}
+                    type={type}
+                    style={iconStyle}
+                    {...iconProps}
+                />
+                <StateLayer
+                    testID={testID ? `${testID}-stateLayer` : ''}
+                    {...stateLayerProps}
+                    style={stateLayerStyle}
+                />
+            </>
+        </TouchableRipple>
     );
 };
 

package/components/IconButton/utils.ts

@@ -22,11 +22,12 @@ const iconButtonSizeToIconSizeMapDefault = {
 const iconButtonStylesDefault = StyleSheet.create(theme => ({
     root: {
         borderColor: theme.colors.outline,
-        color: theme.colors.onSurfaceVariant,
         borderRadius: theme.shapes.corner.full,
         overflow: 'hidden',
         borderWidth: 0,
         backgroundColor: 'transparent',
+        justifyContent: 'center',
+        alignItems: 'center',
 
         variants: {
             size: {
@@ -71,16 +72,13 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
 
                 contained: {
                     backgroundColor: theme.colors.surfaceVariant,
-                    color: theme.colors.primary,
                 },
 
                 'contained-tonal': {
                     backgroundColor: theme.colors.surfaceVariant,
-                    color: theme.colors.onSurfaceVariant,
                 },
 
                 outlined: {
-                    color: theme.colors.onSurfaceVariant,
                     borderWidth: 1,
                 },
             },
@@ -90,30 +88,23 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
             {
                 variant: 'default',
                 state: 'selectedAndDisabled',
-                styles: {
-                    color: theme.colors.primary,
-                },
+                styles: {},
             },
             {
                 variant: 'default',
                 state: 'selected',
-                styles: {
-                    color: theme.colors.primary,
-                },
+                styles: {},
             },
             {
                 variant: 'default',
                 state: 'selectedAndHovered',
-                styles: {
-                    color: theme.colors.primary,
-                },
+                styles: {},
             },
             {
                 variant: 'contained',
                 state: 'selectedAndDisabled',
                 styles: {
                     backgroundColor: theme.colors.primary,
-                    color: theme.colors.onPrimary,
                 },
             },
             {
@@ -128,14 +119,13 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selected',
                 styles: {
                     backgroundColor: theme.colors.primary,
-                    color: theme.colors.onPrimary,
                 },
             },
             {
                 variant: 'contained',
                 state: 'selectedAndHovered',
                 styles: {
-                    color: theme.colors.primary,
+                    backgroundColor: theme.colors.primary,
                 },
             },
             {
@@ -143,7 +133,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'hovered',
                 styles: {
                     backgroundColor: theme.colors.primary,
-                    color: theme.colors.onPrimary,
                 },
             },
             {
@@ -151,7 +140,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selectedAndDisabled',
                 styles: {
                     backgroundColor: theme.colors.secondaryContainer,
-                    color: theme.colors.onSecondaryContainer,
                 },
             },
             {
@@ -166,7 +154,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selected',
                 styles: {
                     backgroundColor: theme.colors.secondaryContainer,
-                    color: theme.colors.onSecondaryContainer,
                 },
             },
             {
@@ -174,7 +161,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selectedAndHovered',
                 styles: {
                     backgroundColor: theme.colors.secondaryContainer,
-                    color: theme.colors.onSecondaryContainer,
                 },
             },
             {
@@ -182,7 +168,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selectedAndDisabled',
                 styles: {
                     backgroundColor: theme.colors.inverseSurface,
-                    color: theme.colors.inverseOnSurface,
                     borderWidth: 0,
                 },
             },
@@ -198,7 +183,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selected',
                 styles: {
                     backgroundColor: theme.colors.inverseSurface,
-                    color: theme.colors.inverseOnSurface,
                     borderWidth: 0,
                 },
             },
@@ -207,17 +191,12 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selectedAndHovered',
                 styles: {
                     backgroundColor: theme.colors.secondaryContainer,
-                    color: theme.colors.onSecondaryContainer,
                 },
             },
             {
                 variant: 'outlined',
                 state: 'hovered',
-                styles: {
-                    backgroundColor: theme.colors.inverseSurface,
-                    color: theme.colors.inverseOnSurface,
-                    borderWidth: 0,
-                },
+                styles: {},
             },
         ],
     },
@@ -296,16 +275,146 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 variant: 'outlined',
                 state: 'hovered',
                 styles: {
-                    backgroundColor: theme.colors.stateLayer.hover.inverseOnSurface,
+                    backgroundColor: theme.colors.stateLayer.hover.onSurfaceVariant,
                 },
             },
         ],
     },
 
-    innerContainer: {
-        flexGrow: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
+    icon: {
+        color: theme.colors.onSurfaceVariant,
+
+        variants: {
+            variant: {
+                default: {},
+
+                contained: {
+                    color: theme.colors.primary,
+                },
+
+                'contained-tonal': {
+                    color: theme.colors.onSurfaceVariant,
+                },
+
+                outlined: {
+                    color: theme.colors.onSurfaceVariant,
+                },
+            },
+        },
+
+        compoundVariants: [
+            {
+                variant: 'default',
+                state: 'selectedAndDisabled',
+                styles: {
+                    color: theme.colors.primary,
+                },
+            },
+            {
+                variant: 'default',
+                state: 'selected',
+                styles: {
+                    color: theme.colors.primary,
+                },
+            },
+            {
+                variant: 'default',
+                state: 'selectedAndHovered',
+                styles: {
+                    color: theme.colors.primary,
+                },
+            },
+            {
+                variant: 'contained',
+                state: 'selectedAndDisabled',
+                styles: {
+                    color: theme.colors.onPrimary,
+                },
+            },
+            {
+                variant: 'contained',
+                state: 'disabled',
+                styles: {},
+            },
+            {
+                variant: 'contained',
+                state: 'selected',
+                styles: {
+                    color: theme.colors.onPrimary,
+                },
+            },
+            {
+                variant: 'contained',
+                state: 'selectedAndHovered',
+                styles: {
+                    color: theme.colors.onPrimary,
+                },
+            },
+            {
+                variant: 'contained',
+                state: 'hovered',
+                styles: {
+                    color: theme.colors.onPrimary,
+                },
+            },
+            {
+                variant: 'contained-tonal',
+                state: 'selectedAndDisabled',
+                styles: {
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
+            {
+                variant: 'contained-tonal',
+                state: 'disabled',
+                styles: {},
+            },
+            {
+                variant: 'contained-tonal',
+                state: 'selected',
+                styles: {
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
+            {
+                variant: 'contained-tonal',
+                state: 'selectedAndHovered',
+                styles: {
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'selectedAndDisabled',
+                styles: {
+                    color: theme.colors.inverseOnSurface,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'disabled',
+                styles: {},
+            },
+            {
+                variant: 'outlined',
+                state: 'selected',
+                styles: {
+                    color: theme.colors.inverseOnSurface,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'selectedAndHovered',
+                styles: {
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'hovered',
+                styles: {},
+            },
+        ],
     },
 }));
 

package/components/ListItem/ListItem.tsx

@@ -37,6 +37,7 @@ export type Props = Omit<TouchableRippleProps, 'children'> &
          * @default true if onPress is passed
          */
         hoverable?: boolean;
+        contentStyle?: StyleProp<ViewStyle>;
     };
 
 const ListItem = (
@@ -52,6 +53,7 @@ const ListItem = (
         onPress,
         hoverable: hoverableProp = false,
         hovered: hoveredProp = false,
+        contentStyle: contentStyleProp,
         ...props
     }: Props,
     ref: any,
@@ -108,7 +110,7 @@ const ListItem = (
                             {typeof left === 'function' ? left({ hovered }) : left}
                         </View>
                     ) : null}
-                    <View style={contentStyle}>
+                    <View style={[contentStyle, contentStyleProp]}>
                         <ListItemContext.Provider value={contextValue}>
                             <>{children}</>
                         </ListItemContext.Provider>

package/components/ListItem/utils.ts

@@ -56,7 +56,7 @@ const listItemStylesDefault = StyleSheet.create(theme => ({
         variants: {
             state: {
                 hovered: {
-                    backgroundColor: theme.colors.stateLayer.hover.primary,
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
                 },
             },
         },