@hero-design/rn 8.27.0 → 8.27.2

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { ToolbarGroupWrapper } from './StyledToolbar';
 import ToolbarItem from './ToolbarItem';
 import type { ToolbarItemProps } from './ToolbarItem';
+import { useDeprecation } from '../../utils/hooks';
 
 export interface ToolbarGroupProps {
   /**
@@ -15,9 +16,8 @@ export interface ToolbarGroupProps {
 }
 
 const ToolbarGroup = ({ align = 'right', items = [] }: ToolbarGroupProps) => {
-  // set maxWidth prevents overflow of items
-  // issue: https://github.com/Thinkei/hero-design/issues/1619
-  const maxWidth = items.length > 0 ? `${100 / items.length}%` : undefined;
+  useDeprecation("Toolbar's align prop is deprecated", align !== 'right');
+
   return (
     <ToolbarGroupWrapper align={align}>
       {items.map(({ label, icon, onPress, disabled, intent }) => (
@@ -28,7 +28,6 @@ const ToolbarGroup = ({ align = 'right', items = [] }: ToolbarGroupProps) => {
           intent={intent}
           onPress={onPress}
           disabled={disabled}
-          style={{ maxWidth }}
         />
       ))}
     </ToolbarGroupWrapper>

package/src/components/Toolbar/ToolbarItem.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import Icon from '../Icon';
 import Typography from '../Typography';
-import { ToolbarItemWrapper } from './StyledToolbar';
+import {
+  IconButtonLabel,
+  IconButtonWrapper,
+  ToolbarItemWrapper,
+} from './StyledToolbar';
 import type { IconName } from '../Icon';
 
 export interface ToolbarItemProps {
@@ -33,35 +37,87 @@ export interface ToolbarItemProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const ToolbarItem = ({
-  icon,
-  label,
-  onPress,
-  intent = 'primary',
-  disabled = false,
-  style,
-}: ToolbarItemProps) => (
-  <ToolbarItemWrapper onPress={onPress} disabled={disabled} style={style}>
-    {icon ? (
+type IconItemProps = {
+  icon: IconName;
+  label?: string;
+  intent?: ToolbarItemProps['intent'];
+  disabled?: boolean;
+};
+
+const IconItem = ({ icon, intent, disabled, label }: IconItemProps) => {
+  return (
+    <IconButtonWrapper>
       <Icon
         icon={icon}
-        size={label ? 'medium' : 'large'}
+        size="medium"
         intent={disabled ? 'disabled-text' : intent}
         testID={`toolbar-item-icon-${icon}`}
       />
-    ) : null}
-    {label ? (
+      {label ? (
+        <IconButtonLabel
+          fontSize="large"
+          fontWeight="semi-bold"
+          intent={disabled ? 'subdued' : intent}
+          allowFontScaling={false}
+          numberOfLines={1}
+        >
+          {label}
+        </IconButtonLabel>
+      ) : null}
+    </IconButtonWrapper>
+  );
+};
+
+type ToolbarItemContentProps = {
+  icon?: IconName;
+  label?: string;
+  intent?: ToolbarItemProps['intent'];
+  disabled?: boolean;
+};
+const ToolbarItemContent = ({
+  icon,
+  label,
+  intent = 'primary',
+  disabled = false,
+}: ToolbarItemContentProps): JSX.Element | null => {
+  if (icon) {
+    return (
+      <IconItem icon={icon} intent={intent} disabled={disabled} label={label} />
+    );
+  }
+  if (label) {
+    return (
       <Typography.Text
-        fontSize={icon ? 'small' : 'large'}
+        fontSize="large"
         fontWeight="semi-bold"
-        intent={disabled ? 'subdued' : intent}
+        intent={disabled ? 'disabled' : intent}
         allowFontScaling={false}
         numberOfLines={1}
       >
         {label}
       </Typography.Text>
-    ) : null}
-  </ToolbarItemWrapper>
-);
+    );
+  }
+  return null;
+};
+const ToolbarItem = ({
+  icon,
+  label,
+  onPress,
+  intent = 'primary',
+  disabled = false,
+  style,
+}: ToolbarItemProps) => {
+  return (
+    <ToolbarItemWrapper onPress={onPress} disabled={disabled} style={style}>
+      <ToolbarItemContent
+        icon={icon}
+        label={label}
+        intent={intent}
+        disabled={disabled}
+      />
+    </ToolbarItemWrapper>
+  );
+};
 
 export default ToolbarItem;

package/src/components/Toolbar/__tests__/ToolbarItem.spec.tsx

@@ -5,30 +5,47 @@ import ToolbarItem from '../ToolbarItem';
 
 describe('ToolbarItems', () => {
   it.each`
-    intent
-    ${'primary'}
-    ${'info'}
-    ${'success'}
-    ${'danger'}
-    ${'warning'}
-  `('renders correctly when intent is $intent', ({ intent }) => {
-    const onPress = jest.fn();
-    const { toJSON, getByText, getByTestId } = renderWithTheme(
-      <ToolbarItem
-        label="Action"
-        intent={intent}
-        icon="home"
-        onPress={onPress}
-      />
-    );
+    intent       | icon             | label          | disabled
+    ${'primary'} | ${'ai-outlined'} | ${'Try again'} | ${false}
+    ${'primary'} | ${'ai-outlined'} | ${undefined}   | ${false}
+    ${'primary'} | ${'ai-outlined'} | ${'Try again'} | ${true}
+    ${'info'}    | ${undefined}     | ${'Save'}      | ${false}
+    ${'success'} | ${undefined}     | ${'Save'}      | ${false}
+    ${'danger'}  | ${undefined}     | ${'Discard'}   | ${false}
+    ${'warning'} | ${undefined}     | ${'Warning'}   | ${false}
+  `(
+    'renders correctly when intent is $intent, icon is $icon, label is $label and disabled is $disabled',
+    ({ intent, icon, label, disabled }) => {
+      const onPress = jest.fn();
+      const { toJSON, getByText, getByTestId } = renderWithTheme(
+        <ToolbarItem
+          label={label}
+          intent={intent}
+          icon={icon}
+          onPress={onPress}
+          disabled={disabled}
+        />
+      );
 
-    expect(toJSON()).toMatchSnapshot();
-    expect(getByText('Action')).toBeDefined();
-    expect(getByTestId('toolbar-item-icon-home')).toBeDefined();
+      expect(toJSON()).toMatchSnapshot();
+      if (icon) {
+        expect(getByTestId(`toolbar-item-icon-${icon}`)).toBeDefined();
+      }
 
-    fireEvent.press(getByText('Action'));
-    expect(onPress).toBeCalled();
-  });
+      if (label) {
+        expect(getByText(label)).toBeDefined();
+        fireEvent.press(getByText(label));
+        if (disabled) {
+          expect(onPress).not.toBeCalled();
+        } else {
+          expect(onPress).toBeCalled();
+        }
+      } else {
+        fireEvent.press(getByTestId(`toolbar-item-icon-${icon}`));
+        expect(onPress).toBeCalled();
+      }
+    }
+  );
 
   it('renders correctly when disabled', () => {
     const onPress = jest.fn();