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 (#3813)
jpmorganchase · Jul 12, 2024 · 533b590 · 533b590
1 parent 34e8c9c
commit 533b590
Show file tree

Hide file tree

Showing 11 changed files with 112 additions and 10 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
@@ -1,5 +1,6 @@
 import {
   flip,
+  offset,
   size,
   useClick,
   useDismiss,
@@ -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
@@ -1,5 +1,6 @@
 import {
   flip,
+  offset,
   size,
   useClick,
   useDismiss,
@@ -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,11 +10,11 @@
   isolation: isolate;
   position: relative;
   max-height: inherit;
-  border-radius: var(--salt-palette-corner-weak, 0);
 }
 
 .saltListBox-bordered {
   border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
+  border-radius: var(--salt-palette-corner, 0);
 }
 
 .saltListBox:focus-visible {

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 } : !getVirtualElement ? 1 : 0),
       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;

diff --git a/packages/core/stories/combo-box/combo-box.qa.stories.tsx b/packages/core/stories/combo-box/combo-box.qa.stories.tsx
@@ -51,7 +51,20 @@ export const OpenExamples: StoryFn<QAContainerProps> = () => (
 );
 
 OpenExamples.parameters = {
-  chromatic: { disableSnapshot: false },
+  chromatic: {
+    disableSnapshot: false,
+    modes: {
+      theme: {
+        themeNext: "disable",
+      },
+      themeNext: {
+        themeNext: "enable",
+        corner: "rounded",
+        accent: "teal",
+        // Ignore headingFont given font is not loaded
+      },
+    },
+  },
 };
 
 export const OpenMultiselectExamples: StoryFn<QAContainerProps> = () => (
@@ -71,7 +84,20 @@ export const OpenMultiselectExamples: StoryFn<QAContainerProps> = () => (
 );
 
 OpenMultiselectExamples.parameters = {
-  chromatic: { disableSnapshot: false },
+  chromatic: {
+    disableSnapshot: false,
+    modes: {
+      theme: {
+        themeNext: "disable",
+      },
+      themeNext: {
+        themeNext: "enable",
+        corner: "rounded",
+        accent: "teal",
+        // Ignore headingFont given font is not loaded
+      },
+    },
+  },
 };
 
 export const ClosedExamples: StoryFn<QAContainerProps> = () => (

diff --git a/packages/core/stories/dropdown/dropdown.qa.stories.tsx b/packages/core/stories/dropdown/dropdown.qa.stories.tsx
@@ -49,7 +49,20 @@ export const OpenExamples: StoryFn<QAContainerProps> = () => (
 );
 
 OpenExamples.parameters = {
-  chromatic: { disableSnapshot: false },
+  chromatic: {
+    disableSnapshot: false,
+    modes: {
+      theme: {
+        themeNext: "disable",
+      },
+      themeNext: {
+        themeNext: "enable",
+        corner: "rounded",
+        accent: "teal",
+        // Ignore headingFont given font is not loaded
+      },
+    },
+  },
 };
 
 export const ClosedExamples: StoryFn<QAContainerProps> = () => (

diff --git a/packages/core/stories/list-box/list-box.qa.stories.tsx b/packages/core/stories/list-box/list-box.qa.stories.tsx
@@ -32,5 +32,18 @@ export const AllExamples: StoryFn<QAContainerProps> = () => (
 );
 
 AllExamples.parameters = {
-  chromatic: { disableSnapshot: false },
+  chromatic: {
+    disableSnapshot: false,
+    modes: {
+      theme: {
+        themeNext: "disable",
+      },
+      themeNext: {
+        themeNext: "enable",
+        corner: "rounded",
+        accent: "teal",
+        // Ignore headingFont given font is not loaded
+      },
+    },
+  },
 };
diff --git a/packages/core/stories/menu/menu.qa.stories.tsx b/packages/core/stories/menu/menu.qa.stories.tsx
@@ -45,7 +45,20 @@ export const SingleLevelExamples: StoryFn<QAContainerProps> = (props) => {
 };
 
 SingleLevelExamples.parameters = {
-  chromatic: { disableSnapshot: false },
+  chromatic: {
+    disableSnapshot: false,
+    modes: {
+      theme: {
+        themeNext: "disable",
+      },
+      themeNext: {
+        themeNext: "enable",
+        corner: "rounded",
+        accent: "teal",
+        // Ignore headingFont given font is not loaded
+      },
+    },
+  },
 };
 
 export const MultilevelExamples: StoryFn<QAContainerProps> = (props) => {
@@ -87,7 +100,20 @@ export const MultilevelExamples: StoryFn<QAContainerProps> = (props) => {
 };
 
 MultilevelExamples.parameters = {
-  chromatic: { disableSnapshot: false },
+  chromatic: {
+    disableSnapshot: false,
+    modes: {
+      theme: {
+        themeNext: "disable",
+      },
+      themeNext: {
+        themeNext: "enable",
+        corner: "rounded",
+        accent: "teal",
+        // Ignore headingFont given font is not loaded
+      },
+    },
+  },
 };
 
 export const GroupedExamples: StoryFn<QAContainerProps> = (props) => {
@@ -122,5 +148,18 @@ export const GroupedExamples: StoryFn<QAContainerProps> = (props) => {
 };
 
 GroupedExamples.parameters = {
-  chromatic: { disableSnapshot: false },
+  chromatic: {
+    disableSnapshot: false,
+    modes: {
+      theme: {
+        themeNext: "disable",
+      },
+      themeNext: {
+        themeNext: "enable",
+        corner: "rounded",
+        accent: "teal",
+        // Ignore headingFont given font is not loaded
+      },
+    },
+  },
 };