@hero-design/rn 8.103.7 → 8.104.0

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

@@ -0,0 +1,161 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import FilterTrigger, { FilterTriggerProps } from '..';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+
+describe('FilterTrigger', () => {
+  const defaultProps = {
+    label: 'Filter',
+    onPress: jest.fn(),
+    variant: 'filled' as const,
+  };
+
+  describe('Rendering', () => {
+    it('should render correctly with basic props', () => {
+      const { toJSON, getByText } = renderWithTheme(
+        <FilterTrigger {...defaultProps} />
+      );
+
+      expect(getByText('Filter')).toBeVisible();
+      expect(toJSON()).toMatchSnapshot();
+    });
+
+    it('should render suffix icon when provided', () => {
+      const { getByText, getByTestId } = renderWithTheme(
+        <FilterTrigger
+          {...defaultProps}
+          suffix="filter"
+          testID="filter-trigger"
+        />
+      );
+
+      expect(getByText('Filter')).toBeVisible();
+      expect(getByTestId('filter-trigger-suffix')).toBeVisible();
+    });
+
+    it.each`
+      filterCount  | active   | shouldShowBadge
+      ${3}         | ${true}  | ${true}
+      ${3}         | ${false} | ${false}
+      ${0}         | ${true}  | ${false}
+      ${undefined} | ${true}  | ${false}
+    `(
+      `should $shouldShowBadge ? "show" : "not show" badge when filterCount is $filterCount and active is $active`,
+      ({ filterCount, active, shouldShowBadge }) => {
+        const props: FilterTriggerProps = { ...defaultProps, active };
+        if (filterCount !== undefined) {
+          props.filterCount = filterCount;
+        }
+
+        const { getByText, queryByText } = renderWithTheme(
+          <FilterTrigger {...props} />
+        );
+
+        if (shouldShowBadge) {
+          const badge = getByText(filterCount!.toString());
+          expect(badge).toBeVisible();
+        } else {
+          expect(queryByText(filterCount?.toString() || '0')).toBeNull();
+        }
+      }
+    );
+
+    it.each`
+      variant
+      ${'filled'}
+      ${'outlined'}
+      ${'ghost'}
+    `(`should render $variant variant correctly`, (variant) => {
+      const { toJSON, getByText } = renderWithTheme(
+        <FilterTrigger {...defaultProps} variant={variant} />
+      );
+
+      expect(getByText('Filter')).toBeVisible();
+      expect(toJSON()).toMatchSnapshot();
+    });
+
+    it.each`
+      active
+      ${true}
+      ${false}
+    `(`should render correctly when active is $active`, (active) => {
+      const { toJSON, getByText } = renderWithTheme(
+        <FilterTrigger {...defaultProps} active={active} />
+      );
+
+      expect(getByText('Filter')).toBeVisible();
+      expect(toJSON()).toMatchSnapshot();
+    });
+
+    it.each`
+      label                | active  | filterCount | suffix       | variant       | expectedTexts
+      ${'Advanced Filter'} | ${true} | ${7}        | ${'filter'}  | ${'outlined'} | ${['Advanced Filter', '7']}
+      ${'Simple Filter'}   | ${true} | ${2}        | ${undefined} | ${undefined}  | ${['Simple Filter', '2']}
+      ${undefined}         | ${true} | ${4}        | ${'filter'}  | ${undefined}  | ${['4']}
+    `(
+      `should render correctly with complex props: $label || no label, $filterCount count, $suffix || no suffix`,
+      ({ label, active, filterCount, suffix, variant, expectedTexts }) => {
+        const props: FilterTriggerProps = {
+          ...defaultProps,
+          active,
+          filterCount,
+        };
+        if (label) props.label = label;
+        if (suffix) props.suffix = suffix;
+        if (variant) props.variant = variant;
+
+        const { getByText } = renderWithTheme(<FilterTrigger {...props} />);
+
+        expectedTexts.forEach((text: string) => {
+          const textElement = getByText(text);
+          expect(textElement).toBeVisible();
+        });
+      }
+    );
+
+    it('should render correctly without label', () => {
+      const { queryByText, getByText } = renderWithTheme(
+        <FilterTrigger
+          {...defaultProps}
+          active
+          filterCount={3}
+          testID="labeless-filter"
+          label={undefined}
+        />
+      );
+
+      // Should not render the label text
+      expect(queryByText('Filter')).toBeNull();
+      // Should still show the badge
+      expect(getByText('3')).toBeVisible();
+    });
+
+    it('should render suffix icon when no label', () => {
+      const { getByTestId } = renderWithTheme(
+        <FilterTrigger
+          {...defaultProps}
+          suffix="filter"
+          testID="labeless-suffix"
+          label={undefined}
+        />
+      );
+
+      const suffixIcon = getByTestId('labeless-suffix-suffix');
+      expect(suffixIcon).toBeVisible();
+    });
+  });
+
+  describe('Interaction', () => {
+    it('should call onPress when pressed', () => {
+      const onPress = jest.fn();
+      const { getByText } = renderWithTheme(
+        <FilterTrigger {...defaultProps} onPress={onPress} />
+      );
+
+      const filterTrigger = getByText('Filter');
+      fireEvent.press(filterTrigger);
+
+      expect(onPress).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/components/FilterTrigger/index.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import Badge from '../Badge';
+import type { IconName } from '../Icon';
+import Icon from '../Icon';
+import {
+  StyledBadge,
+  StyledFilterWrapper,
+  StyledText,
+} from './StyledFilterTrigger';
+
+export interface FilterTriggerProps {
+  /**
+   * The label of the FilterTrigger.
+   */
+  label?: string;
+  /**
+   * Whether the filter is currently active
+   */
+  active?: boolean;
+  /**
+   * The number of active filters
+   */
+  filterCount?: number;
+  /**
+   * The testID of the FilterTrigger.
+   */
+  testID?: string;
+  /**
+   * The style of the FilterTrigger.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * The onPress callback
+   */
+  onPress?: () => void;
+  /**
+   * The variant of the FilterTrigger.
+   */
+  variant?: 'filled' | 'outlined' | 'ghost';
+  /**
+   * The suffix of the FilterTrigger.
+   */
+  suffix?: IconName;
+}
+
+const FilterTrigger = ({
+  label,
+  active = false,
+  filterCount = 0,
+  variant = 'filled',
+  suffix,
+  onPress,
+  testID,
+  style,
+}: FilterTriggerProps) => {
+  const shouldShowBadge = filterCount > 0 && active;
+  const iconIntent = active ? 'text' : 'inactive';
+  const typographyVariant = active ? 'small-bold' : 'small';
+
+  return (
+    <StyledFilterWrapper
+      testID={testID}
+      style={style}
+      themeActive={active}
+      themeVariant={variant}
+      onPress={onPress}
+      themeHasLabel={!!label}
+    >
+      {label ? (
+        <>
+          <StyledText variant={typographyVariant}>{label}</StyledText>
+          {shouldShowBadge && <Badge content={filterCount} size="small" />}
+          {suffix && (
+            <Icon
+              icon={suffix}
+              size="xxxsmall"
+              intent={iconIntent}
+              testID={`${testID}-suffix`}
+            />
+          )}
+        </>
+      ) : (
+        <>
+          {suffix && (
+            <Icon
+              icon={suffix}
+              size="xsmall"
+              intent={iconIntent}
+              testID={`${testID}-suffix`}
+            />
+          )}
+          {shouldShowBadge && (
+            <StyledBadge
+              content={filterCount}
+              size="small"
+              themeHasLabel={!!label}
+            />
+          )}
+        </>
+      )}
+    </StyledFilterWrapper>
+  );
+};
+
+export default FilterTrigger;

package/src/components/Icon/HeroIcon/index.tsx

@@ -19,7 +19,8 @@ type ThemeIntent =
   | 'warning'
   | 'disabled-text'
   | 'text-inverted'
-  | 'muted';
+  | 'muted'
+  | 'inactive';
 
 const HeroIcon = createIconSet(
   glyphMap,
@@ -38,6 +39,7 @@ const COLOR_INTENTS = {
   'disabled-text': 'disabledText',
   'text-inverted': 'invertedText',
   muted: 'muted',
+  inactive: 'inactive',
 } as const;
 
 const StyledHeroIcon = styled(HeroIcon)<{

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

@@ -597,3 +597,48 @@ exports[`Icon renders correctly with intent 10`] = `
   />
 </View>
 `;
+
+exports[`Icon renders correctly with intent 11`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="home"
+    style={
+      [
+        {
+          "color": "#808f91",
+          "fontSize": 24,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="inactive"
+    themeSize="medium"
+  />
+  <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/Icon/__tests__/index.spec.tsx

@@ -21,6 +21,7 @@ describe('Icon', () => {
     ${'disabled-text'}
     ${'text-inverted'}
     ${'muted'}
+    ${'inactive'}
   `('renders correctly with intent', ({ intent }) => {
     const { toJSON } = renderWithTheme(<Icon icon="home" intent={intent} />);
 

package/src/components/Icon/index.tsx

@@ -25,7 +25,8 @@ export interface IconProps extends AccessibilityProps {
     | 'warning'
     | 'disabled-text'
     | 'text-inverted'
-    | 'muted';
+    | 'muted'
+    | 'inactive';
   /**
    * Size of the Icon.
    */

package/src/components/Toolbar/StyledToolbar.tsx

@@ -90,7 +90,6 @@ export const StyledInputContainer = styled(View)(({ theme }) => {
     borderRadius: theme.__hd__.toolbar.radii.messageContainer,
     height: theme.__hd__.toolbar.sizes.messageInputHeight,
     paddingHorizontal: theme.__hd__.toolbar.space.messageInputPaddingHorizontal,
-    paddingVertical: theme.__hd__.toolbar.space.messageInputPaddingVertical,
   };
 });
 

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarMessage.spec.tsx.snap

@@ -37,7 +37,6 @@ exports[`ToolbarMessage disabled renders correctly 1`] = `
             "flexDirection": "row",
             "height": 40,
             "paddingHorizontal": 12,
-            "paddingVertical": 8,
           },
           undefined,
         ]
@@ -128,7 +127,6 @@ exports[`ToolbarMessage filled renders correctly 1`] = `
             "flexDirection": "row",
             "height": 40,
             "paddingHorizontal": 12,
-            "paddingVertical": 8,
           },
           undefined,
         ]
@@ -232,7 +230,6 @@ exports[`ToolbarMessage idle renders correctly 1`] = `
             "flexDirection": "row",
             "height": 40,
             "paddingHorizontal": 12,
-            "paddingVertical": 8,
           },
           undefined,
         ]
@@ -335,7 +332,6 @@ exports[`ToolbarMessage readonly renders correctly 1`] = `
             "flexDirection": "row",
             "height": 40,
             "paddingHorizontal": 12,
-            "paddingVertical": 8,
           },
           undefined,
         ]

package/src/index.ts

@@ -79,6 +79,7 @@ import {
 import Search from './components/Search';
 import FloatingIsland from './components/FloatingIsland';
 import LocaleProvider from './components/LocaleProvider';
+import FilterTrigger from './components/FilterTrigger';
 
 export {
   theme,
@@ -158,6 +159,7 @@ export {
   RichTextEditor,
   FloatingIsland,
   LocaleProvider,
+  FilterTrigger,
   styled,
 };
 

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

@@ -702,6 +702,76 @@ exports[`theme returns correct theme object 1`] = `
         "titleMarginHorizontal": 8,
       },
     },
+    "filterTrigger": {
+      "borderWidths": {
+        "wrapper": {
+          "filled": 2,
+          "ghost": 0,
+          "outlined": 2,
+        },
+      },
+      "colors": {
+        "wrapper": {
+          "activeBackground": "#ece8ef",
+          "background": {
+            "active": {
+              "filled": "#ece8ef",
+              "filledLabeless": "#f6f6f7",
+              "ghost": "transparent",
+              "outlined": "transparent",
+            },
+            "inactive": {
+              "filled": "#f6f6f7",
+              "ghost": "transparent",
+              "outlined": "transparent",
+            },
+          },
+          "border": {
+            "active": {
+              "filled": "#ece8ef",
+              "filledLabeless": "#f6f6f7",
+              "ghost": "transparent",
+              "outlined": "#001f23",
+            },
+            "inactive": {
+              "filled": "#f6f6f7",
+              "ghost": "transparent",
+              "outlined": "#e8e9ea",
+            },
+          },
+          "inactiveBackground": "#f6f6f7",
+        },
+      },
+      "lineHeights": {
+        "text": 16,
+      },
+      "radii": {
+        "wrapper": {
+          "default": 24,
+          "labeless": 16,
+        },
+      },
+      "sizes": {
+        "wrapperHeight": 36,
+      },
+      "space": {
+        "badge": {
+          "labelessBottom": 2,
+          "labelessRight": 2,
+        },
+        "wrapper": {
+          "default": {
+            "paddingHorizontal": 12,
+            "paddingVertical": 4,
+          },
+          "itemGap": 4,
+          "labeless": {
+            "paddingHorizontal": 8,
+            "paddingVertical": 4,
+          },
+        },
+      },
+    },
     "floatingIsland": {
       "colors": {
         "wrapperBackground": "#ffffff",
@@ -736,6 +806,7 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "danger": "#cb300a",
         "disabledText": "#bfc1c5",
+        "inactive": "#808f91",
         "info": "#b5c3fd",
         "invertedText": "#ffffff",
         "muted": "#4d6265",

package/src/theme/components/filterTrigger.ts

@@ -0,0 +1,88 @@
+import { scale } from '../../utils/scale';
+import type { GlobalTheme } from '../global';
+
+const getFilterTriggerTheme = (theme: GlobalTheme) => {
+  const borderWidths = {
+    wrapper: {
+      filled: theme.borderWidths.medium,
+      outlined: theme.borderWidths.medium,
+      ghost: 0,
+    },
+  };
+  const colors = {
+    wrapper: {
+      activeBackground: theme.colors.highlightedSurface,
+      inactiveBackground: theme.colors.neutralGlobalSurface,
+      background: {
+        active: {
+          filled: theme.colors.highlightedSurface,
+          outlined: 'transparent',
+          ghost: 'transparent',
+          filledLabeless: theme.colors.neutralGlobalSurface,
+        },
+        inactive: {
+          filled: theme.colors.neutralGlobalSurface,
+          outlined: 'transparent',
+          ghost: 'transparent',
+        },
+      },
+      border: {
+        active: {
+          filled: theme.colors.highlightedSurface,
+          outlined: theme.colors.primaryOutline,
+          ghost: 'transparent',
+          filledLabeless: theme.colors.neutralGlobalSurface,
+        },
+        inactive: {
+          filled: theme.colors.neutralGlobalSurface,
+          outlined: theme.colors.secondaryOutline,
+          ghost: 'transparent',
+        },
+      },
+    },
+  };
+
+  const space = {
+    wrapper: {
+      default: {
+        paddingHorizontal: theme.space.smallMedium,
+        paddingVertical: theme.space.xsmall,
+      },
+      labeless: {
+        paddingHorizontal: theme.space.small,
+        paddingVertical: theme.space.xsmall,
+      },
+      itemGap: theme.space.xsmall,
+    },
+    badge: {
+      labelessRight: theme.space.xxsmall,
+      labelessBottom: theme.space.xxsmall,
+    },
+  };
+
+  const radii = {
+    wrapper: {
+      default: theme.radii.xxxlarge,
+      labeless: theme.radii.xlarge,
+    },
+  };
+
+  const sizes = {
+    wrapperHeight: scale(36),
+  };
+
+  const lineHeights = {
+    text: theme.lineHeights.small,
+  };
+
+  return {
+    colors,
+    space,
+    radii,
+    borderWidths,
+    sizes,
+    lineHeights,
+  };
+};
+
+export default getFilterTriggerTheme;

package/src/theme/components/icon.ts

@@ -12,6 +12,7 @@ const getIconTheme = (theme: GlobalTheme) => {
     disabledText: theme.colors.disabledOnDefaultGlobalSurface,
     invertedText: theme.colors.onDarkGlobalSurface,
     muted: theme.colors.mutedOnDefaultGlobalSurface,
+    inactive: theme.colors.inactiveOnDefaultGlobalSurface,
   };
 
   const sizes = {

package/src/theme/getTheme.ts

@@ -55,6 +55,7 @@ import getMapPinTheme from './components/mapPin';
 import getFloatingIslandTheme from './components/floatingIsland';
 import getAppCueTheme from './components/appCue';
 import { ThemeMode } from './global/colors/types';
+import getFilterTriggerTheme from './components/filterTrigger';
 
 type Theme = GlobalTheme & {
   themeMode?: ThemeMode;
@@ -84,6 +85,7 @@ type Theme = GlobalTheme & {
     empty: EmptyThemeType;
     error: ErrorThemeType;
     fab: FABThemeType;
+    filterTrigger: ReturnType<typeof getFilterTriggerTheme>;
     icon: ReturnType<typeof getIconTheme>;
     image: ReturnType<typeof getImageTheme>;
     list: ReturnType<typeof getListTheme>;
@@ -148,6 +150,7 @@ const getTheme = (
       empty: getEmptyTheme(globalTheme),
       error: getErrorTheme(globalTheme),
       fab: getFABTheme(globalTheme),
+      filterTrigger: getFilterTriggerTheme(globalTheme),
       icon: getIconTheme(globalTheme),
       image: getImageTheme(globalTheme),
       list: getListTheme(globalTheme),