@hero-design/rn 8.80.1 → 8.81.1

package/src/components/Button/StyledButton.tsx

@@ -82,7 +82,8 @@ const genOutlineContainerStyles = (
 const genTextStyles = (
   theme: Theme,
   intent: Intent,
-  disabled?: boolean
+  disabled?: boolean,
+  isPressed?: boolean
 ): ReactNativeStyle => {
   if (disabled) {
     return {
@@ -90,6 +91,12 @@ const genTextStyles = (
     };
   }
 
+  if (isPressed) {
+    return {
+      color: theme.__hd__.button.colors.pressedText[intent],
+    };
+  }
+
   return { color: theme.__hd__.button.colors[intent] };
 };
 
@@ -97,37 +104,49 @@ const StyledButtonContainer = styled(TouchableHighlight)<{
   disabled?: boolean;
   themeButtonVariant: ThemeVariant;
   loading?: boolean;
-}>(({ disabled = false, loading = false, themeButtonVariant, theme }) => {
-  switch (themeButtonVariant) {
-    case 'filled-primary':
-      return genFilledContainerStyles(theme, 'primary', disabled, loading);
-    case 'filled-secondary':
-      return genFilledContainerStyles(theme, 'secondary', disabled, loading);
-    case 'filled-danger':
-      return genFilledContainerStyles(theme, 'danger', disabled, loading);
-    case 'outlined-primary':
-      return genOutlineContainerStyles(theme, 'primary', disabled, loading);
-    case 'outlined-secondary':
-      return genOutlineContainerStyles(theme, 'secondary', disabled, loading);
-    case 'outlined-danger':
-      return genOutlineContainerStyles(theme, 'danger', disabled, loading);
-    case 'text-primary':
-    case 'text-secondary':
-    case 'text-danger':
-      return {
-        height: scale(60),
-        borderRadius: theme.__hd__.button.radii.text,
-        flexDirection: 'row',
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: theme.__hd__.button.space.textButtonPadding,
-        borderWidth: 0,
-        backgroundColor: loading
-          ? theme.__hd__.button.colors.textLoadingBackground
-          : 'transparent',
-      };
+  themeInlineText?: boolean;
+}>(
+  ({
+    disabled = false,
+    loading = false,
+    themeButtonVariant,
+    themeInlineText,
+    theme,
+  }) => {
+    switch (themeButtonVariant) {
+      case 'filled-primary':
+        return genFilledContainerStyles(theme, 'primary', disabled, loading);
+      case 'filled-secondary':
+        return genFilledContainerStyles(theme, 'secondary', disabled, loading);
+      case 'filled-danger':
+        return genFilledContainerStyles(theme, 'danger', disabled, loading);
+      case 'outlined-primary':
+        return genOutlineContainerStyles(theme, 'primary', disabled, loading);
+      case 'outlined-secondary':
+        return genOutlineContainerStyles(theme, 'secondary', disabled, loading);
+      case 'outlined-danger':
+        return genOutlineContainerStyles(theme, 'danger', disabled, loading);
+      case 'text-primary':
+      case 'text-secondary':
+      case 'text-danger':
+        return {
+          height: themeInlineText ? undefined : scale(60),
+          borderRadius: theme.__hd__.button.radii.text,
+          flexDirection: 'row',
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: themeInlineText
+            ? 0
+            : theme.__hd__.button.space.textButtonPadding,
+          borderWidth: 0,
+          backgroundColor:
+            loading && !themeInlineText
+              ? theme.__hd__.button.colors.textLoadingBackground
+              : 'transparent',
+        };
+    }
   }
-});
+);
 
 const StyledButtonText = styled(Typography.Title)<{
   disabled?: boolean;
@@ -165,15 +184,16 @@ const StyledButtonText = styled(Typography.Title)<{
 const StyledButtonTitleOfVariantText = styled(Typography.Body)<{
   disabled?: boolean;
   themeButtonVariant: 'text-primary' | 'text-secondary' | 'text-danger';
-}>(({ disabled, themeButtonVariant, theme }) => {
+  themeIsPressed?: boolean;
+}>(({ disabled, themeButtonVariant, themeIsPressed, theme }) => {
   const themeStyling = () => {
     switch (themeButtonVariant) {
       case 'text-primary':
-        return genTextStyles(theme, 'primary', disabled);
+        return genTextStyles(theme, 'primary', disabled, themeIsPressed);
       case 'text-secondary':
-        return genTextStyles(theme, 'secondary', disabled);
+        return genTextStyles(theme, 'secondary', disabled, themeIsPressed);
       case 'text-danger':
-        return genTextStyles(theme, 'danger', disabled);
+        return genTextStyles(theme, 'danger', disabled, themeIsPressed);
     }
   };
   return {
@@ -198,7 +218,8 @@ const StyledButtonIconWrapper = styled(View)<{
 const StyledButtonIcon = styled(Icon)<{
   disabled?: boolean;
   themeButtonVariant: ThemeVariant;
-}>(({ disabled, themeButtonVariant, theme }) => {
+  themeIsPressed?: boolean;
+}>(({ disabled, themeButtonVariant, themeIsPressed, theme }) => {
   const themeStyling = () => {
     switch (themeButtonVariant) {
       case 'filled-primary':
@@ -212,11 +233,11 @@ const StyledButtonIcon = styled(Icon)<{
       case 'outlined-danger':
         return genTextStyles(theme, 'danger', disabled);
       case 'text-primary':
-        return genTextStyles(theme, 'primary', disabled);
+        return genTextStyles(theme, 'primary', disabled, themeIsPressed);
       case 'text-secondary':
-        return genTextStyles(theme, 'secondary', disabled);
+        return genTextStyles(theme, 'secondary', disabled, themeIsPressed);
       case 'text-danger':
-        return genTextStyles(theme, 'danger', disabled);
+        return genTextStyles(theme, 'danger', disabled, themeIsPressed);
     }
   };
 

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

@@ -108,22 +108,27 @@ 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}
+    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}
   `('renders correctly', ({ variant, intent, loading, disabled }) => {
     const { toJSON } = renderWithTheme(
       <Button

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

@@ -92,19 +92,26 @@ describe('StyledButtonIconWrapper', () => {
 
 describe('StyledButtonIcon', () => {
   it.each`
-    themeVariant
-    ${'filled-primary'}
-    ${'filled-secondary'}
-    ${'filled-danger'}
-    ${'outlined-primary'}
-    ${'outlined-secondary'}
-    ${'outlined-danger'}
-    ${'text-primary'}
-    ${'text-secondary'}
-    ${'text-danger'}
-  `('has $themeVariant style', ({ themeVariant }) => {
+    themeVariant            | themeIsPressed
+    ${'filled-primary'}     | ${undefined}
+    ${'filled-secondary'}   | ${undefined}
+    ${'filled-danger'}      | ${undefined}
+    ${'outlined-primary'}   | ${undefined}
+    ${'outlined-secondary'} | ${undefined}
+    ${'outlined-danger'}    | ${undefined}
+    ${'text-primary'}       | ${false}
+    ${'text-secondary'}     | ${false}
+    ${'text-danger'}        | ${false}
+    ${'text-primary'}       | ${true}
+    ${'text-secondary'}     | ${true}
+    ${'text-danger'}        | ${true}
+  `('has $themeVariant style', ({ themeVariant, themeIsPressed }) => {
     const { toJSON } = renderWithTheme(
-      <StyledButtonIcon icon="bell" themeButtonVariant={themeVariant} />
+      <StyledButtonIcon
+        icon="bell"
+        themeButtonVariant={themeVariant}
+        themeIsPressed={themeIsPressed}
+      />
     );
 
     expect(toJSON()).toMatchSnapshot();