mirror of
https://github.com/primer/css.git
synced 2024-12-23 14:13:14 +03:00
Actionlist tree-view CSS (#1803)
* collapse state updates * inset variant * pseudo, you fine as you are * tree view pattern draft * tree view structure * Stylelint auto-fixes * trying tree roles * vertical connector progress * inline css var for spacing logic * refactor tree story * cleanup, lint * add aria roles * Create healthy-monkeys-complain.md * lint * lil change to trigger cli * spacing adjustments * move var * linty fresh * stuck in a stylelint loop * fix var syntax * one last try for today * fix var * test moving stylelint disable Co-authored-by: Actions Auto Build <actions@github.com> Co-authored-by: Jon Rohan <yes@jonrohan.codes>
This commit is contained in:
Katie Langerman
GitHub
parent
41b409126d
commit
c46fe9186e
6
.changeset/healthy-monkeys-complain.md
Normal file
6
.changeset/healthy-monkeys-complain.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
"@primer/css": patch
|
||||
---
|
||||
|
||||
- Adds ActionList tree-view specific CSS
|
||||
- Minor bug fixes for ActionList default
|
||||
@ -9,7 +9,7 @@
|
||||
|
||||
.theme-wrap {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
@ -29,6 +29,18 @@ export default {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
variant: {
|
||||
options: [0, 1], // iterator
|
||||
mapping: [null, 'ActionList--tree'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
labels: ['default', 'tree-view']
|
||||
},
|
||||
description: 'Specifies variants for different types of lists',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
ariaLabel: {
|
||||
name: 'ariaLabel',
|
||||
type: 'string',
|
||||
@ -96,14 +108,16 @@ export const ListTemplate = ({
|
||||
ariaLabelledBy,
|
||||
subGroup,
|
||||
listboxMultiSelect,
|
||||
listPadding
|
||||
listPadding,
|
||||
variant
|
||||
}) => (
|
||||
<ul
|
||||
className={clsx(
|
||||
'ActionList',
|
||||
showDividers && 'ActionList--divided',
|
||||
subGroup && 'ActionList--subGroup',
|
||||
listPadding && `${listPadding}`
|
||||
listPadding && `${listPadding}`,
|
||||
variant && `${variant}`
|
||||
)}
|
||||
role={role}
|
||||
aria-label={ariaLabel && ariaLabel}
|
||||
@ -120,9 +134,10 @@ Playground.args = {
|
||||
subGroup: false,
|
||||
showDividers: false,
|
||||
listboxMultiSelect: false,
|
||||
listPadding: '',
|
||||
listPadding: 0,
|
||||
ariaLabelledBy: '',
|
||||
groupId: '',
|
||||
variant: 0,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Action list item" />
|
||||
|
||||
@ -51,6 +51,13 @@ export default {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
truncateItem: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
containsActiveSubItem: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
@ -188,12 +195,57 @@ export default {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
treeitem: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
ariaDisabled: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
ariaLevel: {
|
||||
name: 'ariaLevel',
|
||||
type: 'string',
|
||||
description: 'number - nested subgroup',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
ariaSetSize: {
|
||||
name: 'ariaSetSize',
|
||||
type: 'string',
|
||||
description:
|
||||
'Defines the number of treeitem elements in the set of treeitem elements that are in the same branch and at the same level within the hierarchy',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
ariaPosInset: {
|
||||
name: 'ariaPosInset',
|
||||
type: 'string',
|
||||
description:
|
||||
'Defines the position of the element within the set of other treeitem elements that are in the same branch and at the same level within the hierarchy.',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
fontSize: {
|
||||
options: [0, 1], // iterator
|
||||
mapping: ['', 'ActionList-content--fontSmall'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
labels: ['default', 'small']
|
||||
},
|
||||
description: 'Used to adjust font-size for subgroup items',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -223,10 +275,19 @@ export const ListItemTemplate = ({
|
||||
listSemantic,
|
||||
ariaDisabled,
|
||||
containsActiveSubItem,
|
||||
collapsibleLeading
|
||||
collapsibleLeading,
|
||||
truncateItem,
|
||||
ariaLevel,
|
||||
fontSize,
|
||||
treeitem,
|
||||
ariaSetSize,
|
||||
ariaPosInset
|
||||
}) => {
|
||||
const [isCollapsed, itemIsCollapsed] = useToggle()
|
||||
const [isChecked, itemIsChecked] = useToggle()
|
||||
const itemStyle = {
|
||||
'--ActionList-tree-depth': `${ariaLevel}`
|
||||
}
|
||||
return (
|
||||
<li
|
||||
className={clsx(
|
||||
@ -237,6 +298,10 @@ export const ListItemTemplate = ({
|
||||
containsActiveSubItem && `ActionList-item--hasActiveSubItem`,
|
||||
variant && `${variant}`
|
||||
)}
|
||||
aria-level={ariaLevel ? `${ariaLevel}` : undefined}
|
||||
aria-setsize={ariaSetSize ? `${ariaSetSize}` : undefined}
|
||||
aria-posinset={ariaPosInset ? `${ariaPosInset}` : undefined}
|
||||
style={itemStyle}
|
||||
onClick={collapsible || collapsibleLeading ? itemIsCollapsed : itemIsChecked}
|
||||
role={
|
||||
singleSelect
|
||||
@ -249,6 +314,8 @@ export const ListItemTemplate = ({
|
||||
? undefined
|
||||
: href
|
||||
? 'none'
|
||||
: treeitem
|
||||
? 'treeitem'
|
||||
: undefined
|
||||
}
|
||||
id={id}
|
||||
@ -262,11 +329,14 @@ export const ListItemTemplate = ({
|
||||
<>
|
||||
<a
|
||||
href={href}
|
||||
role={href && !listSemantic ? 'menuitem' : undefined}
|
||||
role={
|
||||
href && !listSemantic && !treeitem ? 'menuitem' : undefined || (href && treeitem) ? 'treeitem' : undefined
|
||||
}
|
||||
aria-current={ariaCurrent}
|
||||
className={clsx(
|
||||
text && 'ActionList-content',
|
||||
size && `${size}`,
|
||||
fontSize && `${fontSize}`,
|
||||
(leadingVisual || trailingVisual) && description && 'ActionList-content--blockDescription',
|
||||
leadingVisual && leadingVisualSize && `${leadingVisualSize}`
|
||||
)}
|
||||
@ -337,11 +407,17 @@ export const ListItemTemplate = ({
|
||||
)}
|
||||
{description && (
|
||||
<span className={clsx('ActionList-item-descriptionWrap', `${descriptionVariant}`)}>
|
||||
<span className="ActionList-item-label">{text}</span>
|
||||
<span className={clsx('ActionList-item-label', truncateItem && 'ActionList-item-label--truncate')}>
|
||||
{text}
|
||||
</span>
|
||||
<span className="ActionList-item-description">{description}</span>
|
||||
</span>
|
||||
)}
|
||||
{!description && text && <span className="ActionList-item-label">{text}</span>}
|
||||
{!description && text && (
|
||||
<span className={clsx('ActionList-item-label', truncateItem && 'ActionList-item-label--truncate')}>
|
||||
{text}
|
||||
</span>
|
||||
)}
|
||||
{trailingVisual && (
|
||||
<span
|
||||
className="ActionList-item-visual ActionList-item-visual--trailing"
|
||||
@ -378,6 +454,7 @@ export const ListItemTemplate = ({
|
||||
className={clsx(
|
||||
text && 'ActionList-content',
|
||||
size && `${size}`,
|
||||
fontSize && `${fontSize}`,
|
||||
(leadingVisual || trailingVisual) && description && 'ActionList-content--blockDescription',
|
||||
leadingVisual && leadingVisualSize && `${leadingVisualSize}`
|
||||
)}
|
||||
@ -446,11 +523,17 @@ export const ListItemTemplate = ({
|
||||
)}
|
||||
{description && (
|
||||
<span className={clsx('ActionList-item-descriptionWrap', `${descriptionVariant}`)}>
|
||||
<span className="ActionList-item-label">{text}</span>
|
||||
<span className={clsx('ActionList-item-label', truncateItem && 'ActionList-item-label--truncate')}>
|
||||
{text}
|
||||
</span>
|
||||
<span className="ActionList-item-description">{description}</span>
|
||||
</span>
|
||||
)}
|
||||
{!description && text && <span className="ActionList-item-label">{text}</span>}
|
||||
{!description && text && (
|
||||
<span className={clsx('ActionList-item-label', truncateItem && 'ActionList-item-label--truncate')}>
|
||||
{text}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{trailingVisual && (
|
||||
<span
|
||||
@ -496,5 +579,6 @@ Playground.decorators = [
|
||||
)
|
||||
]
|
||||
Playground.args = {
|
||||
id: null
|
||||
id: null,
|
||||
truncateItem: false
|
||||
}
|
||||
|
||||
@ -548,3 +548,42 @@ DividerTextFilled.args = {
|
||||
id: 'some-id',
|
||||
variant: 'ActionList-sectionDivider--filled'
|
||||
}
|
||||
|
||||
export const TruncateText = ListItemTemplate.bind({})
|
||||
TruncateText.storyName = 'Truncate text'
|
||||
TruncateText.args = {
|
||||
...ListItemTemplate.args,
|
||||
truncateItem: true,
|
||||
text: 'Item with trailing visual',
|
||||
trailingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"
|
||||
></path>
|
||||
</svg>`,
|
||||
leadingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const WrapText = ListItemTemplate.bind({})
|
||||
WrapText.storyName = 'Wrap text'
|
||||
WrapText.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'This is a very long string of text that will wrap to another line on smaller screens',
|
||||
trailingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"
|
||||
></path>
|
||||
</svg>`,
|
||||
leadingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
@ -25,10 +25,11 @@ NavWithSubItems.args = {
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
collapsible
|
||||
containsSubItem
|
||||
@ -40,9 +41,9 @@ NavWithSubItems.args = {
|
||||
ariaLabel="Sub nav description"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" listSemantic />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic ariaLevel="2" />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" listSemantic ariaLevel="2" />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemanticariaLevel="2" />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
@ -69,9 +70,9 @@ NavWithNoActiveSubItems.args = {
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
<ListItemTemplate
|
||||
listSemantic
|
||||
collapsible
|
||||
@ -83,16 +84,16 @@ NavWithNoActiveSubItems.args = {
|
||||
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 subItem text="Sub Nav Item" href="/" listSemantic ariaLevel="2" />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic ariaLevel="2" />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic ariaLevel="2" />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -115,6 +116,7 @@ NavWithSubItemsLeadingVisual16px.args = {
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
@ -122,6 +124,7 @@ NavWithSubItemsLeadingVisual16px.args = {
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
@ -129,6 +132,7 @@ NavWithSubItemsLeadingVisual16px.args = {
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
@ -136,6 +140,7 @@ NavWithSubItemsLeadingVisual16px.args = {
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
containsSubItem
|
||||
containsActiveSubItem
|
||||
@ -150,22 +155,16 @@ NavWithSubItemsLeadingVisual16px.args = {
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" listSemantic />
|
||||
<ListItemTemplate
|
||||
listSemantic
|
||||
subItem
|
||||
text="Sub Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic ariaLevel="2" />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" listSemantic ariaLevel="2" />
|
||||
<ListItemTemplate listSemantic ariaLevel="2" subItem text="Sub Nav Item" href="/" />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
@ -173,6 +172,7 @@ NavWithSubItemsLeadingVisual16px.args = {
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
@ -201,6 +201,7 @@ NavWithSubItemsLeadingVisual20px.args = {
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
@ -208,6 +209,7 @@ NavWithSubItemsLeadingVisual20px.args = {
|
||||
leadingVisual={`<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" style="border-radius: 50%" />`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
@ -215,6 +217,7 @@ NavWithSubItemsLeadingVisual20px.args = {
|
||||
leadingVisual={`<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" style="border-radius: 50%" />`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
@ -222,6 +225,7 @@ NavWithSubItemsLeadingVisual20px.args = {
|
||||
leadingVisual={`<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" style="border-radius: 50%" />`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
containsSubItem
|
||||
containsActiveSubItem
|
||||
@ -235,9 +239,10 @@ NavWithSubItemsLeadingVisual20px.args = {
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" listSemantic />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic ariaLevel="2" />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" listSemantic ariaLevel="2" />
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
listSemantic
|
||||
subItem
|
||||
text="Nav Item"
|
||||
@ -251,6 +256,7 @@ NavWithSubItemsLeadingVisual20px.args = {
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
@ -258,6 +264,7 @@ NavWithSubItemsLeadingVisual20px.args = {
|
||||
leadingVisual={`<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" style="border-radius: 50%" />`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
@ -286,6 +293,7 @@ NavWithSubItemsLeadingVisual24px.args = {
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
@ -293,6 +301,7 @@ NavWithSubItemsLeadingVisual24px.args = {
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.5 1.25a.75.75 0 00-1.5 0v8.69L6.447 5.385a.75.75 0 10-1.061 1.06L9.94 11H1.25a.75.75 0 000 1.5h8.69l-4.554 4.553a.75.75 0 001.06 1.061L11 13.561v8.689a.75.75 0 001.5 0v-8.69l4.553 4.554a.75.75 0 001.061-1.06L13.561 12.5h8.689a.75.75 0 000-1.5h-8.69l4.554-4.553a.75.75 0 10-1.06-1.061L12.5 9.939V1.25z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
@ -300,6 +309,7 @@ NavWithSubItemsLeadingVisual24px.args = {
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.5 1.25a.75.75 0 00-1.5 0v8.69L6.447 5.385a.75.75 0 10-1.061 1.06L9.94 11H1.25a.75.75 0 000 1.5h8.69l-4.554 4.553a.75.75 0 001.06 1.061L11 13.561v8.689a.75.75 0 001.5 0v-8.69l4.553 4.554a.75.75 0 001.061-1.06L13.561 12.5h8.689a.75.75 0 000-1.5h-8.69l4.554-4.553a.75.75 0 10-1.06-1.061L12.5 9.939V1.25z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
@ -307,6 +317,7 @@ NavWithSubItemsLeadingVisual24px.args = {
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.5 1.25a.75.75 0 00-1.5 0v8.69L6.447 5.385a.75.75 0 10-1.061 1.06L9.94 11H1.25a.75.75 0 000 1.5h8.69l-4.554 4.553a.75.75 0 001.06 1.061L11 13.561v8.689a.75.75 0 001.5 0v-8.69l4.553 4.554a.75.75 0 001.061-1.06L13.561 12.5h8.689a.75.75 0 000-1.5h-8.69l4.554-4.553a.75.75 0 10-1.06-1.061L12.5 9.939V1.25z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
containsSubItem
|
||||
containsActiveSubItem
|
||||
@ -320,22 +331,16 @@ NavWithSubItemsLeadingVisual24px.args = {
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" listSemantic />
|
||||
<ListItemTemplate
|
||||
listSemantic
|
||||
subItem
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual24"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.5 1.25a.75.75 0 00-1.5 0v8.69L6.447 5.385a.75.75 0 10-1.061 1.06L9.94 11H1.25a.75.75 0 000 1.5h8.69l-4.554 4.553a.75.75 0 001.06 1.061L11 13.561v8.689a.75.75 0 001.5 0v-8.69l4.553 4.554a.75.75 0 001.061-1.06L13.561 12.5h8.689a.75.75 0 000-1.5h-8.69l4.554-4.553a.75.75 0 10-1.06-1.061L12.5 9.939V1.25z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic ariaLevel="2" />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" listSemantic ariaLevel="2" />
|
||||
<ListItemTemplate ariaLevel="2" listSemantic subItem text="Nav Item" href="/" />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
@ -343,6 +348,7 @@ NavWithSubItemsLeadingVisual24px.args = {
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.5 1.25a.75.75 0 00-1.5 0v8.69L6.447 5.385a.75.75 0 10-1.061 1.06L9.94 11H1.25a.75.75 0 000 1.5h8.69l-4.554 4.553a.75.75 0 001.06 1.061L11 13.561v8.689a.75.75 0 001.5 0v-8.69l4.553 4.554a.75.75 0 001.061-1.06L13.561 12.5h8.689a.75.75 0 000-1.5h-8.69l4.554-4.553a.75.75 0 10-1.06-1.061L12.5 9.939V1.25z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
@ -371,18 +377,21 @@ MenuWithDivider.args = {
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
@ -390,12 +399,14 @@ MenuWithDivider.args = {
|
||||
/>
|
||||
<DividerTemplate />
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
@ -432,11 +443,12 @@ MenuWithSectionDivider.args = {
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Nav Item" href="/" />
|
||||
<ListItemTemplate text="Nav Item" href="/" />
|
||||
<ListItemTemplate text="Nav Item" href="/" />
|
||||
<ListItemTemplate text="Nav Item" href="/" ariaLevel="1" />
|
||||
<ListItemTemplate text="Nav Item" href="/" ariaLevel="1" />
|
||||
<ListItemTemplate text="Nav Item" href="/" ariaLevel="1" />
|
||||
<DividerTemplate title="Section DividerTemplate (subtle)" id="some-unique-id" />
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
containsSubItem
|
||||
containsActiveSubItem
|
||||
children={
|
||||
@ -445,9 +457,9 @@ MenuWithSectionDivider.args = {
|
||||
role="menu"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate text="Nav Item" href="/" />
|
||||
<ListItemTemplate text="Nav Item" href="/" />
|
||||
<ListItemTemplate text="Nav Item" href="/" variant="ActionList-item--danger" />
|
||||
<ListItemTemplate text="Nav Item" href="/" ariaLevel="2" />
|
||||
<ListItemTemplate text="Nav Item" href="/" ariaLevel="2" />
|
||||
<ListItemTemplate text="Nav Item" href="/" variant="ActionList-item--danger" ariaLevel="2" />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
@ -484,11 +496,11 @@ MenuSingleSelect.args = {
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Option label" singleSelect />
|
||||
<ListItemTemplate text="Option label" singleSelect />
|
||||
<ListItemTemplate text="Option label" singleSelect />
|
||||
<ListItemTemplate text="Option label" singleSelect />
|
||||
<ListItemTemplate text="Option label" singleSelect />
|
||||
<ListItemTemplate text="Option label" singleSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" singleSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" singleSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" singleSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" singleSelect ariaLevel="1" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -520,11 +532,11 @@ MenuMultiSelect.args = {
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Option label" multiSelect />
|
||||
<ListItemTemplate text="Option label" multiSelect />
|
||||
<ListItemTemplate text="Option label" multiSelect />
|
||||
<ListItemTemplate text="Option label" multiSelect />
|
||||
<ListItemTemplate text="Option label" multiSelect />
|
||||
<ListItemTemplate text="Option label" multiSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" multiSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" multiSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" multiSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" multiSelect ariaLevel="1" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -557,11 +569,11 @@ ListSingleSelect.args = {
|
||||
listboxMultiSelect: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Option label" listSingleSelect />
|
||||
<ListItemTemplate text="Option label" listSingleSelect />
|
||||
<ListItemTemplate text="Option label" listSingleSelect />
|
||||
<ListItemTemplate text="Option label" listSingleSelect />
|
||||
<ListItemTemplate text="Option label" listSingleSelect />
|
||||
<ListItemTemplate text="Option label" listSingleSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" listSingleSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" listSingleSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" listSingleSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" listSingleSelect ariaLevel="1" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -577,15 +589,17 @@ ListMultiSelect.args = {
|
||||
listboxMultiSelect: true,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Option label" listMultiSelect />
|
||||
<ListItemTemplate text="Option label" listMultiSelect />
|
||||
<ListItemTemplate text="Option label" listMultiSelect />
|
||||
<ListItemTemplate text="Option label" listMultiSelect />
|
||||
<ListItemTemplate text="Option label" listMultiSelect />
|
||||
<ListItemTemplate text="Option label" listMultiSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" listMultiSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" listMultiSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" listMultiSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" listMultiSelect ariaLevel="1" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const leadingVisualSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg>`
|
||||
|
||||
export const List = ListTemplate.bind({})
|
||||
List.storyName = '[List] Group of links'
|
||||
List.args = {
|
||||
@ -598,24 +612,28 @@ List.args = {
|
||||
<>
|
||||
<DividerTemplate title="Details" />
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
href="/"
|
||||
text="github.com/primer"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
href="/"
|
||||
text="MIT License"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8.75.75a.75.75 0 00-1.5 0V2h-.984c-.305 0-.604.08-.869.23l-1.288.737A.25.25 0 013.984 3H1.75a.75.75 0 000 1.5h.428L.066 9.192a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.514 3.514 0 00.686.45A4.492 4.492 0 003 11c.88 0 1.556-.22 2.023-.454a3.515 3.515 0 00.686-.45l.045-.04.016-.015.006-.006.002-.002.001-.002L5.25 9.5l.53.53a.75.75 0 00.154-.838L3.822 4.5h.162c.305 0 .604-.08.869-.23l1.289-.737a.25.25 0 01.124-.033h.984V13h-2.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-2.5V3.5h.984a.25.25 0 01.124.033l1.29.736c.264.152.563.231.868.231h.162l-2.112 4.692a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.517 3.517 0 00.686.45A4.492 4.492 0 0013 11c.88 0 1.556-.22 2.023-.454a3.512 3.512 0 00.686-.45l.045-.04.01-.01.006-.005.006-.006.002-.002.001-.002-.529-.531.53.53a.75.75 0 00.154-.838L13.823 4.5h.427a.75.75 0 000-1.5h-2.234a.25.25 0 01-.124-.033l-1.29-.736A1.75 1.75 0 009.735 2H8.75V.75zM1.695 9.227c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327l-1.305 2.9zm10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327l-1.305 2.9z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
href="/"
|
||||
text="256 stars"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
href="/"
|
||||
text="3 forks"
|
||||
@ -637,6 +655,7 @@ NavWithSubItemsLeadingVisual16pxSubSections.args = {
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="General"
|
||||
href="/"
|
||||
@ -645,6 +664,7 @@ NavWithSubItemsLeadingVisual16pxSubSections.args = {
|
||||
/>
|
||||
<DividerTemplate title="Access" id="group-id-1" />
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
containsSubItem
|
||||
children={
|
||||
@ -655,6 +675,7 @@ NavWithSubItemsLeadingVisual16pxSubSections.args = {
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
listSemantic
|
||||
text="Collaborators"
|
||||
href="/"
|
||||
@ -664,6 +685,7 @@ NavWithSubItemsLeadingVisual16pxSubSections.args = {
|
||||
</svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
listSemantic
|
||||
containsSubItem
|
||||
containsActiveSubItem
|
||||
@ -683,15 +705,12 @@ NavWithSubItemsLeadingVisual16pxSubSections.args = {
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="3"
|
||||
listSemantic
|
||||
subItem
|
||||
text="Interaction limits"
|
||||
href="/"
|
||||
ariaCurrent="page"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-report">
|
||||
<path fill-rule="evenodd" d="M1.75 1.5a.25.25 0 00-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 01.75.75v2.19l2.72-2.72a.75.75 0 01.53-.22h6.5a.25.25 0 00.25-.25v-9.5a.25.25 0 00-.25-.25H1.75zM0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0114.25 13H8.06l-2.573 2.573A1.457 1.457 0 013 14.543V13H1.75A1.75 1.75 0 010 11.25v-9.5zM9 9a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"></path>
|
||||
</svg>`}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
@ -699,6 +718,7 @@ NavWithSubItemsLeadingVisual16pxSubSections.args = {
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
text="Repository roles"
|
||||
listSemantic
|
||||
href="/"
|
||||
@ -714,6 +734,7 @@ NavWithSubItemsLeadingVisual16pxSubSections.args = {
|
||||
/>
|
||||
<DividerTemplate title="Code & operations" id="group-id-2" />
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
containsSubItem
|
||||
children={
|
||||
@ -724,6 +745,7 @@ NavWithSubItemsLeadingVisual16pxSubSections.args = {
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
listSemantic
|
||||
text="Webhooks"
|
||||
href="/"
|
||||
@ -733,6 +755,7 @@ NavWithSubItemsLeadingVisual16pxSubSections.args = {
|
||||
</svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
listSemantic
|
||||
text="Environments"
|
||||
href="/"
|
||||
@ -742,6 +765,7 @@ NavWithSubItemsLeadingVisual16pxSubSections.args = {
|
||||
</svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
listSemantic
|
||||
text="Pages"
|
||||
href="/"
|
||||
@ -751,6 +775,7 @@ NavWithSubItemsLeadingVisual16pxSubSections.args = {
|
||||
</svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
listSemantic
|
||||
text="Unpublish GitHub Pages"
|
||||
href="/"
|
||||
@ -789,10 +814,11 @@ ActionListFullBleed.args = {
|
||||
listPadding: 'ActionList--full',
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
collapsible
|
||||
containsSubItem
|
||||
@ -803,16 +829,16 @@ ActionListFullBleed.args = {
|
||||
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 subItem text="Sub Nav Item" href="/" listSemantic ariaCurrent="page" ariaLevel="2" />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic ariaLevel="2" />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic ariaLevel="2" />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -0,0 +1,502 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {ListTemplate} from './ActionList.stories'
|
||||
import {ListItemTemplate} from './ActionListItem.stories'
|
||||
|
||||
export default {
|
||||
title: 'Components/ActionList/TreeView',
|
||||
excludeStories: ['ActionListTreeViewTemplate'],
|
||||
layout: 'padded',
|
||||
argTypes: {
|
||||
showGroupIcon: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'show subgroup leading icon',
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
showSubItemIcon: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'show subgroup item leading icon',
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const folder = `<svg aria-hidden="true" role="img" class="octicon octicon-file-directory-fill" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path fill-rule="evenodd" d="M2 4.75C2 3.784 2.784 3 3.75 3h4.971c.58 0 1.12.286 1.447.765l1.404 2.063a.25.25 0 00.207.11h8.471c.966 0 1.75.783 1.75 1.75V19.25A1.75 1.75 0 0120.25 21H3.75A1.75 1.75 0 012 19.25V4.75z"></path></svg>`
|
||||
|
||||
const file = `<svg aria-hidden="true" role="img" class="octicon octicon-file" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path></svg>`
|
||||
|
||||
const trailingVisual = `<svg aria-hidden="true" role="img" class="color-fg-attention" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path fill-rule="evenodd" d="M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z"></path></svg>`
|
||||
|
||||
export const ActionListTreeViewTemplate = ({showGroupIcon, showSubItemIcon}) => (
|
||||
<ListTemplate ariaLabel="Some description" role="tree" variant="ActionList--tree">
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
ariaSetSize="2"
|
||||
ariaPosInset="1"
|
||||
treeitem
|
||||
containsSubItem
|
||||
text="pages"
|
||||
collapsibleLeading
|
||||
leadingVisual={showGroupIcon && folder}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
treeitem
|
||||
ariaLevel="2"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="2"
|
||||
subItem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
treeitem
|
||||
ariaLevel="2"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="3"
|
||||
truncateItem
|
||||
subItem
|
||||
text="filewithreallylongnamewhoaaaaaaohmy.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
ariaSetSize="2"
|
||||
ariaPosInset="2"
|
||||
treeitem
|
||||
containsSubItem
|
||||
text="public"
|
||||
collapsibleLeading
|
||||
leadingVisual={showGroupIcon && folder}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
ariaSetSize="2"
|
||||
ariaPosInset="1"
|
||||
treeitem
|
||||
subItem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
ariaSetSize="2"
|
||||
ariaPosInset="2"
|
||||
treeitem
|
||||
subItem
|
||||
containsSubItem
|
||||
collapsibleLeading
|
||||
text="fonts"
|
||||
href="/"
|
||||
leadingVisual={showGroupIcon && folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="3"
|
||||
ariaSetSize="2"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
containsSubItem
|
||||
collapsibleLeading
|
||||
text="Inter"
|
||||
href="/"
|
||||
leadingVisual={showGroupIcon && folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="4"
|
||||
ariaSetSize="4"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="4"
|
||||
ariaSetSize="4"
|
||||
ariaPosInset="2"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="4"
|
||||
ariaSetSize="4"
|
||||
ariaPosInset="3"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="4"
|
||||
ariaSetSize="4"
|
||||
ariaPosInset="4"
|
||||
treeitem
|
||||
subItem
|
||||
containsSubItem
|
||||
collapsibleLeading
|
||||
text="fonts"
|
||||
href="/"
|
||||
leadingVisual={showGroupIcon && folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="5"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
containsSubItem
|
||||
collapsibleLeading
|
||||
text="Inter"
|
||||
href="/"
|
||||
leadingVisual={showGroupIcon && folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="6"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="6"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="2"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="6"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="3"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="5"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="2"
|
||||
subItem
|
||||
treeitem
|
||||
text="filex.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="5"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="3"
|
||||
treeitem
|
||||
subItem
|
||||
containsSubItem
|
||||
treeitem
|
||||
collapsibleLeading
|
||||
text="fonts"
|
||||
href="/"
|
||||
leadingVisual={showGroupIcon && folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="6"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
containsSubItem
|
||||
collapsibleLeading
|
||||
text="Inter"
|
||||
href="/"
|
||||
leadingVisual={showGroupIcon && folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="7"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="7"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="2"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="7"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="3"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="6"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="2"
|
||||
subItem
|
||||
treeitem
|
||||
text="file3.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="6"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="3"
|
||||
treeitem
|
||||
subItem
|
||||
containsSubItem
|
||||
treeitemtreeitem
|
||||
collapsibleLeading
|
||||
text="fonts"
|
||||
href="/"
|
||||
leadingVisual={showGroupIcon && folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="7"
|
||||
ariaSetSize="2"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
containsSubItem
|
||||
collapsibleLeading
|
||||
text="Inter"
|
||||
href="/"
|
||||
leadingVisual={showGroupIcon && folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="8"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="8"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="2"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="8"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="3"
|
||||
subItem
|
||||
treeitemtreeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="3"
|
||||
ariaSetSize="2"
|
||||
ariaPosInset="2"
|
||||
treeitem
|
||||
subItem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
</ListTemplate>
|
||||
)
|
||||
|
||||
// create a "playground" demo page that may set some defaults and allow story to access component controls
|
||||
export const Playground = ActionListTreeViewTemplate.bind({})
|
||||
Playground.args = {
|
||||
showSubItemIcon: true,
|
||||
showGroupIcon: true
|
||||
}
|
||||
@ -113,6 +113,40 @@
|
||||
|
||||
// collapsible item [aria-expanded]
|
||||
|
||||
// nesting (single level)
|
||||
// target items inside expanded subgroups
|
||||
&[aria-expanded] {
|
||||
.ActionList--subGroup {
|
||||
.ActionList-content {
|
||||
padding-left: $spacer-4;
|
||||
}
|
||||
}
|
||||
|
||||
// has 16px leading visual
|
||||
.ActionList-content--visual16 + .ActionList--subGroup {
|
||||
// stylelint-disable-next-line selector-max-compound-selectors, selector-max-specificity
|
||||
.ActionList-content {
|
||||
padding-left: $spacer-5;
|
||||
}
|
||||
}
|
||||
|
||||
// has 20px leading visual
|
||||
.ActionList-content--visual20 + .ActionList--subGroup {
|
||||
// stylelint-disable-next-line selector-max-compound-selectors, selector-max-specificity
|
||||
.ActionList-content {
|
||||
padding-left: $spacer-2 * 4.5; // 36px
|
||||
}
|
||||
}
|
||||
|
||||
// has 24px leading visual
|
||||
.ActionList-content--visual24 + .ActionList--subGroup {
|
||||
// stylelint-disable-next-line selector-max-compound-selectors, selector-max-specificity
|
||||
.ActionList-content {
|
||||
padding-left: $spacer-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-expanded='true'] {
|
||||
.ActionList-item-collapseIcon {
|
||||
transition: transform 120ms linear;
|
||||
@ -314,6 +348,7 @@
|
||||
display: grid;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: $actionList-item-padding-vertical $actionList-item-padding-horizontal;
|
||||
font-size: $body-font-size;
|
||||
font-weight: $font-weight-normal;
|
||||
color: var(--color-fg-default);
|
||||
user-select: none;
|
||||
@ -321,8 +356,8 @@
|
||||
transition: $actionList-item-bg-transition;
|
||||
grid-template-rows: min-content;
|
||||
grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';
|
||||
grid-template-columns: min-content min-content minmax(min-content, auto) min-content min-content;
|
||||
align-items: center;
|
||||
grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;
|
||||
align-items: start;
|
||||
|
||||
// column-gap persists with empty grid-areas, margin applies only when children exist
|
||||
> :not(:last-child) {
|
||||
@ -347,6 +382,10 @@
|
||||
padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
|
||||
}
|
||||
|
||||
&.ActionList-content--fontSmall {
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
// On pointer:coarse (mobile), all list items are large
|
||||
@media (pointer: coarse) {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
@ -440,37 +479,16 @@
|
||||
color: var(--color-fg-default);
|
||||
}
|
||||
|
||||
.ActionList-item-label--truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// nested lists (only supports 1 level currently)
|
||||
// target ActionList-item--subItem for padding-left to maintain :active :after state
|
||||
|
||||
// TODO: remove with PVC implementation
|
||||
.ActionList-item--subItem > .ActionList-content {
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
// no leading visual
|
||||
.ActionList--subGroup {
|
||||
.ActionList-item--subItem {
|
||||
padding-left: $spacer-3;
|
||||
}
|
||||
}
|
||||
|
||||
// has 16px leading visual
|
||||
.ActionList-content--visual16 + .ActionList--subGroup {
|
||||
.ActionList-item--subItem {
|
||||
padding-left: $spacer-4;
|
||||
}
|
||||
}
|
||||
|
||||
// has 20px leading visual
|
||||
.ActionList-content--visual20 + .ActionList--subGroup {
|
||||
.ActionList-item--subItem {
|
||||
padding-left: $spacer-3 * 1.75;
|
||||
}
|
||||
}
|
||||
|
||||
// has 24px leading visual
|
||||
.ActionList-content--visual24 + .ActionList--subGroup {
|
||||
.ActionList-item--subItem {
|
||||
padding-left: $spacer-5;
|
||||
}
|
||||
}
|
||||
|
||||
92
src/actionlist/action-list-tree.scss
Normal file
92
src/actionlist/action-list-tree.scss
Normal file
@ -0,0 +1,92 @@
|
||||
// tree-view variant
|
||||
// renders ActionList with default styling for tree-view
|
||||
// collapse/expand icons presents as leadingActions, rotate 90deg
|
||||
// connecting vertical lines between collapse groups
|
||||
// consistent font-size between nested groups
|
||||
|
||||
@mixin treeConnectingLine($left) {
|
||||
position: absolute;
|
||||
left: $left;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
content: '';
|
||||
background: var(--color-action-list-item-inline-divider);
|
||||
}
|
||||
|
||||
.ActionList--tree {
|
||||
--ActionList-tree-depth: 1;
|
||||
// TODO: remove with PVC implementation
|
||||
.ActionList-item--subItem > .ActionList-content {
|
||||
font-size: $body-font-size;
|
||||
}
|
||||
|
||||
.ActionList-item {
|
||||
// nesting (infinate levels)
|
||||
// target items inside expanded subgroup
|
||||
&[aria-expanded] {
|
||||
.ActionList--subGroup {
|
||||
position: relative;
|
||||
|
||||
// --ActionList-tree-depth is defined as an inline style referencing the aria-level of each item ie: aria-level="2"
|
||||
// stylelint-disable-next-line selector-max-specificity, max-nesting-depth, selector-max-compound-selectors
|
||||
.ActionList-content {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-left: calc(#{$spacer-2} * var(--ActionList-tree-depth));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// tree-view specific collapse icon positioning/animation
|
||||
&[aria-expanded='true'] {
|
||||
.ActionList-item-collapseIcon {
|
||||
transition: transform 120ms linear;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-expanded='false'] {
|
||||
.ActionList-item-collapseIcon {
|
||||
transition: transform 120ms linear;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// expand/collapse group
|
||||
.ActionList-item--hasSubItem {
|
||||
.ActionList-item--subItem:not(.ActionList-item--hasSubItem) {
|
||||
// stylelint-disable-next-line selector-max-specificity, selector-max-compound-selectors
|
||||
.ActionList-content {
|
||||
// increase child padding by targeting content first child span (add to ActionList-content padding, not replace)
|
||||
// creates a slight indent of child items
|
||||
// stylelint-disable-next-line selector-max-specificity, selector-max-type, max-nesting-depth, selector-max-compound-selectors
|
||||
> span:first-child {
|
||||
padding-left: $spacer-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// first subitem
|
||||
> [aria-level='1'].ActionList-item--hasSubItem {
|
||||
> .ActionList--subGroup {
|
||||
// stylelint-disable-next-line selector-max-specificity
|
||||
&::before {
|
||||
@include treeConnectingLine($left: $spacer-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// all other subitems
|
||||
// center connecting line with parent (line is 1px (8px - 1px)
|
||||
.ActionList-item--hasSubItem:not([aria-level='1']) {
|
||||
> .ActionList--subGroup {
|
||||
// stylelint-disable-next-line selector-max-specificity
|
||||
&::before {
|
||||
@include treeConnectingLine(
|
||||
$left: calc(#{$spacer-2} * (var(--ActionList-tree-depth)) + #{$spacer-2 - $border-width})
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
@import '../support/index.scss';
|
||||
@import './action-list-variables.scss';
|
||||
@import './action-list.scss';
|
||||
@import './action-list-tree.scss';
|
||||
@import './action-list-item.scss';
|
||||
@import './action-list-item-divider.scss';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user