@hero-design/rn 8.80.1-test.0 → 8.81.0

package/src/components/AnimatedScroller/__tests__/__snapshots__/ScrollablesWithFAB.spec.tsx.snap

@@ -772,6 +772,15 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
       style={{}}
     >
       <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
         accessibilityValue={
           {
             "max": undefined,
@@ -781,6 +790,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
           }
         }
         accessible={true}
+        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onLayout={[Function]}
@@ -794,7 +804,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
           {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#401960",
+            "backgroundColor": "#000000",
             "borderRadius": 999,
             "bottom": undefined,
             "elevation": 3,
@@ -803,6 +813,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
             "justifyContent": "center",
             "marginRight": 24,
             "marginTop": 24,
+            "opacity": 1,
             "padding": 20,
             "shadowColor": "#001f23",
             "shadowOffset": {
@@ -1675,6 +1686,15 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB corr
     </View>
   </RCTScrollView>
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
     accessibilityValue={
       {
         "max": undefined,
@@ -1684,6 +1704,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB corr
       }
     }
     accessible={true}
+    collapsable={false}
     focusable={false}
     onClick={[Function]}
     onLayout={[Function]}
@@ -1697,13 +1718,14 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB corr
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#401960",
+        "backgroundColor": "#000000",
         "borderRadius": 999,
         "bottom": undefined,
         "elevation": 3,
         "flexDirection": "row",
         "height": 64,
         "justifyContent": "center",
+        "opacity": 1,
         "padding": 20,
         "shadowColor": "#001f23",
         "shadowOffset": {
@@ -1934,6 +1956,15 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
       style={{}}
     >
       <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
         accessibilityValue={
           {
             "max": undefined,
@@ -1943,6 +1974,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
           }
         }
         accessible={true}
+        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onLayout={[Function]}
@@ -1956,7 +1988,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
           {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#401960",
+            "backgroundColor": "#000000",
             "borderRadius": 999,
             "bottom": undefined,
             "elevation": 3,
@@ -1965,6 +1997,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
             "justifyContent": "center",
             "marginRight": 24,
             "marginTop": 24,
+            "opacity": 1,
             "padding": 20,
             "shadowColor": "#001f23",
             "shadowOffset": {
@@ -2177,6 +2210,15 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB co
     </View>
   </RCTScrollView>
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
     accessibilityValue={
       {
         "max": undefined,
@@ -2186,6 +2228,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB co
       }
     }
     accessible={true}
+    collapsable={false}
     focusable={false}
     onClick={[Function]}
     onLayout={[Function]}
@@ -2199,13 +2242,14 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB co
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#401960",
+        "backgroundColor": "#000000",
         "borderRadius": 999,
         "bottom": undefined,
         "elevation": 3,
         "flexDirection": "row",
         "height": 64,
         "justifyContent": "center",
+        "opacity": 1,
         "padding": 20,
         "shadowColor": "#001f23",
         "shadowOffset": {
@@ -2743,6 +2787,15 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
       style={{}}
     >
       <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
         accessibilityValue={
           {
             "max": undefined,
@@ -2752,6 +2805,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
           }
         }
         accessible={true}
+        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onLayout={[Function]}
@@ -2765,7 +2819,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
           {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#401960",
+            "backgroundColor": "#000000",
             "borderRadius": 999,
             "bottom": undefined,
             "elevation": 3,
@@ -2774,6 +2828,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
             "justifyContent": "center",
             "marginRight": 24,
             "marginTop": 24,
+            "opacity": 1,
             "padding": 20,
             "shadowColor": "#001f23",
             "shadowOffset": {
@@ -3293,6 +3348,15 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB c
     </View>
   </RCTScrollView>
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
     accessibilityValue={
       {
         "max": undefined,
@@ -3302,6 +3366,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB c
       }
     }
     accessible={true}
+    collapsable={false}
     focusable={false}
     onClick={[Function]}
     onLayout={[Function]}
@@ -3315,13 +3380,14 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB c
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#401960",
+        "backgroundColor": "#000000",
         "borderRadius": 999,
         "bottom": undefined,
         "elevation": 3,
         "flexDirection": "row",
         "height": 64,
         "justifyContent": "center",
+        "opacity": 1,
         "padding": 20,
         "shadowColor": "#001f23",
         "shadowOffset": {

package/src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import React, { ReactChild, ReactNode, useMemo } from 'react';
+import React, { ReactChild, ReactNode, useMemo, useState } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { Theme, useTheme } from '../../theme';
 import { useDeprecation } from '../../utils/hooks';
@@ -61,7 +61,7 @@ export interface ButtonProps {
   /**
    * Button type.
    */
-  variant?: 'filled' | 'outlined' | 'text';
+  variant?: 'filled' | 'outlined' | 'text' | 'inline-text';
 }
 
 const isIconName = (icon: IconName | ReactNode): icon is IconName => {
@@ -151,11 +151,13 @@ const Button = ({
   text,
   variant = 'filled',
 }: ButtonProps): JSX.Element => {
-  const themeVariant = getThemeVariant(variant, intent);
+  const isInlineText = variant === 'inline-text';
+  const themeVariant = getThemeVariant(isInlineText ? 'text' : variant, intent);
   const theme = useTheme();
   const underlayColor = useMemo(() => {
-    return getUnderlayColor(theme, themeVariant);
-  }, [theme, themeVariant]);
+    return isInlineText ? 'transparent' : getUnderlayColor(theme, themeVariant);
+  }, [theme, themeVariant, isInlineText]);
+  const [isPressed, setIsPressed] = useState(false);
 
   useDeprecation(
     `Button variant ${deprecatedVariants.join(', ')} are deprecated.`,
@@ -173,6 +175,9 @@ const Button = ({
       themeButtonVariant={themeVariant}
       style={style}
       underlayColor={underlayColor}
+      themeInlineText={isInlineText}
+      onPressIn={() => isInlineText && setIsPressed(true)}
+      onPressOut={() => isInlineText && setIsPressed(false)}
     >
       {loading === true ? (
         <LoadingIndicator
@@ -189,6 +194,7 @@ const Button = ({
                   icon={icon}
                   testID={`${testID}-left-icon`}
                   themeButtonVariant={themeVariant}
+                  themeIsPressed={isPressed}
                 />
               ) : (
                 icon
@@ -202,6 +208,7 @@ const Button = ({
               numberOfLines={1}
               disabled={disabled}
               themeButtonVariant={themeVariant}
+              themeIsPressed={isPressed}
             >
               {text}
             </StyledButtonTitleOfVariantText>
@@ -224,6 +231,7 @@ const Button = ({
                   icon={rightIcon}
                   testID={`${testID}-right-icon`}
                   themeButtonVariant={themeVariant}
+                  themeIsPressed={isPressed}
                 />
               ) : (
                 rightIcon

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();