fix(Suggestions): align border with dropdown components

lumada-design · Dec 16, 2024 · e52fea8 · e52fea8
1 parent 82d895d
commit e52fea8
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 21 deletions.
diff --git a/packages/core/src/FormElement/Suggestions/Suggestions.styles.tsx b/packages/core/src/FormElement/Suggestions/Suggestions.styles.tsx
@@ -5,6 +5,7 @@ export const { staticClasses, useClasses } = createClasses("HvSuggestions", {
   root: { position: "relative" },
   list: {
     backgroundColor: theme.colors.atmo1,
+    border: `1px solid ${theme.colors.secondary}`,
     boxShadow: theme.colors.shadow,
     padding: theme.space.xs,
     width: "100%",

diff --git a/packages/core/src/FormElement/Suggestions/Suggestions.tsx b/packages/core/src/FormElement/Suggestions/Suggestions.tsx
@@ -5,7 +5,11 @@ import {
 } from "@mui/base/ClickAwayListener";
 import { Popper, PopperProps } from "@mui/base/Popper";
 import { useForkRef } from "@mui/material/utils";
-import { useTheme, type ExtractNames } from "@hitachivantara/uikit-react-utils";
+import {
+  useDefaultProps,
+  useTheme,
+  type ExtractNames,
+} from "@hitachivantara/uikit-react-utils";
 
 import { HvListItem } from "../../ListContainer";
 import { HvSelectionList } from "../../SelectionList";
@@ -72,7 +76,7 @@ export const HvSuggestions = forwardRef<
     onSuggestionSelected,
     popperProps,
     ...others
-  } = props;
+  } = useDefaultProps("HvSuggestions", props);
 
   const { classes, cx } = useClasses(classesProp);
 

diff --git a/packages/core/src/ListContainer/ListItem/ListItem.tsx b/packages/core/src/ListContainer/ListItem/ListItem.tsx
@@ -95,7 +95,8 @@ const applyClassNameToElement = (
 };
 
 /**
- * ListItem description/documentation paragraph
+ * Implements the listitem pattern, akin to the `<li>` element.
+ * Should be composed within a `<HvListContainer>` component.
  */
 export const HvListItem = forwardRef<
   // no-indent

diff --git a/packages/core/src/Select/Select.styles.ts b/packages/core/src/Select/Select.styles.ts
@@ -28,6 +28,13 @@ export const { staticClasses, useClasses } = createClasses("HvSelect", {
     border: `1px solid ${theme.colors.secondary}`,
     marginTop: -1,
     marginBottom: -1,
+
+    // panel styles
+    position: "relative",
+    padding: theme.space.xs,
+    backgroundColor: theme.colors.atmo1,
+    overflowY: "auto",
+    borderRadius: "inherit",
   },
   panelOpenedUp: {
     borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,

diff --git a/packages/core/src/Select/Select.tsx b/packages/core/src/Select/Select.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
 import { useRef, useState } from "react";
 import { Popper } from "@mui/base/Popper";
 import { SelectOption } from "@mui/base/useOption";
@@ -28,7 +27,6 @@ import {
 } from "../FormElement";
 import { useUniqueId } from "../hooks/useUniqueId";
 import { HvListContainer } from "../ListContainer";
-import { HvPanel } from "../Panel";
 import { fixedForwardRef } from "../types/generic";
 import { getContainerElement } from "../utils/document";
 import { setId } from "../utils/setId";
@@ -297,7 +295,9 @@ export const HvSelect = fixedForwardRef(function HvSelect<
           },
         ]}
       >
-        <HvPanel
+        <HvListContainer
+          condensed
+          selectable
           style={{
             width: variableWidth
               ? "auto"
@@ -307,13 +307,10 @@ export const HvSelect = fixedForwardRef(function HvSelect<
             [classes.panelOpenedUp]: placement.includes("top"),
             [classes.panelOpenedDown]: placement.includes("bottom"),
           })}
+          {...getListboxProps()}
         >
-          <SelectProvider value={contextValue}>
-            <HvListContainer condensed selectable {...getListboxProps()}>
-              {children}
-            </HvListContainer>
-          </SelectProvider>
-        </HvPanel>
+          <SelectProvider value={contextValue}>{children}</SelectProvider>
+        </HvListContainer>
       </Popper>
       <input
         {...getHiddenInputProps()}

diff --git a/packages/styles/src/themes/pentahoPlus.ts b/packages/styles/src/themes/pentahoPlus.ts
@@ -53,6 +53,8 @@ const inputColors = {
   borderActive: ld(slate[700], slate[300]),
 };
 
+const inputBorder = `1px solid ${inputColors.border}`;
+
 const pentahoPlus = makeTheme((theme) => ({
   name: "pentahoPlus",
   colors: {
@@ -557,7 +559,7 @@ const pentahoPlus = makeTheme((theme) => ({
       classes: {
         root: {
           "&& .HvButton-secondarySubtle": {
-            border: `1px solid ${inputColors.border}`,
+            border: inputBorder,
             backgroundColor: inputColors.bg,
           },
           "&& .HvDropdownButton-openUp": {
@@ -571,7 +573,14 @@ const pentahoPlus = makeTheme((theme) => ({
           borderRadius: theme.radii.base,
         },
         panel: {
-          border: `1px solid ${inputColors.border}`,
+          border: inputBorder,
+        },
+      },
+    },
+    HvSuggestions: {
+      classes: {
+        list: {
+          border: inputBorder,
         },
       },
     },
@@ -1009,12 +1018,12 @@ const pentahoPlus = makeTheme((theme) => ({
     HvBaseInput: {
       classes: {
         inputRoot: {
-          border: `1px solid ${inputColors.border}`,
+          border: inputBorder,
           backgroundColor: inputColors.bg,
         },
         inputRootMultiline: {
           "&& textarea": {
-            border: `1px solid ${inputColors.border}`,
+            border: inputBorder,
             backgroundColor: inputColors.bg,
           },
         },
@@ -1023,25 +1032,25 @@ const pentahoPlus = makeTheme((theme) => ({
     HvBaseDropdown: {
       classes: {
         header: {
-          border: `1px solid ${inputColors.border}`,
+          border: inputBorder,
           backgroundColor: inputColors.bg,
         },
         headerOpen: {
-          border: `1px solid ${inputColors.border}`,
+          border: inputBorder,
           "&:hover": {
-            border: `1px solid ${inputColors.border}`,
+            border: inputBorder,
           },
         },
         panel: {
-          border: `1px solid ${inputColors.border}`,
+          border: inputBorder,
         },
       },
     },
     HvDropDownMenu: {
       classes: {
         iconSelected: {
           "&[data-color=secondary]": {
-            border: `1px solid ${inputColors.border}`,
+            border: inputBorder,
           },
         },
       },