@hero-design/rn 8.40.0 → 8.40.2

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

@@ -52,4 +52,16 @@ describe('SectionHeading', () => {
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
+
+  it.each`
+    size
+    ${'small'}
+    ${'medium'}
+  `('renders correct style with $size', ({ size }) => {
+    const wrapper = renderWithTheme(
+      <SectionHeading text="Section Heading" size={size} />
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
 });

package/src/components/SectionHeading/index.tsx

@@ -9,6 +9,7 @@ import {
   StyledWrapper,
 } from './StyledHeading';
 import type { IconName, IconProps } from '../Icon';
+import { useDeprecation } from '../../utils/hooks';
 
 export interface SectionHeadingProps extends ViewProps {
   /**
@@ -24,10 +25,12 @@ export interface SectionHeadingProps extends ViewProps {
    */
   rightChildren?: ReactElement;
   /**
+   * @deprecated fontSize will be removed in the next major release.
    * Size of the text.
    */
   fontSize?: 'small' | 'medium' | 'large' | 'xlarge';
   /**
+   * @deprecated fontWeight will be removed in the next major release.
    * Heading's font-weight.
    */
   fontWeight?: 'light' | 'regular' | 'semi-bold';
@@ -43,13 +46,15 @@ export interface SectionHeadingProps extends ViewProps {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Component size.
+   */
+  size?: 'small' | 'medium';
 }
 
 const ICON_SIZE_MAP = {
   small: 'small',
   medium: 'medium',
-  large: 'medium',
-  xlarge: 'large',
 } as const;
 
 const ICON_INTENT_MAP = {
@@ -65,37 +70,51 @@ const SectionHeading = ({
   fontSize = 'large',
   intent = 'body',
   fontWeight = 'regular',
+  size = 'medium',
   style,
   testID,
-}: SectionHeadingProps): ReactElement => (
-  <StyledHeading style={style} testID={testID}>
-    <StyledWrapper>
-      <StyledIconWrapper>
-        {icon !== undefined &&
-          (typeof icon === 'string' ? (
-            <Icon
-              icon={icon}
-              size={ICON_SIZE_MAP[fontSize]}
-              intent={ICON_INTENT_MAP[intent]}
-            />
-          ) : (
-            React.cloneElement(icon, {
-              size: ICON_SIZE_MAP[fontSize],
-              intent: ICON_INTENT_MAP[intent],
-              ...icon.props,
-            })
-          ))}
-      </StyledIconWrapper>
-      <Typography.Text
-        fontSize={fontSize}
-        intent={intent}
-        fontWeight={fontWeight}
-      >
-        {text}
-      </Typography.Text>
-    </StyledWrapper>
-    {rightChildren}
-  </StyledHeading>
-);
+}: SectionHeadingProps): ReactElement => {
+  useDeprecation(
+    `SectionHeading's fontSize prop is deprecated and will be removed in the next major release, please remove it.`,
+    fontSize !== undefined
+  );
+
+  useDeprecation(
+    `SectionHeading's fontWeight prop is deprecated and will be removed in the next major release, please remove it.`,
+    fontWeight !== undefined
+  );
+
+  return (
+    <StyledHeading themeSize={size} style={style} testID={testID}>
+      <StyledWrapper>
+        <StyledIconWrapper>
+          {icon !== undefined &&
+            (typeof icon === 'string' ? (
+              <Icon
+                icon={icon}
+                size={ICON_SIZE_MAP[size]}
+                intent={ICON_INTENT_MAP[intent]}
+              />
+            ) : (
+              React.cloneElement(icon, {
+                size: ICON_SIZE_MAP[size],
+                intent: ICON_INTENT_MAP[intent],
+                ...icon.props,
+              })
+            ))}
+        </StyledIconWrapper>
+
+        {size === 'small' ? (
+          <Typography.Caption intent={intent}>{text}</Typography.Caption>
+        ) : (
+          <Typography.Body variant="small" intent={intent}>
+            {text}
+          </Typography.Body>
+        )}
+      </StyledWrapper>
+      {rightChildren}
+    </StyledHeading>
+  );
+};
 
 export default SectionHeading;

package/src/components/Select/MultiSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap

@@ -93,11 +93,13 @@ exports[`OptionList render isLoading correctly 1`] = `
             },
           ]
         }
+        themeSize="medium"
       >
         <View
           style={
             [
               {
+                "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
               },
@@ -109,7 +111,7 @@ exports[`OptionList render isLoading correctly 1`] = `
             style={
               [
                 {
-                  "marginRight": 8,
+                  "marginRight": 12,
                 },
                 undefined,
               ]
@@ -122,17 +124,16 @@ exports[`OptionList render isLoading correctly 1`] = `
                 {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
+                  "fontSize": 14,
                   "letterSpacing": 0.48,
-                  "lineHeight": 24,
+                  "lineHeight": 22,
                 },
                 undefined,
               ]
             }
-            themeFontSize="large"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="small"
           >
             A
           </Text>
@@ -347,11 +348,13 @@ exports[`OptionList render isLoading correctly 1`] = `
             },
           ]
         }
+        themeSize="medium"
       >
         <View
           style={
             [
               {
+                "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
               },
@@ -363,7 +366,7 @@ exports[`OptionList render isLoading correctly 1`] = `
             style={
               [
                 {
-                  "marginRight": 8,
+                  "marginRight": 12,
                 },
                 undefined,
               ]
@@ -376,17 +379,16 @@ exports[`OptionList render isLoading correctly 1`] = `
                 {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
+                  "fontSize": 14,
                   "letterSpacing": 0.48,
-                  "lineHeight": 24,
+                  "lineHeight": 22,
                 },
                 undefined,
               ]
             }
-            themeFontSize="large"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="small"
           >
             B
           </Text>
@@ -906,11 +908,13 @@ exports[`OptionList renders correctly 1`] = `
             },
           ]
         }
+        themeSize="medium"
       >
         <View
           style={
             [
               {
+                "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
               },
@@ -922,7 +926,7 @@ exports[`OptionList renders correctly 1`] = `
             style={
               [
                 {
-                  "marginRight": 8,
+                  "marginRight": 12,
                 },
                 undefined,
               ]
@@ -935,17 +939,16 @@ exports[`OptionList renders correctly 1`] = `
                 {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
+                  "fontSize": 14,
                   "letterSpacing": 0.48,
-                  "lineHeight": 24,
+                  "lineHeight": 22,
                 },
                 undefined,
               ]
             }
-            themeFontSize="large"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="small"
           >
             A
           </Text>
@@ -1160,11 +1163,13 @@ exports[`OptionList renders correctly 1`] = `
             },
           ]
         }
+        themeSize="medium"
       >
         <View
           style={
             [
               {
+                "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
               },
@@ -1176,7 +1181,7 @@ exports[`OptionList renders correctly 1`] = `
             style={
               [
                 {
-                  "marginRight": 8,
+                  "marginRight": 12,
                 },
                 undefined,
               ]
@@ -1189,17 +1194,16 @@ exports[`OptionList renders correctly 1`] = `
                 {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
+                  "fontSize": 14,
                   "letterSpacing": 0.48,
-                  "lineHeight": 24,
+                  "lineHeight": 22,
                 },
                 undefined,
               ]
             }
-            themeFontSize="large"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="small"
           >
             B
           </Text>
@@ -1566,11 +1570,13 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
             },
           ]
         }
+        themeSize="medium"
       >
         <View
           style={
             [
               {
+                "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
               },
@@ -1582,7 +1588,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
             style={
               [
                 {
-                  "marginRight": 8,
+                  "marginRight": 12,
                 },
                 undefined,
               ]
@@ -1595,17 +1601,16 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
                 {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
+                  "fontSize": 14,
                   "letterSpacing": 0.48,
-                  "lineHeight": 24,
+                  "lineHeight": 22,
                 },
                 undefined,
               ]
             }
-            themeFontSize="large"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="small"
           >
             A
           </Text>
@@ -1820,11 +1825,13 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
             },
           ]
         }
+        themeSize="medium"
       >
         <View
           style={
             [
               {
+                "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
               },
@@ -1836,7 +1843,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
             style={
               [
                 {
-                  "marginRight": 8,
+                  "marginRight": 12,
                 },
                 undefined,
               ]
@@ -1849,17 +1856,16 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
                 {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
+                  "fontSize": 14,
                   "letterSpacing": 0.48,
-                  "lineHeight": 24,
+                  "lineHeight": 22,
                 },
                 undefined,
               ]
             }
-            themeFontSize="large"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="small"
           >
             B
           </Text>
@@ -2254,11 +2260,13 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
             },
           ]
         }
+        themeSize="medium"
       >
         <View
           style={
             [
               {
+                "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
               },
@@ -2270,7 +2278,7 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
             style={
               [
                 {
-                  "marginRight": 8,
+                  "marginRight": 12,
                 },
                 undefined,
               ]
@@ -2283,17 +2291,16 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
                 {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
+                  "fontSize": 14,
                   "letterSpacing": 0.48,
-                  "lineHeight": 24,
+                  "lineHeight": 22,
                 },
                 undefined,
               ]
             }
-            themeFontSize="large"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="small"
           >
             A
           </Text>
@@ -2508,11 +2515,13 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
             },
           ]
         }
+        themeSize="medium"
       >
         <View
           style={
             [
               {
+                "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
               },
@@ -2524,7 +2533,7 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
             style={
               [
                 {
-                  "marginRight": 8,
+                  "marginRight": 12,
                 },
                 undefined,
               ]
@@ -2537,17 +2546,16 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
                 {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
+                  "fontSize": 14,
                   "letterSpacing": 0.48,
-                  "lineHeight": 24,
+                  "lineHeight": 22,
                 },
                 undefined,
               ]
             }
-            themeFontSize="large"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="small"
           >
             B
           </Text>