@hero-design/rn 8.83.0 → 8.84.0

package/src/components/Button/Button.tsx

@@ -11,6 +11,7 @@ import {
   StyledButtonIconWrapper,
   StyledButtonText,
   StyledButtonTitleOfVariantText,
+  StyledSmallButtonText,
 } from './StyledButton';
 
 export interface ButtonProps {
@@ -61,7 +62,13 @@ export interface ButtonProps {
   /**
    * Button type.
    */
-  variant?: 'filled' | 'outlined' | 'text' | 'inline-text';
+  variant?:
+    | 'filled'
+    | 'outlined'
+    | 'text'
+    | 'inline-text'
+    | 'filled-compact'
+    | 'outlined-compact';
 }
 
 const isIconName = (icon: IconName | ReactNode): icon is IconName => {
@@ -87,13 +94,20 @@ const TEXT_VARIANTS = {
 } as const;
 
 export const getThemeVariant = (
-  variant: 'filled' | 'outlined' | 'text',
+  variant:
+    | 'filled'
+    | 'outlined'
+    | 'text'
+    | 'filled-compact'
+    | 'outlined-compact',
   intent: Intent
 ): ThemeVariant => {
   switch (variant) {
     case 'filled':
+    case 'filled-compact':
       return FILLED_VARIANTS[intent];
     case 'outlined':
+    case 'outlined-compact':
       return OUTLINED_VARIANTS[intent];
     case 'text':
       return TEXT_VARIANTS[intent];
@@ -164,6 +178,51 @@ const Button = ({
     deprecatedVariants.includes(themeVariant)
   );
 
+  const isCompactVariant = ['filled-compact', 'outlined-compact'].includes(
+    variant
+  );
+
+  const isRenderTextVariant = isTextVariant(themeVariant);
+
+  const renderTextVariantTitle = () => {
+    if (!isRenderTextVariant) return null;
+    return (
+      <StyledButtonTitleOfVariantText
+        variant={isCompactVariant ? 'small-bold' : 'regular-bold'}
+        ellipsizeMode="tail"
+        numberOfLines={1}
+        disabled={disabled}
+        themeButtonVariant={themeVariant}
+        themeIsPressed={isPressed}
+      >
+        {text}
+      </StyledButtonTitleOfVariantText>
+    );
+  };
+
+  const renderTitle = () =>
+    isCompactVariant ? (
+      <StyledSmallButtonText
+        variant="small"
+        ellipsizeMode="tail"
+        numberOfLines={1}
+        disabled={disabled}
+        themeButtonVariant={themeVariant}
+      >
+        {text}
+      </StyledSmallButtonText>
+    ) : (
+      <StyledButtonText
+        level="h5"
+        ellipsizeMode="tail"
+        numberOfLines={1}
+        disabled={disabled}
+        themeButtonVariant={themeVariant}
+      >
+        {text}
+      </StyledButtonText>
+    );
+
   return (
     <StyledButtonContainer
       accessibilityHint={accessibilityHint}
@@ -178,6 +237,7 @@ const Button = ({
       themeInlineText={isInlineText}
       onPressIn={() => isInlineText && setIsPressed(true)}
       onPressOut={() => isInlineText && setIsPressed(false)}
+      themeIsCompact={isCompactVariant}
     >
       {loading === true ? (
         <LoadingIndicator
@@ -187,7 +247,10 @@ const Button = ({
       ) : (
         <>
           {icon !== undefined && (
-            <StyledButtonIconWrapper themePosition="left">
+            <StyledButtonIconWrapper
+              themePosition="left"
+              themeIsCompact={isCompactVariant}
+            >
               {isIconName(icon) ? (
                 <StyledButtonIcon
                   disabled={disabled}
@@ -195,36 +258,19 @@ const Button = ({
                   testID={`${testID}-left-icon`}
                   themeButtonVariant={themeVariant}
                   themeIsPressed={isPressed}
+                  themeIsCompact={isCompactVariant}
                 />
               ) : (
                 icon
               )}
             </StyledButtonIconWrapper>
           )}
-          {isTextVariant(themeVariant) ? (
-            <StyledButtonTitleOfVariantText
-              variant="regular-bold"
-              ellipsizeMode="tail"
-              numberOfLines={1}
-              disabled={disabled}
-              themeButtonVariant={themeVariant}
-              themeIsPressed={isPressed}
-            >
-              {text}
-            </StyledButtonTitleOfVariantText>
-          ) : (
-            <StyledButtonText
-              level="h5"
-              ellipsizeMode="tail"
-              numberOfLines={1}
-              disabled={disabled}
-              themeButtonVariant={themeVariant}
-            >
-              {text}
-            </StyledButtonText>
-          )}
+          {isRenderTextVariant ? renderTextVariantTitle() : renderTitle()}
           {rightIcon !== undefined && (
-            <StyledButtonIconWrapper themePosition="right">
+            <StyledButtonIconWrapper
+              themePosition="right"
+              themeIsCompact={isCompactVariant}
+            >
               {isIconName(rightIcon) ? (
                 <StyledButtonIcon
                   disabled={disabled}
@@ -232,6 +278,7 @@ const Button = ({
                   testID={`${testID}-right-icon`}
                   themeButtonVariant={themeVariant}
                   themeIsPressed={isPressed}
+                  themeIsCompact={isCompactVariant}
                 />
               ) : (
                 rightIcon

package/src/components/Button/StyledButton.tsx

@@ -19,11 +19,21 @@ type ThemeVariant =
   | 'text-secondary'
   | 'text-danger';
 
+const getButtonHeight = (themeIsCompact: boolean) => {
+  switch (themeIsCompact) {
+    case true:
+      return scale(36);
+    default:
+      return scale(60);
+  }
+};
+
 const genFilledContainerStyles = (
   theme: Theme,
   intent: Intent,
   disabled: boolean,
-  loading: boolean
+  loading: boolean,
+  compact: boolean
 ): ReactNativeStyle => {
   const backgroundColorStyling = () => {
     if (!loading && disabled) {
@@ -36,12 +46,21 @@ const genFilledContainerStyles = (
   };
 
   return {
-    height: scale(60),
+    height: getButtonHeight(compact),
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    alignSelf: 'stretch',
-    padding: theme.__hd__.button.space.buttonPadding,
+    ...(compact
+      ? {
+          alignSelf: 'flex-start',
+          paddingVertical:
+            theme.__hd__.button.space.compact.buttonPaddingVertical,
+          paddingHorizontal: theme.__hd__.button.space.default.buttonPadding,
+        }
+      : {
+          alignSelf: 'stretch',
+          padding: theme.__hd__.button.space.default.buttonPadding,
+        }),
     borderRadius: theme.__hd__.button.radii.default,
     ...backgroundColorStyling(),
   };
@@ -51,7 +70,8 @@ const genOutlineContainerStyles = (
   theme: Theme,
   intent: Intent,
   disabled: boolean,
-  loading: boolean
+  loading: boolean,
+  compact: boolean
 ): ReactNativeStyle => {
   const borderColorStyling = () => {
     if (!loading && disabled) {
@@ -64,14 +84,26 @@ const genOutlineContainerStyles = (
   };
 
   return {
-    height: scale(60),
+    height: getButtonHeight(compact),
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    alignSelf: 'stretch',
-    padding:
-      theme.__hd__.button.space.buttonPadding -
-      theme.__hd__.button.borderWidth.default,
+    ...(compact
+      ? {
+          alignSelf: 'flex-start',
+          paddingVertical:
+            theme.__hd__.button.space.compact.buttonPaddingVertical -
+            theme.__hd__.button.borderWidth.default,
+          paddingHorizontal:
+            theme.__hd__.button.space.default.buttonPadding -
+            theme.__hd__.button.borderWidth.default,
+        }
+      : {
+          alignSelf: 'stretch',
+          padding:
+            theme.__hd__.button.space.default.buttonPadding -
+            theme.__hd__.button.borderWidth.default,
+        }),
     borderWidth: theme.__hd__.button.borderWidth.default,
     borderRadius: theme.__hd__.button.radii.default,
     backgroundColor: 'transparent',
@@ -105,39 +137,79 @@ const StyledButtonContainer = styled(TouchableHighlight)<{
   themeButtonVariant: ThemeVariant;
   loading?: boolean;
   themeInlineText?: boolean;
+  themeIsCompact?: boolean;
 }>(
   ({
     disabled = false,
     loading = false,
     themeButtonVariant,
-    themeInlineText,
+    themeInlineText = false,
     theme,
+    themeIsCompact = false,
   }) => {
     switch (themeButtonVariant) {
       case 'filled-primary':
-        return genFilledContainerStyles(theme, 'primary', disabled, loading);
+        return genFilledContainerStyles(
+          theme,
+          'primary',
+          disabled,
+          loading,
+          themeIsCompact
+        );
       case 'filled-secondary':
-        return genFilledContainerStyles(theme, 'secondary', disabled, loading);
+        return genFilledContainerStyles(
+          theme,
+          'secondary',
+          disabled,
+          loading,
+          themeIsCompact
+        );
       case 'filled-danger':
-        return genFilledContainerStyles(theme, 'danger', disabled, loading);
+        return genFilledContainerStyles(
+          theme,
+          'danger',
+          disabled,
+          loading,
+          themeIsCompact
+        );
       case 'outlined-primary':
-        return genOutlineContainerStyles(theme, 'primary', disabled, loading);
+        return genOutlineContainerStyles(
+          theme,
+          'primary',
+          disabled,
+          loading,
+          themeIsCompact
+        );
       case 'outlined-secondary':
-        return genOutlineContainerStyles(theme, 'secondary', disabled, loading);
+        return genOutlineContainerStyles(
+          theme,
+          'secondary',
+          disabled,
+          loading,
+          themeIsCompact
+        );
       case 'outlined-danger':
-        return genOutlineContainerStyles(theme, 'danger', disabled, loading);
+        return genOutlineContainerStyles(
+          theme,
+          'danger',
+          disabled,
+          loading,
+          themeIsCompact
+        );
       case 'text-primary':
       case 'text-secondary':
       case 'text-danger':
         return {
-          height: themeInlineText ? undefined : scale(60),
+          height: themeInlineText ? undefined : getButtonHeight(themeIsCompact),
           borderRadius: theme.__hd__.button.radii.text,
           flexDirection: 'row',
           justifyContent: 'center',
           alignItems: 'center',
+
           padding: themeInlineText
             ? 0
-            : theme.__hd__.button.space.textButtonPadding,
+            : theme.__hd__.button.space.default.textButtonPadding,
+
           borderWidth: 0,
           backgroundColor:
             loading && !themeInlineText
@@ -181,6 +253,8 @@ const StyledButtonText = styled(Typography.Title)<{
   };
 });
 
+const StyledSmallButtonText = StyledButtonText.withComponent(Typography.Body);
+
 const StyledButtonTitleOfVariantText = styled(Typography.Body)<{
   disabled?: boolean;
   themeButtonVariant: 'text-primary' | 'text-secondary' | 'text-danger';
@@ -206,12 +280,21 @@ const StyledButtonTitleOfVariantText = styled(Typography.Body)<{
 
 const StyledButtonIconWrapper = styled(View)<{
   themePosition: 'left' | 'right';
-}>(({ themePosition, theme }) => {
+  themeIsCompact?: boolean;
+}>(({ themePosition, theme, themeIsCompact }) => {
   switch (themePosition) {
     case 'left':
-      return { paddingRight: theme.__hd__.button.space.iconPadding };
+      return {
+        paddingRight: themeIsCompact
+          ? theme.__hd__.button.space.compact.iconPadding
+          : theme.__hd__.button.space.default.iconPadding,
+      };
     case 'right':
-      return { paddingLeft: theme.__hd__.button.space.iconPadding };
+      return {
+        paddingLeft: themeIsCompact
+          ? theme.__hd__.button.space.compact.iconPadding
+          : theme.__hd__.button.space.default.iconPadding,
+      };
   }
 });
 
@@ -219,37 +302,43 @@ const StyledButtonIcon = styled(Icon)<{
   disabled?: boolean;
   themeButtonVariant: ThemeVariant;
   themeIsPressed?: boolean;
-}>(({ disabled, themeButtonVariant, themeIsPressed, theme }) => {
-  const themeStyling = () => {
-    switch (themeButtonVariant) {
-      case 'filled-primary':
-      case 'filled-secondary':
-      case 'filled-danger':
-        return { color: theme.__hd__.button.colors.invertedText };
-      case 'outlined-primary':
-        return genTextStyles(theme, 'primary', disabled);
-      case 'outlined-secondary':
-        return genTextStyles(theme, 'secondary', disabled);
-      case 'outlined-danger':
-        return genTextStyles(theme, 'danger', disabled);
-      case 'text-primary':
-        return genTextStyles(theme, 'primary', disabled, themeIsPressed);
-      case 'text-secondary':
-        return genTextStyles(theme, 'secondary', disabled, themeIsPressed);
-      case 'text-danger':
-        return genTextStyles(theme, 'danger', disabled, themeIsPressed);
-    }
-  };
+  themeIsCompact?: boolean;
+}>(
+  ({ disabled, themeButtonVariant, themeIsPressed, theme, themeIsCompact }) => {
+    const themeStyling = () => {
+      switch (themeButtonVariant) {
+        case 'filled-primary':
+        case 'filled-secondary':
+        case 'filled-danger':
+          return { color: theme.__hd__.button.colors.invertedText };
+        case 'outlined-primary':
+          return genTextStyles(theme, 'primary', disabled);
+        case 'outlined-secondary':
+          return genTextStyles(theme, 'secondary', disabled);
+        case 'outlined-danger':
+          return genTextStyles(theme, 'danger', disabled);
+        case 'text-primary':
+          return genTextStyles(theme, 'primary', disabled, themeIsPressed);
+        case 'text-secondary':
+          return genTextStyles(theme, 'secondary', disabled, themeIsPressed);
+        case 'text-danger':
+          return genTextStyles(theme, 'danger', disabled, themeIsPressed);
+      }
+    };
 
-  return {
-    fontSize: theme.__hd__.button.sizes.iconSize,
-    ...themeStyling(),
-  };
-});
+    return {
+      fontSize: themeIsCompact
+        ? theme.__hd__.button.sizes.iconSize.compact
+        : theme.__hd__.button.sizes.iconSize.default,
+      ...themeStyling(),
+    };
+  }
+);
 
 export {
   StyledButtonContainer,
   StyledButtonText,
+  StyledSmallButtonText,
   StyledButtonIconWrapper,
   StyledButtonIcon,
   StyledButtonTitleOfVariantText,

package/src/components/Button/UtilityButton/StyledUtilityButton.tsx

@@ -14,7 +14,7 @@ export const ButtonContainer = styled(TouchableOpacity)(({ theme }) => ({
 }));
 
 export const IconWrapper = styled(View)(({ theme }) => ({
-  paddingRight: theme.__hd__.button.space.iconPadding,
+  paddingRight: theme.__hd__.button.space.default.iconPadding,
 }));
 
 export const ButtonText = styled(Typography.Body)({

package/src/components/Button/__tests__/Button.spec.tsx

@@ -108,27 +108,33 @@ describe('Button', () => {
   });
 
   it.each`
-    variant          | intent         | loading  | disabled
-    ${'filled'}      | ${'primary'}   | ${false} | ${false}
-    ${'filled'}      | ${'primary'}   | ${true}  | ${false}
-    ${'filled'}      | ${'primary'}   | ${false} | ${true}
-    ${'outlined'}    | ${'primary'}   | ${false} | ${false}
-    ${'outlined'}    | ${'primary'}   | ${true}  | ${false}
-    ${'outlined'}    | ${'primary'}   | ${false} | ${true}
-    ${'text'}        | ${'primary'}   | ${false} | ${false}
-    ${'text'}        | ${'primary'}   | ${true}  | ${false}
-    ${'text'}        | ${'primary'}   | ${false} | ${true}
-    ${'text'}        | ${'secondary'} | ${false} | ${false}
-    ${'text'}        | ${'secondary'} | ${true}  | ${false}
-    ${'text'}        | ${'secondary'} | ${false} | ${true}
-    ${'text'}        | ${'danger'}    | ${false} | ${false}
-    ${'text'}        | ${'danger'}    | ${true}  | ${false}
-    ${'text'}        | ${'danger'}    | ${false} | ${true}
-    ${'inline-text'} | ${'primary'}   | ${false} | ${false}
-    ${'inline-text'} | ${'secondary'} | ${true}  | ${false}
-    ${'inline-text'} | ${'danger'}    | ${false} | ${false}
-    ${'inline-text'} | ${'primary'}   | ${true}  | ${false}
-    ${'inline-text'} | ${'primary'}   | ${false} | ${true}
+    variant               | intent         | loading  | disabled
+    ${'filled'}           | ${'primary'}   | ${false} | ${false}
+    ${'filled'}           | ${'primary'}   | ${true}  | ${false}
+    ${'filled'}           | ${'primary'}   | ${false} | ${true}
+    ${'outlined'}         | ${'primary'}   | ${false} | ${false}
+    ${'outlined'}         | ${'primary'}   | ${true}  | ${false}
+    ${'outlined'}         | ${'primary'}   | ${false} | ${true}
+    ${'text'}             | ${'primary'}   | ${false} | ${false}
+    ${'text'}             | ${'primary'}   | ${true}  | ${false}
+    ${'text'}             | ${'primary'}   | ${false} | ${true}
+    ${'text'}             | ${'secondary'} | ${false} | ${false}
+    ${'text'}             | ${'secondary'} | ${true}  | ${false}
+    ${'text'}             | ${'secondary'} | ${false} | ${true}
+    ${'text'}             | ${'danger'}    | ${false} | ${false}
+    ${'text'}             | ${'danger'}    | ${true}  | ${false}
+    ${'text'}             | ${'danger'}    | ${false} | ${true}
+    ${'inline-text'}      | ${'primary'}   | ${false} | ${false}
+    ${'inline-text'}      | ${'secondary'} | ${true}  | ${false}
+    ${'inline-text'}      | ${'danger'}    | ${false} | ${false}
+    ${'inline-text'}      | ${'primary'}   | ${true}  | ${false}
+    ${'inline-text'}      | ${'primary'}   | ${false} | ${true}
+    ${'filled-compact'}   | ${'primary'}   | ${false} | ${false}
+    ${'filled-compact'}   | ${'primary'}   | ${true}  | ${false}
+    ${'filled-compact'}   | ${'primary'}   | ${false} | ${true}
+    ${'outlined-compact'} | ${'primary'}   | ${false} | ${false}
+    ${'outlined-compact'} | ${'primary'}   | ${true}  | ${false}
+    ${'outlined-compact'} | ${'primary'}   | ${false} | ${true}
   `('renders correctly', ({ variant, intent, loading, disabled }) => {
     const { toJSON } = renderWithTheme(
       <Button
@@ -147,16 +153,18 @@ describe('Button', () => {
 
 describe('getThemeVariant', () => {
   it.each`
-    variant       | intent         | themeVariant
-    ${'filled'}   | ${'primary'}   | ${'filled-primary'}
-    ${'filled'}   | ${'secondary'} | ${'filled-secondary'}
-    ${'filled'}   | ${'danger'}    | ${'filled-danger'}
-    ${'outlined'} | ${'primary'}   | ${'outlined-primary'}
-    ${'outlined'} | ${'secondary'} | ${'outlined-secondary'}
-    ${'outlined'} | ${'danger'}    | ${'outlined-danger'}
-    ${'text'}     | ${'primary'}   | ${'text-primary'}
-    ${'text'}     | ${'secondary'} | ${'text-secondary'}
-    ${'text'}     | ${'danger'}    | ${'text-danger'}
+    variant               | intent         | themeVariant
+    ${'filled'}           | ${'primary'}   | ${'filled-primary'}
+    ${'filled'}           | ${'secondary'} | ${'filled-secondary'}
+    ${'filled'}           | ${'danger'}    | ${'filled-danger'}
+    ${'filled-compact'}   | ${'danger'}    | ${'filled-danger'}
+    ${'outlined'}         | ${'primary'}   | ${'outlined-primary'}
+    ${'outlined'}         | ${'secondary'} | ${'outlined-secondary'}
+    ${'outlined'}         | ${'danger'}    | ${'outlined-danger'}
+    ${'outlined-compact'} | ${'danger'}    | ${'outlined-danger'}
+    ${'text'}             | ${'primary'}   | ${'text-primary'}
+    ${'text'}             | ${'secondary'} | ${'text-secondary'}
+    ${'text'}             | ${'danger'}    | ${'text-danger'}
   `('returns $themeVariant', ({ variant, intent, themeVariant }) => {
     expect(getThemeVariant(variant, intent)).toBe(themeVariant);
   });

package/src/components/Button/__tests__/StyledButton.spec.tsx

@@ -32,6 +32,24 @@ describe('StyledButtonContainer', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
+  it.each`
+    themeIsCompact
+    ${true}
+    ${false}
+    ${undefined}
+  `('has $themeIsCompact style', ({ themeIsCompact }): void => {
+    const { toJSON } = renderWithTheme(
+      <StyledButtonContainer
+        themeIsCompact={themeIsCompact}
+        themeButtonVariant="filled-primary"
+      >
+        <Text>Title</Text>
+      </StyledButtonContainer>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
   it('renders disabled correctly', () => {
     const { toJSON } = renderWithTheme(
       <StyledButtonContainer themeButtonVariant="filled-primary" disabled>
@@ -88,6 +106,22 @@ describe('StyledButtonIconWrapper', () => {
 
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it.each`
+    themeIsCompact
+    ${true}
+    ${false}
+    ${undefined}
+  `('has $themeIsCompact style', ({ themeIsCompact }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledButtonIconWrapper
+        themeIsCompact={themeIsCompact}
+        themePosition="left"
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
 });
 
 describe('StyledButtonIcon', () => {
@@ -117,6 +151,24 @@ describe('StyledButtonIcon', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
+  it.each`
+    themeIsCompact
+    ${true}
+    ${false}
+    ${undefined}
+  `('has $themeIsCompact style', ({ themeIsCompact }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledButtonIcon
+        icon="bell"
+        themeButtonVariant="filled-primary"
+        themeIsPressed={false}
+        themeIsCompact={themeIsCompact}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
   it('renders disabled correctly', () => {
     const { toJSON } = renderWithTheme(
       <StyledButtonIcon