@hero-design/rn 8.0.0-rc.0 → 8.0.1

package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap

@@ -156,6 +156,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {
@@ -416,6 +417,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {
@@ -661,6 +663,7 @@ exports[`TextInput disabled renders correctly 1`] = `
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {
@@ -866,6 +869,7 @@ exports[`TextInput error renders correctly 1`] = `
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {
@@ -1097,6 +1101,7 @@ exports[`TextInput filled renders correctly 1`] = `
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {
@@ -1317,6 +1322,7 @@ exports[`TextInput helper text renders correctly 1`] = `
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {
@@ -1522,6 +1528,7 @@ exports[`TextInput idle renders correctly 1`] = `
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {
@@ -1741,6 +1748,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {
@@ -2100,6 +2108,7 @@ exports[`TextInput max length renders correctly 1`] = `
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {
@@ -2398,6 +2407,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {
@@ -2621,6 +2631,7 @@ exports[`TextInput readonly renders correctly 1`] = `
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {
@@ -2841,6 +2852,7 @@ exports[`TextInput required renders correctly 1`] = `
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {

package/src/components/TextInput/__tests__/index.spec.tsx

@@ -59,6 +59,8 @@ describe('TextInput', () => {
       expect(
         within(getByTestId('idle-text-input')).queryAllByTestId('input-suffix')
       ).toHaveLength(1);
+
+      expect(getByTestId('text-input').props.placeholder).toBe(' ');
     });
 
     it('should not render input-label if label is empty', () => {
@@ -319,13 +321,13 @@ describe('TextInput', () => {
         );
 
         expect(wrapper.toJSON()).toMatchSnapshot();
-        expect(wrapper.queryByPlaceholderText('Enter Amount')).toBeFalsy();
+        expect(wrapper.getByTestId('text-input').props.placeholder).toBe(' ');
 
         fireEvent(wrapper.getByTestId('text-input'), 'focus');
         expect(wrapper.queryByPlaceholderText('Enter Amount')).toBeTruthy();
 
         fireEvent(wrapper.getByTestId('text-input'), 'blur');
-        expect(wrapper.queryByPlaceholderText('Enter Amount')).toBeFalsy();
+        expect(wrapper.getByTestId('text-input').props.placeholder).toBe(' ');
       });
     });
   });

package/src/components/TextInput/index.tsx

@@ -128,6 +128,10 @@ export const getVariant = ({
   return 'default';
 };
 
+// Fix issue: Placeholder is not shown on iOS when multiline is true
+// https://github.com/callstack/react-native-paper/pull/3331
+const EMPTY_PLACEHOLDER_VALUE = ' ';
+
 const TextInput = ({
   label,
   prefix,
@@ -211,7 +215,9 @@ const TextInput = ({
     },
     defaultValue,
     placeholder:
-      isFocused || label === undefined ? nativeProps.placeholder : undefined,
+      isFocused || label === undefined
+        ? nativeProps.placeholder
+        : EMPTY_PLACEHOLDER_VALUE,
   };
 
   return (

package/src/components/TimePicker/TimePickerIOS.tsx

@@ -5,7 +5,7 @@ import formatTime from 'date-fns/fp/format';
 
 import BottomSheet from '../BottomSheet';
 import TextInput from '../TextInput';
-import Typography from '../Typography';
+import Button from '../Button';
 import { StyledPickerWrapper } from './StyledTimePicker';
 import type { TimePickerProps } from './types';
 
@@ -50,22 +50,16 @@ const TimePickerIOS = ({
         onRequestClose={() => setOpen(false)}
         header={label}
         footer={
-          <TouchableOpacity
+          <Button
+            variant="text"
+            text={confirmLabel}
             onPress={() => {
               if (selectingDate) {
                 onChange(selectingDate);
               }
               setOpen(false);
             }}
-          >
-            <Typography.Text
-              fontSize="large"
-              fontWeight="semi-bold"
-              intent="primary"
-            >
-              {confirmLabel}
-            </Typography.Text>
-          </TouchableOpacity>
+          />
         }
       >
         <StyledPickerWrapper>

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap

@@ -133,6 +133,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
             onBlur={[Function]}
             onChangeText={[Function]}
             onFocus={[Function]}
+            placeholder=" "
             style={
               Array [
                 Object {

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -133,6 +133,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
             onBlur={[Function]}
             onChangeText={[Function]}
             onFocus={[Function]}
+            placeholder=" "
             style={
               Array [
                 Object {
@@ -476,9 +477,8 @@ exports[`TimePickerIOS renders correctly 1`] = `
                           "alignItems": "center",
                           "flexDirection": "row",
                           "justifyContent": "flex-end",
-                          "minHeight": 64,
-                          "paddingHorizontal": 24,
-                          "paddingVertical": 16,
+                          "paddingHorizontal": 12,
+                          "paddingVertical": 2,
                         },
                         undefined,
                       ]
@@ -498,27 +498,46 @@ exports[`TimePickerIOS renders correctly 1`] = `
                       onStartShouldSetResponder={[Function]}
                       style={
                         Object {
+                          "alignItems": "center",
+                          "borderWidth": 0,
+                          "flexDirection": "row",
+                          "justifyContent": "center",
                           "opacity": 1,
+                          "padding": 16,
                         }
                       }
                     >
                       <Text
+                        disabled={false}
+                        ellipsizeMode="tail"
+                        numberOfLines={1}
                         style={
                           Array [
                             Object {
-                              "color": "#401960",
-                              "fontFamily": "BeVietnamPro-SemiBold",
-                              "fontSize": 16,
-                              "letterSpacing": 0.48,
-                              "lineHeight": 24,
+                              "color": "#001f23",
+                              "fontFamily": "BeVietnamPro-Regular",
+                              "fontSize": 14,
+                              "letterSpacing": 0.42,
+                              "lineHeight": 22,
                             },
-                            undefined,
+                            Array [
+                              Object {
+                                "color": "#401960",
+                                "flexShrink": 1,
+                                "fontFamily": "BeVietnamPro-SemiBold",
+                                "fontSize": 16,
+                                "lineHeight": 24,
+                                "textAlign": "center",
+                              },
+                              undefined,
+                            ],
                           ]
                         }
-                        themeFontSize="large"
-                        themeFontWeight="semi-bold"
-                        themeIntent="primary"
+                        themeFontSize="medium"
+                        themeFontWeight="regular"
+                        themeIntent="body"
                         themeTypeface="neutral"
+                        themeVariant="text-primary"
                       >
                         Confirm
                       </Text>

package/src/components/Typography/Text/__tests__/__snapshots__/StyledText.spec.tsx.snap

@@ -190,7 +190,7 @@ exports[`StyledText has playful typeface style 1`] = `
     Array [
       Object {
         "color": "#001f23",
-        "fontFamily": "RebondGrotesque-Regular",
+        "fontFamily": "RebondGrotesque",
         "fontSize": 14,
         "letterSpacing": 0.42,
         "lineHeight": 22,

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -163,12 +163,11 @@ Object {
       },
       "sizes": Object {
         "closeIcon": 48,
-        "sectionHeight": 64,
       },
       "space": Object {
         "closeIconMargin": 12,
-        "footerHorizontalPadding": 24,
-        "footerVerticalPadding": 16,
+        "footerHorizontalPadding": 12,
+        "footerVerticalPadding": 2,
         "headerWrapperHorizontalPadding": 16,
         "headerWrapperVerticalPadding": 8,
       },
@@ -341,7 +340,7 @@ Object {
         "title": 24,
       },
       "fonts": Object {
-        "description": "RebondGrotesque-Regular",
+        "description": "RebondGrotesque",
         "title": "RebondGrotesque-SemiBold",
       },
       "sizes": Object {
@@ -600,9 +599,6 @@ Object {
       },
     },
     "select": Object {
-      "colors": Object {
-        "footerText": "#795e90",
-      },
       "radii": Object {
         "option": 4,
       },
@@ -678,29 +674,19 @@ Object {
         },
       },
       "sizes": Object {
-        "heights": Object {
-          "medium": 32,
-          "small": 24,
-        },
+        "height": 24,
         "selector": Object {
           "height": 56,
         },
-        "thumbs": Object {
-          "medium": 24,
-          "small": 16,
-        },
-        "widths": Object {
-          "medium": 64,
-          "small": 48,
-        },
+        "thumb": 16,
+        "width": 48,
       },
       "spaces": Object {
-        "medium": 4,
+        "paddingHorizontal": 4,
         "selector": Object {
           "iconPadding": 16,
           "wrapperPadding": 4,
         },
-        "small": 4,
       },
     },
     "tabs": Object {
@@ -739,8 +725,6 @@ Object {
         "archivedBackground": "#f1f2f3",
         "danger": "#de350b",
         "dangerBackground": "#fcebe7",
-        "default": "#001f23",
-        "defaultBackground": undefined,
         "info": "#4568fb",
         "infoBackground": "#ecf0ff",
         "primary": "#401960",
@@ -928,7 +912,7 @@ Object {
         },
         "playful": Object {
           "light": "RebondGrotesque-Light",
-          "regular": "RebondGrotesque-Regular",
+          "regular": "RebondGrotesque",
           "semiBold": "RebondGrotesque-SemiBold",
         },
       },
@@ -949,54 +933,25 @@ Object {
   },
   "colors": Object {
     "archived": "#abacaf",
-    "archivedBackground": "#f6f6f7",
-    "archivedDark": "#737479",
-    "archivedLight": "#bfc1c5",
     "archivedSurface": "#f1f2f3",
-    "backgroundDark": "#001f23",
-    "backgroundLight": "#f6f6f7",
-    "black": "#000000",
-    "danger": "#de350b",
-    "dangerBackground": "#fcebe7",
-    "dangerLight": "#f46363",
-    "dangerMediumLight": "#e3602a",
     "darkGlobalSurface": "#001f23",
     "decorativePrimary": "#ffffff",
     "decorativePrimarySurface": "#ccd2d3",
     "defaultGlobalSurface": "#ffffff",
     "defaultSurface": "#f6f6f7",
-    "disabledLightText": "#bfc1c5",
     "disabledOnDefaultGlobalSurface": "#bfc1c5",
     "disabledOutline": "#bfc1c5",
-    "disabledSecondary": "#a08cb0",
-    "disabledText": "#808f91",
     "error": "#f46363",
     "errorSurface": "#fcebe7",
-    "globalPrimary": "#001f23",
-    "globalPrimaryBackground": "#e6e9e9",
-    "globalPrimaryLight": "#808f91",
-    "globalPrimaryOutline": "#001f23",
-    "globalSecondary": "#4d6265",
-    "globalSecondaryOutline": "#e8e9ea",
-    "highlightedSecondarySurface": "#ecf0ff",
     "highlightedSurface": "#ece8ef",
-    "inactiveBackground": "#808f91",
     "inactiveOnDefaultGlobalSurface": "#808f91",
     "inactiveOutline": "#808f91",
     "info": "#b5c3fd",
-    "infoBackground": "#ecf0ff",
-    "infoLight": "#b5c3fd",
-    "infoMediumLight": "#b5c3fd",
     "infoSurface": "#ecf0ff",
-    "invertedText": "#ffffff",
-    "lightHighlightedSurface": "#ece8ef",
     "mutedArchived": "#bcbdbf",
     "mutedError": "#f68282",
-    "mutedGlobalPrimary": "#4d6265",
     "mutedInfo": "#c4cffd",
     "mutedOnDefaultGlobalSurface": "#4d6265",
-    "mutedPrimary": "#e6e9e9",
-    "mutedSecondary": "#808f91",
     "mutedSuccess": "#7bd897",
     "mutedWarning": "#ffcb8d",
     "neutralGlobalSurface": "#f6f6f7",
@@ -1004,38 +959,20 @@ Object {
     "onDarkGlobalSurface": "#ffffff",
     "onDefaultGlobalSurface": "#001f23",
     "onErrorSurface": "#de350b",
-    "onGlobalPrimary": "#ffffff",
     "onInfoSurface": "#4568fb",
     "onPrimary": "#ffffff",
     "onSecondary": "#ffffff",
     "onSuccessSurface": "#017d6d",
     "onWarningSurface": "#ffa234",
-    "outline": "#e8e9ea",
     "overlayGlobalSurface": "#000000",
-    "platformBackground": "#ffffff",
     "pressedSurface": "#664780",
     "primary": "#401960",
-    "primaryBackground": "#f3e6f6",
-    "primaryBackgroundDark": "#4d6265",
-    "primaryDark": "#795e90",
-    "primaryLight": "#c282d1",
     "primaryOutline": "#001f23",
     "secondary": "#795e90",
-    "secondaryBackground": "#ecf0ff",
-    "secondaryLight": "#b5c3fd",
     "secondaryOutline": "#e8e9ea",
-    "shadow": "#ccced1",
-    "subduedText": "#4d6265",
     "success": "#5ace7d",
-    "successBackground": "#f0fef4",
-    "successDark": "#017d6d",
-    "successLight": "#5ace7d",
     "successSurface": "#f0fef4",
-    "text": "#001f23",
     "warning": "#ffbe71",
-    "warningBackground": "#fff6eb",
-    "warningDark": "#ffa234",
-    "warningLight": "#ffbe71",
     "warningSurface": "#fff6eb",
   },
   "fontSizes": Object {
@@ -1058,7 +995,7 @@ Object {
     },
     "playful": Object {
       "light": "RebondGrotesque-Light",
-      "regular": "RebondGrotesque-Regular",
+      "regular": "RebondGrotesque",
       "semiBold": "RebondGrotesque-SemiBold",
     },
   },

package/src/theme/components/bottomSheet.ts

@@ -8,7 +8,6 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    sectionHeight: theme.sizes.xxxxxlarge,
     closeIcon: theme.sizes.xxxlarge,
   };
 
@@ -16,8 +15,8 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
     headerWrapperVerticalPadding: theme.space.small,
     headerWrapperHorizontalPadding: theme.space.medium,
     closeIconMargin: theme.space.smallMedium,
-    footerVerticalPadding: theme.space.medium,
-    footerHorizontalPadding: theme.space.large,
+    footerVerticalPadding: theme.space.xxsmall,
+    footerHorizontalPadding: theme.space.smallMedium,
   };
 
   const shadows = {

package/src/theme/components/select.ts

@@ -1,10 +1,6 @@
 import type { GlobalTheme } from '../global';
 
 const getSelectTheme = (theme: GlobalTheme) => {
-  const colors = {
-    footerText: theme.colors.secondary,
-  };
-
   const space = {
     minimumOptionListHeight: theme.space.xxxxlarge * 5,
     sectionSpacing: theme.space.smallMedium,
@@ -21,7 +17,7 @@ const getSelectTheme = (theme: GlobalTheme) => {
     option: theme.radii.base,
   };
 
-  return { space, colors, radii };
+  return { space, radii };
 };
 
 export default getSelectTheme;

package/src/theme/components/switch.ts

@@ -16,26 +16,16 @@ const getSwitchTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    thumbs: {
-      small: theme.sizes.medium,
-      medium: theme.sizes.large,
-    },
-    widths: {
-      small: theme.sizes.xxxlarge,
-      medium: theme.sizes.xxxxxlarge,
-    },
-    heights: {
-      small: theme.sizes.large,
-      medium: theme.sizes.xlarge,
-    },
+    thumb: theme.sizes.medium,
+    width: theme.sizes.xxxlarge,
+    height: theme.sizes.large,
     selector: {
       height: theme.sizes.xxxxlarge,
     },
   };
 
   const spaces = {
-    small: theme.space.xsmall,
-    medium: theme.space.xsmall,
+    paddingHorizontal: theme.space.xsmall,
     selector: {
       iconPadding: theme.space.medium,
       wrapperPadding: theme.space.xsmall,

package/src/theme/components/tag.ts

@@ -6,8 +6,6 @@ const getTagTheme = (theme: GlobalTheme) => {
   };
 
   const colors = {
-    default: theme.colors.onDefaultGlobalSurface,
-    defaultBackground: undefined,
     primary: theme.colors.primary,
     primaryBackground: undefined,
     info: theme.colors.onInfoSurface,

package/src/theme/global/colors/swag.ts

@@ -1,11 +1,6 @@
 import { swagPalette as palette } from '@hero-design/colors';
-import type {
-  SystemPalette,
-  BrandSystemPalette,
-  LegacyBrandSystemPalette,
-} from './types';
+import type { SystemPalette, BrandSystemPalette } from './types';
 import globalPalette from './global';
-import legacySystemPalette from './legacySystemPalette';
 
 const swagBrandSystemPallete: BrandSystemPalette = {
   primary: palette.scarletGum,
@@ -20,21 +15,7 @@ const swagBrandSystemPallete: BrandSystemPalette = {
   decorativePrimarySurface: palette.maasstrichtBlueLight80,
 };
 
-const swagLegacyBrandSystemPalette: LegacyBrandSystemPalette = {
-  mutedPrimary: palette.maasstrichtBlueLight90,
-  highlightedSecondarySurface: palette.aliceBlue,
-  mutedSecondary: palette.maasstrichtBlueLight50,
-  disabledSecondary: palette.scarletGumLight50,
-  lightHighlightedSurface: palette.scarletGumLight90,
-};
-
 const swagSystemPalette: SystemPalette = {
-  // TODO: Remove legacy in V8
-  // Legacy system
-  ...legacySystemPalette,
-  // Legacy brand
-  ...swagLegacyBrandSystemPalette,
-
   // Global
   ...globalPalette,
   // Brand

package/src/theme/global/colors/types.ts

@@ -56,61 +56,4 @@ export type BrandSystemPalette = {
   // End of Updated 14 / Nov / 22
 };
 
-export type LegacyBrandSystemPalette = {
-  mutedPrimary: string;
-  highlightedSecondarySurface: string;
-  mutedSecondary: string;
-  disabledSecondary: string;
-  lightHighlightedSurface: string;
-};
-
-export type LegacySystemPalette = {
-  globalPrimary: string;
-  globalPrimaryLight: string;
-  globalPrimaryBackground: string;
-  primaryLight: string;
-  primaryDark: string;
-  primaryBackground: string;
-  primaryBackgroundDark: string;
-  secondaryLight: string;
-  secondaryBackground: string;
-  infoMediumLight: string;
-  infoLight: string;
-  infoBackground: string;
-  successLight: string;
-  successDark: string;
-  successBackground: string;
-  danger: string;
-  dangerMediumLight: string;
-  dangerLight: string;
-  dangerBackground: string;
-  warningLight: string;
-  warningDark: string;
-  warningBackground: string;
-  platformBackground: string;
-  backgroundLight: string;
-  backgroundDark: string;
-  text: string;
-  subduedText: string;
-  disabledText: string;
-  disabledLightText: string;
-  invertedText: string;
-  outline: string;
-  archivedLight: string;
-  archivedDark: string;
-  archivedBackground: string;
-  black: string;
-  inactiveBackground: string;
-  shadow: string;
-
-  mutedGlobalPrimary: string;
-  onGlobalPrimary: string;
-  globalSecondary: string;
-  globalPrimaryOutline: string;
-  globalSecondaryOutline: string;
-};
-
-export type SystemPalette = LegacySystemPalette &
-  LegacyBrandSystemPalette &
-  GlobalSystemPalette &
-  BrandSystemPalette;
+export type SystemPalette = GlobalSystemPalette & BrandSystemPalette;

package/src/theme/global/typography.ts

@@ -45,7 +45,7 @@ const getFonts = ({
   },
   playful: {
     light: `${playful}-Light`,
-    regular: `${playful}-Regular`,
+    regular: `${playful}`,
     semiBold: `${playful}-SemiBold`,
   },
 });

package/src/utils/hooks.ts

@@ -23,7 +23,7 @@ export const useDeprecation = (message: string, cond = true) => {
   useEffect(() => {
     // eslint-disable-next-line no-console
     if (cond) {
-      console.warn(message);
+      console.error(message);
     }
   }, [message, cond]);
 };

package/types/components/Alert/StyledAlert.d.ts

@@ -4,7 +4,6 @@ declare const Container: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeVariant: 'default' | 'round';
     themeIntent: 'success' | 'info' | 'warning' | 'error' | 'notification';
 }, {}, {
     ref?: import("react").Ref<View> | undefined;