fix(input): update action button to icon component

innovaccer · Sep 8, 2023 · 336dc41 · 336dc41
1 parent f89b6b3
commit 336dc41
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 97 deletions.
diff --git a/core/components/atoms/input/actionButton/ActionButton.tsx b/core/components/atoms/input/actionButton/ActionButton.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { BaseProps, extractBaseProps } from '@/utils/types';
-import { useAccessibilityProps } from '@/accessibility/utils';
+import { BaseProps } from '@/utils/types';
+import { FontVariationType } from '@/common.type';
+import { Icon } from '@/index';
 
-export type ActionButtonType = 'filled' | 'outlined' | 'round' | 'two-tone' | 'sharp';
+export type ActionButtonType = 'outlined' | 'rounded';
 
 export interface ActionButtonProps extends BaseProps {
   /**
@@ -18,6 +19,19 @@ export interface ActionButtonProps extends BaseProps {
    * Type of material `ActionButton`
    */
   type?: ActionButtonType;
+  /**
+   * Set font-variation-settings CSS Property
+   *
+   * <pre className="DocPage-codeBlock">
+   *  FontVariationType: {
+   *    fill?: number;
+   *    weight?: number; Range: [100, 700]
+   *    grade?: number; Range: [-25, 200]
+   *    opticalSize?: number; Range: [20px, 48px]
+   *  }
+   * </pre>
+   */
+  iconVariations?: FontVariationType;
   /**
    * Handler to be called when icon is clicked
    */
@@ -38,48 +52,22 @@ export interface ActionButtonProps extends BaseProps {
 }
 
 export const ActionButton = (props: ActionButtonProps) => {
-  const { className, name, size, children, type } = props;
-  const accessibilityProps = useAccessibilityProps(props);
-
-  const baseProps = extractBaseProps(props);
+  const { className, iconVariations, ...rest } = props;
 
   const iconClass = classNames({
-    ['material-icons']: true,
-    [`material-icons-${type}`]: type && type !== 'filled',
     ['ActionButton']: true,
     [`${className}`]: className,
   });
 
-  const styles = {
-    fontSize: `${size}px`,
-    width: `${size}px`,
-  };
-
-  // change `children` to {name} after migration
-  if (children && React.isValidElement(children)) {
-    return (
-      <span {...baseProps} className={iconClass} data-test="DesignSystem-Input-ActionButton">
-        {children}
-      </span>
-    );
-  }
   return (
-    <i
-      {...baseProps}
-      className={iconClass}
-      style={styles}
-      {...accessibilityProps}
-      data-test="DesignSystem-Input-ActionButton"
-    >
-      {`${name}_${type}`}
-    </i>
+    <Icon className={iconClass} variations={iconVariations} data-test="DesignSystem-Input-ActionButton" {...rest} />
   );
 };
 
 ActionButton.displayName = 'ActionButton';
 ActionButton.defaultProps = {
   size: 16,
-  type: 'round',
+  type: 'rounded',
 };
 
 export default ActionButton;
diff --git a/core/components/atoms/input/actionButton/__tests__/ActionButton.test.tsx b/core/components/atoms/input/actionButton/__tests__/ActionButton.test.tsx
@@ -5,7 +5,7 @@ import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/u
 
 const size = 16;
 
-const type: ActionButtonType[] = ['filled', 'outlined', 'round', 'two-tone', 'sharp'];
+const type: ActionButtonType[] = ['outlined', 'rounded'];
 const FunctionValue = jest.fn();
 const StringValue = 'events';
 

diff --git a/core/components/atoms/input/actionButton/__tests__/__snapshots__/ActionButton.test.tsx.snap b/core/components/atoms/input/actionButton/__tests__/__snapshots__/ActionButton.test.tsx.snap
@@ -6,31 +6,13 @@ exports[`ActionButton component
 <body>
   <div>
     <i
-      class="material-icons material-icons-round ActionButton"
+      class="material-icons material-icons-rounded Icon ActionButton"
       data-test="DesignSystem-Input-ActionButton"
       role="button"
-      style="font-size: 16px; width: 16px;"
+      style="font-size: 16px; width: 16px; font-variation-settings: \\"FILL\\" 1, \\"wght\\" 400, \\"GRAD\\" 0, \\"opsz\\" 20;"
       tabindex="0"
     >
-      events_round
-    </i>
-  </div>
-</body>
-`;
-
-exports[`ActionButton component 
-  name: "events", size: 16, type: "filled", onClick: "[Function]"
- 1`] = `
-<body>
-  <div>
-    <i
-      class="material-icons ActionButton"
-      data-test="DesignSystem-Input-ActionButton"
-      role="button"
-      style="font-size: 16px; width: 16px;"
-      tabindex="0"
-    >
-      events_filled
+      events
     </i>
   </div>
 </body>
@@ -42,67 +24,31 @@ exports[`ActionButton component
 <body>
   <div>
     <i
-      class="material-icons material-icons-outlined ActionButton"
-      data-test="DesignSystem-Input-ActionButton"
-      role="button"
-      style="font-size: 16px; width: 16px;"
-      tabindex="0"
-    >
-      events_outlined
-    </i>
-  </div>
-</body>
-`;
-
-exports[`ActionButton component 
-  name: "events", size: 16, type: "round", onClick: "[Function]"
- 1`] = `
-<body>
-  <div>
-    <i
-      class="material-icons material-icons-round ActionButton"
-      data-test="DesignSystem-Input-ActionButton"
-      role="button"
-      style="font-size: 16px; width: 16px;"
-      tabindex="0"
-    >
-      events_round
-    </i>
-  </div>
-</body>
-`;
-
-exports[`ActionButton component 
-  name: "events", size: 16, type: "sharp", onClick: "[Function]"
- 1`] = `
-<body>
-  <div>
-    <i
-      class="material-icons material-icons-sharp ActionButton"
+      class="material-icons material-icons-outlined Icon ActionButton"
       data-test="DesignSystem-Input-ActionButton"
       role="button"
-      style="font-size: 16px; width: 16px;"
+      style="font-size: 16px; width: 16px; font-variation-settings: \\"FILL\\" 0, \\"wght\\" 400, \\"GRAD\\" 0, \\"opsz\\" 20;"
       tabindex="0"
     >
-      events_sharp
+      events
     </i>
   </div>
 </body>
 `;
 
 exports[`ActionButton component 
-  name: "events", size: 16, type: "two-tone", onClick: "[Function]"
+  name: "events", size: 16, type: "rounded", onClick: "[Function]"
  1`] = `
 <body>
   <div>
     <i
-      class="material-icons material-icons-two-tone ActionButton"
+      class="material-icons material-icons-rounded Icon ActionButton"
       data-test="DesignSystem-Input-ActionButton"
       role="button"
-      style="font-size: 16px; width: 16px;"
+      style="font-size: 16px; width: 16px; font-variation-settings: \\"FILL\\" 1, \\"wght\\" 400, \\"GRAD\\" 0, \\"opsz\\" 20;"
       tabindex="0"
     >
-      events_two-tone
+      events
     </i>
   </div>
 </body>