fix: update the flyout button size

carbon-design-system · Jan 24, 2025 · 77079a3 · 77079a3
1 parent 52b2176
commit 77079a3
Show file tree

Hide file tree

Showing 12 changed files with 64 additions and 58 deletions.
diff --git a/packages/react/src/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.jsx b/packages/react/src/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.jsx
@@ -29,7 +29,7 @@ import {
   RELATIVE_VALUES,
 } from '../../constants/DateConstants';
 import Button from '../Button/Button';
-import FlyoutMenu, { FlyoutMenuDirection } from '../FlyoutMenu/FlyoutMenu';
+import FlyoutMenu, { FlyoutMenuButtonSize, FlyoutMenuDirection } from '../FlyoutMenu/FlyoutMenu';
 import { handleSpecificKeyDown, useOnClickOutside } from '../../utils/componentUtilityFunctions';
 
 import {
@@ -970,7 +970,7 @@ const DateTimePicker = ({
 
       <FlyoutMenu
         isOpen={isExpanded}
-        buttonSize={hasIconOnly ? 'default' : 'small'}
+        buttonSize={hasIconOnly ? FlyoutMenuButtonSize.Default : FlyoutMenuButtonSize.Small}
         renderIcon={invalidState ? WarningFilled : Calendar}
         disabled={disabled}
         buttonProps={{

diff --git a/packages/react/src/components/DateTimePicker/DateTimePickerV2WithoutTimeSpinner.jsx b/packages/react/src/components/DateTimePicker/DateTimePickerV2WithoutTimeSpinner.jsx
@@ -28,7 +28,7 @@ import {
   RELATIVE_VALUES,
 } from '../../constants/DateConstants';
 import Button from '../Button/Button';
-import FlyoutMenu, { FlyoutMenuDirection } from '../FlyoutMenu/FlyoutMenu';
+import FlyoutMenu, { FlyoutMenuButtonSize, FlyoutMenuDirection } from '../FlyoutMenu/FlyoutMenu';
 import { handleSpecificKeyDown, useOnClickOutside } from '../../utils/componentUtilityFunctions';
 
 import {
@@ -715,8 +715,9 @@ const DateTimePicker = ({
 
       <FlyoutMenu
         isOpen={isExpanded}
-        buttonSize={hasIconOnly ? 'default' : 'small'}
+        buttonSize={hasIconOnly ? FlyoutMenuButtonSize.Default : FlyoutMenuButtonSize.Small}
         renderIcon={invalidState ? WarningFilled : Calendar}
+        iconDescription={invalidState ? i18n.invalidText: i18n.calendarLabel}
         disabled={disabled}
         buttonProps={{
           tooltipPosition: 'top',

diff --git a/packages/react/src/components/FlyoutMenu/FlyoutMenu.jsx b/packages/react/src/components/FlyoutMenu/FlyoutMenu.jsx
@@ -21,6 +21,24 @@ export const FlyoutMenuDirection = {
   RightEnd: 'right-end',
 };
 
+export const FlyoutMenuButtonSize = {
+  Default: 'default',
+  Field: 'field',
+  Small: 'small',
+};
+
+const getButtonSize = (size) => {
+  switch (size) {
+    case FlyoutMenuButtonSize.Field:
+      return 'xs';
+    case FlyoutMenuButtonSize.Default:
+      return 'md';
+    case FlyoutMenuButtonSize.Small:
+    default:
+      return 'sm';
+  }
+};
+
 const getTooltipDirection = (direction) => {
   switch (direction) {
     case FlyoutMenuDirection.TopStart:
@@ -311,7 +329,7 @@ const FlyoutMenu = ({
                 hasIconOnly
                 kind="ghost"
                 testId={`${testId}-button`}
-                size={buttonSize}
+                size={buttonProps.size ?? getButtonSize(buttonSize)}
                 renderIcon={renderIcon}
                 onClick={() => {
                   if (typeof buttonProps.onClick === 'function') {
@@ -470,6 +488,8 @@ const propTypes = {
 
   /** classes that can be passed to the button used for the flyout menu */
   buttonProps: PropTypes.shape({
+    tooltipPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+    size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
     className: PropTypes.string,
     onClick: PropTypes.func,
   }),

diff --git a/packages/react/src/components/FlyoutMenu/FlyoutMenu.story.jsx b/packages/react/src/components/FlyoutMenu/FlyoutMenu.story.jsx
@@ -5,13 +5,7 @@ import { SettingsAdjust, ShareKnowledge } from '@carbon/react/icons';
 
 import Button from '../Button/Button';
 
-import FlyoutMenu, { FlyoutMenuDirection } from './FlyoutMenu';
-
-const buttonSizes = {
-  Default: 'default',
-  Field: 'field',
-  Small: 'small',
-};
+import FlyoutMenu, { FlyoutMenuDirection, FlyoutMenuButtonSize } from './FlyoutMenu';
 
 const CustomFooter = ({ setIsOpen, isOpen }) => {
   return (
@@ -43,7 +37,7 @@ export const DefaultExample = () => (
     }}
   >
     <FlyoutMenu
-      buttonSize={select('Button Size', buttonSizes, buttonSizes.Default)}
+      buttonSize={select('Button Size', FlyoutMenuButtonSize, FlyoutMenuButtonSize.Default)}
       renderIcon={ShareKnowledge}
       disabled={boolean('Disabled', false)}
       buttonProps={object('buttonProps', {
@@ -70,7 +64,7 @@ export const DefaultExample = () => (
 export const LargeFlyoutExample = () => (
   <div style={{ display: 'flex', justifyContent: 'center' }}>
     <FlyoutMenu
-      buttonSize={select('Button Size', buttonSizes, buttonSizes.Default)}
+      buttonSize={select('Button Size', FlyoutMenuButtonSize, FlyoutMenuButtonSize.Default)}
       renderIcon={ShareKnowledge}
       disabled={boolean('Disabled', false)}
       buttonProps={object('buttonProps', {
@@ -101,7 +95,7 @@ export const LargeFlyoutExample = () => (
 export const CustomFooterExample = () => (
   <div style={{ display: 'flex', justifyContent: 'center' }}>
     <FlyoutMenu
-      buttonSize={select('Button Size', buttonSizes, buttonSizes.Default)}
+      buttonSize={select('Button Size', FlyoutMenuButtonSize, FlyoutMenuButtonSize.Default)}
       renderIcon={SettingsAdjust}
       disabled={boolean('Disabled', false)}
       buttonProps={object('buttonProps', {
@@ -150,7 +144,7 @@ export const AutoPositioningExample = () => {
           }}
         >
           <FlyoutMenu
-            buttonSize={select('Button Size', buttonSizes, buttonSizes.Default)}
+            buttonSize={select('Button Size', FlyoutMenuButtonSize, FlyoutMenuButtonSize.Default)}
             renderIcon={ShareKnowledge}
             disabled={boolean('Disabled', false)}
             buttonProps={object('buttonProps', {
@@ -190,7 +184,7 @@ export const AutoPositioningExample = () => {
           }}
         >
           <FlyoutMenu
-            buttonSize={select('Button Size', buttonSizes, buttonSizes.Default)}
+            buttonSize={select('Button Size', FlyoutMenuButtonSize, FlyoutMenuButtonSize.Default)}
             renderIcon={ShareKnowledge}
             disabled={boolean('Disabled', false)}
             buttonProps={object('buttonProps', {
@@ -222,7 +216,7 @@ export const AutoPositioningExample = () => {
           }}
         >
           <FlyoutMenu
-            buttonSize={select('Button Size', buttonSizes, buttonSizes.Default)}
+            buttonSize={select('Button Size', FlyoutMenuButtonSize, FlyoutMenuButtonSize.Default)}
             renderIcon={ShareKnowledge}
             disabled={boolean('Disabled', false)}
             buttonProps={object('buttonProps', {
@@ -256,7 +250,7 @@ export const AutoPositioningExample = () => {
           }}
         >
           <FlyoutMenu
-            buttonSize={select('Button Size', buttonSizes, buttonSizes.Default)}
+            buttonSize={select('Button Size', FlyoutMenuButtonSize, FlyoutMenuButtonSize.Default)}
             renderIcon={ShareKnowledge}
             disabled={boolean('Disabled', false)}
             buttonProps={object('buttonProps', {
@@ -288,7 +282,7 @@ export const AutoPositioningExample = () => {
           }}
         >
           <FlyoutMenu
-            buttonSize={select('Button Size', buttonSizes, buttonSizes.Default)}
+            buttonSize={select('Button Size', FlyoutMenuButtonSize, FlyoutMenuButtonSize.Default)}
             renderIcon={ShareKnowledge}
             disabled={boolean('Disabled', false)}
             buttonProps={object('buttonProps', {
@@ -320,7 +314,7 @@ export const AutoPositioningExample = () => {
           }}
         >
           <FlyoutMenu
-            buttonSize={select('Button Size', buttonSizes, buttonSizes.Default)}
+            buttonSize={select('Button Size', FlyoutMenuButtonSize, FlyoutMenuButtonSize.Default)}
             renderIcon={ShareKnowledge}
             disabled={boolean('Disabled', false)}
             buttonProps={object('buttonProps', {
@@ -354,7 +348,7 @@ export const AutoPositioningExample = () => {
           }}
         >
           <FlyoutMenu
-            buttonSize={select('Button Size', buttonSizes, buttonSizes.Default)}
+            buttonSize={select('Button Size', FlyoutMenuButtonSize, FlyoutMenuButtonSize.Default)}
             renderIcon={ShareKnowledge}
             disabled={boolean('Disabled', false)}
             buttonProps={object('buttonProps', {
@@ -386,7 +380,7 @@ export const AutoPositioningExample = () => {
           }}
         >
           <FlyoutMenu
-            buttonSize={select('Button Size', buttonSizes, buttonSizes.Default)}
+            buttonSize={select('Button Size', FlyoutMenuButtonSize, FlyoutMenuButtonSize.Default)}
             renderIcon={ShareKnowledge}
             disabled={boolean('Disabled', false)}
             buttonProps={object('buttonProps', {
@@ -418,7 +412,7 @@ export const AutoPositioningExample = () => {
           }}
         >
           <FlyoutMenu
-            buttonSize={select('Button Size', buttonSizes, buttonSizes.Default)}
+            buttonSize={select('Button Size', FlyoutMenuButtonSize, FlyoutMenuButtonSize.Default)}
             renderIcon={ShareKnowledge}
             disabled={boolean('Disabled', false)}
             buttonProps={object('buttonProps', {

diff --git a/packages/react/src/components/IconSwitch/IconSwitch.jsx b/packages/react/src/components/IconSwitch/IconSwitch.jsx
@@ -153,7 +153,7 @@ IconSwitch.defaultProps = {
   className: undefined,
   selected: false,
   name: '',
-  size: 'default',
+  size: 'sm',
   onClick: undefined,
   onKeyDown: undefined,
   testId: 'icon-switch',

diff --git a/packages/react/src/components/IconSwitch/IconSwitch.test.jsx b/packages/react/src/components/IconSwitch/IconSwitch.test.jsx
@@ -22,7 +22,7 @@ describe('IconSwitch', () => {
       render(
         <IconSwitch
           name="blah"
-          size="default"
+          size="sm"
           renderIcon={List}
           text="test"
           index={0}
@@ -33,31 +33,31 @@ describe('IconSwitch', () => {
     });
 
     it('should have the expected text', () => {
-      render(<IconSwitch name="blah" size="default" renderIcon={List} text="test" index={0} />);
+      render(<IconSwitch name="blah" size="sm" renderIcon={List} text="test" index={0} />);
       expect(screen.getByRole('button')).toBeVisible();
     });
 
     it('label should have the expected class', () => {
-      render(<IconSwitch name="blah" size="default" renderIcon={List} text="test" index={0} />);
+      render(<IconSwitch name="blah" size="sm" renderIcon={List} text="test" index={0} />);
       const className = `${prefix}--assistive-text`;
       expect(screen.getByText('test')).toHaveClass(className);
     });
 
     it('should have the expected class', () => {
-      render(<IconSwitch name="blah" size="default" renderIcon={List} text="test" index={0} />);
+      render(<IconSwitch name="blah" size="sm" renderIcon={List} text="test" index={0} />);
       const cls = `${iotPrefix}--icon-switch--default`;
       expect(screen.getByRole('button')).toHaveClass(cls);
     });
 
     it('should have unselected class', () => {
-      render(<IconSwitch name="blah" size="default" renderIcon={List} text="test" index={0} />);
+      render(<IconSwitch name="blah" size="sm" renderIcon={List} text="test" index={0} />);
       const unselectedClass = `${iotPrefix}--icon-switch--unselected`;
       expect(screen.getByRole('button')).toHaveClass(unselectedClass);
     });
 
     it('should NOT have unselected class when selected is set to true', () => {
       render(
-        <IconSwitch name="blah" size="default" renderIcon={List} text="test" index={0} selected />
+        <IconSwitch name="blah" size="sm" renderIcon={List} text="test" index={0} selected />
       );
       const unselectedClass = `${iotPrefix}--icon-switch--unselected`;
       expect(screen.getByRole('button')).not.toHaveClass(unselectedClass);
@@ -84,7 +84,7 @@ describe('IconSwitch', () => {
       render(
         <IconSwitch
           name={name}
-          size="default"
+          size="sm"
           renderIcon={List}
           onClick={buttonOnClick}
           onKeyDown={buttonOnKey}
@@ -100,7 +100,7 @@ describe('IconSwitch', () => {
       render(
         <IconSwitch
           name={name}
-          size="default"
+          size="sm"
           renderIcon={List}
           onClick={buttonOnClick}
           onKeyDown={buttonOnKey}
@@ -115,7 +115,7 @@ describe('IconSwitch', () => {
       render(
         <IconSwitch
           name={name}
-          size="default"
+          size="sm"
           renderIcon={List}
           onClick={buttonOnClick}
           onKeyDown={buttonOnKey}
@@ -130,7 +130,7 @@ describe('IconSwitch', () => {
       render(
         <IconSwitch
           name={name}
-          size="default"
+          size="sm"
           renderIcon={List}
           onClick={buttonOnClick}
           onKeyDown={buttonOnKey}

diff --git a/packages/react/src/components/ImageGalleryModal/ImageGalleryModal.jsx b/packages/react/src/components/ImageGalleryModal/ImageGalleryModal.jsx
@@ -219,15 +219,15 @@ const ImageGalleryModal = ({
             >
               <IconSwitch
                 name={GRID}
-                size="large"
+                size="lg"
                 text={gridButtonText}
                 renderIcon={(props) => <Grid size={20} {...props} />}
                 index={0}
                 data-testid={`${testId}-grid-switch`}
               />
               <IconSwitch
                 name={LIST}
-                size="large"
+                size="lg"
                 text={listButtonText}
                 renderIcon={(props) => <List size={20} {...props} />}
                 index={1}

diff --git a/packages/react/src/components/Table/Table.main.story.jsx b/packages/react/src/components/Table/Table.main.story.jsx
@@ -1649,7 +1649,7 @@ export const WithToolbar = () => {
       key="custom-content-2"
       direction={FlyoutMenuDirection.BottomEnd}
       iconDescription="Toggle flyout Menu"
-      buttonProps={{ size: 'default', renderIcon: SettingsAdjust }}
+      buttonProps={{ size: 'lg', renderIcon: SettingsAdjust }}
       onApply={action('Flyout Menu Apply Clicked')}
       onCancel={action('Flyout Menu Cancel Clicked')}
       hideTooltip={false}

diff --git a/packages/react/src/components/Table/Table.story.helpers.jsx b/packages/react/src/components/Table/Table.story.helpers.jsx
@@ -694,7 +694,7 @@ export const getBatchActions = () => {
 export const getCustomToolbarContentElement = () => (
   <div
     key="custom-content-1"
-    className=".bx--type-light"
+    className=".cd--type-light"
     style={{ alignItems: 'center', display: 'flex', padding: '0 1rem' }}
   >
     Custom content

diff --git a/packages/react/src/components/Table/TableToolbar/TableToolbar.jsx b/packages/react/src/components/Table/TableToolbar/TableToolbar.jsx
@@ -451,7 +451,7 @@ const TableToolbar = ({
               }}
               description={i18n.downloadIconDescription}
               testId="download-button"
-              renderIcon={(props) => <Download size={16} {...props} />}
+              renderIcon={Download}
               disabled={isDisabled}
               langDir={langDir}
             />
@@ -462,7 +462,7 @@ const TableToolbar = ({
               onClick={onToggleColumnSelection}
               description={i18n.columnSelectionButtonAria}
               testId="column-selection-button"
-              renderIcon={(props) => <Column size={16} {...props} />}
+              renderIcon={Column}
               disabled={isDisabled}
               langDir={langDir}
             />
@@ -473,7 +473,7 @@ const TableToolbar = ({
               onClick={onToggleFilter}
               description={i18n.filterButtonAria}
               testId="filter-button"
-              renderIcon={(props) => <Filter size={16} {...props} />}
+              renderIcon={Filter}
               disabled={isDisabled}
               langDir={langDir}
             />

diff --git a/packages/react/src/components/Table/TableToolbar/TableToolbarAdvancedFilterFlyout.jsx b/packages/react/src/components/Table/TableToolbar/TableToolbarAdvancedFilterFlyout.jsx
@@ -271,7 +271,7 @@ const TableToolbarAdvancedFilterFlyout = ({
       className={`${iotPrefix}--table-toolbar__advanced-filters-button-wrapper`}
       direction={FlyoutMenuDirection.BottomEnd}
       disabled={isDisabled}
-      renderIcon={(props) => <Filter size={16} {...props} />}
+      renderIcon={Filter}
       hideTooltip={false}
       light
       isOpen={advancedFilterFlyoutOpen}
@@ -283,6 +283,7 @@ const TableToolbarAdvancedFilterFlyout = ({
         onCancelAdvancedFilter();
       }}
       buttonProps={{
+        size:'lg',
         className: classnames(
           `${prefix}--btn--icon-only`,
           `${iotPrefix}--tooltip-svg-wrapper`,
@@ -300,7 +301,7 @@ const TableToolbarAdvancedFilterFlyout = ({
       }}
     >
       <Tabs className={`${iotPrefix}--advanced-filter__tab-container`}>
-          <TabList aria-label="advanced-filter-flyout-tab">
+        <TabList aria-label="advanced-filter-flyout-tab">
           <Tab title={simpleFiltersTabLabel}>{simpleFiltersTabLabel}</Tab>
           <Tab title={advancedFiltersTabLabel}>{advancedFiltersTabLabel}</Tab>
         </TabList>