Update Listbox, Menu, ComboBox and Dropdown to use --salt-palette-cor…

…ner when their corners are rounded and add 1px visual offset on floating panels
jpmorganchase · Jul 11, 2024 · 0ff85dc · 0ff85dc
1 parent 7ea886e
commit 0ff85dc
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 3 deletions.
diff --git a/.changeset/great-pens-hunt.md b/.changeset/great-pens-hunt.md
@@ -0,0 +1,6 @@
+---
+"@salt-ds/core": minor
+---
+
+- Updated `Listbox`, `Menu`, `ComboBox` and `Dropdown` to use `--salt-palette-corner` when their corners are rounded.
+- Updated `Menu`, `Dropdown` and `ComboBox` to have a 1px visual offset on floating panels.
diff --git a/packages/core/src/combo-box/ComboBox.tsx b/packages/core/src/combo-box/ComboBox.tsx
@@ -42,6 +42,7 @@ import {
 } from "../utils";
 import comboBoxCss from "./ComboBox.css";
 import { type UseComboBoxProps, useComboBox } from "./useComboBox";
+import {offset} from "@floating-ui/dom";
 
 export type ComboBoxProps<Item = string> = {
   /**
@@ -177,6 +178,7 @@ export const ComboBox = forwardRef(function ComboBox<Item>(
       placement: "bottom-start",
       strategy: "fixed",
       middleware: [
+        offset(1),
         size({
           apply({ rects, elements, availableHeight }) {
             Object.assign(elements.floating.style, {

diff --git a/packages/core/src/dropdown/Dropdown.tsx b/packages/core/src/dropdown/Dropdown.tsx
@@ -43,6 +43,7 @@ import {
   useId,
 } from "../utils";
 import dropdownCss from "./Dropdown.css";
+import {offset} from "@floating-ui/dom";
 
 export type DropdownProps<Item = string> = {
   /**
@@ -217,6 +218,7 @@ export const Dropdown = forwardRef(function Dropdown<Item>(
       onOpenChange: handleOpenChange,
       placement: "bottom-start",
       middleware: [
+        offset(1),
         size({
           apply({ rects, elements, availableHeight }) {
             Object.assign(elements.floating.style, {

diff --git a/packages/core/src/list-box/ListBox.css b/packages/core/src/list-box/ListBox.css
@@ -10,7 +10,7 @@
   isolation: isolate;
   position: relative;
   max-height: inherit;
-  border-radius: var(--salt-palette-corner-weak, 0);
+  border-radius: var(--salt-palette-corner, 0);
 }
 
 .saltListBox-bordered {

diff --git a/packages/core/src/menu/MenuBase.tsx b/packages/core/src/menu/MenuBase.tsx
@@ -100,7 +100,7 @@ export function MenuBase(props: MenuBaseProps) {
       (isNested || getVirtualElement ? "right-start" : "bottom-start"),
     middleware: [
       // Align the nested menu by shifting it by var(--salt-size-border)
-      offset(isNested ? { crossAxis: -1 } : {}),
+      offset(isNested ? { crossAxis: -1, mainAxis: 2 } : 1),
       flip({}),
       shift({ limiter: limitShift() }),
       size({

diff --git a/packages/core/src/menu/MenuPanel.css b/packages/core/src/menu/MenuPanel.css
@@ -8,6 +8,7 @@
   z-index: var(--salt-zIndex-flyover);
   box-shadow: var(--salt-overlayable-shadow-popout);
   box-sizing: border-box;
+  border-radius: var(--salt-palette-corner, 0);
 }
 
 .saltMenuPanel-container {

diff --git a/packages/core/src/option/OptionList.css b/packages/core/src/option/OptionList.css
@@ -1,7 +1,7 @@
 .saltOptionList {
   background: var(--salt-container-primary-background);
   border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
-  border-radius: var(--salt-palette-corner-weak, 0);
+  border-radius: var(--salt-palette-corner, 0);
   overflow: hidden;
   overflow-y: auto;
   position: relative;