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

… into prod
chanzuckerberg · Sep 18, 2024 · beb97d2 · beb97d2
2 parents 9af8fb6 + f96cb8d
commit beb97d2
Show file tree

Hide file tree

Showing 7 changed files with 153 additions and 15 deletions.
diff --git a/packages/components/src/core/ButtonIcon/style.ts b/packages/components/src/core/ButtonIcon/style.ts
@@ -163,6 +163,7 @@ const doNotForwardProps = [
   "on",
   "sdsSize",
   "sdsType",
+  "sdsStyle",
   "sdsIcon",
   "sdsIconProps",
 ];

diff --git a/packages/components/src/core/DropdownMenu/__storybook__/index.stories.tsx b/packages/components/src/core/DropdownMenu/__storybook__/index.stories.tsx
@@ -9,6 +9,7 @@ import {
 import { DropdownMenu } from "./stories/default";
 import { ScreenshotTestDemo } from "./stories/screenshot";
 import { TestDemo } from "./stories/test";
+import { TitleElementDemo } from "./stories/titleElement";
 
 export default {
   argTypes: {
@@ -150,3 +151,25 @@ export const Test = {
   },
   render: (args: Args) => <TestDemo data-testid="dropdown-menu" {...args} />,
 };
+
+export const TitleElement = {
+  args: {
+    keepSearchOnSelect: false,
+    multiple: true,
+    search: true,
+    title: DROPDOWN_MENU_LABEL,
+  },
+  parameters: {
+    controls: {
+      exclude: DROPDOWN_MENU_EXCLUDED_CONTROLS.filter(
+        (control) => control !== "search" && control !== "title"
+      ),
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => (
+    <TitleElementDemo data-testid="dropdown-menu" {...args} />
+  ),
+};
diff --git a/packages/components/src/core/DropdownMenu/__storybook__/stories/default.tsx b/packages/components/src/core/DropdownMenu/__storybook__/stories/default.tsx
@@ -33,6 +33,7 @@ export const DropdownMenu = <
     <div style={{ margin: "16px 0 0 24px" }} ref={anchorRef}>
       {anchorEl ? (
         <RawDropdownMenu<T, Multiple, DisableClearable, FreeSolo>
+          {...props}
           label={label}
           anchorEl={anchorEl}
           disableCloseOnSelect={false}
@@ -47,7 +48,6 @@ export const DropdownMenu = <
           getOptionDisabled={(option: T) => {
             return option.name === "Type: feature request";
           }}
-          {...props}
         />
       ) : null}
     </div>

diff --git a/packages/components/src/core/DropdownMenu/__storybook__/stories/titleElement.tsx b/packages/components/src/core/DropdownMenu/__storybook__/stories/titleElement.tsx
@@ -0,0 +1,99 @@
+import { AutocompleteValue } from "@mui/base";
+import { Args } from "@storybook/react";
+import { useEffect, useRef, useState } from "react";
+import { AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } from "src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS";
+import { DefaultAutocompleteOption } from "src/core/Autocomplete";
+import Button from "src/core/Button";
+import RawDropdownMenu from "src/core/DropdownMenu";
+
+export const TitleElementDemo = <
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined,
+>(
+  props: Args
+): JSX.Element => {
+  const {
+    multiple,
+    options = AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS,
+    search = false,
+  } = props;
+
+  const anchorRef = useRef(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+  const [value, setValue] = useState<
+    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(getInitialValue(false));
+
+  const [pendingValue, setPendingValue] = useState<
+    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(getInitialValue(true));
+
+  useEffect(() => {
+    setAnchorEl(anchorRef.current);
+  }, []);
+
+  const CustomHeaderComponent = () => (
+    <Button sdsStyle="minimal" sdsType="primary">
+      Click Me!
+    </Button>
+  );
+
+  return (
+    <div style={{ margin: "16px 0 0 24px" }} ref={anchorRef}>
+      {anchorEl ? (
+        <RawDropdownMenu<T, Multiple, DisableClearable, FreeSolo>
+          {...props}
+          label="Search"
+          anchorEl={anchorEl}
+          open
+          search={search}
+          multiple={multiple}
+          headerComponentSlot={CustomHeaderComponent()}
+          value={multiple ? pendingValue : value}
+          onChange={handleChange}
+          disableCloseOnSelect={multiple}
+          options={options}
+          onClickAway={handleClickAway}
+          groupBy={(option: T) => option.section as string}
+          width={300}
+        />
+      ) : null}
+    </div>
+  );
+
+  function handleClickAway() {
+    return multiple && setValue(pendingValue);
+  }
+
+  function handleChange(
+    _: React.ChangeEvent<unknown>,
+    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  ) {
+    if (!multiple) {
+      setValue(
+        newValue as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+      );
+    }
+
+    return setPendingValue(
+      newValue as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+    );
+  }
+
+  // eslint-disable-next-line sonarjs/no-identical-functions
+  function getInitialValue(
+    isMultiple: boolean
+  ): AutocompleteValue<T, Multiple, DisableClearable, FreeSolo> {
+    return isMultiple
+      ? ([] as unknown as AutocompleteValue<
+          T,
+          Multiple,
+          DisableClearable,
+          FreeSolo
+        >)
+      : (null as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>);
+  }
+};
diff --git a/packages/components/src/core/DropdownMenu/index.tsx b/packages/components/src/core/DropdownMenu/index.tsx
@@ -16,6 +16,7 @@ import { SDSTheme } from "src/core/styles";
 import {
   StyleProps,
   StyledDropdownMenuAutocompleteWrapper,
+  StyledDropdownMenuHeader,
   StyledHeaderTitle,
   StyledPaper,
   StyledPopper,
@@ -44,6 +45,7 @@ interface ExtraDropdownMenuProps extends StyleProps {
   InputBaseProps?: Partial<InputSearchProps>;
   PopperBaseProps?: Partial<PopperProps>;
   title?: string;
+  headerComponentSlot?: JSX.Element;
   label?: string;
   anchorEl: HTMLElement | null;
   PopperComponent?: React.JSXElementConstructor<PopperProps>;
@@ -113,6 +115,7 @@ const DropdownMenu = <
     PopperBaseProps = {},
     search = false,
     title,
+    headerComponentSlot,
     label = "Search",
     children,
     options,
@@ -171,10 +174,10 @@ const DropdownMenu = <
           {...ClickAwayListenerProps}
         >
           <StyledDropdownMenuAutocompleteWrapper>
-            {title && (
-              <StyledHeaderTitle search={search}>{title}</StyledHeaderTitle>
-            )}
-
+            <StyledDropdownMenuHeader search={search}>
+              {title && <StyledHeaderTitle>{title}</StyledHeaderTitle>}
+              {headerComponentSlot && <>{headerComponentSlot}</>}
+            </StyledDropdownMenuHeader>
             {anchorEl && (
               <Autocomplete
                 label={label}

diff --git a/packages/components/src/core/DropdownMenu/style.ts b/packages/components/src/core/DropdownMenu/style.ts
@@ -33,25 +33,18 @@ const doNotForwardProps = [
   "isMultiColumn",
 ];
 
-interface StyledHeaderTitleProps extends CommonThemeProps {
-  search: boolean;
-}
-
 export const StyledHeaderTitle = styled("div", {
   shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
 })`
   ${fontHeaderXs}
 
-  ${(props: StyledHeaderTitleProps) => {
-    const { search } = props;
-
+  ${(props: CommonThemeProps) => {
     const spaces = getSpaces(props);
     const semanticColors = getSemanticColors(props);
 
     return `
       color: ${semanticColors?.base?.textPrimary};
       padding-right: ${spaces?.m}px;
-      margin-bottom: ${search ? spaces?.s : spaces?.m}px;
     `;
   }}
 `;
@@ -130,3 +123,22 @@ export const StyledPaper = styled(Paper, {
     `;
   }}
 `;
+
+interface StyledDropdownMenuHeaderProps extends CommonThemeProps {
+  search: boolean;
+}
+
+export const StyledDropdownMenuHeader = styled("div")`
+  ${(props: StyledDropdownMenuHeaderProps) => {
+    const { search } = props;
+    const spaces = getSpaces(props);
+
+    return `
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-right: ${spaces?.m}px;
+      margin-bottom: ${search ? spaces?.s : spaces?.m}px;
+    `;
+  }}
+`;
diff --git a/packages/components/src/core/Tooltip/style.ts b/packages/components/src/core/Tooltip/style.ts
@@ -82,12 +82,12 @@ export const tooltipCss = (props: TooltipExtraProps): string => {
 
   return css`
     &.MuiTooltip-tooltip {
+      box-shadow: ${shadows?.m};
+
       ${sdsStyle === "dark" || inverted ? dark(props) : light(props)}
       ${width === "wide" && sdsStyle === "light" && wide()}
 
       ${followCursor === true && tableStyles(props)}
-
-      box-shadow: ${shadows?.m};
     }
   `;
 };