Skip to content

Commit 51e5f11

Browse files
danielguillandanielguillan
committed
Fix grouped NavList nesting
Copilot-Session: 179d54c8-0b59-4769-a234-92919fb93779
1 parent 7f7a549 commit 51e5f11

5 files changed

Lines changed: 80 additions & 1 deletion

File tree

‎.changeset/neat-lists-align.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
'@primer/react-brand': patch
33
---
44

5-
Fixed `NavList` leaf item indentation within grouped nested disclosures.
5+
Fixed `NavList` indentation across grouped nested disclosure levels.

‎packages/react/src/NavList/NavList.features.stories.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,58 @@ export const NestedDisclosure: Story = {
102102
},
103103
}
104104

105+
export const GroupedNestedLevels: Story = {
106+
render: () => (
107+
<NavList aria-label="Grouped nested levels">
108+
<NavList.Group title="Level 3 leaf">
109+
<NavList.Item defaultExpanded>
110+
Level 2 disclosure
111+
<NavList.SubNav>
112+
<NavList.Item href="#" aria-current="page">
113+
Level 3 current leaf
114+
</NavList.Item>
115+
</NavList.SubNav>
116+
</NavList.Item>
117+
</NavList.Group>
118+
<NavList.Group title="Level 4 leaf">
119+
<NavList.Item defaultExpanded>
120+
Level 2 disclosure
121+
<NavList.SubNav>
122+
<NavList.Item defaultExpanded>
123+
Level 3 disclosure
124+
<NavList.SubNav>
125+
<NavList.Item href="#" aria-current="page">
126+
Level 4 current leaf
127+
</NavList.Item>
128+
</NavList.SubNav>
129+
</NavList.Item>
130+
</NavList.SubNav>
131+
</NavList.Item>
132+
</NavList.Group>
133+
<NavList.Group title="Level 5 leaf">
134+
<NavList.Item defaultExpanded>
135+
Level 2 disclosure
136+
<NavList.SubNav>
137+
<NavList.Item defaultExpanded>
138+
Level 3 disclosure
139+
<NavList.SubNav>
140+
<NavList.Item defaultExpanded>
141+
Level 4 disclosure
142+
<NavList.SubNav>
143+
<NavList.Item href="#" aria-current="page">
144+
Level 5 current leaf
145+
</NavList.Item>
146+
</NavList.SubNav>
147+
</NavList.Item>
148+
</NavList.SubNav>
149+
</NavList.Item>
150+
</NavList.SubNav>
151+
</NavList.Item>
152+
</NavList.Group>
153+
</NavList>
154+
),
155+
}
156+
105157
export const MultipleLevels: Story = {
106158
render: function MultipleLevels() {
107159
const {t} = useTranslation('NavList')

‎packages/react/src/NavList/NavList.module.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -359,6 +359,10 @@
359359
padding-inline-start: var(--base-size-40);
360360
}
361361

362+
.NavList__groupList .NavList__item--level-3 > .NavList__itemContent {
363+
padding-inline-start: calc(var(--base-size-16) + var(--base-size-2));
364+
}
365+
362366
.NavList__groupList .NavList__item--leaf.NavList__item--level-3 > .NavList__itemContent {
363367
padding-inline-start: var(--base-size-16);
364368
}
@@ -371,6 +375,18 @@
371375
padding-inline-start: calc(var(--base-size-64) + var(--base-size-8));
372376
}
373377

378+
.NavList__groupList .NavList__item--level-4 > .NavList__itemContent {
379+
padding-inline-start: calc(var(--base-size-32) + var(--base-size-2));
380+
}
381+
382+
.NavList__groupList .NavList__item--leaf.NavList__item--level-4 > .NavList__itemContent {
383+
padding-inline-start: var(--base-size-32);
384+
}
385+
386+
.NavList__groupList .NavList__item--leaf.NavList__item--level-5 > .NavList__itemContent {
387+
padding-inline-start: var(--base-size-48);
388+
}
389+
374390
.NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4)
375391
> .NavList__itemContent
376392
.NavList__toggleIcon {

‎packages/react/src/NavList/NavList.visual.spec.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,17 @@ test.describe('Visual Comparison: NavList', () => {
4848
await expect(page).toHaveScreenshot({fullPage: true})
4949
})
5050

51+
test('NavList / Grouped Nested Levels', async ({page}) => {
52+
await page.goto(
53+
'http://localhost:6006/iframe.html?args=&id=components-navlist-features--grouped-nested-levels&viewMode=story',
54+
{waitUntil: 'networkidle'},
55+
)
56+
await page.locator('body.sb-show-main').waitFor({state: 'visible'})
57+
58+
await page.waitForTimeout(500)
59+
await expect(page).toHaveScreenshot({fullPage: true})
60+
})
61+
5162
test('NavList / Multiple Levels', async ({page}) => {
5263
await page.goto(
5364
'http://localhost:6006/iframe.html?args=&id=components-navlist-features--multiple-levels&viewMode=story',

‎packages/react/src/NavList/NavList.visual.spec.ts-snapshots/Visual-Comparison-NavList-NavList-Grouped-Nested-Levels-1-darwin.png‎

27.3 KB
Loading

0 commit comments

Comments
 (0)