@hero-design/rn 7.12.1 → 7.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.12.1",
+  "version": "7.13.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.12.1",
+    "@hero-design/colors": "7.13.0",
     "date-fns": "^2.16.1"
   },
   "peerDependencies": {

package/src/components/Button/Button.tsx

@@ -1,5 +1,6 @@
+import { useTheme } from '@emotion/react';
 import React, { ReactChild } from 'react';
-import { Pressable, StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, ViewStyle } from 'react-native';
 
 import { IconName } from '../Icon';
 import LoadingIndicator from './LoadingIndicator';
@@ -110,64 +111,67 @@ const Button = ({
   testID,
   text,
   variant = 'filled',
-}: ButtonProps) => (
-  <Pressable
-    accessibilityHint={accessibilityHint}
-    accessibilityLabel={accessibilityLabel}
-    disabled={disabled || loading}
-    onPress={onPress}
-    testID={testID}
-  >
-    {({ pressed }) => (
-      <StyledButtonContainer
-        disabled={disabled}
-        pressed={pressed}
-        style={style}
-        themeVariant={getThemeVariant(variant, intent)}
-      >
-        {loading === true ? (
-          <LoadingIndicator
-            testID={`${testID}-loading-indicator`}
-            themeVariant={getThemeVariant(variant, intent)}
-          />
-        ) : (
-          <>
-            {icon !== undefined && (
-              <StyledButtonIconWrapper themePosition="left">
-                <StyledButtonIcon
-                  disabled={disabled}
-                  icon={icon}
-                  pressed={pressed}
-                  testID={`${testID}-left-icon`}
-                  themeVariant={getThemeVariant(variant, intent)}
-                />
-              </StyledButtonIconWrapper>
-            )}
-            <StyledButtonText
-              disabled={disabled}
-              ellipsizeMode="tail"
-              numberOfLines={1}
-              pressed={pressed}
-              themeVariant={getThemeVariant(variant, intent)}
-            >
-              {text}
-            </StyledButtonText>
-            {rightIcon !== undefined && (
-              <StyledButtonIconWrapper themePosition="right">
-                <StyledButtonIcon
-                  disabled={disabled}
-                  icon={rightIcon}
-                  pressed={pressed}
-                  testID={`${testID}-right-icon`}
-                  themeVariant={getThemeVariant(variant, intent)}
-                />
-              </StyledButtonIconWrapper>
-            )}
-          </>
-        )}
-      </StyledButtonContainer>
-    )}
-  </Pressable>
-);
+}: ButtonProps): JSX.Element => {
+  const [pressed, setPressed] = React.useState(false);
+  const theme = useTheme();
+  const themeVariant = getThemeVariant(variant, intent);
+  return (
+    <StyledButtonContainer
+      onShowUnderlay={() => setPressed(true)}
+      onHideUnderlay={() => setPressed(false)}
+      underlayColor={theme.__hd__.button.colors.underlayColors[themeVariant]}
+      accessibilityHint={accessibilityHint}
+      accessibilityLabel={accessibilityLabel}
+      disabled={disabled || loading}
+      activeOpacity={0.5}
+      onPress={onPress}
+      testID={testID}
+      pressed={pressed}
+      themeVariant={themeVariant}
+      style={style}
+    >
+      {loading === true ? (
+        <LoadingIndicator
+          testID={`${testID}-loading-indicator`}
+          themeVariant={themeVariant}
+        />
+      ) : (
+        <>
+          {icon !== undefined && (
+            <StyledButtonIconWrapper themePosition="left">
+              <StyledButtonIcon
+                disabled={disabled}
+                icon={icon}
+                pressed={pressed}
+                testID={`${testID}-left-icon`}
+                themeVariant={themeVariant}
+              />
+            </StyledButtonIconWrapper>
+          )}
+          <StyledButtonText
+            disabled={disabled}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            pressed={pressed}
+            themeVariant={themeVariant}
+          >
+            {text}
+          </StyledButtonText>
+          {rightIcon !== undefined && (
+            <StyledButtonIconWrapper themePosition="right">
+              <StyledButtonIcon
+                disabled={disabled}
+                icon={rightIcon}
+                pressed={pressed}
+                testID={`${testID}-right-icon`}
+                themeVariant={themeVariant}
+              />
+            </StyledButtonIconWrapper>
+          )}
+        </>
+      )}
+    </StyledButtonContainer>
+  );
+};
 
 export default Button;

package/src/components/Button/StyledButton.tsx

@@ -1,4 +1,4 @@
-import { View } from 'react-native';
+import { TouchableHighlight, View } from 'react-native';
 import styled, { ReactNativeStyle } from '@emotion/native';
 import { Theme } from '@emotion/react';
 
@@ -79,10 +79,10 @@ const genFilledContainerStyles = (
   };
 
   return {
-    width: '100%',
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
+    alignSelf: 'stretch',
     padding: theme.__hd__.button.space.buttonPadding,
     borderRadius: theme.__hd__.button.radii.default,
     ...backgroundColorStyling(),
@@ -112,10 +112,10 @@ const genOutlineContainerStyles = (
   };
 
   return {
-    width: '100%',
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
+    alignSelf: 'stretch',
     padding:
       theme.__hd__.button.space.buttonPadding -
       theme.__hd__.button.borderWidth.default,
@@ -184,7 +184,7 @@ const genTextVariantTextStyles = (
   };
 };
 
-const StyledButtonContainer = styled(View)<{
+const StyledButtonContainer = styled(TouchableHighlight)<{
   disabled?: boolean;
   pressed?: boolean;
   themeVariant: ThemeVariant;
@@ -208,13 +208,11 @@ const StyledButtonContainer = styled(View)<{
     case 'text-secondary':
     case 'text-danger':
       return {
-        width: '100%',
         flexDirection: 'row',
         justifyContent: 'center',
         alignItems: 'center',
         padding: theme.__hd__.button.space.buttonPadding,
         borderWidth: 0,
-        backgroundColor: 'transparent',
       };
   }
 });

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

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { Text } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 
 import {
@@ -22,9 +23,11 @@ describe('StyledButtonContainer', () => {
     ${'text-primary'}
     ${'text-secondary'}
     ${'text-danger'}
-  `('has $themeVariant style', ({ themeVariant }) => {
+  `('has $themeVariant style', ({ themeVariant }): void => {
     const { toJSON } = renderWithTheme(
-      <StyledButtonContainer themeVariant={themeVariant} />
+      <StyledButtonContainer themeVariant={themeVariant}>
+        <Text>Title</Text>
+      </StyledButtonContainer>
     );
 
     expect(toJSON()).toMatchSnapshot();
@@ -46,7 +49,9 @@ describe('StyledButtonContainer', () => {
     'has pressed with the correct variant $themeVariant style',
     ({ themeVariant }) => {
       const { toJSON } = renderWithTheme(
-        <StyledButtonContainer themeVariant={themeVariant} pressed />
+        <StyledButtonContainer themeVariant={themeVariant} pressed>
+          <Text>Title</Text>
+        </StyledButtonContainer>
       );
       expect(toJSON()).toMatchSnapshot();
     }
@@ -54,7 +59,9 @@ describe('StyledButtonContainer', () => {
 
   it('renders disabled correctly', () => {
     const { toJSON } = renderWithTheme(
-      <StyledButtonContainer themeVariant="filled-primary" disabled />
+      <StyledButtonContainer themeVariant="filled-primary" disabled>
+        <Text>Title</Text>
+      </StyledButtonContainer>
     );
 
     expect(toJSON()).toMatchSnapshot();