Skip to content

feat: Add expandable-icon-end to collapsible side navigation #4843

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
jkuelz wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat: Add expandable-icon-end to collapsible side navigation #4843

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bfd7deb
feat: support end-positioned expand icon in expandable section
jkuelz Jul 27, 2026
87995cf
feat: Add automatic icon layout to collapsible side navigation
jkuelz Jul 28, 2026
5246fb3
test: Fix code coverage
jkuelz Jul 29, 2026
feadac4
fix: Collapsed active hover state
jkuelz Jul 29, 2026
e5d8fca
chore: Address comments
jkuelz Jul 31, 2026
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
30 changes: 29 additions & 1 deletion pages/expandable-section/permutations.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,10 @@ import React from 'react';
import Button from '~components/button';
import Container from '~components/container';
import ExpandableSection, { ExpandableSectionProps } from '~components/expandable-section';
import InternalExpandableSection from '~components/expandable-section/internal';
import Header from '~components/header';
import SpaceBetween from '~components/space-between';
import StatusIndicator from '~components/status-indicator';
import Table from '~components/table';

import createPermutations from '../utils/permutations';
Expand Down Expand Up @@ -158,14 +161,39 @@ const permutations = createPermutations<ExpandableSectionProps>([
children: ['Sample content'],
},
]);
/* eslint-enable react/jsx-key */

const endIconPermutations = createPermutations<ExpandableSectionProps>([
{
variant: ['default', 'footer', 'navigation', 'container'],
headerText: [
'Short Header',
'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
],
headerActions: [
undefined,
<SpaceBetween direction="horizontal" size="xs" alignItems="center">
<Button variant="inline-link">Action</Button>
<Button>Another action</Button>
<StatusIndicator>Information</StatusIndicator>
</SpaceBetween>,
],
},
]);

export default function ExpandableSectionPermutations() {
return (
<>
<h1>Expandable Section permutations</h1>
<ScreenshotArea disableAnimations={true}>
<PermutationsView permutations={permutations} render={permutation => <ExpandableSection {...permutation} />} />
<PermutationsView
permutations={endIconPermutations}
render={permutation => (
<InternalExpandableSection {...permutation} defaultExpanded={true} __expandIconPosition="end">
Variant {permutation.variant} section content
</InternalExpandableSection>
)}
/>
</ScreenshotArea>
</>
);
Expand Down
37 changes: 34 additions & 3 deletions pages/side-navigation/collapsed.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,45 @@ const items: SideNavigationProps.Item[] = [
{ type: 'link', text: 'Settings', href: '#/settings', icon: <Icon name="settings" /> },
{
type: 'section',
text: 'Resources',
text: 'Section',
items: [
{ type: 'link', text: 'Announcements', href: '#/announcements', icon: <Icon name="announcement" /> },
{ type: 'link', text: 'Team', href: '#/team', icon: <Icon name="group" /> },
{ type: 'link', text: 'Networking', href: '#/networking', icon: <Icon name="share" /> },
],
},
{ type: 'divider' },
{
type: 'link-group',
text: 'Link group',
href: '#/',
items: [
{ type: 'link', text: 'Announcements', href: '#/announcements3', icon: <Icon name="announcement" /> },
{ type: 'link', text: 'Team', href: '#/team3', icon: <Icon name="group" /> },
{ type: 'link', text: 'Networking', href: '#/networking3', icon: <Icon name="share" /> },
],
},
{
type: 'expandable-link-group',
text: 'Expandable link group',
href: '#/projects',
icon: <Icon name="folder" />,
items: [
{ type: 'link', text: 'Project 1', href: '#/projects/1' },
{ type: 'link', text: 'Project 2', href: '#/projects/2' },
{ type: 'link', text: 'Project 3', href: '#/projects/3' },
],
},
{ type: 'link', text: 'Documentation', href: '#/docs', external: true },
{
type: 'section-group',
title: 'Section group',
items: [
{ type: 'link', text: 'Announcements', href: '#/announcements2', icon: <Icon name="announcement" /> },
{ type: 'link', text: 'Team', href: '#/team2', icon: <Icon name="group" /> },
{ type: 'link', text: 'Networking', href: '#/networking2', icon: <Icon name="share" /> },
],
},
];

const COLLAPSED_WIDTH = 52;
Expand Down Expand Up @@ -49,7 +80,7 @@ export default function SideNavigationCollapsedPage() {
}

return (
<div style={{ display: 'flex', blockSize: '100vh', overflow: 'hidden' }}>
<div style={{ display: 'flex', blockSize: '100vh', overflow: 'auto' }}>
{/* Nav panel */}
<nav
id="side-navigation-panel"
Expand All @@ -64,7 +95,7 @@ export default function SideNavigationCollapsedPage() {
flexDirection: 'column',
}}
>
<div style={{ inlineSize: collapsed ? 'auto' : EXPANDED_WIDTH, boxSizing: 'border-box' }}>
<div style={{ inlineSize: collapsed ? 'auto' : EXPANDED_WIDTH, boxSizing: 'border-box', overflow: 'auto' }}>
{/* Toggle button at top */}
<div
style={{
Expand Down
8 changes: 8 additions & 0 deletions src/__integ__/__snapshots__/themes.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
"color-background-segment-wrapper": "#ffffff",
"color-background-side-navigation-item-active": "transparent",
"color-background-side-navigation-item-active-collapsed": "#0073bb",
"color-background-side-navigation-item-icon-hover": "#f1faff",
"color-background-skeleton": "#eaeded",
"color-background-skeleton-wave": "#f6f6f9",
"color-background-slider-handle-active": "#0a4a74",
Expand Down Expand Up @@ -1164,6 +1165,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
"color-background-segment-wrapper": "#2a2e33",
"color-background-side-navigation-item-active": "transparent",
"color-background-side-navigation-item-active-collapsed": "#00a1c9",
"color-background-side-navigation-item-icon-hover": "#414750",
"color-background-skeleton": "#2a2e33",
"color-background-skeleton-wave": "#414750",
"color-background-slider-handle-active": "#44b9d6",
Expand Down Expand Up @@ -2146,6 +2148,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
"color-background-segment-wrapper": "#ffffff",
"color-background-side-navigation-item-active": "transparent",
"color-background-side-navigation-item-active-collapsed": "#0073bb",
"color-background-side-navigation-item-icon-hover": "#f1faff",
"color-background-skeleton": "#eaeded",
"color-background-skeleton-wave": "#f6f6f9",
"color-background-slider-handle-active": "#0a4a74",
Expand Down Expand Up @@ -3128,6 +3131,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
"color-background-segment-wrapper": "#ffffff",
"color-background-side-navigation-item-active": "transparent",
"color-background-side-navigation-item-active-collapsed": "#0073bb",
"color-background-side-navigation-item-icon-hover": "#f1faff",
"color-background-skeleton": "#eaeded",
"color-background-skeleton-wave": "#f6f6f9",
"color-background-slider-handle-active": "#0a4a74",
Expand Down Expand Up @@ -4110,6 +4114,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
"color-background-segment-wrapper": "#ffffff",
"color-background-side-navigation-item-active": "transparent",
"color-background-side-navigation-item-active-collapsed": "#006ce0",
"color-background-side-navigation-item-icon-hover": "#f0fbff",
"color-background-skeleton": "#ebebf0",
"color-background-skeleton-wave": "#f6f6f9",
"color-background-slider-handle-active": "#004a9e",
Expand Down Expand Up @@ -5092,6 +5097,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-background-segment-wrapper": "#ffffff",
"color-background-side-navigation-item-active": "transparent",
"color-background-side-navigation-item-active-collapsed": "#006ce0",
"color-background-side-navigation-item-icon-hover": "#f0fbff",
"color-background-skeleton": "#ebebf0",
"color-background-skeleton-wave": "#f6f6f9",
"color-background-slider-handle-active": "#004a9e",
Expand Down Expand Up @@ -6074,6 +6080,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-background-segment-wrapper": "#0f141a",
"color-background-side-navigation-item-active": "transparent",
"color-background-side-navigation-item-active-collapsed": "#42b4ff",
"color-background-side-navigation-item-icon-hover": "#333843",
"color-background-skeleton": "#232b37",
"color-background-skeleton-wave": "#333843",
"color-background-slider-handle-active": "#75cfff",
Expand Down Expand Up @@ -7056,6 +7063,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-background-segment-wrapper": "#161d26",
"color-background-side-navigation-item-active": "transparent",
"color-background-side-navigation-item-active-collapsed": "#42b4ff",
"color-background-side-navigation-item-icon-hover": "#333843",
"color-background-skeleton": "#232b37",
"color-background-skeleton-wave": "#333843",
"color-background-slider-handle-active": "#75cfff",
Expand Down
2 changes: 1 addition & 1 deletion src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13440,7 +13440,7 @@ manner even if you provide a value for this property.",
"type": "boolean",
},
{
"description": "Determines whether the content section's default padding is removed. This default padding is only present for the \`container\` variant.",
"description": "Determines whether the default padding around the content section is removed.",
"name": "disableContentPaddings",
"optional": true,
"type": "boolean",
Expand Down
Loading
Loading