fix(BaseDropdown): border styles & dedupe (#3404)

* refactor(BaseDropdown): improve & dedupe styles in components using it * chore: remove unused theme keys * chore: pr review
lumada-design · Jun 16, 2023 · 7ffab29 · 7ffab29
1 parent 7af90e8
commit 7ffab29
Show file tree

Hide file tree

Showing 26 changed files with 463 additions and 562 deletions.
diff --git a/packages/core/src/components/BaseDropdown/BaseDropdown.styles.tsx b/packages/core/src/components/BaseDropdown/BaseDropdown.styles.tsx
@@ -1,6 +1,5 @@
 import { CSSProperties } from "@emotion/serialize";
 import styled from "@emotion/styled";
-import { DropDownXS, DropUpXS } from "@hitachivantara/uikit-react-icons";
 import { theme } from "@hitachivantara/uikit-styles";
 import { HvTypography } from "@core/components";
 import { outlineStyles } from "@core/utils";
@@ -107,7 +106,7 @@ export const StyledSelection = styled("div")({
   alignItems: "center",
   height: "30px",
   boxSizing: "border-box",
-  padding: `0px ${theme.space.md} 0px ${theme.space.xs}`,
+  paddingLeft: theme.space.xs,
 });
 
 export const StyledPlaceholder = styled(
@@ -126,32 +125,13 @@ export const StyledPlaceholder = styled(
   }),
 }));
 
-const iconsStyles: CSSProperties = {
+export const StyledAdornment = styled("div")({
   position: "absolute",
   pointerEvents: "none",
   top: -1,
   right: -1,
-};
-
-export const StyledDropUpXS = styled(DropUpXS)({
-  ...iconsStyles,
 });
 
-export const StyledDropDownXS = styled(
-  DropDownXS,
-  transientOptions
-)(({ $disabled }: { $disabled: boolean }) => ({
-  ...iconsStyles,
-
-  ...($disabled && {
-    "& svg": {
-      "& path": {
-        fill: theme.colors.secondary_60,
-      },
-    },
-  }),
-}));
-
 export const StyledContainer = styled("div")({
   zIndex: theme.zIndices.popover,
   width: "auto",
@@ -203,10 +183,14 @@ export const StyledPanel = styled(
 )(({ $popperPlacement }: { $popperPlacement: string }) => ({
   position: "relative",
   boxShadow: theme.baseDropdown.shadow,
+  backgroundColor: theme.colors.atmo1,
+  border: `1px solid ${theme.baseDropdown.openBorderColor}`,
   ...($popperPlacement === "top" && {
-    top: "1px",
+    top: 1,
+    borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,
   }),
   ...($popperPlacement === "bottom" && {
-    top: "-1px",
+    top: -1,
+    borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,
   }),
 }));
diff --git a/packages/core/src/components/BaseDropdown/BaseDropdown.tsx b/packages/core/src/components/BaseDropdown/BaseDropdown.tsx
@@ -6,17 +6,18 @@ import {
   PopperPlacementType,
   PopperProps,
 } from "@mui/material";
+import { theme } from "@hitachivantara/uikit-styles";
+import { DropDownXS, DropUpXS } from "@hitachivantara/uikit-react-icons";
 import { useControlled, useForkRef, useTheme, useUniqueId } from "@core/hooks";
 import { isKeypress, keyboardCodes, setId } from "@core/utils";
 import { getFirstAndLastFocus } from "@core/utils/focusableElementFinder";
 import { HvBaseProps } from "@core/types";
 import { usePopper } from "react-popper";
 import { detectOverflow, ModifierArguments, Options } from "@popperjs/core";
 import {
+  StyledAdornment,
   StyledAnchor,
   StyledContainer,
-  StyledDropDownXS,
-  StyledDropUpXS,
   StyledExtension,
   StyledHeaderRoot,
   StyledPanel,
@@ -236,7 +237,7 @@ export const HvBaseDropdown = ({
     []
   );
 
-  const modifiers: any = useMemo(
+  const modifiers: PopperProps["modifiers"] = useMemo(
     () => [
       {
         name: "variableWidth",
@@ -283,10 +284,8 @@ export const HvBaseDropdown = ({
     }
   );
 
-  let popperPlacement = "bottom";
-  if (attributes.popper) {
-    popperPlacement = attributes.popper["data-popper-placement"];
-  }
+  const popperPlacement =
+    attributes.popper?.["data-popper-placement"] ?? "bottom";
 
   const handleToggle = useCallback(
     (event) => {
@@ -332,6 +331,8 @@ export const HvBaseDropdown = ({
       });
     }
 
+    const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;
+
     return (
       <StyledHeaderRoot
         id={setId(id, "header")}
@@ -390,19 +391,15 @@ export const HvBaseDropdown = ({
             placeholder
           )}
         </StyledSelection>
-        {adornment ||
-          (isOpen ? (
-            <StyledDropUpXS
+        <StyledAdornment>
+          {adornment || (
+            <ExpanderComponent
               iconSize="XS"
+              color={disabled ? theme.colors.secondary_60 : undefined}
               className={clsx(baseDropdownClasses.arrow, classes?.arrow)}
             />
-          ) : (
-            <StyledDropDownXS
-              iconSize="XS"
-              className={clsx(baseDropdownClasses.arrow, classes?.arrow)}
-              $disabled={disabled}
-            />
-          ))}
+          )}
+        </StyledAdornment>
       </StyledHeaderRoot>
     );
   })();

diff --git a/packages/core/src/components/BaseDropdown/__snapshots__/BaseDropdown.test.tsx.snap b/packages/core/src/components/BaseDropdown/__snapshots__/BaseDropdown.test.tsx.snap
@@ -6,47 +6,51 @@ exports[`BaseDropDown > should render correctly 1`] = `
     style="width: 121px;"
   >
     <div
-      class="HvBaseDropdown-root hv-1nukton-StyledRoot eapzthe9"
+      class="HvBaseDropdown-root hv-1nukton-StyledRoot eapzthe8"
     >
       <div
         aria-expanded="false"
         aria-label="Main sample"
-        class="HvBaseDropdown-anchor hv-c41kvr-StyledAnchor eapzthe8"
+        class="HvBaseDropdown-anchor hv-c41kvr-StyledAnchor eapzthe7"
         role="combobox"
         tabindex="-1"
       >
         <div
           aria-label="Main sample"
-          class="HvBaseDropdown-header hv-4bvoko-StyledHeaderRoot eapzthe7"
+          class="HvBaseDropdown-header hv-4bvoko-StyledHeaderRoot eapzthe6"
           role="textbox"
           tabindex="0"
         >
           <div
-            class="HvBaseDropdown-selection hv-b6yxdh-StyledSelection eapzthe6"
+            class="HvBaseDropdown-selection hv-14ov9q3-StyledSelection eapzthe5"
           >
             <p
-              class="HvBaseDropdown-placeholder eapzthe5 HvTypography-root HvTypography-body hv-1cbtqw8-getStyledComponent-StyledPlaceholder e1tnpalo0"
+              class="HvBaseDropdown-placeholder eapzthe4 HvTypography-root HvTypography-body hv-1cbtqw8-getStyledComponent-StyledPlaceholder e1tnpalo0"
             >
               Placeholder...
             </p>
           </div>
           <div
-            class="HvBaseDropdown-arrow eapzthe3 hv-1ij2a3c-StyledDropDownXS"
-            name="DropDownXS"
+            class="hv-zsju0o-StyledAdornment eapzthe3"
           >
-            <svg
-              focusable="false"
-              height="12"
-              viewBox="0 0 12 12"
-              width="12"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="HvBaseDropdown-arrow hv-f95wjz"
+              name="DropDownXS"
             >
-              <path
-                class="color0"
-                d="M5.99994 8.65 1.4 4.05l.7-.7L6 7.25l3.9-3.9.7.7z"
-                fill="var(--uikit-colors-secondary)"
-              />
-            </svg>
+              <svg
+                focusable="false"
+                height="12"
+                viewBox="0 0 12 12"
+                width="12"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  class="color0"
+                  d="M5.99994 8.65 1.4 4.05l.7-.7L6 7.25l3.9-3.9.7.7z"
+                  fill="var(--uikit-colors-secondary)"
+                />
+              </svg>
+            </div>
           </div>
         </div>
       </div>

diff --git a/packages/core/src/components/BulkActions/__snapshots__/BulkActions.test.tsx.snap b/packages/core/src/components/BulkActions/__snapshots__/BulkActions.test.tsx.snap
@@ -150,12 +150,12 @@ exports[`BulkActions > With actions > should render correctly 1`] = `
         </div>
       </button>
       <div
-        class="HvBaseDropdown-root HvDropDownMenu-root HvActionsGeneric-dropDownMenu css-1u1foky-StyledRoot eapzthe9"
+        class="HvBaseDropdown-root HvDropDownMenu-root HvActionsGeneric-dropDownMenu css-1u1foky-StyledRoot eapzthe8"
       >
         <div
           aria-expanded="false"
           aria-haspopup="menu"
-          class="HvDropDownMenu-container HvBaseDropdown-anchor HvBaseDropdown-rootDisabled css-mq7o8m-StyledAnchor eapzthe8"
+          class="HvDropDownMenu-container HvBaseDropdown-anchor HvBaseDropdown-rootDisabled css-mq7o8m-StyledAnchor eapzthe7"
           id="dropdown-menu16"
           tabindex="-1"
         >

diff --git a/packages/core/src/components/ColorPicker/ColorPicker.styles.tsx b/packages/core/src/components/ColorPicker/ColorPicker.styles.tsx
@@ -12,6 +12,7 @@ export const styles: Partial<
   label: {
     paddingBottom: "6px",
     display: "block",
+    cursor: "pointer",
   },
   headerColorValue: {
     textTransform: "uppercase",
@@ -28,29 +29,15 @@ export const styles: Partial<
     display: "flex",
     justifyContent: "center",
     padding: theme.colorPicker.panelPadding,
-    border: theme.colorPicker.panelBorder,
-    borderRadius: theme.colorPicker.panelBorderRadius,
   },
   colorPicker: {
     width: theme.colorPicker.colorPickerWidth,
   },
-  colorPickerIcon: {
-    position: "absolute",
-    pointerEvents: "none",
-    top: -1,
-    right: -1,
-  },
+  colorPickerIcon: {},
   dropdownRootIconOnly: {
     width: 32,
     height: 32,
   },
-  headerColorIconOnly: {
-    position: "absolute",
-    pointerEvents: "none",
-    top: -1,
-    right: -1,
-    width: 32,
-    height: 32,
-  },
+  headerColorIconOnly: {},
   pickerFields: { paddingBottom: 20 },
 };
diff --git a/packages/core/src/components/ColorPicker/ColorPicker.tsx b/packages/core/src/components/ColorPicker/ColorPicker.tsx
@@ -231,6 +231,7 @@ export const HvColorPicker = ({
             </div>
           )}
           <HvBaseDropdown
+            variableWidth
             className={className}
             expanded={isOpen}
             onToggle={handleToggle}
@@ -243,21 +244,17 @@ export const HvColorPicker = ({
                     classes?.dropdownRootIconOnly
                   )
                 : undefined,
+              selection: cx(iconOnly && css({ padding: 0 })),
             }}
             adornment={
               iconOnly && color ? (
                 <Checkbox
                   className={cx(
                     colorPickerClasses.headerColorIconOnly,
                     css(styles.headerColorIconOnly),
-                    css({
-                      "& svg:last-child": {
-                        fill: color,
-                      },
-                    }),
                     classes?.headerColorIconOnly
                   )}
-                  color={[color]}
+                  color={[color, "transparent"]}
                 />
               ) : dropdownIcon === "colorPicker" ? (
                 <ColorPicker
@@ -276,14 +273,9 @@ export const HvColorPicker = ({
                     className={cx(
                       colorPickerClasses.headerColorIcon,
                       css(styles.headerColorIcon),
-                      css({
-                        "& svg:last-child": {
-                          fill: color,
-                        },
-                      }),
                       classes?.headerColorIcon
                     )}
-                    color={[color]}
+                    color={[color, "transparent"]}
                   />
                   <HvTypography
                     className={cx(