@hero-design/rn 8.12.1 → 8.12.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.12.1",
+  "version": "8.12.3",
   "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": "8.12.1",
+    "@hero-design/colors": "8.12.3",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -44,7 +44,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.12.1",
+    "@hero-design/eslint-plugin": "8.12.3",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -60,9 +60,9 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.12.1",
+    "eslint-config-hd": "8.12.3",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.12.1",
+    "prettier-config-hd": "8.12.3",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Button/Button.tsx

@@ -1,6 +1,6 @@
-import type { ReactChild } from 'react';
-import React from 'react';
+import React, { ReactChild, useMemo } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import { Theme, useTheme } from '../../theme';
 import type { IconName } from '../Icon';
 import LoadingIndicator from './LoadingIndicator';
 import type { Intent, ThemeVariant } from './StyledButton';
@@ -10,6 +10,7 @@ import {
   StyledButtonIconWrapper,
   StyledButtonText,
 } from './StyledButton';
+import { useDeprecation } from '../../utils/hooks';
 
 export interface ButtonProps {
   /**
@@ -93,7 +94,35 @@ export const getThemeVariant = (
       return TEXT_VARIANTS[intent];
   }
 };
+const getUnderlayColor = (theme: Theme, themeVariant: ThemeVariant) => {
+  switch (themeVariant) {
+    case 'filled-primary':
+      return theme.__hd__.button.colors.pressedBackground.filledPrimary;
+    case 'filled-secondary':
+      return theme.__hd__.button.colors.pressedBackground.filledSecondary;
+    case 'filled-danger':
+      return theme.__hd__.button.colors.pressedBackground.filledDanger;
+    case 'outlined-primary':
+      return theme.__hd__.button.colors.pressedBackground.outlinedPrimary;
+    case 'outlined-secondary':
+      return theme.__hd__.button.colors.pressedBackground.outlinedSecondary;
+    case 'outlined-danger':
+      return theme.__hd__.button.colors.pressedBackground.outlineDanger;
+    case 'text-primary':
+      return theme.__hd__.button.colors.pressedBackground.textPrimary;
+    case 'text-secondary':
+      return theme.__hd__.button.colors.pressedBackground.textSecondary;
+    case 'text-danger':
+      return theme.__hd__.button.colors.pressedBackground.textDanger;
+  }
+};
 
+const deprecatedVariants: ThemeVariant[] = [
+  'filled-secondary',
+  'filled-danger',
+  'outlined-secondary',
+  'outlined-danger',
+];
 const Button = ({
   accessibilityHint,
   accessibilityLabel,
@@ -109,16 +138,27 @@ const Button = ({
   variant = 'filled',
 }: ButtonProps): JSX.Element => {
   const themeVariant = getThemeVariant(variant, intent);
+  const theme = useTheme();
+  const underlayColor = useMemo(() => {
+    return getUnderlayColor(theme, themeVariant);
+  }, [theme, themeVariant]);
+
+  useDeprecation(
+    `Button variant ${deprecatedVariants.join(', ')} are deprecated.`,
+    deprecatedVariants.includes(themeVariant)
+  );
 
   return (
     <StyledButtonContainer
       accessibilityHint={accessibilityHint}
       accessibilityLabel={accessibilityLabel}
       disabled={disabled || loading}
+      loading={loading}
       onPress={onPress}
       testID={testID}
       themeVariant={themeVariant}
       style={style}
+      underlayColor={underlayColor}
     >
       {loading === true ? (
         <LoadingIndicator

package/src/components/Button/LoadingIndicator/StyledLoadingIndicator.tsx

@@ -46,8 +46,8 @@ const StyledLoadingDot = styled(View)<{
           backgroundColor: theme.__hd__.button.colors.invertedText,
         };
       case 'outlined-primary':
-      case 'text-primary':
         return genLoadingIndicatorStyles(theme, 'primary');
+      case 'text-primary':
       case 'outlined-secondary':
       case 'text-secondary':
         return genLoadingIndicatorStyles(theme, 'secondary');

package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/StyledLoadingIndicator.spec.tsx.snap

@@ -165,7 +165,7 @@ exports[`StyledLoadingIndicator has text-primary style 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#795e90",
         "borderRadius": 8,
         "height": 12,
         "marginBottom": 4,

package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/index.spec.tsx.snap

@@ -945,7 +945,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
       style={
         Array [
           Object {
-            "backgroundColor": "#401960",
+            "backgroundColor": "#795e90",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -977,7 +977,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
       style={
         Array [
           Object {
-            "backgroundColor": "#401960",
+            "backgroundColor": "#795e90",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -1009,7 +1009,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
       style={
         Array [
           Object {
-            "backgroundColor": "#401960",
+            "backgroundColor": "#795e90",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,

package/src/components/Button/StyledButton.tsx

@@ -1,4 +1,4 @@
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableHighlight, View } from 'react-native';
 import styled from '@emotion/native';
 import type { ReactNativeStyle } from '@emotion/native';
 import type { Theme } from '@emotion/react';
@@ -21,10 +21,11 @@ type ThemeVariant =
 const genFilledContainerStyles = (
   theme: Theme,
   intent: Intent,
-  disabled: boolean
+  disabled: boolean,
+  loading: boolean
 ): ReactNativeStyle => {
   const backgroundColorStyling = () => {
-    if (disabled) {
+    if (!loading && disabled) {
       return {
         backgroundColor: theme.__hd__.button.colors.disabledBorder,
       };
@@ -47,10 +48,11 @@ const genFilledContainerStyles = (
 const genOutlineContainerStyles = (
   theme: Theme,
   intent: Intent,
-  disabled: boolean
+  disabled: boolean,
+  loading: boolean
 ): ReactNativeStyle => {
   const borderColorStyling = () => {
-    if (disabled) {
+    if (!loading && disabled) {
       return {
         borderColor: theme.__hd__.button.colors.disabledBorder,
       };
@@ -118,32 +120,37 @@ const genTextVariantTextStyles = (
   };
 };
 
-const StyledButtonContainer = styled(TouchableOpacity)<{
+const StyledButtonContainer = styled(TouchableHighlight)<{
   disabled?: boolean;
   themeVariant: ThemeVariant;
-}>(({ disabled = false, themeVariant, theme }) => {
+  loading?: boolean;
+}>(({ disabled = false, loading = false, themeVariant, theme }) => {
   switch (themeVariant) {
     case 'filled-primary':
-      return genFilledContainerStyles(theme, 'primary', disabled);
+      return genFilledContainerStyles(theme, 'primary', disabled, loading);
     case 'filled-secondary':
-      return genFilledContainerStyles(theme, 'secondary', disabled);
+      return genFilledContainerStyles(theme, 'secondary', disabled, loading);
     case 'filled-danger':
-      return genFilledContainerStyles(theme, 'danger', disabled);
+      return genFilledContainerStyles(theme, 'danger', disabled, loading);
     case 'outlined-primary':
-      return genOutlineContainerStyles(theme, 'primary', disabled);
+      return genOutlineContainerStyles(theme, 'primary', disabled, loading);
     case 'outlined-secondary':
-      return genOutlineContainerStyles(theme, 'secondary', disabled);
+      return genOutlineContainerStyles(theme, 'secondary', disabled, loading);
     case 'outlined-danger':
-      return genOutlineContainerStyles(theme, 'danger', disabled);
+      return genOutlineContainerStyles(theme, 'danger', disabled, loading);
     case 'text-primary':
     case 'text-secondary':
     case 'text-danger':
       return {
+        borderRadius: theme.__hd__.button.radii.text,
         flexDirection: 'row',
         justifyContent: 'center',
         alignItems: 'center',
-        padding: theme.__hd__.button.space.buttonPadding,
+        padding: theme.__hd__.button.space.textButtonPadding,
         borderWidth: 0,
+        backgroundColor: loading
+          ? theme.__hd__.button.colors.textLoadingBackground
+          : 'transparent',
       };
   }
 });

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

@@ -46,9 +46,11 @@ describe('Button', () => {
   });
 
   it('renders loading icon', () => {
-    const { getByTestId } = renderWithTheme(
+    const { getByTestId, toJSON } = renderWithTheme(
       <Button text="A button" testID="button" onPress={jest.fn()} loading />
     );
+
+    expect(toJSON()).toMatchSnapshot();
     expect(getByTestId('button-loading-indicator')).toBeDefined();
   });
 
@@ -64,6 +66,17 @@ describe('Button', () => {
       });
     });
 
+    describe('button is loading', () => {
+      it('NOT allows to click on', () => {
+        const onPress = jest.fn();
+        const { getByTestId } = renderWithTheme(
+          <Button text="A button" testID="button" loading onPress={onPress} />
+        );
+        fireEvent.press(getByTestId('button-loading-indicator'));
+        expect(onPress).not.toHaveBeenCalled();
+      });
+    });
+
     describe('button is enabled', () => {
       it('allows to click on', () => {
         const onPress = jest.fn();
@@ -75,6 +88,38 @@ 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}
+  `('renders correctly', ({ variant, intent, loading, disabled }) => {
+    const { toJSON } = renderWithTheme(
+      <Button
+        text="A button"
+        variant={variant}
+        intent={intent}
+        loading={loading}
+        disabled={disabled}
+        onPress={jest.fn()}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
 });
 
 describe('getThemeVariant', () => {