From 533b59080fd766baea61d649987b941eafc5d95f Mon Sep 17 00:00:00 2001 From: Josh Wooding <12938082+joshwooding@users.noreply.github.com> Date: Fri, 12 Jul 2024 17:39:37 +0100 Subject: [PATCH] Update Listbox, Menu, ComboBox and Dropdown to use --salt-palette-corner when their corners are rounded and add 1px visual offset on floating panels (#3813) --- .changeset/great-pens-hunt.md | 6 +++ packages/core/src/combo-box/ComboBox.tsx | 2 + packages/core/src/dropdown/Dropdown.tsx | 2 + packages/core/src/list-box/ListBox.css | 2 +- packages/core/src/menu/MenuBase.tsx | 2 +- packages/core/src/menu/MenuPanel.css | 1 + packages/core/src/option/OptionList.css | 2 +- .../combo-box/combo-box.qa.stories.tsx | 30 ++++++++++++- .../stories/dropdown/dropdown.qa.stories.tsx | 15 ++++++- .../stories/list-box/list-box.qa.stories.tsx | 15 ++++++- .../core/stories/menu/menu.qa.stories.tsx | 45 +++++++++++++++++-- 11 files changed, 112 insertions(+), 10 deletions(-) create mode 100644 .changeset/great-pens-hunt.md diff --git a/.changeset/great-pens-hunt.md b/.changeset/great-pens-hunt.md new file mode 100644 index 00000000000..d0340eb5305 --- /dev/null +++ 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 index 39c52828034..6c55bdac3be 100644 --- 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( 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 index b8a737347b8..7cfe11cea71 100644 --- 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( 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 index db55907ba07..f9b8f026f06 100644 --- 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 index 263af21e9db..24d98e54bea 100644 --- 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 index a5873cd9030..b02253061f6 100644 --- 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 index bb83f24a8e7..fda8607675d 100644 --- 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 index b71221ece6c..1f097ec0024 100644 --- 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 = () => ( ); 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 = () => ( @@ -71,7 +84,20 @@ export const OpenMultiselectExamples: StoryFn = () => ( ); 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 = () => ( diff --git a/packages/core/stories/dropdown/dropdown.qa.stories.tsx b/packages/core/stories/dropdown/dropdown.qa.stories.tsx index eaa60c85ca4..b662153a381 100644 --- 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 = () => ( ); 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 = () => ( diff --git a/packages/core/stories/list-box/list-box.qa.stories.tsx b/packages/core/stories/list-box/list-box.qa.stories.tsx index cfba785cfa9..aa24c4d17d5 100644 --- 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 = () => ( ); 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 index 3764a94949c..7156ccc9b22 100644 --- 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 = (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 = (props) => { @@ -87,7 +100,20 @@ export const MultilevelExamples: StoryFn = (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 = (props) => { @@ -122,5 +148,18 @@ export const GroupedExamples: StoryFn = (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 + }, + }, + }, };