Skip to content

Commit 0ae6250

Browse files
TylerJDevTylerJDev
authored
Merge branch 'main' into tylerjdev/add-position-callback-to-action-menu
2 parents 6f4bd79 + 8e7bc0e commit 0ae6250

File tree

11 files changed

+219
-43
lines changed

11 files changed

+219
-43
lines changed

‎.changeset/olive-kangaroos-wonder.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+
fix(SelectPanel): differentiate onCancel gesture from escape

‎.changeset/ten-eggs-arrive.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+
SelectPanelV2: Add `deprecated` status to SelectPanelV2 docs and stories

‎e2e/components/drafts/SelectPanel.test.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,28 +10,28 @@ const stories: Array<{
1010
}> = [
1111
{
1212
title: 'Default',
13-
id: 'experimental-components-selectpanel--default',
13+
id: 'deprecated-components-selectpanel--default',
1414
},
1515
{
16-
id: 'experimental-components-selectpanel-features--as-modal',
16+
id: 'deprecated-components-selectpanel-features--as-modal',
1717
title: 'As Modal',
1818
},
1919
{
20-
id: 'experimental-components-selectpanel-features--external-anchor',
20+
id: 'deprecated-components-selectpanel-features--external-anchor',
2121
title: 'External Anchor',
2222
},
2323
{
24-
id: 'experimental-components-selectpanel-features--instant-selection-variant',
24+
id: 'deprecated-components-selectpanel-features--instant-selection-variant',
2525
title: 'Instant Selection Variant',
2626
buttonText: 'Choose a tag',
2727
},
2828
{
29-
id: 'experimental-components-selectpanel-features--with-warning',
29+
id: 'deprecated-components-selectpanel-features--with-warning',
3030
title: 'With Warning',
3131
buttonText: 'Assignees',
3232
},
3333
{
34-
id: 'experimental-components-selectpanel-features--with-errors',
34+
id: 'deprecated-components-selectpanel-features--with-errors',
3535
title: 'With Errors',
3636
buttonText: 'Assignees',
3737
},

‎packages/react/src/Button/IconButton.figma.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ figma.connect(
88
'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=30468-5843&t=eGzObFz2btFEDDNj-4',
99
{
1010
props: {
11-
icon: figma.instance<React.FunctionComponent>('icon'),
11+
icon: figma.instance('icon').getProps<{name: string; fn: React.FC}>(),
1212
variant: figma.enum<VariantType>('variant', {
1313
primary: 'primary',
1414
secondary: 'default',
@@ -23,7 +23,7 @@ figma.connect(
2323
ariaLabel: figma.string('aria-label'),
2424
},
2525
example: ({icon, ariaLabel, variant, size}) => (
26-
<IconButton variant={variant} icon={icon} aria-label={ariaLabel} size={size} />
26+
<IconButton variant={variant} icon={icon.fn} aria-label={ariaLabel} size={size} />
2727
),
2828
},
2929
)

‎packages/react/src/PageHeader/PageHeader.figma.tsx

Lines changed: 174 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,177 @@ import React from 'react'
22
import {PageHeader} from '../'
33
import figma from '@figma/code-connect'
44

5-
figma.connect(PageHeader, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=38380%3A2926', {
6-
props: {
7-
// No matching props could be found for these Figma properties:
8-
description: figma.boolean('hasDescription', {
9-
false: undefined,
10-
true: figma.children('_PageHeader.Description'),
11-
}),
12-
// "hasNavigation": figma.boolean('hasNavigation'),
13-
// "hasContextArea": figma.boolean('hasContextArea')
14-
},
15-
example: ({description}) => <PageHeader>{description}</PageHeader>,
16-
})
5+
figma.connect(
6+
PageHeader,
7+
'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=40002-2161&t=IXcS4U90x9HnYx6s-4',
8+
{
9+
props: {
10+
// No matching props could be found for these Figma properties:
11+
description: figma.children('_PageHeader.Description'),
12+
titleArea: figma.children('_PageHeader.TitleArea'),
13+
hasBorder: figma.boolean('hasBorder?'),
14+
navigation: figma.children('_PageHeader.Navigation'),
15+
contextArea: figma.children('_PageHeader.ContextArea'),
16+
},
17+
example: ({description, hasBorder, titleArea, navigation, contextArea}) => (
18+
<PageHeader hasBorder={hasBorder}>
19+
{titleArea}
20+
{contextArea}
21+
{description}
22+
{navigation}
23+
</PageHeader>
24+
),
25+
},
26+
)
27+
28+
/* TITLE AREA */
29+
figma.connect(
30+
PageHeader.TitleArea,
31+
'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=38380-2931&m=dev',
32+
{
33+
props: {
34+
variant: figma.enum('Title size', {
35+
subtitle: 'subtitle',
36+
medium: 'medium',
37+
large: 'large',
38+
}),
39+
title: figma.children('_PageHeader.Title'),
40+
actions: figma.children('_PageHeader.Actions'),
41+
leadingAction: figma.children('_PageHeader.LeadingAction'),
42+
trailingAction: figma.children('_PageHeader.TrailingAction'),
43+
leadingVisual: figma.children('_PageHeader.LeadingVisual'),
44+
trailingVisual: figma.children('_PageHeader.TrailingVisual'),
45+
},
46+
example: ({variant, title, actions, leadingAction, trailingAction, leadingVisual, trailingVisual}) => (
47+
<>
48+
<PageHeader.TitleArea variant={variant}>
49+
{leadingVisual}
50+
{title}
51+
{trailingVisual}
52+
</PageHeader.TitleArea>
53+
{leadingAction}
54+
{trailingAction}
55+
{actions}
56+
</>
57+
),
58+
},
59+
)
60+
61+
/* TITLE */
62+
figma.connect(
63+
PageHeader.Title,
64+
'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=38380-2888&m=dev',
65+
{
66+
props: {
67+
title: figma.string('title'),
68+
},
69+
example: ({title}) => <PageHeader.Title>{title}</PageHeader.Title>,
70+
},
71+
)
72+
73+
/* Actions */
74+
figma.connect(
75+
PageHeader.Actions,
76+
'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=39970-89643&t=fprKViURxkKXOe6Y-4',
77+
{
78+
props: {
79+
children: figma.children('*'),
80+
},
81+
example: ({children}) => <PageHeader.Actions>{children}</PageHeader.Actions>,
82+
},
83+
)
84+
85+
/* Description */
86+
figma.connect(
87+
PageHeader.Description,
88+
'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=38380-2894&t=IXcS4U90x9HnYx6s-4',
89+
{
90+
example: () => <PageHeader.Description>{/*...*/}</PageHeader.Description>,
91+
},
92+
)
93+
94+
/* Navigation */
95+
figma.connect(
96+
PageHeader.Navigation,
97+
'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=38380-2885&t=IXcS4U90x9HnYx6s-4',
98+
{
99+
props: {
100+
underlineNav: figma.nestedProps('UnderlineNav', {
101+
items: figma.children('*'),
102+
}),
103+
},
104+
example: ({underlineNav}) => <PageHeader.Navigation>{underlineNav.items}</PageHeader.Navigation>,
105+
},
106+
)
107+
108+
/* LeadingAction */
109+
figma.connect(
110+
PageHeader.LeadingAction,
111+
'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=40102-162217&t=wRHARmXHLT2f3NjB-4',
112+
{
113+
props: {
114+
children: figma.children('*'),
115+
},
116+
example: ({children}) => <PageHeader.LeadingAction>{children}</PageHeader.LeadingAction>,
117+
},
118+
)
119+
120+
/* TrailingAction */
121+
figma.connect(
122+
PageHeader.TrailingAction,
123+
'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=40102-162780&t=wRHARmXHLT2f3NjB-4',
124+
{
125+
props: {
126+
children: figma.children('*'),
127+
},
128+
example: ({children}) => <PageHeader.TrailingAction>{children}</PageHeader.TrailingAction>,
129+
},
130+
)
131+
132+
/* LeadingVisual */
133+
figma.connect(
134+
PageHeader.LeadingVisual,
135+
'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=40102-163620&m=dev',
136+
{
137+
props: {
138+
children: figma.children('*'),
139+
},
140+
example: ({children}) => <PageHeader.LeadingVisual>{children}</PageHeader.LeadingVisual>,
141+
},
142+
)
143+
144+
/* TrailingVisual */
145+
figma.connect(
146+
PageHeader.TrailingVisual,
147+
'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=40102-163412&m=dev',
148+
{
149+
props: {
150+
children: figma.children('*'),
151+
},
152+
example: ({children}) => <PageHeader.TrailingVisual>{children}</PageHeader.TrailingVisual>,
153+
},
154+
)
155+
156+
/* ContextArea */
157+
figma.connect(
158+
PageHeader.ContextArea,
159+
'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=38380-2874&t=wRHARmXHLT2f3NjB-4',
160+
{
161+
props: {
162+
children: figma.children('*'),
163+
},
164+
example: ({children}) => <PageHeader.ContextArea>{children}</PageHeader.ContextArea>,
165+
},
166+
)
167+
168+
/* ContextAreaActions */
169+
figma.connect(
170+
PageHeader.ContextAreaActions,
171+
'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=40102-164554&t=wRHARmXHLT2f3NjB-4',
172+
{
173+
props: {
174+
children: figma.children('*'),
175+
},
176+
example: ({children}) => <PageHeader.ContextAreaActions>{children}</PageHeader.ContextAreaActions>,
177+
},
178+
)

‎packages/react/src/SelectPanel/SelectPanel.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ interface SelectPanelBaseProps {
7474
subtitle?: string | React.ReactElement
7575
onOpenChange: (
7676
open: boolean,
77-
gesture: 'anchor-click' | 'anchor-key-press' | 'click-outside' | 'escape' | 'selection',
77+
gesture: 'anchor-click' | 'anchor-key-press' | 'click-outside' | 'escape' | 'selection' | 'cancel',
7878
) => void
7979
placeholder?: string
8080
// TODO: Make `inputLabel` required in next major version
@@ -333,6 +333,10 @@ export function SelectPanel({
333333
[onOpenChange],
334334
)
335335

336+
const onCancelRequested = useCallback(() => {
337+
onOpenChange(false, 'cancel')
338+
}, [onOpenChange])
339+
336340
const renderMenuAnchor = useMemo(() => {
337341
if (renderAnchor === null) {
338342
return null
@@ -473,7 +477,7 @@ export function SelectPanel({
473477
className={classes.ResponsiveCloseButton}
474478
onClick={() => {
475479
onCancel()
476-
onClose('escape')
480+
onCancelRequested()
477481
}}
478482
/>
479483
)}
@@ -523,7 +527,7 @@ export function SelectPanel({
523527
size="medium"
524528
onClick={() => {
525529
onCancel()
526-
onClose('escape')
530+
onCancelRequested()
527531
}}
528532
>
529533
Cancel

‎packages/react/src/experimental/SelectPanel2/SelectPanel.docs.json

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@
22
"id": "select_panel_v2",
33
"docsId": "select_panel",
44
"name": "SelectPanel",
5-
"status": "draft",
5+
"status": "deprecated",
66
"a11yReviewed": false,
77
"stories": [
8-
{"id": "experimental-components-selectpanel-examples--minimal"},
9-
{"id": "experimental-components-selectpanel-examples--short-select-panel"},
10-
{"id": "experimental-components-selectpanel-features--instant-selection-variant"},
11-
{"id": "experimental-components-selectpanel-features--with-warning"},
12-
{"id": "experimental-components-selectpanel-examples--open-from-menu"},
13-
{"id": "experimental-components-selectpanel-examples--with-groups"},
14-
{"id": "experimental-components-selectpanel-examples--async-search-with-use-transition"},
15-
{"id": "experimental-components-selectpanel-examples--async-with-suspended-list"},
16-
{"id": "experimental-components-selectpanel-examples--with-filter-buttons"}
8+
{"id": "deprecated-components-selectpanel-examples--minimal"},
9+
{"id": "deprecated-components-selectpanel-examples--short-select-panel"},
10+
{"id": "deprecated-components-selectpanel-features--instant-selection-variant"},
11+
{"id": "deprecated-components-selectpanel-features--with-warning"},
12+
{"id": "deprecated-components-selectpanel-examples--open-from-menu"},
13+
{"id": "deprecated-components-selectpanel-examples--with-groups"},
14+
{"id": "deprecated-components-selectpanel-examples--async-search-with-use-transition"},
15+
{"id": "deprecated-components-selectpanel-examples--async-with-suspended-list"},
16+
{"id": "deprecated-components-selectpanel-examples--with-filter-buttons"}
1717
],
1818
"importPath": "@primer/react/experimental",
1919
"props": [

‎packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
import data from './mock-story-data'
1919

2020
export default {
21-
title: 'Experimental/Components/SelectPanel/Examples',
21+
title: 'Deprecated/Components/SelectPanel/Examples',
2222
component: SelectPanel,
2323
}
2424

@@ -298,8 +298,8 @@ const SuspendedActionList: React.FC<{query: string}> = ({query}) => {
298298
)
299299
}
300300

301-
/*
302-
`data` is already pre-fetched with the issue
301+
/*
302+
`data` is already pre-fetched with the issue
303303
`users` are fetched async on search
304304
*/
305305
const SearchableUserList: React.FC<{
@@ -347,8 +347,8 @@ const SearchableUserList: React.FC<{
347347
)
348348
}
349349

350-
/*
351-
`data` is already pre-fetched with the issue
350+
/*
351+
`data` is already pre-fetched with the issue
352352
`users` are fetched async on search
353353
*/
354354
export const AsyncSearchWithUseTransition = () => {
@@ -931,8 +931,8 @@ export const CreateNewRow = () => {
931931

932932
const itemsToShow = query ? filteredLabels : data.labels.sort(sortingFn)
933933

934-
/*
935-
Controlled state + Create new label Dialog
934+
/*
935+
Controlled state + Create new label Dialog
936936
We only have to do this until https://github.com/primer/react/pull/3840 is merged
937937
*/
938938
const [panelOpen, setPanelOpen] = React.useState(false)

‎packages/react/src/experimental/SelectPanel2/SelectPanel.features.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {TagIcon, GearIcon, ArrowBothIcon} from '@primer/octicons-react'
1515
import data from './mock-story-data'
1616

1717
export default {
18-
title: 'Experimental/Components/SelectPanel/Features',
18+
title: 'Deprecated/Components/SelectPanel/Features',
1919
component: SelectPanel,
2020
}
2121

‎packages/react/src/experimental/SelectPanel2/SelectPanel.playground.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {ActionList, Box} from '../../index'
66
import data from './mock-story-data'
77

88
export default {
9-
title: 'Experimental/Components/SelectPanel/Playground',
9+
title: 'Deprecated/Components/SelectPanel/Playground',
1010
component: SelectPanel,
1111

1212
args: {

‎packages/react/src/experimental/SelectPanel2/SelectPanel.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {ActionList, Box} from '../../index'
44
import data from './mock-story-data'
55

66
export default {
7-
title: 'Experimental/Components/SelectPanel',
7+
title: 'Deprecated/Components/SelectPanel',
88
component: SelectPanel,
99
}
1010

0 commit comments

Comments
 (0)