Skip to content

fix(uishell): various console errors #915

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alisonjoseph wants to merge 7 commits into
base: main
Choose a base branch
from
Open

fix(uishell): various console errors #915

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
72035a0
fix(uishell): update header overflow action button styles
alisonjoseph Nov 11, 2025
8b03ae8
chore: css lint fix
alisonjoseph Nov 11, 2025
86f2b49
chore: lint fix
alisonjoseph Nov 11, 2025
44aea73
fix: lint
alisonjoseph Nov 11, 2025
de8c8ec
fix: turn on background and border for menubutton
alisonjoseph Nov 11, 2025
c4bd0de
fix(uishell): various console errors
alisonjoseph Nov 11, 2025
f3dfc8a
Merge branch 'main' into uishell-console-errors
alisonjoseph Nov 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/react/src/components/UIShell/__stories__/HeaderOverflowPanel.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -148,7 +149,6 @@ export const Default = () => {
isActive={isSideNavExpanded}
aria-expanded={isSideNavExpanded}
isCollapsible //shows menu at desktop
isFixedNav
renderMenuIcon={<SwitcherIcon size={20} />}
/>
<HeaderName href="#" prefix="IBM">
Expand Down Expand Up @@ -235,10 +235,10 @@ export const Default = () => {
title="Settings"
backButtonTitle="Back">
<SideNavDivider />
<SideNavLink renderIcon={ChartCustom} href="#">
<SideNavMenuItem renderIcon={ChartCustom} href="#">
Customize
<Launch />
</SideNavLink>
</SideNavMenuItem>
</SideNavMenu>
<SideNavLink renderIcon={Notification} href="#">
Notifications
Expand Down
5 changes: 2 additions & 3 deletions packages/react/src/components/UIShell/__stories__/UIShell.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,10 +322,10 @@ const headerOverflowPanel = (isSm, themeSetting, setThemeSetting) => (
title="Settings"
backButtonTitle="Back">
<SideNavDivider />
<SideNavLink renderIcon={ChartCustom} href="#">
<SideNavMenuItem renderIcon={ChartCustom} href="#">
Customize
<Launch />
</SideNavLink>
</SideNavMenuItem>
</SideNavMenu>
<SideNavLink renderIcon={Notification} href="#">
Notifications
Expand Down Expand Up @@ -390,7 +390,6 @@ export const Demo = () => {
isActive={isSideNavExpanded}
aria-expanded={isSideNavExpanded}
isCollapsible //shows menu at desktop
isFixedNav
renderMenuIcon={<SwitcherIcon size={20} />}
/>
<HeaderName href="#" prefix="IBM">
Expand Down
31 changes: 20 additions & 11 deletions packages/react/src/components/UIShell/components/HeaderPopover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,17 +221,26 @@ export function HeaderPopoverButton<T extends React.ElementType>({
[`${prefix}--header-action__button`]: true,
});
const ComponentToggle: any = BaseComponent ?? IconButton;
return (
<ComponentToggle
{...toggletip?.onClick}
className={className}
kind={BaseComponent ? null : 'ghost'}
label={label}
highContrast={false}
{...rest}>
{children}
</ComponentToggle>
);

// 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 <ComponentToggle {...componentProps}>{children}</ComponentToggle>;
}

HeaderPopoverButton.propTypes = {
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/UIShell/components/SharkFinIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export const SharkFinIcon: React.FC<SharkFinIconProps> = ({
viewBox="0 0 4 4"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_519_52879)">
<g clipPath="url(#clip0_519_52879)">
<path d="M2 2L4 0V4H0L2 2Z" />
</g>
<defs>
Expand Down
5 changes: 4 additions & 1 deletion packages/react/src/components/UIShell/components/SideNavMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -568,7 +568,10 @@ export const SideNavMenu = React.forwardRef<HTMLElement, SideNavMenuProps>(
renderIcon={backButtonRenderIcon}>
{backButtonTitle}
</Button>
{childrenToRender}
<SideNavItems
accessibilityLabel={{ 'aria-label': `${title} submenu` }}>
{childrenToRender}
</SideNavItems>
</div>
)}
</div>
Expand Down
6 changes: 6 additions & 0 deletions packages/react/src/components/UIShell/components/styles/_header-overflow-panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down