Merge branch 'main' of https://github.com/chanzuckerberg/sci-components into prod

Author: masoudmanson

packages/components/src/core/ComplexFilter/__tests__/__snapshots__/index.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`<ComplexFilter /> Default story renders snapshot 1`] = `
 >
   <button
     aria-label="Dropdown input"
-    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-yho5y9-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1bcxl8g-MuiButtonBase-root-MuiButton-root"
     label="Click Target"
     tabindex="0"
     type="button"

packages/components/src/core/Dropdown/__tests__/__snapshots__/index.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<Dropdown /> Default story renders snapshot 1`] = `
 <button
   aria-label="Dropdown input"
-  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-yho5y9-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1bcxl8g-MuiButtonBase-root-MuiButton-root"
   label="Click Target"
   tabindex="0"
   type="button"
@@ -48,7 +48,7 @@ exports[`<Dropdown /> Default story renders snapshot 1`] = `
 exports[`<Dropdown /> MultiColumnWithButtons story renders snapshot 1`] = `
 <button
   aria-label="Dropdown input"
-  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-yho5y9-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1bcxl8g-MuiButtonBase-root-MuiButton-root"
   label="Click Target"
   tabindex="0"
   type="button"

packages/components/src/core/InputDropdown/__storybook__/index.stories.tsx

@@ -53,6 +53,11 @@ export default {
         type: "boolean",
       },
     },
+    style: {
+      control: {
+        type: "object",
+      },
+    },
     width: {
       control: {
         type: "number",

packages/components/src/core/InputDropdown/__storybook__/stories/default.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import { DefaultAutocompleteOption } from "src/core/Autocomplete";
 import Callout from "src/core/Callout";
 import DropdownMenu from "src/core/DropdownMenu";
-import { StyledInputDropdown } from "../style";
+import RawInputDropdown from "src/core/InputDropdown";
 
 type DisableClearable = false;
 type FreeSolo = false;
@@ -131,7 +131,7 @@ export const InputDropdown = <
           body='When using the InputDropdown component, please note that the combination of setting the sdsType prop to "value" and the multiple prop to "true" is not allowed.'
         />
       ) : (
-        <StyledInputDropdown
+        <RawInputDropdown
           disabled={disabled}
           label={storybookLabel}
           onClick={handleClick}

packages/components/src/core/InputDropdown/__storybook__/style.ts

@@ -4,7 +4,7 @@ exports[`<InputDropdown /> Default story renders snapshot 1`] = `
 <div>
   <button
     aria-label="Dropdown input"
-    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1k4jv7d-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1p7a1s5-MuiButtonBase-root-MuiButton-root"
     data-testid="InputDropdown"
     label="Label"
     tabindex="0"

packages/components/src/core/InputDropdown/__tests__/__snapshots__/index.test.tsx.snap

@@ -52,6 +52,8 @@ export interface InputDropdownProps
   value?: ReactNode;
   shouldTruncateMinimalDetails?: boolean;
   shouldPutAColonAfterLabel?: boolean;
+  width?: number;
+  className?: string;
   // (masoudmanson): This is a temporary fix for the issue where the style prop
   // is not correctly passed to the underlying Button component when asserting as
   // a React.ComponentType<InputDropdownProps>. This is a workaround until a more
@@ -63,6 +65,8 @@ const labelFontBodyS = fontBody("s", "regular");
 const labelFontBodyXs = fontBody("xs", "regular");
 
 const inputDropdownStyles = (props: InputDropdownProps): SerializedStyles => {
+  const { width = "auto" } = props;
+
   const spaces = getSpaces(props);
   const borders = getBorders(props);
   const semanticColors = getSemanticColors(props);
@@ -81,6 +85,7 @@ const inputDropdownStyles = (props: InputDropdownProps): SerializedStyles => {
     cursor: pointer;
     padding: ${padding};
     justify-content: start;
+    width: ${width}px;
 
     &.MuiButton-text {
       &:hover {
@@ -149,7 +154,7 @@ const minimal = (props: InputDropdownProps): SerializedStyles => {
     flex-direction: column;
     padding: ${spaces?.xs}px ${spaces?.s}px;
     background-color: transparent;
-    min-width: fit-content;
+    min-width: auto;
     /* Nesting to increase CSS specificity for style override */
     &.MuiButton-text {
       .styled-label {
@@ -201,7 +206,7 @@ const square = (props: InputDropdownProps): SerializedStyles => {
 
   return css`
     border-radius: ${corners?.m}px;
-    min-width: fit-content;
+    min-width: auto;
     background-color: transparent;
   `;
 };
@@ -211,7 +216,7 @@ const rounded = (props: InputDropdownProps): SerializedStyles => {
 
   return css`
     border-radius: ${corners?.l}px;
-    min-width: fit-content;
+    min-width: auto;
     background-color: transparent;
   `;
 };