refactor(buttonicon): fix prop name

chanzuckerberg · Feb 2, 2024 · 1fc1d6d · 1fc1d6d
1 parent 5d3b5de
commit 1fc1d6d
Showing 1 changed file with 25 additions and 25 deletions.
diff --git a/packages/components/src/core/ButtonIcon/index.stories.tsx b/packages/components/src/core/ButtonIcon/index.stories.tsx
@@ -28,7 +28,7 @@ const ICON_OPTIONS = [
 ];
 
 const ButtonIcon = (props: Args): JSX.Element => {
-  const { sdsIcon, ...rest } = props;
+  const { icon, ...rest } = props;
 
   const [on, setOn] = React.useState(false);
   const handleButtonClick = () => setOn(!on);
@@ -37,7 +37,7 @@ const ButtonIcon = (props: Args): JSX.Element => {
     <RawButtonIcon
       onClick={handleButtonClick}
       on={on}
-      icon={sdsIcon}
+      icon={icon}
       sdsSize="medium"
       sdsType="primary"
       {...rest}
@@ -52,12 +52,7 @@ export default {
         type: "boolean",
       },
     },
-    on: {
-      control: {
-        type: "boolean",
-      },
-    },
-    sdsIcon: {
+    icon: {
       control: {
         labels: [
           "SDS Icon: dotsHorizontal",
@@ -71,6 +66,11 @@ export default {
       mapping: ICON_OPTIONS,
       options: Object.keys(ICON_OPTIONS),
     },
+    on: {
+      control: {
+        type: "boolean",
+      },
+    },
     sdsSize: {
       control: {
         type: "select",
@@ -94,7 +94,7 @@ export const Default = {
   args: {
     "aria-label": "info",
     disabled: false,
-    sdsIcon: "dotsHorizontal",
+    icon: "dotsHorizontal",
     sdsSize: "large",
     sdsType: "primary",
   },
@@ -118,14 +118,14 @@ const LivePreviewDemo = (): JSX.Element => {
         <ButtonIcon
           aria-label="grid"
           style={{ marginRight: spacings?.xxs }}
-          sdsIcon="grid"
+          icon="grid"
           sdsSize="large"
           sdsType="primary"
         />
         <ButtonIcon
           aria-label="grid"
           style={{ marginRight: spacings?.xxs }}
-          sdsIcon="grid"
+          icon="grid"
           sdsSize="large"
           sdsType="primary"
         />
@@ -134,14 +134,14 @@ const LivePreviewDemo = (): JSX.Element => {
         <ButtonIcon
           aria-label="infoSpeechBubble"
           style={{ marginRight: spacings?.m }}
-          sdsIcon="infoSpeechBubble"
+          icon="infoSpeechBubble"
           sdsSize="large"
           sdsType="secondary"
         />
         <ButtonIcon
           aria-label="infoSpeechBubble"
           style={{ marginRight: spacings?.m }}
-          sdsIcon="infoSpeechBubble"
+          icon="infoSpeechBubble"
           sdsSize="large"
           sdsType="secondary"
         />
@@ -150,7 +150,7 @@ const LivePreviewDemo = (): JSX.Element => {
         <ButtonIcon
           aria-label="xMark"
           style={{ marginRight: spacings?.m }}
-          sdsIcon="xMark"
+          icon="xMark"
           sdsSize="large"
           sdsType="tertiary"
         />
@@ -159,7 +159,7 @@ const LivePreviewDemo = (): JSX.Element => {
         <ButtonIcon
           aria-label="xMark"
           style={{ marginRight: spacings?.m }}
-          sdsIcon="xMark"
+          icon="xMark"
           sdsSize="medium"
           sdsType="tertiary"
         />
@@ -168,14 +168,14 @@ const LivePreviewDemo = (): JSX.Element => {
         <ButtonIcon
           aria-label="barChartVertical3"
           style={{ marginRight: spacings?.s }}
-          sdsIcon="barChartVertical3"
+          icon="barChartVertical3"
           sdsSize="small"
           sdsType="primary"
         />
         <ButtonIcon
           aria-label="barChartVertical3"
           style={{ marginRight: spacings?.s }}
-          sdsIcon="barChartVertical3"
+          icon="barChartVertical3"
           sdsSize="small"
           sdsType="primary"
         />
@@ -184,14 +184,14 @@ const LivePreviewDemo = (): JSX.Element => {
         <ButtonIcon
           aria-label="plusCircle"
           style={{ marginRight: spacings?.s }}
-          sdsIcon="plusCircle"
+          icon="plusCircle"
           sdsSize="small"
           sdsType="secondary"
         />
         <ButtonIcon
           aria-label="plusCircle"
           style={{ marginRight: spacings?.s }}
-          sdsIcon="plusCircle"
+          icon="plusCircle"
           sdsSize="small"
           sdsType="secondary"
         />
@@ -200,7 +200,7 @@ const LivePreviewDemo = (): JSX.Element => {
         <ButtonIcon
           aria-label="xMark"
           style={{ marginRight: spacings?.s }}
-          sdsIcon="xMark"
+          icon="xMark"
           sdsSize="small"
           sdsType="tertiary"
         />
@@ -411,8 +411,8 @@ const ScreenshotTestDemo = (): JSX.Element => {
       <div style={DISABLED_LEVEL}>
         {PSEUDO_STATES.map((state) => {
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore: invalid `sdsIcon` is skipped in <ButtonIconTypeOption />
-          const sdsIcon = SDS_ICONS[sdsType][sdsSize];
+          // @ts-ignore: invalid `icon` is skipped in <ButtonIconTypeOption />
+          const icon = SDS_ICONS[sdsType][sdsSize];
 
           return (
             <div style={PSEUDO_STATE_LEVEL} key={`div-${state}`}>
@@ -426,8 +426,8 @@ const ScreenshotTestDemo = (): JSX.Element => {
                     <b>{disabled === false ? state : "true"}</b>
                   </p>
                   <ButtonIcon
-                    aria-label={sdsIcon}
-                    sdsIcon={sdsIcon}
+                    aria-label={icon}
+                    icon={icon}
                     data-testid="button-icon"
                     sdsType={sdsType}
                     sdsSize={sdsSize}
@@ -451,7 +451,7 @@ const ScreenshotTestDemo = (): JSX.Element => {
 export const ScreenshotTest = {
   parameters: {
     controls: {
-      exclude: ["disabled", "on", "sdsIcon", "sdsSize", "sdsType"],
+      exclude: ["disabled", "on", "icon", "sdsSize", "sdsType"],
     },
     snapshot: {
       skip: true,