refactor(button): fix InputDropdown Bug

chanzuckerberg · Apr 24, 2024 · 982d85b · 982d85b
1 parent 106381e
commit 982d85b
Show file tree

Hide file tree

Showing 14 changed files with 42 additions and 35 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -25,8 +25,8 @@ All design tokens have been updated to the latest values based on the Figma Refa
 | --sds-border-base-table       | $sds-border-base-table       | `1px solid #cccccc`  |
 | --sds-border-base-disabled    | $sds-border-base-disabled    | `1px solid #cccccc`  |
 | --sds-border-base-default     | $sds-border-base-default     | `1px solid #999999`  |
-| --sds-border-base-black       | $sds-border-base-black       | `2px dashed #000000` |
-| --sds-border-base-hover       | $sds-border-base-hover       | `2px dashed #000000` |
+| --sds-border-base-black       | $sds-border-base-black       | `1px dashed #000000` |
+| --sds-border-base-hover       | $sds-border-base-hover       | `1px dashed #000000` |
 | --sds-border-base-dashed      | $sds-border-base-dashed      | `2px dashed #999999` |
 | --sds-border-link-dashed      | $sds-border-link-dashed      | `1px dashed`         |
 | --sds-border-link-solid       | $sds-border-link-solid       | `1px solid`          |

diff --git a/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
             </span>
             <button
               aria-label="search-button"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1rotgi7-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-6mi92x-MuiButtonBase-root-MuiIconButton-root"
               icon="Search"
               tabindex="0"
               type="button"

diff --git a/packages/components/src/core/Banner/__tests__/__snapshots__/banner.test.tsx.snap b/packages/components/src/core/Banner/__tests__/__snapshots__/banner.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`<Banner /> Default story renders snapshot 1`] = `
   </div>
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1bufa5l-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-91inc1-MuiButtonBase-root-MuiIconButton-root"
     icon="XMark"
     tabindex="0"
     type="button"

diff --git a/packages/components/src/core/Button/__storybook__/stories/iconLivePreview.tsx b/packages/components/src/core/Button/__storybook__/stories/iconLivePreview.tsx
@@ -1,7 +1,5 @@
 import { SDSAppTheme } from "src/core/styles";
 import RawButton from "src/core/Button";
-// import { BUTTON_TEXT, DEFAULT_PLACEMENT_STYLES } from "../constants";
-// import Icon from "src/core/Icon";
 
 // Icon Live Preview Demo
 

diff --git a/packages/components/src/core/Button/__storybook__/stories/screenshot.tsx b/packages/components/src/core/Button/__storybook__/stories/screenshot.tsx
@@ -12,7 +12,11 @@ import {
   BUTTON_ICON_SDS_SIZES,
   BUTTON_ICON_SDS_TYPES,
 } from "../constants";
-import { SDSSizes, SDSTypes } from "src/core/ButtonIcon/__storybook__/types";
+import {
+  SDSSizes,
+  SDSStyles,
+  SDSTypes,
+} from "src/core/ButtonIcon/__storybook__/types";
 import { IconNameToSizes } from "src/core/Icon";
 
 export const ScreenshotTestDemo = (props: Args): JSX.Element => {
@@ -205,7 +209,7 @@ export const ScreenshotTestDemo = (props: Args): JSX.Element => {
                   <RawButton
                     {...props}
                     data-testid="button"
-                    sdsStyle={sdsStyle}
+                    sdsStyle={sdsStyle as SDSStyles[number]}
                     sdsType={type as SDSTypes[number]}
                     startIcon={icon}
                     disabled={disabled}

diff --git a/packages/components/src/core/Button/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Button/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<button /> Default story renders snapshot 1`] = `
 <button
-  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-s6dhdg-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-9ap979-MuiButtonBase-root-MuiButton-root"
   tabindex="0"
   text="Label"
   type="button"

diff --git a/packages/components/src/core/ButtonIcon/__storybook__/types.ts b/packages/components/src/core/ButtonIcon/__storybook__/types.ts
@@ -9,4 +9,6 @@ export type SDSTypes = NonNullable<
   | ButtonIconExtraProps<"large">["sdsType"]
 >[];
 
+export type SDSStyles = NonNullable<"icon">[];
+
 export type SDSSizes = (keyof ButtonIconSizeToTypes)[];
diff --git a/packages/components/src/core/ButtonIcon/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/ButtonIcon/__tests__/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ButtonIcon /> Default story renders snapshot 1`] = `
 <button
   aria-label="info"
-  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-5247qr-MuiButtonBase-root-MuiIconButton-root"
+  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1tnzpjc-MuiButtonBase-root-MuiIconButton-root"
   icon="InfoCircle"
   tabindex="0"
   type="button"

diff --git a/packages/components/src/core/Dialog/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Dialog/__tests__/__snapshots__/index.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 1`] = `
 >
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-2khs0g-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-9w99ft-MuiButtonBase-root-MuiIconButton-root"
     icon="XMark"
     tabindex="0"
     type="button"
@@ -109,7 +109,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 4`] = `
 >
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-vbrjsf-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-japd91-MuiButtonBase-root-MuiIconButton-root"
     icon="XMark"
     tabindex="0"
     type="button"
@@ -196,7 +196,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 7`] = `
 >
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1yww721-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-4di8oy-MuiButtonBase-root-MuiIconButton-root"
     icon="XMark"
     tabindex="0"
     type="button"
@@ -283,7 +283,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 10`] = `
 >
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1yww721-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-4di8oy-MuiButtonBase-root-MuiIconButton-root"
     icon="XMark"
     tabindex="0"
     type="button"

diff --git a/packages/components/src/core/Dropdown/index.tsx b/packages/components/src/core/Dropdown/index.tsx
@@ -159,7 +159,7 @@ const Dropdown = <
             {buttonPosition === "left" ? (
               <div>
                 <StyledButton
-                  onClick={handleClose}
+                  onClick={(event) => handleClose(event, "selectOption")}
                   sdsStyle="square"
                   sdsType="primary"
                 >
@@ -183,7 +183,7 @@ const Dropdown = <
                   Cancel
                 </StyledButton>
                 <StyledButton
-                  onClick={handleClose}
+                  onClick={(event) => handleClose(event, "selectOption")}
                   sdsStyle="square"
                   sdsType="primary"
                 >

diff --git a/packages/components/src/core/DropdownMenu/__storybook__/stories/livePreview.tsx b/packages/components/src/core/DropdownMenu/__storybook__/stories/livePreview.tsx
@@ -81,7 +81,6 @@ export const LivePreviewDemo = <
           aria-describedby="live2"
           aria-label="Open menu"
           onClick={handleClick2}
-          on={false}
           sdsSize="large"
           sdsType="secondary"
           icon="InfoSpeechBubble"

diff --git a/packages/components/src/core/InputDropdown/style.ts b/packages/components/src/core/InputDropdown/style.ts
@@ -16,9 +16,21 @@ import {
   getSpaces,
 } from "src/core/styles";
 
+const doNotForwardProps = [
+  "intent",
+  "state",
+  "sdsStage",
+  "sdsType",
+  "isMinimal",
+  "shouldTruncateMinimalDetails",
+  "shouldPutAColonAfterLabel",
+  "value",
+  "sdsStyle",
+];
+
 export interface InputDropdownProps
   extends CommonThemeProps,
-    Omit<ButtonProps, "value" | "sdsType" | "sdsStyle"> {
+    Omit<ButtonProps, (typeof doNotForwardProps)[number]> {
   disabled?: boolean;
   intent?: "default" | "error" | "warning";
   label: ReactNode;
@@ -33,23 +45,12 @@ export interface InputDropdownProps
   value?: ReactNode;
   shouldTruncateMinimalDetails?: boolean;
   shouldPutAColonAfterLabel?: boolean;
+  style?: React.CSSProperties;
 }
 
 const labelFontBodyS = fontBody("s", "regular");
 const labelFontBodyXs = fontBody("xs", "regular");
 
-const doNotForwardProps = [
-  "intent",
-  "state",
-  "sdsStage",
-  "sdsType",
-  "isMinimal",
-  "shouldTruncateMinimalDetails",
-  "shouldPutAColonAfterLabel",
-  "value",
-  "sdsStyle",
-];
-
 const inputDropdownStyles = (props: InputDropdownProps): SerializedStyles => {
   const spaces = getSpaces(props);
   const borders = getBorders(props);
@@ -305,9 +306,12 @@ const isDisabled = (props: InputDropdownProps): SerializedStyles => {
   `;
 };
 
-export const StyledInputDropdown = styled(Button, {
-  shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
-})`
+export const StyledInputDropdown = styled(
+  Button as React.ComponentType<InputDropdownProps>,
+  {
+    shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
+  }
+)`
   ${labelFontBodyXs}
 
   /* (thuang): in Minimal it's a different value */

diff --git a/packages/components/src/core/Pagination/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Pagination/__tests__/__snapshots__/index.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`<Pagination /> Default story renders snapshot 1`] = `
   >
     <button
       aria-label="Go to a page"
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-142lmkz-MuiButtonBase-root-MuiIconButton-root"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1s1ottn-MuiButtonBase-root-MuiIconButton-root"
       icon="DotsHorizontal"
       tabindex="0"
       type="button"

diff --git a/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`<TagFilter /> Default story renders snapshot 1`] = `
       </span>
       <button
         aria-label="Delete Tag"
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiChip-deleteIcon MuiChip-deleteIconMedium MuiChip-deleteIconColorPrimary MuiChip-deleteIconFilledColorPrimary css-4l13pl-MuiButtonBase-root-MuiIconButton-root"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiChip-deleteIcon MuiChip-deleteIconMedium MuiChip-deleteIconColorPrimary MuiChip-deleteIconFilledColorPrimary css-1owsdxw-MuiButtonBase-root-MuiIconButton-root"
         icon="XMark"
         tabindex="0"
         type="button"