@hero-design/rn 8.83.0-test.0 → 8.84.0

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

@@ -1460,6 +1460,214 @@ exports[`Chip renders correctly with variant filled and selected true 1`] = `
 </View>
 `;
 
+exports[`Chip renders correctly with variant filter and selected false 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#ffffff",
+        "borderColor": "transparent",
+        "borderRadius": 999,
+        "elevation": 3,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "opacity": 1,
+        "paddingHorizontal": 12,
+        "paddingVertical": 8,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
+        },
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+      }
+    }
+    testID="chip"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.48,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="small"
+    >
+      Cover my bills
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Chip renders correctly with variant filter and selected true 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#ece8ef",
+        "borderColor": "transparent",
+        "borderRadius": 999,
+        "elevation": 3,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "opacity": 1,
+        "paddingHorizontal": 12,
+        "paddingVertical": 8,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
+        },
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+      }
+    }
+    testID="chip"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.48,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="small"
+    >
+      Cover my bills
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`Chip renders correctly with variant outlined and selected false 1`] = `
 <View
   style={
@@ -1685,3 +1893,229 @@ exports[`Chip renders correctly with variant outlined and selected true 1`] = `
   />
 </View>
 `;
+
+exports[`Chip renders correctly with variant selection and selected false 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#ffffff",
+        "borderColor": "#bfc1c5",
+        "borderRadius": 999,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "opacity": 1,
+        "paddingHorizontal": 12,
+        "paddingVertical": 8,
+      }
+    }
+    testID="chip"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.48,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="small"
+    >
+      Cover my bills
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Chip renders correctly with variant selection and selected true 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#e8e9ea",
+        "borderColor": "#001f23",
+        "borderRadius": 999,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "opacity": 1,
+        "paddingHorizontal": 12,
+        "paddingVertical": 8,
+      }
+    }
+    testID="chip"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.48,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="small"
+    >
+      Cover my bills
+    </Text>
+    <View
+      marginLeft="small"
+      style={
+        [
+          {
+            "marginLeft": 8,
+          },
+          undefined,
+        ]
+      }
+    >
+      <HeroIcon
+        name="cancel"
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontSize": 24,
+            },
+            [
+              {
+                "fontSize": 12,
+              },
+              undefined,
+            ],
+          ]
+        }
+        testID="selected-chip-icon-cancel"
+        themeIntent="text"
+        themeSize="medium"
+      />
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;

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

@@ -87,6 +87,10 @@ describe('Chip', () => {
     ${'filled'}           | ${false}
     ${'outlined'}         | ${true}
     ${'outlined'}         | ${false}
+    ${'filter'}           | ${true}
+    ${'filter'}           | ${false}
+    ${'selection'}        | ${true}
+    ${'selection'}        | ${false}
     ${'compact'}          | ${true}
     ${'compact'}          | ${false}
     ${'compact-outlined'} | ${true}

package/src/components/Chip/index.tsx

@@ -4,6 +4,7 @@ import Box from '../Box';
 import { IconName } from '../Icon';
 import Typography from '../Typography';
 import { StyledChipIcon, StyledChipWrapper } from './StyledChip';
+import { useDeprecation } from '../../utils/hooks';
 
 export interface ChipProps extends ViewProps {
   /**
@@ -11,9 +12,15 @@ export interface ChipProps extends ViewProps {
    */
   label: string | ReactNode;
   /**
-   * Variant of the chip.
+   * Variant of the chip. `outlined` and `filled` are deprecated.
    */
-  variant?: 'outlined' | 'filled' | 'compact' | 'compact-outlined';
+  variant?:
+    | 'selection'
+    | 'filter'
+    | 'compact'
+    | 'compact-outlined'
+    | 'outlined'
+    | 'filled';
   /**
    * Whether the chip is selected.
    */
@@ -40,17 +47,37 @@ const getChipLabel = (label: string | ReactNode) => {
   return label;
 };
 
+const getChipVariant = (variant: ChipProps['variant'] = 'selection') => {
+  switch (variant) {
+    case 'selection':
+    case 'filter':
+    case 'compact':
+    case 'compact-outlined':
+      return variant;
+    case 'outlined':
+      return 'selection';
+    case 'filled':
+      return 'filter';
+  }
+};
+
 const Chip = ({
   label,
-  variant = 'outlined',
+  variant = 'selection',
   selected = false,
   icon,
   onPress,
   showSelectedIcon = true,
   ...otherProps
 }: ChipProps) => {
+  useDeprecation(
+    'Chip variant `outlined` and `filled` are deprecated.',
+    variant === 'outlined' || variant === 'filled'
+  );
+  const renamedVariant = getChipVariant(variant);
+
   const shouldShowSelectedIcon =
-    (variant === 'outlined' || variant === 'compact-outlined') &&
+    (renamedVariant === 'selection' || renamedVariant === 'compact-outlined') &&
     selected &&
     showSelectedIcon;
 
@@ -59,7 +86,7 @@ const Chip = ({
   return (
     <StyledChipWrapper
       onPress={onPress}
-      themeVariant={variant}
+      themeVariant={renamedVariant}
       themeSelected={selected}
       {...otherProps}
     >

package/src/components/Slider/{Range.tsx → RangeSlider.tsx}

@@ -3,6 +3,7 @@ import MultiSlider from '@ptomasroos/react-native-multi-slider';
 
 import { LayoutChangeEvent, StyleProp, View, ViewStyle } from 'react-native';
 import { useTheme } from '../../theme';
+import { StyledMarker } from './StyledRangeSlider';
 
 export type SliderRangeValue = {
   start: number;
@@ -98,27 +99,32 @@ const Slider = ({
 
   const { trackHeight } = theme.__hd__.slider.sizes;
 
-  const trackStyle = useMemo(() => {
-    return {
-      backgroundColor: disabled ? disabledTrackBackground : trackBackground,
+  // Define styles for disabled and enabled states
+  const disabledStyles = {
+    track: {
+      backgroundColor: disabledTrackBackground,
       height: trackHeight,
-    };
-  }, [disabled, disabledTrackBackground, trackBackground, trackHeight]);
-
-  const { marker: markerShadow } = theme.__hd__.slider.shadows;
+    },
+    selected: {
+      backgroundColor: disabledThumbTint,
+    },
+  };
 
-  const makerStyle = useMemo(() => {
-    return {
-      backgroundColor: disabled ? disabledThumbTint : thumbTint,
-      ...markerShadow,
-    };
-  }, [disabled, disabledThumbTint, thumbTint, markerShadow]);
+  const enabledStyles = {
+    track: {
+      backgroundColor: trackBackground,
+      height: trackHeight,
+    },
+    selected: {
+      backgroundColor: thumbTint,
+    },
+  };
 
-  const selectedStyle = useMemo(() => {
-    return {
-      backgroundColor: disabled ? disabledThumbTint : thumbTint,
-    };
-  }, [disabled, disabledThumbTint, thumbTint, markerShadow]);
+  // Use styles based on the `disabled` state
+  const trackStyle = disabled ? disabledStyles.track : enabledStyles.track;
+  const selectedStyle = disabled
+    ? disabledStyles.selected
+    : enabledStyles.selected;
 
   const handleOnValueChangeStart = useCallback(() => {
     if (onSlidingStart) {
@@ -145,6 +151,10 @@ const Slider = ({
     });
   }, []);
 
+  const CustomMarker = useMemo(() => {
+    return () => <StyledMarker themeDisabled={disabled} />;
+  }, [disabled]);
+
   return (
     <View
       onLayout={onLayoutCallback}
@@ -167,8 +177,8 @@ const Slider = ({
         enabledTwo={!disabled}
         allowOverlap={allowOverlap}
         trackStyle={trackStyle}
-        markerStyle={makerStyle}
         selectedStyle={selectedStyle}
+        customMarker={CustomMarker}
       />
     </View>
   );

package/src/components/Slider/StyledRangeSlider.tsx

@@ -0,0 +1,16 @@
+import styled from '@emotion/native';
+import { View } from 'react-native';
+
+const StyledMarker = styled(View)<{ themeDisabled: boolean }>(
+  ({ themeDisabled, theme }) => ({
+    height: theme.__hd__.slider.sizes.markerHeight,
+    width: theme.__hd__.slider.sizes.markerWidth,
+    borderRadius: theme.__hd__.slider.radii.marker,
+    backgroundColor: themeDisabled
+      ? theme.__hd__.slider.colors.disabledThumbTint
+      : theme.__hd__.slider.colors.thumbTint,
+    ...theme.__hd__.slider.shadows.marker,
+  })
+);
+
+export { StyledMarker };

package/src/components/Slider/__tests__/{Range.spec.tsx → RangeSlider.spec.tsx}

@@ -1,7 +1,8 @@
 import { fireEvent } from '@testing-library/react-native';
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import RangeSlider from '../Range';
+import RangeSlider from '../RangeSlider';
+import { StyledMarker } from '../StyledRangeSlider';
 
 describe('Slider.Range', () => {
   it('renders correctly by default', async () => {
@@ -24,11 +25,6 @@ describe('Slider.Range', () => {
     });
     expect(toJSON()).toMatchSnapshot();
 
-    // verify style
-    expect(nativeComponent.props['markerStyle'].backgroundColor).toBe(
-      '#401960'
-    );
-
     expect(nativeComponent.props['selectedStyle'].backgroundColor).toBe(
       '#401960'
     );
@@ -65,9 +61,6 @@ describe('Slider.Range', () => {
 
     expect(toJSON()).toMatchSnapshot();
     const nativeComponent = getByTestId('native-multi-slider');
-    expect(nativeComponent.props['markerStyle'].backgroundColor).toBe(
-      '#bfc1c5'
-    );
 
     expect(nativeComponent.props['selectedStyle'].backgroundColor).toBe(
       '#bfc1c5'
@@ -103,3 +96,24 @@ describe('Slider.Range', () => {
     expect(onSlidingCompleteSpy).toHaveBeenCalledWith({ start: 2, end: 5 });
   });
 });
+
+describe('StyledMarker', () => {
+  it.each`
+    themeDisabled | expectedBackgroundColor
+    ${false}      | ${'#401960'}
+    ${true}       | ${'#bfc1c5'}
+  `(
+    'renders correctly when disabled is $themeDisabled',
+    ({ themeDisabled, expectedBackgroundColor }) => {
+      const { getByTestId, toJSON } = renderWithTheme(
+        <StyledMarker testID="marker" themeDisabled={themeDisabled} />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+
+      expect(getByTestId('marker')).toHaveStyle({
+        backgroundColor: expectedBackgroundColor,
+      });
+    }
+  );
+});

package/src/components/Slider/__tests__/{Single.spec.tsx → SingleSlider.spec.tsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import Slider from '../Single';
+import Slider from '../SingleSlider';
 
 describe('Slider', () => {
   it('renders correctly by default', () => {