react-native-molecules 0.5.0-beta.4 → 0.5.0-beta.5

package/components/Button/Button.tsx

@@ -12,7 +12,6 @@ import { type StyleProp, type TextStyle, View, type ViewProps, type ViewStyle }
 import { useActionState } from '../../hooks';
 import type { MD3Elevation } from '../../types/theme';
 import { resolveStateVariant } from '../../utils';
-import { extractPropertiesFromStyles } from '../../utils/extractPropertiesFromStyles';
 import { ActivityIndicator } from '../ActivityIndicator';
 import { Icon, type IconType } from '../Icon';
 import { StateLayer } from '../StateLayer';
@@ -200,7 +199,6 @@ const Button = (
         surfaceStyle,
         textStyle,
         iconStyle,
-        viewStyle,
         iconContainerStyle,
         accessibilityState,
         stateLayerStyle,
@@ -208,12 +206,6 @@ const Button = (
         const { button, content, icon, iconTextMode, label, labelText, labelTextAddons } =
             defaultStyles;
 
-        // for mobile
-        const { borderRadius } = extractPropertiesFromStyles(
-            [defaultStyles.root, styleProp],
-            ['borderRadius'],
-        );
-
         const backgroundColor = customButtonColor && !disabled ? customButtonColor : undefined;
 
         const _iconStyle = [icon, isVariant('text') && iconTextMode];
@@ -235,18 +227,14 @@ const Button = (
             rippleColor: _rippleColor,
             surfaceStyle: [
                 button,
+                content,
                 backgroundColor ? { backgroundColor } : {},
                 defaultStyles.root,
                 styleProp,
+                contentStyle,
             ],
 
             iconStyle: [_iconStyle, textRelatedStyle, _iconStyleProp] as unknown as ViewStyle,
-            viewStyle: [
-                content,
-                { flexGrow: 1 },
-                borderRadius ? { borderRadius } : {},
-                contentStyle,
-            ],
             iconContainerStyle: [defaultStyles.iconContainer, iconContainerStyleProp],
             textStyle: [
                 // @ts-ignore // TODO - fix this
@@ -274,10 +262,7 @@ const Button = (
         styleProp,
     ]);
 
-    const elevation = useMemo(
-        () => (elevationProp === undefined ? elevationLevel ?? 0 : elevationProp),
-        [elevationLevel, elevationProp],
-    );
+    const elevation = elevationProp === undefined ? elevationLevel ?? 0 : elevationProp;
 
     return (
         <Surface
@@ -289,7 +274,8 @@ const Button = (
                     : hovered
                     ? (elevationProp || 0) + elevationLevel
                     : elevation) as MD3Elevation
-            }>
+            }
+            asChild>
             <TouchableRipple
                 borderless
                 onPress={onPress}
@@ -303,7 +289,6 @@ const Button = (
                 accessible={accessible}
                 disabled={disabled}
                 rippleColor={rippleColor}
-                style={viewStyle}
                 ref={actionsRef}
                 testID={testID}>
                 <>

package/components/Button/utils.ts

@@ -192,7 +192,6 @@ const defaultStylesDefault = StyleSheet.create(theme => {
             flexDirection: 'row',
             alignItems: 'center',
             justifyContent: 'center',
-            flexGrow: 1,
         },
         iconContainer: {
             ...(Platform.OS !== 'web'

package/components/Chip/Chip.tsx

@@ -97,10 +97,6 @@ export type Props = Omit<TouchableRippleProps, 'children'> &
          * Whether to show the ActivityIndicator or not
          */
         loading?: boolean;
-        /**
-         * container style
-         */
-        containerStyle?: ViewStyle;
         /**
          * left element container style
          */
@@ -132,7 +128,6 @@ export type Props = Omit<TouchableRippleProps, 'children'> &
 const Chip = (
     {
         style,
-        containerStyle: containerStyleProp,
         label: _label,
         labelCharacterLimit = 20,
         variant = 'outlined',
@@ -158,11 +153,13 @@ const Chip = (
         leftElementIconProps,
         invertLabelColor,
         backgroundColor,
+        onPress,
         ...rest
     }: Props,
     ref: any,
 ) => {
     const { hovered, actionsRef } = useActionState({ ref, actionsToListen: ['hover'] });
+    const Wrapper = onPress ? TouchableRipple : View;
 
     const state = resolveStateVariant({
         disabled: !!disabled,
@@ -192,47 +189,39 @@ const Chip = (
     //     selectedColorProp ? { selectedColor: selectedColorProp } : {},
     // ]);
 
-    const {
-        containerStyle,
-        touchableRippleStyle,
-        leftElementStyle,
-        rightElementStyle,
-        labelStyle,
-        stateLayerStyle,
-    } = useMemo(() => {
-        return {
-            containerStyle: [
-                styles.container,
-                selected && selectionBackgroundColor
-                    ? { backgroundColor: selectionBackgroundColor }
-                    : {},
-                containerStyleProp,
-            ],
-            touchableRippleStyle: [styles.touchableRippleContainer, style],
-            leftElementStyle: [styles.leftElement, leftElementContainerStyle],
-            rightElementStyle: [styles.rightElement, rightElementContainerStyle],
-            labelStyle: [
-                styles.label,
-                selected && selectedColor ? { color: selectedColor } : {},
-                labelStyleProp,
-            ],
-            stateLayerStyle: [styles.stateLayer, stateLayerProps?.style],
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        leftElementContainerStyle,
-        rightElementContainerStyle,
-        selected,
-        selectedColor,
-        selectionBackgroundColor,
-        stateLayerProps?.style,
-        style,
-        containerStyleProp,
-        labelStyleProp,
-        state,
-        size,
-        variant,
-    ]);
+    const { containerStyle, leftElementStyle, rightElementStyle, labelStyle, stateLayerStyle } =
+        useMemo(() => {
+            return {
+                containerStyle: [
+                    styles.container,
+                    selected && selectionBackgroundColor
+                        ? { backgroundColor: selectionBackgroundColor }
+                        : {},
+                    style,
+                ],
+                leftElementStyle: [styles.leftElement, leftElementContainerStyle],
+                rightElementStyle: [styles.rightElement, rightElementContainerStyle],
+                labelStyle: [
+                    styles.label,
+                    selected && selectedColor ? { color: selectedColor } : {},
+                    labelStyleProp,
+                ],
+                stateLayerStyle: [styles.stateLayer, stateLayerProps?.style],
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [
+            leftElementContainerStyle,
+            rightElementContainerStyle,
+            selected,
+            selectedColor,
+            selectionBackgroundColor,
+            stateLayerProps?.style,
+            style,
+            labelStyleProp,
+            state,
+            size,
+            variant,
+        ]);
 
     const { accessibilityState, elevation } = useMemo(
         () => ({
@@ -251,14 +240,13 @@ const Chip = (
             {...containerProps}
             elevation={elevation}
             style={containerStyle}
-            backgroundColor={backgroundColor}>
-            <TouchableRipple
+            backgroundColor={backgroundColor}
+            asChild>
+            <Wrapper
                 borderless
                 {...rest}
                 disabled={disabled}
-                style={touchableRippleStyle}
                 accessibilityLabel={accessibilityLabel}
-                accessibilityRole="button"
                 accessibilityState={accessibilityState}
                 ref={actionsRef}
                 testID={testID}>
@@ -297,7 +285,7 @@ const Chip = (
                         style={stateLayerStyle}
                     />
                 </>
-            </TouchableRipple>
+            </Wrapper>
         </Surface>
     );
 };

package/components/Chip/utils.ts

@@ -6,6 +6,9 @@ const chipStylesDefault = StyleSheet.create(theme => ({
     container: {
         borderRadius: theme.shapes.corner.small,
         backgroundColor: theme.colors.surface,
+        paddingHorizontal: theme.spacings['2'],
+        flexDirection: 'row',
+        alignItems: 'center',
 
         variants: {
             variant: {
@@ -47,13 +50,6 @@ const chipStylesDefault = StyleSheet.create(theme => ({
             },
         },
     },
-    touchableRippleContainer: {
-        flex: 1,
-        paddingHorizontal: theme.spacings['2'],
-        borderRadius: theme.shapes.corner.small,
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
     label: {
         display: 'flex',
         color: theme.colors.onSurfaceVariant,

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

@@ -27,6 +27,9 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
         overflow: 'hidden',
         borderWidth: 0,
         backgroundColor: 'transparent',
+        flexGrow: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
 
         variants: {
             size: {
@@ -302,11 +305,7 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
         ],
     },
 
-    innerContainer: {
-        flexGrow: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
+    icon: {},
 }));
 
 export const defaultStyles = getRegisteredComponentStylesWithFallback(