diff --git a/docs/content/ActionList.mdx b/docs/content/ActionList.mdx
index e4518d0d151..724f3cb2c31 100644
--- a/docs/content/ActionList.mdx
+++ b/docs/content/ActionList.mdx
@@ -170,7 +170,7 @@ When you want to add links to the List instead of actions, use `ActionList.LinkI
```
-### With groups
+### With headings
```javascript live noinline
const SelectFields = () => {
@@ -196,29 +196,30 @@ const SelectFields = () => {
}
return (
-
-
+ <>
+
+ toggle(option.text)}>
{option.text}
))}
-
-
+
+ toggle(option.text)}>
{option.text}
))}
{hiddenOptions.length === 0 && No hidden fields }
-
-
+
+
)
}
diff --git a/docs/content/ActionMenu.mdx b/docs/content/ActionMenu.mdx
index 26e4e9386b2..9a950ec9e65 100644
--- a/docs/content/ActionMenu.mdx
+++ b/docs/content/ActionMenu.mdx
@@ -110,7 +110,7 @@ You can choose to have a different _anchor_ for the Menu depending on the applic
```
-### With Groups
+### Divided into sections
```jsx live
@@ -118,57 +118,54 @@ You can choose to have a different _anchor_ for the Menu depending on the applic
-
-
-
-
- repo:github/memex,github/github
-
-
-
-
-
-
- Table
-
- Information-dense table optimized for operations across teams
-
-
-
-
-
- Board
- Kanban-style board focused on visual states
-
-
-
-
-
-
- Save sort and filters to current view
-
-
-
-
- Save sort and filters to new view
-
-
-
-
-
-
- View settings
-
-
+
+
+
+ repo:github/memex,github/github
+
+
+
+
+
+
+ Table
+
+ Information-dense table optimized for operations across teams
+
+
+
+
+
+ Board
+ Kanban-style board focused on visual states
+
+
+
+
+
+
+ Save sort and filters to current view
+
+
+
+
+ Save sort and filters to new view
+
+
+
+
+
+
+ View settings
+
diff --git a/generated/components.json b/generated/components.json
index 62af5523183..7e8b2b2cea5 100644
--- a/generated/components.json
+++ b/generated/components.json
@@ -108,7 +108,7 @@
"props": [
{
"name": "children",
- "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Group[]",
+ "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Divider[]",
"defaultValue": "",
"required": true,
"description": ""
@@ -285,48 +285,34 @@
]
},
{
- "name": "ActionList.Group",
+ "name": "ActionList.Heading",
"props": [
{
- "name": "children",
- "type": "ActionList.Item[] | ActionList.LinkItem[]",
- "defaultValue": "",
- "required": true,
+ "name": "variant",
+ "type": "'subtle' | 'filled'",
+ "defaultValue": "subtle",
"description": ""
},
{
"name": "title",
"type": "string",
"defaultValue": "",
- "description": "Title of the group."
+ "required": true,
+ "description": ""
},
{
- "name": "auxiliaryText",
+ "name": "subtitle",
"type": "string",
"defaultValue": "",
- "description": "Secondary text that provides additional information about the group."
- },
- {
- "name": "variant",
- "type": "'filled' | 'subtle'",
- "defaultValue": "'subtle'",
- "description": "`inline` descriptions are positioned beside primary text. `block` descriptions are positioned below primary text."
- },
- {
- "name": "selectionVariant",
- "type": "'single' | 'multiple' | false",
- "defaultValue": "",
- "description": "Set `selectionVariant` at the group level."
- },
- {
- "name": "role",
- "type": "AriaRole",
- "defaultValue": "",
- "description": "ARIA role describing the function of the list inside the group. `listbox` and `menu` are a common values."
+ "required": false,
+ "description": ""
},
{
- "name": "sx",
- "type": "SystemStyleObject"
+ "name": "headingLevel",
+ "type": "'1' | '2' | '3' | '4' | '5' | '6'",
+ "defaultValue": "3",
+ "required": false,
+ "description": ""
}
]
}
diff --git a/src/ActionList/ActionList.docs.json b/src/ActionList/ActionList.docs.json
index 392c6db523a..18610f7f622 100644
--- a/src/ActionList/ActionList.docs.json
+++ b/src/ActionList/ActionList.docs.json
@@ -7,7 +7,7 @@
"props": [
{
"name": "children",
- "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Group[]",
+ "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Divider[]",
"defaultValue": "",
"required": true,
"description": ""
@@ -184,50 +184,36 @@
]
},
{
- "name": "ActionList.Group",
+ "name": "ActionList.Heading",
"props": [
{
- "name": "children",
- "type": "ActionList.Item[] | ActionList.LinkItem[]",
- "defaultValue": "",
- "required": true,
+ "name": "variant",
+ "type": "'subtle' | 'filled'",
+ "defaultValue": "subtle",
"description": ""
},
{
"name": "title",
"type": "string",
"defaultValue": "",
- "description": "Title of the group."
+ "required": true,
+ "description": ""
},
{
- "name": "auxiliaryText",
+ "name": "subtitle",
"type": "string",
"defaultValue": "",
- "description": "Secondary text that provides additional information about the group."
- },
- {
- "name": "variant",
- "type": "'filled' | 'subtle'",
- "defaultValue": "'subtle'",
- "description": "`inline` descriptions are positioned beside primary text. `block` descriptions are positioned below primary text."
- },
- {
- "name": "selectionVariant",
- "type": "'single' | 'multiple' | false",
- "defaultValue": "",
- "description": "Set `selectionVariant` at the group level."
- },
- {
- "name": "role",
- "type": "AriaRole",
- "defaultValue": "",
- "description": "ARIA role describing the function of the list inside the group. `listbox` and `menu` are a common values."
+ "required": false,
+ "description": ""
},
{
- "name": "sx",
- "type": "SystemStyleObject"
+ "name": "headingLevel",
+ "type": "'1' | '2' | '3' | '4' | '5' | '6'",
+ "defaultValue": "3",
+ "required": false,
+ "description": ""
}
]
}
]
-}
\ No newline at end of file
+}
diff --git a/src/ActionList/ActionList.examples.stories.tsx b/src/ActionList/ActionList.examples.stories.tsx
index ef5c79a08aa..654e4dcf5ee 100644
--- a/src/ActionList/ActionList.examples.stories.tsx
+++ b/src/ActionList/ActionList.examples.stories.tsx
@@ -132,24 +132,25 @@ export function MixedSelection(): JSX.Element {
List with mixed selection
- In this list, there is a ActionList.Group with single selection for picking one option, followed by a Item that
- is an action. This pattern appears inside a menu for selection view options in Memex
+ In this list, there is a ActionList with single selection for picking one option, followed by another ActionList
+ with a single Item that is an action. This pattern appears inside a menu for selection view options in Memex.
+
+ setSelectedIndex(index)}
+ role="option"
+ >
+ {option.icon}
+ {option.text}
+
+ ))}
+
-
- {options.map((option, index) => (
- setSelectedIndex(index)}
- role="option"
- >
- {option.icon}
- {option.text}
-
- ))}
-
{typeof selectedIndex === 'number' && (
<>
-
- {visibleOptions.map(option => (
- toggle(option.text)}
- reorder={reorder}
- />
- ))}
-
-
- {hiddenOptions.map((option, index) => (
- toggle(option.text)}
- >
- {option.icon}
- {option.text}
-
- ))}
- {hiddenOptions.length === 0 && No hidden fields }
-
+ toggle(option.text)}
+ reorder={reorder}
+ />
+ ))}
+
+
+ toggle(option.text)}
+ >
+ {option.icon}
+ {option.text}
+
+ ))}
+ {hiddenOptions.length === 0 && No hidden fields }
)
diff --git a/src/ActionList/ActionList.features.stories.tsx b/src/ActionList/ActionList.features.stories.tsx
index a27e2181d3c..2888ad1108f 100644
--- a/src/ActionList/ActionList.features.stories.tsx
+++ b/src/ActionList/ActionList.features.stories.tsx
@@ -3,7 +3,6 @@ import {Meta} from '@storybook/react'
import {ActionList} from '.'
import {Item} from './Item'
import {LinkItem} from './LinkItem'
-import {Group} from './Group'
import {Divider} from './Divider'
import {Description} from './Description'
import Avatar from '../Avatar'
@@ -28,7 +27,7 @@ import {
export default {
title: 'Components/ActionList/Features',
component: ActionList,
- subcomponents: {Item, LinkItem, Group, Divider, Description},
+ subcomponents: {Item, LinkItem, Divider, Description},
} as Meta
export const SimpleList = () => (
@@ -428,23 +427,22 @@ export const GroupWithSubtleTitle = () => {
return (
-
- {users.slice(2).map(user => (
- assignee.login === user.login))}
- aria-checked={Boolean(assignees.find(assignee => assignee.login === user.login))}
- onSelect={() => toggleAssignee(user)}
- >
-
-
- {user.login}
- {user.name}
-
- ))}
-
+ assignee.login === user.login))}
+ aria-checked={Boolean(assignees.find(assignee => assignee.login === user.login))}
+ onSelect={() => toggleAssignee(user)}
+ >
+
+
+ {user.login}
+ {user.name}
+
+ ))}
)
}
@@ -461,23 +459,22 @@ export const GroupWithFilledTitle = () => {
return (
-
- {users.slice(2).map(user => (
- assignee.login === user.login))}
- aria-checked={Boolean(assignees.find(assignee => assignee.login === user.login))}
- onSelect={() => toggleAssignee(user)}
- >
-
-
- {user.login}
- {user.name}
-
- ))}
-
+ assignee.login === user.login))}
+ aria-checked={Boolean(assignees.find(assignee => assignee.login === user.login))}
+ onSelect={() => toggleAssignee(user)}
+ >
+
+
+ {user.login}
+ {user.name}
+
+ ))}
)
}
diff --git a/src/ActionList/ActionList.stories.tsx b/src/ActionList/ActionList.stories.tsx
index de6f66ae6f5..982dc3c2b71 100644
--- a/src/ActionList/ActionList.stories.tsx
+++ b/src/ActionList/ActionList.stories.tsx
@@ -1,9 +1,9 @@
import React from 'react'
import {Story, Meta} from '@storybook/react'
-import {ActionList, ActionListProps, ActionListGroupProps} from '.'
+import {ActionList, ActionListProps} from '.'
import {Item} from './Item'
import {LinkItem} from './LinkItem'
-import {Group} from './Group'
+import {Heading, ActionListHeadingProps} from './Heading'
import {Divider} from './Divider'
import {Description} from './Description'
import {TypographyIcon, VersionsIcon, SearchIcon, ArrowRightIcon, ArrowLeftIcon} from '@primer/octicons-react'
@@ -11,7 +11,7 @@ import {TypographyIcon, VersionsIcon, SearchIcon, ArrowRightIcon, ArrowLeftIcon}
export default {
title: 'Components/ActionList',
component: ActionList,
- subcomponents: {Item, LinkItem, Group, Divider, Description},
+ subcomponents: {Item, LinkItem, Heading, Divider, Description},
} as Meta
export const Default = () => (
@@ -33,7 +33,7 @@ Playground.args = {
showDividers: false,
selectionVariant: undefined,
variant: 'inset',
- role: 'listbox',
+ role: 'list',
}
Playground.argTypes = {
showDividers: {
@@ -242,34 +242,34 @@ LinkItemPlayground.argTypes = {
},
}
-export const GroupPlayground: Story = args => (
+export const HeadingPlayground: Story = args => (
-
- Item 1
- Item 2
-
+
)
-GroupPlayground.argTypes = {
+
+HeadingPlayground.args = {
+ title: 'Group title',
+}
+
+HeadingPlayground.argTypes = {
variant: {
+ type: 'string',
control: {
type: 'radio',
},
options: ['subtle', 'filled'],
},
- role: {
- type: 'string',
- },
title: {
type: 'string',
},
- auxiliaryText: {
+ subtitle: {
type: 'string',
},
-}
-GroupPlayground.args = {
- variant: 'subtle',
- role: 'listbox',
- title: 'Group title',
- auxiliaryText: '',
+ as: {
+ control: {
+ type: 'radio',
+ },
+ options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+ },
}
diff --git a/src/ActionList/Description.tsx b/src/ActionList/Description.tsx
index 4027ec22f58..011c1a800b8 100644
--- a/src/ActionList/Description.tsx
+++ b/src/ActionList/Description.tsx
@@ -44,7 +44,6 @@ export const Description: React.FC
{props.children}
diff --git a/src/ActionList/Divider.tsx b/src/ActionList/Divider.tsx
index 224140dc9ef..2647cc47422 100644
--- a/src/ActionList/Divider.tsx
+++ b/src/ActionList/Divider.tsx
@@ -4,15 +4,17 @@ import {get} from '../constants'
import {Theme} from '../ThemeProvider'
import {SxProp, merge} from '../sx'
-export type ActionListDividerProps = SxProp
+export type ActionListDividerProps = {
+ as?: React.ElementType
+} & SxProp
/**
* Visually separates `Item`s or `Group`s in an `ActionList`.
*/
-export const Divider: React.FC> = ({sx = {}}) => {
+export const Divider: React.FC> = ({sx = {}, as = 'li'}) => {
return (
>
},
sx as SxProp,
)}
+ role="separator"
data-component="ActionList.Divider"
/>
)
diff --git a/src/ActionList/Group.tsx b/src/ActionList/Group.tsx
index f6332760c1f..246536286ae 100644
--- a/src/ActionList/Group.tsx
+++ b/src/ActionList/Group.tsx
@@ -35,6 +35,9 @@ export type ActionListGroupProps = {
type ContextProps = Pick
export const GroupContext = React.createContext({})
+/**
+ * @deprecated ActionList.Group is deprecated. Use ActionList with ActionList.Heading instead.
+ */
export const Group: React.FC> = ({
title,
variant = 'subtle',
@@ -58,7 +61,6 @@ export const Group: React.FC> = ({
}}
{...props}
>
- {title && }
> = ({
aria-labelledby={title ? labelId : undefined}
role={role || (listRole && 'group')}
>
+ {title && }
{props.children}
@@ -91,6 +94,7 @@ const Header: React.FC> = ({variant, title,
fontSize: 0,
fontWeight: 'bold',
color: 'fg.muted',
+ listStyle: 'none',
...(variant === 'filled' && {
backgroundColor: 'canvas.subtle',
marginX: 0,
@@ -102,7 +106,7 @@ const Header: React.FC> = ({variant, title,
}
return (
-
+
{title}
{auxiliaryText && {auxiliaryText} }
diff --git a/src/ActionList/Heading.tsx b/src/ActionList/Heading.tsx
new file mode 100644
index 00000000000..98f7ddac657
--- /dev/null
+++ b/src/ActionList/Heading.tsx
@@ -0,0 +1,85 @@
+import React from 'react'
+import {ListContext} from './List'
+import Box from '../Box'
+import {get} from '../constants'
+import {SxProp} from '../sx'
+import {merge} from 'lodash'
+import {useId} from '../hooks/useId'
+
+export type ActionListHeadingProps = {
+ variant?: 'subtle' | 'filled'
+ title: string
+ subtitle?: string
+ as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+} & SxProp
+
+/**
+ * Displays the name and description of the ActionList.
+ *
+ * For visual presentation only. It's hidden from screen readers.
+ */
+export const Heading: React.FC> = ({
+ variant,
+ title,
+ subtitle,
+ as = 'h3',
+ sx,
+ ...props
+}) => {
+ const {variant: listVariant, headingId: headingId} = React.useContext(ListContext)
+
+ const styles = {
+ paddingY: '6px',
+ paddingX: listVariant === 'full' ? 2 : 3,
+ fontSize: 0,
+ fontWeight: 'bold',
+ color: 'fg.muted',
+ listStyle: 'none',
+ ...(variant === 'filled' && {
+ backgroundColor: 'canvas.subtle',
+ marginX: 0,
+ marginBottom: 2,
+ borderTop: '1px solid',
+ borderBottom: '1px solid',
+ borderColor: 'neutral.muted',
+ }),
+ }
+
+ const id = useId(headingId)
+
+ const Title = (
+
+ {title}
+
+ )
+
+ const Subtitle = (
+
+ {subtitle}
+
+ )
+
+ return (
+
+ {Title}
+ {subtitle && Subtitle}
+
+ )
+}
diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
index 42e38b75cd3..c0b3eae74b8 100644
--- a/src/ActionList/Item.tsx
+++ b/src/ActionList/Item.tsx
@@ -9,11 +9,12 @@ import {defaultSxProp} from '../utils/defaultSxProp'
import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
import {ActionListContainerContext} from './ActionListContainerContext'
import {Description} from './Description'
-import {GroupContext} from './Group'
-import {ActionListProps, ListContext} from './List'
+import {ListContext} from './List'
import {Selection} from './Selection'
import {ActionListItemProps, getVariantStyles, ItemContext, TEXT_ROW_HEIGHT} from './shared'
import {LeadingVisual, TrailingVisual} from './Visuals'
+import {MenuContext} from '../ActionMenu/ActionMenu'
+import {GroupContext} from './Group'
const LiBox = styled.li(sx)
@@ -29,6 +30,8 @@ export const Item = React.forwardRef(
id,
role,
_PrivateItemWrapper,
+ // @ts-ignore tabIndex is sometimes passed as a prop in dotcom.
+ tabIndex,
...props
},
forwardedRef,
@@ -38,10 +41,13 @@ export const Item = React.forwardRef(
trailingVisual: TrailingVisual,
description: Description,
})
+
const {variant: listVariant, showDividers, selectionVariant: listSelectionVariant} = React.useContext(ListContext)
- const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
const {container, afterSelect, selectionAttribute} = React.useContext(ActionListContainerContext)
+ const menuContext = React.useContext(MenuContext)
+ const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
+ const selectionVariant = groupSelectionVariant ?? listSelectionVariant
const onSelect = React.useCallback(
(
event: React.MouseEvent | React.KeyboardEvent,
@@ -55,10 +61,6 @@ export const Item = React.forwardRef(
[onSelectUser],
)
- const selectionVariant: ActionListProps['selectionVariant'] = groupSelectionVariant
- ? groupSelectionVariant
- : listSelectionVariant
-
/** Infer item role based on the container */
let itemRole: ActionListItemProps['role']
if (container === 'ActionMenu' || container === 'DropdownMenu') {
@@ -84,12 +86,22 @@ export const Item = React.forwardRef(
},
}
+ const isTopLevelInteractive = () =>
+ _PrivateItemWrapper !== undefined ||
+ // @ts-ignore props.as may be defined, may not.
+ props.as === 'button' ||
+ // @ts-ignore props.as may be defined, may not.
+ props.as === 'a' ||
+ menuContext.anchorId !== undefined ||
+ role?.match(/menuitem/) ||
+ tabIndex !== undefined
+
const styles = {
position: 'relative',
display: 'flex',
- paddingX: 2,
+ paddingX: isTopLevelInteractive() ? 2 : 0,
fontSize: 1,
- paddingY: '6px', // custom value off the scale
+ paddingY: isTopLevelInteractive() ? '6px' : 0, // custom value off the scale
lineHeight: TEXT_ROW_HEIGHT,
minHeight: 5,
marginX: listVariant === 'inset' ? 2 : 0,
@@ -145,6 +157,10 @@ export const Item = React.forwardRef(
borderTopWidth: showDividers ? `1px` : '0',
borderColor: 'var(--divider-color, transparent)',
},
+ 'button[data-component="ActionList.Item--DividerContainer"]': {
+ textAlign: 'left',
+ padding: 0,
+ },
// show between 2 items
':not(:first-of-type)': {'--divider-color': theme?.colors.actionListItem.inlineDivider},
// hide divider after dividers & group header, with higher importance!
@@ -182,13 +198,13 @@ export const Item = React.forwardRef(
const inlineDescriptionId = useId(id && `${id}--inline-description`)
const blockDescriptionId = useId(id && `${id}--block-description`)
- const ItemWrapper = _PrivateItemWrapper || React.Fragment
+ const ItemWrapper = _PrivateItemWrapper || Box
const menuItemProps = {
onClick: clickHandler,
onKeyPress: keyPressHandler,
'aria-disabled': disabled ? true : undefined,
- tabIndex: disabled ? undefined : 0,
+ tabIndex: disabled || !isTopLevelInteractive() ? undefined : 0,
'aria-labelledby': `${labelId} ${
slots.description && slots.description.props.variant !== 'block' ? inlineDescriptionId : ''
}`,
@@ -199,17 +215,41 @@ export const Item = React.forwardRef(
const containerProps = _PrivateItemWrapper ? {role: role || itemRole ? 'none' : undefined} : menuItemProps
- const wrapperProps = _PrivateItemWrapper ? menuItemProps : {}
+ const wrapperProps = _PrivateItemWrapper
+ ? menuItemProps
+ : {
+ sx: {
+ display: 'flex',
+ paddingX: isTopLevelInteractive() ? 0 : 2,
+ paddingY: isTopLevelInteractive() ? 0 : '6px', // custom value off the scale
+ flexGrow: 1,
+ },
+ }
return (
(styles, sxProp)} {...containerProps} {...props}>
+ {/* @ts-ignore onClick prop is only passed when _PrivateItemWrapper is set by ActionList.LinkItem. */}
&
SxProp
-type ContextProps = Pick
+type ContextProps = Pick & {
+ headingId?: string
+}
+
export const ListContext = React.createContext({})
const ListBox = styled.ul(sx)
@@ -36,10 +43,13 @@ export const List = React.forwardRef(
{variant = 'inset', selectionVariant, showDividers = false, role, sx: sxProp = defaultSxProp, ...props},
forwardedRef,
): JSX.Element => {
- const styles = {
+ const outerStyles = {
+ paddingY: variant === 'inset' ? 2 : 0,
+ }
+
+ const innerStyles = {
margin: 0,
paddingInlineStart: 0, // reset ul styles
- paddingY: variant === 'inset' ? 2 : 0,
}
/** if list is inside a Menu, it will get a role from the Menu */
@@ -49,25 +59,34 @@ export const List = React.forwardRef(
selectionVariant: containerSelectionVariant, // TODO: Remove after DropdownMenu2 deprecation
} = React.useContext(ActionListContainerContext)
+ const [slots, rest] = useSlots(props.children, {heading: Heading})
+
+ const headingId = useId()
+
return (
-
+
- {props.children}
+ {slots.heading}
+
+ {rest}
+
-
+
)
},
) as PolymorphicForwardRefComponent<'ul', ActionListProps>
diff --git a/src/ActionList/Selection.tsx b/src/ActionList/Selection.tsx
index b4a9b71b6e4..96ba447b2ef 100644
--- a/src/ActionList/Selection.tsx
+++ b/src/ActionList/Selection.tsx
@@ -1,28 +1,24 @@
import React from 'react'
import {CheckIcon} from '@primer/octicons-react'
-import {ListContext, ActionListProps} from './List'
-import {GroupContext, ActionListGroupProps} from './Group'
+import {ListContext} from './List'
import {ActionListItemProps} from './shared'
import {LeadingVisualContainer} from './Visuals'
+import {GroupContext} from './Group'
type SelectionProps = Pick
export const Selection: React.FC> = ({selected}) => {
- const {selectionVariant: listSelectionVariant} = React.useContext(ListContext)
const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
+ const {selectionVariant: listSelectionVariant} = React.useContext(ListContext)
/** selectionVariant in Group can override the selectionVariant in List root */
/** fallback to selectionVariant from container menu if any (ActionMenu, SelectPanel ) */
- let selectionVariant: ActionListProps['selectionVariant'] | ActionListGroupProps['selectionVariant']
- if (typeof groupSelectionVariant !== 'undefined') selectionVariant = groupSelectionVariant
- else selectionVariant = listSelectionVariant
+ const selectionVariant = groupSelectionVariant ?? listSelectionVariant
if (!selectionVariant) {
// if selectionVariant is not set on List, but Item is selected
// fail loudly instead of silently ignoring
if (selected) {
- throw new Error(
- 'For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined',
- )
+ throw new Error('For Item to be selected, ActionList needs to have a selectionVariant defined')
} else {
return null
}
diff --git a/src/ActionList/Visuals.tsx b/src/ActionList/Visuals.tsx
index 4a290b20f3e..43570d0cd04 100644
--- a/src/ActionList/Visuals.tsx
+++ b/src/ActionList/Visuals.tsx
@@ -9,6 +9,7 @@ type VisualProps = SxProp & React.HTMLAttributes
export const LeadingVisualContainer: React.FC> = ({sx = {}, ...props}) => {
return (
& {
- onClose?: (gesture: 'anchor-click' | 'click-outside' | 'escape' | 'tab') => void
-}
-const MenuContext = React.createContext({renderAnchor: null, open: false})
-
-export type ActionMenuProps = {
- /**
- * Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay`
- */
- children: React.ReactElement[] | React.ReactElement
-
- /**
- * If defined, will control the open/closed state of the overlay. Must be used in conjunction with `onOpenChange`.
- */
- open?: boolean
-
- /**
- * If defined, will control the open/closed state of the overlay. Must be used in conjunction with `open`.
- */
- onOpenChange?: (s: boolean) => void
-} & Pick
-
-const Menu: React.FC> = ({
- anchorRef: externalAnchorRef,
- open,
- onOpenChange,
- children,
-}: ActionMenuProps) => {
- const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate(open, onOpenChange, false)
- const onOpen = React.useCallback(() => setCombinedOpenState(true), [setCombinedOpenState])
- const onClose = React.useCallback(() => setCombinedOpenState(false), [setCombinedOpenState])
-
- const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
- const anchorId = useId()
- let renderAnchor: AnchoredOverlayProps['renderAnchor'] = null
-
- // 🚨 Hack for good API!
- // we strip out Anchor from children and pass it to AnchoredOverlay to render
- // with additional props for accessibility
- const contents = React.Children.map(children, child => {
- if (child.type === MenuButton || child.type === Anchor) {
- renderAnchor = anchorProps => React.cloneElement(child, anchorProps)
- return null
- }
- return child
- })
-
- return (
-
- {contents}
-
- )
-}
-
-export type ActionMenuAnchorProps = {children: React.ReactElement}
-const Anchor = React.forwardRef(({children, ...anchorProps}, anchorRef) => {
- return React.cloneElement(children, {...anchorProps, ref: anchorRef})
-})
-
-/** this component is syntactical sugar 🍭 */
-export type ActionMenuButtonProps = ButtonProps
-const MenuButton = React.forwardRef(({...props}, anchorRef) => {
- return (
-
-
- )
-}) as PolymorphicForwardRefComponent<'button', ActionMenuButtonProps>
-
-type MenuOverlayProps = Partial &
- Pick & {
- /**
- * Recommended: `ActionList`
- */
- children: React.ReactNode
- }
-const Overlay: React.FC> = ({
- children,
- align = 'start',
- 'aria-labelledby': ariaLabelledby,
- ...overlayProps
-}) => {
- // we typecast anchorRef as required instead of optional
- // because we know that we're setting it in context in Menu
- const {anchorRef, renderAnchor, anchorId, open, onOpen, onClose} = React.useContext(MenuContext) as MandateProps<
- MenuContextProps,
- 'anchorRef'
- >
-
- const containerRef = React.useRef(null)
- useMenuKeyboardNavigation(open, onClose, containerRef, anchorRef)
-
- return (
-
-
-
- )
-}
-
-Menu.displayName = 'ActionMenu'
-export const ActionMenu = Object.assign(Menu, {Button: MenuButton, Anchor, Overlay, Divider})
diff --git a/src/ActionMenu/ActionMenu.examples.stories.tsx b/src/ActionMenu/ActionMenu.examples.stories.tsx
index 206f3c36abc..f7391545f4a 100644
--- a/src/ActionMenu/ActionMenu.examples.stories.tsx
+++ b/src/ActionMenu/ActionMenu.examples.stories.tsx
@@ -35,40 +35,40 @@ export const GroupsAndDescriptions = () => {
-
- {milestones
- .filter(milestone => !milestone.name.includes('21'))
- .map((milestone, index) => (
- setSelectedMilestone(milestone)}
- >
-
-
- {milestone.name}
- Due by {milestone.due}
-
- ))}
-
-
- {milestones
- .filter(milestone => milestone.name.includes('21'))
- .map((milestone, index) => (
- setSelectedMilestone(milestone)}
- >
-
-
- {milestone.name}
- Due by {milestone.due}
-
- ))}
-
+ setSelectedMilestone(milestone)}
+ >
+
+
+ {milestone.name}
+ Due by {milestone.due}
+
+ ))}
+
+
+ setSelectedMilestone(milestone)}
+ >
+
+
+ {milestone.name}
+ Due by {milestone.due}
+
+ ))}
@@ -205,27 +205,25 @@ export const MixedSelection = () => {
{selectedOption ? `Group by ${selectedOption.text}` : 'Group items by'}
+
+ setSelectedIndex(index)}>
+
+
+ {option.text}
+
+ ))}
+
-
- {options.map((option, index) => (
- setSelectedIndex(index)}>
-
-
- {option.text}
-
- ))}
-
{typeof selectedIndex === 'number' && (
-
- setSelectedIndex(null)}>
-
-
- Clear Group by
-
-
+ setSelectedIndex(null)}>
+
+
+ Clear Group by
+
)}
@@ -244,29 +242,31 @@ export const MultipleSections = () => {
-
-
- alert('Workflows clicked')}>Download
- alert('Workflows clicked')}>Jump to line
- alert('Workflows clicked')}>Find in file
- alert('Workflows clicked')}>Copy path
- alert('Workflows clicked')}>Copy permalink
-
+
+ alert('Workflows clicked')}>Download
- {items.map((item, index) => (
- setSelectedMilestone(item)}
- >
- {item.name}
-
- ))}
-
+ alert('Workflows clicked')}>Jump to line
+ alert('Workflows clicked')}>Find in file
alert('Workflows clicked')}>Copy path
+ alert('Workflows clicked')}>Copy permalink
+
+
+ setSelectedMilestone(item)}
+ >
+ {item.name}
+
+ ))}
+
+
alert('Delete file')} variant="danger">
Delete file
diff --git a/src/ActionMenu/ActionMenu.features.stories.tsx b/src/ActionMenu/ActionMenu.features.stories.tsx
index 2e0eb571078..dd8283aded5 100644
--- a/src/ActionMenu/ActionMenu.features.stories.tsx
+++ b/src/ActionMenu/ActionMenu.features.stories.tsx
@@ -35,27 +35,27 @@ export const LinksAndActions = () => (
-
- What's new
-
-
-
-
- Give feedback
-
-
-
-
- GitHub Docs
-
-
-
-
+
+
+
+ What's new
+
+
+
+
+ Give feedback
+
+
+
+
+ GitHub Docs
+
+
+
diff --git a/src/ActionMenu/ActionMenu.tsx b/src/ActionMenu/ActionMenu.tsx
index 57495318a4a..c886551b9c0 100644
--- a/src/ActionMenu/ActionMenu.tsx
+++ b/src/ActionMenu/ActionMenu.tsx
@@ -16,7 +16,7 @@ export type MenuContextProps = Pick<
> & {
onClose?: (gesture: 'anchor-click' | 'click-outside' | 'escape' | 'tab') => void
}
-const MenuContext = React.createContext({renderAnchor: null, open: false})
+export const MenuContext = React.createContext({renderAnchor: null, open: false})
export type ActionMenuProps = {
/**
diff --git a/src/__tests__/ActionMenu.test.tsx b/src/ActionMenu/__tests__/ActionMenu.test.tsx
similarity index 96%
rename from src/__tests__/ActionMenu.test.tsx
rename to src/ActionMenu/__tests__/ActionMenu.test.tsx
index bf33d15c491..fe1e72feb1c 100644
--- a/src/__tests__/ActionMenu.test.tsx
+++ b/src/ActionMenu/__tests__/ActionMenu.test.tsx
@@ -2,11 +2,12 @@ import {render as HTMLRender, waitFor} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import {axe, toHaveNoViolations} from 'jest-axe'
import React from 'react'
-import theme from '../theme'
-import {ActionMenu, ActionList, BaseStyles, ThemeProvider, SSRProvider} from '..'
-import {behavesAsComponent, checkExports} from '../utils/testing'
-import {SingleSelect} from '../ActionMenu/ActionMenu.features.stories'
-import {MixedSelection} from '../ActionMenu/ActionMenu.examples.stories'
+import theme from '../../theme'
+import {ActionMenu, ActionList, BaseStyles, ThemeProvider, SSRProvider} from '../..'
+import {MenuContext} from '../ActionMenu'
+import {behavesAsComponent, checkExports} from '../../utils/testing'
+import {SingleSelect} from '../ActionMenu.features.stories'
+import {MixedSelection} from '../ActionMenu.examples.stories'
expect.extend(toHaveNoViolations)
function Example(): JSX.Element {
@@ -47,6 +48,7 @@ describe('ActionMenu', () => {
checkExports('ActionMenu', {
default: undefined,
ActionMenu,
+ MenuContext,
})
it('should open Menu on MenuButton click', async () => {
diff --git a/src/__tests__/ActionMenu.types.test.tsx b/src/ActionMenu/__tests__/ActionMenu.types.test.tsx
similarity index 94%
rename from src/__tests__/ActionMenu.types.test.tsx
rename to src/ActionMenu/__tests__/ActionMenu.types.test.tsx
index 38e954a5754..967d0633a36 100644
--- a/src/__tests__/ActionMenu.types.test.tsx
+++ b/src/ActionMenu/__tests__/ActionMenu.types.test.tsx
@@ -1,4 +1,4 @@
-import {ActionMenu} from '..'
+import {ActionMenu} from '../..'
import React from 'react'
export function actionButtonWithoutProps() {
diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/ActionMenu/__tests__/__snapshots__/ActionMenu.test.tsx.snap
similarity index 100%
rename from src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
rename to src/ActionMenu/__tests__/__snapshots__/ActionMenu.test.tsx.snap
diff --git a/src/NavList/NavList.stories.tsx b/src/NavList/NavList.stories.tsx
index 91286257310..9af62a887ee 100644
--- a/src/NavList/NavList.stories.tsx
+++ b/src/NavList/NavList.stories.tsx
@@ -26,6 +26,23 @@ export const Simple: Story = () => (
)
+export const WithGroup: Story = () => (
+
+
+
+ Item 1
+
+ Item 2
+ Item 3
+
+
+ Item 4
+ Item 5
+ Item 6
+
+
+)
+
export const WithSubItems: Story = () => (
diff --git a/src/NavList/NavList.test.tsx b/src/NavList/NavList.test.tsx
index ee4fa595285..46a6968b912 100644
--- a/src/NavList/NavList.test.tsx
+++ b/src/NavList/NavList.test.tsx
@@ -211,7 +211,7 @@ describe('NavList.Item with NavList.SubNav', () => {
,
)
- const button = getByRole('button')
+ const button = getByRole('button', {name: 'Item'})
// Starts open
expect(queryByRole('list', {name: 'Item'})).toBeVisible()
diff --git a/src/NavList/NavList.tsx b/src/NavList/NavList.tsx
index a90a849f64e..086ef324715 100644
--- a/src/NavList/NavList.tsx
+++ b/src/NavList/NavList.tsx
@@ -252,10 +252,13 @@ const Group: React.FC = ({title, children, sx: sxProp = defau
return (
<>
{/* Hide divider if the group is the first item in the list */}
-
- {children}
-
+
+ {title &&
+ {children}
+
+
)
}
diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap
index bb5474bed47..3fa5bca0e78 100644
--- a/src/NavList/__snapshots__/NavList.test.tsx.snap
+++ b/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -1,7 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`NavList renders a simple list 1`] = `
-.c4 {
+.c0 {
+ padding-top: 8px;
+ padding-bottom: 8px;
+}
+
+.c5 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -14,9 +19,15 @@ exports[`NavList renders a simple list 1`] = `
-ms-flex-positive: 1;
flex-grow: 1;
min-width: 0;
+ border-style: none;
+ background-color: transparent;
+ cursor: inherit;
+ font-size: inherit;
+ color: #1F2328;
+ line-height: 20px;
}
-.c5 {
+.c6 {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -24,14 +35,12 @@ exports[`NavList renders a simple list 1`] = `
font-weight: 400;
}
-.c0 {
+.c1 {
margin: 0;
padding-inline-start: 0;
- padding-top: 8px;
- padding-bottom: 8px;
}
-.c2 {
+.c3 {
position: relative;
display: -webkit-box;
display: -webkit-flex;
@@ -65,15 +74,15 @@ exports[`NavList renders a simple list 1`] = `
background-color: rgba(208,215,222,0.24);
}
-.c2[aria-disabled] {
+.c3[aria-disabled] {
cursor: not-allowed;
}
-.c2 [data-component="ActionList.Item--DividerContainer"] {
+.c3 [data-component="ActionList.Item--DividerContainer"] {
position: relative;
}
-.c2 [data-component="ActionList.Item--DividerContainer"]::before {
+.c3 [data-component="ActionList.Item--DividerContainer"]::before {
content: " ";
display: block;
position: absolute;
@@ -84,27 +93,32 @@ exports[`NavList renders a simple list 1`] = `
border-color: var(--divider-color,transparent);
}
-.c2:not(:first-of-type) {
+.c3 button[data-component="ActionList.Item--DividerContainer"] {
+ text-align: left;
+ padding: 0;
+}
+
+.c3:not(:first-of-type) {
--divider-color: rgba(208,215,222,0.48);
}
-[data-component="ActionList.Divider"] + .c2 {
+[data-component="ActionList.Divider"] + .c3 {
--divider-color: transparent !important;
}
-.c2:hover:not([aria-disabled]),
-.c2:focus:not([aria-disabled]),
-.c2[data-focus-visible-added]:not([aria-disabled]) {
+.c3:hover:not([aria-disabled]),
+.c3:focus:not([aria-disabled]),
+.c3[data-focus-visible-added]:not([aria-disabled]) {
--divider-color: transparent;
}
-.c2:hover:not([aria-disabled]) + .c1,
-.c2:focus:not([aria-disabled]) + .c2,
-.c2[data-focus-visible-added] + li {
+.c3:hover:not([aria-disabled]) + .c2,
+.c3:focus:not([aria-disabled]) + .c3,
+.c3[data-focus-visible-added] + li {
--divider-color: transparent;
}
-.c2::after {
+.c3::after {
position: absolute;
top: calc(50% - 12px);
left: -8px;
@@ -115,7 +129,7 @@ exports[`NavList renders a simple list 1`] = `
border-radius: 6px;
}
-.c6 {
+.c7 {
position: relative;
display: -webkit-box;
display: -webkit-flex;
@@ -147,15 +161,15 @@ exports[`NavList renders a simple list 1`] = `
margin-bottom: unset;
}
-.c6[aria-disabled] {
+.c7[aria-disabled] {
cursor: not-allowed;
}
-.c6 [data-component="ActionList.Item--DividerContainer"] {
+.c7 [data-component="ActionList.Item--DividerContainer"] {
position: relative;
}
-.c6 [data-component="ActionList.Item--DividerContainer"]::before {
+.c7 [data-component="ActionList.Item--DividerContainer"]::before {
content: " ";
display: block;
position: absolute;
@@ -166,27 +180,32 @@ exports[`NavList renders a simple list 1`] = `
border-color: var(--divider-color,transparent);
}
-.c6:not(:first-of-type) {
+.c7 button[data-component="ActionList.Item--DividerContainer"] {
+ text-align: left;
+ padding: 0;
+}
+
+.c7:not(:first-of-type) {
--divider-color: rgba(208,215,222,0.48);
}
-[data-component="ActionList.Divider"] + .c6 {
+[data-component="ActionList.Divider"] + .c7 {
--divider-color: transparent !important;
}
-.c6:hover:not([aria-disabled]),
-.c6:focus:not([aria-disabled]),
-.c6[data-focus-visible-added]:not([aria-disabled]) {
+.c7:hover:not([aria-disabled]),
+.c7:focus:not([aria-disabled]),
+.c7[data-focus-visible-added]:not([aria-disabled]) {
--divider-color: transparent;
}
-.c6:hover:not([aria-disabled]) + .c1,
-.c6:focus:not([aria-disabled]) + .c6,
-.c6[data-focus-visible-added] + li {
+.c7:hover:not([aria-disabled]) + .c2,
+.c7:focus:not([aria-disabled]) + .c7,
+.c7[data-focus-visible-added] + li {
--divider-color: transparent;
}
-.c3 {
+.c4 {
color: #0969da;
-webkit-text-decoration: none;
text-decoration: none;
@@ -206,12 +225,12 @@ exports[`NavList renders a simple list 1`] = `
color: inherit;
}
-.c3:hover {
+.c4:hover {
-webkit-text-decoration: underline;
text-decoration: underline;
}
-.c3:is(button) {
+.c4:is(button) {
display: inline-block;
padding: 0;
font-size: inherit;
@@ -228,58 +247,58 @@ exports[`NavList renders a simple list 1`] = `
appearance: none;
}
-.c3:hover {
+.c4:hover {
color: inherit;
-webkit-text-decoration: none;
text-decoration: none;
}
@media (hover:hover) and (pointer:fine) {
- .c2:hover:not([aria-disabled]) {
+ .c3:hover:not([aria-disabled]) {
background-color: rgba(208,215,222,0.32);
color: #1F2328;
}
- .c2:focus-visible,
- .c2 > a:focus-visible {
+ .c3:focus-visible,
+ .c3 > a:focus-visible {
outline: none;
border: 2 solid;
box-shadow: 0 0 0 2px #0969da;
}
- .c2:active:not([aria-disabled]) {
+ .c3:active:not([aria-disabled]) {
background-color: rgba(208,215,222,0.48);
color: #1F2328;
}
}
@media (forced-colors:active) {
- .c2:focus {
+ .c3:focus {
outline: solid 1px transparent !important;
}
}
@media (hover:hover) and (pointer:fine) {
- .c6:hover:not([aria-disabled]) {
+ .c7:hover:not([aria-disabled]) {
background-color: rgba(208,215,222,0.32);
color: #1F2328;
}
- .c6:focus-visible,
- .c6 > a:focus-visible {
+ .c7:focus-visible,
+ .c7 > a:focus-visible {
outline: none;
border: 2 solid;
box-shadow: 0 0 0 2px #0969da;
}
- .c6:active:not([aria-disabled]) {
+ .c7:active:not([aria-disabled]) {
background-color: rgba(208,215,222,0.48);
color: #1F2328;
}
}
@media (forced-colors:active) {
- .c6:focus {
+ .c7:focus {
outline: solid 1px transparent !important;
}
}
@@ -288,83 +307,92 @@ exports[`NavList renders a simple list 1`] = `
-
+
+ Contact
+
+
+
+
+
+
`;
exports[`NavList renders with groups 1`] = `
-.c8 {
+.c0 {
+ padding-top: 8px;
+ padding-bottom: 8px;
+}
+
+.c9 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -377,9 +405,15 @@ exports[`NavList renders with groups 1`] = `
-ms-flex-positive: 1;
flex-grow: 1;
min-width: 0;
+ border-style: none;
+ background-color: transparent;
+ cursor: inherit;
+ font-size: inherit;
+ color: #1F2328;
+ line-height: 20px;
}
-.c9 {
+.c10 {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -387,7 +421,7 @@ exports[`NavList renders with groups 1`] = `
font-weight: 400;
}
-.c1 {
+.c2 {
height: 1px;
background-color: rgba(208,215,222,0.48);
margin-top: calc(8px - 1px);
@@ -395,18 +429,10 @@ exports[`NavList renders with groups 1`] = `
list-style: none;
}
-.c1:first-child {
+.c2:first-of-type {
display: none;
}
-.c2 {
- list-style: none;
-}
-
-.c2:not(:first-child) {
- margin-top: 8px;
-}
-
.c3 {
padding-top: 6px;
padding-bottom: 6px;
@@ -415,20 +441,26 @@ exports[`NavList renders with groups 1`] = `
font-size: 12px;
font-weight: 600;
color: #656d76;
+ list-style: none;
}
.c4 {
+ font-size: 12px;
+ font-weight: 600;
+ margin-bottom: 0;
+ margin-top: 0;
+}
+
+.c5 {
padding-inline-start: 0;
}
-.c0 {
+.c1 {
margin: 0;
padding-inline-start: 0;
- padding-top: 8px;
- padding-bottom: 8px;
}
-.c6 {
+.c7 {
position: relative;
display: -webkit-box;
display: -webkit-flex;
@@ -462,15 +494,15 @@ exports[`NavList renders with groups 1`] = `
background-color: rgba(208,215,222,0.24);
}
-.c6[aria-disabled] {
+.c7[aria-disabled] {
cursor: not-allowed;
}
-.c6 [data-component="ActionList.Item--DividerContainer"] {
+.c7 [data-component="ActionList.Item--DividerContainer"] {
position: relative;
}
-.c6 [data-component="ActionList.Item--DividerContainer"]::before {
+.c7 [data-component="ActionList.Item--DividerContainer"]::before {
content: " ";
display: block;
position: absolute;
@@ -481,27 +513,32 @@ exports[`NavList renders with groups 1`] = `
border-color: var(--divider-color,transparent);
}
-.c6:not(:first-of-type) {
+.c7 button[data-component="ActionList.Item--DividerContainer"] {
+ text-align: left;
+ padding: 0;
+}
+
+.c7:not(:first-of-type) {
--divider-color: rgba(208,215,222,0.48);
}
-[data-component="ActionList.Divider"] + .c6 {
+[data-component="ActionList.Divider"] + .c7 {
--divider-color: transparent !important;
}
-.c6:hover:not([aria-disabled]),
-.c6:focus:not([aria-disabled]),
-.c6[data-focus-visible-added]:not([aria-disabled]) {
+.c7:hover:not([aria-disabled]),
+.c7:focus:not([aria-disabled]),
+.c7[data-focus-visible-added]:not([aria-disabled]) {
--divider-color: transparent;
}
-.c6:hover:not([aria-disabled]) + .c5,
-.c6:focus:not([aria-disabled]) + .c6,
-.c6[data-focus-visible-added] + li {
+.c7:hover:not([aria-disabled]) + .c6,
+.c7:focus:not([aria-disabled]) + .c7,
+.c7[data-focus-visible-added] + li {
--divider-color: transparent;
}
-.c6::after {
+.c7::after {
position: absolute;
top: calc(50% - 12px);
left: -8px;
@@ -512,7 +549,7 @@ exports[`NavList renders with groups 1`] = `
border-radius: 6px;
}
-.c10 {
+.c11 {
position: relative;
display: -webkit-box;
display: -webkit-flex;
@@ -544,15 +581,15 @@ exports[`NavList renders with groups 1`] = `
margin-bottom: unset;
}
-.c10[aria-disabled] {
+.c11[aria-disabled] {
cursor: not-allowed;
}
-.c10 [data-component="ActionList.Item--DividerContainer"] {
+.c11 [data-component="ActionList.Item--DividerContainer"] {
position: relative;
}
-.c10 [data-component="ActionList.Item--DividerContainer"]::before {
+.c11 [data-component="ActionList.Item--DividerContainer"]::before {
content: " ";
display: block;
position: absolute;
@@ -563,27 +600,32 @@ exports[`NavList renders with groups 1`] = `
border-color: var(--divider-color,transparent);
}
-.c10:not(:first-of-type) {
+.c11 button[data-component="ActionList.Item--DividerContainer"] {
+ text-align: left;
+ padding: 0;
+}
+
+.c11:not(:first-of-type) {
--divider-color: rgba(208,215,222,0.48);
}
-[data-component="ActionList.Divider"] + .c10 {
+[data-component="ActionList.Divider"] + .c11 {
--divider-color: transparent !important;
}
-.c10:hover:not([aria-disabled]),
-.c10:focus:not([aria-disabled]),
-.c10[data-focus-visible-added]:not([aria-disabled]) {
+.c11:hover:not([aria-disabled]),
+.c11:focus:not([aria-disabled]),
+.c11[data-focus-visible-added]:not([aria-disabled]) {
--divider-color: transparent;
}
-.c10:hover:not([aria-disabled]) + .c5,
-.c10:focus:not([aria-disabled]) + .c10,
-.c10[data-focus-visible-added] + li {
+.c11:hover:not([aria-disabled]) + .c6,
+.c11:focus:not([aria-disabled]) + .c11,
+.c11[data-focus-visible-added] + li {
--divider-color: transparent;
}
-.c7 {
+.c8 {
color: #0969da;
-webkit-text-decoration: none;
text-decoration: none;
@@ -603,12 +645,12 @@ exports[`NavList renders with groups 1`] = `
color: inherit;
}
-.c7:hover {
+.c8:hover {
-webkit-text-decoration: underline;
text-decoration: underline;
}
-.c7:is(button) {
+.c8:is(button) {
display: inline-block;
padding: 0;
font-size: inherit;
@@ -625,58 +667,58 @@ exports[`NavList renders with groups 1`] = `
appearance: none;
}
-.c7:hover {
+.c8:hover {
color: inherit;
-webkit-text-decoration: none;
text-decoration: none;
}
@media (hover:hover) and (pointer:fine) {
- .c6:hover:not([aria-disabled]) {
+ .c7:hover:not([aria-disabled]) {
background-color: rgba(208,215,222,0.32);
color: #1F2328;
}
- .c6:focus-visible,
- .c6 > a:focus-visible {
+ .c7:focus-visible,
+ .c7 > a:focus-visible {
outline: none;
border: 2 solid;
box-shadow: 0 0 0 2px #0969da;
}
- .c6:active:not([aria-disabled]) {
+ .c7:active:not([aria-disabled]) {
background-color: rgba(208,215,222,0.48);
color: #1F2328;
}
}
@media (forced-colors:active) {
- .c6:focus {
+ .c7:focus {
outline: solid 1px transparent !important;
}
}
@media (hover:hover) and (pointer:fine) {
- .c10:hover:not([aria-disabled]) {
+ .c11:hover:not([aria-disabled]) {
background-color: rgba(208,215,222,0.32);
color: #1F2328;
}
- .c10:focus-visible,
- .c10 > a:focus-visible {
+ .c11:focus-visible,
+ .c11 > a:focus-visible {
outline: none;
border: 2 solid;
box-shadow: 0 0 0 2px #0969da;
}
- .c10:active:not([aria-disabled]) {
+ .c11:active:not([aria-disabled]) {
background-color: rgba(208,215,222,0.48);
color: #1F2328;
}
}
@media (forced-colors:active) {
- .c10:focus {
+ .c11:focus {
outline: solid 1px transparent !important;
}
}
@@ -685,111 +727,118 @@ exports[`NavList renders with groups 1`] = `
-
-
-
+
-
- Overview
-
-
-
-
-
-
+ Getting started
+
+
+
+
+
+
+
-
- Components
-
-
-
-
-
+
+ Avatar
+
+
+
+
+
+
+
+
`;
exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav contains the current item and is open 1`] = `
-.c4 {
+.c0 {
+ padding-top: 8px;
+ padding-bottom: 8px;
+}
+
+.c6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -802,9 +851,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
-ms-flex-positive: 1;
flex-grow: 1;
min-width: 0;
+ border-style: none;
+ background-color: transparent;
+ cursor: inherit;
+ font-size: inherit;
+ color: #1F2328;
+ line-height: 20px;
}
-.c6 {
+.c8 {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -812,7 +867,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
font-weight: 400;
}
-.c1 {
+.c2 {
list-style: none;
}
@@ -821,19 +876,34 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ padding-bottom: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
-.c9 {
+.c7 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+
+.c11 {
padding: 0;
margin: 0;
display: block;
}
-.c7 {
+.c9 {
height: 20px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
@@ -843,20 +913,18 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
font-weight: initial;
}
-.c8 {
+.c10 {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
-.c0 {
+.c1 {
margin: 0;
padding-inline-start: 0;
- padding-top: 8px;
- padding-bottom: 8px;
}
-.c10 {
+.c12 {
position: relative;
display: -webkit-box;
display: -webkit-flex;
@@ -890,15 +958,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
background-color: rgba(208,215,222,0.24);
}
-.c10[aria-disabled] {
+.c12[aria-disabled] {
cursor: not-allowed;
}
-.c10 [data-component="ActionList.Item--DividerContainer"] {
+.c12 [data-component="ActionList.Item--DividerContainer"] {
position: relative;
}
-.c10 [data-component="ActionList.Item--DividerContainer"]::before {
+.c12 [data-component="ActionList.Item--DividerContainer"]::before {
content: " ";
display: block;
position: absolute;
@@ -909,27 +977,32 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
border-color: var(--divider-color,transparent);
}
-.c10:not(:first-of-type) {
+.c12 button[data-component="ActionList.Item--DividerContainer"] {
+ text-align: left;
+ padding: 0;
+}
+
+.c12:not(:first-of-type) {
--divider-color: rgba(208,215,222,0.48);
}
-[data-component="ActionList.Divider"] + .c10 {
+[data-component="ActionList.Divider"] + .c12 {
--divider-color: transparent !important;
}
-.c10:hover:not([aria-disabled]),
-.c10:focus:not([aria-disabled]),
-.c10[data-focus-visible-added]:not([aria-disabled]) {
+.c12:hover:not([aria-disabled]),
+.c12:focus:not([aria-disabled]),
+.c12[data-focus-visible-added]:not([aria-disabled]) {
--divider-color: transparent;
}
-.c10:hover:not([aria-disabled]) + .c2,
-.c10:focus:not([aria-disabled]) + .c10,
-.c10[data-focus-visible-added] + li {
+.c12:hover:not([aria-disabled]) + .c3,
+.c12:focus:not([aria-disabled]) + .c12,
+.c12[data-focus-visible-added] + li {
--divider-color: transparent;
}
-.c10::after {
+.c12::after {
position: absolute;
top: calc(50% - 12px);
left: -8px;
@@ -940,49 +1013,49 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
border-radius: 6px;
}
-.c12:hover:not([aria-disabled]) + .c2,
-.c12:focus:not([aria-disabled]) + .c12,
-.c12[data-focus-visible-added] + li {
- --divider-color: transparent;
-}
-
-.c13:hover:not([aria-disabled]) + .c2,
-.c13:focus:not([aria-disabled]) + .c13,
-.c13[data-focus-visible-added] + li {
- --divider-color: transparent;
-}
-
-.c14:hover:not([aria-disabled]) + .c2,
+.c14:hover:not([aria-disabled]) + .c3,
.c14:focus:not([aria-disabled]) + .c14,
.c14[data-focus-visible-added] + li {
--divider-color: transparent;
}
-.c15:hover:not([aria-disabled]) + .c2,
+.c15:hover:not([aria-disabled]) + .c3,
.c15:focus:not([aria-disabled]) + .c15,
.c15[data-focus-visible-added] + li {
--divider-color: transparent;
}
-.c16:hover:not([aria-disabled]) + .c2,
+.c16:hover:not([aria-disabled]) + .c3,
.c16:focus:not([aria-disabled]) + .c16,
.c16[data-focus-visible-added] + li {
--divider-color: transparent;
}
-.c17:hover:not([aria-disabled]) + .c2,
+.c17:hover:not([aria-disabled]) + .c3,
.c17:focus:not([aria-disabled]) + .c17,
.c17[data-focus-visible-added] + li {
--divider-color: transparent;
}
-.c18:hover:not([aria-disabled]) + .c2,
+.c18:hover:not([aria-disabled]) + .c3,
.c18:focus:not([aria-disabled]) + .c18,
.c18[data-focus-visible-added] + li {
--divider-color: transparent;
}
-.c3 {
+.c19:hover:not([aria-disabled]) + .c3,
+.c19:focus:not([aria-disabled]) + .c19,
+.c19[data-focus-visible-added] + li {
+ --divider-color: transparent;
+}
+
+.c20:hover:not([aria-disabled]) + .c3,
+.c20:focus:not([aria-disabled]) + .c20,
+.c20[data-focus-visible-added] + li {
+ --divider-color: transparent;
+}
+
+.c4 {
position: relative;
display: -webkit-box;
display: -webkit-flex;
@@ -1014,15 +1087,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
font-weight: 600;
}
-.c3[aria-disabled] {
+.c4[aria-disabled] {
cursor: not-allowed;
}
-.c3 [data-component="ActionList.Item--DividerContainer"] {
+.c4 [data-component="ActionList.Item--DividerContainer"] {
position: relative;
}
-.c3 [data-component="ActionList.Item--DividerContainer"]::before {
+.c4 [data-component="ActionList.Item--DividerContainer"]::before {
content: " ";
display: block;
position: absolute;
@@ -1033,33 +1106,38 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
border-color: var(--divider-color,transparent);
}
-.c3:not(:first-of-type) {
+.c4 button[data-component="ActionList.Item--DividerContainer"] {
+ text-align: left;
+ padding: 0;
+}
+
+.c4:not(:first-of-type) {
--divider-color: rgba(208,215,222,0.48);
}
-[data-component="ActionList.Divider"] + .c3 {
+[data-component="ActionList.Divider"] + .c4 {
--divider-color: transparent !important;
}
-.c3:hover:not([aria-disabled]),
-.c3:focus:not([aria-disabled]),
-.c3[data-focus-visible-added]:not([aria-disabled]) {
+.c4:hover:not([aria-disabled]),
+.c4:focus:not([aria-disabled]),
+.c4[data-focus-visible-added]:not([aria-disabled]) {
--divider-color: transparent;
}
-.c3:hover:not([aria-disabled]) + .c2,
-.c3:focus:not([aria-disabled]) + .c3,
-.c3[data-focus-visible-added] + li {
+.c4:hover:not([aria-disabled]) + .c3,
+.c4:focus:not([aria-disabled]) + .c4,
+.c4[data-focus-visible-added] + li {
--divider-color: transparent;
}
-.c19:hover:not([aria-disabled]) + .c2,
-.c19:focus:not([aria-disabled]) + .c19,
-.c19[data-focus-visible-added] + li {
+.c21:hover:not([aria-disabled]) + .c3,
+.c21:focus:not([aria-disabled]) + .c21,
+.c21[data-focus-visible-added] + li {
--divider-color: transparent;
}
-.c11 {
+.c13 {
color: #0969da;
-webkit-text-decoration: none;
text-decoration: none;
@@ -1081,12 +1159,12 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
font-weight: 400;
}
-.c11:hover {
+.c13:hover {
-webkit-text-decoration: underline;
text-decoration: underline;
}
-.c11:is(button) {
+.c13:is(button) {
display: inline-block;
padding: 0;
font-size: inherit;
@@ -1103,58 +1181,58 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
appearance: none;
}
-.c11:hover {
+.c13:hover {
color: inherit;
-webkit-text-decoration: none;
text-decoration: none;
}
@media (hover:hover) and (pointer:fine) {
- .c10:hover:not([aria-disabled]) {
+ .c12:hover:not([aria-disabled]) {
background-color: rgba(208,215,222,0.32);
color: #1F2328;
}
- .c10:focus-visible,
- .c10 > a:focus-visible {
+ .c12:focus-visible,
+ .c12 > a:focus-visible {
outline: none;
border: 2 solid;
box-shadow: 0 0 0 2px #0969da;
}
- .c10:active:not([aria-disabled]) {
+ .c12:active:not([aria-disabled]) {
background-color: rgba(208,215,222,0.48);
color: #1F2328;
}
}
@media (forced-colors:active) {
- .c10:focus {
+ .c12:focus {
outline: solid 1px transparent !important;
}
}
@media (hover:hover) and (pointer:fine) {
- .c3:hover:not([aria-disabled]) {
+ .c4:hover:not([aria-disabled]) {
background-color: rgba(208,215,222,0.32);
color: #1F2328;
}
- .c3:focus-visible,
- .c3 > a:focus-visible {
+ .c4:focus-visible,
+ .c4 > a:focus-visible {
outline: none;
border: 2 solid;
box-shadow: 0 0 0 2px #0969da;
}
- .c3:active:not([aria-disabled]) {
+ .c4:active:not([aria-disabled]) {
background-color: rgba(208,215,222,0.48);
color: #1F2328;
}
}
@media (forced-colors:active) {
- .c3:focus {
+ .c4:focus {
outline: solid 1px transparent !important;
}
}
@@ -1163,94 +1241,107 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
-
-
-
-
-
- Item
-
-
-
-
-
+
+ Item
+
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
+
`;
exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains the current item and is closed 1`] = `
-.c4 {
+.c0 {
+ padding-top: 8px;
+ padding-bottom: 8px;
+}
+
+.c6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -1263,9 +1354,15 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
-ms-flex-positive: 1;
flex-grow: 1;
min-width: 0;
+ border-style: none;
+ background-color: transparent;
+ cursor: inherit;
+ font-size: inherit;
+ color: #1F2328;
+ line-height: 20px;
}
-.c6 {
+.c8 {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -1273,7 +1370,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
font-weight: 400;
}
-.c1 {
+.c2 {
list-style: none;
}
@@ -1282,19 +1379,34 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ padding-bottom: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
-.c9 {
+.c7 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+
+.c11 {
padding: 0;
margin: 0;
display: none;
}
-.c7 {
+.c9 {
height: 20px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
@@ -1304,20 +1416,18 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
font-weight: initial;
}
-.c8 {
+.c10 {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
-.c0 {
+.c1 {
margin: 0;
padding-inline-start: 0;
- padding-top: 8px;
- padding-bottom: 8px;
}
-.c10 {
+.c12 {
position: relative;
display: -webkit-box;
display: -webkit-flex;
@@ -1351,15 +1461,15 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
background-color: rgba(208,215,222,0.24);
}
-.c10[aria-disabled] {
+.c12[aria-disabled] {
cursor: not-allowed;
}
-.c10 [data-component="ActionList.Item--DividerContainer"] {
+.c12 [data-component="ActionList.Item--DividerContainer"] {
position: relative;
}
-.c10 [data-component="ActionList.Item--DividerContainer"]::before {
+.c12 [data-component="ActionList.Item--DividerContainer"]::before {
content: " ";
display: block;
position: absolute;
@@ -1370,27 +1480,32 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
border-color: var(--divider-color,transparent);
}
-.c10:not(:first-of-type) {
+.c12 button[data-component="ActionList.Item--DividerContainer"] {
+ text-align: left;
+ padding: 0;
+}
+
+.c12:not(:first-of-type) {
--divider-color: rgba(208,215,222,0.48);
}
-[data-component="ActionList.Divider"] + .c10 {
+[data-component="ActionList.Divider"] + .c12 {
--divider-color: transparent !important;
}
-.c10:hover:not([aria-disabled]),
-.c10:focus:not([aria-disabled]),
-.c10[data-focus-visible-added]:not([aria-disabled]) {
+.c12:hover:not([aria-disabled]),
+.c12:focus:not([aria-disabled]),
+.c12[data-focus-visible-added]:not([aria-disabled]) {
--divider-color: transparent;
}
-.c10:hover:not([aria-disabled]) + .c2,
-.c10:focus:not([aria-disabled]) + .c10,
-.c10[data-focus-visible-added] + li {
+.c12:hover:not([aria-disabled]) + .c3,
+.c12:focus:not([aria-disabled]) + .c12,
+.c12[data-focus-visible-added] + li {
--divider-color: transparent;
}
-.c10::after {
+.c12::after {
position: absolute;
top: calc(50% - 12px);
left: -8px;
@@ -1401,55 +1516,55 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
border-radius: 6px;
}
-.c12:hover:not([aria-disabled]) + .c2,
-.c12:focus:not([aria-disabled]) + .c12,
-.c12[data-focus-visible-added] + li {
- --divider-color: transparent;
-}
-
-.c13:hover:not([aria-disabled]) + .c2,
-.c13:focus:not([aria-disabled]) + .c13,
-.c13[data-focus-visible-added] + li {
- --divider-color: transparent;
-}
-
-.c14:hover:not([aria-disabled]) + .c2,
+.c14:hover:not([aria-disabled]) + .c3,
.c14:focus:not([aria-disabled]) + .c14,
.c14[data-focus-visible-added] + li {
--divider-color: transparent;
}
-.c15:hover:not([aria-disabled]) + .c2,
+.c15:hover:not([aria-disabled]) + .c3,
.c15:focus:not([aria-disabled]) + .c15,
.c15[data-focus-visible-added] + li {
--divider-color: transparent;
}
-.c16:hover:not([aria-disabled]) + .c2,
+.c16:hover:not([aria-disabled]) + .c3,
.c16:focus:not([aria-disabled]) + .c16,
.c16[data-focus-visible-added] + li {
--divider-color: transparent;
}
-.c17:hover:not([aria-disabled]) + .c2,
+.c17:hover:not([aria-disabled]) + .c3,
.c17:focus:not([aria-disabled]) + .c17,
.c17[data-focus-visible-added] + li {
--divider-color: transparent;
}
-.c18:hover:not([aria-disabled]) + .c2,
+.c18:hover:not([aria-disabled]) + .c3,
.c18:focus:not([aria-disabled]) + .c18,
.c18[data-focus-visible-added] + li {
--divider-color: transparent;
}
-.c19:hover:not([aria-disabled]) + .c2,
+.c19:hover:not([aria-disabled]) + .c3,
.c19:focus:not([aria-disabled]) + .c19,
.c19[data-focus-visible-added] + li {
--divider-color: transparent;
}
-.c3 {
+.c20:hover:not([aria-disabled]) + .c3,
+.c20:focus:not([aria-disabled]) + .c20,
+.c20[data-focus-visible-added] + li {
+ --divider-color: transparent;
+}
+
+.c21:hover:not([aria-disabled]) + .c3,
+.c21:focus:not([aria-disabled]) + .c21,
+.c21[data-focus-visible-added] + li {
+ --divider-color: transparent;
+}
+
+.c4 {
position: relative;
display: -webkit-box;
display: -webkit-flex;
@@ -1482,15 +1597,15 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
background-color: rgba(208,215,222,0.24);
}
-.c3[aria-disabled] {
+.c4[aria-disabled] {
cursor: not-allowed;
}
-.c3 [data-component="ActionList.Item--DividerContainer"] {
+.c4 [data-component="ActionList.Item--DividerContainer"] {
position: relative;
}
-.c3 [data-component="ActionList.Item--DividerContainer"]::before {
+.c4 [data-component="ActionList.Item--DividerContainer"]::before {
content: " ";
display: block;
position: absolute;
@@ -1501,27 +1616,32 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
border-color: var(--divider-color,transparent);
}
-.c3:not(:first-of-type) {
+.c4 button[data-component="ActionList.Item--DividerContainer"] {
+ text-align: left;
+ padding: 0;
+}
+
+.c4:not(:first-of-type) {
--divider-color: rgba(208,215,222,0.48);
}
-[data-component="ActionList.Divider"] + .c3 {
+[data-component="ActionList.Divider"] + .c4 {
--divider-color: transparent !important;
}
-.c3:hover:not([aria-disabled]),
-.c3:focus:not([aria-disabled]),
-.c3[data-focus-visible-added]:not([aria-disabled]) {
+.c4:hover:not([aria-disabled]),
+.c4:focus:not([aria-disabled]),
+.c4[data-focus-visible-added]:not([aria-disabled]) {
--divider-color: transparent;
}
-.c3:hover:not([aria-disabled]) + .c2,
-.c3:focus:not([aria-disabled]) + .c3,
-.c3[data-focus-visible-added] + li {
+.c4:hover:not([aria-disabled]) + .c3,
+.c4:focus:not([aria-disabled]) + .c4,
+.c4[data-focus-visible-added] + li {
--divider-color: transparent;
}
-.c3::after {
+.c4::after {
position: absolute;
top: calc(50% - 12px);
left: -8px;
@@ -1532,7 +1652,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
border-radius: 6px;
}
-.c11 {
+.c13 {
color: #0969da;
-webkit-text-decoration: none;
text-decoration: none;
@@ -1554,12 +1674,12 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
font-weight: 400;
}
-.c11:hover {
+.c13:hover {
-webkit-text-decoration: underline;
text-decoration: underline;
}
-.c11:is(button) {
+.c13:is(button) {
display: inline-block;
padding: 0;
font-size: inherit;
@@ -1576,58 +1696,58 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
appearance: none;
}
-.c11:hover {
+.c13:hover {
color: inherit;
-webkit-text-decoration: none;
text-decoration: none;
}
@media (hover:hover) and (pointer:fine) {
- .c10:hover:not([aria-disabled]) {
+ .c12:hover:not([aria-disabled]) {
background-color: rgba(208,215,222,0.32);
color: #1F2328;
}
- .c10:focus-visible,
- .c10 > a:focus-visible {
+ .c12:focus-visible,
+ .c12 > a:focus-visible {
outline: none;
border: 2 solid;
box-shadow: 0 0 0 2px #0969da;
}
- .c10:active:not([aria-disabled]) {
+ .c12:active:not([aria-disabled]) {
background-color: rgba(208,215,222,0.48);
color: #1F2328;
}
}
@media (forced-colors:active) {
- .c10:focus {
+ .c12:focus {
outline: solid 1px transparent !important;
}
}
@media (hover:hover) and (pointer:fine) {
- .c3:hover:not([aria-disabled]) {
+ .c4:hover:not([aria-disabled]) {
background-color: rgba(208,215,222,0.32);
color: #1F2328;
}
- .c3:focus-visible,
- .c3 > a:focus-visible {
+ .c4:focus-visible,
+ .c4 > a:focus-visible {
outline: none;
border: 2 solid;
box-shadow: 0 0 0 2px #0969da;
}
- .c3:active:not([aria-disabled]) {
+ .c4:active:not([aria-disabled]) {
background-color: rgba(208,215,222,0.48);
color: #1F2328;
}
}
@media (forced-colors:active) {
- .c3:focus {
+ .c4:focus {
outline: solid 1px transparent !important;
}
}
@@ -1636,88 +1756,96 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
-
-
-
-
-
- Item
-
-
-
-
-
+
+ Item
+
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
+
`;
diff --git a/src/__tests__/ActionList.test.tsx b/src/__tests__/ActionList.test.tsx
index 9e990e235ef..b2523d0ba20 100644
--- a/src/__tests__/ActionList.test.tsx
+++ b/src/__tests__/ActionList.test.tsx
@@ -135,7 +135,7 @@ describe('ActionList', () => {
,
)
- }).toThrow('For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined')
+ }).toThrow('For Item to be selected, ActionList needs to have a selectionVariant defined')
mockError.mockRestore()
})
diff --git a/src/__tests__/__snapshots__/ActionList.test.tsx.snap b/src/__tests__/__snapshots__/ActionList.test.tsx.snap
index 5bbbad35875..f8ed65dc46e 100644
--- a/src/__tests__/__snapshots__/ActionList.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ActionList.test.tsx.snap
@@ -2,13 +2,20 @@
exports[`ActionList renders consistently 1`] = `
.c0 {
- margin: 0;
- padding-inline-start: 0;
padding-top: 8px;
padding-bottom: 8px;
}
-
+>
+
+
`;
diff --git a/src/index.ts b/src/index.ts
index 7e0c5596576..ce77575e8af 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -49,6 +49,7 @@ export type {RadioProps} from './Radio'
export {ActionList} from './ActionList'
export type {
ActionListProps,
+ ActionListHeadingProps,
ActionListGroupProps,
ActionListItemProps,
ActionListLinkItemProps,