From 72035a0f5fe4a423b3d135f448ea75a27ada0aea Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Tue, 11 Nov 2025 13:41:56 -0600 Subject: [PATCH 1/6] fix(uishell): update header overflow action button styles --- .../UIShell/components/styles/_header-divider.scss | 2 ++ .../UIShell/components/styles/_header.scss | 14 +++++++++++++- .../UIShell/components/styles/_profile.scss | 5 ++++- 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/UIShell/components/styles/_header-divider.scss b/packages/react/src/components/UIShell/components/styles/_header-divider.scss index 38bb80c00..de2a7a7f6 100644 --- a/packages/react/src/components/UIShell/components/styles/_header-divider.scss +++ b/packages/react/src/components/UIShell/components/styles/_header-divider.scss @@ -14,4 +14,6 @@ $prefix: 'cds' !default; background: $border-subtle; block-size: convert.to-rem(24px); inline-size: 1px; + margin-inline-start: -1px; + margin-inline-end: -1px; } diff --git a/packages/react/src/components/UIShell/components/styles/_header.scss b/packages/react/src/components/UIShell/components/styles/_header.scss index 11a9c8038..f1a721658 100644 --- a/packages/react/src/components/UIShell/components/styles/_header.scss +++ b/packages/react/src/components/UIShell/components/styles/_header.scss @@ -10,6 +10,7 @@ @use '@carbon/react/scss/motion' as *; @use '@carbon/react/scss/utilities/convert' as convert; @use '@carbon/react/scss/utilities/custom-property' as custom-property; +@use '@carbon/react/scss/utilities/z-index' as *; @use '@carbon/react/scss/breakpoint' as *; $prefix: 'cds' !default; @@ -48,7 +49,18 @@ $prefix: 'cds' !default; .#{$prefix}--header-action.#{$prefix}--popover--open .#{$prefix}--header-action__button { - background-color: $layer; + background-color: $background; + border-left: 1px solid $border-subtle; + border-right: 1px solid $border-subtle; + z-index: z('header') + 2; +} + +.#{$prefix}--header-action.#{$prefix}--popover--border + > .#{$prefix}--popover + > .#{$prefix}--popover-content { + outline: none; + border: 1px solid $border-subtle; + border-top: none; } .#{$prefix}--popover--border.#{$prefix}--header-action diff --git a/packages/react/src/components/UIShell/components/styles/_profile.scss b/packages/react/src/components/UIShell/components/styles/_profile.scss index a60be4f80..f6e8fe83e 100644 --- a/packages/react/src/components/UIShell/components/styles/_profile.scss +++ b/packages/react/src/components/UIShell/components/styles/_profile.scss @@ -32,7 +32,10 @@ $prefix: 'cds' !default; .clabs--theme-settings { padding: $spacing-05; border-block-end: convert.to-rem(0.5px) solid $border-subtle; - border-block-start: convert.to-rem(0.5px) solid $border-subtle; + + &:not(:first-child) { + border-block-start: convert.to-rem(0.5px) solid $border-subtle; + } } } From 8b03ae8280d24ba233b64bfd3c4ec9f236745986 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Tue, 11 Nov 2025 13:48:19 -0600 Subject: [PATCH 2/6] chore: css lint fix --- .../UIShell/components/styles/_header-divider.scss | 3 +-- .../src/components/UIShell/components/styles/_header.scss | 8 ++++---- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/react/src/components/UIShell/components/styles/_header-divider.scss b/packages/react/src/components/UIShell/components/styles/_header-divider.scss index de2a7a7f6..59ba60575 100644 --- a/packages/react/src/components/UIShell/components/styles/_header-divider.scss +++ b/packages/react/src/components/UIShell/components/styles/_header-divider.scss @@ -14,6 +14,5 @@ $prefix: 'cds' !default; background: $border-subtle; block-size: convert.to-rem(24px); inline-size: 1px; - margin-inline-start: -1px; - margin-inline-end: -1px; + margin-inline: -1px; } diff --git a/packages/react/src/components/UIShell/components/styles/_header.scss b/packages/react/src/components/UIShell/components/styles/_header.scss index f1a721658..83702bb71 100644 --- a/packages/react/src/components/UIShell/components/styles/_header.scss +++ b/packages/react/src/components/UIShell/components/styles/_header.scss @@ -49,18 +49,18 @@ $prefix: 'cds' !default; .#{$prefix}--header-action.#{$prefix}--popover--open .#{$prefix}--header-action__button { - background-color: $background; + z-index: z('header') + 2; border-left: 1px solid $border-subtle; border-right: 1px solid $border-subtle; - z-index: z('header') + 2; + background-color: $background; } .#{$prefix}--header-action.#{$prefix}--popover--border > .#{$prefix}--popover > .#{$prefix}--popover-content { - outline: none; border: 1px solid $border-subtle; - border-top: none; + border-block-start: none; + outline: none; } .#{$prefix}--popover--border.#{$prefix}--header-action From 86f2b49e049cf17931b760592cf6f691f80c480d Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Tue, 11 Nov 2025 13:51:52 -0600 Subject: [PATCH 3/6] chore: lint fix --- .../src/components/UIShell/components/styles/_header.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/UIShell/components/styles/_header.scss b/packages/react/src/components/UIShell/components/styles/_header.scss index 83702bb71..1ca7a361c 100644 --- a/packages/react/src/components/UIShell/components/styles/_header.scss +++ b/packages/react/src/components/UIShell/components/styles/_header.scss @@ -50,8 +50,8 @@ $prefix: 'cds' !default; .#{$prefix}--header-action.#{$prefix}--popover--open .#{$prefix}--header-action__button { z-index: z('header') + 2; - border-left: 1px solid $border-subtle; - border-right: 1px solid $border-subtle; + border-inline-end: 1px solid $border-subtle; + border-inline-start: 1px solid $border-subtle; background-color: $background; } From 44aea7347ed0ae1fd0c9b78341ce93b3d1f340ba Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Tue, 11 Nov 2025 13:55:23 -0600 Subject: [PATCH 4/6] fix: lint --- .../react/src/components/UIShell/components/styles/_header.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/UIShell/components/styles/_header.scss b/packages/react/src/components/UIShell/components/styles/_header.scss index 1ca7a361c..94e9d7fb0 100644 --- a/packages/react/src/components/UIShell/components/styles/_header.scss +++ b/packages/react/src/components/UIShell/components/styles/_header.scss @@ -50,9 +50,9 @@ $prefix: 'cds' !default; .#{$prefix}--header-action.#{$prefix}--popover--open .#{$prefix}--header-action__button { z-index: z('header') + 2; + background-color: $background; border-inline-end: 1px solid $border-subtle; border-inline-start: 1px solid $border-subtle; - background-color: $background; } .#{$prefix}--header-action.#{$prefix}--popover--border From de8c8ecfd0313aa418192eea2105f1f56a8509bc Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Tue, 11 Nov 2025 13:58:22 -0600 Subject: [PATCH 5/6] fix: turn on background and border for menubutton --- .../src/components/UIShell/__stories__/UIShell.stories.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react/src/components/UIShell/__stories__/UIShell.stories.js b/packages/react/src/components/UIShell/__stories__/UIShell.stories.js index 2a2c62a21..59927a566 100644 --- a/packages/react/src/components/UIShell/__stories__/UIShell.stories.js +++ b/packages/react/src/components/UIShell/__stories__/UIShell.stories.js @@ -466,6 +466,8 @@ export const Demo = () => { className="hide-at-md" menuTarget={headerRef.current} kind="ghost" + menuBackgroundToken="background" + menuBorder label={selectedCategory || 'Select Category'}> { className="hide-at-md" menuTarget={headerRef.current} kind="ghost" + menuBackgroundToken="background" + menuBorder label={selectedItem || 'Select Item'} disabled={!selectedCategory}> Date: Tue, 11 Nov 2025 15:57:27 -0600 Subject: [PATCH 6/6] fix(uishell): various console errors --- .../HeaderOverflowPanel.stories.js | 6 ++-- .../UIShell/__stories__/UIShell.stories.js | 5 ++- .../UIShell/components/HeaderPopover.tsx | 31 ++++++++++++------- .../UIShell/components/SharkFinIcon.tsx | 2 +- .../UIShell/components/SideNavMenu.tsx | 5 ++- .../styles/_header-overflow-panel.scss | 6 ++++ 6 files changed, 36 insertions(+), 19 deletions(-) diff --git a/packages/react/src/components/UIShell/__stories__/HeaderOverflowPanel.stories.js b/packages/react/src/components/UIShell/__stories__/HeaderOverflowPanel.stories.js index 0c368bdef..9a5a2479a 100644 --- a/packages/react/src/components/UIShell/__stories__/HeaderOverflowPanel.stories.js +++ b/packages/react/src/components/UIShell/__stories__/HeaderOverflowPanel.stories.js @@ -13,6 +13,7 @@ import { SideNav } from '../components/SideNav'; import { SideNavItems } from '../components/SideNavItems'; import { SideNavMenu } from '../components/SideNavMenu'; import { SideNavLink } from '../components/SideNavLink'; +import { SideNavMenuItem } from '../components/SideNavMenuItem'; import { Profile } from '../index'; import { HeaderContainer } from '../components/HeaderContainer'; import { HeaderOverflowPanel } from '../components/HeaderOverflowPanel'; @@ -148,7 +149,6 @@ export const Default = () => { isActive={isSideNavExpanded} aria-expanded={isSideNavExpanded} isCollapsible //shows menu at desktop - isFixedNav renderMenuIcon={} /> @@ -235,10 +235,10 @@ export const Default = () => { title="Settings" backButtonTitle="Back"> - + Customize - + Notifications diff --git a/packages/react/src/components/UIShell/__stories__/UIShell.stories.js b/packages/react/src/components/UIShell/__stories__/UIShell.stories.js index 59927a566..65f52e0c6 100644 --- a/packages/react/src/components/UIShell/__stories__/UIShell.stories.js +++ b/packages/react/src/components/UIShell/__stories__/UIShell.stories.js @@ -322,10 +322,10 @@ const headerOverflowPanel = (isSm, themeSetting, setThemeSetting) => ( title="Settings" backButtonTitle="Back"> - + Customize - + Notifications @@ -390,7 +390,6 @@ export const Demo = () => { isActive={isSideNavExpanded} aria-expanded={isSideNavExpanded} isCollapsible //shows menu at desktop - isFixedNav renderMenuIcon={} /> diff --git a/packages/react/src/components/UIShell/components/HeaderPopover.tsx b/packages/react/src/components/UIShell/components/HeaderPopover.tsx index 639b704b1..1216192ff 100644 --- a/packages/react/src/components/UIShell/components/HeaderPopover.tsx +++ b/packages/react/src/components/UIShell/components/HeaderPopover.tsx @@ -221,17 +221,26 @@ export function HeaderPopoverButton({ [`${prefix}--header-action__button`]: true, }); const ComponentToggle: any = BaseComponent ?? IconButton; - return ( - - {children} - - ); + + // Only pass highContrast to IconButton, not to custom components + const componentProps = BaseComponent + ? { + ...toggletip?.onClick, + className, + kind: null, + label, + ...rest, + } + : { + ...toggletip?.onClick, + className, + kind: 'ghost', + label, + highContrast: false, + ...rest, + }; + + return {children}; } HeaderPopoverButton.propTypes = { diff --git a/packages/react/src/components/UIShell/components/SharkFinIcon.tsx b/packages/react/src/components/UIShell/components/SharkFinIcon.tsx index def59d183..1afba821b 100644 --- a/packages/react/src/components/UIShell/components/SharkFinIcon.tsx +++ b/packages/react/src/components/UIShell/components/SharkFinIcon.tsx @@ -46,7 +46,7 @@ export const SharkFinIcon: React.FC = ({ viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg"> - + diff --git a/packages/react/src/components/UIShell/components/SideNavMenu.tsx b/packages/react/src/components/UIShell/components/SideNavMenu.tsx index e17067c6d..c76242e0e 100644 --- a/packages/react/src/components/UIShell/components/SideNavMenu.tsx +++ b/packages/react/src/components/UIShell/components/SideNavMenu.tsx @@ -568,7 +568,10 @@ export const SideNavMenu = React.forwardRef( renderIcon={backButtonRenderIcon}> {backButtonTitle} - {childrenToRender} + + {childrenToRender} + )} diff --git a/packages/react/src/components/UIShell/components/styles/_header-overflow-panel.scss b/packages/react/src/components/UIShell/components/styles/_header-overflow-panel.scss index 01ff2ba64..61c386adf 100644 --- a/packages/react/src/components/UIShell/components/styles/_header-overflow-panel.scss +++ b/packages/react/src/components/UIShell/components/styles/_header-overflow-panel.scss @@ -32,6 +32,12 @@ $prefix: 'cds' !default; padding-block-start: $spacing-05; } + .#{$prefix}--header-overflow-panel + .#{$prefix}--header-overflow-panel-secondary-container + .#{$prefix}--side-nav__items { + padding: 0; + } + .#{$prefix}--header-overflow-panel .#{$prefix}--side-nav__menu-secondary-wrapper-expanded { z-index: 1;