feat: change iconButton name to iconName

Orfium · Mar 11, 2024 · 32a1b14 · 32a1b14
1 parent d4853c2
commit 32a1b14
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 29 deletions.
diff --git a/src/components/ButtonBase/ButtonBase.tsx b/src/components/ButtonBase/ButtonBase.tsx
@@ -66,7 +66,7 @@ const ButtonBase = React.forwardRef<HTMLButtonElement, ButtonBaseProps>((props,
     <div css={buttonWrapperStyle({ isBlock })}>
       {isLoading && !isDisabled && <ButtonLoader dataTestId={testIdName} />}
       <button
-        {...omit(rest, ['avatar', 'iconRightName', 'iconLeftName', isIconButton ? 'name' : null])}
+        {...omit(rest, ['avatar', 'iconRightName', 'iconLeftName', 'iconName'])}
         ref={ref}
         type={htmlType}
         data-testid={generateTestDataId(testIdName, dataTestId)}

diff --git a/src/components/DatePicker/OverlayComponent/components/MonthWrapper/MonthWrapper.tsx b/src/components/DatePicker/OverlayComponent/components/MonthWrapper/MonthWrapper.tsx
@@ -86,7 +86,7 @@ const MonthWrapper = ({
           {(showedArrows === 'left' || showedArrows === 'both') && (
             <div css={monthHeaderNavigationIconWrapperStyle({ position: 'left' })}>
               <IconButton
-                name="triangleLeft"
+                iconName="triangleLeft"
                 type="tertiary"
                 onClick={() => handleArrow('back')}
                 dataTestId="month_back"
@@ -129,7 +129,7 @@ const MonthWrapper = ({
             {(showedArrows === 'right' || showedArrows === 'both') && (
               <div css={monthHeaderNavigationIconWrapperStyle({ position: 'right' })}>
                 <IconButton
-                  name="triangleRight"
+                  iconName="triangleRight"
                   type="tertiary"
                   onClick={() => handleArrow('forward')}
                   dataTestId="month_forward"

diff --git a/src/components/DropdownButton/DropdownButton.tsx b/src/components/DropdownButton/DropdownButton.tsx
@@ -97,7 +97,7 @@ const DropdownButton = React.forwardRef<HTMLButtonElement, DropdownButtonProps>(
             <IconButton
               type={type}
               size={size}
-              name={iconButtonName}
+              iconName={iconButtonName}
               onClick={handleIconButtonClick}
               dataTestPrefixId={generateTestDataId('icon-dropdown', dataTestPrefixId)}
             />
@@ -119,7 +119,7 @@ const DropdownButton = React.forwardRef<HTMLButtonElement, DropdownButtonProps>(
               <IconButton
                 type={type}
                 size={size}
-                name="triangleDown"
+                iconName="triangleDown"
                 shape="square"
                 onClick={handleIconButtonClick}
                 dataTestPrefixId={generateTestDataId('dropdown-toggle', dataTestPrefixId)}

diff --git a/src/components/IconButton/IconButton.stories.tsx b/src/components/IconButton/IconButton.stories.tsx
@@ -31,24 +31,24 @@ export const IconButtonTypesAndSizes = {
   render: () => (
     <>
       <Stack>
-        <IconButton name="moreOptions" />
-        <IconButton name="moreOptions" type="secondary" />
-        <IconButton name="moreOptions" type="tertiary" />
+        <IconButton iconName="moreOptions" />
+        <IconButton iconName="moreOptions" type="secondary" />
+        <IconButton iconName="moreOptions" type="tertiary" />
       </Stack>
       <Stack>
-        <IconButton name="moreOptions" shape="square" />
-        <IconButton name="moreOptions" type="secondary" shape="square" />
-        <IconButton name="moreOptions" type="tertiary" shape="square" />
+        <IconButton iconName="moreOptions" shape="square" />
+        <IconButton iconName="moreOptions" type="secondary" shape="square" />
+        <IconButton iconName="moreOptions" type="tertiary" shape="square" />
       </Stack>
       <Stack>
-        <IconButton name="moreOptions" size="compact" />
-        <IconButton name="moreOptions" type="secondary" size="compact" />
-        <IconButton name="moreOptions" type="tertiary" size="compact" />
+        <IconButton iconName="moreOptions" size="compact" />
+        <IconButton iconName="moreOptions" type="secondary" size="compact" />
+        <IconButton iconName="moreOptions" type="tertiary" size="compact" />
       </Stack>
       <Stack>
-        <IconButton name="moreOptions" shape="square" size="compact" />
-        <IconButton name="moreOptions" type="secondary" shape="square" size="compact" />
-        <IconButton name="moreOptions" type="tertiary" shape="square" size="compact" />
+        <IconButton iconName="moreOptions" shape="square" size="compact" />
+        <IconButton iconName="moreOptions" type="secondary" shape="square" size="compact" />
+        <IconButton iconName="moreOptions" type="tertiary" shape="square" size="compact" />
       </Stack>
     </>
   ),
@@ -60,7 +60,7 @@ export const Playground = {
   render: () => (
     <Stack>
       <IconButton
-        name={select(
+        iconName={select(
           'name',
           Object.keys(iconSelector)
             .sort((a, b) => a.localeCompare(b))

diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
@@ -18,13 +18,13 @@ export type IconButtonProps = Omit<
   /** This property defines the type of the IconButton */
   type?: PrimitiveButtonTypes;
   /** This property defines witch icon to use */
-  name: AcceptedIconNames;
+  iconName: AcceptedIconNames;
   /** This property defines the shape of the IconButton */
   shape?: IconButtonShape;
 };
 
 const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {
-  const { name, size = 'normal', type = 'primary', shape = 'circle', dataTestPrefixId } = props;
+  const { iconName, size = 'normal', type = 'primary', shape = 'circle', dataTestPrefixId } = props;
   const theme = useTheme();
   const tokens = getButtonTokens(theme);
 
@@ -38,7 +38,7 @@ const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>((props,
       shape={shape}
       dataTestPrefixId={dataTestPrefixId ? `${dataTestPrefixId}-icon-` : 'icon-'}
     >
-      <Icon size={tokens(`${size}.iconSize` as ButtonTokens)} name={name} color={iconColor} />
+      <Icon size={tokens(`${size}.iconSize` as ButtonTokens)} name={iconName} color={iconColor} />
     </ButtonBase>
   );
 });

diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx
@@ -53,7 +53,7 @@ export const MenuTriggers = {
     return (
       <Stack height={400}>
         <IconButton
-          name={'menu'}
+          iconName={'menu'}
           ref={btn1.btnRef}
           aria-label="Menu"
           onClick={btn1.handleBtnClick}
@@ -567,7 +567,7 @@ export const MenuDisabledKeys = {
     return (
       <Stack height={400}>
         <IconButton
-          name={'menu'}
+          iconName={'menu'}
           ref={btn1.btnRef}
           aria-label="Menu"
           onClick={btn1.handleBtnClick}

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -58,7 +58,7 @@ const Modal: React.FCC<ModalProps> = ({
             <div css={closeContainer}>
               <IconButton
                 type="tertiary"
-                name="close"
+                iconName="close"
                 onClick={onClose}
                 color={theme.tokens.colors.get('textColor.default.secondary')}
                 dataTestId="modal-close"

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
@@ -51,14 +51,14 @@ const Pagination = ({
     >
       {isEnhancedPaginationVisible && (
         <IconButton
-          name="pageFirst"
+          iconName="pageFirst"
           onClick={navigateToFirstPage}
           type="tertiary"
           isDisabled={isPrevPageDisabled || !hasPrevPage}
         />
       )}
       <IconButton
-        name="chevronLeft"
+        iconName="chevronLeft"
         type="tertiary"
         onClick={navigateToPrevPage}
         isDisabled={isPrevPageDisabled || !hasPrevPage}
@@ -69,14 +69,14 @@ const Pagination = ({
       </div>
 
       <IconButton
-        name="chevronRight"
+        iconName="chevronRight"
         type="tertiary"
         onClick={navigateToNextPage}
         isDisabled={isNextPageDisabled || !hasNextPage}
       />
       {isEnhancedPaginationVisible && (
         <IconButton
-          name="pageLast"
+          iconName="pageLast"
           type="tertiary"
           onClick={navigateToLastPage}
           isDisabled={isNextPageDisabled || !hasNextPage}

diff --git a/...able/components/RenderRowOrNestedRow/components/ExpandedButtonCell/ExpandedButtonCell.tsx b/...able/components/RenderRowOrNestedRow/components/ExpandedButtonCell/ExpandedButtonCell.tsx
@@ -55,7 +55,7 @@ const ExpandedButtonCell: React.FCC<ExpandedButtonCellProps> = ({
           >
             <IconButton
               type="tertiary"
-              name="chevronDown"
+              iconName="chevronDown"
               onClick={toggleIsChecked}
               dataTestId="expanded-button"
             />