Skip to content

Commit 18f09dd

Browse files
mperrottimperrotti
authored
Merge branch 'main' into mp/pageheader-hasBorder
2 parents 52eecc8 + a279f14 commit 18f09dd

26 files changed

+198
-30
lines changed

‎.changeset/metal-carrots-compare.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/react": patch
3+
---
4+
5+
Bug fix: `className` passed to PageLayout twice

‎.changeset/rare-words-sin.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@primer/react': minor
3+
---
4+
5+
ActionList.Group + ActionList.TrailingAction: add missing className prop
6+
LabelGroup: add missing className prop

‎package-lock.json‎

Lines changed: 13 additions & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/postcss-preset-primer/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"@babel/preset-typescript": "^7.24.7",
2525
"@types/postcss-mixins": "9.0.5",
2626
"babel-jest": "^29.7.0",
27-
"babel-plugin-transform-import-meta": "^2.2.1",
27+
"babel-plugin-transform-import-meta": "^2.3.2",
2828
"cssnano": "^7.0.6",
2929
"postcss": "^8.4.41",
3030
"postcss-custom-properties-fallback": "^1.0.2",

‎packages/react/src/ActionBar/ActionBar.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ describe('ActionBar', () => {
2424

2525
behavesAsComponent({
2626
Component: ActionBar,
27-
options: {skipAs: true, skipSx: true},
27+
options: {skipAs: true, skipSx: true, skipClassName: true},
2828
toRender: () => <SimpleActionBar />,
2929
})
3030

‎packages/react/src/ActionList/ActionList.test.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,18 @@ describe('ActionList', () => {
3434
toRender: () => <ActionList />,
3535
})
3636

37+
behavesAsComponent({
38+
Component: ActionList.Divider,
39+
options: {skipAs: true, skipSx: true},
40+
toRender: () => <ActionList.Divider />,
41+
})
42+
43+
behavesAsComponent({
44+
Component: ActionList.TrailingAction,
45+
options: {skipAs: true, skipSx: true},
46+
toRender: () => <ActionList.TrailingAction label="Action">Action</ActionList.TrailingAction>,
47+
})
48+
3749
checkExports('ActionList', {
3850
default: undefined,
3951
ActionList,
@@ -144,4 +156,46 @@ describe('ActionList', () => {
144156
)
145157
expect(HTMLRender(<Element />).container.querySelector('li[aria-hidden="true"]')).toHaveClass('test-class-name')
146158
})
159+
160+
it('list and its sub-components support classname', () => {
161+
const {container} = HTMLRender(
162+
<ActionList className="list">
163+
<ActionList.Heading as="h2" className="heading">
164+
Heading
165+
</ActionList.Heading>
166+
<ActionList.Item className="item">
167+
Item
168+
<ActionList.TrailingAction label="action" className="trailing_action">
169+
Trailing Action
170+
</ActionList.TrailingAction>
171+
</ActionList.Item>
172+
<ActionList.Divider className="divider" />
173+
<ActionList.LinkItem className="link" href="//github.com" title="anchor" aria-keyshortcuts="d">
174+
Link Item
175+
</ActionList.LinkItem>
176+
<ActionList.Group className="group">
177+
<ActionList.GroupHeading as="h2" className="group_heading">
178+
Group Heading
179+
</ActionList.GroupHeading>
180+
<ActionList.Item className="item">
181+
<ActionList.TrailingVisual className="trailing">Trailing Visual</ActionList.TrailingVisual>
182+
<ActionList.LeadingVisual className="leading">Leading Visual</ActionList.LeadingVisual>
183+
<ActionList.Description className="description">Description</ActionList.Description>
184+
</ActionList.Item>
185+
</ActionList.Group>
186+
</ActionList>,
187+
)
188+
189+
expect(container.querySelector('.list')).toBeInTheDocument()
190+
expect(container.querySelector('.heading')).toBeInTheDocument()
191+
expect(container.querySelector('.item')).toBeInTheDocument()
192+
expect(container.querySelector('.trailing_action')).toBeInTheDocument()
193+
expect(container.querySelector('.divider')).toBeInTheDocument()
194+
expect(container.querySelector('.link')).toBeInTheDocument()
195+
expect(container.querySelector('.group')).toBeInTheDocument()
196+
expect(container.querySelector('.group_heading')).toBeInTheDocument()
197+
expect(container.querySelector('.trailing')).toBeInTheDocument()
198+
expect(container.querySelector('.leading')).toBeInTheDocument()
199+
expect(container.querySelector('.description')).toBeInTheDocument()
200+
})
147201
})

‎packages/react/src/ActionList/Description.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,3 +130,4 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
130130
</Truncate>
131131
)
132132
}
133+
Description.displayName = 'ActionList.Description'

‎packages/react/src/ActionList/Divider.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,3 +52,4 @@ export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>>
5252
/>
5353
)
5454
}
55+
Divider.displayName = 'ActionList.Divider'

‎packages/react/src/ActionList/Group.test.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,21 @@ import theme from '../theme'
44
import {ActionList} from '.'
55
import {BaseStyles, ThemeProvider, ActionMenu} from '..'
66
import {FeatureFlags} from '../FeatureFlags'
7+
import {behavesAsComponent} from '../utils/testing'
78

89
describe('ActionList.Group', () => {
10+
behavesAsComponent({
11+
Component: ActionList.Group,
12+
options: {skipAs: true, skipSx: true},
13+
toRender: () => <ActionList.Group />,
14+
})
15+
16+
behavesAsComponent({
17+
Component: ActionList.GroupHeading,
18+
options: {skipAs: true, skipSx: true},
19+
toRender: () => <ActionList.GroupHeading />,
20+
})
21+
922
it('should throw an error when ActionList.GroupHeading has an `as` prop when it is used within ActionMenu context', async () => {
1023
const spy = jest.spyOn(console, 'error').mockImplementation(() => jest.fn())
1124
expect(() =>

‎packages/react/src/ActionList/Group.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,10 @@ export type ActionListGroupProps = {
6767
* The ARIA role describing the function of the list inside `Group` component. `listbox` or `menu` are a common values.
6868
*/
6969
role?: AriaRole
70+
/**
71+
* Custom class name to apply to the `Group`.
72+
*/
73+
className?: string
7074
} & SxProp & {
7175
/**
7276
* Whether multiple Items or a single Item can be selected in the Group. Overrides value on ActionList root.
@@ -86,6 +90,7 @@ export const Group: React.FC<React.PropsWithChildren<ActionListGroupProps>> = ({
8690
auxiliaryText,
8791
selectionVariant,
8892
role,
93+
className,
8994
sx = defaultSxProp,
9095
...props
9196
}) => {
@@ -112,7 +117,13 @@ export const Group: React.FC<React.PropsWithChildren<ActionListGroupProps>> = ({
112117
if (enabled) {
113118
if (sx !== defaultSxProp) {
114119
return (
115-
<Box as="li" className={groupClasses.Group} role={listRole ? 'none' : undefined} sx={sx} {...props}>
120+
<Box
121+
as="li"
122+
className={clsx(className, groupClasses.Group)}
123+
role={listRole ? 'none' : undefined}
124+
sx={sx}
125+
{...props}
126+
>
116127
<GroupContext.Provider value={{selectionVariant, groupHeadingId}}>
117128
{title && !slots.groupHeading ? (
118129
// Escape hatch: supports old API <ActionList.Group title="group title"> in a non breaking way
@@ -135,7 +146,7 @@ export const Group: React.FC<React.PropsWithChildren<ActionListGroupProps>> = ({
135146
)
136147
}
137148
return (
138-
<li className={groupClasses.Group} role={listRole ? 'none' : undefined} {...props}>
149+
<li className={clsx(className, groupClasses.Group)} role={listRole ? 'none' : undefined} {...props}>
139150
<GroupContext.Provider value={{selectionVariant, groupHeadingId}}>
140151
{title && !slots.groupHeading ? (
141152
// Escape hatch: supports old API <ActionList.Group title="group title"> in a non breaking way
@@ -166,6 +177,7 @@ export const Group: React.FC<React.PropsWithChildren<ActionListGroupProps>> = ({
166177
listStyle: 'none', // hide the ::marker inserted by browser's stylesheet
167178
...sx,
168179
}}
180+
className={className}
169181
{...props}
170182
>
171183
<GroupContext.Provider value={{selectionVariant, groupHeadingId}}>
@@ -292,3 +304,6 @@ export const GroupHeading: React.FC<React.PropsWithChildren<ActionListGroupHeadi
292304
</>
293305
)
294306
}
307+
308+
GroupHeading.displayName = 'ActionList.GroupHeading'
309+
Group.displayName = 'ActionList.Group'

0 commit comments

Comments
 (0)