Skip to content

Commit 8e9ba62

Browse files
langermankactions-user
langermank
and
actions-user
authored
ActionList followup (#1780)
* collapse state updates * inset variant * pseudo, you fine as you are * tree view pattern draft * tree view structure * move treeview to new pr * Stylelint auto-fixes * Create fresh-schools-pull.md Co-authored-by: Actions Auto Build <[email protected]>
1 parent ee27583 commit 8e9ba62

File tree

6 files changed

+233
-26
lines changed

6 files changed

+233
-26
lines changed

‎.changeset/fresh-schools-pull.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/css": patch
3+
---
4+
5+
ActionList followup

‎docs/src/stories/components/ActionList/ActionList.stories.jsx‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,18 @@ export default {
7272
table: {
7373
category: 'HTML'
7474
}
75+
},
76+
listPadding: {
77+
options: [0, 1], // iterator
78+
mapping: ['', 'ActionList--full'], // values
79+
control: {
80+
type: 'inline-radio',
81+
labels: ['inset', 'full-bleed']
82+
},
83+
description: 'ActionList includes 8px padding by default, full-bleed removes all padding',
84+
table: {
85+
category: 'CSS'
86+
}
7587
}
7688
}
7789
}
@@ -83,10 +95,16 @@ export const ListTemplate = ({
8395
ariaLabel,
8496
ariaLabelledBy,
8597
subGroup,
86-
listboxMultiSelect
98+
listboxMultiSelect,
99+
listPadding
87100
}) => (
88101
<ul
89-
className={clsx('ActionList', showDividers && 'ActionList--divided', subGroup && 'ActionList--subGroup')}
102+
className={clsx(
103+
'ActionList',
104+
showDividers && 'ActionList--divided',
105+
subGroup && 'ActionList--subGroup',
106+
listPadding && `${listPadding}`
107+
)}
90108
role={role}
91109
aria-label={ariaLabel && ariaLabel}
92110
aria-labelledby={ariaLabelledBy && ariaLabelledBy}
@@ -102,6 +120,7 @@ Playground.args = {
102120
subGroup: false,
103121
showDividers: false,
104122
listboxMultiSelect: false,
123+
listPadding: '',
105124
ariaLabelledBy: '',
106125
groupId: '',
107126
children: (

‎docs/src/stories/components/ActionList/ActionListItem.stories.jsx‎

Lines changed: 61 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,13 @@ export default {
5151
category: 'CSS'
5252
}
5353
},
54+
containsActiveSubItem: {
55+
defaultValue: false,
56+
control: {type: 'boolean'},
57+
table: {
58+
category: 'CSS'
59+
}
60+
},
5461
leadingVisual: {
5562
defaultValue: '',
5663
name: 'leadingVisual',
@@ -146,6 +153,13 @@ export default {
146153
category: 'Interactive'
147154
}
148155
},
156+
collapsibleLeading: {
157+
defaultValue: false,
158+
control: {type: 'boolean'},
159+
table: {
160+
category: 'Interactive'
161+
}
162+
},
149163
singleSelect: {
150164
defaultValue: false,
151165
control: {type: 'boolean'},
@@ -207,7 +221,9 @@ export const ListItemTemplate = ({
207221
listSingleSelect,
208222
listMultiSelect,
209223
listSemantic,
210-
ariaDisabled
224+
ariaDisabled,
225+
containsActiveSubItem,
226+
collapsibleLeading
211227
}) => {
212228
const [isCollapsed, itemIsCollapsed] = useToggle()
213229
const [isChecked, itemIsChecked] = useToggle()
@@ -218,9 +234,10 @@ export const ListItemTemplate = ({
218234
ariaCurrent && 'ActionList-item--navActive',
219235
subItem && `ActionList-item--subItem`,
220236
containsSubItem && `ActionList-item--hasSubItem`,
237+
containsActiveSubItem && `ActionList-item--hasActiveSubItem`,
221238
variant && `${variant}`
222239
)}
223-
onClick={collapsible ? itemIsCollapsed : itemIsChecked}
240+
onClick={collapsible || collapsibleLeading ? itemIsCollapsed : itemIsChecked}
224241
role={
225242
singleSelect
226243
? 'menuitemradio'
@@ -235,8 +252,8 @@ export const ListItemTemplate = ({
235252
: undefined
236253
}
237254
id={id}
238-
aria-haspopup={collapsible ? 'true' : undefined}
239-
aria-expanded={collapsible ? (isCollapsed ? 'false' : 'true') : undefined}
255+
aria-haspopup={collapsible || collapsibleLeading ? 'true' : undefined}
256+
aria-expanded={collapsible || collapsibleLeading ? (isCollapsed ? 'false' : 'true') : undefined}
240257
aria-checked={singleSelect || multiSelect ? (isChecked ? 'true' : 'false') : undefined}
241258
aria-selected={listSingleSelect || listMultiSelect ? (isChecked ? 'true' : 'false') : undefined}
242259
aria-disabled={ariaDisabled ? 'true' : undefined}
@@ -254,7 +271,12 @@ export const ListItemTemplate = ({
254271
leadingVisual && leadingVisualSize && `${leadingVisualSize}`
255272
)}
256273
>
257-
{(leadingAction || singleSelect || multiSelect || listSingleSelect || listMultiSelect) && (
274+
{(leadingAction ||
275+
singleSelect ||
276+
multiSelect ||
277+
listSingleSelect ||
278+
listMultiSelect ||
279+
collapsibleLeading) && (
258280
<span className="ActionList-item-action ActionList-item-action--leading">
259281
{singleSelect ||
260282
(listSingleSelect && (
@@ -290,6 +312,20 @@ export const ListItemTemplate = ({
290312
/>
291313
</svg>
292314
))}
315+
{collapsibleLeading && (
316+
<svg
317+
xmlns="http://www.w3.org/2000/svg"
318+
viewBox="0 0 16 16"
319+
width="16"
320+
height="16"
321+
className="ActionList-item-collapseIcon"
322+
>
323+
<path
324+
fill-rule="evenodd"
325+
d="M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z"
326+
></path>
327+
</svg>
328+
)}
293329
{leadingAction}
294330
</span>
295331
)}
@@ -346,7 +382,12 @@ export const ListItemTemplate = ({
346382
leadingVisual && leadingVisualSize && `${leadingVisualSize}`
347383
)}
348384
>
349-
{(leadingAction || singleSelect || multiSelect || listSingleSelect || listMultiSelect) && (
385+
{(leadingAction ||
386+
singleSelect ||
387+
multiSelect ||
388+
listSingleSelect ||
389+
listMultiSelect ||
390+
collapsibleLeading) && (
350391
<span className="ActionList-item-action ActionList-item-action--leading">
351392
{(singleSelect || listSingleSelect) && (
352393
<svg
@@ -380,6 +421,20 @@ export const ListItemTemplate = ({
380421
/>
381422
</svg>
382423
)}
424+
{collapsibleLeading && (
425+
<svg
426+
xmlns="http://www.w3.org/2000/svg"
427+
viewBox="0 0 16 16"
428+
width="16"
429+
height="16"
430+
className="ActionList-item-collapseIcon"
431+
>
432+
<path
433+
fill-rule="evenodd"
434+
d="M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z"
435+
></path>
436+
</svg>
437+
)}
383438
{leadingAction}
384439
</span>
385440
)}

‎docs/src/stories/components/ActionList/ActionListPatterns.stories.jsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ NavWithSubItems.args = {
3232
listSemantic
3333
collapsible
3434
containsSubItem
35+
containsActiveSubItem
3536
text="Nav Item"
3637
children={
3738
<ListTemplate
@@ -58,6 +59,51 @@ NavWithSubItems.decorators = [
5859
)
5960
]
6061

62+
export const NavWithNoActiveSubItems = ListTemplate.bind({})
63+
NavWithNoActiveSubItems.storyName = '[Nav] Links + nested collapsible group w/ no active children'
64+
NavWithNoActiveSubItems.args = {
65+
...ListTemplate.args,
66+
...ListItemTemplate.args,
67+
role: undefined,
68+
ariaLabel: 'Main menu description',
69+
showDividers: false,
70+
children: (
71+
<>
72+
<ListItemTemplate text="Nav Item" href="/" listSemantic />
73+
<ListItemTemplate text="Nav Item" href="/" listSemantic />
74+
<ListItemTemplate text="Nav Item" href="/" listSemantic />
75+
<ListItemTemplate
76+
listSemantic
77+
collapsible
78+
containsSubItem
79+
text="Nav Item"
80+
children={
81+
<ListTemplate
82+
subGroup
83+
ariaLabel="Sub nav description"
84+
children={
85+
<>
86+
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic />
87+
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic />
88+
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic />
89+
</>
90+
}
91+
/>
92+
}
93+
/>
94+
<ListItemTemplate text="Nav Item" href="/" listSemantic />
95+
<ListItemTemplate text="Nav Item" href="/" listSemantic />
96+
</>
97+
)
98+
}
99+
NavWithNoActiveSubItems.decorators = [
100+
Story => (
101+
<nav>
102+
<Story />
103+
</nav>
104+
)
105+
]
106+
61107
export const NavWithSubItemsLeadingVisual16px = ListTemplate.bind({})
62108
NavWithSubItemsLeadingVisual16px.storyName = '[Nav] Links + nested collapsible group leadingVisual 16px'
63109
NavWithSubItemsLeadingVisual16px.args = {
@@ -92,6 +138,7 @@ NavWithSubItemsLeadingVisual16px.args = {
92138
<ListItemTemplate
93139
listSemantic
94140
containsSubItem
141+
containsActiveSubItem
95142
collapsible
96143
text="Nav Item"
97144
href="/"
@@ -177,6 +224,7 @@ NavWithSubItemsLeadingVisual20px.args = {
177224
<ListItemTemplate
178225
listSemantic
179226
containsSubItem
227+
containsActiveSubItem
180228
text="Nav Item"
181229
href="/"
182230
leadingVisualSize="ActionList-content--visual20"
@@ -261,6 +309,7 @@ NavWithSubItemsLeadingVisual24px.args = {
261309
<ListItemTemplate
262310
listSemantic
263311
containsSubItem
312+
containsActiveSubItem
264313
text="Nav Item"
265314
href="/"
266315
leadingVisualSize="ActionList-content--visual24"
@@ -389,6 +438,7 @@ MenuWithSectionDivider.args = {
389438
<DividerTemplate title="Section DividerTemplate (subtle)" id="some-unique-id" />
390439
<ListItemTemplate
391440
containsSubItem
441+
containsActiveSubItem
392442
children={
393443
<ListTemplate
394444
ariaLabelledBy="some-unique-id"
@@ -616,6 +666,7 @@ NavWithSubItemsLeadingVisual16pxSubSections.args = {
616666
<ListItemTemplate
617667
listSemantic
618668
containsSubItem
669+
containsActiveSubItem
619670
text="Moderation options"
620671
// href="/"
621672
collapsible
@@ -626,6 +677,7 @@ NavWithSubItemsLeadingVisual16pxSubSections.args = {
626677
children={
627678
<ListTemplate
628679
containsSubItem
680+
containsActiveSubItem
629681
subGroup
630682
ariaLabel="Sub nav descrioption"
631683
children={
@@ -725,3 +777,42 @@ NavWithSubItemsLeadingVisual16pxSubSections.decorators = [
725777
</nav>
726778
)
727779
]
780+
781+
export const ActionListFullBleed = ListTemplate.bind({})
782+
ActionListFullBleed.storyName = '[List] Full bleed Action List inside box'
783+
ActionListFullBleed.args = {
784+
...ListTemplate.args,
785+
...ListItemTemplate.args,
786+
role: undefined,
787+
ariaLabel: 'Main menu description',
788+
showDividers: false,
789+
listPadding: 'ActionList--full',
790+
children: (
791+
<>
792+
<ListItemTemplate text="Nav Item" href="/" listSemantic />
793+
<ListItemTemplate text="Nav Item" href="/" listSemantic />
794+
<ListItemTemplate text="Nav Item" href="/" listSemantic />
795+
<ListItemTemplate
796+
listSemantic
797+
collapsible
798+
containsSubItem
799+
text="Nav Item"
800+
children={
801+
<ListTemplate
802+
subGroup
803+
ariaLabel="Sub nav description"
804+
children={
805+
<>
806+
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic ariaCurrent="page" />
807+
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic />
808+
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic />
809+
</>
810+
}
811+
/>
812+
}
813+
/>
814+
<ListItemTemplate text="Nav Item" href="/" listSemantic />
815+
<ListItemTemplate text="Nav Item" href="/" listSemantic />
816+
</>
817+
)
818+
}

0 commit comments

Comments
 (0)