@hero-design/rn 8.67.0-alpha.2 → 8.67.0-alpha.3

package/src/components/Chip/__tests__/index.spec.tsx

@@ -35,41 +35,12 @@ describe('Chip', () => {
       <ChipWithoutIcon />
     );
 
-    expect(queryByTestId('chip-icon-checkmark')).toBeFalsy();
+    expect(queryByTestId('selected-chip-icon-cancel')).toBeFalsy();
     expect(toJSON()).toMatchSnapshot();
 
     fireEvent.press(getByTestId('chip'));
 
-    expect(getByTestId('chip-icon-checkmark')).toBeTruthy();
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('does not render icon when variant is outlined', () => {
-    const ChipWithIcon = () => {
-      const [selected, setSelected] = React.useState(false);
-
-      return (
-        <Chip
-          label="Cover my bills"
-          testID="chip"
-          icon="charging-station-outlined"
-          selected={selected}
-          variant="outlined"
-          onPress={() => setSelected(!selected)}
-        />
-      );
-    };
-
-    const { getByTestId, toJSON, queryByTestId } = renderWithTheme(
-      <ChipWithIcon />
-    );
-
-    expect(queryByTestId('chip-icon-charging-station-outlined')).toBeFalsy();
-    expect(toJSON()).toMatchSnapshot();
-
-    fireEvent.press(getByTestId('chip'));
-
-    expect(queryByTestId('chip-icon-charging-station-outlined')).toBeFalsy();
+    expect(getByTestId('selected-chip-icon-cancel')).toBeTruthy();
     expect(toJSON()).toMatchSnapshot();
   });
 

package/src/components/Chip/index.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
 import { ViewProps } from 'react-native';
-import { IconName } from '../Icon';
-import {
-  StyledChipWrapper,
-  StyledIcon,
-  StyledIconWrapper,
-  StyledLabel,
-} from './StyledChip';
+import Box from '../Box';
+import Icon, { IconName } from '../Icon';
+import Typography from '../Typography';
+import { StyledChipWrapper } from './StyledChip';
 
 export interface ChipProps extends ViewProps {
   /**
@@ -39,16 +36,6 @@ const Chip = ({
   onPress,
   ...otherProps
 }: ChipProps) => {
-  const internalIcon = React.useMemo(() => {
-    if (icon && variant === 'filled') {
-      return icon;
-    }
-    if (selected) {
-      return 'checkmark';
-    }
-    return undefined;
-  }, [icon, selected, variant]);
-
   return (
     <StyledChipWrapper
       onPress={onPress}
@@ -56,25 +43,23 @@ const Chip = ({
       themeSelected={selected}
       {...otherProps}
     >
-      {internalIcon && (
-        <StyledIconWrapper>
-          <StyledIcon
+      {icon && (
+        <Box marginRight="small">
+          <Icon size="xsmall" icon={icon} testID={`chip-icon-${icon}`} />
+        </Box>
+      )}
+
+      <Typography.Body>{label}</Typography.Body>
+
+      {variant === 'outlined' && selected && (
+        <Box marginLeft="small">
+          <Icon
             size="xsmall"
-            icon={internalIcon}
-            themeSelected={selected}
-            themeVariant={variant}
-            testID={`chip-icon-${internalIcon}`}
+            icon="cancel"
+            testID="selected-chip-icon-cancel"
           />
-        </StyledIconWrapper>
+        </Box>
       )}
-
-      <StyledLabel
-        variant="small"
-        themeVariant={variant}
-        themeSelected={selected}
-      >
-        {label}
-      </StyledLabel>
     </StyledChipWrapper>
   );
 };

package/src/components/FAB/ActionGroup/StyledActionGroup.tsx

@@ -45,7 +45,7 @@ const StyledBackdrop = styled(AnimatedPressable)(({ theme }) => ({
   right: 0,
   top: 0,
   bottom: 0,
-  opacity: 0.8,
+  opacity: 0.25,
   backgroundColor: theme.__hd__.fab.colors.backdropBackground,
 }));
 

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -409,10 +409,10 @@ exports[`ActionGroup has active true 1`] = `
           onStartShouldSetResponder={[Function]}
           style={
             {
-              "backgroundColor": "#FDFBFF",
+              "backgroundColor": "#000000",
               "bottom": 0,
               "left": 0,
-              "opacity": 0.8,
+              "opacity": 0.25,
               "position": "absolute",
               "right": 0,
               "top": 0,

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -358,11 +358,11 @@ exports[`theme returns correct theme object 1`] = `
       },
       "colors": {
         "filledBackground": "#ffffff",
-        "outlinedBackground": "transparent",
-        "primaryBackground": "#001f23",
+        "outlinedDefaultBackground": "transparent",
+        "outlinedDefaultBorder": "#bfc1c5",
+        "outlinedSelectedBorder": "#001f23",
+        "primaryBackground": "transparent",
         "secondaryBackground": "#f1e9fb",
-        "selectedPrimaryText": "#ffffff",
-        "wrapperBorder": "#001f23",
         "wrapperSelectedBorder": "transparent",
       },
       "radii": {
@@ -381,10 +381,12 @@ exports[`theme returns correct theme object 1`] = `
         },
       },
       "sizes": {
-        "wrapperBorder": 1,
+        "outlinedDefaultBorder": 1,
+        "outlinedSelectedBorder": 2,
       },
       "space": {
-        "iconWrapperMarginRight": 8,
+        "iconWrapperHorizontalMargin": 8,
+        "outlinedSelectedMarginTop": -2,
         "wrapperHorizontalPadding": 12,
         "wrapperVerticalPadding": 8,
       },
@@ -505,7 +507,7 @@ exports[`theme returns correct theme object 1`] = `
         "actionItemBackground": "#000000",
         "actionItemPressedBackground": "#000000",
         "actionItemText": "#FDFBFF",
-        "backdropBackground": "#FDFBFF",
+        "backdropBackground": "#000000",
         "buttonActiveBackground": "#000000",
         "buttonBackground": "#000000",
         "buttonPressedBackground": "#000000",

package/src/theme/components/chip.ts

@@ -2,23 +2,25 @@ import type { GlobalTheme } from '../global';
 
 const getChipTheme = (theme: GlobalTheme) => {
   const colors = {
-    primaryBackground: theme.colors.darkGlobalSurface,
+    primaryBackground: 'transparent',
     secondaryBackground: theme.colors.highlightedSurface,
     filledBackground: theme.colors.defaultGlobalSurface,
-    outlinedBackground: 'transparent',
-    wrapperBorder: theme.colors.primaryOutline,
+    outlinedDefaultBackground: 'transparent',
     wrapperSelectedBorder: 'transparent',
-    selectedPrimaryText: theme.colors.defaultGlobalSurface,
+    outlinedSelectedBorder: theme.colors.primaryOutline,
+    outlinedDefaultBorder: theme.colors.disabledOnDefaultGlobalSurface,
   };
 
   const space = {
     wrapperHorizontalPadding: theme.space.smallMedium,
     wrapperVerticalPadding: theme.space.small,
-    iconWrapperMarginRight: theme.space.small,
+    iconWrapperHorizontalMargin: theme.space.small,
+    outlinedSelectedMarginTop: -theme.space.xxsmall,
   };
 
   const sizes = {
-    wrapperBorder: theme.borderWidths.base,
+    outlinedDefaultBorder: theme.borderWidths.base,
+    outlinedSelectedBorder: theme.borderWidths.medium,
   };
 
   const radii = {

package/src/theme/components/fab.ts

@@ -8,7 +8,7 @@ const getFABTheme = (theme: GlobalTheme) => {
     icon: theme.colors.onPrimary,
     actionItemBackground: theme.colors.overlayGlobalSurface,
     actionItemPressedBackground: theme.colors.overlayGlobalSurface,
-    backdropBackground: theme.colors.defaultSurface,
+    backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
     actionItemText: theme.colors.onPrimary,
   };

package/types/components/Chip/StyledChip.d.ts

@@ -9,22 +9,4 @@ declare const StyledChipWrapper: import("@emotion/native").StyledComponent<impor
 } & StyledChipWrapperProps, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;
-declare const StyledIconWrapper: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, {}, {}>;
-declare const StyledLabel: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
-    themeSelected?: boolean | undefined;
-    themeVariant?: "filled" | "outlined" | undefined;
-}, {}, {}>;
-declare const StyledIcon: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
-    themeSelected?: boolean | undefined;
-    themeVariant?: "filled" | "outlined" | undefined;
-}, {}, {}>;
-export { StyledChipWrapper, StyledIcon, StyledIconWrapper, StyledLabel };
+export { StyledChipWrapper };