Skip to content
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

ActionList followup #1780

Merged
merged 13 commits into from
Dec 3, 2021
Merged

ActionList followup #1780

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
8f8aff0
collapse state updates
langermank Nov 24, 2021
3abd548
inset variant
langermank Nov 24, 2021
5f0ceea
pseudo, you fine as you are
langermank Nov 24, 2021
837d66c
tree view pattern draft
langermank Nov 24, 2021
be829b0
tree view structure
langermank Nov 29, 2021
2144810
move treeview to new pr
langermank Nov 29, 2021
ee87d71
Stylelint auto-fixes
actions-user Nov 29, 2021
701966c
Merge branch 'actionlist-followup' of https://github.com/primer/css i…
langermank Nov 29, 2021
ee92404
Merge branch 'main' into actionlist-followup
langermank Dec 2, 2021
67e8fa5
Create fresh-schools-pull.md
langermank Dec 2, 2021
243bf41
Merge branch 'main' into actionlist-followup
langermank Dec 2, 2021
bedd2bc
Merge branch 'main' into actionlist-followup
langermank Dec 3, 2021
ccdf182
Merge branch 'main' into actionlist-followup
langermank Dec 3, 2021
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
5 changes: 5 additions & 0 deletions .changeset/fresh-schools-pull.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/css": patch
---

ActionList followup
23 changes: 21 additions & 2 deletions docs/src/stories/components/ActionList/ActionList.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,18 @@ export default {
table: {
category: 'HTML'
}
},
listPadding: {
options: [0, 1], // iterator
mapping: ['', 'ActionList--full'], // values
control: {
type: 'inline-radio',
labels: ['inset', 'full-bleed']
},
description: 'ActionList includes 8px padding by default, full-bleed removes all padding',
table: {
category: 'CSS'
}
}
}
}
Expand All @@ -83,10 +95,16 @@ export const ListTemplate = ({
ariaLabel,
ariaLabelledBy,
subGroup,
listboxMultiSelect
listboxMultiSelect,
listPadding
}) => (
<ul
className={clsx('ActionList', showDividers && 'ActionList--divided', subGroup && 'ActionList--subGroup')}
className={clsx(
'ActionList',
showDividers && 'ActionList--divided',
subGroup && 'ActionList--subGroup',
listPadding && `${listPadding}`
)}
role={role}
aria-label={ariaLabel && ariaLabel}
aria-labelledby={ariaLabelledBy && ariaLabelledBy}
Expand All @@ -102,6 +120,7 @@ Playground.args = {
subGroup: false,
showDividers: false,
listboxMultiSelect: false,
listPadding: '',
ariaLabelledBy: '',
groupId: '',
children: (
Expand Down
67 changes: 61 additions & 6 deletions docs/src/stories/components/ActionList/ActionListItem.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,13 @@ export default {
category: 'CSS'
}
},
containsActiveSubItem: {
defaultValue: false,
control: {type: 'boolean'},
table: {
category: 'CSS'
}
},
leadingVisual: {
defaultValue: '',
name: 'leadingVisual',
Expand Down Expand Up @@ -146,6 +153,13 @@ export default {
category: 'Interactive'
}
},
collapsibleLeading: {
defaultValue: false,
control: {type: 'boolean'},
table: {
category: 'Interactive'
}
},
singleSelect: {
defaultValue: false,
control: {type: 'boolean'},
Expand Down Expand Up @@ -207,7 +221,9 @@ export const ListItemTemplate = ({
listSingleSelect,
listMultiSelect,
listSemantic,
ariaDisabled
ariaDisabled,
containsActiveSubItem,
collapsibleLeading
}) => {
const [isCollapsed, itemIsCollapsed] = useToggle()
const [isChecked, itemIsChecked] = useToggle()
Expand All @@ -218,9 +234,10 @@ export const ListItemTemplate = ({
ariaCurrent && 'ActionList-item--navActive',
subItem && `ActionList-item--subItem`,
containsSubItem && `ActionList-item--hasSubItem`,
containsActiveSubItem && `ActionList-item--hasActiveSubItem`,
variant && `${variant}`
)}
onClick={collapsible ? itemIsCollapsed : itemIsChecked}
onClick={collapsible || collapsibleLeading ? itemIsCollapsed : itemIsChecked}
role={
singleSelect
? 'menuitemradio'
Expand All @@ -235,8 +252,8 @@ export const ListItemTemplate = ({
: undefined
}
id={id}
aria-haspopup={collapsible ? 'true' : undefined}
aria-expanded={collapsible ? (isCollapsed ? 'false' : 'true') : undefined}
aria-haspopup={collapsible || collapsibleLeading ? 'true' : undefined}
aria-expanded={collapsible || collapsibleLeading ? (isCollapsed ? 'false' : 'true') : undefined}
aria-checked={singleSelect || multiSelect ? (isChecked ? 'true' : 'false') : undefined}
aria-selected={listSingleSelect || listMultiSelect ? (isChecked ? 'true' : 'false') : undefined}
aria-disabled={ariaDisabled ? 'true' : undefined}
Expand All @@ -254,7 +271,12 @@ export const ListItemTemplate = ({
leadingVisual && leadingVisualSize && `${leadingVisualSize}`
)}
>
{(leadingAction || singleSelect || multiSelect || listSingleSelect || listMultiSelect) && (
{(leadingAction ||
singleSelect ||
multiSelect ||
listSingleSelect ||
listMultiSelect ||
collapsibleLeading) && (
<span className="ActionList-item-action ActionList-item-action--leading">
{singleSelect ||
(listSingleSelect && (
Expand Down Expand Up @@ -290,6 +312,20 @@ export const ListItemTemplate = ({
/>
</svg>
))}
{collapsibleLeading && (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
width="16"
height="16"
className="ActionList-item-collapseIcon"
>
<path
fill-rule="evenodd"
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"
></path>
</svg>
)}
{leadingAction}
</span>
)}
Expand Down Expand Up @@ -346,7 +382,12 @@ export const ListItemTemplate = ({
leadingVisual && leadingVisualSize && `${leadingVisualSize}`
)}
>
{(leadingAction || singleSelect || multiSelect || listSingleSelect || listMultiSelect) && (
{(leadingAction ||
singleSelect ||
multiSelect ||
listSingleSelect ||
listMultiSelect ||
collapsibleLeading) && (
<span className="ActionList-item-action ActionList-item-action--leading">
{(singleSelect || listSingleSelect) && (
<svg
Expand Down Expand Up @@ -380,6 +421,20 @@ export const ListItemTemplate = ({
/>
</svg>
)}
{collapsibleLeading && (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
width="16"
height="16"
className="ActionList-item-collapseIcon"
>
<path
fill-rule="evenodd"
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"
></path>
</svg>
)}
{leadingAction}
</span>
)}
Expand Down
91 changes: 91 additions & 0 deletions docs/src/stories/components/ActionList/ActionListPatterns.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ NavWithSubItems.args = {
listSemantic
collapsible
containsSubItem
containsActiveSubItem
text="Nav Item"
children={
<ListTemplate
Expand All @@ -58,6 +59,51 @@ NavWithSubItems.decorators = [
)
]

export const NavWithNoActiveSubItems = ListTemplate.bind({})
NavWithNoActiveSubItems.storyName = '[Nav] Links + nested collapsible group w/ no active children'
NavWithNoActiveSubItems.args = {
...ListTemplate.args,
...ListItemTemplate.args,
role: undefined,
ariaLabel: 'Main menu description',
showDividers: false,
children: (
<>
<ListItemTemplate text="Nav Item" href="/" listSemantic />
<ListItemTemplate text="Nav Item" href="/" listSemantic />
<ListItemTemplate text="Nav Item" href="/" listSemantic />
<ListItemTemplate
listSemantic
collapsible
containsSubItem
text="Nav Item"
children={
<ListTemplate
subGroup
ariaLabel="Sub nav description"
children={
<>
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic />
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic />
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic />
</>
}
/>
}
/>
<ListItemTemplate text="Nav Item" href="/" listSemantic />
<ListItemTemplate text="Nav Item" href="/" listSemantic />
</>
)
}
NavWithNoActiveSubItems.decorators = [
Story => (
<nav>
<Story />
</nav>
)
]

export const NavWithSubItemsLeadingVisual16px = ListTemplate.bind({})
NavWithSubItemsLeadingVisual16px.storyName = '[Nav] Links + nested collapsible group leadingVisual 16px'
NavWithSubItemsLeadingVisual16px.args = {
Expand Down Expand Up @@ -92,6 +138,7 @@ NavWithSubItemsLeadingVisual16px.args = {
<ListItemTemplate
listSemantic
containsSubItem
containsActiveSubItem
collapsible
text="Nav Item"
href="/"
Expand Down Expand Up @@ -177,6 +224,7 @@ NavWithSubItemsLeadingVisual20px.args = {
<ListItemTemplate
listSemantic
containsSubItem
containsActiveSubItem
text="Nav Item"
href="/"
leadingVisualSize="ActionList-content--visual20"
Expand Down Expand Up @@ -261,6 +309,7 @@ NavWithSubItemsLeadingVisual24px.args = {
<ListItemTemplate
listSemantic
containsSubItem
containsActiveSubItem
text="Nav Item"
href="/"
leadingVisualSize="ActionList-content--visual24"
Expand Down Expand Up @@ -389,6 +438,7 @@ MenuWithSectionDivider.args = {
<DividerTemplate title="Section DividerTemplate (subtle)" id="some-unique-id" />
<ListItemTemplate
containsSubItem
containsActiveSubItem
children={
<ListTemplate
ariaLabelledBy="some-unique-id"
Expand Down Expand Up @@ -616,6 +666,7 @@ NavWithSubItemsLeadingVisual16pxSubSections.args = {
<ListItemTemplate
listSemantic
containsSubItem
containsActiveSubItem
text="Moderation options"
// href="/"
collapsible
Expand All @@ -626,6 +677,7 @@ NavWithSubItemsLeadingVisual16pxSubSections.args = {
children={
<ListTemplate
containsSubItem
containsActiveSubItem
subGroup
ariaLabel="Sub nav descrioption"
children={
Expand Down Expand Up @@ -725,3 +777,42 @@ NavWithSubItemsLeadingVisual16pxSubSections.decorators = [
</nav>
)
]

export const ActionListFullBleed = ListTemplate.bind({})
ActionListFullBleed.storyName = '[List] Full bleed Action List inside box'
ActionListFullBleed.args = {
...ListTemplate.args,
...ListItemTemplate.args,
role: undefined,
ariaLabel: 'Main menu description',
showDividers: false,
listPadding: 'ActionList--full',
children: (
<>
<ListItemTemplate text="Nav Item" href="/" listSemantic />
<ListItemTemplate text="Nav Item" href="/" listSemantic />
<ListItemTemplate text="Nav Item" href="/" listSemantic />
<ListItemTemplate
listSemantic
collapsible
containsSubItem
text="Nav Item"
children={
<ListTemplate
subGroup
ariaLabel="Sub nav description"
children={
<>
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic ariaCurrent="page" />
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic />
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic />
</>
}
/>
}
/>
<ListItemTemplate text="Nav Item" href="/" listSemantic />
<ListItemTemplate text="Nav Item" href="/" listSemantic />
</>
)
}
Loading