@primer/react 38.3.0 → 38.4.0-rc.08b86440d
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Potentially problematic release.
This version of @primer/react might be problematic. Click here for more details.
- package/CHANGELOG.md +17 -0
- package/dist/Banner/Banner-f672cdf9.css +2 -0
- package/dist/Banner/Banner-f672cdf9.css.map +1 -0
- package/dist/Banner/Banner.d.ts +8 -0
- package/dist/Banner/Banner.d.ts.map +1 -1
- package/dist/Banner/Banner.js +2 -0
- package/dist/Banner/Banner.module.css.js +1 -1
- package/dist/Banner/index.d.ts +1 -0
- package/dist/Banner/index.d.ts.map +1 -1
- package/dist/DataTable/Pagination.d.ts.map +1 -1
- package/dist/DataTable/Pagination.js +181 -187
- package/dist/FeatureFlags/DefaultFeatureFlags.d.ts.map +1 -1
- package/dist/FeatureFlags/DefaultFeatureFlags.js +0 -1
- package/dist/FilteredActionList/FilteredActionList.js +15 -13
- package/dist/LabelGroup/LabelGroup.d.ts.map +1 -1
- package/dist/LabelGroup/LabelGroup.js +12 -5
- package/dist/SegmentedControl/{SegmentedControl-5cfe12ab.css → SegmentedControl-6389d0da.css} +2 -2
- package/dist/SegmentedControl/SegmentedControl-6389d0da.css.map +1 -0
- package/dist/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControl.js +11 -5
- package/dist/SegmentedControl/SegmentedControl.module.css.js +1 -1
- package/dist/SegmentedControl/SegmentedControlButton.d.ts +2 -0
- package/dist/SegmentedControl/SegmentedControlButton.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlButton.js +104 -82
- package/dist/SegmentedControl/SegmentedControlIconButton.d.ts +2 -0
- package/dist/SegmentedControl/SegmentedControlIconButton.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlIconButton.js +122 -181
- package/dist/TreeView/TreeView.d.ts.map +1 -1
- package/dist/TreeView/TreeView.js +5 -7
- package/dist/experimental/SelectPanel2/SelectPanel.d.ts.map +1 -1
- package/dist/experimental/SelectPanel2/SelectPanel.js +4 -5
- package/generated/components.json +592 -1082
- package/package.json +10 -10
- package/dist/Banner/Banner-c1744c4b.css +0 -2
- package/dist/Banner/Banner-c1744c4b.css.map +0 -1
- package/dist/SegmentedControl/SegmentedControl-5cfe12ab.css.map +0 -1
- package/dist/internal/components/LiveRegion.d.ts +0 -14
- package/dist/internal/components/LiveRegion.d.ts.map +0 -1
- package/dist/internal/components/LiveRegion.js +0 -130
|
@@ -9,8 +9,10 @@
|
|
|
9
9
|
"a11yReviewed": "2025-01-08",
|
|
10
10
|
"stories": [
|
|
11
11
|
{
|
|
12
|
-
"id": "
|
|
13
|
-
|
|
12
|
+
"id": "components-actionbar--default"
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"id": "experimental-components-actionbar--default"
|
|
14
16
|
}
|
|
15
17
|
],
|
|
16
18
|
"importPath": "@primer/react",
|
|
@@ -151,148 +153,112 @@
|
|
|
151
153
|
"a11yReviewed": "2025-01-08",
|
|
152
154
|
"stories": [
|
|
153
155
|
{
|
|
154
|
-
"id": "components-actionlist--default"
|
|
155
|
-
"code": "() => (\n <ActionList>\n <ActionList.Item>Copy link</ActionList.Item>\n <ActionList.Item>Quote reply</ActionList.Item>\n <ActionList.Item>Edit comment</ActionList.Item>\n </ActionList>\n)"
|
|
156
|
+
"id": "components-actionlist--default"
|
|
156
157
|
},
|
|
157
158
|
{
|
|
158
|
-
"id": "components-actionlist-features--simple-list"
|
|
159
|
-
"code": "() => (\n <ActionList>\n <ActionList.Item>Copy link</ActionList.Item>\n <ActionList.Item>Quote reply</ActionList.Item>\n <ActionList.Item>Edit comment</ActionList.Item>\n <ActionList.Divider />\n <ActionList.Item variant=\"danger\">Delete file</ActionList.Item>\n </ActionList>\n)"
|
|
159
|
+
"id": "components-actionlist-features--simple-list"
|
|
160
160
|
},
|
|
161
161
|
{
|
|
162
|
-
"id": "components-actionlist-features--with-visual-list-heading"
|
|
163
|
-
"code": "() => (\n <ActionList>\n <ActionList.Heading as=\"h2\" size=\"small\">\n Filter by\n </ActionList.Heading>\n <ActionList.Group>\n <ActionList.GroupHeading as=\"h3\">Repositories</ActionList.GroupHeading>\n <ActionList.Item onSelect={() => {}}>\n <ActionList.LeadingVisual>\n <FileDirectoryIcon />\n </ActionList.LeadingVisual>\n app/assets/modules\n </ActionList.Item>\n <ActionList.Item onSelect={() => {}}>\n <ActionList.LeadingVisual>\n <FileDirectoryIcon />\n </ActionList.LeadingVisual>\n src/react/components\n </ActionList.Item>\n <ActionList.Item onSelect={() => {}}>\n <ActionList.LeadingVisual>\n <FileDirectoryIcon />\n </ActionList.LeadingVisual>\n memex/shared-ui/components\n </ActionList.Item>\n <ActionList.Item onSelect={() => {}}>\n <ActionList.LeadingVisual>\n <FileDirectoryIcon />\n </ActionList.LeadingVisual>\n views/assets/modules\n </ActionList.Item>\n </ActionList.Group>\n\n <ActionList.Group>\n <ActionList.GroupHeading as=\"h3\">Advanced</ActionList.GroupHeading>\n <ActionList.Item onSelect={() => {}}>\n <ActionList.LeadingVisual>\n <PlusCircleIcon />\n </ActionList.LeadingVisual>\n Owner\n </ActionList.Item>\n <ActionList.Item onSelect={() => {}}>\n <ActionList.LeadingVisual>\n <PlusCircleIcon />\n </ActionList.LeadingVisual>\n Symbol\n </ActionList.Item>\n <ActionList.Item onSelect={() => {}}>\n <ActionList.LeadingVisual>\n <PlusCircleIcon />\n </ActionList.LeadingVisual>\n Exclude archived\n </ActionList.Item>\n </ActionList.Group>\n </ActionList>\n)"
|
|
162
|
+
"id": "components-actionlist-features--with-visual-list-heading"
|
|
164
163
|
},
|
|
165
164
|
{
|
|
166
|
-
"id": "components-actionlist-features--with-custom-heading"
|
|
167
|
-
"code": "() => (\n <>\n <Heading as=\"h1\" id=\"list-heading\" className={classes.HeadingLarge}>\n Details\n </Heading>\n <ActionList aria-labelledby=\"list-heading\">\n <ActionList.LinkItem href=\"https://github.com/primer/react#readme\">\n <ActionList.LeadingVisual>\n <BookIcon />\n </ActionList.LeadingVisual>\n Readme\n </ActionList.LinkItem>\n <ActionList.LinkItem href=\"https://github.com/primer/react/blob/main/LICENSE\">\n <ActionList.LeadingVisual>\n <LawIcon />\n </ActionList.LeadingVisual>\n MIT License\n </ActionList.LinkItem>\n <ActionList.LinkItem href=\"https://github.com/primer/react/stargazers\">\n <ActionList.LeadingVisual>\n <StarIcon />\n </ActionList.LeadingVisual>\n <strong>1.5k</strong> stars\n </ActionList.LinkItem>\n <ActionList.LinkItem href=\"https://github.com/primer/react/watchers\">\n <ActionList.LeadingVisual>\n <EyeIcon />\n </ActionList.LeadingVisual>\n <strong>21</strong> watching\n </ActionList.LinkItem>\n <ActionList.LinkItem href=\"https://github.com/primer/react/network/members\">\n <ActionList.LeadingVisual>\n <RepoForkedIcon />\n </ActionList.LeadingVisual>\n <strong>225</strong> forks\n </ActionList.LinkItem>\n </ActionList>\n </>\n)"
|
|
165
|
+
"id": "components-actionlist-features--with-custom-heading"
|
|
168
166
|
},
|
|
169
167
|
{
|
|
170
|
-
"id": "components-actionlist-features--with-icons"
|
|
171
|
-
"code": "() => (\n <ActionList>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <LinkIcon />\n </ActionList.LeadingVisual>\n github.com/primer\n </ActionList.Item>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <LawIcon />\n </ActionList.LeadingVisual>\n MIT License\n </ActionList.Item>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <StarIcon />\n </ActionList.LeadingVisual>\n 256 stars\n </ActionList.Item>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <RepoForkedIcon />\n </ActionList.LeadingVisual>\n 3 forks\n </ActionList.Item>\n <ActionList.Item variant=\"danger\">\n <ActionList.LeadingVisual>\n <AlertIcon />\n </ActionList.LeadingVisual>\n 4 vulnerabilities\n </ActionList.Item>\n </ActionList>\n)"
|
|
168
|
+
"id": "components-actionlist-features--with-icons"
|
|
172
169
|
},
|
|
173
170
|
{
|
|
174
|
-
"id": "components-actionlist-features--with-avatars"
|
|
175
|
-
"code": "() => (\n <ActionList>\n {users.map((user) => (\n <ActionList.Item key={user.login}>\n <ActionList.LeadingVisual>\n <Avatar src={`https://github.com/${user.login}.png`} />\n </ActionList.LeadingVisual>\n {user.login}\n </ActionList.Item>\n ))}\n </ActionList>\n)"
|
|
171
|
+
"id": "components-actionlist-features--with-avatars"
|
|
176
172
|
},
|
|
177
173
|
{
|
|
178
|
-
"id": "components-actionlist-features--item-dividers"
|
|
179
|
-
"code": "() => (\n <ActionList showDividers>\n <ActionList.Item>Copy link</ActionList.Item>\n <ActionList.Item>Quote reply</ActionList.Item>\n <ActionList.Item>Edit comment</ActionList.Item>\n </ActionList>\n)"
|
|
174
|
+
"id": "components-actionlist-features--item-dividers"
|
|
180
175
|
},
|
|
181
176
|
{
|
|
182
|
-
"id": "components-actionlist-features--single-divider"
|
|
183
|
-
"code": "() => (\n <ActionList>\n <ActionList.Item>Copy link</ActionList.Item>\n <ActionList.Item>Quote reply</ActionList.Item>\n <ActionList.Item>Edit comment</ActionList.Item>\n <ActionList.Divider />\n <ActionList.Item variant=\"danger\">Delete file</ActionList.Item>\n </ActionList>\n)"
|
|
177
|
+
"id": "components-actionlist-features--single-divider"
|
|
184
178
|
},
|
|
185
179
|
{
|
|
186
|
-
"id": "components-actionlist-features--inline-description"
|
|
187
|
-
"code": "() => (\n <ActionList>\n {users.map((user) => (\n <ActionList.Item key={user.login}>\n <ActionList.LeadingVisual>\n <Avatar src={`https://github.com/${user.login}.png`} />\n </ActionList.LeadingVisual>\n {user.login}\n <ActionList.Description>{user.name}</ActionList.Description>\n </ActionList.Item>\n ))}\n </ActionList>\n)"
|
|
180
|
+
"id": "components-actionlist-features--inline-description"
|
|
188
181
|
},
|
|
189
182
|
{
|
|
190
|
-
"id": "components-actionlist-features--block-description"
|
|
191
|
-
"code": "() => (\n <ActionList>\n {users.map((user) => (\n <ActionList.Item key={user.login}>\n <ActionList.LeadingVisual>\n <Avatar src={`https://github.com/${user.login}.png`} />\n </ActionList.LeadingVisual>\n {user.login}\n <ActionList.Description variant=\"block\">\n {user.name}\n </ActionList.Description>\n </ActionList.Item>\n ))}\n </ActionList>\n)"
|
|
183
|
+
"id": "components-actionlist-features--block-description"
|
|
192
184
|
},
|
|
193
185
|
{
|
|
194
|
-
"id": "components-actionlist-features--single-select"
|
|
195
|
-
"code": "() => {\n const [selectedIndex, setSelectedIndex] = React.useState(0)\n return (\n <ActionList\n selectionVariant=\"single\"\n showDividers\n role=\"menu\"\n aria-label=\"Project\"\n >\n {projects.map((project, index) => (\n <ActionList.Item\n key={index}\n role=\"menuitemradio\"\n selected={index === selectedIndex}\n aria-checked={index === selectedIndex}\n onSelect={() => setSelectedIndex(index)}\n >\n <ActionList.LeadingVisual>\n <TableIcon />\n </ActionList.LeadingVisual>\n {project.name}\n <ActionList.Description variant=\"block\">\n {project.scope}\n </ActionList.Description>\n </ActionList.Item>\n ))}\n </ActionList>\n )\n}"
|
|
186
|
+
"id": "components-actionlist-features--single-select"
|
|
196
187
|
},
|
|
197
188
|
{
|
|
198
|
-
"id": "components-actionlist-features--inactive-single-select"
|
|
199
|
-
"code": "() => {\n const [selectedIndex, setSelectedIndex] = React.useState(1)\n return (\n <ActionList\n selectionVariant=\"single\"\n showDividers\n role=\"menu\"\n aria-label=\"Project\"\n >\n {/* menuitem because state is inactive */}\n <ActionList.Item\n role=\"menuitem\"\n selected={false}\n inactiveText=\"Unavailable due to an outage\"\n >\n Inactive item\n </ActionList.Item>\n <ActionList.Item\n role=\"menuitemradio\"\n selected={selectedIndex === 1}\n aria-checked={selectedIndex === 1}\n onSelect={() => setSelectedIndex(1)}\n >\n Item 2\n </ActionList.Item>\n </ActionList>\n )\n}"
|
|
189
|
+
"id": "components-actionlist-features--inactive-single-select"
|
|
200
190
|
},
|
|
201
191
|
{
|
|
202
|
-
"id": "components-actionlist-features--multi-select"
|
|
203
|
-
"code": "() => {\n const [selectedIndices, setSelectedIndices] = React.useState<number[]>([0])\n const handleSelect = (index: number) => {\n if (selectedIndices.includes(index)) {\n setSelectedIndices(selectedIndices.filter((i) => i !== index))\n } else {\n setSelectedIndices([...selectedIndices, index])\n }\n }\n return (\n <ActionList\n selectionVariant=\"multiple\"\n showDividers\n role=\"menu\"\n aria-label=\"Project\"\n >\n {projects.map((project, index) => (\n <ActionList.Item\n key={index}\n role=\"menuitemcheckbox\"\n selected={selectedIndices.includes(index)}\n aria-checked={selectedIndices.includes(index)}\n onSelect={() => handleSelect(index)}\n disabled={index === 3 ? true : undefined}\n >\n <ActionList.LeadingVisual>\n <TableIcon />\n </ActionList.LeadingVisual>\n {project.name}\n <ActionList.Description variant=\"block\">\n {project.scope}\n </ActionList.Description>\n </ActionList.Item>\n ))}\n </ActionList>\n )\n}"
|
|
192
|
+
"id": "components-actionlist-features--multi-select"
|
|
204
193
|
},
|
|
205
194
|
{
|
|
206
|
-
"id": "components-actionlist-features--listbox-single-select"
|
|
207
|
-
"code": "() => {\n const [selectedIndice, setSelectedIndice] = React.useState<number>(0)\n const handleSelect = (index: number) => {\n setSelectedIndice(index)\n }\n return (\n <ActionList selectionVariant=\"single\" role=\"listbox\" aria-label=\"Projects\">\n {projects.map((project, index) => (\n <ActionList.Item\n key={index}\n selected={selectedIndice === index}\n aria-checked={selectedIndice === index}\n onSelect={() => handleSelect(index)}\n disabled={index === 3 ? true : undefined}\n role=\"option\"\n >\n <ActionList.LeadingVisual>\n <TableIcon />\n </ActionList.LeadingVisual>\n {project.name}\n <ActionList.Description variant=\"block\">\n {project.scope}\n </ActionList.Description>\n </ActionList.Item>\n ))}\n </ActionList>\n )\n}"
|
|
195
|
+
"id": "components-actionlist-features--listbox-single-select"
|
|
208
196
|
},
|
|
209
197
|
{
|
|
210
|
-
"id": "components-actionlist-features--listbox-multi-select"
|
|
211
|
-
"code": "() => {\n const [selectedIndices, setSelectedIndices] = React.useState<number[]>([0])\n const handleSelect = (index: number) => {\n if (selectedIndices.includes(index)) {\n setSelectedIndices(selectedIndices.filter((i) => i !== index))\n } else {\n setSelectedIndices([...selectedIndices, index])\n }\n }\n return (\n <ActionList role=\"menu\" selectionVariant=\"multiple\" aria-label=\"Projects\">\n {projects.map((project, index) => (\n <ActionList.Item\n key={index}\n role=\"menuitemcheckbox\"\n selected={selectedIndices.includes(index)}\n aria-checked={selectedIndices.includes(index)}\n onSelect={() => handleSelect(index)}\n disabled={index === 3 ? true : undefined}\n >\n <ActionList.LeadingVisual>\n <TableIcon />\n </ActionList.LeadingVisual>\n {project.name}\n <ActionList.Description variant=\"block\">\n {project.scope}\n </ActionList.Description>\n </ActionList.Item>\n ))}\n </ActionList>\n )\n}"
|
|
198
|
+
"id": "components-actionlist-features--listbox-multi-select"
|
|
212
199
|
},
|
|
213
200
|
{
|
|
214
|
-
"id": "components-actionlist-features--with-dynamic-content"
|
|
215
|
-
"code": "() => {\n const [isTrue, setIsTrue] = React.useState(false)\n return (\n <FeatureFlags\n flags={{\n primer_react_action_list_item_as_button: true,\n }}\n >\n <ActionList>\n <ActionList.Item\n onSelect={() => {\n setIsTrue(!isTrue)\n }}\n >\n Activated? {isTrue ? 'Yes' : 'No'}\n </ActionList.Item>\n </ActionList>\n </FeatureFlags>\n )\n}"
|
|
201
|
+
"id": "components-actionlist-features--with-dynamic-content"
|
|
216
202
|
},
|
|
217
203
|
{
|
|
218
|
-
"id": "components-actionlist-features--disabled-selected-multiselect"
|
|
219
|
-
"code": "() => (\n <ActionList selectionVariant=\"multiple\" role=\"menu\" aria-label=\"Project\">\n <ActionList.Item role=\"menuitemcheckbox\" selected aria-checked disabled>\n Selected disabled item\n </ActionList.Item>\n <ActionList.Item\n role=\"menuitemcheckbox\"\n selected={false}\n aria-checked={false}\n >\n Item 2\n </ActionList.Item>\n </ActionList>\n)"
|
|
204
|
+
"id": "components-actionlist-features--disabled-selected-multiselect"
|
|
220
205
|
},
|
|
221
206
|
{
|
|
222
|
-
"id": "components-actionlist-features--disabled-multiselect"
|
|
223
|
-
"code": "() => (\n <ActionList selectionVariant=\"multiple\" role=\"menu\" aria-label=\"Project\">\n <ActionList.Item\n role=\"menuitemcheckbox\"\n selected={false}\n aria-checked={false}\n disabled\n >\n Disabled item\n </ActionList.Item>\n <ActionList.Item\n role=\"menuitemcheckbox\"\n selected={false}\n aria-checked={false}\n >\n Item 2\n </ActionList.Item>\n </ActionList>\n)"
|
|
207
|
+
"id": "components-actionlist-features--disabled-multiselect"
|
|
224
208
|
},
|
|
225
209
|
{
|
|
226
|
-
"id": "components-actionlist-features--inactive-multiselect"
|
|
227
|
-
"code": "() => {\n const [selectedIndices, setSelectedIndices] = React.useState<number[]>([0])\n const handleSelect = (index: number) => {\n if (selectedIndices.includes(index)) {\n setSelectedIndices(selectedIndices.filter((i) => i !== index))\n } else {\n setSelectedIndices([...selectedIndices, index])\n }\n }\n return (\n <ActionList selectionVariant=\"multiple\" role=\"menu\" aria-label=\"Project\">\n {/* menuitem because state is inactive */}\n <ActionList.Item\n role=\"menuitem\"\n selected={false}\n inactiveText=\"Unavailable due to an outage\"\n >\n Inactive item\n </ActionList.Item>\n <ActionList.Item\n role=\"menuitemcheckbox\"\n selected={selectedIndices.includes(1)}\n aria-checked={selectedIndices.includes(1)}\n onSelect={() => handleSelect(1)}\n >\n Item 2\n </ActionList.Item>\n </ActionList>\n )\n}"
|
|
210
|
+
"id": "components-actionlist-features--inactive-multiselect"
|
|
228
211
|
},
|
|
229
212
|
{
|
|
230
|
-
"id": "components-actionlist-features--disabled-item"
|
|
231
|
-
"code": "() => {\n const [selectedIndex, setSelectedIndex] = React.useState(0)\n return (\n <ActionList\n selectionVariant=\"single\"\n showDividers\n role=\"menu\"\n aria-label=\"Project\"\n >\n {projects.map((project, index) => (\n <ActionList.Item\n key={index}\n role=\"menuitemradio\"\n selected={index === selectedIndex}\n aria-checked={index === selectedIndex}\n onSelect={() => setSelectedIndex(index)}\n disabled={index === 1}\n >\n <ActionList.LeadingVisual>\n <TableIcon />\n </ActionList.LeadingVisual>\n {project.name}\n <ActionList.Description variant=\"block\">\n {project.scope}\n </ActionList.Description>\n </ActionList.Item>\n ))}\n </ActionList>\n )\n}"
|
|
213
|
+
"id": "components-actionlist-features--disabled-item"
|
|
232
214
|
},
|
|
233
215
|
{
|
|
234
|
-
"id": "components-actionlist-features--inactive-item"
|
|
235
|
-
"code": "() => {\n return (\n <ActionList aria-label=\"Project\">\n {projects.map((project, index) => (\n <ActionList.Item\n key={index}\n inactiveText={\n index === 1 ? 'Unavailable due to an outage' : undefined\n }\n >\n <ActionList.LeadingVisual>\n <TableIcon />\n </ActionList.LeadingVisual>\n {project.name}\n <ActionList.Description variant=\"block\">\n {project.scope}\n </ActionList.Description>\n </ActionList.Item>\n ))}\n </ActionList>\n )\n}"
|
|
216
|
+
"id": "components-actionlist-features--inactive-item"
|
|
236
217
|
},
|
|
237
218
|
{
|
|
238
|
-
"id": "components-actionlist-features--loading-item"
|
|
239
|
-
"code": "() => {\n return (\n <ActionList aria-label=\"Project\">\n {projects.map((project, index) => (\n <ActionList.Item key={index} loading={index === 1}>\n {project.name}\n <ActionList.Description variant=\"block\">\n {project.scope}\n </ActionList.Description>\n </ActionList.Item>\n ))}\n </ActionList>\n )\n}"
|
|
219
|
+
"id": "components-actionlist-features--loading-item"
|
|
240
220
|
},
|
|
241
221
|
{
|
|
242
|
-
"id": "components-actionlist-features--links"
|
|
243
|
-
"code": "() => (\n <ActionList>\n <ActionList.Heading as=\"h1\" className={classes.HeadingSmall}>\n Details\n </ActionList.Heading>\n <ActionList.LinkItem href=\"https://github.com/primer/react#readme\">\n <ActionList.LeadingVisual>\n <BookIcon />\n </ActionList.LeadingVisual>\n Readme\n </ActionList.LinkItem>\n <ActionList.LinkItem href=\"https://github.com/primer/react/blob/main/LICENSE\">\n <ActionList.LeadingVisual>\n <LawIcon />\n </ActionList.LeadingVisual>\n MIT License\n </ActionList.LinkItem>\n <ActionList.LinkItem href=\"https://github.com/primer/react/stargazers\">\n <ActionList.LeadingVisual>\n <StarIcon />\n </ActionList.LeadingVisual>\n <strong>1.5k</strong> stars\n </ActionList.LinkItem>\n <ActionList.LinkItem href=\"https://github.com/primer/react/watchers\">\n <ActionList.LeadingVisual>\n <EyeIcon />\n </ActionList.LeadingVisual>\n <strong>21</strong> watching\n </ActionList.LinkItem>\n <ActionList.LinkItem href=\"https://github.com/primer/react/network/members\">\n <ActionList.LeadingVisual>\n <RepoForkedIcon />\n </ActionList.LeadingVisual>\n <strong>225</strong> forks\n </ActionList.LinkItem>\n </ActionList>\n)"
|
|
222
|
+
"id": "components-actionlist-features--links"
|
|
244
223
|
},
|
|
245
224
|
{
|
|
246
|
-
"id": "components-actionlist-features--custom-item-children"
|
|
247
|
-
"code": "() => (\n <ActionList>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <ArrowRightIcon />\n </ActionList.LeadingVisual>\n <Label>Choose this one</Label>\n <ActionList.TrailingVisual>\n <ArrowLeftIcon />\n </ActionList.TrailingVisual>\n </ActionList.Item>\n </ActionList>\n)"
|
|
225
|
+
"id": "components-actionlist-features--custom-item-children"
|
|
248
226
|
},
|
|
249
227
|
{
|
|
250
|
-
"id": "components-actionlist-features--text-wrap-and-truncation"
|
|
251
|
-
"code": "() => (\n <div className={classes.BoxWithMaxWidth}>\n <ActionList showDividers>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <ArrowRightIcon />\n </ActionList.LeadingVisual>\n Block Description. Long text should wrap\n <ActionList.Description variant=\"block\">\n This description is long, but it is block so it wraps\n </ActionList.Description>\n <ActionList.TrailingVisual>\n <ArrowLeftIcon />\n </ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <ArrowRightIcon />\n </ActionList.LeadingVisual>\n Inline Description\n <ActionList.Description truncate>\n This description gets truncated because it is inline with truncation\n </ActionList.Description>\n <ActionList.TrailingVisual>\n <ArrowLeftIcon />\n </ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <ArrowRightIcon />\n </ActionList.LeadingVisual>\n Description with truncation and complex children\n <ActionList.Description truncate>\n With <strong>bold</strong> and <em>italic</em> text, and it should\n truncate if it is too long\n </ActionList.Description>\n <ActionList.TrailingVisual>\n <ArrowLeftIcon />\n </ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <ArrowRightIcon />\n </ActionList.LeadingVisual>\n Inline Description\n <ActionList.Description>\n This description wraps because it is inline without truncation\n </ActionList.Description>\n <ActionList.TrailingVisual>\n <ArrowLeftIcon />\n </ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <ArrowRightIcon />\n </ActionList.LeadingVisual>\n Really long text without a description should wrap so it wraps\n <ActionList.TrailingVisual>\n <ArrowLeftIcon />\n </ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <ArrowRightIcon />\n </ActionList.LeadingVisual>\n SomethingSomething/SomethingElse.Some.Thing.Lalala.la\n <ActionList.TrailingVisual>\n <ArrowLeftIcon />\n </ActionList.TrailingVisual>\n </ActionList.Item>\n </ActionList>\n </div>\n)"
|
|
228
|
+
"id": "components-actionlist-features--text-wrap-and-truncation"
|
|
252
229
|
},
|
|
253
230
|
{
|
|
254
|
-
"id": "components-actionlist-features--conditional-children"
|
|
255
|
-
"code": "() => {\n type reviewerType = {\n name: string\n id?: string\n type?: string\n login?: string\n slug?: string\n members?: number\n }\n const potentialReviewers: reviewerType[] = [...teams, ...users]\n return (\n <ActionList showDividers>\n {potentialReviewers.map((reviewer, index) => (\n <ActionList.Item key={index}>\n <ActionList.LeadingVisual>\n {reviewer.type === 'team' ? (\n <Avatar\n src={`https://avatars.githubusercontent.com/t/${reviewer.id}`}\n />\n ) : (\n <Avatar\n src={`https://avatars.githubusercontent.com/${reviewer.login}`}\n />\n )}\n </ActionList.LeadingVisual>\n {reviewer.login || reviewer.slug}\n {reviewer.type === 'team' ? (\n <ActionList.Description variant=\"block\">\n {reviewer.name}\n </ActionList.Description>\n ) : (\n <ActionList.Description>{reviewer.name}</ActionList.Description>\n )}\n {reviewer.type === 'team' && (\n <ActionList.TrailingVisual>\n <PeopleIcon />\n {reviewer.members}\n </ActionList.TrailingVisual>\n )}\n </ActionList.Item>\n ))}\n </ActionList>\n )\n}"
|
|
231
|
+
"id": "components-actionlist-features--conditional-children"
|
|
256
232
|
},
|
|
257
233
|
{
|
|
258
|
-
"id": "components-actionlist-features--child-with-side-effects"
|
|
259
|
-
"code": "() => {\n const user = users[0]\n const [selected, setSelected] = React.useState(true)\n const SideEffectDescription = () => {\n const [seconds, setSeconds] = React.useState(0)\n React.useEffect(() => {\n const fn = () => setSeconds((s) => s + 1)\n const interval = window.setInterval(fn, 1000)\n return () => window.clearInterval(interval)\n }, [])\n return <>{seconds} seconds passed</>\n }\n return (\n <ActionList\n selectionVariant=\"multiple\"\n role=\"listbox\"\n aria-label=\"Assignees\"\n >\n <ActionList.Item\n selected={selected}\n onSelect={() => setSelected(!selected)}\n role=\"option\"\n >\n <ActionList.LeadingVisual>\n <Avatar src={`https://avatars.githubusercontent.com/${user.login}`} />\n </ActionList.LeadingVisual>\n {user.login}\n <ActionList.Description>\n <SideEffectDescription />\n </ActionList.Description>\n </ActionList.Item>\n </ActionList>\n )\n}"
|
|
234
|
+
"id": "components-actionlist-features--child-with-side-effects"
|
|
260
235
|
},
|
|
261
236
|
{
|
|
262
|
-
"id": "components-actionlist-features--inside-overlay"
|
|
263
|
-
"code": "() => {\n const [open, setOpen] = React.useState(false)\n const toggle = () => setOpen(!open)\n return (\n <AnchoredOverlay\n open={open}\n onOpen={toggle}\n onClose={toggle}\n renderAnchor={(props) => (\n <button type=\"button\" {...props}>\n toggle overlay\n </button>\n )}\n >\n <ActionList role=\"menu\">\n <ActionList.Item role=\"menuitem\">\n Use your arrow keys\n <ActionList.TrailingVisual>↓</ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item role=\"menuitem\">\n keep going\n <ActionList.TrailingVisual>↓</ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item role=\"menuitem\">\n more more\n <ActionList.TrailingVisual>↓</ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Divider />\n <ActionList.Item variant=\"danger\" role=\"menuitem\">\n now go up!\n <ActionList.TrailingVisual>↑</ActionList.TrailingVisual>\n </ActionList.Item>\n </ActionList>\n </AnchoredOverlay>\n )\n}"
|
|
237
|
+
"id": "components-actionlist-features--inside-overlay"
|
|
264
238
|
},
|
|
265
239
|
{
|
|
266
|
-
"id": "components-actionlist-features--group-with-subtle-title"
|
|
267
|
-
"code": "() => {\n const [assignees, setAssignees] = React.useState(users.slice(0, 1))\n const toggleAssignee = (assignee: (typeof users)[number]) => {\n const assigneeIndex = assignees.findIndex((a) => a.login === assignee.login)\n if (assigneeIndex === -1) setAssignees([...assignees, assignee])\n else setAssignees(assignees.filter((_, index) => index !== assigneeIndex))\n }\n return (\n <ActionList\n selectionVariant=\"multiple\"\n role=\"menu\"\n showDividers\n aria-label=\"Reviewers\"\n >\n <ActionList.Group>\n <ActionList.GroupHeading>Everyone</ActionList.GroupHeading>\n {users.slice(2).map((user) => (\n <ActionList.Item\n role=\"menuitemcheckbox\"\n key={user.login}\n selected={Boolean(\n assignees.find((assignee) => assignee.login === user.login),\n )}\n aria-checked={Boolean(\n assignees.find((assignee) => assignee.login === user.login),\n )}\n onSelect={() => toggleAssignee(user)}\n >\n <ActionList.LeadingVisual>\n <Avatar src={`https://github.com/${user.login}.png`} />\n </ActionList.LeadingVisual>\n {user.login}\n <ActionList.Description>{user.name}</ActionList.Description>\n </ActionList.Item>\n ))}\n </ActionList.Group>\n </ActionList>\n )\n}"
|
|
240
|
+
"id": "components-actionlist-features--group-with-subtle-title"
|
|
268
241
|
},
|
|
269
242
|
{
|
|
270
|
-
"id": "components-actionlist-features--group-with-filled-title"
|
|
271
|
-
"code": "() => {\n const [assignees, setAssignees] = React.useState(users.slice(0, 1))\n const toggleAssignee = (assignee: (typeof users)[number]) => {\n const assigneeIndex = assignees.findIndex((a) => a.login === assignee.login)\n if (assigneeIndex === -1) setAssignees([...assignees, assignee])\n else setAssignees(assignees.filter((_, index) => index !== assigneeIndex))\n }\n return (\n <ActionList\n selectionVariant=\"multiple\"\n role=\"menu\"\n showDividers\n aria-label=\"Reviewers\"\n >\n <ActionList.Group>\n <ActionList.GroupHeading variant=\"filled\">\n Everyone\n </ActionList.GroupHeading>\n {users.slice(2).map((user) => (\n <ActionList.Item\n role=\"menuitemcheckbox\"\n key={user.login}\n selected={Boolean(\n assignees.find((assignee) => assignee.login === user.login),\n )}\n aria-checked={Boolean(\n assignees.find((assignee) => assignee.login === user.login),\n )}\n onSelect={() => toggleAssignee(user)}\n >\n <ActionList.LeadingVisual>\n <Avatar src={`https://github.com/${user.login}.png`} />\n </ActionList.LeadingVisual>\n {user.login}\n <ActionList.Description>{user.name}</ActionList.Description>\n </ActionList.Item>\n ))}\n </ActionList.Group>\n </ActionList>\n )\n}"
|
|
243
|
+
"id": "components-actionlist-features--group-with-filled-title"
|
|
272
244
|
},
|
|
273
245
|
{
|
|
274
|
-
"id": "components-actionlist-features--with-custom-trailing-visuals"
|
|
275
|
-
"code": "() => (\n <ActionList>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <IssueOpenedIcon />\n </ActionList.LeadingVisual>\n Issues\n <ActionList.TrailingVisual>\n <CounterLabel>20</CounterLabel>\n </ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <GitPullRequestIcon />\n </ActionList.LeadingVisual>\n PRs\n <ActionList.TrailingVisual>\n <CounterLabel>12</CounterLabel>\n </ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <ProjectIcon />\n </ActionList.LeadingVisual>\n Projects\n <ActionList.TrailingVisual>\n <CounterLabel>2</CounterLabel>\n </ActionList.TrailingVisual>\n </ActionList.Item>\n </ActionList>\n)"
|
|
246
|
+
"id": "components-actionlist-features--with-custom-trailing-visuals"
|
|
276
247
|
},
|
|
277
248
|
{
|
|
278
|
-
"id": "components-actionlist-features--with-keyboard-shortcuts"
|
|
279
|
-
"code": "() => (\n <ActionList>\n <ActionList.Item>\n New file\n <ActionList.TrailingVisual>\n <KeybindingHint keys=\"Mod+N\" />\n </ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item>\n Open file\n <ActionList.TrailingVisual>\n <KeybindingHint keys=\"Mod+O\" />\n </ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item>\n Save\n <ActionList.TrailingVisual>\n <KeybindingHint keys=\"Mod+S\" />\n </ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Divider />\n <ActionList.Item variant=\"danger\">\n Delete\n <ActionList.TrailingVisual>\n <KeybindingHint keys=\"Mod+D\" />\n </ActionList.TrailingVisual>\n </ActionList.Item>\n </ActionList>\n)"
|
|
249
|
+
"id": "components-actionlist-features--with-keyboard-shortcuts"
|
|
280
250
|
},
|
|
281
251
|
{
|
|
282
|
-
"id": "components-actionlist-features--with-trailing-count"
|
|
283
|
-
"code": "() => (\n <ActionList>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <IssueOpenedIcon />\n </ActionList.LeadingVisual>\n Open issues\n <ActionList.TrailingVisual>\n <CounterLabel>24</CounterLabel>\n </ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <GitPullRequestIcon />\n </ActionList.LeadingVisual>\n Pull requests\n <ActionList.TrailingVisual>\n <CounterLabel>8</CounterLabel>\n </ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <ProjectIcon />\n </ActionList.LeadingVisual>\n Projects\n <ActionList.TrailingVisual>\n <CounterLabel>3</CounterLabel>\n </ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item variant=\"danger\">\n <ActionList.LeadingVisual>\n <AlertIcon />\n </ActionList.LeadingVisual>\n Alerts\n <ActionList.TrailingVisual>\n <CounterLabel>12</CounterLabel>\n </ActionList.TrailingVisual>\n </ActionList.Item>\n </ActionList>\n)"
|
|
252
|
+
"id": "components-actionlist-features--with-trailing-count"
|
|
284
253
|
},
|
|
285
254
|
{
|
|
286
|
-
"id": "components-actionlist-features--with-trailing-action"
|
|
287
|
-
"code": "() => {\n const [loadingState, setLoadingState] = React.useState(false)\n\n // Auto-toggle every 2.5 seconds to continuously show transitions\n React.useEffect(() => {\n const interval = setInterval(() => {\n setLoadingState((prev) => !prev)\n }, 2500)\n return () => clearInterval(interval)\n }, [])\n return (\n <FeatureFlags\n flags={{\n primer_react_action_list_item_as_button: true,\n }}\n >\n <ActionList>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <FileDirectoryIcon />\n </ActionList.LeadingVisual>\n Item 1 (with default TrailingAction)\n <ActionList.TrailingAction\n label=\"Expand sidebar\"\n icon={ArrowLeftIcon}\n />\n </ActionList.Item>\n <ActionList.Item>\n Item 2 (with link TrailingAction)\n <ActionList.TrailingAction\n as=\"a\"\n href=\"#\"\n label=\"Some action 1\"\n icon={ArrowRightIcon}\n />\n </ActionList.Item>\n <ActionList.Item>\n Item 3\n <ActionList.Description>\n This is an inline description.\n </ActionList.Description>\n <ActionList.TrailingAction label=\"Some action 2\" icon={BookIcon} />\n </ActionList.Item>\n <ActionList.Item>\n Item 4\n <ActionList.Description variant=\"block\">\n This is a block description.\n </ActionList.Description>\n <ActionList.TrailingAction label=\"Some action 3\" icon={BookIcon} />\n </ActionList.Item>\n <ActionList.Item>\n Item 5\n <ActionList.Description variant=\"block\">\n This is a block description.\n </ActionList.Description>\n <ActionList.TrailingAction label=\"Some action 4\" />\n </ActionList.Item>\n <ActionList.Item>\n Item 6\n <ActionList.TrailingAction href=\"#\" as=\"a\" label=\"Some action 5\" />\n </ActionList.Item>\n <ActionList.Item>\n Icon button loading state\n <ActionList.Description>\n Shows how IconButton maintains width and centers spinner when\n loading\n </ActionList.Description>\n <ActionList.TrailingAction\n label=\"Process item\"\n icon={ArrowRightIcon}\n loading\n />\n </ActionList.Item>\n <ActionList.Item>\n Icon button with transitions\n <ActionList.Description>\n Automatically toggles loading state every 2.5 seconds to show\n transitions\n </ActionList.Description>\n <ActionList.TrailingAction\n label=\"Toggle loading\"\n icon={ArrowRightIcon}\n loading={loadingState}\n />\n </ActionList.Item>\n <ActionList.Item>\n Text button loading state\n <ActionList.Description>\n Shows how text button aligns spinner to the right and preserves\n width\n </ActionList.Description>\n <ActionList.TrailingAction label=\"Save changes\" loading />\n </ActionList.Item>\n <ActionList.Item>\n Text button with transitions\n <ActionList.Description>\n Automatically toggles loading state every 2.5 seconds to show\n transitions\n </ActionList.Description>\n <ActionList.TrailingAction\n label=\"Apply settings\"\n loading={loadingState}\n />\n </ActionList.Item>\n <ActionList.LinkItem href=\"#\">\n LinkItem 1\n <ActionList.Description>\n with TrailingAction this is a long description and should not cause\n horizontal scroll on smaller screen sizes\n </ActionList.Description>\n <ActionList.TrailingAction label=\"Another action\" />\n </ActionList.LinkItem>\n <ActionList.LinkItem href=\"#\">\n LinkItem 2\n <ActionList.Description>\n with TrailingVisual this is a long description and should not cause\n horizontal scroll on smaller screen sizes\n </ActionList.Description>\n <ActionList.TrailingVisual>\n <TableIcon />\n </ActionList.TrailingVisual>\n </ActionList.LinkItem>\n <ActionList.Item inactiveText=\"Unavailable due to an outage\">\n Inactive Item\n <ActionList.Description>With TrailingAction</ActionList.Description>\n <ActionList.TrailingAction\n as=\"a\"\n href=\"#\"\n label=\"Some action 8\"\n icon={ArrowRightIcon}\n />\n </ActionList.Item>\n </ActionList>\n </FeatureFlags>\n )\n}"
|
|
255
|
+
"id": "components-actionlist-features--with-trailing-action"
|
|
288
256
|
},
|
|
289
257
|
{
|
|
290
|
-
"id": "components-actionlist-features--full-variant"
|
|
291
|
-
"code": "() => (\n <ActionList variant=\"full\">\n <ActionList.Item>Copy link</ActionList.Item>\n <ActionList.Item>Quote reply</ActionList.Item>\n <ActionList.Item>Edit comment</ActionList.Item>\n <ActionList.Divider />\n <ActionList.Item variant=\"danger\">Delete file</ActionList.Item>\n </ActionList>\n)"
|
|
258
|
+
"id": "components-actionlist-features--full-variant"
|
|
292
259
|
},
|
|
293
260
|
{
|
|
294
|
-
"id": "components-actionlist-features--large-item"
|
|
295
|
-
"code": "() => (\n <ActionList>\n <ActionList.Item size=\"large\">Large item</ActionList.Item>\n <ActionList.Item size=\"large\">\n Large item\n <ActionList.Description>With inline description</ActionList.Description>\n </ActionList.Item>\n <ActionList.Item size=\"large\">\n Large item\n <ActionList.Description variant=\"block\">\n With block description\n </ActionList.Description>\n </ActionList.Item>\n </ActionList>\n)"
|
|
261
|
+
"id": "components-actionlist-features--large-item"
|
|
296
262
|
}
|
|
297
263
|
],
|
|
298
264
|
"importPath": "@primer/react",
|
|
@@ -649,32 +615,25 @@
|
|
|
649
615
|
"a11yReviewed": "2025-01-08",
|
|
650
616
|
"stories": [
|
|
651
617
|
{
|
|
652
|
-
"id": "components-actionmenu--default"
|
|
653
|
-
"code": "() => (\n <ActionMenu>\n <ActionMenu.Button>Open menu</ActionMenu.Button>\n <ActionMenu.Overlay width=\"medium\">\n <ActionList>\n <ActionList.Item onSelect={() => alert('Copy link clicked')}>\n Copy link\n <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item onSelect={() => alert('Quote reply clicked')}>\n Quote reply\n <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item onSelect={() => alert('Edit comment clicked')}>\n Edit comment\n <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Divider />\n <ActionList.Item\n variant=\"danger\"\n onSelect={() => alert('Delete file clicked')}\n >\n Delete file\n <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>\n </ActionList.Item>\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n)"
|
|
618
|
+
"id": "components-actionmenu--default"
|
|
654
619
|
},
|
|
655
620
|
{
|
|
656
|
-
"id": "components-actionmenu-features--links-and-actions"
|
|
657
|
-
"code": "() => (\n <ActionMenu>\n <ActionMenu.Button>Open menu</ActionMenu.Button>\n <ActionMenu.Overlay width=\"auto\">\n <ActionList>\n <ActionList.Item onSelect={() => alert('Workflows clicked')}>\n Workflows\n <ActionList.LeadingVisual>\n <WorkflowIcon />\n </ActionList.LeadingVisual>\n </ActionList.Item>\n <ActionList.Item onSelect={() => alert('Archived items clicked')}>\n Archived items\n <ActionList.LeadingVisual>\n <ArchiveIcon />\n </ActionList.LeadingVisual>\n </ActionList.Item>\n <ActionList.LinkItem href=\"/\">\n Settings\n <ActionList.LeadingVisual>\n <GearIcon />\n </ActionList.LeadingVisual>\n </ActionList.LinkItem>\n <ActionList.Item onSelect={() => alert('Make a copy clicked')}>\n Make a copy\n <ActionList.LeadingVisual>\n <CopyIcon />\n </ActionList.LeadingVisual>\n </ActionList.Item>\n <ActionList.Divider />\n <ActionList.Group>\n <ActionList.GroupHeading>GitHub projects</ActionList.GroupHeading>\n <ActionList.LinkItem href=\"/\">\n What's new\n <ActionList.LeadingVisual>\n <RocketIcon />\n </ActionList.LeadingVisual>\n </ActionList.LinkItem>\n <ActionList.LinkItem href=\"/\">\n Give feedback\n <ActionList.LeadingVisual>\n <CommentIcon />\n </ActionList.LeadingVisual>\n </ActionList.LinkItem>\n <ActionList.LinkItem href=\"/\">\n GitHub Docs\n <ActionList.LeadingVisual>\n <BookIcon />\n </ActionList.LeadingVisual>\n </ActionList.LinkItem>\n </ActionList.Group>\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n)"
|
|
621
|
+
"id": "components-actionmenu-features--links-and-actions"
|
|
658
622
|
},
|
|
659
623
|
{
|
|
660
|
-
"id": "components-actionmenu-features--single-select"
|
|
661
|
-
"code": "() => {\n const options = [\n {\n name: 'Fast forward',\n },\n {\n name: 'Recursive',\n },\n {\n name: 'Ours',\n },\n {\n name: 'Octopus',\n },\n {\n name: 'Resolve',\n },\n {\n name: 'Subtree',\n },\n ]\n const [selectedIndex, setSelectedIndex] = React.useState(0)\n const selectedType = options[selectedIndex]\n return (\n <ActionMenu>\n <ActionMenu.Button>\n <span className={classes.MutedText}>Options:</span> {selectedType.name}\n </ActionMenu.Button>\n <ActionMenu.Overlay width=\"auto\">\n <ActionList selectionVariant=\"single\">\n {options.map((options, index) => (\n <ActionList.Item\n key={index}\n selected={index === selectedIndex}\n onSelect={() => setSelectedIndex(index)}\n >\n {options.name}\n </ActionList.Item>\n ))}\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n )\n}"
|
|
624
|
+
"id": "components-actionmenu-features--single-select"
|
|
662
625
|
},
|
|
663
626
|
{
|
|
664
|
-
"id": "components-actionmenu-features--multi-select"
|
|
665
|
-
"code": "() => {\n type Option = {\n name: string\n selected: boolean\n }\n const [options, setOptions] = React.useState<Option[]>([\n {\n name: 'Show code folding buttons',\n selected: true,\n },\n {\n name: 'Wrap lines',\n selected: false,\n },\n {\n name: 'Center content',\n selected: false,\n },\n ])\n const toggle = (name: string) => {\n setOptions(\n options.map((option) => {\n if (option.name === name) option.selected = !option.selected\n return option\n }),\n )\n }\n return (\n <ActionMenu>\n <ActionMenu.Button>Display</ActionMenu.Button>\n <ActionMenu.Overlay width=\"auto\">\n <ActionList selectionVariant=\"multiple\">\n {options.map((options) => (\n <ActionList.Item\n key={options.name}\n selected={options.selected}\n onSelect={() => toggle(options.name)}\n >\n {options.name}\n </ActionList.Item>\n ))}\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n )\n}"
|
|
627
|
+
"id": "components-actionmenu-features--multi-select"
|
|
666
628
|
},
|
|
667
629
|
{
|
|
668
|
-
"id": "components-actionmenu-features--inactive-items"
|
|
669
|
-
"code": "() => (\n <ActionMenu>\n <ActionMenu.Button>Open menu</ActionMenu.Button>\n <ActionMenu.Overlay width=\"auto\">\n <ActionList>\n <ActionList.Item\n onSelect={() => alert('Workflows clicked')}\n inactiveText=\"Unavailable due to an outage\"\n >\n Workflows\n <ActionList.LeadingVisual>\n <WorkflowIcon />\n </ActionList.LeadingVisual>\n </ActionList.Item>\n <ActionList.Item\n onSelect={() => alert('Archived items clicked')}\n inactiveText=\"Unavailable due to an outage\"\n >\n Archived items\n <ActionList.LeadingVisual>\n <ArchiveIcon />\n </ActionList.LeadingVisual>\n </ActionList.Item>\n <ActionList.LinkItem\n href=\"/\"\n inactiveText=\"Unavailable due to an outage\"\n >\n Settings\n <ActionList.LeadingVisual>\n <GearIcon />\n </ActionList.LeadingVisual>\n </ActionList.LinkItem>\n <ActionList.Item\n onSelect={() => alert('Make a copy clicked')}\n inactiveText=\"Unavailable due to an outage\"\n >\n Make a copy\n <ActionList.LeadingVisual>\n <CopyIcon />\n </ActionList.LeadingVisual>\n </ActionList.Item>\n <ActionList.Divider />\n <ActionList.Group>\n <ActionList.GroupHeading>Github projects</ActionList.GroupHeading>\n <ActionList.LinkItem href=\"/\">\n What's new\n <ActionList.LeadingVisual>\n <RocketIcon />\n </ActionList.LeadingVisual>\n </ActionList.LinkItem>\n <ActionList.LinkItem href=\"/\">\n Give feedback\n <ActionList.LeadingVisual>\n <CommentIcon />\n </ActionList.LeadingVisual>\n </ActionList.LinkItem>\n <ActionList.LinkItem href=\"/\">\n GitHub Docs\n <ActionList.LeadingVisual>\n <BookIcon />\n </ActionList.LeadingVisual>\n </ActionList.LinkItem>\n </ActionList.Group>\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n)"
|
|
630
|
+
"id": "components-actionmenu-features--inactive-items"
|
|
670
631
|
},
|
|
671
632
|
{
|
|
672
|
-
"id": "components-actionmenu-features--loading-items"
|
|
673
|
-
"code": "() => (\n <ActionMenu>\n <ActionMenu.Button>Open menu</ActionMenu.Button>\n <ActionMenu.Overlay width=\"auto\">\n <ActionList>\n <ActionList.Item onSelect={() => alert('Workflows clicked')} loading>\n Workflows\n <ActionList.LeadingVisual>\n <WorkflowIcon />\n </ActionList.LeadingVisual>\n </ActionList.Item>\n <ActionList.Item\n onSelect={() => alert('Archived items clicked')}\n loading\n >\n Archived items\n <ActionList.LeadingVisual>\n <ArchiveIcon />\n </ActionList.LeadingVisual>\n </ActionList.Item>\n <ActionList.Item onSelect={() => alert('Make a copy clicked')} loading>\n Make a copy\n <ActionList.LeadingVisual>\n <CopyIcon />\n </ActionList.LeadingVisual>\n </ActionList.Item>\n <ActionList.Divider />\n <ActionList.Group>\n <ActionList.GroupHeading>Github projects</ActionList.GroupHeading>\n <ActionList.LinkItem href=\"/\">\n What's new\n <ActionList.LeadingVisual>\n <RocketIcon />\n </ActionList.LeadingVisual>\n </ActionList.LinkItem>\n <ActionList.LinkItem href=\"/\">\n Give feedback\n <ActionList.LeadingVisual>\n <CommentIcon />\n </ActionList.LeadingVisual>\n </ActionList.LinkItem>\n <ActionList.LinkItem href=\"/\">\n GitHub Docs\n <ActionList.LeadingVisual>\n <BookIcon />\n </ActionList.LeadingVisual>\n </ActionList.LinkItem>\n </ActionList.Group>\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n)"
|
|
633
|
+
"id": "components-actionmenu-features--loading-items"
|
|
674
634
|
},
|
|
675
635
|
{
|
|
676
|
-
"id": "components-actionmenu-features--submenus"
|
|
677
|
-
"code": "() => (\n <ActionMenu>\n <ActionMenu.Button>Edit</ActionMenu.Button>\n <ActionMenu.Overlay>\n <ActionList>\n <ActionList.Item>Cut</ActionList.Item>\n <ActionList.Item>Copy</ActionList.Item>\n <ActionList.Item>Paste</ActionList.Item>\n <ActionMenu>\n <ActionMenu.Anchor>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <SparkleFillIcon />\n </ActionList.LeadingVisual>\n Paste special\n </ActionList.Item>\n </ActionMenu.Anchor>\n <ActionMenu.Overlay>\n <ActionList>\n <ActionList.Item>Paste plain text</ActionList.Item>\n <ActionList.Item>Paste formulas</ActionList.Item>\n <ActionList.Item>Paste with formatting</ActionList.Item>\n <ActionMenu>\n <ActionMenu.Anchor>\n <ActionList.Item>Paste from</ActionList.Item>\n </ActionMenu.Anchor>\n <ActionMenu.Overlay>\n <ActionList>\n <ActionList.Item>Current clipboard</ActionList.Item>\n <ActionList.Item>History</ActionList.Item>\n <ActionList.Item>Another device</ActionList.Item>\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n)"
|
|
636
|
+
"id": "components-actionmenu-features--submenus"
|
|
678
637
|
}
|
|
679
638
|
],
|
|
680
639
|
"importPath": "@primer/react",
|
|
@@ -791,52 +750,40 @@
|
|
|
791
750
|
"a11yReviewed": "2025-01-08",
|
|
792
751
|
"stories": [
|
|
793
752
|
{
|
|
794
|
-
"id": "components-anchoredoverlay--default"
|
|
795
|
-
"code": "() => {\n const [open, setOpen] = useState(false)\n return (\n <AnchoredOverlay\n open={open}\n onOpen={() => setOpen(true)}\n onClose={() => setOpen(false)}\n renderAnchor={(props) => <Button {...props}>Button</Button>}\n overlayProps={{\n role: 'dialog',\n 'aria-modal': true,\n 'aria-label': 'User Card Overlay',\n style: {\n minWidth: '320px',\n },\n }}\n focusZoneSettings={{\n disabled: true,\n }}\n preventOverflow={false}\n >\n {hoverCard}\n </AnchoredOverlay>\n )\n}"
|
|
753
|
+
"id": "components-anchoredoverlay--default"
|
|
796
754
|
},
|
|
797
755
|
{
|
|
798
|
-
"id": "components-anchoredoverlay-features--portal-inside-scrolling-element"
|
|
799
|
-
"code": "(args: Args) => {\n const rows = 20\n const columns = 10\n return (\n <HeaderAndLayout>\n <table>\n <tbody>\n {Array(rows)\n .fill(null)\n .map((_, i) => (\n <tr key={i}>\n {Array(columns)\n .fill(null)\n .map((_1, j) => (\n <td key={`${i}${j}`}>\n <div className={classes.PlaygroundCell}>\n <Playground\n {...{\n ...args,\n portalContainerName: 'scrollingPortal',\n }}\n />\n </div>\n </td>\n ))}\n </tr>\n ))}\n </tbody>\n </table>\n </HeaderAndLayout>\n )\n}"
|
|
756
|
+
"id": "components-anchoredoverlay-features--portal-inside-scrolling-element"
|
|
800
757
|
},
|
|
801
758
|
{
|
|
802
|
-
"id": "components-anchoredoverlay-features--custom-anchor-id"
|
|
803
|
-
"code": "() => {\n const [open, setOpen] = useState(false)\n return (\n <AnchoredOverlay\n open={open}\n onOpen={() => setOpen(true)}\n onClose={() => setOpen(false)}\n renderAnchor={(props) => <Button {...props}>Button</Button>}\n anchorId=\"my-custom-anchor-id\"\n overlayProps={{\n role: 'dialog',\n 'aria-modal': true,\n 'aria-label': 'User Card Overlay',\n className: classes.Overlay,\n }}\n focusZoneSettings={{\n disabled: true,\n }}\n preventOverflow={false}\n >\n <div className={classes.FlexColFill}>{hoverCard}</div>\n </AnchoredOverlay>\n )\n}"
|
|
759
|
+
"id": "components-anchoredoverlay-features--custom-anchor-id"
|
|
804
760
|
},
|
|
805
761
|
{
|
|
806
|
-
"id": "components-anchoredoverlay-features--height"
|
|
807
|
-
"code": "() => {\n const [open, setOpen] = useState(false)\n return (\n <AnchoredOverlay\n open={open}\n onOpen={() => setOpen(true)}\n onClose={() => setOpen(false)}\n renderAnchor={(props) => <Button {...props}>Button</Button>}\n height=\"large\"\n overlayProps={{\n role: 'dialog',\n 'aria-modal': true,\n 'aria-label': 'User Card Overlay',\n className: classes.Overlay,\n }}\n focusZoneSettings={{\n disabled: true,\n }}\n preventOverflow={false}\n >\n <div className={classes.FlexColFill}>{hoverCard}</div>\n </AnchoredOverlay>\n )\n}"
|
|
762
|
+
"id": "components-anchoredoverlay-features--height"
|
|
808
763
|
},
|
|
809
764
|
{
|
|
810
|
-
"id": "components-anchoredoverlay-features--width"
|
|
811
|
-
"code": "() => {\n const [open, setOpen] = useState(false)\n return (\n <AnchoredOverlay\n open={open}\n onOpen={() => setOpen(true)}\n onClose={() => setOpen(false)}\n renderAnchor={(props) => <Button {...props}>Button</Button>}\n width=\"large\"\n overlayProps={{\n role: 'dialog',\n 'aria-modal': true,\n 'aria-label': 'User Card Overlay',\n className: classes.Overlay,\n }}\n focusZoneSettings={{\n disabled: true,\n }}\n preventOverflow={false}\n >\n <div className={classes.FlexColFill}>{hoverCard}</div>\n </AnchoredOverlay>\n )\n}"
|
|
765
|
+
"id": "components-anchoredoverlay-features--width"
|
|
812
766
|
},
|
|
813
767
|
{
|
|
814
|
-
"id": "components-anchoredoverlay-features--anchor-alignment"
|
|
815
|
-
"code": "() => {\n const [open, setOpen] = useState(false)\n return (\n <AnchoredOverlay\n open={open}\n onOpen={() => setOpen(true)}\n onClose={() => setOpen(false)}\n renderAnchor={(props) => (\n <Button {...props} block>\n Button\n </Button>\n )}\n align=\"center\"\n overlayProps={{\n role: 'dialog',\n 'aria-modal': true,\n 'aria-label': 'User Card Overlay',\n className: classes.Overlay,\n }}\n focusZoneSettings={{\n disabled: true,\n }}\n preventOverflow={false}\n >\n <div className={classes.FlexColFill}>{hoverCard}</div>\n </AnchoredOverlay>\n )\n}"
|
|
768
|
+
"id": "components-anchoredoverlay-features--anchor-alignment"
|
|
816
769
|
},
|
|
817
770
|
{
|
|
818
|
-
"id": "components-anchoredoverlay-features--anchor-side"
|
|
819
|
-
"code": "() => {\n const [open, setOpen] = useState(false)\n return (\n <AnchoredOverlay\n open={open}\n onOpen={() => setOpen(true)}\n onClose={() => setOpen(false)}\n renderAnchor={(props) => <Button {...props}>Button</Button>}\n side=\"outside-right\"\n overlayProps={{\n role: 'dialog',\n 'aria-modal': true,\n 'aria-label': 'User Card Overlay',\n className: classes.Overlay,\n }}\n focusZoneSettings={{\n disabled: true,\n }}\n preventOverflow={false}\n >\n <div className={classes.FlexColFill}>{hoverCard}</div>\n </AnchoredOverlay>\n )\n}"
|
|
771
|
+
"id": "components-anchoredoverlay-features--anchor-side"
|
|
820
772
|
},
|
|
821
773
|
{
|
|
822
|
-
"id": "components-anchoredoverlay-features--offset-position-from-anchor"
|
|
823
|
-
"code": "() => {\n const [open, setOpen] = useState(false)\n return (\n <AnchoredOverlay\n open={open}\n onOpen={() => setOpen(true)}\n onClose={() => setOpen(false)}\n renderAnchor={(props) => <Button {...props}>Button</Button>}\n anchorOffset={100}\n overlayProps={{\n role: 'dialog',\n 'aria-modal': true,\n 'aria-label': 'User Card Overlay',\n className: classes.Overlay,\n }}\n focusZoneSettings={{\n disabled: true,\n }}\n preventOverflow={false}\n >\n <div className={classes.FlexColFill}>{hoverCard}</div>\n </AnchoredOverlay>\n )\n}"
|
|
774
|
+
"id": "components-anchoredoverlay-features--offset-position-from-anchor"
|
|
824
775
|
},
|
|
825
776
|
{
|
|
826
|
-
"id": "components-anchoredoverlay-features--offset-alignment-from-anchor"
|
|
827
|
-
"code": "() => {\n const [open, setOpen] = useState(false)\n return (\n <AnchoredOverlay\n open={open}\n onOpen={() => setOpen(true)}\n onClose={() => setOpen(false)}\n renderAnchor={(props) => <Button {...props}>Button</Button>}\n alignmentOffset={100}\n overlayProps={{\n role: 'dialog',\n 'aria-modal': true,\n 'aria-label': 'User Card Overlay',\n className: classes.Overlay,\n }}\n focusZoneSettings={{\n disabled: true,\n }}\n preventOverflow={false}\n >\n <div className={classes.FlexColFill}>{hoverCard}</div>\n </AnchoredOverlay>\n )\n}"
|
|
777
|
+
"id": "components-anchoredoverlay-features--offset-alignment-from-anchor"
|
|
828
778
|
},
|
|
829
779
|
{
|
|
830
|
-
"id": "components-anchoredoverlay-features--focus-trap-overrides"
|
|
831
|
-
"code": "() => {\n const initialFocusRef = useRef<HTMLButtonElement>(null)\n const [open, setOpen] = useState(false)\n return (\n <AnchoredOverlay\n open={open}\n onOpen={() => setOpen(true)}\n onClose={() => setOpen(false)}\n renderAnchor={(props) => <Button {...props}>Button</Button>}\n focusTrapSettings={{\n initialFocusRef,\n }}\n overlayProps={{\n role: 'dialog',\n 'aria-modal': true,\n 'aria-label': 'Focus Trap Demo Overlay',\n className: classes.Overlay,\n }}\n focusZoneSettings={{\n disabled: true,\n }}\n preventOverflow={false}\n >\n <Button>First button</Button>\n <Button ref={initialFocusRef}>Initial focus</Button>\n </AnchoredOverlay>\n )\n}"
|
|
780
|
+
"id": "components-anchoredoverlay-features--focus-trap-overrides"
|
|
832
781
|
},
|
|
833
782
|
{
|
|
834
|
-
"id": "components-anchoredoverlay-features--focus-zone-overrides"
|
|
835
|
-
"code": "() => {\n const [open, setOpen] = useState(false)\n return (\n <AnchoredOverlay\n open={open}\n onOpen={() => setOpen(true)}\n onClose={() => setOpen(false)}\n renderAnchor={(props) => <Button {...props}>Button</Button>}\n focusZoneSettings={{\n bindKeys: FocusKeys.JK,\n }}\n overlayProps={{\n role: 'dialog',\n 'aria-modal': true,\n 'aria-label': 'Focus Zone Demo Overlay',\n className: classes.Overlay,\n }}\n preventOverflow={false}\n >\n <p>\n Use <kbd>J</kbd> and <kbd>K</kbd> keys to move focus.\n </p>\n <Button>First</Button>\n <Button>Second</Button>\n <Button>Third</Button>\n </AnchoredOverlay>\n )\n}"
|
|
783
|
+
"id": "components-anchoredoverlay-features--focus-zone-overrides"
|
|
836
784
|
},
|
|
837
785
|
{
|
|
838
|
-
"id": "components-anchoredoverlay-features--overlay-props-overrides"
|
|
839
|
-
"code": "() => {\n const [open, setOpen] = useState(false)\n return (\n <AnchoredOverlay\n open={open}\n onOpen={() => setOpen(true)}\n onClose={() => setOpen(false)}\n renderAnchor={(props) => <Button {...props}>Button</Button>}\n overlayProps={{\n overflow: 'auto',\n maxHeight: 'xsmall',\n role: 'dialog',\n 'aria-modal': true,\n 'aria-label': 'User Card Overlay',\n className: classes.Overlay,\n }}\n focusZoneSettings={{\n disabled: true,\n }}\n preventOverflow={false}\n >\n <div>Overlay props have been overridden to set: </div>\n <pre>\n <li>overflow: `auto`</li>\n <li>maxHeight: `xsmall`</li>\n </pre>\n <div className={classes.FlexColFill}>{hoverCard}</div>\n </AnchoredOverlay>\n )\n}"
|
|
786
|
+
"id": "components-anchoredoverlay-features--overlay-props-overrides"
|
|
840
787
|
}
|
|
841
788
|
],
|
|
842
789
|
"importPath": "@primer/react",
|
|
@@ -984,48 +931,37 @@
|
|
|
984
931
|
"a11yReviewed": "2025-01-08",
|
|
985
932
|
"stories": [
|
|
986
933
|
{
|
|
987
|
-
"id": "components-autocomplete--default"
|
|
988
|
-
"code": "() => {\n return (\n <form\n className={classes.DefaultForm}\n onSubmit={(event) => event.preventDefault()}\n >\n <FormControl>\n <FormControl.Label id=\"autocompleteLabel-default\">\n Label\n </FormControl.Label>\n <Autocomplete>\n <Autocomplete.Input />\n <Autocomplete.Overlay>\n <Autocomplete.Menu\n selectedItemIds={[]}\n aria-labelledby=\"autocompleteLabel-default\"\n items={items}\n />\n </Autocomplete.Overlay>\n </Autocomplete>\n </FormControl>\n </form>\n )\n}"
|
|
934
|
+
"id": "components-autocomplete--default"
|
|
989
935
|
},
|
|
990
936
|
{
|
|
991
|
-
"id": "components-autocomplete-features--with-token-input"
|
|
992
|
-
"code": "() => {\n const [tokens, setTokens] = useState<Datum[]>([])\n const selectedTokenIds = tokens.map((token) => token.id)\n const [selectedItemIds, setSelectedItemIds] =\n useState<Array<string>>(selectedTokenIds)\n const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n setTokens(tokens.filter((token) => token.id !== tokenId))\n setSelectedItemIds(selectedItemIds.filter((id) => id !== tokenId))\n }\n const onSelectedChange = (newlySelectedItems: Datum | Datum[]) => {\n if (!Array.isArray(newlySelectedItems)) {\n return\n }\n setSelectedItemIds(newlySelectedItems.map((item) => item.id))\n if (newlySelectedItems.length < selectedItemIds.length) {\n const newlySelectedItemIds = newlySelectedItems.map(({ id }) => id)\n const removedItemIds = selectedTokenIds.filter(\n (id) => !newlySelectedItemIds.includes(id),\n )\n for (const removedItemId of removedItemIds) {\n onTokenRemove(removedItemId)\n }\n return\n }\n setTokens(\n newlySelectedItems.map(({ id, text }) => ({\n id,\n text,\n })),\n )\n }\n return (\n <form className={classes.FormPadding}>\n <FormControl>\n <FormControl.Label id=\"autocompleteLabel\">\n Default label\n </FormControl.Label>\n <Autocomplete>\n <Autocomplete.Input\n as={TextInputTokens}\n tokens={tokens}\n onTokenRemove={onTokenRemove}\n block\n />\n <Autocomplete.Overlay>\n <Autocomplete.Menu\n items={items}\n selectedItemIds={selectedItemIds}\n onSelectedChange={onSelectedChange}\n selectionVariant=\"multiple\"\n aria-labelledby=\"autocompleteLabel\"\n />\n </Autocomplete.Overlay>\n </Autocomplete>\n </FormControl>\n </form>\n )\n}"
|
|
937
|
+
"id": "components-autocomplete-features--with-token-input"
|
|
993
938
|
},
|
|
994
939
|
{
|
|
995
|
-
"id": "components-autocomplete-features--add-new-item"
|
|
996
|
-
"code": "() => {\n const [inputValue, setInputValue] = React.useState<string>('')\n return (\n <form className={classes.FormPadding}>\n <FormControl>\n <FormControl.Label id=\"autocompleteLabel-add-new\">\n Label\n </FormControl.Label>\n <Autocomplete>\n <Autocomplete.Input\n value={inputValue}\n onChange={(e) => {\n setInputValue(e.currentTarget.value)\n }}\n />\n <Autocomplete.Overlay>\n <Autocomplete.Menu\n selectedItemIds={[]}\n aria-labelledby=\"autocompleteLabel-add-new\"\n addNewItem={\n inputValue &&\n !items.map((item) => item.text).includes(inputValue)\n ? {\n text: inputValue,\n id: inputValue,\n handleAddItem: (selectedItem) => {\n // eslint-disable-next-line no-console\n console.log('added item:', selectedItem)\n return\n },\n }\n : undefined\n }\n items={items}\n />\n </Autocomplete.Overlay>\n </Autocomplete>\n </FormControl>\n </form>\n )\n}"
|
|
940
|
+
"id": "components-autocomplete-features--add-new-item"
|
|
997
941
|
},
|
|
998
942
|
{
|
|
999
|
-
"id": "components-autocomplete-features--custom-search-filter-fn"
|
|
1000
|
-
"code": "() => {\n const [filterVal, setFilterVal] = useState<string>('')\n const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n setFilterVal(e.currentTarget.value)\n }\n const customFilterFn = (item: Datum) => item.text.includes(filterVal)\n return (\n <form className={classes.FormPadding}>\n <FormControl>\n <FormControl.Label id=\"autocompleteLabel\">\n Default label\n </FormControl.Label>\n <Autocomplete>\n <Autocomplete.Input onChange={handleChange} />\n <Autocomplete.Overlay>\n <Autocomplete.Menu\n items={items}\n selectedItemIds={[]}\n filterFn={customFilterFn}\n aria-labelledby=\"autocompleteLabel\"\n />\n </Autocomplete.Overlay>\n </Autocomplete>\n <FormControl.Caption>\n Items in dropdown are filtered if their text has no part that matches\n the input value\n </FormControl.Caption>\n </FormControl>\n </form>\n )\n}"
|
|
943
|
+
"id": "components-autocomplete-features--custom-search-filter-fn"
|
|
1001
944
|
},
|
|
1002
945
|
{
|
|
1003
|
-
"id": "components-autocomplete-features--custom-sort-after-menu-close"
|
|
1004
|
-
"code": "() => {\n const [selectedItemIds, setSelectedItemIds] = useState<Array<string>>([])\n const isItemSelected = (itemId: string) => selectedItemIds.includes(itemId)\n const onSelectedChange = (newlySelectedItems: Datum | Datum[]) => {\n if (!Array.isArray(newlySelectedItems)) {\n return\n }\n setSelectedItemIds(newlySelectedItems.map((item) => item.id))\n }\n const customSortFn = (itemIdA: string, itemIdB: string) =>\n isItemSelected(itemIdA) === isItemSelected(itemIdB)\n ? 0\n : isItemSelected(itemIdA)\n ? 1\n : -1\n return (\n <form className={classes.FormPadding}>\n <FormControl>\n <FormControl.Label id=\"autocompleteLabel\">\n Default label\n </FormControl.Label>\n <Autocomplete>\n <Autocomplete.Input />\n <Autocomplete.Overlay>\n <Autocomplete.Menu\n items={items}\n selectedItemIds={selectedItemIds}\n onSelectedChange={onSelectedChange}\n sortOnCloseFn={customSortFn}\n aria-labelledby=\"autocompleteLabel\"\n />\n </Autocomplete.Overlay>\n </Autocomplete>\n <FormControl.Caption>\n When the dropdown closes, selected items are sorted to the end\n </FormControl.Caption>\n </FormControl>\n </form>\n )\n}"
|
|
946
|
+
"id": "components-autocomplete-features--custom-sort-after-menu-close"
|
|
1005
947
|
},
|
|
1006
948
|
{
|
|
1007
|
-
"id": "components-autocomplete-features--with-callback-when-overlay-open-state-changes"
|
|
1008
|
-
"code": "() => {\n const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false)\n const onOpenChange = (isOpen: boolean) => {\n setIsMenuOpen(isOpen)\n }\n return (\n <Stack as=\"form\" padding=\"normal\">\n <FormControl>\n <FormControl.Label id=\"autocompleteLabel\">\n Default label\n </FormControl.Label>\n <Autocomplete>\n <Autocomplete.Input />\n <Autocomplete.Overlay>\n <Autocomplete.Menu\n items={items}\n selectedItemIds={[]}\n onOpenChange={onOpenChange}\n aria-labelledby=\"autocompleteLabel\"\n />\n </Autocomplete.Overlay>\n </Autocomplete>\n </FormControl>\n <div>\n The menu is <strong>{isMenuOpen ? 'opened' : 'closed'}</strong>\n </div>\n </Stack>\n )\n}"
|
|
949
|
+
"id": "components-autocomplete-features--with-callback-when-overlay-open-state-changes"
|
|
1009
950
|
},
|
|
1010
951
|
{
|
|
1011
|
-
"id": "components-autocomplete-features--async-loading-of-items"
|
|
1012
|
-
"code": "(args: FormControlArgs<AutocompleteArgs>) => {\n const { parentArgs, labelArgs, captionArgs, validationArgs } =\n getFormControlArgsByChildComponent(args)\n const { menuArgs, overlayArgs, textInputArgs } = getArgsByChildComponent(args)\n const [loadedItems, setLoadedItems] = useState<Datum[]>([])\n const onOpenChange = (isOpen: boolean) => {\n if (isOpen) {\n setTimeout(() => {\n setLoadedItems(items)\n }, 1500)\n }\n }\n return (\n <form className={classes.FormPadding}>\n <FormControl {...parentArgs}>\n <FormControl.Label id=\"autocompleteLabel\" {...labelArgs} />\n <Autocomplete>\n <Autocomplete.Input\n {...textInputArgs}\n size={textInputArgs.inputSize}\n />\n <Autocomplete.Overlay {...overlayArgs}>\n <Autocomplete.Menu\n items={loadedItems}\n selectedItemIds={[]}\n onOpenChange={onOpenChange}\n aria-labelledby=\"autocompleteLabel\"\n {...menuArgs}\n loading={loadedItems.length === 0}\n />\n </Autocomplete.Overlay>\n </Autocomplete>\n {captionArgs.children && <FormControl.Caption {...captionArgs} />}\n {validationArgs.children && validationArgs.variant && (\n <FormControl.Validation\n {...validationArgs}\n variant={validationArgs.variant}\n />\n )}\n </FormControl>\n </form>\n )\n}"
|
|
952
|
+
"id": "components-autocomplete-features--async-loading-of-items"
|
|
1013
953
|
},
|
|
1014
954
|
{
|
|
1015
|
-
"id": "components-autocomplete-features--rendering-the-menu-outside-an-overlay"
|
|
1016
|
-
"code": "() => {\n return (\n <form className={classes.FormPadding}>\n <FormControl>\n <FormControl.Label id=\"autocompleteLabel\">\n Default label\n </FormControl.Label>\n <Autocomplete>\n <Autocomplete.Input />\n <Autocomplete.Menu\n items={items}\n selectedItemIds={[]}\n aria-labelledby=\"autocompleteLabel\"\n />\n </Autocomplete>\n </FormControl>\n </form>\n )\n}"
|
|
955
|
+
"id": "components-autocomplete-features--rendering-the-menu-outside-an-overlay"
|
|
1017
956
|
},
|
|
1018
957
|
{
|
|
1019
|
-
"id": "components-autocomplete-features--custom-overlay-menu-anchor"
|
|
1020
|
-
"code": "() => {\n const menuAnchorRef = useRef<HTMLElement>(null)\n return (\n <form className={classes.FormPadding}>\n <FormControl>\n <FormControl.Label htmlFor=\"autocompleteInput\" id=\"autocompleteLabel\">\n Default label\n </FormControl.Label>\n <div\n ref={menuAnchorRef as React.RefObject<HTMLDivElement>}\n className={classes.AnchorContainer}\n >\n <Autocomplete>\n <Autocomplete.Input\n id=\"autocompleteInput\"\n aria-describedby=\"autocompleteCaption autocompleteValidation\"\n className={classes.AnchorInput}\n />\n <Autocomplete.Overlay menuAnchorRef={menuAnchorRef}>\n <Autocomplete.Menu\n items={items}\n selectedItemIds={[]}\n aria-labelledby=\"autocompleteLabel\"\n />\n </Autocomplete.Overlay>\n </Autocomplete>\n </div>\n <FormControl.Caption>\n The overlay menu position is anchored to the div with the black border\n instead of to the text input\n </FormControl.Caption>\n </FormControl>\n </form>\n )\n}"
|
|
958
|
+
"id": "components-autocomplete-features--custom-overlay-menu-anchor"
|
|
1021
959
|
},
|
|
1022
960
|
{
|
|
1023
|
-
"id": "components-autocomplete-features--in-overlay-with-custom-scroll-container-ref"
|
|
1024
|
-
"code": "() => {\n const scrollContainerRef = useRef<HTMLElement>(null)\n const inputRef = useRef<HTMLInputElement>(null)\n const triggerRef = useRef<HTMLButtonElement>(null)\n const [isOpen, setIsOpen] = useState(false)\n const [selectedItem, setSelectedItem] = useState<Datum>()\n const handleOpen = () => {\n setIsOpen(true)\n inputRef.current && inputRef.current.focus()\n }\n const selectChange = (item: Datum[] | Datum) => {\n setIsOpen(false)\n if (Array.isArray(item) && item.length) setSelectedItem(item[0])\n triggerRef.current?.focus()\n }\n return (\n <form className={classes.FormPadding}>\n Selected item: {selectedItem ? selectedItem.text : 'none'}\n <AnchoredOverlay\n open={isOpen}\n onOpen={handleOpen}\n onClose={() => setIsOpen(false)}\n width=\"large\"\n focusTrapSettings={{\n initialFocusRef: inputRef,\n }}\n side=\"inside-top\"\n anchorRef={triggerRef}\n renderAnchor={(props) => <Button {...props}>open overlay</Button>}\n preventOverflow={false}\n >\n <Autocomplete>\n <div className={classes.OverlayFlexCol}>\n <div className={classes.OverlayInputBar}>\n <Autocomplete.Input\n ref={inputRef}\n className={classes.OverlayInput}\n block\n aria-label=\"Search\"\n />\n </div>\n <div\n ref={scrollContainerRef as RefObject<HTMLDivElement>}\n className={classes.OverlayScroll}\n >\n <Autocomplete.Menu\n items={items}\n selectedItemIds={[]}\n customScrollContainerRef={scrollContainerRef}\n aria-labelledby=\"autocompleteLabel\"\n onSelectedChange={selectChange}\n />\n </div>\n </div>\n </Autocomplete>\n </AnchoredOverlay>\n </form>\n )\n}"
|
|
961
|
+
"id": "components-autocomplete-features--in-overlay-with-custom-scroll-container-ref"
|
|
1025
962
|
},
|
|
1026
963
|
{
|
|
1027
|
-
"id": "components-autocomplete-features--in-a-dialog"
|
|
1028
|
-
"code": "() => {\n const outerContainerRef = useRef<HTMLDivElement>(null)\n const [mounted, setMounted] = useState(false)\n const [isDialogOpen, setIsDialogOpen] = useState(false)\n useEffect(() => {\n if (outerContainerRef.current instanceof HTMLElement) {\n registerPortalRoot(outerContainerRef.current, 'outerContainer')\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setMounted(true)\n }\n }, [isDialogOpen])\n return (\n <>\n <Button onClick={() => setIsDialogOpen(true)}>Show dialog</Button>\n <Dialog\n aria-label=\"Dialog with autocomplete\"\n id=\"dialog-with-autocomplete\"\n isOpen={isDialogOpen}\n onDismiss={() => setIsDialogOpen(false)}\n >\n <div ref={outerContainerRef}>\n <form className={classes.FormPadding}>\n {mounted ? (\n <FormControl>\n <FormControl.Label id=\"autocompleteLabel\">\n Default label\n </FormControl.Label>\n <Autocomplete>\n <Autocomplete.Input data-testid=\"autocompleteInput\" />\n <Autocomplete.Overlay portalContainerName=\"outerContainer\">\n <Autocomplete.Menu\n items={items}\n selectedItemIds={[]}\n aria-labelledby=\"autocompleteLabel\"\n />\n </Autocomplete.Overlay>\n </Autocomplete>\n </FormControl>\n ) : null}\n </form>\n </div>\n </Dialog>\n <p>\n The Autocomplete.Overlay is portalled to a div inside the Dialog to\n ensure it appears above the dialog in the stacking context.\n </p>\n </>\n )\n}"
|
|
964
|
+
"id": "components-autocomplete-features--in-a-dialog"
|
|
1029
965
|
}
|
|
1030
966
|
],
|
|
1031
967
|
"importPath": "@primer/react",
|
|
@@ -1163,20 +1099,16 @@
|
|
|
1163
1099
|
"a11yReviewed": "2025-01-08",
|
|
1164
1100
|
"stories": [
|
|
1165
1101
|
{
|
|
1166
|
-
"id": "components-avatar--default"
|
|
1167
|
-
"code": "() => <Avatar src=\"https://avatars.githubusercontent.com/u/7143434?v=4\" />"
|
|
1102
|
+
"id": "components-avatar--default"
|
|
1168
1103
|
},
|
|
1169
1104
|
{
|
|
1170
|
-
"id": "components-avatar-features--square"
|
|
1171
|
-
"code": "() => (\n <Avatar\n square\n alt=\"primer\"\n src=\"https://avatars.githubusercontent.com/primer\"\n />\n)"
|
|
1105
|
+
"id": "components-avatar-features--square"
|
|
1172
1106
|
},
|
|
1173
1107
|
{
|
|
1174
|
-
"id": "components-avatar-features--size"
|
|
1175
|
-
"code": "() => (\n <div>\n <Avatar\n size={4}\n alt=\"mona\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n size={8}\n alt=\"mona\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n size={12}\n alt=\"mona\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n size={16}\n alt=\"mona\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n size={20}\n alt=\"mona\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n size={24}\n alt=\"mona\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n size={28}\n alt=\"mona\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n size={32}\n alt=\"mona\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n size={40}\n alt=\"mona\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n size={48}\n alt=\"mona\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n size={56}\n alt=\"mona\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n size={64}\n alt=\"mona\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n </div>\n)"
|
|
1108
|
+
"id": "components-avatar-features--size"
|
|
1176
1109
|
},
|
|
1177
1110
|
{
|
|
1178
|
-
"id": "components-avatar-features--size-responsive"
|
|
1179
|
-
"code": "() => (\n <div>\n <Avatar\n size={{\n narrow: 4,\n regular: 8,\n wide: 12,\n }}\n alt=\"mona\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n size={{\n narrow: 8,\n regular: 12,\n wide: 16,\n }}\n alt=\"mona\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n size={{\n narrow: 12,\n regular: 16,\n wide: 20,\n }}\n alt=\"mona\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n size={{\n narrow: 16,\n regular: 20,\n wide: 24,\n }}\n alt=\"mona\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n size={{\n narrow: 20,\n regular: 24,\n wide: 28,\n }}\n alt=\"mona\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n size={{\n narrow: 24,\n regular: 28,\n wide: 32,\n }}\n alt=\"mona\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n size={{\n narrow: 28,\n regular: 32,\n wide: 40,\n }}\n alt=\"mona\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n size={{\n narrow: 32,\n regular: 40,\n wide: 48,\n }}\n alt=\"mona\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n size={{\n narrow: 40,\n regular: 48,\n wide: 56,\n }}\n alt=\"mona\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n size={{\n narrow: 48,\n regular: 56,\n wide: 64,\n }}\n alt=\"mona\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n </div>\n)"
|
|
1111
|
+
"id": "components-avatar-features--size-responsive"
|
|
1180
1112
|
}
|
|
1181
1113
|
],
|
|
1182
1114
|
"importPath": "@primer/react",
|
|
@@ -1217,36 +1149,31 @@
|
|
|
1217
1149
|
"a11yReviewed": "2025-01-08",
|
|
1218
1150
|
"stories": [
|
|
1219
1151
|
{
|
|
1220
|
-
"id": "components-avatarstack
|
|
1221
|
-
"code": "() => (\n <AvatarStack>\n <Avatar\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/primer\"\n />\n <Avatar\n alt=\"GitHub logo\"\n src=\"https://avatars.githubusercontent.com/github\"\n />\n <Avatar alt=\"Atom logo\" src=\"https://avatars.githubusercontent.com/atom\" />\n <Avatar\n alt=\"GitHub Desktop logo\"\n src=\"https://avatars.githubusercontent.com/desktop\"\n />\n </AvatarStack>\n)"
|
|
1152
|
+
"id": "components-avatarstack--default"
|
|
1222
1153
|
},
|
|
1223
1154
|
{
|
|
1224
|
-
"id": "components-avatarstack-features--align-
|
|
1225
|
-
"code": "() => (\n <AvatarStack alignRight>\n <Avatar\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/primer\"\n />\n <Avatar\n alt=\"GitHub logo\"\n src=\"https://avatars.githubusercontent.com/github\"\n />\n <Avatar alt=\"Atom logo\" src=\"https://avatars.githubusercontent.com/atom\" />\n <Avatar\n alt=\"GitHub Desktop logo\"\n src=\"https://avatars.githubusercontent.com/desktop\"\n />\n </AvatarStack>\n)"
|
|
1155
|
+
"id": "components-avatarstack-features--align-left"
|
|
1226
1156
|
},
|
|
1227
1157
|
{
|
|
1228
|
-
"id": "components-avatarstack-features--
|
|
1229
|
-
"code": "() => (\n <AvatarStack disableExpand>\n <Avatar\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/primer\"\n />\n <Avatar\n alt=\"GitHub logo\"\n src=\"https://avatars.githubusercontent.com/github\"\n />\n <Avatar alt=\"Atom logo\" src=\"https://avatars.githubusercontent.com/atom\" />\n <Avatar\n alt=\"GitHub Desktop logo\"\n src=\"https://avatars.githubusercontent.com/desktop\"\n />\n </AvatarStack>\n)"
|
|
1158
|
+
"id": "components-avatarstack-features--align-right"
|
|
1230
1159
|
},
|
|
1231
1160
|
{
|
|
1232
|
-
"id": "components-avatarstack-features--
|
|
1233
|
-
"code": "() => (\n <AvatarStack size={32}>\n <Avatar\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/primer\"\n />\n <Avatar\n alt=\"GitHub logo\"\n src=\"https://avatars.githubusercontent.com/github\"\n />\n <Avatar alt=\"Atom logo\" src=\"https://avatars.githubusercontent.com/atom\" />\n <Avatar\n alt=\"GitHub Desktop logo\"\n src=\"https://avatars.githubusercontent.com/desktop\"\n />\n </AvatarStack>\n)"
|
|
1161
|
+
"id": "components-avatarstack-features--disable-expand-on-hover"
|
|
1234
1162
|
},
|
|
1235
1163
|
{
|
|
1236
|
-
"id": "components-avatarstack-features--custom-size-on-parent
|
|
1237
|
-
"code": "() => (\n <AvatarStack\n size={{\n narrow: 32,\n regular: 48,\n wide: 64,\n }}\n >\n <Avatar\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/primer\"\n />\n <Avatar\n alt=\"GitHub logo\"\n src=\"https://avatars.githubusercontent.com/github\"\n />\n <Avatar alt=\"Atom logo\" src=\"https://avatars.githubusercontent.com/atom\" />\n <Avatar\n alt=\"GitHub Desktop logo\"\n src=\"https://avatars.githubusercontent.com/desktop\"\n />\n </AvatarStack>\n)"
|
|
1164
|
+
"id": "components-avatarstack-features--custom-size-on-parent"
|
|
1238
1165
|
},
|
|
1239
1166
|
{
|
|
1240
|
-
"id": "components-avatarstack-features--custom-size-on-
|
|
1241
|
-
"code": "() => (\n <AvatarStack>\n <Avatar\n size={20}\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/primer\"\n />\n <Avatar\n size={32}\n alt=\"GitHub logo\"\n src=\"https://avatars.githubusercontent.com/github\"\n />\n <Avatar\n size={48}\n alt=\"Atom logo\"\n src=\"https://avatars.githubusercontent.com/atom\"\n />\n <Avatar\n size={64}\n alt=\"GitHub Desktop logo\"\n src=\"https://avatars.githubusercontent.com/desktop\"\n />\n </AvatarStack>\n)"
|
|
1167
|
+
"id": "components-avatarstack-features--custom-size-on-parent-responsive"
|
|
1242
1168
|
},
|
|
1243
1169
|
{
|
|
1244
|
-
"id": "components-avatarstack-features--custom-size-on-children
|
|
1245
|
-
"code": "() => (\n <AvatarStack>\n <Avatar\n size={{\n narrow: 16,\n regular: 32,\n wide: 48,\n }}\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/primer\"\n />\n <Avatar\n size={{\n narrow: 32,\n regular: 48,\n wide: 64,\n }}\n alt=\"GitHub logo\"\n src=\"https://avatars.githubusercontent.com/github\"\n />\n <Avatar\n size={{\n narrow: 48,\n regular: 64,\n wide: 96,\n }}\n alt=\"Atom logo\"\n src=\"https://avatars.githubusercontent.com/atom\"\n />\n <Avatar\n size={{\n narrow: 64,\n regular: 96,\n wide: 120,\n }}\n alt=\"GitHub Desktop logo\"\n src=\"https://avatars.githubusercontent.com/desktop\"\n />\n </AvatarStack>\n)"
|
|
1170
|
+
"id": "components-avatarstack-features--custom-size-on-children"
|
|
1246
1171
|
},
|
|
1247
1172
|
{
|
|
1248
|
-
"id": "components-avatarstack-features--
|
|
1249
|
-
|
|
1173
|
+
"id": "components-avatarstack-features--custom-size-on-children-responsive"
|
|
1174
|
+
},
|
|
1175
|
+
{
|
|
1176
|
+
"id": "components-avatarstack-features--with-single-avatar"
|
|
1250
1177
|
}
|
|
1251
1178
|
],
|
|
1252
1179
|
"importPath": "@primer/react",
|
|
@@ -1293,64 +1220,49 @@
|
|
|
1293
1220
|
"importPath": "@primer/react",
|
|
1294
1221
|
"stories": [
|
|
1295
1222
|
{
|
|
1296
|
-
"id": "components-banner--default"
|
|
1297
|
-
"code": "() => {\n return (\n <Banner\n onDismiss={action('onDismiss')}\n title=\"Info\"\n description={\n <>\n GitHub users are{' '}\n <Link inline href=\"#\">\n now required\n </Link>{' '}\n to enable two-factor authentication as an additional security measure.\n </>\n }\n primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}\n secondaryAction={<Banner.SecondaryAction>Button</Banner.SecondaryAction>}\n />\n )\n}"
|
|
1223
|
+
"id": "components-banner--default"
|
|
1298
1224
|
},
|
|
1299
1225
|
{
|
|
1300
|
-
"id": "components-banner-features--critical"
|
|
1301
|
-
"code": "() => {\n return (\n <Banner\n title=\"Critical\"\n description={\n <>\n GitHub users are{' '}\n <Link inline href=\"#\">\n now required\n </Link>{' '}\n to enable two-factor authentication as an additional security measure.\n </>\n }\n variant=\"critical\"\n />\n )\n}"
|
|
1226
|
+
"id": "components-banner-features--critical"
|
|
1302
1227
|
},
|
|
1303
1228
|
{
|
|
1304
|
-
"id": "components-banner-features--info"
|
|
1305
|
-
"code": "() => {\n return (\n <Banner\n title=\"Info\"\n description={\n <>\n GitHub users are{' '}\n <Link inline href=\"#\">\n now required\n </Link>{' '}\n to enable two-factor authentication as an additional security measure.\n </>\n }\n onDismiss={action('onDismiss')}\n variant=\"info\"\n ></Banner>\n )\n}"
|
|
1229
|
+
"id": "components-banner-features--info"
|
|
1306
1230
|
},
|
|
1307
1231
|
{
|
|
1308
|
-
"id": "components-banner-features--success"
|
|
1309
|
-
"code": "() => {\n return (\n <Banner\n title=\"Success\"\n description={\n <>\n GitHub users are{' '}\n <Link inline href=\"#\">\n now required\n </Link>{' '}\n to enable two-factor authentication as an additional security measure.\n </>\n }\n onDismiss={action('onDismiss')}\n variant=\"success\"\n />\n )\n}"
|
|
1232
|
+
"id": "components-banner-features--success"
|
|
1310
1233
|
},
|
|
1311
1234
|
{
|
|
1312
|
-
"id": "components-banner-features--upsell"
|
|
1313
|
-
"code": "() => {\n return (\n <Banner\n title=\"Upsell\"\n description={\n <>\n GitHub users are{' '}\n <Link inline href=\"#\">\n now required\n </Link>{' '}\n to enable two-factor authentication as an additional security measure.\n </>\n }\n onDismiss={action('onDismiss')}\n variant=\"upsell\"\n />\n )\n}"
|
|
1235
|
+
"id": "components-banner-features--upsell"
|
|
1314
1236
|
},
|
|
1315
1237
|
{
|
|
1316
|
-
"id": "components-banner-features--warning"
|
|
1317
|
-
"code": "() => {\n return (\n <Banner\n title=\"Warning\"\n description={\n <>\n GitHub users are{' '}\n <Link inline href=\"#\">\n now required\n </Link>{' '}\n to enable two-factor authentication as an additional security measure.\n </>\n }\n onDismiss={action('onDismiss')}\n variant=\"warning\"\n />\n )\n}"
|
|
1238
|
+
"id": "components-banner-features--warning"
|
|
1318
1239
|
},
|
|
1319
1240
|
{
|
|
1320
|
-
"id": "components-banner-features--dismiss"
|
|
1321
|
-
"code": "() => {\n return (\n <Banner\n title=\"Notice\"\n description={\n <>\n GitHub users are{' '}\n <Link inline href=\"#\">\n now required\n </Link>{' '}\n to enable two-factor authentication as an additional security measure.\n </>\n }\n onDismiss={action('onDismiss')}\n />\n )\n}"
|
|
1241
|
+
"id": "components-banner-features--dismiss"
|
|
1322
1242
|
},
|
|
1323
1243
|
{
|
|
1324
|
-
"id": "components-banner-features--dismiss-with-actions"
|
|
1325
|
-
"code": "() => {\n return (\n <Banner\n title=\"Notice\"\n description={\n <>\n GitHub users are{' '}\n <Link inline href=\"#\">\n now required\n </Link>{' '}\n to enable two-factor authentication as an additional security measure.\n </>\n }\n onDismiss={action('onDismiss')}\n primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}\n secondaryAction={<Banner.SecondaryAction>Button</Banner.SecondaryAction>}\n />\n )\n}"
|
|
1244
|
+
"id": "components-banner-features--dismiss-with-actions"
|
|
1326
1245
|
},
|
|
1327
1246
|
{
|
|
1328
|
-
"id": "components-banner-features--with-hidden-title"
|
|
1329
|
-
"code": "() => {\n return (\n <Banner\n title=\"Warning\"\n hideTitle\n description={\n <>\n GitHub users are{' '}\n <Link inline href=\"#\">\n now required\n </Link>{' '}\n to enable two-factor authentication as an additional security measure.\n </>\n }\n variant=\"warning\"\n />\n )\n}"
|
|
1247
|
+
"id": "components-banner-features--with-hidden-title"
|
|
1330
1248
|
},
|
|
1331
1249
|
{
|
|
1332
|
-
"id": "components-banner-features--with-hidden-title-and-actions"
|
|
1333
|
-
"code": "() => {\n return (\n <Banner\n title=\"Warning\"\n hideTitle\n description={\n <>\n GitHub users are{' '}\n <Link inline href=\"#\">\n now required\n </Link>{' '}\n to enable two-factor authentication as an additional security measure.\n </>\n }\n variant=\"warning\"\n primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}\n secondaryAction={<Banner.SecondaryAction>Button</Banner.SecondaryAction>}\n />\n )\n}"
|
|
1250
|
+
"id": "components-banner-features--with-hidden-title-and-actions"
|
|
1334
1251
|
},
|
|
1335
1252
|
{
|
|
1336
|
-
"id": "components-banner-features--dismissible-with-hidden-title-and-actions"
|
|
1337
|
-
"code": "() => {\n return (\n <Banner\n title=\"Warning\"\n hideTitle\n description={\n <>\n GitHub users are{' '}\n <Link inline href=\"#\">\n now required\n </Link>{' '}\n to enable two-factor authentication as an additional security measure.\n </>\n }\n onDismiss={action('onDismiss')}\n variant=\"warning\"\n primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}\n secondaryAction={<Banner.SecondaryAction>Button</Banner.SecondaryAction>}\n />\n )\n}"
|
|
1253
|
+
"id": "components-banner-features--dismissible-with-hidden-title-and-actions"
|
|
1338
1254
|
},
|
|
1339
1255
|
{
|
|
1340
|
-
"id": "components-banner-features--dismissible-with-hidden-title-and-secondary-action"
|
|
1341
|
-
"code": "() => {\n return (\n <Banner\n title=\"Warning\"\n hideTitle\n description={\n <>\n GitHub users are{' '}\n <Link inline href=\"#\">\n now required\n </Link>{' '}\n to enable two-factor authentication as an additional security measure.\n </>\n }\n onDismiss={action('onDismiss')}\n variant=\"warning\"\n secondaryAction={\n <Banner.SecondaryAction leadingVisual={GitPullRequestIcon}>\n Button\n </Banner.SecondaryAction>\n }\n />\n )\n}"
|
|
1256
|
+
"id": "components-banner-features--dismissible-with-hidden-title-and-secondary-action"
|
|
1342
1257
|
},
|
|
1343
1258
|
{
|
|
1344
|
-
"id": "components-banner-features--with-actions"
|
|
1345
|
-
"code": "() => {\n return (\n <Banner\n title=\"Warning\"\n description={\n <>\n GitHub users are{' '}\n <Link inline href=\"#\">\n now required\n </Link>{' '}\n to enable two-factor authentication as an additional security measure.\n </>\n }\n primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}\n secondaryAction={<Banner.SecondaryAction>Button</Banner.SecondaryAction>}\n variant=\"warning\"\n />\n )\n}"
|
|
1259
|
+
"id": "components-banner-features--with-actions"
|
|
1346
1260
|
},
|
|
1347
1261
|
{
|
|
1348
|
-
"id": "components-banner-features--custom-icon"
|
|
1349
|
-
"code": "() => {\n return (\n <Banner\n title=\"Upsell\"\n description=\"An example banner with a custom icon\"\n leadingVisual={<CopilotIcon />}\n onDismiss={action('onDismiss')}\n variant=\"upsell\"\n />\n )\n}"
|
|
1262
|
+
"id": "components-banner-features--custom-icon"
|
|
1350
1263
|
},
|
|
1351
1264
|
{
|
|
1352
|
-
"id": "components-banner-examples--with-announcement"
|
|
1353
|
-
"code": "() => {\n type Choice = 'one' | 'two' | 'three'\n const messages: Map<Choice, string> = new Map([\n ['one', 'This is a message for choice one'],\n ['two', 'This is a message for choice two'],\n ['three', 'This is a message for choice three'],\n ])\n const [selected, setSelected] = React.useState<Choice>('one')\n return (\n <>\n <Banner\n title=\"Info\"\n description={<AriaStatus>{messages.get(selected)}</AriaStatus>}\n onDismiss={action('onDismiss')}\n primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}\n secondaryAction={\n <Banner.SecondaryAction>Button</Banner.SecondaryAction>\n }\n />\n <RadioGroup\n name=\"options\"\n onChange={(selected) => {\n setSelected(selected as Choice)\n }}\n className={classes.RadioGroupWithTopMargin}\n >\n <RadioGroup.Label>Choices</RadioGroup.Label>\n <FormControl>\n <Radio value=\"one\" defaultChecked />\n <FormControl.Label>Choice one</FormControl.Label>\n </FormControl>\n <FormControl>\n <Radio value=\"two\" />\n <FormControl.Label>Choice two</FormControl.Label>\n </FormControl>\n <FormControl>\n <Radio value=\"three\" />\n <FormControl.Label>Choice three</FormControl.Label>\n </FormControl>\n </RadioGroup>\n </>\n )\n}"
|
|
1265
|
+
"id": "components-banner-examples--with-announcement"
|
|
1354
1266
|
}
|
|
1355
1267
|
],
|
|
1356
1268
|
"props": [
|
|
@@ -1419,6 +1331,12 @@
|
|
|
1419
1331
|
"name": "actionsLayout",
|
|
1420
1332
|
"type": "'default' | 'inline' | 'stacked'",
|
|
1421
1333
|
"description": "Override the responsive layout of the action buttons. 'inline' layout will display the buttons inline with the title and description, while 'stacked' layout will always render the buttons in a new row."
|
|
1334
|
+
},
|
|
1335
|
+
{
|
|
1336
|
+
"name": "flush",
|
|
1337
|
+
"type": "boolean",
|
|
1338
|
+
"defaultValue": "false",
|
|
1339
|
+
"description": "Full width banner specifically for use within confined spaces, such as dialogs, tables, cards, or boxes where available space is limited."
|
|
1422
1340
|
}
|
|
1423
1341
|
],
|
|
1424
1342
|
"subcomponents": [
|
|
@@ -1468,36 +1386,28 @@
|
|
|
1468
1386
|
"a11yReviewed": "2025-01-08",
|
|
1469
1387
|
"stories": [
|
|
1470
1388
|
{
|
|
1471
|
-
"id": "experimental-components-blankslate--default"
|
|
1472
|
-
"code": "() => (\n <Blankslate>\n <Blankslate.Visual>\n <BookIcon size=\"medium\" />\n </Blankslate.Visual>\n <Blankslate.Heading>Welcome to the mona wiki!</Blankslate.Heading>\n <Blankslate.Description>\n Wikis provide a place in your repository to lay out the roadmap of your\n project, show the current status, and document software better, together.\n </Blankslate.Description>\n <Blankslate.PrimaryAction href=\"#\">\n Create the first page\n </Blankslate.PrimaryAction>\n <Blankslate.SecondaryAction href=\"#\">\n Learn more about wikis\n </Blankslate.SecondaryAction>\n </Blankslate>\n)"
|
|
1389
|
+
"id": "experimental-components-blankslate--default"
|
|
1473
1390
|
},
|
|
1474
1391
|
{
|
|
1475
|
-
"id": "experimental-components-blankslate-features--with-visual"
|
|
1476
|
-
"code": "() => (\n <Blankslate>\n <Blankslate.Visual>\n <BookIcon size=\"medium\" />\n </Blankslate.Visual>\n <Blankslate.Heading>Blankslate heading</Blankslate.Heading>\n <Blankslate.Description>\n Use it to provide information when no dynamic content exists.\n </Blankslate.Description>\n </Blankslate>\n)"
|
|
1392
|
+
"id": "experimental-components-blankslate-features--with-visual"
|
|
1477
1393
|
},
|
|
1478
1394
|
{
|
|
1479
|
-
"id": "experimental-components-blankslate-features--with-primary-action-as-link"
|
|
1480
|
-
"code": "() => (\n <Blankslate>\n <Blankslate.Visual>\n <BookIcon size=\"medium\" />\n </Blankslate.Visual>\n <Blankslate.Heading>Blankslate heading</Blankslate.Heading>\n <Blankslate.Description>\n Use it to provide information when no dynamic content exists.\n </Blankslate.Description>\n <Blankslate.PrimaryAction href=\"#\">Primary action</Blankslate.PrimaryAction>\n </Blankslate>\n)"
|
|
1395
|
+
"id": "experimental-components-blankslate-features--with-primary-action-as-link"
|
|
1481
1396
|
},
|
|
1482
1397
|
{
|
|
1483
|
-
"id": "experimental-components-blankslate-features--with-primary-action-as-button"
|
|
1484
|
-
"code": "() => {\n const [isOpen, setIsOpen] = React.useState(false)\n const onDialogClose = React.useCallback(() => setIsOpen(false), [])\n return (\n <>\n <Blankslate>\n <Blankslate.Visual>\n <BookIcon size=\"medium\" />\n </Blankslate.Visual>\n <Blankslate.Heading>Blankslate heading</Blankslate.Heading>\n <Blankslate.Description>\n Use it to provide information when no dynamic content exists.\n </Blankslate.Description>\n <Blankslate.PrimaryAction onClick={() => setIsOpen(true)}>\n Primary action\n </Blankslate.PrimaryAction>\n </Blankslate>\n {isOpen ? (\n <ConfirmationDialog\n title=\"Delete universe?\"\n onClose={onDialogClose}\n confirmButtonContent=\"Delete it!\"\n confirmButtonType=\"danger\"\n >\n Deleting the universe could have disastrous effects, including but not\n limited to destroying all life on Earth.\n </ConfirmationDialog>\n ) : null}\n </>\n )\n}"
|
|
1398
|
+
"id": "experimental-components-blankslate-features--with-primary-action-as-button"
|
|
1485
1399
|
},
|
|
1486
1400
|
{
|
|
1487
|
-
"id": "experimental-components-blankslate-features--with-secondary-action"
|
|
1488
|
-
"code": "() => (\n <Blankslate>\n <Blankslate.Visual>\n <BookIcon size=\"medium\" />\n </Blankslate.Visual>\n <Blankslate.Heading>Blankslate heading</Blankslate.Heading>\n <Blankslate.Description>\n Use it to provide information when no dynamic content exists.\n </Blankslate.Description>\n <Blankslate.SecondaryAction href=\"#\">\n Secondary action\n </Blankslate.SecondaryAction>\n </Blankslate>\n)"
|
|
1401
|
+
"id": "experimental-components-blankslate-features--with-secondary-action"
|
|
1489
1402
|
},
|
|
1490
1403
|
{
|
|
1491
|
-
"id": "experimental-components-blankslate-features--with-border"
|
|
1492
|
-
"code": "() => (\n <Blankslate border>\n <Blankslate.Visual>\n <BookIcon size=\"medium\" />\n </Blankslate.Visual>\n <Blankslate.Heading>Blankslate heading</Blankslate.Heading>\n <Blankslate.Description>\n Use it to provide information when no dynamic content exists.\n </Blankslate.Description>\n </Blankslate>\n)"
|
|
1404
|
+
"id": "experimental-components-blankslate-features--with-border"
|
|
1493
1405
|
},
|
|
1494
1406
|
{
|
|
1495
|
-
"id": "experimental-components-blankslate-features--narrow"
|
|
1496
|
-
"code": "() => (\n <Blankslate border narrow>\n <Blankslate.Visual>\n <BookIcon size=\"medium\" />\n </Blankslate.Visual>\n <Blankslate.Heading>Blankslate heading</Blankslate.Heading>\n <Blankslate.Description>\n Use it to provide information when no dynamic content exists.\n </Blankslate.Description>\n </Blankslate>\n)"
|
|
1407
|
+
"id": "experimental-components-blankslate-features--narrow"
|
|
1497
1408
|
},
|
|
1498
1409
|
{
|
|
1499
|
-
"id": "experimental-components-blankslate-features--spacious"
|
|
1500
|
-
"code": "() => (\n <Blankslate spacious>\n <Blankslate.Visual>\n <BookIcon size=\"medium\" />\n </Blankslate.Visual>\n <Blankslate.Heading>Blankslate heading</Blankslate.Heading>\n <Blankslate.Description>\n Use it to provide information when no dynamic content exists.\n </Blankslate.Description>\n </Blankslate>\n)"
|
|
1410
|
+
"id": "experimental-components-blankslate-features--spacious"
|
|
1501
1411
|
}
|
|
1502
1412
|
],
|
|
1503
1413
|
"importPath": "@primer/react/experimental",
|
|
@@ -1579,16 +1489,13 @@
|
|
|
1579
1489
|
"a11yReviewed": "2025-01-08",
|
|
1580
1490
|
"stories": [
|
|
1581
1491
|
{
|
|
1582
|
-
"id": "components-branchname--default"
|
|
1583
|
-
"code": "() => <BranchName href=\"#\">branch_name</BranchName>"
|
|
1492
|
+
"id": "components-branchname--default"
|
|
1584
1493
|
},
|
|
1585
1494
|
{
|
|
1586
|
-
"id": "components-branchname-features--with-branch-icon"
|
|
1587
|
-
"code": "() => (\n <BranchName href=\"#\">\n <Stack direction=\"horizontal\" gap=\"condensed\" align=\"center\">\n <Octicon icon={GitBranchIcon} />\n branch_name\n </Stack>\n </BranchName>\n)"
|
|
1495
|
+
"id": "components-branchname-features--with-branch-icon"
|
|
1588
1496
|
},
|
|
1589
1497
|
{
|
|
1590
|
-
"id": "components-branchname-features--not-a-link"
|
|
1591
|
-
"code": "() => <BranchName as=\"span\">branch_name_as_span</BranchName>"
|
|
1498
|
+
"id": "components-branchname-features--not-a-link"
|
|
1592
1499
|
}
|
|
1593
1500
|
],
|
|
1594
1501
|
"importPath": "@primer/react",
|
|
@@ -1613,8 +1520,7 @@
|
|
|
1613
1520
|
"a11yReviewed": "2025-01-08",
|
|
1614
1521
|
"stories": [
|
|
1615
1522
|
{
|
|
1616
|
-
"id": "components-breadcrumbs--default"
|
|
1617
|
-
"code": "() => (\n <Breadcrumbs>\n <Breadcrumbs.Item href=\"#\">Home</Breadcrumbs.Item>\n <Breadcrumbs.Item href=\"#\">About</Breadcrumbs.Item>\n <Breadcrumbs.Item href=\"#\" selected>\n Team\n </Breadcrumbs.Item>\n </Breadcrumbs>\n)"
|
|
1523
|
+
"id": "components-breadcrumbs--default"
|
|
1618
1524
|
}
|
|
1619
1525
|
],
|
|
1620
1526
|
"importPath": "@primer/react",
|
|
@@ -1694,108 +1600,82 @@
|
|
|
1694
1600
|
"a11yReviewed": "2025-01-08",
|
|
1695
1601
|
"stories": [
|
|
1696
1602
|
{
|
|
1697
|
-
"id": "components-button--default"
|
|
1698
|
-
"code": "() => <Button>Default</Button>"
|
|
1603
|
+
"id": "components-button--default"
|
|
1699
1604
|
},
|
|
1700
1605
|
{
|
|
1701
|
-
"id": "components-button-features--primary"
|
|
1702
|
-
"code": "() => <Button variant=\"primary\">Primary</Button>"
|
|
1606
|
+
"id": "components-button-features--primary"
|
|
1703
1607
|
},
|
|
1704
1608
|
{
|
|
1705
|
-
"id": "components-button-features--danger"
|
|
1706
|
-
"code": "() => <Button variant=\"danger\">Danger</Button>"
|
|
1609
|
+
"id": "components-button-features--danger"
|
|
1707
1610
|
},
|
|
1708
1611
|
{
|
|
1709
|
-
"id": "components-button-features--invisible"
|
|
1710
|
-
"code": "() => <Button variant=\"invisible\">Invisible</Button>"
|
|
1612
|
+
"id": "components-button-features--invisible"
|
|
1711
1613
|
},
|
|
1712
1614
|
{
|
|
1713
|
-
"id": "components-button-features--link"
|
|
1714
|
-
"code": "() => <Button variant=\"link\">Button that looks like a link</Button>"
|
|
1615
|
+
"id": "components-button-features--link"
|
|
1715
1616
|
},
|
|
1716
1617
|
{
|
|
1717
|
-
"id": "components-button-features--leading-visual"
|
|
1718
|
-
"code": "() => <Button leadingVisual={HeartIcon}>Leading visual</Button>"
|
|
1618
|
+
"id": "components-button-features--leading-visual"
|
|
1719
1619
|
},
|
|
1720
1620
|
{
|
|
1721
|
-
"id": "components-button-features--trailing-visual"
|
|
1722
|
-
"code": "() => <Button trailingVisual={EyeIcon}>Trailing visual</Button>"
|
|
1621
|
+
"id": "components-button-features--trailing-visual"
|
|
1723
1622
|
},
|
|
1724
1623
|
{
|
|
1725
|
-
"id": "components-button-features--trailing-counter"
|
|
1726
|
-
"code": "() => {\n const [count, setCount] = useState(0)\n const onClick = () => {\n setCount(count + 1)\n announce(`Watch ${count + 1}`)\n }\n return (\n <>\n <Button onClick={onClick} count={count}>\n Watch\n </Button>\n <AccessibilityNote />\n <p>\n In this example, a live region has been implemented to communicate the\n change.\n </p>\n </>\n )\n}"
|
|
1624
|
+
"id": "components-button-features--trailing-counter"
|
|
1727
1625
|
},
|
|
1728
1626
|
{
|
|
1729
|
-
"id": "components-button-features--trailing-counter-with-no-text"
|
|
1730
|
-
"code": "() => <Button aria-label=\"Comments\" leadingVisual={CommentIcon} count={3} />"
|
|
1627
|
+
"id": "components-button-features--trailing-counter-with-no-text"
|
|
1731
1628
|
},
|
|
1732
1629
|
{
|
|
1733
|
-
"id": "components-button-features--trailing-counter-all-variants"
|
|
1734
|
-
"code": "() => {\n const [count, setCount] = useState(0)\n const onClick = () => {\n setCount(count + 1)\n announce(`Watch ${count + 1}`)\n }\n return (\n <>\n <Stack gap=\"normal\" wrap=\"wrap\" direction=\"horizontal\">\n <Button onClick={onClick} count={count}>\n Watch\n </Button>\n <Button onClick={onClick} count={count}>\n Watch\n </Button>\n <Button onClick={onClick} count={count}>\n Watch\n </Button>\n <Button onClick={onClick} variant=\"primary\" disabled count={count}>\n Watch\n </Button>\n <Button onClick={onClick} variant=\"danger\" count={count}>\n Watch\n </Button>\n <Button onClick={onClick} variant=\"danger\" disabled count={count}>\n Watch\n </Button>\n <Button onClick={onClick} variant=\"invisible\" count={count}>\n Watch\n </Button>\n <Button onClick={onClick} variant=\"invisible\" disabled count={count}>\n Watch\n </Button>\n </Stack>\n <AccessibilityNote />\n <p>\n In these examples, a live region has been implemented to communicate the\n change.\n </p>\n </>\n )\n}"
|
|
1630
|
+
"id": "components-button-features--trailing-counter-all-variants"
|
|
1735
1631
|
},
|
|
1736
1632
|
{
|
|
1737
|
-
"id": "components-button-features--trailing-action"
|
|
1738
|
-
"code": "() => <Button trailingAction={TriangleDownIcon}>Trailing action</Button>"
|
|
1633
|
+
"id": "components-button-features--trailing-action"
|
|
1739
1634
|
},
|
|
1740
1635
|
{
|
|
1741
|
-
"id": "components-button-features--block"
|
|
1742
|
-
"code": "() => <Button block>Default</Button>"
|
|
1636
|
+
"id": "components-button-features--block"
|
|
1743
1637
|
},
|
|
1744
1638
|
{
|
|
1745
|
-
"id": "components-button-features--disabled"
|
|
1746
|
-
"code": "() => (\n <div\n style={{\n display: 'flex',\n flexDirection: 'row',\n gap: '1rem',\n }}\n >\n <Button disabled>Default</Button>\n <Button variant=\"primary\" disabled>\n Primary\n </Button>\n <Button variant=\"danger\" disabled>\n Danger\n </Button>\n <Button variant=\"invisible\" disabled>\n Invisible\n </Button>\n </div>\n)"
|
|
1639
|
+
"id": "components-button-features--disabled"
|
|
1747
1640
|
},
|
|
1748
1641
|
{
|
|
1749
|
-
"id": "components-button-features--inactive"
|
|
1750
|
-
"code": "() => (\n <div\n style={{\n display: 'flex',\n flexDirection: 'row',\n gap: '1rem',\n }}\n >\n <Button inactive>Default</Button>\n <Button variant=\"primary\" inactive>\n Primary\n </Button>\n <Button variant=\"danger\" inactive>\n Danger\n </Button>\n <Button variant=\"invisible\" inactive>\n Invisible\n </Button>\n </div>\n)"
|
|
1642
|
+
"id": "components-button-features--inactive"
|
|
1751
1643
|
},
|
|
1752
1644
|
{
|
|
1753
|
-
"id": "components-button-features--small"
|
|
1754
|
-
"code": "() => <Button size=\"small\">Default</Button>"
|
|
1645
|
+
"id": "components-button-features--small"
|
|
1755
1646
|
},
|
|
1756
1647
|
{
|
|
1757
|
-
"id": "components-button-features--medium"
|
|
1758
|
-
"code": "() => <Button size=\"medium\">Default</Button>"
|
|
1648
|
+
"id": "components-button-features--medium"
|
|
1759
1649
|
},
|
|
1760
1650
|
{
|
|
1761
|
-
"id": "components-button-features--large"
|
|
1762
|
-
"code": "() => <Button size=\"large\">Default</Button>"
|
|
1651
|
+
"id": "components-button-features--large"
|
|
1763
1652
|
},
|
|
1764
1653
|
{
|
|
1765
|
-
"id": "components-button-features--loading"
|
|
1766
|
-
"code": "() => <Button loading>Default</Button>"
|
|
1654
|
+
"id": "components-button-features--loading"
|
|
1767
1655
|
},
|
|
1768
1656
|
{
|
|
1769
|
-
"id": "components-button-features--loading-custom-announcement"
|
|
1770
|
-
"code": "() => (\n <Button loading loadingAnnouncement=\"This is a custom loading announcement\">\n Default\n </Button>\n)"
|
|
1657
|
+
"id": "components-button-features--loading-custom-announcement"
|
|
1771
1658
|
},
|
|
1772
1659
|
{
|
|
1773
|
-
"id": "components-button-features--loading-with-leading-visual"
|
|
1774
|
-
"code": "() => (\n <Button loading leadingVisual={DownloadIcon}>\n Export\n </Button>\n)"
|
|
1660
|
+
"id": "components-button-features--loading-with-leading-visual"
|
|
1775
1661
|
},
|
|
1776
1662
|
{
|
|
1777
|
-
"id": "components-button-features--loading-with-trailing-visual"
|
|
1778
|
-
"code": "() => (\n <Button loading trailingVisual={DownloadIcon}>\n Export\n </Button>\n)"
|
|
1663
|
+
"id": "components-button-features--loading-with-trailing-visual"
|
|
1779
1664
|
},
|
|
1780
1665
|
{
|
|
1781
|
-
"id": "components-button-features--loading-with-trailing-action"
|
|
1782
|
-
"code": "() => (\n <Button loading trailingAction={TriangleDownIcon}>\n Export dropdown\n </Button>\n)"
|
|
1666
|
+
"id": "components-button-features--loading-with-trailing-action"
|
|
1783
1667
|
},
|
|
1784
1668
|
{
|
|
1785
|
-
"id": "components-button-features--loading-trigger"
|
|
1786
|
-
"code": "() => {\n const [isLoading, setIsLoading] = useState(false)\n const handleClick = () => {\n setIsLoading(true)\n }\n return (\n <Button\n loading={isLoading}\n onClick={handleClick}\n leadingVisual={DownloadIcon}\n >\n Export\n </Button>\n )\n}"
|
|
1669
|
+
"id": "components-button-features--loading-trigger"
|
|
1787
1670
|
},
|
|
1788
1671
|
{
|
|
1789
|
-
"id": "components-button-features--label-wrap"
|
|
1790
|
-
"code": "() => {\n return (\n <Stack\n style={{\n width: '200px',\n }}\n >\n <Button labelWrap>\n This button label will wrap if the label is too long\n </Button>\n <Button size=\"small\" labelWrap>\n This small button label will wrap if the label is too long\n </Button>\n <Button size=\"large\" labelWrap>\n This large button label will wrap if the label is too long\n </Button>\n <Button labelWrap leadingVisual={HeartIcon} trailingVisual={EyeIcon}>\n This button label will wrap if the label is too long\n </Button>\n </Stack>\n )\n}"
|
|
1672
|
+
"id": "components-button-features--label-wrap"
|
|
1791
1673
|
},
|
|
1792
1674
|
{
|
|
1793
|
-
"id": "components-button-features--inactive-button-with-tooltip"
|
|
1794
|
-
"code": "() => (\n <Tooltip\n text=\"Action unavailable: an error occurred while loading repository permissions\"\n direction=\"n\"\n >\n <Button inactive>Review changes</Button>\n </Tooltip>\n)"
|
|
1675
|
+
"id": "components-button-features--inactive-button-with-tooltip"
|
|
1795
1676
|
},
|
|
1796
1677
|
{
|
|
1797
|
-
"id": "components-button-features--expanded-button"
|
|
1798
|
-
"code": "() => (\n <Stack align=\"start\">\n <Button aria-expanded trailingAction={TriangleDownIcon}>\n Review changes\n </Button>\n <Button aria-expanded trailingAction={TriangleDownIcon} variant=\"primary\">\n Review changes\n </Button>\n <Button aria-expanded trailingAction={TriangleDownIcon} variant=\"invisible\">\n Review changes\n </Button>\n <Button aria-expanded trailingAction={TriangleDownIcon} variant=\"danger\">\n Review changes\n </Button>\n </Stack>\n)"
|
|
1678
|
+
"id": "components-button-features--expanded-button"
|
|
1799
1679
|
}
|
|
1800
1680
|
],
|
|
1801
1681
|
"importPath": "@primer/react",
|
|
@@ -1914,68 +1794,52 @@
|
|
|
1914
1794
|
"a11yReviewed": "2025-01-08",
|
|
1915
1795
|
"stories": [
|
|
1916
1796
|
{
|
|
1917
|
-
"id": "components-iconbutton--default"
|
|
1918
|
-
"code": "() => <IconButton icon={HeartIcon} aria-label=\"Favorite\" />"
|
|
1797
|
+
"id": "components-iconbutton--default"
|
|
1919
1798
|
},
|
|
1920
1799
|
{
|
|
1921
|
-
"id": "components-iconbutton-features--primary"
|
|
1922
|
-
"code": "() => <IconButton icon={HeartIcon} variant=\"primary\" aria-label=\"Favorite\" />"
|
|
1800
|
+
"id": "components-iconbutton-features--primary"
|
|
1923
1801
|
},
|
|
1924
1802
|
{
|
|
1925
|
-
"id": "components-iconbutton-features--danger"
|
|
1926
|
-
"code": "() => <IconButton icon={HeartIcon} variant=\"danger\" aria-label=\"Favorite\" />"
|
|
1803
|
+
"id": "components-iconbutton-features--danger"
|
|
1927
1804
|
},
|
|
1928
1805
|
{
|
|
1929
|
-
"id": "components-iconbutton-features--invisible"
|
|
1930
|
-
"code": "() => <IconButton icon={HeartIcon} variant=\"invisible\" aria-label=\"Favorite\" />"
|
|
1806
|
+
"id": "components-iconbutton-features--invisible"
|
|
1931
1807
|
},
|
|
1932
1808
|
{
|
|
1933
|
-
"id": "components-iconbutton-features--disabled"
|
|
1934
|
-
"code": "() => <IconButton disabled icon={HeartIcon} aria-label=\"Favorite\" />"
|
|
1809
|
+
"id": "components-iconbutton-features--disabled"
|
|
1935
1810
|
},
|
|
1936
1811
|
{
|
|
1937
|
-
"id": "components-iconbutton-features--small"
|
|
1938
|
-
"code": "() => <IconButton size=\"small\" icon={HeartIcon} aria-label=\"Favorite\" />"
|
|
1812
|
+
"id": "components-iconbutton-features--small"
|
|
1939
1813
|
},
|
|
1940
1814
|
{
|
|
1941
|
-
"id": "components-iconbutton-features--medium"
|
|
1942
|
-
"code": "() => <IconButton size=\"medium\" icon={HeartIcon} aria-label=\"Favorite\" />"
|
|
1815
|
+
"id": "components-iconbutton-features--medium"
|
|
1943
1816
|
},
|
|
1944
1817
|
{
|
|
1945
|
-
"id": "components-iconbutton-features--large"
|
|
1946
|
-
"code": "() => <IconButton size=\"large\" icon={HeartIcon} aria-label=\"Favorite\" />"
|
|
1818
|
+
"id": "components-iconbutton-features--large"
|
|
1947
1819
|
},
|
|
1948
1820
|
{
|
|
1949
|
-
"id": "components-iconbutton-features--with-description"
|
|
1950
|
-
"code": "() => (\n <IconButton\n icon={InboxIcon}\n aria-label=\"Notifications\"\n description=\"You have no unread notifications.\"\n />\n)"
|
|
1821
|
+
"id": "components-iconbutton-features--with-description"
|
|
1951
1822
|
},
|
|
1952
1823
|
{
|
|
1953
|
-
"id": "components-iconbutton-features--external-tooltip"
|
|
1954
|
-
"code": "() => (\n <Tooltip\n text=\"this is a supportive description for icon button\"\n direction=\"se\"\n >\n <IconButton icon={HeartIcon} aria-label=\"HeartIcon\" />\n </Tooltip>\n)"
|
|
1824
|
+
"id": "components-iconbutton-features--external-tooltip"
|
|
1955
1825
|
},
|
|
1956
1826
|
{
|
|
1957
|
-
"id": "components-iconbutton-features--external-tooltip-version-1"
|
|
1958
|
-
"code": "() => (\n <TooltipV1\n text=\"this is a supportive description for icon button\"\n direction=\"se\"\n >\n <IconButton icon={HeartIcon} aria-label=\"HeartIcon\" />\n </TooltipV1>\n)"
|
|
1827
|
+
"id": "components-iconbutton-features--external-tooltip-version-1"
|
|
1959
1828
|
},
|
|
1960
1829
|
{
|
|
1961
|
-
"id": "components-iconbutton-features--as-a-menu-anchor"
|
|
1962
|
-
"code": "() => (\n <ActionMenu>\n <ActionMenu.Anchor>\n <IconButton icon={ChevronDownIcon} aria-label=\"Something\" />\n </ActionMenu.Anchor>\n\n <ActionMenu.Overlay width=\"medium\">\n <ActionList>\n <ActionList.Item onSelect={() => alert('Copy link clicked')}>\n Copy link\n <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item onSelect={() => alert('Quote reply clicked')}>\n Quote reply\n <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item onSelect={() => alert('Edit comment clicked')}>\n Edit comment\n <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Divider />\n <ActionList.Item\n variant=\"danger\"\n onSelect={() => alert('Delete file clicked')}\n >\n Delete file\n <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>\n </ActionList.Item>\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n)"
|
|
1830
|
+
"id": "components-iconbutton-features--as-a-menu-anchor"
|
|
1963
1831
|
},
|
|
1964
1832
|
{
|
|
1965
|
-
"id": "components-iconbutton-features--loading"
|
|
1966
|
-
"code": "() => (\n <IconButton loading icon={HeartIcon} variant=\"primary\" aria-label=\"Primary\" />\n)"
|
|
1833
|
+
"id": "components-iconbutton-features--loading"
|
|
1967
1834
|
},
|
|
1968
1835
|
{
|
|
1969
|
-
"id": "components-iconbutton-features--loading-trigger"
|
|
1970
|
-
"code": "() => {\n const [isLoading, setIsLoading] = useState(false)\n const handleClick = () => {\n setIsLoading(true)\n setTimeout(() => {\n setIsLoading(false)\n }, 3000)\n }\n return (\n <IconButton\n loading={isLoading}\n onClick={handleClick}\n icon={DownloadIcon}\n aria-label=\"Download\"\n />\n )\n}"
|
|
1836
|
+
"id": "components-iconbutton-features--loading-trigger"
|
|
1971
1837
|
},
|
|
1972
1838
|
{
|
|
1973
|
-
"id": "components-iconbutton-features--keybinding-hint-on-description"
|
|
1974
|
-
"code": "() => (\n <IconButton\n icon={InboxIcon}\n aria-label=\"Notifications\"\n description=\"You have unread notifications\"\n keybindingHint=\"G+N\"\n />\n)"
|
|
1839
|
+
"id": "components-iconbutton-features--keybinding-hint-on-description"
|
|
1975
1840
|
},
|
|
1976
1841
|
{
|
|
1977
|
-
"id": "components-iconbutton-features--keybinding-hint"
|
|
1978
|
-
"code": "() => <IconButton icon={BoldIcon} aria-label=\"Bold\" keybindingHint=\"Mod+B\" />"
|
|
1842
|
+
"id": "components-iconbutton-features--keybinding-hint"
|
|
1979
1843
|
}
|
|
1980
1844
|
],
|
|
1981
1845
|
"importPath": "@primer/react",
|
|
@@ -2063,24 +1927,19 @@
|
|
|
2063
1927
|
"a11yReviewed": "2025-01-08",
|
|
2064
1928
|
"stories": [
|
|
2065
1929
|
{
|
|
2066
|
-
"id": "components-buttongroup--default"
|
|
2067
|
-
"code": "() => (\n <ButtonGroup>\n <Button>Button 1</Button>\n <Button>Button 2</Button>\n <Button>Button 3</Button>\n </ButtonGroup>\n)"
|
|
1930
|
+
"id": "components-buttongroup--default"
|
|
2068
1931
|
},
|
|
2069
1932
|
{
|
|
2070
|
-
"id": "components-buttongroup-features--icon-buttons"
|
|
2071
|
-
"code": "() => (\n <ButtonGroup>\n {/* We can remove these unsafe props after we resolve https://github.com/primer/react/issues/4129 */}\n <IconButton icon={PlusIcon} aria-label=\"Add\" />\n <IconButton icon={DashIcon} aria-label=\"Subtract\" />\n </ButtonGroup>\n)"
|
|
1933
|
+
"id": "components-buttongroup-features--icon-buttons"
|
|
2072
1934
|
},
|
|
2073
1935
|
{
|
|
2074
|
-
"id": "components-buttongroup-features--loading-buttons"
|
|
2075
|
-
"code": "() => {\n const handleClick = () => {}\n return (\n <ButtonGroup>\n <Button loading={true} onClick={handleClick}>\n Button 1\n </Button>\n <Button onClick={handleClick}>Button 2</Button>\n <Tooltip text=\"Additional info about the button\">\n <Button onClick={handleClick}>Button 3</Button>\n </Tooltip>\n </ButtonGroup>\n )\n}"
|
|
1936
|
+
"id": "components-buttongroup-features--loading-buttons"
|
|
2076
1937
|
},
|
|
2077
1938
|
{
|
|
2078
|
-
"id": "components-buttongroup-features--dropdown-split"
|
|
2079
|
-
"code": "() => {\n const actions = ['Action one', 'Action two', 'Action three']\n const [selectedActionIndex, setSelectedActionIndex] =\n React.useState<number>(0)\n const selectedAction = actions[selectedActionIndex]\n return (\n <ButtonGroup>\n <Button\n onClick={() => {\n alert(`Activated ${selectedAction}`)\n }}\n >\n {selectedAction}\n </Button>\n <ActionMenu>\n <ActionMenu.Button aria-label=\"More options\" icon={TriangleDownIcon} />\n <ActionMenu.Overlay>\n <ActionList>\n {actions.map((action, index) => {\n return (\n <ActionList.Item\n key={action}\n onSelect={() => {\n setSelectedActionIndex(index)\n }}\n >\n {action}\n </ActionList.Item>\n )\n })}\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n </ButtonGroup>\n )\n}"
|
|
1939
|
+
"id": "components-buttongroup-features--dropdown-split"
|
|
2080
1940
|
},
|
|
2081
1941
|
{
|
|
2082
|
-
"id": "components-buttongroup-features--as-toolbar"
|
|
2083
|
-
"code": "() => (\n <ButtonGroup role=\"toolbar\">\n <Button>Button 1</Button>\n <Button>Button 2</Button>\n <Button>Button 3</Button>\n </ButtonGroup>\n)"
|
|
1942
|
+
"id": "components-buttongroup-features--as-toolbar"
|
|
2084
1943
|
}
|
|
2085
1944
|
],
|
|
2086
1945
|
"importPath": "@primer/react",
|
|
@@ -2100,24 +1959,19 @@
|
|
|
2100
1959
|
"a11yReviewed": "2025-01-08",
|
|
2101
1960
|
"stories": [
|
|
2102
1961
|
{
|
|
2103
|
-
"id": "components-checkbox--default"
|
|
2104
|
-
"code": "() => (\n <form>\n <FormControl>\n <Checkbox value=\"default\" />\n <FormControl.Label>Default label</FormControl.Label>\n </FormControl>\n </form>\n)"
|
|
1962
|
+
"id": "components-checkbox--default"
|
|
2105
1963
|
},
|
|
2106
1964
|
{
|
|
2107
|
-
"id": "components-checkbox-features--with-leading-visual"
|
|
2108
|
-
"code": "() => {\n return (\n <form>\n <FormControl>\n <FormControl.LeadingVisual>\n <MarkGithubIcon />\n </FormControl.LeadingVisual>\n <Checkbox value=\"default\" />\n <FormControl.Label>Default label</FormControl.Label>\n </FormControl>\n </form>\n )\n}"
|
|
1965
|
+
"id": "components-checkbox-features--with-leading-visual"
|
|
2109
1966
|
},
|
|
2110
1967
|
{
|
|
2111
|
-
"id": "components-checkbox-features--disabled"
|
|
2112
|
-
"code": "() => {\n return (\n <form>\n <FormControl disabled>\n <Checkbox value=\"default\" />\n <FormControl.Label>Default label</FormControl.Label>\n </FormControl>\n </form>\n )\n}"
|
|
1968
|
+
"id": "components-checkbox-features--disabled"
|
|
2113
1969
|
},
|
|
2114
1970
|
{
|
|
2115
|
-
"id": "components-checkbox-features--with-caption"
|
|
2116
|
-
"code": "() => {\n return (\n <form>\n <FormControl>\n <Checkbox value=\"default\" />\n <FormControl.Label>Default label</FormControl.Label>\n <FormControl.Caption>This is a caption</FormControl.Caption>\n </FormControl>\n </form>\n )\n}"
|
|
1971
|
+
"id": "components-checkbox-features--with-caption"
|
|
2117
1972
|
},
|
|
2118
1973
|
{
|
|
2119
|
-
"id": "components-checkbox-features--indeterminate"
|
|
2120
|
-
"code": "() => (\n <form>\n <FormControl>\n <Checkbox value=\"default\" indeterminate />\n <FormControl.Label>Default label</FormControl.Label>\n </FormControl>\n </form>\n)"
|
|
1974
|
+
"id": "components-checkbox-features--indeterminate"
|
|
2121
1975
|
}
|
|
2122
1976
|
],
|
|
2123
1977
|
"importPath": "@primer/react",
|
|
@@ -2184,28 +2038,22 @@
|
|
|
2184
2038
|
"a11yReviewed": "2025-01-08",
|
|
2185
2039
|
"stories": [
|
|
2186
2040
|
{
|
|
2187
|
-
"id": "components-checkboxgroup--default"
|
|
2188
|
-
"code": "() => (\n <CheckboxGroup>\n <CheckboxGroup.Label>Choices</CheckboxGroup.Label>\n <FormControl required>\n <Checkbox value=\"one\" defaultChecked />\n <FormControl.Label>Choice one</FormControl.Label>\n </FormControl>\n <FormControl>\n <Checkbox value=\"two\" defaultChecked />\n <FormControl.Label>Choice two</FormControl.Label>\n </FormControl>\n <FormControl>\n <Checkbox value=\"three\" />\n <FormControl.Label>Choice three</FormControl.Label>\n </FormControl>\n </CheckboxGroup>\n)"
|
|
2041
|
+
"id": "components-checkboxgroup--default"
|
|
2189
2042
|
},
|
|
2190
2043
|
{
|
|
2191
|
-
"id": "components-checkboxgroup-features--visually-hidden-label"
|
|
2192
|
-
"code": "() => (\n <CheckboxGroup>\n <CheckboxGroup.Label visuallyHidden>Choices</CheckboxGroup.Label>\n <FormControl>\n <Checkbox value=\"one\" defaultChecked />\n <FormControl.Label>Choice one</FormControl.Label>\n </FormControl>\n <FormControl>\n <Checkbox value=\"two\" defaultChecked />\n <FormControl.Label>Choice two</FormControl.Label>\n </FormControl>\n <FormControl>\n <Checkbox value=\"three\" />\n <FormControl.Label>Choice three</FormControl.Label>\n </FormControl>\n </CheckboxGroup>\n)"
|
|
2044
|
+
"id": "components-checkboxgroup-features--visually-hidden-label"
|
|
2193
2045
|
},
|
|
2194
2046
|
{
|
|
2195
|
-
"id": "components-checkboxgroup-features--with-external-label"
|
|
2196
|
-
"code": "() => (\n <>\n <div id=\"choiceHeading\" className={classes.ExternalLabel}>\n External label\n </div>\n <CheckboxGroup aria-labelledby=\"choiceHeading\">\n <FormControl>\n <Checkbox />\n <FormControl.Label>Choice one</FormControl.Label>\n </FormControl>\n <FormControl>\n <Checkbox />\n <FormControl.Label>Choice two</FormControl.Label>\n </FormControl>\n <FormControl>\n <Checkbox />\n <FormControl.Label>Choice three</FormControl.Label>\n </FormControl>\n </CheckboxGroup>\n </>\n)"
|
|
2047
|
+
"id": "components-checkboxgroup-features--with-external-label"
|
|
2197
2048
|
},
|
|
2198
2049
|
{
|
|
2199
|
-
"id": "components-checkboxgroup-features--error"
|
|
2200
|
-
"code": "() => (\n <CheckboxGroup>\n <CheckboxGroup.Label>Choices</CheckboxGroup.Label>\n <FormControl>\n <Checkbox value=\"one\" defaultChecked />\n <FormControl.Label>Choice one</FormControl.Label>\n </FormControl>\n <FormControl>\n <Checkbox value=\"two\" defaultChecked />\n <FormControl.Label>Choice two</FormControl.Label>\n </FormControl>\n <FormControl>\n <Checkbox value=\"three\" />\n <FormControl.Label>Choice three</FormControl.Label>\n </FormControl>\n <CheckboxGroup.Validation variant=\"error\">\n Something went wrong\n </CheckboxGroup.Validation>\n </CheckboxGroup>\n)"
|
|
2050
|
+
"id": "components-checkboxgroup-features--error"
|
|
2201
2051
|
},
|
|
2202
2052
|
{
|
|
2203
|
-
"id": "components-checkboxgroup-features--success"
|
|
2204
|
-
"code": "() => (\n <CheckboxGroup>\n <CheckboxGroup.Label>Choices</CheckboxGroup.Label>\n <FormControl>\n <Checkbox value=\"one\" defaultChecked />\n <FormControl.Label>Choice one</FormControl.Label>\n </FormControl>\n <FormControl>\n <Checkbox value=\"two\" defaultChecked />\n <FormControl.Label>Choice two</FormControl.Label>\n </FormControl>\n <FormControl>\n <Checkbox value=\"three\" />\n <FormControl.Label>Choice three</FormControl.Label>\n </FormControl>\n <CheckboxGroup.Validation variant=\"success\">\n Great job!\n </CheckboxGroup.Validation>\n </CheckboxGroup>\n)"
|
|
2053
|
+
"id": "components-checkboxgroup-features--success"
|
|
2205
2054
|
},
|
|
2206
2055
|
{
|
|
2207
|
-
"id": "components-checkboxgroup-features--caption"
|
|
2208
|
-
"code": "() => (\n <CheckboxGroup>\n <CheckboxGroup.Label>Choices</CheckboxGroup.Label>\n <CheckboxGroup.Caption>Caption</CheckboxGroup.Caption>\n <FormControl>\n <Checkbox value=\"one\" defaultChecked />\n <FormControl.Label>Choice one</FormControl.Label>\n </FormControl>\n <FormControl>\n <Checkbox value=\"two\" defaultChecked />\n <FormControl.Label>Choice two</FormControl.Label>\n </FormControl>\n <FormControl>\n <Checkbox value=\"three\" />\n <FormControl.Label>Choice three</FormControl.Label>\n </FormControl>\n </CheckboxGroup>\n)"
|
|
2056
|
+
"id": "components-checkboxgroup-features--caption"
|
|
2209
2057
|
}
|
|
2210
2058
|
],
|
|
2211
2059
|
"importPath": "@primer/react",
|
|
@@ -2299,8 +2147,7 @@
|
|
|
2299
2147
|
"a11yReviewed": "2025-01-08",
|
|
2300
2148
|
"stories": [
|
|
2301
2149
|
{
|
|
2302
|
-
"id": "deprecated-components-circlebadge--default"
|
|
2303
|
-
"code": "() => (\n <CircleBadge>\n <CircleBadge.Icon icon={ZapIcon} aria-label=\"User badge\" />\n </CircleBadge>\n)"
|
|
2150
|
+
"id": "deprecated-components-circlebadge--default"
|
|
2304
2151
|
}
|
|
2305
2152
|
],
|
|
2306
2153
|
"importPath": "@primer/react",
|
|
@@ -2360,20 +2207,16 @@
|
|
|
2360
2207
|
"importPath": "@primer/react",
|
|
2361
2208
|
"stories": [
|
|
2362
2209
|
{
|
|
2363
|
-
"id": "components-confirmationdialog--default"
|
|
2364
|
-
"code": "() => {\n const [isOpen, setIsOpen] = useState(false)\n const buttonRef = useRef<HTMLButtonElement>(null)\n const onDialogClose = useCallback(() => setIsOpen(false), [])\n return (\n <>\n <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>\n Show dialog\n </Button>\n {isOpen && (\n <ConfirmationDialog\n title=\"Delete universe?\"\n onClose={onDialogClose}\n confirmButtonContent=\"Delete it!\"\n confirmButtonType=\"danger\"\n >\n Deleting the universe could have disastrous effects, including but not\n limited to destroying all life on Earth.\n </ConfirmationDialog>\n )}\n </>\n )\n}"
|
|
2210
|
+
"id": "components-confirmationdialog--default"
|
|
2365
2211
|
},
|
|
2366
2212
|
{
|
|
2367
|
-
"id": "components-confirmationdialog-features--shorthand-hook"
|
|
2368
|
-
"code": "() => {\n const confirm = useConfirm()\n const onButtonClick = useCallback(\n async (event: React.MouseEvent) => {\n if (\n (await confirm({\n title: 'Are you sure?',\n content: 'Do you really want to turn this button green?',\n })) &&\n event.target instanceof HTMLElement\n ) {\n event.target.style.color = 'var(--fgColor-success)'\n event.target.textContent = \"I'm green!\"\n }\n },\n [confirm],\n )\n return (\n <div className={classes.ButtonContainer}>\n <Button onClick={onButtonClick} className={classes.TurnGreenButton}>\n Turn me green!\n </Button>\n <Button onClick={onButtonClick} className={classes.TurnGreenButton}>\n Turn me green!\n </Button>\n <Button onClick={onButtonClick} className={classes.TurnGreenButton}>\n Turn me green!\n </Button>\n <Button onClick={onButtonClick} className={classes.TurnGreenButton}>\n Turn me green!\n </Button>\n </div>\n )\n}"
|
|
2213
|
+
"id": "components-confirmationdialog-features--shorthand-hook"
|
|
2369
2214
|
},
|
|
2370
2215
|
{
|
|
2371
|
-
"id": "components-confirmationdialog-features--shorthand-hook-from-action-menu"
|
|
2372
|
-
"code": "() => {\n const confirm = useConfirm()\n const [text, setText] = useState('open me')\n const onButtonClick = useCallback(async () => {\n if (\n await confirm({\n title: 'Are you sure?',\n content: 'Do you really want to do a trick?',\n })\n ) {\n setText('tada!')\n }\n }, [confirm])\n return (\n <div className={classes.ButtonContainer}>\n <ActionMenu>\n <ActionMenu.Button>{text}</ActionMenu.Button>\n <ActionMenu.Overlay>\n <ActionList>\n <ActionList.Item onSelect={onButtonClick}>\n Do a trick!\n </ActionList.Item>\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n </div>\n )\n}"
|
|
2216
|
+
"id": "components-confirmationdialog-features--shorthand-hook-from-action-menu"
|
|
2373
2217
|
},
|
|
2374
2218
|
{
|
|
2375
|
-
"id": "components-confirmationdialog-features--loading-states"
|
|
2376
|
-
"code": "() => {\n const [isOpen, setIsOpen] = useState(false)\n const [isConfirmLoading, setIsConfirmLoading] = useState(false)\n const [isCancelLoading, setIsCancelLoading] = useState(false)\n const handleConfirm = useCallback(() => {\n setIsConfirmLoading(true)\n // Simulate async operation\n setTimeout(() => {\n setIsConfirmLoading(false)\n setIsOpen(false)\n }, 2000)\n }, [])\n const handleCancel = useCallback(() => {\n setIsCancelLoading(true)\n // Simulate async operation\n setTimeout(() => {\n setIsCancelLoading(false)\n setIsOpen(false)\n }, 1500)\n }, [])\n const handleClose = useCallback(\n (gesture: 'confirm' | 'close-button' | 'cancel' | 'escape') => {\n if (gesture === 'confirm') {\n handleConfirm()\n } else if (gesture === 'cancel') {\n handleCancel()\n } else {\n setIsOpen(false)\n }\n },\n [handleConfirm, handleCancel],\n )\n return (\n <div className={classes.ButtonContainer}>\n <Button onClick={() => setIsOpen(true)}>Show Loading Dialog</Button>\n {isOpen && (\n <ConfirmationDialog\n title=\"Delete this file?\"\n confirmButtonType=\"danger\"\n confirmButtonContent=\"Delete\"\n confirmButtonLoading={isConfirmLoading}\n cancelButtonLoading={isCancelLoading}\n onClose={handleClose}\n >\n This action cannot be undone. The file will be permanently deleted\n from your repository.\n </ConfirmationDialog>\n )}\n </div>\n )\n}"
|
|
2219
|
+
"id": "components-confirmationdialog-features--loading-states"
|
|
2377
2220
|
}
|
|
2378
2221
|
],
|
|
2379
2222
|
"props": [
|
|
@@ -2438,16 +2281,13 @@
|
|
|
2438
2281
|
"a11yReviewed": "2025-01-08",
|
|
2439
2282
|
"stories": [
|
|
2440
2283
|
{
|
|
2441
|
-
"id": "components-counterlabel--default"
|
|
2442
|
-
"code": "() => <CounterLabel>12</CounterLabel>"
|
|
2284
|
+
"id": "components-counterlabel--default"
|
|
2443
2285
|
},
|
|
2444
2286
|
{
|
|
2445
|
-
"id": "components-counterlabel-features--primary-theme"
|
|
2446
|
-
"code": "() => <CounterLabel variant=\"primary\">12</CounterLabel>"
|
|
2287
|
+
"id": "components-counterlabel-features--primary-theme"
|
|
2447
2288
|
},
|
|
2448
2289
|
{
|
|
2449
|
-
"id": "components-counterlabel-features--secondary-theme"
|
|
2450
|
-
"code": "() => <CounterLabel variant=\"secondary\">12</CounterLabel>"
|
|
2290
|
+
"id": "components-counterlabel-features--secondary-theme"
|
|
2451
2291
|
}
|
|
2452
2292
|
],
|
|
2453
2293
|
"importPath": "@primer/react",
|
|
@@ -2475,56 +2315,46 @@
|
|
|
2475
2315
|
"a11yReviewed": "2025-01-08",
|
|
2476
2316
|
"stories": [
|
|
2477
2317
|
{
|
|
2478
|
-
"id": "
|
|
2479
|
-
"code": "() => (\n <Table.Container>\n <Table.Title as=\"h2\" id=\"repositories\">\n Repositories\n </Table.Title>\n <Table.Subtitle as=\"p\" id=\"repositories-subtitle\">\n A subtitle could appear here to give extra context to the data.\n </Table.Subtitle>\n <DataTable\n aria-labelledby=\"repositories\"\n aria-describedby=\"repositories-subtitle\"\n data={data}\n columns={[\n {\n header: 'Repository',\n field: 'name',\n rowHeader: true,\n },\n {\n header: 'Type',\n field: 'type',\n renderCell: (row) => {\n return <Label>{uppercase(row.type)}</Label>\n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return <RelativeTime date={new Date(row.updatedAt)} />\n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.dependabot.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.codeScanning.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n ]}\n />\n </Table.Container>\n)"
|
|
2318
|
+
"id": "components-datatable--default"
|
|
2480
2319
|
},
|
|
2481
2320
|
{
|
|
2482
|
-
"id": "experimental-components-datatable
|
|
2483
|
-
"code": "() => (\n <Table.Container>\n <Table.Title as=\"h2\" id=\"repositories\">\n Repositories\n </Table.Title>\n <DataTable\n aria-labelledby=\"repositories\"\n aria-describedby=\"repositories-subtitle\"\n data={data}\n columns={[\n {\n header: 'Repository',\n field: 'name',\n rowHeader: true,\n },\n {\n header: 'Type',\n field: 'type',\n renderCell: (row) => {\n return <Label>{uppercase(row.type)}</Label>\n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return <RelativeTime date={new Date(row.updatedAt)} />\n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.dependabot.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.codeScanning.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n ]}\n />\n </Table.Container>\n)"
|
|
2321
|
+
"id": "experimental-components-datatable--default"
|
|
2484
2322
|
},
|
|
2485
2323
|
{
|
|
2486
|
-
"id": "experimental-components-datatable-features--with-title
|
|
2487
|
-
"code": "() => (\n <Table.Container>\n <Table.Title as=\"h2\" id=\"repositories\">\n Repositories\n </Table.Title>\n <Table.Subtitle as=\"p\" id=\"repositories-subtitle\">\n A subtitle could appear here to give extra context to the data.\n </Table.Subtitle>\n <DataTable\n aria-labelledby=\"repositories\"\n aria-describedby=\"repositories-subtitle\"\n data={data}\n columns={[\n {\n header: 'Repository',\n field: 'name',\n rowHeader: true,\n },\n {\n header: 'Type',\n field: 'type',\n renderCell: (row) => {\n return <Label>{uppercase(row.type)}</Label>\n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return <RelativeTime date={new Date(row.updatedAt)} />\n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.dependabot.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.codeScanning.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n ]}\n />\n </Table.Container>\n)"
|
|
2324
|
+
"id": "experimental-components-datatable-features--with-title"
|
|
2488
2325
|
},
|
|
2489
2326
|
{
|
|
2490
|
-
"id": "experimental-components-datatable-features--with-
|
|
2491
|
-
"code": "() => {\n const rows = Array.from(data).sort((a, b) => {\n return b.updatedAt - a.updatedAt\n })\n return (\n <Table.Container>\n <Table.Title as=\"h2\" id=\"repositories\">\n Repositories\n </Table.Title>\n <Table.Subtitle as=\"p\" id=\"repositories-subtitle\">\n A subtitle could appear here to give extra context to the data.\n </Table.Subtitle>\n <DataTable\n aria-labelledby=\"repositories\"\n aria-describedby=\"repositories-subtitle\"\n data={rows}\n columns={[\n {\n header: 'Repository',\n field: 'name',\n rowHeader: true,\n sortBy: 'alphanumeric',\n },\n {\n header: 'Type',\n field: 'type',\n renderCell: (row) => {\n return <Label>{uppercase(row.type)}</Label>\n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n sortBy: 'datetime',\n renderCell: (row) => {\n return <RelativeTime date={new Date(row.updatedAt)} />\n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.dependabot.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.codeScanning.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n ]}\n initialSortColumn=\"updatedAt\"\n initialSortDirection=\"DESC\"\n />\n </Table.Container>\n )\n}"
|
|
2327
|
+
"id": "experimental-components-datatable-features--with-title-and-subtitle"
|
|
2492
2328
|
},
|
|
2493
2329
|
{
|
|
2494
|
-
"id": "experimental-components-datatable-features--with-
|
|
2495
|
-
"code": "() => (\n <Table.Container>\n <Table.Title as=\"h2\" id=\"repositories\">\n Repositories\n </Table.Title>\n <Table.Actions>\n <IconButton\n aria-label=\"Download\"\n icon={DownloadIcon}\n variant=\"invisible\"\n />\n <IconButton aria-label=\"Add row\" icon={PlusIcon} variant=\"invisible\" />\n </Table.Actions>\n <Table.Divider />\n <Table.Subtitle as=\"p\" id=\"repositories-subtitle\">\n A subtitle could appear here to give extra context to the data.\n </Table.Subtitle>\n <DataTable\n aria-labelledby=\"repositories\"\n aria-describedby=\"repositories-subtitle\"\n data={data}\n columns={[\n {\n header: 'Repository',\n field: 'name',\n rowHeader: true,\n },\n {\n header: 'Type',\n field: 'type',\n renderCell: (row) => {\n return <Label>{uppercase(row.type)}</Label>\n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return <RelativeTime date={new Date(row.updatedAt)} />\n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.dependabot.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.codeScanning.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n ]}\n />\n </Table.Container>\n)"
|
|
2330
|
+
"id": "experimental-components-datatable-features--with-sorting"
|
|
2496
2331
|
},
|
|
2497
2332
|
{
|
|
2498
|
-
"id": "experimental-components-datatable-features--with-
|
|
2499
|
-
"code": "() => (\n <Table.Container>\n <Table.Title as=\"h2\" id=\"repositories\">\n Repositories\n </Table.Title>\n <Table.Actions>\n <Button>Action</Button>\n </Table.Actions>\n <Table.Divider />\n <Table.Subtitle as=\"p\" id=\"repositories-subtitle\">\n A subtitle could appear here to give extra context to the data.\n </Table.Subtitle>\n <DataTable\n aria-labelledby=\"repositories\"\n aria-describedby=\"repositories-subtitle\"\n data={data}\n columns={[\n {\n header: 'Repository',\n field: 'name',\n rowHeader: true,\n },\n {\n header: 'Type',\n field: 'type',\n renderCell: (row) => {\n return <Label>{uppercase(row.type)}</Label>\n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return <RelativeTime date={new Date(row.updatedAt)} />\n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.dependabot.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.codeScanning.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n ]}\n />\n </Table.Container>\n)"
|
|
2333
|
+
"id": "experimental-components-datatable-features--with-actions"
|
|
2500
2334
|
},
|
|
2501
2335
|
{
|
|
2502
|
-
"id": "experimental-components-datatable-features--with-
|
|
2503
|
-
"code": "() => (\n <Table.Container>\n <Table.Title as=\"h2\" id=\"repositories\">\n Repositories\n </Table.Title>\n <Table.Subtitle as=\"p\" id=\"repositories-subtitle\">\n A subtitle could appear here to give extra context to the data.\n </Table.Subtitle>\n <DataTable\n aria-labelledby=\"repositories\"\n aria-describedby=\"repositories-subtitle\"\n data={data}\n columns={[\n {\n header: 'Repository',\n field: 'name',\n rowHeader: true,\n },\n {\n header: 'Type',\n field: 'type',\n renderCell: (row) => {\n return <Label>{uppercase(row.type)}</Label>\n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return <RelativeTime date={new Date(row.updatedAt)} />\n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.dependabot.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.codeScanning.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n {\n id: 'actions',\n header: () => <VisuallyHidden>Actions</VisuallyHidden>,\n renderCell: (row) => {\n return (\n <IconButton\n aria-label={`Download: ${row.name}`}\n title={`Download: ${row.name}`}\n icon={DownloadIcon}\n variant=\"invisible\"\n onClick={() => {\n action('Download')(row)\n }}\n />\n )\n },\n },\n ]}\n />\n </Table.Container>\n)"
|
|
2336
|
+
"id": "experimental-components-datatable-features--with-action"
|
|
2504
2337
|
},
|
|
2505
2338
|
{
|
|
2506
|
-
"id": "experimental-components-datatable-features--with-row-
|
|
2507
|
-
"code": "() => (\n <Table.Container>\n <Table.Title as=\"h2\" id=\"repositories\">\n Repositories\n </Table.Title>\n <Table.Subtitle as=\"p\" id=\"repositories-subtitle\">\n A subtitle could appear here to give extra context to the data.\n </Table.Subtitle>\n <DataTable\n aria-labelledby=\"repositories\"\n aria-describedby=\"repositories-subtitle\"\n data={data}\n columns={[\n {\n header: 'Repository',\n field: 'name',\n rowHeader: true,\n },\n {\n header: 'Type',\n field: 'type',\n renderCell: (row) => {\n return <Label>{uppercase(row.type)}</Label>\n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return <RelativeTime date={new Date(row.updatedAt)} />\n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.dependabot.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.codeScanning.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n {\n id: 'actions',\n header: () => <VisuallyHidden>Actions</VisuallyHidden>,\n renderCell: (row) => {\n return (\n <>\n <IconButton\n aria-label={`Edit: ${row.name}`}\n title={`Edit: ${row.name}`}\n icon={PencilIcon}\n variant=\"invisible\"\n onClick={() => {\n action('Edit')(row)\n }}\n />\n <IconButton\n aria-label={`Delete: ${row.name}`}\n title={`Delete: ${row.name}`}\n icon={TrashIcon}\n variant=\"invisible\"\n onClick={() => {\n action('Delete')(row)\n }}\n />\n </>\n )\n },\n },\n ]}\n />\n </Table.Container>\n)"
|
|
2339
|
+
"id": "experimental-components-datatable-features--with-row-action"
|
|
2508
2340
|
},
|
|
2509
2341
|
{
|
|
2510
|
-
"id": "experimental-components-datatable-features--with-row-
|
|
2511
|
-
"code": "() => (\n <Table.Container>\n <Table.Title as=\"h2\" id=\"repositories\">\n Repositories\n </Table.Title>\n <Table.Subtitle as=\"p\" id=\"repositories-subtitle\">\n A subtitle could appear here to give extra context to the data.\n </Table.Subtitle>\n <DataTable\n aria-labelledby=\"repositories\"\n aria-describedby=\"repositories-subtitle\"\n data={data}\n columns={[\n {\n header: 'Repository',\n field: 'name',\n rowHeader: true,\n },\n {\n header: 'Type',\n field: 'type',\n renderCell: (row) => {\n return <Label>{uppercase(row.type)}</Label>\n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return <RelativeTime date={new Date(row.updatedAt)} />\n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.dependabot.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.codeScanning.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n {\n id: 'actions',\n header: () => <VisuallyHidden>Actions</VisuallyHidden>,\n renderCell: (row) => {\n return (\n <ActionMenu>\n <ActionMenu.Anchor>\n <IconButton\n aria-label={`Actions: ${row.name}`}\n title={`Actions: ${row.name}`}\n icon={KebabHorizontalIcon}\n variant=\"invisible\"\n />\n </ActionMenu.Anchor>\n <ActionMenu.Overlay>\n <ActionList>\n <ActionList.Item\n onSelect={() => {\n action('Copy')(row)\n }}\n >\n Copy row\n </ActionList.Item>\n <ActionList.Item>Edit row</ActionList.Item>\n <ActionList.Item>Export row as CSV</ActionList.Item>\n <ActionList.Divider />\n <ActionList.Item variant=\"danger\">\n Delete row\n </ActionList.Item>\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n )\n },\n },\n ]}\n />\n </Table.Container>\n)"
|
|
2342
|
+
"id": "experimental-components-datatable-features--with-row-actions"
|
|
2512
2343
|
},
|
|
2513
2344
|
{
|
|
2514
|
-
"id": "experimental-components-datatable-features--with-
|
|
2515
|
-
"code": "() => (\n <>\n <Heading as=\"h2\" id=\"repositories\">\n Security coverage\n </Heading>\n <p id=\"repositories-subtitle\">\n Organization members can only see data for the most recently-updated\n repositories. To see all repositories, talk to your organization\n administrator about becoming a security manager.\n </p>\n <Table.Container>\n <DataTable\n aria-labelledby=\"repositories\"\n aria-describedby=\"repositories-subtitle\"\n data={data}\n columns={[\n {\n header: 'Repository',\n field: 'name',\n rowHeader: true,\n },\n {\n header: 'Type',\n field: 'type',\n renderCell: (row) => {\n return <Label>{uppercase(row.type)}</Label>\n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return <RelativeTime date={new Date(row.updatedAt)} />\n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.dependabot.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.codeScanning.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n ]}\n />\n </Table.Container>\n </>\n)"
|
|
2345
|
+
"id": "experimental-components-datatable-features--with-row-action-menu"
|
|
2516
2346
|
},
|
|
2517
2347
|
{
|
|
2518
|
-
"id": "experimental-components-datatable-features--with-
|
|
2519
|
-
"code": "() => {\n const exampleEmptyData: Array<Repo> = []\n return exampleEmptyData.length === 0 ? (\n <Blankslate border>\n <Blankslate.Visual>\n <BookIcon size=\"medium\" />\n </Blankslate.Visual>\n <Blankslate.Heading>Blankslate heading</Blankslate.Heading>\n <Blankslate.Description>\n Use it to provide information when no dynamic content exists.\n </Blankslate.Description>\n <Blankslate.PrimaryAction href=\"#\">\n Primary action\n </Blankslate.PrimaryAction>\n <Blankslate.SecondaryAction href=\"#\">\n Secondary action link\n </Blankslate.SecondaryAction>\n </Blankslate>\n ) : (\n <Table.Container>\n <Table.Title as=\"h2\" id=\"repositories\">\n Repositories\n </Table.Title>\n <Table.Subtitle as=\"p\" id=\"repositories-subtitle\">\n A subtitle could appear here to give extra context to the data.\n </Table.Subtitle>\n <DataTable\n aria-labelledby=\"repositories\"\n aria-describedby=\"repositories-subtitle\"\n data={exampleEmptyData}\n columns={[\n {\n header: 'Repository',\n field: 'name',\n rowHeader: true,\n },\n {\n header: 'Type',\n field: 'type',\n renderCell: (row) => {\n return <Label>{uppercase(row.type)}</Label>\n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return <RelativeTime date={new Date(row.updatedAt)} />\n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.dependabot.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.codeScanning.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n ]}\n />\n </Table.Container>\n )\n}"
|
|
2348
|
+
"id": "experimental-components-datatable-features--with-custom-heading"
|
|
2520
2349
|
},
|
|
2521
2350
|
{
|
|
2522
|
-
"id": "experimental-components-datatable-features--with-
|
|
2523
|
-
"code": "() => {\n const [loading] = React.useState(true)\n return (\n <Table.Container>\n <Table.Title as=\"h2\" id=\"repositories\">\n Repositories\n </Table.Title>\n <Table.Subtitle as=\"p\" id=\"repositories-subtitle\">\n A subtitle could appear here to give extra context to the data.\n </Table.Subtitle>\n {loading ? (\n <Table.Skeleton\n aria-labelledby=\"repositories\"\n aria-describedby=\"repositories-subtitle\"\n columns={columns}\n rows={10}\n />\n ) : (\n <DataTable\n aria-labelledby=\"repositories\"\n aria-describedby=\"repositories-subtitle\"\n data={data}\n columns={columns}\n />\n )}\n </Table.Container>\n )\n}"
|
|
2351
|
+
"id": "experimental-components-datatable-features--with-no-content"
|
|
2524
2352
|
},
|
|
2525
2353
|
{
|
|
2526
|
-
"id": "experimental-components-datatable-features--with-
|
|
2527
|
-
|
|
2354
|
+
"id": "experimental-components-datatable-features--with-loading"
|
|
2355
|
+
},
|
|
2356
|
+
{
|
|
2357
|
+
"id": "experimental-components-datatable-features--with-pagination"
|
|
2528
2358
|
}
|
|
2529
2359
|
],
|
|
2530
2360
|
"importPath": "@primer/react/experimental",
|
|
@@ -2916,8 +2746,7 @@
|
|
|
2916
2746
|
"a11yReviewed": "2025-01-08",
|
|
2917
2747
|
"stories": [
|
|
2918
2748
|
{
|
|
2919
|
-
"id": "components-details--default"
|
|
2920
|
-
"code": "() => {\n const { getDetailsProps } = useDetails({\n closeOnOutsideClick: true,\n })\n return (\n <Details {...getDetailsProps()}>\n <Details.Summary as={Button}>See Details</Details.Summary>\n This is some content\n </Details>\n )\n}"
|
|
2749
|
+
"id": "components-details--default"
|
|
2921
2750
|
}
|
|
2922
2751
|
],
|
|
2923
2752
|
"importPath": "@primer/react",
|
|
@@ -2950,44 +2779,34 @@
|
|
|
2950
2779
|
"a11yReviewed": "2025-01-08",
|
|
2951
2780
|
"stories": [
|
|
2952
2781
|
{
|
|
2953
|
-
"id": "components-dialog--default"
|
|
2954
|
-
"code": "() => {\n const [isOpen, setIsOpen] = useState(false)\n const [secondOpen, setSecondOpen] = useState(false)\n const buttonRef = useRef<HTMLButtonElement>(null)\n const onDialogClose = useCallback(() => setIsOpen(false), [])\n const onSecondDialogClose = useCallback(() => setSecondOpen(false), [])\n const openSecondDialog = useCallback(() => setSecondOpen(true), [])\n return (\n <>\n <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>\n Show dialog\n </Button>\n {isOpen && (\n <Dialog\n title=\"My Dialog\"\n onClose={onDialogClose}\n footerButtons={[\n {\n buttonType: 'default',\n content: 'Open Second Dialog',\n onClick: openSecondDialog,\n },\n {\n buttonType: 'danger',\n content: 'Delete the universe',\n onClick: onDialogClose,\n },\n {\n buttonType: 'primary',\n content: 'Proceed',\n onClick: openSecondDialog,\n },\n ]}\n >\n {lipsum}\n {secondOpen && (\n <Dialog\n title=\"Inner dialog!\"\n onClose={onSecondDialogClose}\n width=\"small\"\n >\n Hello world\n </Dialog>\n )}\n </Dialog>\n )}\n </>\n )\n}"
|
|
2782
|
+
"id": "components-dialog--default"
|
|
2955
2783
|
},
|
|
2956
2784
|
{
|
|
2957
|
-
"id": "components-dialog-features--with-custom-renderers"
|
|
2958
|
-
"code": "({ width, height, subtitle }: DialogStoryProps) => {\n const [isOpen, setIsOpen] = useState(false)\n const onDialogClose = useCallback(() => setIsOpen(false), [])\n return (\n <>\n <Button onClick={() => setIsOpen(!isOpen)}>Show dialog</Button>\n {isOpen && (\n <Dialog\n title=\"My Dialog\"\n subtitle={subtitle ? 'This is a subtitle!' : undefined}\n width={width}\n height={height}\n renderHeader={CustomHeader}\n renderBody={CustomBody}\n renderFooter={CustomFooter}\n onClose={onDialogClose}\n footerButtons={[\n {\n buttonType: 'danger',\n content: 'Delete the universe',\n onClick: onDialogClose,\n },\n {\n buttonType: 'primary',\n content: 'Proceed',\n },\n ]}\n >\n {lipsum}\n </Dialog>\n )}\n </>\n )\n}"
|
|
2785
|
+
"id": "components-dialog-features--with-custom-renderers"
|
|
2959
2786
|
},
|
|
2960
2787
|
{
|
|
2961
|
-
"id": "components-dialog-features--stress-test"
|
|
2962
|
-
"code": "({ width, height, subtitle }: DialogStoryProps) => {\n const [isOpen, setIsOpen] = useState(false)\n const [secondOpen, setSecondOpen] = useState(false)\n const buttonRef = useRef<HTMLButtonElement>(null)\n const onDialogClose = useCallback(() => setIsOpen(false), [])\n const onSecondDialogClose = useCallback(() => setSecondOpen(false), [])\n const openSecondDialog = useCallback(() => setSecondOpen(true), [])\n const manyButtons = new Array(7).fill(undefined).map((_, i) => ({\n content: `Button ${i}`,\n }))\n return (\n <>\n <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>\n Show dialog\n </Button>\n {isOpen && (\n <Dialog\n title=\"This dialog has a really long title. So long, in fact, that it should cause wrapping, going to multiple lines!.\"\n subtitle={\n subtitle\n ? \"It's not a common scenario, sure, but what if the subtitle is generated from a really long value? Do we just break the dialog? Or do we handle it because we are pros?\"\n : undefined\n }\n onClose={onDialogClose}\n width={width}\n height={height}\n footerButtons={[\n ...manyButtons,\n {\n buttonType: 'danger',\n content: 'Delete the universe',\n onClick: onDialogClose,\n },\n {\n buttonType: 'primary',\n content: 'Proceed',\n onClick: openSecondDialog,\n },\n ]}\n position={{\n narrow: 'fullscreen',\n regular: 'center',\n }}\n >\n {lipsum}\n {secondOpen && (\n <Dialog\n title=\"Inner dialog!\"\n onClose={onSecondDialogClose}\n width=\"small\"\n >\n Hello world\n </Dialog>\n )}\n </Dialog>\n )}\n </>\n )\n}"
|
|
2788
|
+
"id": "components-dialog-features--stress-test"
|
|
2963
2789
|
},
|
|
2964
2790
|
{
|
|
2965
|
-
"id": "components-dialog-features--repro-multistep-dialog-with-conditional-footer"
|
|
2966
|
-
"code": "({ width, height }: DialogStoryProps) => {\n const [isOpen, setIsOpen] = useState(false)\n const onDialogClose = useCallback(() => setIsOpen(false), [])\n const [step, setStep] = React.useState(1)\n const [inputText, setInputText] = React.useState('')\n const dialogRef = useRef<HTMLDivElement>(null)\n const renderFooterConditionally = () => {\n if (step === 1) return null\n return (\n <Dialog.Footer>\n <Button variant=\"primary\">Submit</Button>\n </Dialog.Footer>\n )\n }\n React.useEffect(() => {\n // focus the close button when the step changes\n const focusTarget = dialogRef.current?.querySelector(\n 'button[aria-label=\"Close\"]',\n ) as HTMLButtonElement\n if (step === 2) {\n focusTarget.focus()\n }\n }, [step])\n return (\n <>\n <Button onClick={() => setIsOpen(!isOpen)}>Show dialog</Button>\n {isOpen && (\n <Dialog\n title={`Step ${step}`}\n width={width}\n height={height}\n renderFooter={renderFooterConditionally}\n onClose={onDialogClose}\n footerButtons={[\n {\n buttonType: 'primary',\n content: 'Proceed',\n },\n ]}\n ref={dialogRef}\n >\n {step === 1 ? (\n <Stack gap=\"spacious\" direction=\"vertical\">\n <Stack direction=\"horizontal\" justify=\"space-between\">\n Bug Report <Button onClick={() => setStep(2)}>Choose</Button>\n </Stack>\n <Stack direction=\"horizontal\" justify=\"space-between\">\n Feature request{' '}\n <Button onClick={() => setStep(2)}>Choose</Button>\n </Stack>\n </Stack>\n ) : (\n <div>\n <Stack gap=\"condensed\" direction=\"vertical\">\n <label htmlFor=\"description\">Description</label>\n <TextInput\n id=\"description\"\n placeholder=\"Write the description here\"\n value={inputText}\n onChange={(event) => setInputText(event.target.value)}\n />\n </Stack>\n </div>\n )}\n </Dialog>\n )}\n </>\n )\n}"
|
|
2791
|
+
"id": "components-dialog-features--repro-multistep-dialog-with-conditional-footer"
|
|
2967
2792
|
},
|
|
2968
2793
|
{
|
|
2969
|
-
"id": "components-dialog-features--bottom-sheet-narrow"
|
|
2970
|
-
"code": "() => {\n const [isOpen, setIsOpen] = useState(true)\n const buttonRef = useRef<HTMLButtonElement>(null)\n const onDialogClose = useCallback(() => setIsOpen(false), [])\n return (\n <>\n <Button ref={buttonRef} onClick={() => setIsOpen(true)}>\n Show dialog\n </Button>\n {isOpen && (\n <Dialog\n title=\"My Dialog\"\n onClose={onDialogClose}\n position={{\n narrow: 'bottom',\n regular: 'center',\n }}\n >\n {bodyContent}\n </Dialog>\n )}\n </>\n )\n}"
|
|
2794
|
+
"id": "components-dialog-features--bottom-sheet-narrow"
|
|
2971
2795
|
},
|
|
2972
2796
|
{
|
|
2973
|
-
"id": "components-dialog-features--full-screen-narrow"
|
|
2974
|
-
"code": "() => {\n const [isOpen, setIsOpen] = useState(true)\n const buttonRef = useRef<HTMLButtonElement>(null)\n const onDialogClose = useCallback(() => setIsOpen(false), [])\n return (\n <>\n <Button ref={buttonRef} onClick={() => setIsOpen(true)}>\n Show dialog\n </Button>\n {isOpen && (\n <Dialog\n title=\"My Dialog\"\n onClose={onDialogClose}\n position={{\n narrow: 'fullscreen',\n regular: 'center',\n }}\n >\n {bodyContent}\n </Dialog>\n )}\n </>\n )\n}"
|
|
2797
|
+
"id": "components-dialog-features--full-screen-narrow"
|
|
2975
2798
|
},
|
|
2976
2799
|
{
|
|
2977
|
-
"id": "components-dialog-features--side-sheet"
|
|
2978
|
-
"code": "() => {\n const [isOpen, setIsOpen] = useState(true)\n const buttonRef = useRef<HTMLButtonElement>(null)\n const onDialogClose = useCallback(() => setIsOpen(false), [])\n return (\n <>\n <Button ref={buttonRef} onClick={() => setIsOpen(true)}>\n Show dialog\n </Button>\n {isOpen && (\n <Dialog title=\"My Dialog\" onClose={onDialogClose} position=\"right\">\n {bodyContent}\n </Dialog>\n )}\n </>\n )\n}"
|
|
2800
|
+
"id": "components-dialog-features--side-sheet"
|
|
2979
2801
|
},
|
|
2980
2802
|
{
|
|
2981
|
-
"id": "components-dialog-features--return-focus-ref"
|
|
2982
|
-
"code": "() => {\n const [isOpen, setIsOpen] = useState(false)\n const onDialogClose = useCallback(() => setIsOpen(false), [])\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const triggerButton = (\n <Button ref={triggerRef} variant=\"primary\" onClick={() => setIsOpen(true)}>\n Show dialog\n </Button>\n )\n if (!isOpen) return triggerButton\n return (\n <React.Suspense fallback={<Button>Show Dialog</Button>}>\n {triggerButton}\n <Dialog title=\"title\" onClose={onDialogClose} returnFocusRef={triggerRef}>\n body\n </Dialog>\n </React.Suspense>\n )\n}"
|
|
2803
|
+
"id": "components-dialog-features--return-focus-ref"
|
|
2983
2804
|
},
|
|
2984
2805
|
{
|
|
2985
|
-
"id": "components-dialog-features--new-issues"
|
|
2986
|
-
"code": "() => {\n const [isOpen, setIsOpen] = useState(false)\n const onDialogClose = useCallback(() => setIsOpen(false), [])\n const initialFocusRef = useRef(null)\n return (\n <>\n <Button onClick={() => setIsOpen(true)}>Show dialog</Button>\n {isOpen ? (\n <Dialog\n initialFocusRef={initialFocusRef}\n onClose={onDialogClose}\n title=\"New issue\"\n renderBody={() => (\n <ActionList>\n <ActionList.LinkItem\n ref={initialFocusRef}\n href=\"https://github.com\"\n >\n Item 1\n </ActionList.LinkItem>\n <ActionList.LinkItem href=\"https://github.com\">\n Link\n </ActionList.LinkItem>\n </ActionList>\n )}\n ></Dialog>\n ) : null}\n </>\n )\n}"
|
|
2806
|
+
"id": "components-dialog-features--new-issues"
|
|
2987
2807
|
},
|
|
2988
2808
|
{
|
|
2989
|
-
"id": "components-dialog-features--retains-focus-trap-with-dynamic-content"
|
|
2990
|
-
"code": "() => {\n const [isOpen, setIsOpen] = useState(false)\n const [secondOpen, setSecondOpen] = useState(false)\n const [expandContent, setExpandContent] = useState(false)\n const [changeBodyContent, setChangeBodyContent] = useState(false)\n const buttonRef = useRef<HTMLButtonElement>(null)\n const onDialogClose = useCallback(() => setIsOpen(false), [])\n const onSecondDialogClose = useCallback(() => setSecondOpen(false), [])\n const openSecondDialog = useCallback(() => setSecondOpen(true), [])\n const renderFooterConditionally = () => {\n if (!changeBodyContent) return null\n return (\n <Dialog.Footer>\n <Button variant=\"primary\">Submit</Button>\n </Dialog.Footer>\n )\n }\n return (\n <>\n <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>\n Show dialog\n </Button>\n {isOpen && (\n <Dialog\n title=\"My Dialog\"\n onClose={onDialogClose}\n renderFooter={renderFooterConditionally}\n >\n <Button onClick={() => setExpandContent(!expandContent)}>\n Click me to dynamically {expandContent ? 'remove' : 'render'}{' '}\n content\n </Button>\n <Button onClick={() => setChangeBodyContent(!changeBodyContent)}>\n Click me to {changeBodyContent ? 'remove' : 'add'} a footer\n </Button>\n <Button onClick={openSecondDialog}>\n Click me to open a new dialog\n </Button>\n {expandContent && (\n <Stack gap=\"normal\" direction=\"vertical\">\n {lipsum}\n <Button>Dialog Button Example 1</Button>\n <Button>Dialog Button Example 2</Button>\n </Stack>\n )}\n {secondOpen && (\n <Dialog\n title=\"Inner dialog!\"\n onClose={onSecondDialogClose}\n width=\"small\"\n >\n Hello world\n </Dialog>\n )}\n </Dialog>\n )}\n </>\n )\n}"
|
|
2809
|
+
"id": "components-dialog-features--retains-focus-trap-with-dynamic-content"
|
|
2991
2810
|
}
|
|
2992
2811
|
],
|
|
2993
2812
|
"importPath": "@primer/react",
|
|
@@ -3159,32 +2978,25 @@
|
|
|
3159
2978
|
"a11yReviewed": "2025-01-08",
|
|
3160
2979
|
"stories": [
|
|
3161
2980
|
{
|
|
3162
|
-
"id": "components-flash--default"
|
|
3163
|
-
"code": "() => <Flash>Default</Flash>"
|
|
2981
|
+
"id": "components-flash--default"
|
|
3164
2982
|
},
|
|
3165
2983
|
{
|
|
3166
|
-
"id": "components-flash-features--success"
|
|
3167
|
-
"code": "() => (\n <Flash\n variant=\"success\"\n style={{\n display: 'grid',\n gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n gridTemplateAreas: `'visual message actions'`,\n }}\n >\n <div className={classes.Visual}>\n <CheckCircleIcon aria-label=\"Success\" />\n </div>\n <div className={classes.Message}>Success</div>\n </Flash>\n)"
|
|
2984
|
+
"id": "components-flash-features--success"
|
|
3168
2985
|
},
|
|
3169
2986
|
{
|
|
3170
|
-
"id": "components-flash-features--danger"
|
|
3171
|
-
"code": "() => (\n <Flash\n variant=\"danger\"\n style={{\n display: 'grid',\n gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n gridTemplateAreas: `'visual message actions'`,\n }}\n >\n <div className={classes.Visual}>\n <InfoIcon aria-label=\"Danger\" />\n </div>\n <div className={classes.Message}>Danger</div>\n </Flash>\n)"
|
|
2987
|
+
"id": "components-flash-features--danger"
|
|
3172
2988
|
},
|
|
3173
2989
|
{
|
|
3174
|
-
"id": "components-flash-features--warning"
|
|
3175
|
-
"code": "() => (\n <Flash\n variant=\"warning\"\n style={{\n display: 'grid',\n gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n gridTemplateAreas: `'visual message actions'`,\n }}\n >\n <div className={classes.Visual}>\n <AlertIcon aria-label=\"Warning\" />\n </div>\n <div className={classes.Message}>Warning</div>\n </Flash>\n)"
|
|
2990
|
+
"id": "components-flash-features--warning"
|
|
3176
2991
|
},
|
|
3177
2992
|
{
|
|
3178
|
-
"id": "components-flash-features--full"
|
|
3179
|
-
"code": "() => (\n <Flash\n full\n style={{\n display: 'grid',\n gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n gridTemplateAreas: `'visual message actions'`,\n }}\n >\n <div className={classes.Visual}>\n <InfoIcon aria-label=\"Info\" />\n </div>\n <div className={classes.Message}>Full</div>\n </Flash>\n)"
|
|
2993
|
+
"id": "components-flash-features--full"
|
|
3180
2994
|
},
|
|
3181
2995
|
{
|
|
3182
|
-
"id": "components-flash-features--with-icon-and-action"
|
|
3183
|
-
"code": "() => (\n <Flash className={classes.WithIconAndAction}>\n <div className={classes.Visual}>\n <InfoIcon aria-label=\"Info\" />\n </div>\n <div className={classes.Message}>\n This is a flash message with an icon and an action.\n <Link href=\"/\"> Learn more.</Link>\n </div>\n <div className={classes.ActionsResponsive}>\n <Button>Join waitlist</Button>\n </div>\n </Flash>\n)"
|
|
2996
|
+
"id": "components-flash-features--with-icon-and-action"
|
|
3184
2997
|
},
|
|
3185
2998
|
{
|
|
3186
|
-
"id": "components-flash-features--with-icon-action-dismiss"
|
|
3187
|
-
"code": "() => (\n <Flash className={classes.WithIconActionDismiss}>\n <div className={classes.Visual}>\n <InfoIcon aria-label=\"Info\" />\n </div>\n <div className={classes.Message}>\n This is a flash message with an icon and an action.\n <Link href=\"/\"> Learn more.</Link>\n </div>\n <div className={classes.ActionsResponsive}>\n <Button>Join waitlist</Button>\n </div>\n <div className={classes.Close}>\n <IconButton variant=\"invisible\" icon={XIcon} aria-label=\"Dismiss\" />\n </div>\n </Flash>\n)"
|
|
2999
|
+
"id": "components-flash-features--with-icon-action-dismiss"
|
|
3188
3000
|
}
|
|
3189
3001
|
],
|
|
3190
3002
|
"importPath": "@primer/react",
|
|
@@ -3221,68 +3033,52 @@
|
|
|
3221
3033
|
"a11yReviewed": "2025-01-08",
|
|
3222
3034
|
"stories": [
|
|
3223
3035
|
{
|
|
3224
|
-
"id": "components-formcontrol--default"
|
|
3225
|
-
"code": "() => (\n <FormControl required={true}>\n <FormControl.Label>Form Input Label</FormControl.Label>\n <FormControl.Caption>This is a caption</FormControl.Caption>\n <Checkbox />\n </FormControl>\n)"
|
|
3036
|
+
"id": "components-formcontrol--default"
|
|
3226
3037
|
},
|
|
3227
3038
|
{
|
|
3228
|
-
"id": "components-formcontrol-features--with-complex-inputs"
|
|
3229
|
-
"code": "() => {\n const [tokens, setTokens] = useState([...mockTokens])\n const onTokenRemove = (tokenId: string | number) => {\n setTokens(\n tokens.filter((token: { id: string | number }) => token.id !== tokenId),\n )\n }\n return (\n <div className={classes.GridContainer}>\n <FormControl>\n <FormControl.Label id=\"form-label\">\n TextInputWithTokens\n </FormControl.Label>\n <TextInputWithTokens onTokenRemove={onTokenRemove} tokens={tokens} />\n </FormControl>\n <FormControl>\n <FormControl.Label id=\"autocomplete-label\">\n Autocomplete\n </FormControl.Label>\n <Autocomplete>\n <Autocomplete.Input block />\n <Autocomplete.Overlay>\n <Autocomplete.Menu\n aria-labelledby=\"autocomplete-label\"\n items={[\n {\n text: 'css',\n id: '0',\n },\n {\n text: 'css-in-js',\n id: '1',\n },\n {\n text: 'styled-system',\n id: '2',\n },\n {\n text: 'javascript',\n id: '3',\n },\n {\n text: 'typescript',\n id: '4',\n },\n {\n text: 'react',\n id: '5',\n },\n {\n text: 'design-systems',\n id: '6',\n },\n ]}\n selectedItemIds={[]}\n />\n </Autocomplete.Overlay>\n </Autocomplete>\n </FormControl>\n <FormControl>\n <FormControl.Label>Select</FormControl.Label>\n <Select>\n <Select.Option value=\"figma\">Figma</Select.Option>\n <Select.Option value=\"css\">Primer CSS</Select.Option>\n <Select.Option value=\"prc\">Primer React components</Select.Option>\n <Select.Option value=\"pvc\">Primer ViewComponents</Select.Option>\n </Select>\n </FormControl>\n <FormControl>\n <FormControl.Label>Textarea</FormControl.Label>\n <Textarea />\n </FormControl>\n </div>\n )\n}"
|
|
3039
|
+
"id": "components-formcontrol-features--with-complex-inputs"
|
|
3230
3040
|
},
|
|
3231
3041
|
{
|
|
3232
|
-
"id": "components-formcontrol-features--form-control-with-custom-input"
|
|
3233
|
-
"code": "() => {\n const [value, setValue] = React.useState('mona lisa')\n const [validationResult, setValidationResult] = React.useState('')\n const doesValueContainSpaces = (inputValue: string) => /\\s/g.test(inputValue)\n const handleInputChange = (e: {\n currentTarget: {\n value: React.SetStateAction<string>\n }\n }) => {\n setValue(e.currentTarget.value)\n }\n React.useEffect(() => {\n if (doesValueContainSpaces(value)) {\n setValidationResult('noSpaces')\n } else if (value) {\n setValidationResult('validName')\n }\n }, [value])\n return (\n <div className={classes.GridContainer}>\n <FormControl>\n <FormControl.Label htmlFor=\"custom-input\">\n GitHub handle\n </FormControl.Label>\n <CustomTextInput\n id=\"custom-input\"\n aria-describedby=\"custom-input-caption custom-input-validation\"\n aria-invalid={validationResult === 'noSpaces'}\n onChange={handleInputChange}\n />\n {validationResult === 'noSpaces' && (\n <FormControl.Validation id=\"custom-input-validation\" variant=\"error\">\n GitHub handles cannot contain spaces\n </FormControl.Validation>\n )}\n {validationResult === 'validName' && (\n <FormControl.Validation\n id=\"custom-input-validation\"\n variant=\"success\"\n >\n Valid name\n </FormControl.Validation>\n )}\n <FormControl.Caption id=\"custom-input-caption\">\n With or without "@". For example "monalisa" or\n "@monalisa"\n </FormControl.Caption>\n </FormControl>\n\n <CheckboxGroup>\n <CheckboxGroup.Label>Checkboxes</CheckboxGroup.Label>\n <FormControl layout=\"horizontal\">\n <CustomCheckboxInput\n id=\"custom-checkbox-one\"\n aria-describedby=\"custom-checkbox-one-caption\"\n value=\"checkOne\"\n />\n <FormControl.Label htmlFor=\"custom-checkbox-one\">\n Checkbox one\n </FormControl.Label>\n <FormControl.Caption id=\"custom-checkbox-one-caption\">\n Hint text for checkbox one\n </FormControl.Caption>\n </FormControl>\n <FormControl layout=\"horizontal\">\n <CustomCheckboxInput\n id=\"custom-checkbox-two\"\n aria-describedby=\"custom-checkbox-two-caption\"\n value=\"checkTwo\"\n />\n <FormControl.Label htmlFor=\"custom-checkbox-two\">\n Checkbox two\n </FormControl.Label>\n <FormControl.Caption id=\"custom-checkbox-two-caption\">\n Hint text for checkbox two\n </FormControl.Caption>\n </FormControl>\n </CheckboxGroup>\n </div>\n )\n}"
|
|
3042
|
+
"id": "components-formcontrol-features--form-control-with-custom-input"
|
|
3234
3043
|
},
|
|
3235
3044
|
{
|
|
3236
|
-
"id": "components-formcontrol-features--with-checkbox-and-radio-inputs"
|
|
3237
|
-
"code": "() => {\n return (\n <div className={classes.GapContainer}>\n <CheckboxGroup>\n <CheckboxGroup.Label>Checkboxes</CheckboxGroup.Label>\n <FormControl>\n <Checkbox value=\"checkOne\" />\n <FormControl.Label>Checkbox one</FormControl.Label>\n </FormControl>\n <FormControl>\n <Checkbox value=\"checkTwo\" />\n <FormControl.Label>Checkbox two</FormControl.Label>\n </FormControl>\n <FormControl>\n <Checkbox value=\"checkThree\" />\n <FormControl.Label>Checkbox three</FormControl.Label>\n </FormControl>\n </CheckboxGroup>\n\n <RadioGroup name={''}>\n <RadioGroup.Label>Radios</RadioGroup.Label>\n <FormControl>\n <Radio name=\"radioChoices\" value=\"radioOne\" />\n <FormControl.Label>Radio one</FormControl.Label>\n </FormControl>\n <FormControl>\n <Radio name=\"radioChoices\" value=\"radioTwo\" />\n <FormControl.Label>Radio two</FormControl.Label>\n </FormControl>\n <FormControl>\n <Radio name=\"radioChoices\" value=\"radioThree\" />\n <FormControl.Label>Radio three</FormControl.Label>\n </FormControl>\n </RadioGroup>\n </div>\n )\n}"
|
|
3045
|
+
"id": "components-formcontrol-features--with-checkbox-and-radio-inputs"
|
|
3238
3046
|
},
|
|
3239
3047
|
{
|
|
3240
|
-
"id": "components-formcontrol-features--single-input"
|
|
3241
|
-
"code": "({\n label = 'Input',\n caption = '',\n required = false,\n disabled = false,\n}: ArgTypes) => (\n <FormControl required={required} disabled={disabled}>\n <FormControl.Label>{label}</FormControl.Label>\n <TextInput />\n {caption && <FormControl.Caption>{caption}</FormControl.Caption>}\n </FormControl>\n)"
|
|
3048
|
+
"id": "components-formcontrol-features--single-input"
|
|
3242
3049
|
},
|
|
3243
3050
|
{
|
|
3244
|
-
"id": "components-formcontrol-features--validation-example"
|
|
3245
|
-
"code": "() => {\n const [value, setValue] = React.useState('mona lisa')\n const [validationResult, setValidationResult] = React.useState('')\n const doesValueContainSpaces = (inputValue: string) => /\\s/g.test(inputValue)\n const handleInputChange = (e: {\n currentTarget: {\n value: React.SetStateAction<string>\n }\n }) => {\n setValue(e.currentTarget.value)\n }\n React.useEffect(() => {\n if (doesValueContainSpaces(value)) {\n setValidationResult('noSpaces')\n } else if (value) {\n setValidationResult('validName')\n }\n }, [value])\n return (\n <FormControl>\n <FormControl.Label>GitHub handle</FormControl.Label>\n <TextInput block value={value} onChange={handleInputChange} />\n {validationResult === 'noSpaces' && (\n <FormControl.Validation variant=\"error\">\n GitHub handles cannot contain spaces\n </FormControl.Validation>\n )}\n {validationResult === 'validName' && (\n <FormControl.Validation variant=\"success\">\n Valid name\n </FormControl.Validation>\n )}\n <FormControl.Caption>\n With or without "@". For example "monalisa" or\n "@monalisa"\n </FormControl.Caption>\n </FormControl>\n )\n}"
|
|
3051
|
+
"id": "components-formcontrol-features--validation-example"
|
|
3246
3052
|
},
|
|
3247
3053
|
{
|
|
3248
|
-
"id": "components-formcontrol-features--with-select-panel"
|
|
3249
|
-
"code": "() => {\n const [selected, setSelected] = React.useState<ItemInput[]>([\n items[0],\n items[1],\n ])\n const [filter, setFilter] = React.useState('')\n const filteredItems = items.filter((item) =>\n item.text?.toLowerCase().startsWith(filter.toLowerCase()),\n )\n const [open, setOpen] = useState(false)\n return (\n <FormControl required>\n <FormControl.Label id=\"select_panel_label\">\n Select Labels\n </FormControl.Label>\n <SelectPanel\n title=\"Select labels\"\n subtitle=\"Use labels to organize issues and pull requests\"\n renderAnchor={({ children, id, ...anchorProps }) => (\n <Button\n trailingAction={TriangleDownIcon}\n aria-labelledby={`select_panel_label selectpanel_wrapper`}\n id={id}\n {...anchorProps}\n aria-haspopup=\"dialog\"\n >\n <span id=\"selectpanel_wrapper\">{children ?? 'Select Labels'}</span>\n </Button>\n )}\n open={open}\n onOpenChange={setOpen}\n items={filteredItems}\n selected={selected}\n onSelectedChange={setSelected}\n onFilterChange={setFilter}\n />\n </FormControl>\n )\n}"
|
|
3054
|
+
"id": "components-formcontrol-features--with-select-panel"
|
|
3250
3055
|
},
|
|
3251
3056
|
{
|
|
3252
|
-
"id": "components-formcontrol-features--with-leading-visual"
|
|
3253
|
-
"code": "() => (\n <Stack gap=\"none\">\n <FormControl>\n <FormControl.Label>Option one</FormControl.Label>\n <FormControl.LeadingVisual>\n <MarkGithubIcon />\n </FormControl.LeadingVisual>\n <Checkbox />\n </FormControl>\n\n <FormControl>\n <FormControl.Label>Option two</FormControl.Label>\n <FormControl.LeadingVisual>\n <MarkGithubIcon />\n </FormControl.LeadingVisual>\n <Checkbox />\n <FormControl.Caption>This one has a caption</FormControl.Caption>\n </FormControl>\n\n <FormControl disabled>\n <FormControl.Label>Option three</FormControl.Label>\n <FormControl.LeadingVisual>\n <MarkGithubIcon />\n </FormControl.LeadingVisual>\n <Checkbox />\n </FormControl>\n\n <FormControl disabled>\n <FormControl.Label>Option four</FormControl.Label>\n <FormControl.LeadingVisual>\n <MarkGithubIcon />\n </FormControl.LeadingVisual>\n <Checkbox />\n <FormControl.Caption>This one has a caption</FormControl.Caption>\n </FormControl>\n </Stack>\n)"
|
|
3057
|
+
"id": "components-formcontrol-features--with-leading-visual"
|
|
3254
3058
|
},
|
|
3255
3059
|
{
|
|
3256
|
-
"id": "components-formcontrol-features--disabled-inputs"
|
|
3257
|
-
"code": "() => (\n <div className={classes.FlexColumnGapContainer}>\n <FormControl disabled>\n <FormControl.Label>Disabled checkbox</FormControl.Label>\n <Checkbox />\n </FormControl>\n <FormControl disabled>\n <FormControl.Label>Disabled input</FormControl.Label>\n <TextInput />\n </FormControl>\n <FormControl disabled>\n <FormControl.Label>Disabled select</FormControl.Label>\n <Select>\n <Select.Option value=\"figma\">Figma</Select.Option>\n <Select.Option value=\"css\">Primer CSS</Select.Option>\n <Select.Option value=\"prc\">Primer React components</Select.Option>\n <Select.Option value=\"pvc\">Primer ViewComponents</Select.Option>\n </Select>\n </FormControl>\n </div>\n)"
|
|
3060
|
+
"id": "components-formcontrol-features--disabled-inputs"
|
|
3258
3061
|
},
|
|
3259
3062
|
{
|
|
3260
|
-
"id": "components-formcontrol-features--custom-required"
|
|
3261
|
-
"code": "() => (\n <div className={classes.FlexColumnGapContainer}>\n <FormControl required={true}>\n <FormControl.Label requiredText=\"(required)\">\n Form Input Label\n </FormControl.Label>\n <FormControl.Caption>\n This is a form field with a custom required indicator\n </FormControl.Caption>\n <TextInput />\n </FormControl>\n\n <Text className={classes.RequiredFieldsNote}>\n Required fields are marked with an asterisk (*)\n </Text>\n <FormControl required={true}>\n <FormControl.Label requiredIndicator={false}>\n Form Input Label\n </FormControl.Label>\n <FormControl.Caption>\n This is a form field with a required indicator that is hidden in the\n accessibility tree\n </FormControl.Caption>\n <TextInput />\n </FormControl>\n\n <FormControl required={false}>\n <FormControl.Label requiredText=\"(optional)\" requiredIndicator={false}>\n Form Input Label\n </FormControl.Label>\n <FormControl.Caption>\n This is a form field that is marked as optional, it is not required\n </FormControl.Caption>\n <TextInput />\n </FormControl>\n </div>\n)"
|
|
3063
|
+
"id": "components-formcontrol-features--custom-required"
|
|
3262
3064
|
},
|
|
3263
3065
|
{
|
|
3264
|
-
"id": "components-formcontrol-features--with-caption"
|
|
3265
|
-
"code": "() => (\n <FormControl>\n <FormControl.Label>Example label</FormControl.Label>\n <TextInput />\n <FormControl.Caption>Example caption</FormControl.Caption>\n </FormControl>\n)"
|
|
3066
|
+
"id": "components-formcontrol-features--with-caption"
|
|
3266
3067
|
},
|
|
3267
3068
|
{
|
|
3268
|
-
"id": "components-formcontrol-features--with-caption-and-disabled"
|
|
3269
|
-
"code": "() => (\n <FormControl disabled>\n <FormControl.Label>Example label</FormControl.Label>\n <TextInput />\n <FormControl.Caption>Example caption</FormControl.Caption>\n </FormControl>\n)"
|
|
3069
|
+
"id": "components-formcontrol-features--with-caption-and-disabled"
|
|
3270
3070
|
},
|
|
3271
3071
|
{
|
|
3272
|
-
"id": "components-formcontrol-features--with-hidden-label"
|
|
3273
|
-
"code": "() => (\n <FormControl>\n <FormControl.Label visuallyHidden>Example label</FormControl.Label>\n <TextInput />\n </FormControl>\n)"
|
|
3072
|
+
"id": "components-formcontrol-features--with-hidden-label"
|
|
3274
3073
|
},
|
|
3275
3074
|
{
|
|
3276
|
-
"id": "components-formcontrol-features--with-required-indicator"
|
|
3277
|
-
"code": "() => (\n <FormControl required>\n <FormControl.Label requiredIndicator>Example label</FormControl.Label>\n <TextInput />\n </FormControl>\n)"
|
|
3075
|
+
"id": "components-formcontrol-features--with-required-indicator"
|
|
3278
3076
|
},
|
|
3279
3077
|
{
|
|
3280
|
-
"id": "components-formcontrol-features--with-success-validation"
|
|
3281
|
-
"code": "() => (\n <FormControl required>\n <FormControl.Label requiredIndicator>Example label</FormControl.Label>\n <TextInput defaultValue=\"Input value\" />\n <FormControl.Validation variant=\"success\">\n Example success validation message\n </FormControl.Validation>\n </FormControl>\n)"
|
|
3078
|
+
"id": "components-formcontrol-features--with-success-validation"
|
|
3282
3079
|
},
|
|
3283
3080
|
{
|
|
3284
|
-
"id": "components-formcontrol-features--with-error-validation"
|
|
3285
|
-
"code": "() => (\n <FormControl required>\n <FormControl.Label requiredIndicator>Example label</FormControl.Label>\n <TextInput defaultValue=\"Input value\" />\n <FormControl.Validation variant=\"error\">\n Example error validation message\n </FormControl.Validation>\n </FormControl>\n)"
|
|
3081
|
+
"id": "components-formcontrol-features--with-error-validation"
|
|
3286
3082
|
}
|
|
3287
3083
|
],
|
|
3288
3084
|
"importPath": "@primer/react",
|
|
@@ -3444,20 +3240,16 @@
|
|
|
3444
3240
|
"a11yReviewed": "2025-01-08",
|
|
3445
3241
|
"stories": [
|
|
3446
3242
|
{
|
|
3447
|
-
"id": "components-header--default"
|
|
3448
|
-
"code": "() => (\n <Header>\n <Header.Item>\n <Header.Link href=\"#\" className={classes.HeaderLink}>\n <MarkGithubIcon className={classes.Icon} size={32} />\n <span>GitHub</span>\n </Header.Link>\n </Header.Item>\n <Header.Item full>Menu</Header.Item>\n <Header.Item className={classes.AvatarContainer}>\n <Avatar\n src=\"https://github.com/octocat.png\"\n size={20}\n square\n alt=\"@octocat\"\n />\n </Header.Item>\n </Header>\n)"
|
|
3243
|
+
"id": "components-header--default"
|
|
3449
3244
|
},
|
|
3450
3245
|
{
|
|
3451
|
-
"id": "components-header-features--with-full-size-item"
|
|
3452
|
-
"code": "() => (\n <Header>\n <Header.Item>Item 1</Header.Item>\n <Header.Item full>Item 2</Header.Item>\n <Header.Item className={classes.LastItem}>Item 3</Header.Item>\n </Header>\n)"
|
|
3246
|
+
"id": "components-header-features--with-full-size-item"
|
|
3453
3247
|
},
|
|
3454
3248
|
{
|
|
3455
|
-
"id": "components-header-features--with-links"
|
|
3456
|
-
"code": "() => (\n <Header>\n <Header.Item>\n <Header.Link href=\"#\">About</Header.Link>\n </Header.Item>\n <Header.Item>\n <Header.Link href=\"#\">Releases</Header.Link>\n </Header.Item>\n <Header.Item>\n <Header.Link href=\"#\">Team</Header.Link>\n </Header.Item>\n </Header>\n)"
|
|
3249
|
+
"id": "components-header-features--with-links"
|
|
3457
3250
|
},
|
|
3458
3251
|
{
|
|
3459
|
-
"id": "components-header-features--with-many-items"
|
|
3460
|
-
"code": "() => (\n <Header>\n <Header.Item>\n <Header.Link className={classes.Logo} href=\"#\">\n <MarkGithubIcon className={classes.Icon} size={32} />\n <span>GitHub</span>\n </Header.Link>\n </Header.Item>\n <Header.Item>Item</Header.Item>\n <Header.Item>Item</Header.Item>\n <Header.Item>Item</Header.Item>\n <Header.Item>Item</Header.Item>\n <Header.Item>Item</Header.Item>\n <Header.Item>Item</Header.Item>\n <Header.Item>Item</Header.Item>\n <Header.Item>Item</Header.Item>\n <Header.Item>Item</Header.Item>\n <Header.Item>Item</Header.Item>\n <Header.Item className={classes.LastItem}>\n <Avatar\n src=\"https://github.com/octocat.png\"\n size={20}\n square\n alt=\"@octocat\"\n />\n </Header.Item>\n </Header>\n)"
|
|
3252
|
+
"id": "components-header-features--with-many-items"
|
|
3461
3253
|
}
|
|
3462
3254
|
],
|
|
3463
3255
|
"importPath": "@primer/react",
|
|
@@ -3504,20 +3296,16 @@
|
|
|
3504
3296
|
"a11yReviewed": "2025-01-08",
|
|
3505
3297
|
"stories": [
|
|
3506
3298
|
{
|
|
3507
|
-
"id": "components-heading--default"
|
|
3508
|
-
"code": "() => <Heading>Default H2 Heading</Heading>"
|
|
3299
|
+
"id": "components-heading--default"
|
|
3509
3300
|
},
|
|
3510
3301
|
{
|
|
3511
|
-
"id": "components-heading-features--small"
|
|
3512
|
-
"code": "() => <Heading variant=\"small\">Small heading</Heading>"
|
|
3302
|
+
"id": "components-heading-features--small"
|
|
3513
3303
|
},
|
|
3514
3304
|
{
|
|
3515
|
-
"id": "components-heading-features--medium"
|
|
3516
|
-
"code": "() => <Heading variant=\"medium\">Medium heading</Heading>"
|
|
3305
|
+
"id": "components-heading-features--medium"
|
|
3517
3306
|
},
|
|
3518
3307
|
{
|
|
3519
|
-
"id": "components-heading-features--large"
|
|
3520
|
-
"code": "() => <Heading variant=\"large\">Large heading</Heading>"
|
|
3308
|
+
"id": "components-heading-features--large"
|
|
3521
3309
|
}
|
|
3522
3310
|
],
|
|
3523
3311
|
"importPath": "@primer/react",
|
|
@@ -3541,16 +3329,13 @@
|
|
|
3541
3329
|
"a11yReviewed": "2025-01-08",
|
|
3542
3330
|
"stories": [
|
|
3543
3331
|
{
|
|
3544
|
-
"id": "experimental-components-hidden--default"
|
|
3545
|
-
"code": "() => (\n <>\n <Text>\n The below content is visible when the viewport is regular or wide but\n hidden when narrow:\n </Text>\n <Hidden when=\"narrow\">\n This is the said content and it is visible when the viewport is regular or\n wide but hidden when narrow\n </Hidden>\n </>\n)"
|
|
3332
|
+
"id": "experimental-components-hidden--default"
|
|
3546
3333
|
},
|
|
3547
3334
|
{
|
|
3548
|
-
"id": "experimental-components-hidden-features--hide-content"
|
|
3549
|
-
"code": "() => (\n <div>\n <Hidden when=\"narrow\">\n {' '}\n This value is shown in regular and wide viewports\n </Hidden>\n <Hidden when=\"regular\">\n {' '}\n This value is shown in narrow and wide viewports\n </Hidden>\n <Hidden when=\"wide\">\n {' '}\n This value is shown in narrow and regular viewports\n </Hidden>\n </div>\n)"
|
|
3335
|
+
"id": "experimental-components-hidden-features--hide-content"
|
|
3550
3336
|
},
|
|
3551
3337
|
{
|
|
3552
|
-
"id": "experimental-components-hidden-features--render-content-responsively"
|
|
3553
|
-
"code": "() => (\n <div>\n <Hidden when=\"narrow\">\n <Button variant=\"primary\">\n I am visible when the viewport is regular or wide viewport\n </Button>\n </Hidden>\n\n <Hidden when={['regular', 'wide']}>\n <Button variant=\"primary\">\n I am visible when the viewport is narrow\n </Button>\n </Hidden>\n </div>\n)"
|
|
3338
|
+
"id": "experimental-components-hidden-features--render-content-responsively"
|
|
3554
3339
|
}
|
|
3555
3340
|
],
|
|
3556
3341
|
"importPath": "@primer/react/experimental",
|
|
@@ -3573,28 +3358,25 @@
|
|
|
3573
3358
|
"importPath": "@primer/react/experimental",
|
|
3574
3359
|
"stories": [
|
|
3575
3360
|
{
|
|
3576
|
-
"id": "
|
|
3577
|
-
"code": "() => {\n return (\n <InlineMessage variant=\"unavailable\">\n An example inline message\n </InlineMessage>\n )\n}"
|
|
3361
|
+
"id": "components-inlinemessage--default"
|
|
3578
3362
|
},
|
|
3579
3363
|
{
|
|
3580
|
-
"id": "experimental-components-inlinemessage
|
|
3581
|
-
"code": "() => {\n return (\n <InlineMessage variant=\"critical\">An example inline message</InlineMessage>\n )\n}"
|
|
3364
|
+
"id": "experimental-components-inlinemessage--default"
|
|
3582
3365
|
},
|
|
3583
3366
|
{
|
|
3584
|
-
"id": "experimental-components-inlinemessage-features--
|
|
3585
|
-
"code": "() => {\n return (\n <InlineMessage variant=\"success\">An example inline message</InlineMessage>\n )\n}"
|
|
3367
|
+
"id": "experimental-components-inlinemessage-features--critical"
|
|
3586
3368
|
},
|
|
3587
3369
|
{
|
|
3588
|
-
"id": "experimental-components-inlinemessage-features--
|
|
3589
|
-
"code": "() => {\n return (\n <InlineMessage variant=\"unavailable\">\n An example inline message\n </InlineMessage>\n )\n}"
|
|
3370
|
+
"id": "experimental-components-inlinemessage-features--success"
|
|
3590
3371
|
},
|
|
3591
3372
|
{
|
|
3592
|
-
"id": "experimental-components-inlinemessage-features--
|
|
3593
|
-
"code": "() => {\n return (\n <InlineMessage variant=\"warning\">An example inline message</InlineMessage>\n )\n}"
|
|
3373
|
+
"id": "experimental-components-inlinemessage-features--unavailable"
|
|
3594
3374
|
},
|
|
3595
3375
|
{
|
|
3596
|
-
"id": "experimental-components-inlinemessage-features--
|
|
3597
|
-
|
|
3376
|
+
"id": "experimental-components-inlinemessage-features--warning"
|
|
3377
|
+
},
|
|
3378
|
+
{
|
|
3379
|
+
"id": "experimental-components-inlinemessage-features--multiline"
|
|
3598
3380
|
}
|
|
3599
3381
|
],
|
|
3600
3382
|
"props": [
|
|
@@ -3621,12 +3403,10 @@
|
|
|
3621
3403
|
"a11yReviewed": "2025-01-08",
|
|
3622
3404
|
"stories": [
|
|
3623
3405
|
{
|
|
3624
|
-
"id": "experimental-components-keybindinghint-features--on-emphasis"
|
|
3625
|
-
"code": "(args) => (\n <div className={classes.EmphasisBackground}>\n <KeybindingHint {...args} />\n </div>\n)"
|
|
3406
|
+
"id": "experimental-components-keybindinghint-features--on-emphasis"
|
|
3626
3407
|
},
|
|
3627
3408
|
{
|
|
3628
|
-
"id": "experimental-components-keybindinghint-features--on-primary"
|
|
3629
|
-
"code": "(args) => (\n <div className={classes.PrimaryBackground}>\n <KeybindingHint {...args} />\n </div>\n)"
|
|
3409
|
+
"id": "experimental-components-keybindinghint-features--on-primary"
|
|
3630
3410
|
}
|
|
3631
3411
|
],
|
|
3632
3412
|
"importPath": "@primer/react",
|
|
@@ -3665,52 +3445,40 @@
|
|
|
3665
3445
|
"a11yReviewed": "2025-01-08",
|
|
3666
3446
|
"stories": [
|
|
3667
3447
|
{
|
|
3668
|
-
"id": "components-label--default"
|
|
3669
|
-
"code": "() => <Label>Default</Label>"
|
|
3448
|
+
"id": "components-label--default"
|
|
3670
3449
|
},
|
|
3671
3450
|
{
|
|
3672
|
-
"id": "components-label-features--primary"
|
|
3673
|
-
"code": "() => <Label variant=\"primary\">Primary</Label>"
|
|
3451
|
+
"id": "components-label-features--primary"
|
|
3674
3452
|
},
|
|
3675
3453
|
{
|
|
3676
|
-
"id": "components-label-features--secondary"
|
|
3677
|
-
"code": "() => <Label variant=\"secondary\">Secondary</Label>"
|
|
3454
|
+
"id": "components-label-features--secondary"
|
|
3678
3455
|
},
|
|
3679
3456
|
{
|
|
3680
|
-
"id": "components-label-features--accent"
|
|
3681
|
-
"code": "() => <Label variant=\"accent\">Accent</Label>"
|
|
3457
|
+
"id": "components-label-features--accent"
|
|
3682
3458
|
},
|
|
3683
3459
|
{
|
|
3684
|
-
"id": "components-label-features--success"
|
|
3685
|
-
"code": "() => <Label variant=\"success\">Success</Label>"
|
|
3460
|
+
"id": "components-label-features--success"
|
|
3686
3461
|
},
|
|
3687
3462
|
{
|
|
3688
|
-
"id": "components-label-features--attention"
|
|
3689
|
-
"code": "() => <Label variant=\"attention\">Attention</Label>"
|
|
3463
|
+
"id": "components-label-features--attention"
|
|
3690
3464
|
},
|
|
3691
3465
|
{
|
|
3692
|
-
"id": "components-label-features--severe"
|
|
3693
|
-
"code": "() => <Label variant=\"severe\">Primary</Label>"
|
|
3466
|
+
"id": "components-label-features--severe"
|
|
3694
3467
|
},
|
|
3695
3468
|
{
|
|
3696
|
-
"id": "components-label-features--danger"
|
|
3697
|
-
"code": "() => <Label variant=\"danger\">Danger</Label>"
|
|
3469
|
+
"id": "components-label-features--danger"
|
|
3698
3470
|
},
|
|
3699
3471
|
{
|
|
3700
|
-
"id": "components-label-features--done"
|
|
3701
|
-
"code": "() => <Label variant=\"done\">Done</Label>"
|
|
3472
|
+
"id": "components-label-features--done"
|
|
3702
3473
|
},
|
|
3703
3474
|
{
|
|
3704
|
-
"id": "components-label-features--sponsors"
|
|
3705
|
-
"code": "() => <Label variant=\"sponsors\">Sponsors</Label>"
|
|
3475
|
+
"id": "components-label-features--sponsors"
|
|
3706
3476
|
},
|
|
3707
3477
|
{
|
|
3708
|
-
"id": "components-label-features--size-large"
|
|
3709
|
-
"code": "() => <Label size=\"large\">Default</Label>"
|
|
3478
|
+
"id": "components-label-features--size-large"
|
|
3710
3479
|
},
|
|
3711
3480
|
{
|
|
3712
|
-
"id": "components-label-features--size-small"
|
|
3713
|
-
"code": "() => <Label size=\"small\">Default</Label>"
|
|
3481
|
+
"id": "components-label-features--size-small"
|
|
3714
3482
|
}
|
|
3715
3483
|
],
|
|
3716
3484
|
"importPath": "@primer/react",
|
|
@@ -3738,28 +3506,22 @@
|
|
|
3738
3506
|
"a11yReviewed": "2025-01-08",
|
|
3739
3507
|
"stories": [
|
|
3740
3508
|
{
|
|
3741
|
-
"id": "components-labelgroup--default"
|
|
3742
|
-
"code": "() => (\n <LabelGroup>\n <Label>One</Label>\n <Label>Two</Label>\n <Label>Three</Label>\n <Label>Four</Label>\n <Label>Five</Label>\n <Label>Six</Label>\n <Label>Seven</Label>\n <Label>Eight</Label>\n <Label>Nine</Label>\n <Label>Ten</Label>\n <Label>Eleven</Label>\n <Label>Twelve</Label>\n <Label>Thirteen</Label>\n <Label>Fourteen</Label>\n <Label>Fifteen</Label>\n <Label>Sixteen</Label>\n </LabelGroup>\n)"
|
|
3509
|
+
"id": "components-labelgroup--default"
|
|
3743
3510
|
},
|
|
3744
3511
|
{
|
|
3745
|
-
"id": "components-labelgroup-features--truncate-auto"
|
|
3746
|
-
"code": "() => (\n <ResizableContainer>\n <LabelGroup visibleChildCount=\"auto\">\n <Label>One</Label>\n <Label>Two</Label>\n <Label>Three</Label>\n <Label>Four</Label>\n <Label>Five</Label>\n <Label>Six</Label>\n <Label>Seven</Label>\n <Label>Eight</Label>\n <Label>Nine</Label>\n <Label>Ten</Label>\n <Label>Eleven</Label>\n <Label>Twelve</Label>\n <Label>Thirteen</Label>\n <Label>Fourteen</Label>\n <Label>Fifteen</Label>\n <Label>Sixteen</Label>\n </LabelGroup>\n </ResizableContainer>\n)"
|
|
3512
|
+
"id": "components-labelgroup-features--truncate-auto"
|
|
3747
3513
|
},
|
|
3748
3514
|
{
|
|
3749
|
-
"id": "components-labelgroup-features--truncate-auto-with-interactive-tokens"
|
|
3750
|
-
"code": "() => (\n <ResizableContainer>\n <LabelGroup visibleChildCount=\"auto\">\n <Token as=\"button\" text=\"One\" />\n <Token as=\"button\" text=\"Two\" />\n <Token as=\"button\" text=\"Three\" />\n <Token as=\"button\" text=\"Four\" />\n <Token as=\"button\" text=\"Five\" />\n <Token as=\"button\" text=\"Six\" />\n <Token as=\"button\" text=\"Seven\" />\n <Token as=\"button\" text=\"Eight\" />\n <Token as=\"button\" text=\"Nine\" />\n <Token as=\"button\" text=\"Ten\" />\n <Token as=\"button\" text=\"Eleven\" />\n <Token as=\"button\" text=\"Twelve\" />\n <Token as=\"button\" text=\"Thirteen\" />\n <Token as=\"button\" text=\"Fourteen\" />\n <Token as=\"button\" text=\"Fifteen\" />\n <Token as=\"button\" text=\"Sixteen\" />\n </LabelGroup>\n </ResizableContainer>\n)"
|
|
3515
|
+
"id": "components-labelgroup-features--truncate-auto-with-interactive-tokens"
|
|
3751
3516
|
},
|
|
3752
3517
|
{
|
|
3753
|
-
"id": "components-labelgroup-features--truncate-after-five"
|
|
3754
|
-
"code": "() => (\n <LabelGroup visibleChildCount={5}>\n <Label>One</Label>\n <Label>Two</Label>\n <Label>Three</Label>\n <Label>Four</Label>\n <Label>Five</Label>\n <Label>Six</Label>\n <Label>Seven</Label>\n <Label>Eight</Label>\n <Label>Nine</Label>\n <Label>Ten</Label>\n <Label>Eleven</Label>\n <Label>Twelve</Label>\n <Label>Thirteen</Label>\n <Label>Fourteen</Label>\n <Label>Fifteen</Label>\n <Label>Sixteen</Label>\n </LabelGroup>\n)"
|
|
3518
|
+
"id": "components-labelgroup-features--truncate-after-five"
|
|
3755
3519
|
},
|
|
3756
3520
|
{
|
|
3757
|
-
"id": "components-labelgroup-features--truncate-auto-expand-inline"
|
|
3758
|
-
"code": "() => (\n <ResizableContainer>\n <LabelGroup visibleChildCount=\"auto\" overflowStyle=\"inline\">\n <Label>One</Label>\n <Label>Two</Label>\n <Label>Three</Label>\n <Label>Four</Label>\n <Label>Five</Label>\n <Label>Six</Label>\n <Label>Seven</Label>\n <Label>Eight</Label>\n <Label>Nine</Label>\n <Label>Ten</Label>\n <Label>Eleven</Label>\n <Label>Twelve</Label>\n <Label>Thirteen</Label>\n <Label>Fourteen</Label>\n <Label>Fifteen</Label>\n <Label>Sixteen</Label>\n </LabelGroup>\n </ResizableContainer>\n)"
|
|
3521
|
+
"id": "components-labelgroup-features--truncate-auto-expand-inline"
|
|
3759
3522
|
},
|
|
3760
3523
|
{
|
|
3761
|
-
"id": "components-labelgroup-features--truncate-auto-expand-inline-with-interactive-tokens"
|
|
3762
|
-
"code": "() => (\n <ResizableContainer>\n <LabelGroup visibleChildCount=\"auto\" overflowStyle=\"inline\">\n <Token as=\"button\" text=\"One\" />\n <Token as=\"button\" text=\"Two\" />\n <Token as=\"button\" text=\"Three\" />\n <Token as=\"button\" text=\"Four\" />\n <Token as=\"button\" text=\"Five\" />\n <Token as=\"button\" text=\"Six\" />\n <Token as=\"button\" text=\"Seven\" />\n <Token as=\"button\" text=\"Eight\" />\n <Token as=\"button\" text=\"Nine\" />\n <Token as=\"button\" text=\"Ten\" />\n <Token as=\"button\" text=\"Eleven\" />\n <Token as=\"button\" text=\"Twelve\" />\n <Token as=\"button\" text=\"Thirteen\" />\n <Token as=\"button\" text=\"Fourteen\" />\n <Token as=\"button\" text=\"Fifteen\" />\n <Token as=\"button\" text=\"Sixteen\" />\n </LabelGroup>\n </ResizableContainer>\n)"
|
|
3524
|
+
"id": "components-labelgroup-features--truncate-auto-expand-inline-with-interactive-tokens"
|
|
3763
3525
|
}
|
|
3764
3526
|
],
|
|
3765
3527
|
"importPath": "@primer/react",
|
|
@@ -3793,16 +3555,13 @@
|
|
|
3793
3555
|
"a11yReviewed": "2025-01-08",
|
|
3794
3556
|
"stories": [
|
|
3795
3557
|
{
|
|
3796
|
-
"id": "components-link--default"
|
|
3797
|
-
"code": "() => <Link href=\"#\">Links are great</Link>"
|
|
3558
|
+
"id": "components-link--default"
|
|
3798
3559
|
},
|
|
3799
3560
|
{
|
|
3800
|
-
"id": "components-link-features--muted"
|
|
3801
|
-
"code": "() => (\n <Link href=\"#\" muted>\n Link\n </Link>\n)"
|
|
3561
|
+
"id": "components-link-features--muted"
|
|
3802
3562
|
},
|
|
3803
3563
|
{
|
|
3804
|
-
"id": "components-link-features--inline"
|
|
3805
|
-
"code": "() => (\n <div data-a11y-link-underlines=\"true\">\n <Link inline={true} href=\"#\">\n Link\n </Link>\n </div>\n)"
|
|
3564
|
+
"id": "components-link-features--inline"
|
|
3806
3565
|
}
|
|
3807
3566
|
],
|
|
3808
3567
|
"importPath": "@primer/react",
|
|
@@ -3858,76 +3617,58 @@
|
|
|
3858
3617
|
"a11yReviewed": "2025-01-08",
|
|
3859
3618
|
"stories": [
|
|
3860
3619
|
{
|
|
3861
|
-
"id": "components-navlist--default"
|
|
3862
|
-
"code": "() => (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item href=\"#\" aria-current=\"page\">\n Item 1\n </NavList.Item>\n <NavList.Item href=\"#\">Item 2</NavList.Item>\n <NavList.Item href=\"#\">Item 3</NavList.Item>\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n)"
|
|
3620
|
+
"id": "components-navlist--default"
|
|
3863
3621
|
},
|
|
3864
3622
|
{
|
|
3865
|
-
"id": "components-navlist-features--expand-with-custom-items"
|
|
3866
|
-
"code": "() => {\n const items: {\n href: string\n text: string\n 'aria-current'?: 'page'\n }[] = [\n {\n href: '#',\n text: 'Item 4',\n 'aria-current': 'page',\n },\n {\n href: '#',\n text: 'Item 5',\n },\n {\n href: '#',\n text: 'Item 6',\n },\n {\n href: '#',\n text: 'Item 7',\n },\n {\n href: '#',\n text: 'Item 8',\n },\n {\n href: '#',\n text: 'Item 9',\n },\n ]\n const Item = ({\n leadingVisual,\n text,\n trailingVisual,\n ...rest\n }: CustomItemProps) => {\n return (\n <NavList.Item key={text} onClick={() => {}} href=\"#\" {...rest}>\n {leadingVisual ? (\n <NavList.LeadingVisual>\n <Octicon icon={leadingVisual} />\n </NavList.LeadingVisual>\n ) : null}\n {text}\n\n {trailingVisual ? (\n <NavList.TrailingVisual>\n {typeof trailingVisual === 'string' ? (\n trailingVisual\n ) : (\n <Octicon icon={trailingVisual as React.ElementType} />\n )}\n <VisuallyHidden>results</VisuallyHidden>\n </NavList.TrailingVisual>\n ) : null}\n </NavList.Item>\n )\n }\n return (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item href=\"#\">Item 1</NavList.Item>\n <NavList.Item href=\"#\">Item 2</NavList.Item>\n <NavList.Item href=\"#\">Item 3</NavList.Item>\n <NavList.GroupExpand\n label=\"Show more\"\n items={items}\n renderItem={Item}\n />\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n )\n}"
|
|
3623
|
+
"id": "components-navlist-features--expand-with-custom-items"
|
|
3867
3624
|
},
|
|
3868
3625
|
{
|
|
3869
|
-
"id": "components-navlist-features--expand-with-pages"
|
|
3870
|
-
"code": "() => {\n const items = [\n {\n href: '#',\n text: 'Item 4',\n },\n {\n href: '#',\n text: 'Item 5',\n },\n {\n href: '#',\n text: 'Item 6',\n },\n {\n href: '#',\n text: 'Item 7',\n },\n {\n href: '#',\n text: 'Item 8',\n },\n {\n href: '#',\n text: 'Item 9',\n },\n ]\n return (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item href=\"#\" aria-current=\"page\">\n Item 1\n </NavList.Item>\n <NavList.Item href=\"#\">Item 2</NavList.Item>\n <NavList.Item href=\"#\">Item 3</NavList.Item>\n <NavList.GroupExpand pages={2} label=\"Show more\" items={items} />\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n )\n}"
|
|
3626
|
+
"id": "components-navlist-features--expand-with-pages"
|
|
3871
3627
|
},
|
|
3872
3628
|
{
|
|
3873
|
-
"id": "components-navlist-features--group-with-expand-and-custom-items"
|
|
3874
|
-
"code": "() => {\n const Item = ({\n leadingVisual: LeadingVisual,\n text,\n trailingVisual: TrailingVisual,\n ...rest\n }: CustomItemProps) => {\n return (\n <NavList.Item onClick={() => {}} href=\"#\" {...rest} key={text}>\n {LeadingVisual ? (\n <NavList.LeadingVisual>\n <LeadingVisual />\n </NavList.LeadingVisual>\n ) : null}\n {text}\n\n {TrailingVisual ? (\n <NavList.TrailingVisual>\n {typeof TrailingVisual === 'string' ? (\n TrailingVisual\n ) : (\n <TrailingVisual />\n )}\n <VisuallyHidden>results</VisuallyHidden>\n </NavList.TrailingVisual>\n ) : null}\n </NavList.Item>\n )\n }\n const items = [\n {\n href: '#',\n text: 'Commits',\n leadingVisual: GitCommitIcon,\n trailingVisual: '32k',\n },\n {\n href: '#',\n text: 'Packages',\n leadingVisual: PackageIcon,\n trailingVisual: '1k',\n },\n {\n href: '#',\n text: 'Wikis',\n leadingVisual: BookIcon,\n trailingVisual: '121',\n },\n {\n href: '#',\n text: 'Topics',\n leadingVisual: MilestoneIcon,\n trailingVisual: '12k',\n },\n {\n href: '#',\n text: 'Marketplace',\n leadingVisual: TelescopeIcon,\n trailingVisual: ArrowRightIcon,\n },\n ]\n return (\n <NavList>\n <NavList.Group>\n <NavList.Item aria-current=\"page\">\n <NavList.LeadingVisual>\n <CodeIcon />\n </NavList.LeadingVisual>\n Code\n <NavList.TrailingVisual>3k</NavList.TrailingVisual>\n </NavList.Item>\n <NavList.Item>\n <NavList.LeadingVisual>\n <RepoIcon />\n </NavList.LeadingVisual>\n Repositories\n <NavList.TrailingVisual>713</NavList.TrailingVisual>\n </NavList.Item>\n <NavList.Item>\n <NavList.LeadingVisual>\n <IssueOpenedIcon />\n </NavList.LeadingVisual>\n Issues\n <NavList.TrailingVisual>6k</NavList.TrailingVisual>\n </NavList.Item>\n <NavList.Item>\n <NavList.LeadingVisual>\n <GitPullRequestIcon />\n </NavList.LeadingVisual>\n Pull requests\n <NavList.TrailingVisual>4k</NavList.TrailingVisual>\n </NavList.Item>\n <NavList.Item>\n <NavList.LeadingVisual>\n <CommentDiscussionIcon />\n </NavList.LeadingVisual>\n Discussions\n <NavList.TrailingVisual>236</NavList.TrailingVisual>\n </NavList.Item>\n <NavList.Item>\n <NavList.LeadingVisual>\n <PeopleIcon />\n </NavList.LeadingVisual>\n Users\n <NavList.TrailingVisual>10k</NavList.TrailingVisual>\n </NavList.Item>\n <NavList.GroupExpand items={items} renderItem={Item} />\n </NavList.Group>\n </NavList>\n )\n}"
|
|
3629
|
+
"id": "components-navlist-features--group-with-expand-and-custom-items"
|
|
3875
3630
|
},
|
|
3876
3631
|
{
|
|
3877
|
-
"id": "components-navlist-features--with-description"
|
|
3878
|
-
"code": "() => (\n <NavList>\n <NavList.Item href=\"#\" aria-current=\"page\">\n <NavList.LeadingVisual>\n <RepoIcon />\n </NavList.LeadingVisual>\n Main Repository\n <NavList.Description>Primary project repository</NavList.Description>\n </NavList.Item>\n <NavList.Item href=\"#\">\n <NavList.LeadingVisual>\n <BookIcon />\n </NavList.LeadingVisual>\n Documentation\n <NavList.Description>\n User guides and API documentation\n </NavList.Description>\n </NavList.Item>\n <NavList.Item href=\"#\">\n <NavList.LeadingVisual>\n <IssueOpenedIcon />\n </NavList.LeadingVisual>\n Bug Reports\n <NavList.Description variant=\"block\">\n Submit and track bug reports for the project. Include detailed steps to\n reproduce, expected behavior, and system information.\n </NavList.Description>\n </NavList.Item>\n <NavList.Item href=\"#\">\n <NavList.LeadingVisual>\n <PeopleIcon />\n </NavList.LeadingVisual>\n Community\n <NavList.Description variant=\"block\">\n Connect with other developers, share ideas, and collaborate on features\n and improvements.\n </NavList.Description>\n </NavList.Item>\n <NavList.Item href=\"#\">\n <NavList.LeadingVisual>\n <GitCommitIcon />\n </NavList.LeadingVisual>\n Recent Changes\n <NavList.Description>Latest commits and releases</NavList.Description>\n </NavList.Item>\n </NavList>\n)"
|
|
3632
|
+
"id": "components-navlist-features--with-description"
|
|
3879
3633
|
},
|
|
3880
3634
|
{
|
|
3881
|
-
"id": "components-navlist-features--with-expand"
|
|
3882
|
-
"code": "() => {\n const items = [\n {\n href: '#',\n text: 'Item 4',\n },\n {\n href: '#',\n text: 'Item 5',\n },\n {\n href: '#',\n text: 'Item 6',\n },\n {\n href: '#',\n text: 'Item 7',\n },\n {\n href: '#',\n text: 'Item 8',\n },\n {\n href: '#',\n text: 'Item 9',\n },\n ]\n return (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item href=\"#\" aria-current=\"page\">\n Item 1\n </NavList.Item>\n <NavList.Item href=\"#\">Item 2</NavList.Item>\n <NavList.Item href=\"#\">Item 3</NavList.Item>\n <NavList.GroupExpand label=\"Show more\" items={items} />\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n )\n}"
|
|
3635
|
+
"id": "components-navlist-features--with-expand"
|
|
3883
3636
|
},
|
|
3884
3637
|
{
|
|
3885
|
-
"id": "components-navlist-features--with-expand-and-icons"
|
|
3886
|
-
"code": "() => {\n const items = [\n {\n href: '#',\n text: 'Item 4',\n },\n {\n href: '#',\n text: 'Item 5',\n },\n {\n href: '#',\n text: 'Item 6',\n },\n {\n href: '#',\n text: 'Item 7',\n },\n {\n href: '#',\n text: 'Item 8',\n },\n {\n href: '#',\n text: 'Item 9',\n },\n ]\n return (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item href=\"#\" aria-current=\"page\">\n Item 1\n </NavList.Item>\n <NavList.Item href=\"#\">Item 2</NavList.Item>\n <NavList.Item href=\"#\">Item 3</NavList.Item>\n <NavList.GroupExpand label=\"Show more\" items={items} />\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n )\n}"
|
|
3638
|
+
"id": "components-navlist-features--with-expand-and-icons"
|
|
3887
3639
|
},
|
|
3888
3640
|
{
|
|
3889
|
-
"id": "components-navlist-features--with-group"
|
|
3890
|
-
"code": "() => (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Group title=\"Group 1\">\n <NavList.Item aria-current=\"true\" href=\"#\">\n Item 1A\n </NavList.Item>\n <NavList.Item href=\"#\">Item 1B</NavList.Item>\n <NavList.Item href=\"#\">Item 1C</NavList.Item>\n </NavList.Group>\n <NavList.Group title=\"Group 2\">\n <NavList.Item href=\"#\">Item 2A</NavList.Item>\n <NavList.Item href=\"#\">Item 2B</NavList.Item>\n <NavList.Item href=\"#\">Item 2C</NavList.Item>\n </NavList.Group>\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n)"
|
|
3641
|
+
"id": "components-navlist-features--with-group"
|
|
3891
3642
|
},
|
|
3892
3643
|
{
|
|
3893
|
-
"id": "components-navlist-features--with-group-expand"
|
|
3894
|
-
"code": "() => {\n const items1 = [\n {\n href: '#',\n text: 'Item 1D',\n },\n {\n href: '#',\n text: 'Item 1E',\n trailingAction: {\n label: 'Some action',\n icon: ArrowRightIcon,\n },\n },\n ]\n const items2 = [\n {\n href: '#',\n text: 'Item 2D',\n trailingVisual: BookIcon,\n },\n {\n href: '#',\n text: 'Item 2E',\n trailingVisual: FileDirectoryIcon,\n },\n ]\n return (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Group title=\"Group 1\">\n <NavList.Item aria-current=\"true\" href=\"#\">\n Item 1A\n </NavList.Item>\n <NavList.Item href=\"#\">Item 1B</NavList.Item>\n <NavList.Item href=\"#\">Item 1C</NavList.Item>\n <NavList.GroupExpand label=\"More\" items={items1} />\n </NavList.Group>\n <NavList.Group title=\"Group 2\">\n <NavList.Item href=\"#\">Item 2A</NavList.Item>\n <NavList.Item href=\"#\">Item 2B</NavList.Item>\n <NavList.Item href=\"#\">Item 2C</NavList.Item>\n <NavList.GroupExpand label=\"Show\" items={items2} />\n </NavList.Group>\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n )\n}"
|
|
3644
|
+
"id": "components-navlist-features--with-group-expand"
|
|
3895
3645
|
},
|
|
3896
3646
|
{
|
|
3897
|
-
"id": "components-navlist-features--with-group-heading-links"
|
|
3898
|
-
"code": "() => (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Group>\n <NavList.GroupHeading>\n <a href=\"#group-1\">Group 1</a>\n </NavList.GroupHeading>\n <NavList.Item aria-current=\"true\" href=\"#\">\n Item 1A\n </NavList.Item>\n <NavList.Item href=\"#\">Item 1B</NavList.Item>\n <NavList.Item href=\"#\">Item 1C</NavList.Item>\n </NavList.Group>\n <NavList.Group>\n <NavList.GroupHeading>\n <a href=\"#group-2\">Group 2</a>\n </NavList.GroupHeading>\n <NavList.Item href=\"#\">Item 2A</NavList.Item>\n <NavList.Item href=\"#\">Item 2B</NavList.Item>\n <NavList.Item href=\"#\">Item 2C</NavList.Item>\n </NavList.Group>\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n)"
|
|
3647
|
+
"id": "components-navlist-features--with-group-heading-links"
|
|
3899
3648
|
},
|
|
3900
3649
|
{
|
|
3901
|
-
"id": "components-navlist-features--with-inactive-items"
|
|
3902
|
-
"code": "() => (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item href=\"#\" inactiveText=\"Unavailable due to an outage\">\n Item 1\n </NavList.Item>\n <NavList.Item>\n Item 2\n <NavList.SubNav>\n <NavList.Item href=\"#\" aria-current=\"page\">\n Sub item 1\n </NavList.Item>\n <NavList.Item href=\"#\" inactiveText=\"Unavailable due to an outage\">\n Sub item 2\n </NavList.Item>\n </NavList.SubNav>\n </NavList.Item>\n <NavList.Item href=\"#\">Item 3</NavList.Item>\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n)"
|
|
3650
|
+
"id": "components-navlist-features--with-inactive-items"
|
|
3903
3651
|
},
|
|
3904
3652
|
{
|
|
3905
|
-
"id": "components-navlist-features--with-nested-sub-items"
|
|
3906
|
-
"code": "() => (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item defaultOpen={true} href=\"#\">\n Item 1\n <NavList.SubNav>\n <NavList.Item href=\"#\">Sub item 1</NavList.Item>\n </NavList.SubNav>\n </NavList.Item>\n <NavList.Item href=\"#\">\n Item 2{/* NOTE: Don't nest SubNavs. For testing purposes only */}\n <NavList.SubNav>\n <NavList.Item href=\"#\">\n Sub item 1\n <NavList.SubNav>\n <NavList.Item href=\"#\">\n Sub item 1.1\n <NavList.SubNav>\n <NavList.Item href=\"#\">Sub item 1.1.1</NavList.Item>\n <NavList.Item href=\"#\">\n Sub item 1.1.2\n <NavList.SubNav>\n <NavList.Item href=\"#\">Sub item 1.1.2.1</NavList.Item>\n <NavList.Item href=\"#\" aria-current=\"page\">\n Sub item 1.1.2.2\n </NavList.Item>\n </NavList.SubNav>\n </NavList.Item>\n </NavList.SubNav>\n </NavList.Item>\n <NavList.Item href=\"#\">Sub item 1.2</NavList.Item>\n </NavList.SubNav>\n </NavList.Item>\n <NavList.Item href=\"#\">Sub item 2</NavList.Item>\n </NavList.SubNav>\n </NavList.Item>\n <NavList.Item href=\"#\">Item 3</NavList.Item>\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n)"
|
|
3653
|
+
"id": "components-navlist-features--with-nested-sub-items"
|
|
3907
3654
|
},
|
|
3908
3655
|
{
|
|
3909
|
-
"id": "components-navlist-features--with-next-js-link"
|
|
3910
|
-
"code": "() => (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NextJSLikeLink href=\"#\">\n <NavList.Item aria-current=\"page\">Item 1</NavList.Item>\n </NextJSLikeLink>\n <NextJSLikeLink href=\"#\">\n <NavList.Item>Item 2</NavList.Item>\n </NextJSLikeLink>\n <NextJSLikeLink href=\"#\">\n <NavList.Item>Item 3</NavList.Item>\n </NextJSLikeLink>\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n)"
|
|
3656
|
+
"id": "components-navlist-features--with-next-js-link"
|
|
3911
3657
|
},
|
|
3912
3658
|
{
|
|
3913
|
-
"id": "components-navlist-features--with-react-router-link"
|
|
3914
|
-
"code": "() => (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item as={ReactRouterLikeLink} to=\"#\" aria-current=\"page\">\n Item 1\n </NavList.Item>\n <NavList.Item as={ReactRouterLikeLink} to=\"#\">\n Item 2\n </NavList.Item>\n <NavList.Item as={ReactRouterLikeLink} to=\"#\">\n Item 3\n </NavList.Item>\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n)"
|
|
3659
|
+
"id": "components-navlist-features--with-react-router-link"
|
|
3915
3660
|
},
|
|
3916
3661
|
{
|
|
3917
|
-
"id": "components-navlist-features--with-reloads"
|
|
3918
|
-
"code": "() => {\n // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc\n const location = window.location\n const storyId = new URLSearchParams(location.search).get('id')\n const urlBase = `${location.origin + location.pathname}?id=${storyId}`\n const itemId = new URLSearchParams(location.search).get('itemId')\n return (\n <>\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item\n href={`${urlBase}&itemId=1`}\n aria-current={itemId === '1' ? 'page' : 'false'}\n >\n Item 1\n </NavList.Item>\n <NavList.Item>\n Item 2\n <NavList.SubNav>\n <NavList.Item\n href={`${urlBase}&itemId=2.1`}\n aria-current={itemId === '2.1' ? 'page' : 'false'}\n >\n Sub item 2.1\n </NavList.Item>\n <NavList.Item\n href={`${urlBase}&itemId=2.2`}\n aria-current={itemId === '2.2' ? 'page' : 'false'}\n >\n Sub item 2.2\n </NavList.Item>\n </NavList.SubNav>\n </NavList.Item>\n <NavList.Item>\n Item 3\n <NavList.SubNav>\n <NavList.Item\n href={`${urlBase}&itemId=3.1`}\n aria-current={itemId === '3.1' ? 'page' : 'false'}\n >\n Sub item 3.1\n </NavList.Item>\n <NavList.Item\n href={`${urlBase}&itemId=3.2`}\n aria-current={itemId === '3.2' ? 'page' : 'false'}\n >\n Sub item 3.2\n </NavList.Item>\n </NavList.SubNav>\n </NavList.Item>\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n </>\n )\n}"
|
|
3662
|
+
"id": "components-navlist-features--with-reloads"
|
|
3919
3663
|
},
|
|
3920
3664
|
{
|
|
3921
|
-
"id": "components-navlist-features--with-sub-items"
|
|
3922
|
-
"code": "() => (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item href=\"#\">Item 1</NavList.Item>\n <NavList.Item>\n Item 2\n <NavList.SubNav>\n <NavList.Item href=\"#\" aria-current=\"page\">\n Sub item 1\n </NavList.Item>\n <NavList.Item href=\"#\">Sub item 2</NavList.Item>\n </NavList.SubNav>\n </NavList.Item>\n <NavList.Item href=\"#\">Item 3</NavList.Item>\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n)"
|
|
3665
|
+
"id": "components-navlist-features--with-sub-items"
|
|
3923
3666
|
},
|
|
3924
3667
|
{
|
|
3925
|
-
"id": "components-navlist-features--with-trailing-action"
|
|
3926
|
-
"code": "() => {\n return (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item>\n <NavList.LeadingVisual>\n <FileDirectoryIcon />\n </NavList.LeadingVisual>\n Item 1\n <NavList.TrailingAction\n label=\"Expand sidebar\"\n icon={ArrowLeftIcon}\n />\n </NavList.Item>\n <NavList.Item>\n Item 2\n <NavList.TrailingAction\n as=\"a\"\n href=\"#\"\n label=\"Some action\"\n icon={ArrowRightIcon}\n />\n </NavList.Item>\n </NavList>\n </PageLayout.Pane>\n </PageLayout>\n )\n}"
|
|
3668
|
+
"id": "components-navlist-features--with-trailing-action"
|
|
3927
3669
|
},
|
|
3928
3670
|
{
|
|
3929
|
-
"id": "components-navlist-features--with-trailing-action-in-sub-item"
|
|
3930
|
-
"code": "() => {\n return (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item>\n <NavList.LeadingVisual>\n <FileDirectoryIcon />\n </NavList.LeadingVisual>\n Item 1\n <NavList.TrailingAction\n label=\"Expand sidebar\"\n icon={ArrowLeftIcon}\n />\n </NavList.Item>\n <NavList.Item>\n Item 2\n <NavList.TrailingAction\n as=\"a\"\n href=\"#\"\n label=\"Some action\"\n icon={ArrowRightIcon}\n />\n </NavList.Item>\n <NavList.Item>\n Item 3\n <NavList.SubNav>\n <NavList.Item href=\"#\">\n Sub item 1\n <NavList.TrailingAction\n label=\"Another action\"\n icon={BookIcon}\n />\n </NavList.Item>\n </NavList.SubNav>\n </NavList.Item>\n </NavList>\n </PageLayout.Pane>\n </PageLayout>\n )\n}"
|
|
3671
|
+
"id": "components-navlist-features--with-trailing-action-in-sub-item"
|
|
3931
3672
|
}
|
|
3932
3673
|
],
|
|
3933
3674
|
"importPath": "@primer/react",
|
|
@@ -4193,8 +3934,7 @@
|
|
|
4193
3934
|
"a11yReviewed": false,
|
|
4194
3935
|
"stories": [
|
|
4195
3936
|
{
|
|
4196
|
-
"id": "deprecated-components-octicon--default"
|
|
4197
|
-
"code": "() => <Octicon icon={HeartFillIcon} aria-label=\"Like\" size={32} />"
|
|
3937
|
+
"id": "deprecated-components-octicon--default"
|
|
4198
3938
|
}
|
|
4199
3939
|
],
|
|
4200
3940
|
"importPath": "@primer/react/deprecated",
|
|
@@ -4240,16 +3980,16 @@
|
|
|
4240
3980
|
"a11yReviewed": "2025-01-08",
|
|
4241
3981
|
"stories": [
|
|
4242
3982
|
{
|
|
4243
|
-
"id": "
|
|
4244
|
-
"code": "(args: Args) => {\n const [isOpen, setIsOpen] = useState(false)\n const buttonRef = useRef<HTMLButtonElement>(null)\n const confirmButtonRef = useRef<HTMLButtonElement>(null)\n const anchorRef = useRef<HTMLDivElement>(null)\n const closeOverlay = () => setIsOpen(false)\n const containerRef = useRef<HTMLDivElement>(null)\n useFocusTrap({\n containerRef,\n disabled: !isOpen,\n })\n return (\n <div ref={anchorRef}>\n <Button\n ref={buttonRef}\n onClick={() => {\n setIsOpen(!isOpen)\n }}\n >\n Open overlay\n </Button>\n {isOpen || args.open ? (\n <Overlay\n initialFocusRef={confirmButtonRef}\n returnFocusRef={buttonRef}\n ignoreClickRefs={[buttonRef]}\n onEscape={closeOverlay}\n onClickOutside={closeOverlay}\n width=\"large\"\n anchorSide=\"inside-right\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Sample overlay\"\n ref={containerRef}\n >\n <div className={classes.FullHeightContent}>\n <IconButton\n aria-label=\"Close\"\n onClick={closeOverlay}\n icon={XIcon}\n variant=\"invisible\"\n className={classes.CloseButtonOverlay}\n />\n <Text>Look! an overlay</Text>\n </div>\n </Overlay>\n ) : null}\n </div>\n )\n}"
|
|
3983
|
+
"id": "components-overlay--default"
|
|
4245
3984
|
},
|
|
4246
3985
|
{
|
|
4247
|
-
"id": "private-components-overlay
|
|
4248
|
-
"code": "({ anchorSide, role, open }: Args) => {\n const [isOpen, setIsOpen] = useState(false)\n const buttonRef = useRef<HTMLButtonElement>(null)\n const containerRef = useRef<HTMLDivElement>(null)\n const confirmButtonRef = useRef<HTMLButtonElement>(null)\n const anchorRef = useRef<HTMLDivElement>(null)\n const closeOverlay = () => setIsOpen(false)\n useFocusTrap({\n containerRef,\n disabled: !isOpen,\n initialFocusRef: confirmButtonRef,\n returnFocusRef: buttonRef,\n })\n return (\n <div ref={anchorRef}>\n <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>\n open overlay\n </Button>\n {isOpen || open ? (\n <Overlay\n initialFocusRef={confirmButtonRef}\n returnFocusRef={buttonRef}\n ignoreClickRefs={[buttonRef]}\n onEscape={closeOverlay}\n onClickOutside={closeOverlay}\n width=\"small\"\n anchorSide={anchorSide}\n role={role}\n aria-modal={role === 'dialog' ? 'true' : undefined}\n aria-label={role === 'dialog' ? 'Confirmation screen' : undefined}\n ref={containerRef}\n >\n <div className={classes.DialogContent}>\n <Text>Are you sure?</Text>\n <Button variant=\"danger\" onClick={closeOverlay}>\n Cancel\n </Button>\n <Button onClick={closeOverlay} ref={confirmButtonRef}>\n Confirm\n </Button>\n </div>\n </Overlay>\n ) : null}\n </div>\n )\n}"
|
|
3986
|
+
"id": "private-components-overlay--default"
|
|
4249
3987
|
},
|
|
4250
3988
|
{
|
|
4251
|
-
"id": "private-components-overlay-features--
|
|
4252
|
-
|
|
3989
|
+
"id": "private-components-overlay-features--dialog-overlay"
|
|
3990
|
+
},
|
|
3991
|
+
{
|
|
3992
|
+
"id": "private-components-overlay-features--positioned-overlays"
|
|
4253
3993
|
}
|
|
4254
3994
|
],
|
|
4255
3995
|
"importPath": "@primer/react",
|
|
@@ -4402,52 +4142,43 @@
|
|
|
4402
4142
|
"a11yReviewed": "2025-01-08",
|
|
4403
4143
|
"stories": [
|
|
4404
4144
|
{
|
|
4405
|
-
"id": "components-pageheader
|
|
4406
|
-
|
|
4145
|
+
"id": "components-pageheader--default"
|
|
4146
|
+
},
|
|
4147
|
+
{
|
|
4148
|
+
"id": "components-pageheader-features--has-title-only"
|
|
4407
4149
|
},
|
|
4408
4150
|
{
|
|
4409
|
-
"id": "components-pageheader-features--has-large-title"
|
|
4410
|
-
"code": "() => (\n <div className={classes.PaddingContainer}>\n <PageHeader role=\"banner\" aria-label=\"Title\">\n <PageHeader.TitleArea variant=\"large\">\n <PageHeader.Title>Title</PageHeader.Title>\n </PageHeader.TitleArea>\n </PageHeader>\n </div>\n)"
|
|
4151
|
+
"id": "components-pageheader-features--has-large-title"
|
|
4411
4152
|
},
|
|
4412
4153
|
{
|
|
4413
|
-
"id": "components-pageheader-features--with-leading-and-trailing-visuals"
|
|
4414
|
-
"code": "() => (\n <div className={classes.PaddingContainer}>\n <PageHeader role=\"banner\" aria-label=\"Title\">\n <PageHeader.TitleArea>\n <PageHeader.LeadingVisual>\n <GitPullRequestIcon />\n </PageHeader.LeadingVisual>\n <PageHeader.Title>Title</PageHeader.Title>\n <PageHeader.TrailingVisual>\n <Label>Beta</Label>\n </PageHeader.TrailingVisual>\n </PageHeader.TitleArea>\n </PageHeader>\n </div>\n)"
|
|
4154
|
+
"id": "components-pageheader-features--with-leading-and-trailing-visuals"
|
|
4415
4155
|
},
|
|
4416
4156
|
{
|
|
4417
|
-
"id": "components-pageheader-features--with-leading-visual-hidden-on-regular-viewport"
|
|
4418
|
-
"code": "() => (\n <div className={classes.PaddingContainer}>\n <PageHeader role=\"banner\" aria-label=\"Title\">\n <PageHeader.TitleArea>\n <PageHeader.LeadingVisual\n hidden={{\n regular: true,\n }}\n >\n <GitPullRequestIcon />\n </PageHeader.LeadingVisual>\n <PageHeader.Title>Title</PageHeader.Title>\n <PageHeader.TrailingVisual>\n <Label>Beta</Label>\n </PageHeader.TrailingVisual>\n </PageHeader.TitleArea>\n </PageHeader>\n </div>\n)"
|
|
4157
|
+
"id": "components-pageheader-features--with-leading-visual-hidden-on-regular-viewport"
|
|
4419
4158
|
},
|
|
4420
4159
|
{
|
|
4421
|
-
"id": "components-pageheader-features--with-actions"
|
|
4422
|
-
"code": "() => (\n <div className={classes.PaddingContainer}>\n <PageHeader role=\"banner\" aria-label=\"Title\">\n <PageHeader.TitleArea>\n <PageHeader.Title>Title</PageHeader.Title>\n </PageHeader.TitleArea>\n <PageHeader.Actions>\n <IconButton aria-label=\"Workflows\" icon={WorkflowIcon} />\n <IconButton aria-label=\"Insights\" icon={GraphIcon} />\n <Button variant=\"primary\" trailingVisual={TriangleDownIcon}>\n Add Item\n </Button>\n <IconButton aria-label=\"Settings\" icon={GearIcon} />\n </PageHeader.Actions>\n </PageHeader>\n </div>\n)"
|
|
4160
|
+
"id": "components-pageheader-features--with-actions"
|
|
4423
4161
|
},
|
|
4424
4162
|
{
|
|
4425
|
-
"id": "components-pageheader-features--with-description-slot"
|
|
4426
|
-
"code": "() => (\n <div className={classes.PaddingContainer}>\n <PageHeader role=\"banner\" aria-label=\"Add-pageheader-docs\">\n <PageHeader.TitleArea>\n <PageHeader.Title>add-pageheader-docs</PageHeader.Title>\n </PageHeader.TitleArea>\n <PageHeader.Description>\n <Text className={classes.DescriptionText}>\n <Link\n href=\"https://github.com/broccolinisoup\"\n className={classes.BoldLink}\n >\n broccolinisoup\n </Link>{' '}\n created this branch 5 days ago · 14 commits · updated today\n </Text>\n </PageHeader.Description>\n </PageHeader>\n </div>\n)"
|
|
4163
|
+
"id": "components-pageheader-features--with-description-slot"
|
|
4427
4164
|
},
|
|
4428
4165
|
{
|
|
4429
|
-
"id": "components-pageheader-features--with-navigation-slot"
|
|
4430
|
-
"code": "() => (\n <div className={classes.PaddingContainer}>\n <PageHeader role=\"banner\" aria-label=\"Pull request title\">\n <PageHeader.TitleArea>\n <PageHeader.Title>Pull request title</PageHeader.Title>\n </PageHeader.TitleArea>\n <PageHeader.Navigation>\n <UnderlineNav aria-label=\"Pull Request\">\n <UnderlineNav.Item\n icon={CommentDiscussionIcon}\n counter=\"12\"\n aria-current=\"page\"\n >\n Conversation\n </UnderlineNav.Item>\n <UnderlineNav.Item counter={3} icon={GitCommitIcon}>\n Commits\n </UnderlineNav.Item>\n <UnderlineNav.Item counter={7} icon={ChecklistIcon}>\n Checks\n </UnderlineNav.Item>\n <UnderlineNav.Item counter={4} icon={FileDiffIcon}>\n Files Changes\n </UnderlineNav.Item>\n </UnderlineNav>\n </PageHeader.Navigation>\n </PageHeader>\n </div>\n)"
|
|
4166
|
+
"id": "components-pageheader-features--with-navigation-slot"
|
|
4431
4167
|
},
|
|
4432
4168
|
{
|
|
4433
|
-
"id": "components-pageheader-features--with-custom-navigation"
|
|
4434
|
-
"code": "() => (\n <div className={classes.PaddingContainer}>\n <PageHeader role=\"banner\" aria-label=\"Pull request title\">\n <PageHeader.TitleArea>\n <PageHeader.Title>Pull request title</PageHeader.Title>\n </PageHeader.TitleArea>\n <PageHeader.Navigation as=\"nav\" aria-label=\"Item list\">\n <ul className={classes.CustomNavigationList}>\n <li>\n <Link href=\"https://github.com/primer/react\" aria-current=\"page\">\n Item 1\n </Link>\n </li>\n <li>\n <Link href=\"https://github.com/primer/react/pulls\">Item 2</Link>\n </li>\n </ul>\n </PageHeader.Navigation>\n </PageHeader>\n </div>\n)"
|
|
4169
|
+
"id": "components-pageheader-features--with-custom-navigation"
|
|
4435
4170
|
},
|
|
4436
4171
|
{
|
|
4437
|
-
"id": "components-pageheader-features--with-leading-and-trailing-actions"
|
|
4438
|
-
"code": "() => (\n <div className={classes.PaddingContainer}>\n <PageHeader role=\"banner\" aria-label=\"Title\">\n <PageHeader.TitleArea>\n <PageHeader.Title>Title</PageHeader.Title>\n </PageHeader.TitleArea>\n <PageHeader.LeadingAction>\n <IconButton\n aria-label=\"Expand\"\n icon={SidebarExpandIcon}\n variant=\"invisible\"\n />\n </PageHeader.LeadingAction>\n <PageHeader.TrailingAction>\n <IconButton aria-label=\"Edit\" icon={PencilIcon} variant=\"invisible\" />\n </PageHeader.TrailingAction>\n </PageHeader>\n </div>\n)"
|
|
4172
|
+
"id": "components-pageheader-features--with-leading-and-trailing-actions"
|
|
4439
4173
|
},
|
|
4440
4174
|
{
|
|
4441
|
-
"id": "components-pageheader-features--with-parent-link-and-actions-of-context-area"
|
|
4442
|
-
"code": "() => (\n <div className={classes.PaddingContainer}>\n <PageHeader role=\"banner\" aria-label=\"Title\">\n <PageHeader.TitleArea>\n <PageHeader.Title>Title</PageHeader.Title>\n </PageHeader.TitleArea>\n <PageHeader.ContextArea>\n <PageHeader.ParentLink href=\"http://github.com\">\n Parent Link\n </PageHeader.ParentLink>\n\n <PageHeader.ContextAreaActions>\n <Button size=\"small\" trailingAction={TriangleDownIcon}>\n Add File\n </Button>\n <IconButton\n size=\"small\"\n aria-label=\"More Options\"\n icon={KebabHorizontalIcon}\n />\n </PageHeader.ContextAreaActions>\n </PageHeader.ContextArea>\n </PageHeader>\n </div>\n)"
|
|
4175
|
+
"id": "components-pageheader-features--with-parent-link-and-actions-of-context-area"
|
|
4443
4176
|
},
|
|
4444
4177
|
{
|
|
4445
|
-
"id": "components-pageheader-features--with-context-bar-and-actions-of-context-area"
|
|
4446
|
-
"code": "() => (\n <div className={classes.PaddingContainer}>\n <PageHeader role=\"banner\" aria-label=\"Title\">\n <PageHeader.TitleArea>\n <PageHeader.Title>Title</PageHeader.Title>\n </PageHeader.TitleArea>\n <PageHeader.ContextArea>\n <PageHeader.ContextBar>\n <Breadcrumbs>\n <Breadcrumbs.Item href=\"https://github.com/primer/react/tree/main\">\n react\n </Breadcrumbs.Item>\n <Breadcrumbs.Item href=\"https://github.com/primer/react/tree/main/src\">\n src\n </Breadcrumbs.Item>\n <Breadcrumbs.Item href=\"https://github.com/primer/react/tree/main/src/PageHeader\">\n PageHeader\n </Breadcrumbs.Item>\n <Breadcrumbs.Item href=\"https://github.com/primer/react/blob/main/src/PageHeader/PageHeader.tsx\">\n PageHeader.tsx\n </Breadcrumbs.Item>\n </Breadcrumbs>\n </PageHeader.ContextBar>\n <PageHeader.ContextAreaActions>\n <Button size=\"small\" leadingVisual={GitBranchIcon}>\n Main\n </Button>\n <IconButton\n size=\"small\"\n aria-label=\"More Options\"\n icon={KebabHorizontalIcon}\n />\n </PageHeader.ContextAreaActions>\n </PageHeader.ContextArea>\n </PageHeader>\n </div>\n)"
|
|
4178
|
+
"id": "components-pageheader-features--with-context-bar-and-actions-of-context-area"
|
|
4447
4179
|
},
|
|
4448
4180
|
{
|
|
4449
|
-
"id": "components-pageheader-features--with-actions-that-have-responsive-content"
|
|
4450
|
-
"code": "() => (\n <div className={classes.PaddingContainer}>\n <PageHeader role=\"banner\" aria-label=\"Webhooks\">\n <PageHeader.TitleArea>\n <PageHeader.Title as=\"h2\">Webhooks</PageHeader.Title>\n </PageHeader.TitleArea>\n <PageHeader.Actions>\n <Hidden when={['narrow']}>\n <Button variant=\"primary\">New webhook</Button>\n </Hidden>\n <Hidden when={['regular', 'wide']}>\n <Button variant=\"primary\">New</Button>\n </Hidden>\n </PageHeader.Actions>\n </PageHeader>\n </div>\n)"
|
|
4181
|
+
"id": "components-pageheader-features--with-actions-that-have-responsive-content"
|
|
4451
4182
|
}
|
|
4452
4183
|
],
|
|
4453
4184
|
"importPath": "@primer/react",
|
|
@@ -4774,40 +4505,31 @@
|
|
|
4774
4505
|
"a11yReviewed": "2025-01-08",
|
|
4775
4506
|
"stories": [
|
|
4776
4507
|
{
|
|
4777
|
-
"id": "components-pagelayout--default"
|
|
4778
|
-
"code": "(args) => (\n <PageLayout\n containerWidth={args.containerWidth}\n padding={args.padding}\n rowGap={args.rowGap}\n columnGap={args.columnGap}\n >\n {args['Render header?'] ? (\n <PageLayout.Header\n padding={args['Header.padding']}\n divider={{\n narrow: args['Header.divider.narrow'],\n regular: args['Header.divider.regular'],\n wide: args['Header.divider.wide'],\n }}\n hidden={{\n narrow: args['Header.hidden.narrow'],\n regular: args['Header.hidden.regular'],\n wide: args['Header.hidden.wide'],\n }}\n >\n <Placeholder\n height={args['Header placeholder height']}\n label=\"Header\"\n />\n </PageLayout.Header>\n ) : null}\n <PageLayout.Content\n width={args['Content.width']}\n padding={args['Content.padding']}\n hidden={{\n narrow: args['Content.hidden.narrow'],\n regular: args['Content.hidden.regular'],\n wide: args['Content.hidden.wide'],\n }}\n >\n <Placeholder\n height={args['Content placeholder height']}\n label=\"Content\"\n />\n </PageLayout.Content>\n {args['Render pane?'] ? (\n <PageLayout.Pane\n position={{\n narrow: args['Pane.position.narrow'],\n regular: args['Pane.position.regular'],\n wide: args['Pane.position.wide'],\n }}\n width={args['Pane.width']}\n minWidth={args['Pane.minWidth']}\n sticky={args['Pane.sticky']}\n resizable={args['Pane.resizable']}\n padding={args['Pane.padding']}\n divider={{\n narrow: args['Pane.divider.narrow'],\n regular: args['Pane.divider.regular'],\n wide: args['Pane.divider.wide'],\n }}\n hidden={{\n narrow: args['Pane.hidden.narrow'],\n regular: args['Pane.hidden.regular'],\n wide: args['Pane.hidden.wide'],\n }}\n >\n <Placeholder height={args['Pane placeholder height']} label=\"Pane\" />\n </PageLayout.Pane>\n ) : null}\n {args['Render footer?'] ? (\n <PageLayout.Footer\n padding={args['Footer.padding']}\n divider={{\n narrow: args['Footer.divider.narrow'],\n regular: args['Footer.divider.regular'],\n wide: args['Footer.divider.wide'],\n }}\n hidden={{\n narrow: args['Footer.hidden.narrow'],\n regular: args['Footer.hidden.regular'],\n wide: args['Footer.hidden.wide'],\n }}\n >\n <Placeholder\n height={args['Footer placeholder height']}\n label=\"Footer\"\n />\n </PageLayout.Footer>\n ) : null}\n </PageLayout>\n)"
|
|
4508
|
+
"id": "components-pagelayout--default"
|
|
4779
4509
|
},
|
|
4780
4510
|
{
|
|
4781
|
-
"id": "components-pagelayout-features--pull-request-page"
|
|
4782
|
-
"code": "() => (\n <PageLayout>\n <PageLayout.Header>\n <div className={classes.HeaderStack}>\n <div>\n <Heading as=\"h1\" className={classes.TitleHeading}>\n Input validation styles{' '}\n <Text className={classes.TitleSubdued}>#1831</Text>\n </Heading>\n <div className={classes.StatusRow}>\n <StateLabel status=\"pullOpened\">Open</StateLabel>\n <Text className={classes.StatusMeta}>\n <Link href=\"#\" muted className={classes.BoldMetaLink}>\n mperrotti\n </Link>{' '}\n wants to merge 3 commits into{' '}\n <BranchName href=\"#\">main</BranchName> from{' '}\n <BranchName href=\"#\">mp/validation-styles</BranchName>\n </Text>\n </div>\n </div>\n <TabNav>\n <TabNav.Link href=\"#\" selected>\n Conversation\n </TabNav.Link>\n <TabNav.Link href=\"#\">Commits</TabNav.Link>\n <TabNav.Link href=\"#\">Checks</TabNav.Link>\n <TabNav.Link href=\"#\">Files changed</TabNav.Link>\n </TabNav>\n </div>\n </PageLayout.Header>\n <PageLayout.Content>\n <div className={classes.ContentBox}></div>\n <div className={classes.ScrollBox} tabIndex={0}>\n This box has really long content. If it is too long, it will cause x\n overflow and should show a scrollbar. When this overflows, it should not\n break to overall page layout!\n </div>\n </PageLayout.Content>\n <PageLayout.Pane aria-label=\"Side pane\">\n <div className={classes.PaneStack}>\n <div>\n <Text className={classes.PaneSectionHeading}>Assignees</Text>\n <Text className={classes.PaneMetaText}>\n No one –{' '}\n <Link href=\"#\" muted>\n assign yourself\n </Link>\n </Text>\n </div>\n <div role=\"separator\" className={classes.PaneSeparator}></div>\n <div>\n <Text className={classes.PaneSectionHeading}>Labels</Text>\n <Text className={classes.PaneMetaText}>None yet</Text>\n </div>\n </div>\n </PageLayout.Pane>\n </PageLayout>\n)"
|
|
4511
|
+
"id": "components-pagelayout-features--pull-request-page"
|
|
4783
4512
|
},
|
|
4784
4513
|
{
|
|
4785
|
-
"id": "components-pagelayout-features--sticky-pane"
|
|
4786
|
-
"code": "(args) => (\n <PageLayout\n rowGap=\"none\"\n columnGap=\"none\"\n padding=\"none\"\n containerWidth=\"full\"\n >\n <PageLayout.Header padding=\"normal\" divider=\"line\">\n <Placeholder label=\"Header\" height={64} />\n </PageLayout.Header>\n <PageLayout.Content padding=\"normal\" width=\"large\">\n <div className={classes.ContentGrid}>\n {Array.from({\n length: args.numParagraphsInContent,\n }).map((_, i) => {\n const testId = `content${i}`\n return (\n <p key={i} className={classes.Paragraph}>\n <span data-testid={testId}>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n ante quam, at varius lorem molestie vel. Sed at eros consequat,\n varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n commodo. Phasellus at imperdiet risus. Donec sit amet massa\n purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus\n felis. Ut porttitor auctor tellus in imperdiet. Ut blandit\n tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum\n auctor euismod nisi. Nullam tincidunt est in mi tincidunt\n dictum. Sed consectetur aliquet velit ut ornare.\n </span>\n </p>\n )\n })}\n </div>\n </PageLayout.Content>\n <PageLayout.Pane\n position=\"start\"\n resizable\n padding=\"normal\"\n divider=\"line\"\n sticky={args.sticky}\n aria-label=\"Side pane\"\n >\n <div className={classes.ContentGrid}>\n {Array.from({\n length: args.numParagraphsInPane,\n }).map((_, i) => {\n const testId = `paragraph${i}`\n return (\n <p key={i} className={classes.Paragraph}>\n <span data-testid={testId}>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n ante quam, at varius lorem molestie vel. Sed at eros consequat,\n varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n commodo. Phasellus at imperdiet risus. Donec sit amet massa\n purus.\n </span>\n </p>\n )\n })}\n <p>\n Donec sit amet massa purus.{' '}\n <Link inline href=\"#foo\">\n Plura de lorem Ispum.\n </Link>\n </p>\n </div>\n </PageLayout.Pane>\n <PageLayout.Footer padding=\"normal\" divider=\"line\">\n <Placeholder label=\"Footer\" height={64} />\n </PageLayout.Footer>\n </PageLayout>\n)"
|
|
4514
|
+
"id": "components-pagelayout-features--sticky-pane"
|
|
4787
4515
|
},
|
|
4788
4516
|
{
|
|
4789
|
-
"id": "components-pagelayout-features--nested-scroll-container"
|
|
4790
|
-
"code": "(args) => (\n <div className={classes.NestedScrollContainer}>\n <Placeholder label=\"Above scroll container\" height={120} />\n <div className={classes.OverflowAuto}>\n <PageLayout\n rowGap=\"none\"\n columnGap=\"none\"\n padding=\"none\"\n containerWidth=\"full\"\n >\n <PageLayout.Header padding=\"normal\" divider=\"line\">\n <Placeholder label=\"Header\" height={64} />\n </PageLayout.Header>\n <PageLayout.Content padding=\"normal\" width=\"large\">\n <div\n className={classes.ContentGrid}\n tabIndex={0}\n role=\"region\"\n aria-label=\"Page content\"\n >\n {Array.from({\n length: args.numParagraphsInContent,\n }).map((_, i) => (\n <p key={i} className={classes.Paragraph}>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n ante quam, at varius lorem molestie vel. Sed at eros consequat,\n varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n commodo. Phasellus at imperdiet risus. Donec sit amet massa\n purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus\n felis. Ut porttitor auctor tellus in imperdiet. Ut blandit\n tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum\n auctor euismod nisi. Nullam tincidunt est in mi tincidunt\n dictum. Sed consectetur aliquet velit ut ornare.\n </p>\n ))}\n </div>\n </PageLayout.Content>\n <PageLayout.Pane\n position=\"start\"\n padding=\"normal\"\n divider=\"line\"\n sticky\n aria-label=\"Side pane\"\n >\n <div className={classes.ContentGrid}>\n {Array.from({\n length: args.numParagraphsInPane,\n }).map((_, i) => (\n <p key={i} className={classes.Paragraph}>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n ante quam, at varius lorem molestie vel. Sed at eros consequat,\n varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n commodo. Phasellus at imperdiet risus. Donec sit amet massa\n purus.\n </p>\n ))}\n </div>\n </PageLayout.Pane>\n <PageLayout.Footer padding=\"normal\" divider=\"line\">\n <Placeholder label=\"Footer\" height={64} />\n </PageLayout.Footer>\n </PageLayout>\n </div>\n <Placeholder label=\"Below scroll container\" height={120} />\n </div>\n)"
|
|
4517
|
+
"id": "components-pagelayout-features--nested-scroll-container"
|
|
4791
4518
|
},
|
|
4792
4519
|
{
|
|
4793
|
-
"id": "components-pagelayout-features--custom-sticky-header"
|
|
4794
|
-
"code": "(args) => (\n // a box to create a sticky top element that will be on the consumer side and outside of the PageLayout component\n <div data-testid=\"story-window\">\n <header\n data-testid=\"sticky-header\"\n className={classes.StickyHeader}\n style={{\n height: args.offsetHeader,\n }}\n >\n Custom sticky header\n </header>\n <PageLayout\n rowGap=\"none\"\n columnGap=\"none\"\n padding=\"none\"\n containerWidth=\"full\"\n >\n <PageLayout.Content padding=\"normal\" width=\"large\">\n <div className={classes.ContentGrid} data-testid=\"scrollContainer\">\n {Array.from({\n length: args.numParagraphsInContent,\n }).map((_, i) => {\n const testId = `content${i}`\n return (\n <p key={i} className={classes.Paragraph}>\n <span data-testid={testId}>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin\n vitae orci et magna consectetur ullamcorper eget ac purus. Nam\n at enim id lorem tempus egestas a non ipsum. Maecenas\n imperdiet ante quam, at varius lorem molestie vel. Sed at eros\n consequat, varius tellus et, auctor felis. Donec pulvinar\n lacinia urna nec commodo. Phasellus at imperdiet risus. Donec\n sit amet massa purus. Nunc sem lectus, bibendum a sapien nec,\n tristique tempus felis. Ut porttitor auctor tellus in\n imperdiet. Ut blandit tincidunt augue, quis fringilla nunc\n tincidunt sed. Vestibulum auctor euismod nisi. Nullam\n tincidunt est in mi tincidunt dictum. Sed consectetur aliquet\n velit ut ornare.\n </span>\n </p>\n )\n })}\n </div>\n </PageLayout.Content>\n <PageLayout.Pane\n position=\"start\"\n padding=\"normal\"\n divider=\"line\"\n aria-label=\"Aside pane\"\n sticky\n offsetHeader={args.offsetHeader}\n >\n <div className={classes.ContentGrid}>\n {Array.from({\n length: args.numParagraphsInPane,\n }).map((_, i) => {\n const testId = `paragraph${i}`\n return (\n <p key={i} className={classes.Paragraph}>\n <span data-testid={testId}>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam\n at enim id lorem tempus egestas a non ipsum. Maecenas\n imperdiet ante quam, at varius lorem molestie vel. Sed at eros\n consequat, varius tellus et, auctor felis. Donec pulvinar\n lacinia urna nec commodo. Phasellus at imperdiet risus. Donec\n sit amet massa purus.\n </span>\n </p>\n )\n })}\n </div>\n </PageLayout.Pane>\n <PageLayout.Footer padding=\"normal\" divider=\"line\">\n <Placeholder label=\"Footer\" height={64} />\n </PageLayout.Footer>\n </PageLayout>\n </div>\n)"
|
|
4520
|
+
"id": "components-pagelayout-features--custom-sticky-header"
|
|
4795
4521
|
},
|
|
4796
4522
|
{
|
|
4797
|
-
"id": "components-pagelayout-features--resizable-pane"
|
|
4798
|
-
"code": "() => (\n <PageLayout containerWidth=\"full\">\n <PageLayout.Header>\n <Placeholder height={64} label=\"Header\" />\n </PageLayout.Header>\n <PageLayout.Pane resizable position=\"start\" aria-label=\"Side pane\">\n <Placeholder height={320} label=\"Pane\" />\n </PageLayout.Pane>\n <PageLayout.Content>\n <Placeholder height={640} label=\"Content\" />\n </PageLayout.Content>\n <PageLayout.Footer>\n <Placeholder height={64} label=\"Footer\" />\n </PageLayout.Footer>\n </PageLayout>\n)"
|
|
4523
|
+
"id": "components-pagelayout-features--resizable-pane"
|
|
4799
4524
|
},
|
|
4800
4525
|
{
|
|
4801
|
-
"id": "components-pagelayout-features--scroll-container-within-page-layout-pane"
|
|
4802
|
-
"code": "() => (\n <div className={classes.NestedScrollContainer}>\n <div className={classes.OverflowAuto}>\n <Placeholder label=\"Above inner scroll container\" height={120} />\n <PageLayout\n rowGap=\"none\"\n columnGap=\"none\"\n padding=\"none\"\n containerWidth=\"full\"\n >\n <PageLayout.Pane\n position=\"start\"\n padding=\"normal\"\n divider=\"line\"\n sticky\n aria-label=\"Sticky pane\"\n >\n <div className={classes.OverflowAuto}>\n <PageLayout.Pane padding=\"normal\" aria-label=\"Side pane\">\n <Placeholder label=\"Inner scroll container\" height={800} />\n </PageLayout.Pane>\n </div>\n </PageLayout.Pane>\n <PageLayout.Content padding=\"normal\" width=\"large\">\n <div\n className={classes.ContentGrid}\n tabIndex={0}\n role=\"region\"\n aria-label=\"Page content\"\n >\n <Placeholder label=\"Page content\" height={1600} />\n </div>\n </PageLayout.Content>\n </PageLayout>\n <Placeholder label=\"Beneath inner scroll container\" height={120} />\n </div>\n </div>\n)"
|
|
4526
|
+
"id": "components-pagelayout-features--scroll-container-within-page-layout-pane"
|
|
4803
4527
|
},
|
|
4804
4528
|
{
|
|
4805
|
-
"id": "components-pagelayout-features--custom-pane-widths"
|
|
4806
|
-
"code": "() => (\n <PageLayout containerWidth=\"full\">\n <PageLayout.Header>\n <Placeholder height={64} label=\"Header\" />\n </PageLayout.Header>\n <PageLayout.Pane\n resizable\n width={{\n min: '200px',\n default: '300px',\n max: '400px',\n }}\n aria-label=\"Side pane\"\n >\n <Placeholder height={320} label=\"Pane\" />\n </PageLayout.Pane>\n <PageLayout.Content>\n <Placeholder height={640} label=\"Content\" />\n </PageLayout.Content>\n <PageLayout.Footer>\n <Placeholder height={64} label=\"Footer\" />\n </PageLayout.Footer>\n </PageLayout>\n)"
|
|
4529
|
+
"id": "components-pagelayout-features--custom-pane-widths"
|
|
4807
4530
|
},
|
|
4808
4531
|
{
|
|
4809
|
-
"id": "components-pagelayout-features--with-custom-pane-heading"
|
|
4810
|
-
"code": "() => (\n <PageLayout containerWidth=\"full\">\n <PageLayout.Header>\n <Placeholder height={64} label=\"Header\" />\n </PageLayout.Header>\n <PageLayout.Pane resizable position=\"start\" aria-label=\"Side pane\">\n <Heading as=\"h2\" className={classes.PaneHeading} id=\"pane-heading\">\n Pane Heading\n </Heading>\n <Placeholder height={320} label=\"Pane\" />\n </PageLayout.Pane>\n <PageLayout.Content>\n <Placeholder height={640} label=\"Content\" />\n </PageLayout.Content>\n <PageLayout.Footer>\n <Placeholder height={64} label=\"Footer\" />\n </PageLayout.Footer>\n </PageLayout>\n)"
|
|
4532
|
+
"id": "components-pagelayout-features--with-custom-pane-heading"
|
|
4811
4533
|
}
|
|
4812
4534
|
],
|
|
4813
4535
|
"importPath": "@primer/react",
|
|
@@ -5059,8 +4781,7 @@
|
|
|
5059
4781
|
"a11yReviewed": false,
|
|
5060
4782
|
"stories": [
|
|
5061
4783
|
{
|
|
5062
|
-
"id": "deprecated-components-pagehead--default"
|
|
5063
|
-
"code": "() => (\n <Pagehead>\n <Heading as=\"h2\" variant=\"small\">\n Pagehead\n </Heading>\n </Pagehead>\n)"
|
|
4784
|
+
"id": "deprecated-components-pagehead--default"
|
|
5064
4785
|
}
|
|
5065
4786
|
],
|
|
5066
4787
|
"importPath": "@primer/react/deprecated",
|
|
@@ -5082,24 +4803,19 @@
|
|
|
5082
4803
|
"a11yReviewed": "2025-01-08",
|
|
5083
4804
|
"stories": [
|
|
5084
4805
|
{
|
|
5085
|
-
"id": "components-pagination--default"
|
|
5086
|
-
"code": "() => {\n const [page, setPage] = useState(2)\n return (\n <Pagination\n pageCount={15}\n currentPage={page}\n onPageChange={(e, n) => {\n e.preventDefault()\n setPage(n)\n }}\n showPages={{\n narrow: false,\n }}\n />\n )\n}"
|
|
4806
|
+
"id": "components-pagination--default"
|
|
5087
4807
|
},
|
|
5088
4808
|
{
|
|
5089
|
-
"id": "components-pagination-features--larger-page-count-margin"
|
|
5090
|
-
"code": "() => (\n <Pagination\n pageCount={15}\n currentPage={5}\n marginPageCount={4}\n onPageChange={(e) => e.preventDefault()}\n />\n)"
|
|
4809
|
+
"id": "components-pagination-features--larger-page-count-margin"
|
|
5091
4810
|
},
|
|
5092
4811
|
{
|
|
5093
|
-
"id": "components-pagination-features--hide-page-numbers"
|
|
5094
|
-
"code": "() => (\n <Pagination\n pageCount={15}\n currentPage={5}\n showPages={false}\n onPageChange={(e) => e.preventDefault()}\n />\n)"
|
|
4812
|
+
"id": "components-pagination-features--hide-page-numbers"
|
|
5095
4813
|
},
|
|
5096
4814
|
{
|
|
5097
|
-
"id": "components-pagination-features--hide-page-numbers-by-viewport"
|
|
5098
|
-
"code": "() => (\n <>\n <Pagination\n pageCount={15}\n currentPage={5}\n showPages={{\n narrow: false,\n }}\n onPageChange={(e) => e.preventDefault()}\n />\n <p>Page numbers are hidden on narrow viewports.</p>\n </>\n)"
|
|
4815
|
+
"id": "components-pagination-features--hide-page-numbers-by-viewport"
|
|
5099
4816
|
},
|
|
5100
4817
|
{
|
|
5101
|
-
"id": "components-pagination-features--higher-surrounding-page-count"
|
|
5102
|
-
"code": "() => (\n <Pagination\n pageCount={15}\n currentPage={5}\n surroundingPageCount={4}\n onPageChange={(e) => e.preventDefault()}\n />\n)"
|
|
4818
|
+
"id": "components-pagination-features--higher-surrounding-page-count"
|
|
5103
4819
|
}
|
|
5104
4820
|
],
|
|
5105
4821
|
"importPath": "@primer/react",
|
|
@@ -5165,8 +4881,7 @@
|
|
|
5165
4881
|
"a11yReviewed": "2025-01-08",
|
|
5166
4882
|
"stories": [
|
|
5167
4883
|
{
|
|
5168
|
-
"id": "components-popover--default"
|
|
5169
|
-
"code": "() => (\n <Popover relative open={true} caret=\"top\">\n <Popover.Content\n style={{\n marginTop: 'var(--base-size-8)',\n }}\n >\n <Heading\n style={{\n fontSize: 'var(--text-title-size-small)',\n }}\n >\n Popover heading\n </Heading>\n <Text as=\"p\">Message about popovers</Text>\n <Button>Got it!</Button>\n </Popover.Content>\n </Popover>\n)"
|
|
4884
|
+
"id": "components-popover--default"
|
|
5170
4885
|
}
|
|
5171
4886
|
],
|
|
5172
4887
|
"importPath": "@primer/react",
|
|
@@ -5246,20 +4961,19 @@
|
|
|
5246
4961
|
"a11yReviewed": false,
|
|
5247
4962
|
"stories": [
|
|
5248
4963
|
{
|
|
5249
|
-
"id": "
|
|
5250
|
-
"code": "() => (\n <>\n Root position\n <div className={clsx(classes.PortalContainer, classes.OuterContainer)}>\n Outer container\n <div className={clsx(classes.PortalContainer, classes.InnerContainer)}>\n Inner container\n <Portal>\n Portaled content rendered at <code><BaseStyles></code> root.\n </Portal>\n </div>\n </div>\n </>\n)"
|
|
4964
|
+
"id": "components-portal--default"
|
|
5251
4965
|
},
|
|
5252
4966
|
{
|
|
5253
|
-
"id": "behaviors-portal
|
|
5254
|
-
"code": "() => (\n <>\n Root position\n <div\n className={clsx(classes.PortalContainer, classes.OuterContainer)}\n id=\"__primerPortalRoot__\"\n >\n Outer container\n <div className={clsx(classes.PortalContainer, classes.InnerContainer)}>\n Inner container\n <Portal>Portaled content rendered at the outer container.</Portal>\n </div>\n </div>\n </>\n)"
|
|
4967
|
+
"id": "behaviors-portal--default"
|
|
5255
4968
|
},
|
|
5256
4969
|
{
|
|
5257
|
-
"id": "behaviors-portal-features--custom-portal-root-by-
|
|
5258
|
-
"code": "() => {\n const outerContainerRef = React.useRef<HTMLDivElement>(null)\n const [mounted, setMounted] = React.useState(false)\n React.useEffect(() => {\n if (outerContainerRef.current instanceof HTMLElement) {\n registerPortalRoot(outerContainerRef.current)\n setMounted(true)\n }\n }, [])\n return (\n <>\n Root position\n <div\n className={clsx(classes.PortalContainer, classes.OuterContainer)}\n ref={outerContainerRef}\n >\n {mounted ? (\n <>\n Outer container\n <div\n className={clsx(classes.PortalContainer, classes.InnerContainer)}\n >\n Inner container\n <Portal>Portaled content rendered at the outer container.</Portal>\n </div>\n </>\n ) : null}\n </div>\n </>\n )\n}"
|
|
4970
|
+
"id": "behaviors-portal-features--custom-portal-root-by-id"
|
|
5259
4971
|
},
|
|
5260
4972
|
{
|
|
5261
|
-
"id": "behaviors-portal-features--
|
|
5262
|
-
|
|
4973
|
+
"id": "behaviors-portal-features--custom-portal-root-by-registration"
|
|
4974
|
+
},
|
|
4975
|
+
{
|
|
4976
|
+
"id": "behaviors-portal-features--multiple-portal-roots"
|
|
5263
4977
|
}
|
|
5264
4978
|
],
|
|
5265
4979
|
"importPath": "@primer/react",
|
|
@@ -5287,44 +5001,34 @@
|
|
|
5287
5001
|
"a11yReviewed": "2025-01-08",
|
|
5288
5002
|
"stories": [
|
|
5289
5003
|
{
|
|
5290
|
-
"id": "components-progressbar--default"
|
|
5291
|
-
"code": "() => <ProgressBar aria-label=\"Upload test.png\" />"
|
|
5004
|
+
"id": "components-progressbar--default"
|
|
5292
5005
|
},
|
|
5293
5006
|
{
|
|
5294
|
-
"id": "components-progressbar-features--progress-zero"
|
|
5295
|
-
"code": "() => <ProgressBar progress=\"0\" aria-label=\"Upload test.png\" />"
|
|
5007
|
+
"id": "components-progressbar-features--progress-zero"
|
|
5296
5008
|
},
|
|
5297
5009
|
{
|
|
5298
|
-
"id": "components-progressbar-features--progress-half"
|
|
5299
|
-
"code": "() => <ProgressBar progress=\"50\" aria-label=\"Upload test.png\" />"
|
|
5010
|
+
"id": "components-progressbar-features--progress-half"
|
|
5300
5011
|
},
|
|
5301
5012
|
{
|
|
5302
|
-
"id": "components-progressbar-features--progress-done"
|
|
5303
|
-
"code": "() => <ProgressBar progress=\"100\" aria-label=\"Upload test.png\" />"
|
|
5013
|
+
"id": "components-progressbar-features--progress-done"
|
|
5304
5014
|
},
|
|
5305
5015
|
{
|
|
5306
|
-
"id": "components-progressbar-features--size-small"
|
|
5307
|
-
"code": "() => (\n <ProgressBar progress=\"66\" barSize=\"small\" aria-label=\"Upload test.png\" />\n)"
|
|
5016
|
+
"id": "components-progressbar-features--size-small"
|
|
5308
5017
|
},
|
|
5309
5018
|
{
|
|
5310
|
-
"id": "components-progressbar-features--size-large"
|
|
5311
|
-
"code": "() => (\n <ProgressBar progress=\"66\" barSize=\"large\" aria-label=\"Upload test.png\" />\n)"
|
|
5019
|
+
"id": "components-progressbar-features--size-large"
|
|
5312
5020
|
},
|
|
5313
5021
|
{
|
|
5314
|
-
"id": "components-progressbar-features--inline"
|
|
5315
|
-
"code": "() => (\n <ProgressBar\n inline\n progress=\"66\"\n style={{\n width: '100px',\n }}\n aria-label=\"Upload test.png\"\n />\n)"
|
|
5022
|
+
"id": "components-progressbar-features--inline"
|
|
5316
5023
|
},
|
|
5317
5024
|
{
|
|
5318
|
-
"id": "components-progressbar-features--all-colors"
|
|
5319
|
-
"code": "() => (\n <ProgressBar aria-label=\"Upload test.png\">\n <ProgressBar.Item\n progress={20}\n aria-label=\"Photo Usage\"\n bg=\"accent.emphasis\"\n />\n <ProgressBar.Item\n progress={15}\n aria-label=\"Application Usage\"\n bg=\"danger.emphasis\"\n />\n <ProgressBar.Item\n progress={12}\n aria-label=\"Music Usage\"\n bg=\"severe.emphasis\"\n />\n <ProgressBar.Item\n progress={11}\n aria-label=\"Music Usage\"\n bg=\"done.emphasis\"\n />\n <ProgressBar.Item\n progress={8}\n aria-label=\"Music Usage\"\n bg=\"sponsors.emphasis\"\n />\n <ProgressBar.Item\n progress={7}\n aria-label=\"Music Usage\"\n bg=\"neutral.emphasis\"\n />\n <ProgressBar.Item\n progress={7}\n aria-label=\"Music Usage\"\n bg=\"attention.emphasis\"\n />\n </ProgressBar>\n)"
|
|
5025
|
+
"id": "components-progressbar-features--all-colors"
|
|
5320
5026
|
},
|
|
5321
5027
|
{
|
|
5322
|
-
"id": "components-progressbar-features--multiple-items"
|
|
5323
|
-
"code": "() => (\n <ProgressBar>\n <ProgressBar.Item\n progress={33}\n aria-label=\"Photo Usage\"\n bg=\"accent.emphasis\"\n />\n <ProgressBar.Item\n progress={23}\n aria-label=\"Application Usage\"\n bg={'danger.emphasis'}\n />\n <ProgressBar.Item\n progress={14}\n aria-label=\"Music Usage\"\n bg={'severe.emphasis'}\n />\n </ProgressBar>\n)"
|
|
5028
|
+
"id": "components-progressbar-features--multiple-items"
|
|
5324
5029
|
},
|
|
5325
5030
|
{
|
|
5326
|
-
"id": "components-progressbar-features--animated"
|
|
5327
|
-
"code": "() => <ProgressBar progress=\"50\" aria-label=\"Upload test.png\" animated />"
|
|
5031
|
+
"id": "components-progressbar-features--animated"
|
|
5328
5032
|
}
|
|
5329
5033
|
],
|
|
5330
5034
|
"importPath": "@primer/react",
|
|
@@ -5393,20 +5097,16 @@
|
|
|
5393
5097
|
"a11yReviewed": "2025-01-08",
|
|
5394
5098
|
"stories": [
|
|
5395
5099
|
{
|
|
5396
|
-
"id": "components-radio--default"
|
|
5397
|
-
"code": "() => (\n <form>\n <FormControl>\n <Radio name=\"default-radio-name\" value=\"default\" />\n <FormControl.Label>Label</FormControl.Label>\n </FormControl>\n </form>\n)"
|
|
5100
|
+
"id": "components-radio--default"
|
|
5398
5101
|
},
|
|
5399
5102
|
{
|
|
5400
|
-
"id": "components-radio-features--with-leading-visual"
|
|
5401
|
-
"code": "() => {\n return (\n <form>\n <FormControl>\n <FormControl.LeadingVisual>\n <MarkGithubIcon />\n </FormControl.LeadingVisual>\n <Radio value=\"default\" name=\"default-radio-name\" />\n <FormControl.Label>Default label</FormControl.Label>\n </FormControl>\n <FormControl>\n <FormControl.LeadingVisual>\n <Avatar src={`https://github.com/lukasoppermann.png`} />\n </FormControl.LeadingVisual>\n <Radio value=\"default\" name=\"default-radio-name\" />\n <FormControl.Label>Default label</FormControl.Label>\n </FormControl>\n </form>\n )\n}"
|
|
5103
|
+
"id": "components-radio-features--with-leading-visual"
|
|
5402
5104
|
},
|
|
5403
5105
|
{
|
|
5404
|
-
"id": "components-radio-features--disabled"
|
|
5405
|
-
"code": "() => {\n return (\n <form>\n <FormControl disabled>\n <Radio value=\"default\" name=\"default-radio-name\" />\n <FormControl.Label>Default label</FormControl.Label>\n </FormControl>\n </form>\n )\n}"
|
|
5106
|
+
"id": "components-radio-features--disabled"
|
|
5406
5107
|
},
|
|
5407
5108
|
{
|
|
5408
|
-
"id": "components-radio-features--with-caption"
|
|
5409
|
-
"code": "() => {\n return (\n <form>\n <FormControl>\n <Radio value=\"default\" name=\"default-radio-name\" />\n <FormControl.Label>Default label</FormControl.Label>\n <FormControl.Caption>This is a caption</FormControl.Caption>\n </FormControl>\n </form>\n )\n}"
|
|
5109
|
+
"id": "components-radio-features--with-caption"
|
|
5410
5110
|
}
|
|
5411
5111
|
],
|
|
5412
5112
|
"importPath": "@primer/react",
|
|
@@ -5463,28 +5163,22 @@
|
|
|
5463
5163
|
"a11yReviewed": "2025-01-08",
|
|
5464
5164
|
"stories": [
|
|
5465
5165
|
{
|
|
5466
|
-
"id": "components-radiogroup--default"
|
|
5467
|
-
"code": "() => (\n <RadioGroup name=\"defaultRadioGroup\">\n <RadioGroup.Label>Choices</RadioGroup.Label>\n <FormControl>\n <Radio value=\"one\" />\n <FormControl.Label>Choice one</FormControl.Label>\n </FormControl>\n <FormControl>\n <Radio value=\"two\" defaultChecked />\n <FormControl.Label>Choice two</FormControl.Label>\n </FormControl>\n <FormControl>\n <Radio value=\"three\" />\n <FormControl.Label>Choice three</FormControl.Label>\n </FormControl>\n </RadioGroup>\n)"
|
|
5166
|
+
"id": "components-radiogroup--default"
|
|
5468
5167
|
},
|
|
5469
5168
|
{
|
|
5470
|
-
"id": "components-radiogroup-features--visually-hidden-label"
|
|
5471
|
-
"code": "() => (\n <RadioGroup name=\"defaultRadioGroup\">\n <RadioGroup.Label visuallyHidden>Choices</RadioGroup.Label>\n <FormControl>\n <Radio value=\"one\" defaultChecked />\n <FormControl.Label>Choice one</FormControl.Label>\n </FormControl>\n <FormControl>\n <Radio value=\"two\" />\n <FormControl.Label>Choice two</FormControl.Label>\n </FormControl>\n <FormControl>\n <Radio value=\"three\" />\n <FormControl.Label>Choice three</FormControl.Label>\n </FormControl>\n </RadioGroup>\n)"
|
|
5169
|
+
"id": "components-radiogroup-features--visually-hidden-label"
|
|
5472
5170
|
},
|
|
5473
5171
|
{
|
|
5474
|
-
"id": "components-radiogroup-features--with-external-label"
|
|
5475
|
-
"code": "() => (\n <>\n <div id=\"choiceHeading\" className={classes.ExternalLabel}>\n External label\n </div>\n <RadioGroup aria-labelledby=\"choiceHeading\" name=\"defaultRadioGroup\">\n <FormControl>\n <Radio value=\"one\" />\n <FormControl.Label>Choice one</FormControl.Label>\n </FormControl>\n <FormControl>\n <Radio value=\"two\" />\n <FormControl.Label>Choice two</FormControl.Label>\n </FormControl>\n <FormControl>\n <Radio value=\"three\" />\n <FormControl.Label>Choice three</FormControl.Label>\n </FormControl>\n </RadioGroup>\n </>\n)"
|
|
5172
|
+
"id": "components-radiogroup-features--with-external-label"
|
|
5476
5173
|
},
|
|
5477
5174
|
{
|
|
5478
|
-
"id": "components-radiogroup-features--error"
|
|
5479
|
-
"code": "() => (\n <RadioGroup name=\"defaultRadioGroup\">\n <RadioGroup.Label>Choices</RadioGroup.Label>\n <FormControl>\n <Radio value=\"one\" defaultChecked />\n <FormControl.Label>Choice one</FormControl.Label>\n </FormControl>\n <FormControl>\n <Radio value=\"two\" />\n <FormControl.Label>Choice two</FormControl.Label>\n </FormControl>\n <FormControl>\n <Radio value=\"three\" />\n <FormControl.Label>Choice three</FormControl.Label>\n </FormControl>\n <RadioGroup.Validation variant=\"error\">\n Something went wrong\n </RadioGroup.Validation>\n </RadioGroup>\n)"
|
|
5175
|
+
"id": "components-radiogroup-features--error"
|
|
5480
5176
|
},
|
|
5481
5177
|
{
|
|
5482
|
-
"id": "components-radiogroup-features--success"
|
|
5483
|
-
"code": "() => (\n <RadioGroup name=\"defaultRadioGroup\">\n <RadioGroup.Label>Choices</RadioGroup.Label>\n <FormControl>\n <Radio value=\"one\" />\n <FormControl.Label>Choice one</FormControl.Label>\n </FormControl>\n <FormControl>\n <Radio value=\"two\" defaultChecked />\n <FormControl.Label>Choice two</FormControl.Label>\n </FormControl>\n <FormControl>\n <Radio value=\"three\" />\n <FormControl.Label>Choice three</FormControl.Label>\n </FormControl>\n <RadioGroup.Validation variant=\"success\">Great job!</RadioGroup.Validation>\n </RadioGroup>\n)"
|
|
5178
|
+
"id": "components-radiogroup-features--success"
|
|
5484
5179
|
},
|
|
5485
5180
|
{
|
|
5486
|
-
"id": "components-radiogroup-features--caption"
|
|
5487
|
-
"code": "() => (\n <RadioGroup name=\"defaultRadioGroup\">\n <RadioGroup.Label>Choices</RadioGroup.Label>\n <RadioGroup.Caption>Caption</RadioGroup.Caption>\n <FormControl>\n <Radio value=\"one\" />\n <FormControl.Label>Choice one</FormControl.Label>\n </FormControl>\n <FormControl>\n <Radio value=\"two\" defaultChecked />\n <FormControl.Label>Choice two</FormControl.Label>\n </FormControl>\n <FormControl>\n <Radio value=\"three\" />\n <FormControl.Label>Choice three</FormControl.Label>\n </FormControl>\n </RadioGroup>\n)"
|
|
5181
|
+
"id": "components-radiogroup-features--caption"
|
|
5488
5182
|
}
|
|
5489
5183
|
],
|
|
5490
5184
|
"importPath": "@primer/react",
|
|
@@ -5585,20 +5279,16 @@
|
|
|
5585
5279
|
"a11yReviewed": "2025-01-08",
|
|
5586
5280
|
"stories": [
|
|
5587
5281
|
{
|
|
5588
|
-
"id": "components-relativetime--default"
|
|
5589
|
-
"code": "() => <RelativeTime date={new Date('2020-01-01T00:00:00Z')} noTitle={true} />"
|
|
5282
|
+
"id": "components-relativetime--default"
|
|
5590
5283
|
},
|
|
5591
5284
|
{
|
|
5592
|
-
"id": "components-relativetime-features--micro-format"
|
|
5593
|
-
"code": "(args) => {\n const { date, ...rest } = args\n return (\n <RelativeTime\n noTitle={true}\n {...rest}\n date={new Date(date)}\n format=\"micro\"\n />\n )\n}"
|
|
5285
|
+
"id": "components-relativetime-features--micro-format"
|
|
5594
5286
|
},
|
|
5595
5287
|
{
|
|
5596
|
-
"id": "components-relativetime-features--recent-time"
|
|
5597
|
-
"code": "(args) => {\n const { ...rest } = args\n return <RelativeTime noTitle={true} {...rest} date={new Date()} />\n}"
|
|
5288
|
+
"id": "components-relativetime-features--recent-time"
|
|
5598
5289
|
},
|
|
5599
5290
|
{
|
|
5600
|
-
"id": "components-relativetime-features--count-down-timer"
|
|
5601
|
-
"code": "(args) => {\n const { ...rest } = args\n return <RelativeTime noTitle={true} {...rest} />\n}"
|
|
5291
|
+
"id": "components-relativetime-features--count-down-timer"
|
|
5602
5292
|
}
|
|
5603
5293
|
],
|
|
5604
5294
|
"importPath": "@primer/react",
|
|
@@ -5744,44 +5434,34 @@
|
|
|
5744
5434
|
"a11yReviewed": "2025-01-08",
|
|
5745
5435
|
"stories": [
|
|
5746
5436
|
{
|
|
5747
|
-
"id": "components-segmentedcontrol--default"
|
|
5748
|
-
"code": "() => (\n <SegmentedControl aria-label=\"File view\">\n <SegmentedControl.Button defaultSelected>Preview</SegmentedControl.Button>\n <SegmentedControl.Button>Raw</SegmentedControl.Button>\n <SegmentedControl.Button>Blame</SegmentedControl.Button>\n </SegmentedControl>\n)"
|
|
5437
|
+
"id": "components-segmentedcontrol--default"
|
|
5749
5438
|
},
|
|
5750
5439
|
{
|
|
5751
|
-
"id": "components-segmentedcontrol-features--with-icons"
|
|
5752
|
-
"code": "() => (\n <SegmentedControl aria-label=\"File view\">\n <SegmentedControl.Button\n defaultSelected\n aria-label={'Preview'}\n leadingVisual={EyeIcon}\n >\n Preview\n </SegmentedControl.Button>\n <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n Raw\n </SegmentedControl.Button>\n <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n Blame\n </SegmentedControl.Button>\n </SegmentedControl>\n)"
|
|
5440
|
+
"id": "components-segmentedcontrol-features--with-icons"
|
|
5753
5441
|
},
|
|
5754
5442
|
{
|
|
5755
|
-
"id": "components-segmentedcontrol-features--controlled"
|
|
5756
|
-
"code": "() => {\n const [selectedIndex, setSelectedIndex] = useState(0)\n const handleChange = (i: number) => {\n setSelectedIndex(i)\n }\n return (\n <SegmentedControl aria-label=\"File view\" onChange={handleChange}>\n <SegmentedControl.Button selected={selectedIndex === 0}>\n Preview\n </SegmentedControl.Button>\n <SegmentedControl.Button selected={selectedIndex === 1}>\n Raw\n </SegmentedControl.Button>\n <SegmentedControl.Button selected={selectedIndex === 2}>\n Blame\n </SegmentedControl.Button>\n </SegmentedControl>\n )\n}"
|
|
5443
|
+
"id": "components-segmentedcontrol-features--controlled"
|
|
5757
5444
|
},
|
|
5758
5445
|
{
|
|
5759
|
-
"id": "components-segmentedcontrol-features--variant-narrow-hide-labels"
|
|
5760
|
-
"code": "() => (\n <SegmentedControl\n aria-label=\"File view\"\n variant={{\n narrow: 'hideLabels',\n regular: 'default',\n wide: 'default',\n }}\n >\n <SegmentedControl.Button\n defaultSelected\n aria-label={'Preview'}\n leadingVisual={EyeIcon}\n >\n Preview\n </SegmentedControl.Button>\n <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n Raw\n </SegmentedControl.Button>\n <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n Blame\n </SegmentedControl.Button>\n </SegmentedControl>\n)"
|
|
5446
|
+
"id": "components-segmentedcontrol-features--variant-narrow-hide-labels"
|
|
5761
5447
|
},
|
|
5762
5448
|
{
|
|
5763
|
-
"id": "components-segmentedcontrol-features--variant-narrow-action-menu"
|
|
5764
|
-
"code": "() => (\n <SegmentedControl\n aria-label=\"File view\"\n variant={{\n narrow: 'dropdown',\n regular: 'default',\n wide: 'default',\n }}\n >\n <SegmentedControl.Button\n defaultSelected\n aria-label={'Preview'}\n leadingVisual={EyeIcon}\n >\n Preview\n </SegmentedControl.Button>\n <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n Raw\n </SegmentedControl.Button>\n <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n Blame\n </SegmentedControl.Button>\n </SegmentedControl>\n)"
|
|
5449
|
+
"id": "components-segmentedcontrol-features--variant-narrow-action-menu"
|
|
5765
5450
|
},
|
|
5766
5451
|
{
|
|
5767
|
-
"id": "components-segmentedcontrol-features--fullwidth-narrow"
|
|
5768
|
-
"code": "() => (\n <SegmentedControl\n aria-label=\"File view\"\n fullWidth={{\n narrow: true,\n regular: false,\n wide: false,\n }}\n >\n <SegmentedControl.Button\n defaultSelected\n aria-label={'Preview'}\n leadingVisual={EyeIcon}\n >\n Preview\n </SegmentedControl.Button>\n <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n Raw\n </SegmentedControl.Button>\n <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n Blame\n </SegmentedControl.Button>\n </SegmentedControl>\n)"
|
|
5452
|
+
"id": "components-segmentedcontrol-features--fullwidth-narrow"
|
|
5769
5453
|
},
|
|
5770
5454
|
{
|
|
5771
|
-
"id": "components-segmentedcontrol-features--fullwidth-regular"
|
|
5772
|
-
"code": "() => (\n <SegmentedControl\n aria-label=\"File view\"\n fullWidth={{\n narrow: false,\n regular: true,\n wide: false,\n }}\n >\n <SegmentedControl.Button\n defaultSelected\n aria-label={'Preview'}\n leadingVisual={EyeIcon}\n >\n Preview\n </SegmentedControl.Button>\n <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n Raw\n </SegmentedControl.Button>\n <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n Blame\n </SegmentedControl.Button>\n </SegmentedControl>\n)"
|
|
5455
|
+
"id": "components-segmentedcontrol-features--fullwidth-regular"
|
|
5773
5456
|
},
|
|
5774
5457
|
{
|
|
5775
|
-
"id": "components-segmentedcontrol-features--fullwidth-all"
|
|
5776
|
-
"code": "() => (\n <SegmentedControl aria-label=\"File view\" fullWidth>\n <SegmentedControl.Button\n defaultSelected\n aria-label={'Preview'}\n leadingVisual={EyeIcon}\n >\n Preview\n </SegmentedControl.Button>\n <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n Raw\n </SegmentedControl.Button>\n <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n Blame\n </SegmentedControl.Button>\n </SegmentedControl>\n)"
|
|
5458
|
+
"id": "components-segmentedcontrol-features--fullwidth-all"
|
|
5777
5459
|
},
|
|
5778
5460
|
{
|
|
5779
|
-
"id": "components-segmentedcontrol-features--icon-only"
|
|
5780
|
-
"code": "() => (\n <SegmentedControl aria-label=\"File view\">\n <SegmentedControl.IconButton\n defaultSelected\n aria-label={'Preview'}\n icon={EyeIcon}\n />\n <SegmentedControl.IconButton aria-label={'Raw'} icon={FileCodeIcon} />\n <SegmentedControl.IconButton aria-label={'Blame'} icon={PeopleIcon} />\n </SegmentedControl>\n)"
|
|
5461
|
+
"id": "components-segmentedcontrol-features--icon-only"
|
|
5781
5462
|
},
|
|
5782
5463
|
{
|
|
5783
|
-
"id": "components-segmentedcontrol-features--associated-with-a-label-and-caption"
|
|
5784
|
-
"code": "() => (\n <div className={classes.LabelAndCaptionContainer}>\n <div className={classes.LabelAndCaption}>\n <Text\n className={classes.TextLargeBold}\n id=\"scLabel-vert\"\n style={{\n display: 'block',\n }}\n >\n File view\n </Text>\n <Text\n className={classes.TextMediumSubtle}\n id=\"scCaption-vert\"\n style={{\n display: 'block',\n }}\n >\n Change the way the file is viewed\n </Text>\n </div>\n <SegmentedControl\n aria-labelledby=\"scLabel-vert\"\n aria-describedby=\"scCaption-vert\"\n >\n <SegmentedControl.Button defaultSelected>Preview</SegmentedControl.Button>\n <SegmentedControl.Button>Raw</SegmentedControl.Button>\n <SegmentedControl.Button>Blame</SegmentedControl.Button>\n </SegmentedControl>\n </div>\n)"
|
|
5464
|
+
"id": "components-segmentedcontrol-features--associated-with-a-label-and-caption"
|
|
5785
5465
|
}
|
|
5786
5466
|
],
|
|
5787
5467
|
"importPath": "@primer/react",
|
|
@@ -5937,52 +5617,40 @@
|
|
|
5937
5617
|
"a11yReviewed": "2025-01-08",
|
|
5938
5618
|
"stories": [
|
|
5939
5619
|
{
|
|
5940
|
-
"id": "components-select--default"
|
|
5941
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Select>\n <Select.Option value=\"one\">Choice one</Select.Option>\n <Select.Option value=\"two\">Choice two</Select.Option>\n <Select.Option value=\"three\">Choice three</Select.Option>\n <Select.Option value=\"four\">Choice four</Select.Option>\n <Select.Option value=\"five\">Choice five</Select.Option>\n <Select.Option value=\"six\">Choice six</Select.Option>\n </Select>\n </FormControl>\n </form>\n)"
|
|
5620
|
+
"id": "components-select--default"
|
|
5942
5621
|
},
|
|
5943
5622
|
{
|
|
5944
|
-
"id": "components-select-features--with-option-groups"
|
|
5945
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Select>\n <Select.OptGroup label=\"Group one\">\n <Select.Option value=\"one\">Choice one</Select.Option>\n <Select.Option value=\"two\">Choice two</Select.Option>\n <Select.Option value=\"three\">Choice three</Select.Option>\n <Select.Option value=\"four\">Choice four</Select.Option>\n </Select.OptGroup>\n <Select.OptGroup disabled label=\"Group two\">\n <Select.Option value=\"five\">Choice five</Select.Option>\n <Select.Option value=\"six\">Choice six</Select.Option>\n </Select.OptGroup>\n </Select>\n </FormControl>\n </form>\n)"
|
|
5623
|
+
"id": "components-select-features--with-option-groups"
|
|
5946
5624
|
},
|
|
5947
5625
|
{
|
|
5948
|
-
"id": "components-select-features--disabled"
|
|
5949
|
-
"code": "() => (\n <form>\n <FormControl disabled>\n <FormControl.Label>Default label</FormControl.Label>\n <Select>\n <Select.Option value=\"one\">Choice one</Select.Option>\n <Select.Option value=\"two\">Choice two</Select.Option>\n <Select.Option value=\"three\">Choice three</Select.Option>\n <Select.Option value=\"four\">Choice four</Select.Option>\n <Select.Option value=\"five\">Choice five</Select.Option>\n <Select.Option value=\"six\">Choice six</Select.Option>\n </Select>\n </FormControl>\n </form>\n)"
|
|
5626
|
+
"id": "components-select-features--disabled"
|
|
5950
5627
|
},
|
|
5951
5628
|
{
|
|
5952
|
-
"id": "components-select-features--with-caption"
|
|
5953
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <FormControl.Caption>This is a caption</FormControl.Caption>\n <Select>\n <Select.Option value=\"one\">Choice one</Select.Option>\n <Select.Option value=\"two\">Choice two</Select.Option>\n <Select.Option value=\"three\">Choice three</Select.Option>\n <Select.Option value=\"four\">Choice four</Select.Option>\n <Select.Option value=\"five\">Choice five</Select.Option>\n <Select.Option value=\"six\">Choice six</Select.Option>\n </Select>\n </FormControl>\n </form>\n)"
|
|
5629
|
+
"id": "components-select-features--with-caption"
|
|
5954
5630
|
},
|
|
5955
5631
|
{
|
|
5956
|
-
"id": "components-select-features--visually-hidden-label"
|
|
5957
|
-
"code": "() => (\n <form>\n <Heading as=\"h2\" variant=\"small\">\n Primer form title\n </Heading>\n <FormControl>\n <FormControl.Label visuallyHidden>Primer form label</FormControl.Label>\n <Select>\n <Select.Option value=\"one\">Choice one</Select.Option>\n <Select.Option value=\"two\">Choice two</Select.Option>\n <Select.Option value=\"three\">Choice three</Select.Option>\n <Select.Option value=\"four\">Choice four</Select.Option>\n <Select.Option value=\"five\">Choice five</Select.Option>\n <Select.Option value=\"six\">Choice six</Select.Option>\n </Select>\n <FormControl.Caption>\n Label is visually hidden; the title describes the purpose visually\n </FormControl.Caption>\n </FormControl>\n </form>\n)"
|
|
5632
|
+
"id": "components-select-features--visually-hidden-label"
|
|
5958
5633
|
},
|
|
5959
5634
|
{
|
|
5960
|
-
"id": "components-select-features--error"
|
|
5961
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Select>\n <Select.Option value=\"one\">Choice one</Select.Option>\n <Select.Option value=\"two\">Choice two</Select.Option>\n <Select.Option value=\"three\">Choice three</Select.Option>\n <Select.Option value=\"four\">Choice four</Select.Option>\n <Select.Option value=\"five\">Choice five</Select.Option>\n <Select.Option value=\"six\">Choice six</Select.Option>\n </Select>\n <FormControl.Validation variant=\"error\">\n Something went wrong\n </FormControl.Validation>\n </FormControl>\n </form>\n)"
|
|
5635
|
+
"id": "components-select-features--error"
|
|
5962
5636
|
},
|
|
5963
5637
|
{
|
|
5964
|
-
"id": "components-select-features--success"
|
|
5965
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Select>\n <Select.Option value=\"one\">Choice one</Select.Option>\n <Select.Option value=\"two\">Choice two</Select.Option>\n <Select.Option value=\"three\">Choice three</Select.Option>\n <Select.Option value=\"four\">Choice four</Select.Option>\n <Select.Option value=\"five\">Choice five</Select.Option>\n <Select.Option value=\"six\">Choice six</Select.Option>\n </Select>\n <FormControl.Validation variant=\"success\">Success</FormControl.Validation>\n </FormControl>\n </form>\n)"
|
|
5638
|
+
"id": "components-select-features--success"
|
|
5966
5639
|
},
|
|
5967
5640
|
{
|
|
5968
|
-
"id": "components-select-features--block"
|
|
5969
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Select block>\n <Select.Option value=\"one\">Choice one</Select.Option>\n <Select.Option value=\"two\">Choice two</Select.Option>\n <Select.Option value=\"three\">Choice three</Select.Option>\n <Select.Option value=\"four\">Choice four</Select.Option>\n <Select.Option value=\"five\">Choice five</Select.Option>\n <Select.Option value=\"six\">Choice six</Select.Option>\n </Select>\n </FormControl>\n </form>\n)"
|
|
5641
|
+
"id": "components-select-features--block"
|
|
5970
5642
|
},
|
|
5971
5643
|
{
|
|
5972
|
-
"id": "components-select-features--small"
|
|
5973
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Select size=\"small\">\n <Select.Option value=\"one\">Choice one</Select.Option>\n <Select.Option value=\"two\">Choice two</Select.Option>\n <Select.Option value=\"three\">Choice three</Select.Option>\n <Select.Option value=\"four\">Choice four</Select.Option>\n <Select.Option value=\"five\">Choice five</Select.Option>\n <Select.Option value=\"six\">Choice six</Select.Option>\n </Select>\n </FormControl>\n </form>\n)"
|
|
5644
|
+
"id": "components-select-features--small"
|
|
5974
5645
|
},
|
|
5975
5646
|
{
|
|
5976
|
-
"id": "components-select-features--large"
|
|
5977
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Select size=\"large\">\n <Select.Option value=\"one\">Choice one</Select.Option>\n <Select.Option value=\"two\">Choice two</Select.Option>\n <Select.Option value=\"three\">Choice three</Select.Option>\n <Select.Option value=\"four\">Choice four</Select.Option>\n <Select.Option value=\"five\">Choice five</Select.Option>\n <Select.Option value=\"six\">Choice six</Select.Option>\n </Select>\n </FormControl>\n </form>\n)"
|
|
5647
|
+
"id": "components-select-features--large"
|
|
5978
5648
|
},
|
|
5979
5649
|
{
|
|
5980
|
-
"id": "components-select-features--with-custom-styling"
|
|
5981
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Select className={classes.CustomSelect}>\n <Select.Option value=\"one\">Choice one</Select.Option>\n <Select.Option value=\"two\">Choice two</Select.Option>\n <Select.Option value=\"three\">Choice three</Select.Option>\n <Select.Option value=\"four\">Choice four</Select.Option>\n <Select.Option value=\"five\">Choice five</Select.Option>\n <Select.Option value=\"six\">Choice six</Select.Option>\n </Select>\n </FormControl>\n </form>\n)"
|
|
5650
|
+
"id": "components-select-features--with-custom-styling"
|
|
5982
5651
|
},
|
|
5983
5652
|
{
|
|
5984
|
-
"id": "components-select-features--with-placeholder-option"
|
|
5985
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Select placeholder=\"No choice selected\">\n <Select.Option value=\"one\">Choice one</Select.Option>\n <Select.Option value=\"two\">Choice two</Select.Option>\n <Select.Option value=\"three\">Choice three</Select.Option>\n <Select.Option value=\"four\">Choice four</Select.Option>\n <Select.Option value=\"five\">Choice five</Select.Option>\n <Select.Option value=\"six\">Choice six</Select.Option>\n </Select>\n </FormControl>\n </form>\n)"
|
|
5653
|
+
"id": "components-select-features--with-placeholder-option"
|
|
5986
5654
|
}
|
|
5987
5655
|
],
|
|
5988
5656
|
"importPath": "@primer/react",
|
|
@@ -6029,40 +5697,31 @@
|
|
|
6029
5697
|
"a11yReviewed": "2025-01-08",
|
|
6030
5698
|
"stories": [
|
|
6031
5699
|
{
|
|
6032
|
-
"id": "components-selectpanel--default"
|
|
6033
|
-
"code": "() => {\n const [selected, setSelected] = useState<ItemInput[]>(items.slice(1, 3))\n const [filter, setFilter] = useState('')\n const filteredItems = items.filter((item) =>\n item.text?.toLowerCase().startsWith(filter.toLowerCase()),\n )\n const [open, setOpen] = useState(false)\n return (\n <FormControl>\n <FormControl.Label>Labels</FormControl.Label>\n <SelectPanel\n title=\"Select labels\"\n placeholder=\"Select labels\" // button text when no items are selected\n subtitle=\"Use labels to organize issues and pull requests\"\n renderAnchor={({ children, ...anchorProps }) => (\n <Button\n trailingAction={TriangleDownIcon}\n {...anchorProps}\n aria-haspopup=\"dialog\"\n >\n {children}\n </Button>\n )}\n open={open}\n onOpenChange={setOpen}\n items={filteredItems}\n selected={selected}\n onSelectedChange={setSelected}\n onFilterChange={setFilter}\n width=\"medium\"\n message={\n filteredItems.length === 0\n ? {\n variant: 'empty',\n title: 'No items available',\n body: '',\n }\n : undefined\n }\n />\n </FormControl>\n )\n}"
|
|
5700
|
+
"id": "components-selectpanel--default"
|
|
6034
5701
|
},
|
|
6035
5702
|
{
|
|
6036
|
-
"id": "components-selectpanel-features--with-item-dividers"
|
|
6037
|
-
"code": "() => {\n const [selected, setSelected] = useState<ItemInput[]>(items.slice(1, 3))\n const [filter, setFilter] = useState('')\n const filteredItems = items.filter((item) =>\n item.text.toLowerCase().startsWith(filter.toLowerCase()),\n )\n const [open, setOpen] = useState(false)\n return (\n <FormControl>\n <FormControl.Label>Labels</FormControl.Label>\n <SelectPanel\n title=\"Select labels\"\n placeholder=\"Select labels\" // button text when no items are selected\n subtitle=\"Use labels to organize issues and pull requests\"\n renderAnchor={({ children, ...anchorProps }) => (\n <Button\n trailingAction={TriangleDownIcon}\n {...anchorProps}\n aria-haspopup=\"dialog\"\n >\n {children}\n </Button>\n )}\n open={open}\n onOpenChange={setOpen}\n items={filteredItems}\n selected={selected}\n onSelectedChange={setSelected}\n onFilterChange={setFilter}\n showItemDividers={true}\n width=\"medium\"\n message={\n filteredItems.length === 0 ? NoResultsMessage(filter) : undefined\n }\n />\n </FormControl>\n )\n}"
|
|
5703
|
+
"id": "components-selectpanel-features--with-item-dividers"
|
|
6038
5704
|
},
|
|
6039
5705
|
{
|
|
6040
|
-
"id": "components-selectpanel-features--with-placeholder-for-search-input"
|
|
6041
|
-
"code": "() => {\n const [selected, setSelected] = useState<ItemInput[]>(items.slice(1, 3))\n const [filter, setFilter] = useState('')\n const filteredItems = items.filter((item) =>\n item.text.toLowerCase().startsWith(filter.toLowerCase()),\n )\n const [open, setOpen] = useState(false)\n return (\n <FormControl>\n <FormControl.Label>Labels</FormControl.Label>\n <SelectPanel\n title=\"Select labels\"\n placeholder=\"Select labels\" // button text when no items are selected\n subtitle=\"Use labels to organize issues and pull requests\"\n renderAnchor={({ children, ...anchorProps }) => (\n <Button\n trailingAction={TriangleDownIcon}\n {...anchorProps}\n aria-haspopup=\"dialog\"\n >\n {children}\n </Button>\n )}\n placeholderText=\"Filter labels\"\n open={open}\n onOpenChange={setOpen}\n items={filteredItems}\n selected={selected}\n onSelectedChange={setSelected}\n onFilterChange={setFilter}\n width=\"medium\"\n message={\n filteredItems.length === 0 ? NoResultsMessage(filter) : undefined\n }\n />\n </FormControl>\n )\n}"
|
|
5706
|
+
"id": "components-selectpanel-features--with-placeholder-for-search-input"
|
|
6042
5707
|
},
|
|
6043
5708
|
{
|
|
6044
|
-
"id": "components-selectpanel-features--single-select"
|
|
6045
|
-
"code": "() => {\n const [selected, setSelected] = useState<ItemInput | undefined>(items[0])\n const [filter, setFilter] = useState('')\n const filteredItems = items.filter((item) =>\n item.text.toLowerCase().startsWith(filter.toLowerCase()),\n )\n const [open, setOpen] = useState(false)\n return (\n <FormControl>\n <FormControl.Label>Label</FormControl.Label>\n <SelectPanel\n renderAnchor={({ children, ...anchorProps }) => (\n <Button trailingAction={TriangleDownIcon} {...anchorProps}>\n {children ?? 'Select Labels'}\n </Button>\n )}\n placeholder=\"Select labels\" // button text when no items are selected\n open={open}\n onOpenChange={setOpen}\n items={filteredItems}\n selected={selected}\n onSelectedChange={setSelected}\n onFilterChange={setFilter}\n width=\"medium\"\n message={\n filteredItems.length === 0 ? NoResultsMessage(filter) : undefined\n }\n />\n </FormControl>\n )\n}"
|
|
5709
|
+
"id": "components-selectpanel-features--single-select"
|
|
6046
5710
|
},
|
|
6047
5711
|
{
|
|
6048
|
-
"id": "components-selectpanel-features--multi-select"
|
|
6049
|
-
"code": "() => {\n const [selected, setSelected] = useState<ItemInput[]>(items.slice(1, 3))\n const [filter, setFilter] = useState('')\n const filteredItems = items.filter((item) =>\n item.text.toLowerCase().startsWith(filter.toLowerCase()),\n )\n const [open, setOpen] = useState(false)\n return (\n <FormControl>\n <FormControl.Label>Labels</FormControl.Label>\n <SelectPanel\n title=\"Select labels\"\n placeholder=\"Select labels\"\n subtitle=\"Use labels to organize issues and pull requests\"\n renderAnchor={({ children, ...anchorProps }) => (\n <Button\n trailingAction={TriangleDownIcon}\n {...anchorProps}\n aria-haspopup=\"dialog\"\n >\n {children}\n </Button>\n )}\n open={open}\n onOpenChange={setOpen}\n items={filteredItems}\n selected={selected}\n onSelectedChange={setSelected}\n onFilterChange={setFilter}\n width=\"medium\"\n message={\n filteredItems.length === 0 ? NoResultsMessage(filter) : undefined\n }\n />\n </FormControl>\n )\n}"
|
|
5712
|
+
"id": "components-selectpanel-features--multi-select"
|
|
6050
5713
|
},
|
|
6051
5714
|
{
|
|
6052
|
-
"id": "components-selectpanel-features--with-external-anchor"
|
|
6053
|
-
"code": "() => {\n const [selected, setSelected] = useState<ItemInput[]>(items.slice(1, 3))\n const [filter, setFilter] = useState('')\n const filteredItems = items.filter((item) =>\n item.text.toLowerCase().startsWith(filter.toLowerCase()),\n )\n const [open, setOpen] = useState(false)\n const buttonRef = useRef<HTMLButtonElement>(null)\n return (\n <FormControl>\n <FormControl.Label>Labels</FormControl.Label>\n <Button\n trailingAction={TriangleDownIcon}\n ref={buttonRef}\n onClick={() => setOpen(!open)}\n >\n {selected.map((selectedItem) => selectedItem.text).join(', ') ||\n 'Select labels'}\n </Button>\n <SelectPanel\n renderAnchor={null}\n anchorRef={buttonRef}\n open={open}\n onOpenChange={setOpen}\n items={filteredItems}\n selected={filteredItems}\n onSelectedChange={setSelected}\n onFilterChange={setFilter}\n width=\"medium\"\n message={\n filteredItems.length === 0 ? NoResultsMessage(filter) : undefined\n }\n />\n </FormControl>\n )\n}"
|
|
5715
|
+
"id": "components-selectpanel-features--with-external-anchor"
|
|
6054
5716
|
},
|
|
6055
5717
|
{
|
|
6056
|
-
"id": "components-selectpanel-features--with-secondary-action-button"
|
|
6057
|
-
"code": "() => {\n const [selected, setSelected] = useState<ItemInput[]>(items.slice(1, 3))\n const [filter, setFilter] = useState('')\n const filteredItems = items.filter((item) =>\n item.text.toLowerCase().startsWith(filter.toLowerCase()),\n )\n const [open, setOpen] = useState(false)\n return (\n <FormControl>\n <FormControl.Label>Labels</FormControl.Label>\n <SelectPanel\n renderAnchor={({ children, ...anchorProps }) => (\n <Button trailingAction={TriangleDownIcon} {...anchorProps}>\n {children}\n </Button>\n )}\n placeholder=\"Select labels\" // button text when no items are selected\n open={open}\n onOpenChange={setOpen}\n items={filteredItems}\n selected={selected}\n onSelectedChange={setSelected}\n onFilterChange={setFilter}\n overlayProps={{\n width: 'small',\n height: 'medium',\n }}\n secondaryAction={\n <SelectPanel.SecondaryActionButton>\n Edit labels\n </SelectPanel.SecondaryActionButton>\n }\n width=\"medium\"\n message={\n filteredItems.length === 0 ? NoResultsMessage(filter) : undefined\n }\n />\n </FormControl>\n )\n}"
|
|
5718
|
+
"id": "components-selectpanel-features--with-secondary-action-button"
|
|
6058
5719
|
},
|
|
6059
5720
|
{
|
|
6060
|
-
"id": "components-selectpanel-features--with-secondary-action-link"
|
|
6061
|
-
"code": "() => {\n const [selected, setSelected] = useState<ItemInput[]>(items.slice(1, 3))\n const [filter, setFilter] = useState('')\n const filteredItems = items.filter((item) =>\n item.text.toLowerCase().startsWith(filter.toLowerCase()),\n )\n const [open, setOpen] = useState(false)\n return (\n <FormControl>\n <FormControl.Label>Labels</FormControl.Label>\n <SelectPanel\n renderAnchor={({ children, ...anchorProps }) => (\n <Button trailingAction={TriangleDownIcon} {...anchorProps}>\n {children}\n </Button>\n )}\n placeholder=\"Select labels\" // button text when no items are selected\n open={open}\n onOpenChange={setOpen}\n items={filteredItems}\n selected={selected}\n onSelectedChange={setSelected}\n onFilterChange={setFilter}\n overlayProps={{\n width: 'small',\n height: 'medium',\n }}\n secondaryAction={\n <SelectPanel.SecondaryActionLink href=\"#\">\n Edit labels\n </SelectPanel.SecondaryActionLink>\n }\n width=\"medium\"\n message={\n filteredItems.length === 0 ? NoResultsMessage(filter) : undefined\n }\n />\n </FormControl>\n )\n}"
|
|
5721
|
+
"id": "components-selectpanel-features--with-secondary-action-link"
|
|
6062
5722
|
},
|
|
6063
5723
|
{
|
|
6064
|
-
"id": "components-selectpanel-features--with-groups"
|
|
6065
|
-
"code": "() => {\n const [selected, setSelected] = useState<ItemInput[]>([])\n const [filter, setFilter] = useState('')\n const filteredItems = listOfItems.filter((item) =>\n item.text?.toLowerCase().startsWith(filter.toLowerCase()),\n )\n const [open, setOpen] = useState(false)\n return (\n <FormControl>\n <FormControl.Label>Options</FormControl.Label>\n <SelectPanel\n title=\"Attach files and symbols\"\n subtitle=\"Choose which files and symbols you want to chat about. Use fewer references for more accurate responses.\"\n renderAnchor={({ children, ...anchorProps }) => (\n <Button trailingAction={TriangleDownIcon} {...anchorProps}>\n {children}\n </Button>\n )}\n placeholder=\"Select options\" // button text when no items are selected\n groupMetadata={groupMetadata}\n open={open}\n onOpenChange={setOpen}\n items={filteredItems}\n selected={selected}\n onSelectedChange={setSelected}\n onFilterChange={setFilter}\n overlayProps={{\n width: 'large',\n height: 'xlarge',\n }}\n width=\"medium\"\n message={\n filteredItems.length === 0 ? NoResultsMessage(filter) : undefined\n }\n />\n </FormControl>\n )\n}"
|
|
5724
|
+
"id": "components-selectpanel-features--with-groups"
|
|
6066
5725
|
}
|
|
6067
5726
|
],
|
|
6068
5727
|
"importPath": "@primer/react",
|
|
@@ -6269,16 +5928,16 @@
|
|
|
6269
5928
|
"a11yReviewed": "2025-01-08",
|
|
6270
5929
|
"stories": [
|
|
6271
5930
|
{
|
|
6272
|
-
"id": "components-
|
|
6273
|
-
|
|
5931
|
+
"id": "components-skeletonbox--default"
|
|
5932
|
+
},
|
|
5933
|
+
{
|
|
5934
|
+
"id": "components-skeleton-skeletonbox--default"
|
|
6274
5935
|
},
|
|
6275
5936
|
{
|
|
6276
|
-
"id": "components-skeleton-skeletonbox-features--custom-height"
|
|
6277
|
-
"code": "() => <SkeletonBox height=\"4rem\" />"
|
|
5937
|
+
"id": "components-skeleton-skeletonbox-features--custom-height"
|
|
6278
5938
|
},
|
|
6279
5939
|
{
|
|
6280
|
-
"id": "components-skeleton-skeletonbox-features--custom-width"
|
|
6281
|
-
"code": "() => <SkeletonBox width=\"300px\" />"
|
|
5940
|
+
"id": "components-skeleton-skeletonbox-features--custom-width"
|
|
6282
5941
|
}
|
|
6283
5942
|
],
|
|
6284
5943
|
"importPath": "@primer/react",
|
|
@@ -6311,24 +5970,22 @@
|
|
|
6311
5970
|
"a11yReviewed": "2025-01-08",
|
|
6312
5971
|
"stories": [
|
|
6313
5972
|
{
|
|
6314
|
-
"id": "components-
|
|
6315
|
-
|
|
5973
|
+
"id": "components-skeletonavatar--default"
|
|
5974
|
+
},
|
|
5975
|
+
{
|
|
5976
|
+
"id": "components-skeleton-skeletonavatar--default"
|
|
6316
5977
|
},
|
|
6317
5978
|
{
|
|
6318
|
-
"id": "components-skeleton-skeletonavatar-features--square"
|
|
6319
|
-
"code": "() => <SkeletonAvatar square />"
|
|
5979
|
+
"id": "components-skeleton-skeletonavatar-features--square"
|
|
6320
5980
|
},
|
|
6321
5981
|
{
|
|
6322
|
-
"id": "components-skeleton-skeletonavatar-features--size"
|
|
6323
|
-
"code": "() => (\n <div>\n <SkeletonAvatar size={4} />\n <SkeletonAvatar size={8} />\n <SkeletonAvatar size={12} />\n <SkeletonAvatar size={16} />\n <SkeletonAvatar size={20} />\n <SkeletonAvatar size={24} />\n <SkeletonAvatar size={28} />\n <SkeletonAvatar size={32} />\n <SkeletonAvatar size={40} />\n <SkeletonAvatar size={48} />\n <SkeletonAvatar size={56} />\n <SkeletonAvatar size={64} />\n </div>\n)"
|
|
5982
|
+
"id": "components-skeleton-skeletonavatar-features--size"
|
|
6324
5983
|
},
|
|
6325
5984
|
{
|
|
6326
|
-
"id": "components-skeleton-skeletonavatar-features--size-responsive"
|
|
6327
|
-
"code": "() => (\n <div>\n <SkeletonAvatar\n size={{\n narrow: 4,\n regular: 8,\n wide: 12,\n }}\n />\n <SkeletonAvatar\n size={{\n narrow: 8,\n regular: 12,\n wide: 16,\n }}\n />\n <SkeletonAvatar\n size={{\n narrow: 12,\n regular: 16,\n wide: 20,\n }}\n />\n <SkeletonAvatar\n size={{\n narrow: 16,\n regular: 20,\n wide: 24,\n }}\n />\n <SkeletonAvatar\n size={{\n narrow: 20,\n regular: 24,\n wide: 28,\n }}\n />\n <SkeletonAvatar\n size={{\n narrow: 24,\n regular: 28,\n wide: 32,\n }}\n />\n <SkeletonAvatar\n size={{\n narrow: 28,\n regular: 32,\n wide: 40,\n }}\n />\n <SkeletonAvatar\n size={{\n narrow: 32,\n regular: 40,\n wide: 48,\n }}\n />\n <SkeletonAvatar\n size={{\n narrow: 40,\n regular: 48,\n wide: 56,\n }}\n />\n <SkeletonAvatar\n size={{\n narrow: 48,\n regular: 56,\n wide: 64,\n }}\n />\n </div>\n)"
|
|
5985
|
+
"id": "components-skeleton-skeletonavatar-features--size-responsive"
|
|
6328
5986
|
},
|
|
6329
5987
|
{
|
|
6330
|
-
"id": "components-skeleton-skeletonavatar-features--in-a-stack"
|
|
6331
|
-
"code": "() => (\n <AvatarStack>\n <SkeletonAvatar />\n <SkeletonAvatar />\n <SkeletonAvatar />\n <SkeletonAvatar />\n </AvatarStack>\n)"
|
|
5988
|
+
"id": "components-skeleton-skeletonavatar-features--in-a-stack"
|
|
6332
5989
|
}
|
|
6333
5990
|
],
|
|
6334
5991
|
"importPath": "@primer/react/experimental",
|
|
@@ -6361,48 +6018,40 @@
|
|
|
6361
6018
|
"a11yReviewed": "2025-01-08",
|
|
6362
6019
|
"stories": [
|
|
6363
6020
|
{
|
|
6364
|
-
"id": "components-
|
|
6365
|
-
"code": "() => <SkeletonText />"
|
|
6021
|
+
"id": "components-skeletontext--default"
|
|
6366
6022
|
},
|
|
6367
6023
|
{
|
|
6368
|
-
"id": "components-skeleton-skeletontext
|
|
6369
|
-
"code": "() => <SkeletonText maxWidth={200} />"
|
|
6024
|
+
"id": "components-skeleton-skeletontext--default"
|
|
6370
6025
|
},
|
|
6371
6026
|
{
|
|
6372
|
-
"id": "components-skeleton-skeletontext-features--with-
|
|
6373
|
-
"code": "() => <SkeletonText lines={3} />"
|
|
6027
|
+
"id": "components-skeleton-skeletontext-features--with-max-width"
|
|
6374
6028
|
},
|
|
6375
6029
|
{
|
|
6376
|
-
"id": "components-skeleton-skeletontext-features--
|
|
6377
|
-
"code": "() => <SkeletonText size=\"display\" />"
|
|
6030
|
+
"id": "components-skeleton-skeletontext-features--with-multiple-lines"
|
|
6378
6031
|
},
|
|
6379
6032
|
{
|
|
6380
|
-
"id": "components-skeleton-skeletontext-features--
|
|
6381
|
-
"code": "() => <SkeletonText size=\"subtitle\" />"
|
|
6033
|
+
"id": "components-skeleton-skeletontext-features--display"
|
|
6382
6034
|
},
|
|
6383
6035
|
{
|
|
6384
|
-
"id": "components-skeleton-skeletontext-features--
|
|
6385
|
-
"code": "() => <SkeletonText size=\"titleLarge\" />"
|
|
6036
|
+
"id": "components-skeleton-skeletontext-features--subtitle"
|
|
6386
6037
|
},
|
|
6387
6038
|
{
|
|
6388
|
-
"id": "components-skeleton-skeletontext-features--title-
|
|
6389
|
-
"code": "() => <SkeletonText size=\"titleMedium\" />"
|
|
6039
|
+
"id": "components-skeleton-skeletontext-features--title-large"
|
|
6390
6040
|
},
|
|
6391
6041
|
{
|
|
6392
|
-
"id": "components-skeleton-skeletontext-features--title-
|
|
6393
|
-
"code": "() => <SkeletonText size=\"titleSmall\" />"
|
|
6042
|
+
"id": "components-skeleton-skeletontext-features--title-medium"
|
|
6394
6043
|
},
|
|
6395
6044
|
{
|
|
6396
|
-
"id": "components-skeleton-skeletontext-features--
|
|
6397
|
-
"code": "() => <SkeletonText size=\"bodyLarge\" />"
|
|
6045
|
+
"id": "components-skeleton-skeletontext-features--title-small"
|
|
6398
6046
|
},
|
|
6399
6047
|
{
|
|
6400
|
-
"id": "components-skeleton-skeletontext-features--body-
|
|
6401
|
-
"code": "() => <SkeletonText size=\"bodyMedium\" />"
|
|
6048
|
+
"id": "components-skeleton-skeletontext-features--body-large"
|
|
6402
6049
|
},
|
|
6403
6050
|
{
|
|
6404
|
-
"id": "components-skeleton-skeletontext-features--body-
|
|
6405
|
-
|
|
6051
|
+
"id": "components-skeleton-skeletontext-features--body-medium"
|
|
6052
|
+
},
|
|
6053
|
+
{
|
|
6054
|
+
"id": "components-skeleton-skeletontext-features--body-small"
|
|
6406
6055
|
}
|
|
6407
6056
|
],
|
|
6408
6057
|
"importPath": "@primer/react/experimental",
|
|
@@ -6476,24 +6125,19 @@
|
|
|
6476
6125
|
"status": "alpha",
|
|
6477
6126
|
"stories": [
|
|
6478
6127
|
{
|
|
6479
|
-
"id": "components-spinner--default"
|
|
6480
|
-
"code": "() => <Spinner />"
|
|
6128
|
+
"id": "components-spinner--default"
|
|
6481
6129
|
},
|
|
6482
6130
|
{
|
|
6483
|
-
"id": "components-spinner-features--small"
|
|
6484
|
-
"code": "() => <Spinner size=\"small\" />"
|
|
6131
|
+
"id": "components-spinner-features--small"
|
|
6485
6132
|
},
|
|
6486
6133
|
{
|
|
6487
|
-
"id": "components-spinner-features--large"
|
|
6488
|
-
"code": "() => <Spinner size=\"large\" />"
|
|
6134
|
+
"id": "components-spinner-features--large"
|
|
6489
6135
|
},
|
|
6490
6136
|
{
|
|
6491
|
-
"id": "components-spinner-features--suppress-screen-reader-text"
|
|
6492
|
-
"code": "() => (\n <Stack direction=\"horizontal\" className={classes.SuppressScreenReaderText}>\n <Spinner size=\"small\" srText={null} />\n <AriaStatus>Loading...</AriaStatus>\n </Stack>\n)"
|
|
6137
|
+
"id": "components-spinner-features--suppress-screen-reader-text"
|
|
6493
6138
|
},
|
|
6494
6139
|
{
|
|
6495
|
-
"id": "components-spinner-features--with-delay"
|
|
6496
|
-
"code": "() => <Spinner delay />"
|
|
6140
|
+
"id": "components-spinner-features--with-delay"
|
|
6497
6141
|
}
|
|
6498
6142
|
],
|
|
6499
6143
|
"subcomponents": []
|
|
@@ -6506,12 +6150,10 @@
|
|
|
6506
6150
|
"a11yReviewed": "2025-01-08",
|
|
6507
6151
|
"stories": [
|
|
6508
6152
|
{
|
|
6509
|
-
"id": "components-splitpagelayout--default"
|
|
6510
|
-
"code": "() => (\n <SplitPageLayout>\n <SplitPageLayout.Header>\n <Placeholder label=\"Header\" height={100} />\n </SplitPageLayout.Header>\n <SplitPageLayout.Pane position=\"start\" aria-label=\"Pane\">\n <Placeholder label=\"Pane\" height={400} />\n </SplitPageLayout.Pane>\n <SplitPageLayout.Content>\n <Placeholder label=\"Content\" height={600} />\n </SplitPageLayout.Content>\n <SplitPageLayout.Footer>\n <Placeholder label=\"Footer\" height={100} />\n </SplitPageLayout.Footer>\n </SplitPageLayout>\n)"
|
|
6153
|
+
"id": "components-splitpagelayout--default"
|
|
6511
6154
|
},
|
|
6512
6155
|
{
|
|
6513
|
-
"id": "components-splitpagelayout-features--settings-page"
|
|
6514
|
-
"code": "() => (\n <SplitPageLayout>\n <SplitPageLayout.Pane position=\"start\" aria-label=\"Navigation Pane\">\n <NavList aria-label=\"Main navigation\">\n <NavList.Item href=\"#\">Profile</NavList.Item>\n <NavList.Item href=\"#\" aria-current=\"page\">\n Account\n </NavList.Item>\n <NavList.Item href=\"#\">Emails</NavList.Item>\n <NavList.Item href=\"#\">Notifications</NavList.Item>\n </NavList>\n </SplitPageLayout.Pane>\n <SplitPageLayout.Content>\n <Heading as=\"h2\" className={classes.SectionHeading}>\n Danger zone\n </Heading>\n <div className={classes.DeleteAccountContainer}>\n <div className={classes.DeleteAccountTextContainer}>\n <Text className={classes.DeleteAccountTitle}>Delete account</Text>\n <Text className={classes.DeleteAccountDescription}>\n Are you sure you don't want to just downgrade your account to a\n free account? We won't charge your credit card anymore.\n </Text>\n </div>\n <Button variant=\"danger\">Delete account</Button>\n </div>\n </SplitPageLayout.Content>\n </SplitPageLayout>\n)"
|
|
6156
|
+
"id": "components-splitpagelayout-features--settings-page"
|
|
6515
6157
|
}
|
|
6516
6158
|
],
|
|
6517
6159
|
"importPath": "@primer/react",
|
|
@@ -6718,12 +6360,10 @@
|
|
|
6718
6360
|
"a11yReviewed": "2025-01-08",
|
|
6719
6361
|
"stories": [
|
|
6720
6362
|
{
|
|
6721
|
-
"id": "components-stack--default"
|
|
6722
|
-
"code": "() => (\n <Stack>\n <div\n style={{\n background: 'var(--display-lemon-bgColor-muted)',\n borderRadius: 'var(--borderRadius-medium)',\n padding: 'var(--base-size-8)',\n }}\n >\n First\n </div>\n <div\n style={{\n background: 'var(--display-olive-bgColor-muted)',\n borderRadius: 'var(--borderRadius-medium)',\n padding: 'var(--base-size-8)',\n }}\n >\n Second\n </div>\n <div\n style={{\n background: 'var(--display-lime-bgColor-muted)',\n borderRadius: 'var(--borderRadius-medium)',\n padding: 'var(--base-size-8)',\n }}\n >\n Third\n </div>\n </Stack>\n)"
|
|
6363
|
+
"id": "components-stack--default"
|
|
6723
6364
|
},
|
|
6724
6365
|
{
|
|
6725
|
-
"id": "components-stack-features--shrinking-stack-items"
|
|
6726
|
-
"code": "() => (\n <div\n style={{\n maxWidth: '200px',\n padding: 'var(--base-size-8)',\n }}\n >\n <Stack direction=\"horizontal\" gap=\"condensed\">\n <Stack.Item shrink={false}>\n <ShieldLockIcon size=\"small\" />\n </Stack.Item>\n <Stack.Item>\n This stack has the leading icon set to prevent shrinking\n </Stack.Item>\n </Stack>\n <Stack direction=\"horizontal\" gap=\"condensed\">\n <Stack.Item shrink={true}>\n <ShieldLockIcon size=\"small\" />\n </Stack.Item>\n <Stack.Item>\n This stack item does not have the icon set to prevent shrinking\n </Stack.Item>\n </Stack>\n </div>\n)"
|
|
6366
|
+
"id": "components-stack-features--shrinking-stack-items"
|
|
6727
6367
|
}
|
|
6728
6368
|
],
|
|
6729
6369
|
"importPath": "@primer/react",
|
|
@@ -6793,56 +6433,46 @@
|
|
|
6793
6433
|
"a11yReviewed": "2025-01-08",
|
|
6794
6434
|
"stories": [
|
|
6795
6435
|
{
|
|
6796
|
-
"id": "components-statelabel
|
|
6797
|
-
|
|
6436
|
+
"id": "components-statelabel--default"
|
|
6437
|
+
},
|
|
6438
|
+
{
|
|
6439
|
+
"id": "components-statelabel-features--issue-opened"
|
|
6798
6440
|
},
|
|
6799
6441
|
{
|
|
6800
|
-
"id": "components-statelabel-features--issue-closed"
|
|
6801
|
-
"code": "() => <StateLabel status=\"issueClosed\">Closed</StateLabel>"
|
|
6442
|
+
"id": "components-statelabel-features--issue-closed"
|
|
6802
6443
|
},
|
|
6803
6444
|
{
|
|
6804
|
-
"id": "components-statelabel-features--issue-closed-not-planned"
|
|
6805
|
-
"code": "() => <StateLabel status=\"issueClosedNotPlanned\">Closed</StateLabel>"
|
|
6445
|
+
"id": "components-statelabel-features--issue-closed-not-planned"
|
|
6806
6446
|
},
|
|
6807
6447
|
{
|
|
6808
|
-
"id": "components-statelabel-features--issue-draft"
|
|
6809
|
-
"code": "() => <StateLabel status=\"issueDraft\">Draft</StateLabel>"
|
|
6448
|
+
"id": "components-statelabel-features--issue-draft"
|
|
6810
6449
|
},
|
|
6811
6450
|
{
|
|
6812
|
-
"id": "components-statelabel-features--pull-opened"
|
|
6813
|
-
"code": "() => <StateLabel status=\"pullOpened\">Open</StateLabel>"
|
|
6451
|
+
"id": "components-statelabel-features--pull-opened"
|
|
6814
6452
|
},
|
|
6815
6453
|
{
|
|
6816
|
-
"id": "components-statelabel-features--pull-closed"
|
|
6817
|
-
"code": "() => <StateLabel status=\"pullClosed\">Closed</StateLabel>"
|
|
6454
|
+
"id": "components-statelabel-features--pull-closed"
|
|
6818
6455
|
},
|
|
6819
6456
|
{
|
|
6820
|
-
"id": "components-statelabel-features--pull-merged"
|
|
6821
|
-
"code": "() => <StateLabel status=\"pullMerged\">Merged</StateLabel>"
|
|
6457
|
+
"id": "components-statelabel-features--pull-merged"
|
|
6822
6458
|
},
|
|
6823
6459
|
{
|
|
6824
|
-
"id": "components-statelabel-features--queued"
|
|
6825
|
-
"code": "() => <StateLabel status=\"pullQueued\">Queued</StateLabel>"
|
|
6460
|
+
"id": "components-statelabel-features--queued"
|
|
6826
6461
|
},
|
|
6827
6462
|
{
|
|
6828
|
-
"id": "components-statelabel-features--draft"
|
|
6829
|
-
"code": "() => <StateLabel status=\"draft\">Draft</StateLabel>"
|
|
6463
|
+
"id": "components-statelabel-features--draft"
|
|
6830
6464
|
},
|
|
6831
6465
|
{
|
|
6832
|
-
"id": "components-statelabel-features--unavailable"
|
|
6833
|
-
"code": "() => <StateLabel status=\"unavailable\">Unavailable</StateLabel>"
|
|
6466
|
+
"id": "components-statelabel-features--unavailable"
|
|
6834
6467
|
},
|
|
6835
6468
|
{
|
|
6836
|
-
"id": "components-statelabel-features--small"
|
|
6837
|
-
"code": "() => (\n <StateLabel status=\"issueOpened\" size=\"small\">\n Open\n </StateLabel>\n)"
|
|
6469
|
+
"id": "components-statelabel-features--small"
|
|
6838
6470
|
},
|
|
6839
6471
|
{
|
|
6840
|
-
"id": "components-statelabel-features--open"
|
|
6841
|
-
"code": "() => (\n <StateLabel status=\"open\">\n {/* Because open is a generic status, a visually hidden text could be added to specify the type of the artifact */}\n <VisuallyHidden>Milestone</VisuallyHidden>\n Open\n </StateLabel>\n)"
|
|
6472
|
+
"id": "components-statelabel-features--open"
|
|
6842
6473
|
},
|
|
6843
6474
|
{
|
|
6844
|
-
"id": "components-statelabel-features--closed"
|
|
6845
|
-
"code": "() => <StateLabel status=\"closed\">Closed</StateLabel>"
|
|
6475
|
+
"id": "components-statelabel-features--closed"
|
|
6846
6476
|
}
|
|
6847
6477
|
],
|
|
6848
6478
|
"importPath": "@primer/react",
|
|
@@ -6868,8 +6498,10 @@
|
|
|
6868
6498
|
"a11yReviewed": "2025-01-08",
|
|
6869
6499
|
"stories": [
|
|
6870
6500
|
{
|
|
6871
|
-
"id": "components-subnav
|
|
6872
|
-
|
|
6501
|
+
"id": "components-subnav--default"
|
|
6502
|
+
},
|
|
6503
|
+
{
|
|
6504
|
+
"id": "components-subnav-features--selected"
|
|
6873
6505
|
}
|
|
6874
6506
|
],
|
|
6875
6507
|
"importPath": "@primer/react",
|
|
@@ -6940,12 +6572,10 @@
|
|
|
6940
6572
|
"a11yReviewed": false,
|
|
6941
6573
|
"stories": [
|
|
6942
6574
|
{
|
|
6943
|
-
"id": "deprecated-components-tabnav--default"
|
|
6944
|
-
"code": "() => (\n <TabNav aria-label=\"Main\">\n <TabNav.Link href=\"#\" selected>\n Home\n </TabNav.Link>\n <TabNav.Link href=\"#\">Documentation</TabNav.Link>\n <TabNav.Link href=\"#\">Support</TabNav.Link>\n </TabNav>\n)"
|
|
6575
|
+
"id": "deprecated-components-tabnav--default"
|
|
6945
6576
|
},
|
|
6946
6577
|
{
|
|
6947
|
-
"id": "deprecated-components-tabnav-features--selected"
|
|
6948
|
-
"code": "() => (\n <TabNav aria-label=\"Main\">\n <TabNav.Link href=\"#\">Home</TabNav.Link>\n <TabNav.Link href=\"#\" selected>\n Documentation\n </TabNav.Link>\n <TabNav.Link href=\"#\">Support</TabNav.Link>\n </TabNav>\n)"
|
|
6578
|
+
"id": "deprecated-components-tabnav-features--selected"
|
|
6949
6579
|
}
|
|
6950
6580
|
],
|
|
6951
6581
|
"importPath": "@primer/react/deprecated",
|
|
@@ -6990,44 +6620,34 @@
|
|
|
6990
6620
|
"a11yReviewed": "2025-01-08",
|
|
6991
6621
|
"stories": [
|
|
6992
6622
|
{
|
|
6993
|
-
"id": "components-text--default"
|
|
6994
|
-
"code": "() => <Text>Default Text</Text>"
|
|
6623
|
+
"id": "components-text--default"
|
|
6995
6624
|
},
|
|
6996
6625
|
{
|
|
6997
|
-
"id": "components-text-features--polymorphism"
|
|
6998
|
-
"code": "() => (\n <div className={classes.PolymorphismContainer}>\n <Text as=\"em\">Emphasized text</Text>\n <Text as=\"i\">Italicized text</Text>\n <Text as=\"strong\">Strong text</Text>\n <Text as=\"small\">Small text</Text>\n <Text as=\"u\">Text with underline</Text>\n </div>\n)"
|
|
6626
|
+
"id": "components-text-features--polymorphism"
|
|
6999
6627
|
},
|
|
7000
6628
|
{
|
|
7001
|
-
"id": "components-text-features--styled-text"
|
|
7002
|
-
"code": "() => (\n <Text as=\"p\" className={classes.StyledText} size=\"small\">\n Stylized text\n </Text>\n)"
|
|
6629
|
+
"id": "components-text-features--styled-text"
|
|
7003
6630
|
},
|
|
7004
6631
|
{
|
|
7005
|
-
"id": "components-text-features--size-small"
|
|
7006
|
-
"code": "() => (\n <Text as=\"span\" size=\"small\">\n Stylized text\n </Text>\n)"
|
|
6632
|
+
"id": "components-text-features--size-small"
|
|
7007
6633
|
},
|
|
7008
6634
|
{
|
|
7009
|
-
"id": "components-text-features--size-medium"
|
|
7010
|
-
"code": "() => (\n <Text as=\"span\" size=\"medium\">\n Stylized text\n </Text>\n)"
|
|
6635
|
+
"id": "components-text-features--size-medium"
|
|
7011
6636
|
},
|
|
7012
6637
|
{
|
|
7013
|
-
"id": "components-text-features--size-large"
|
|
7014
|
-
"code": "() => (\n <Text as=\"span\" size=\"large\">\n Stylized text\n </Text>\n)"
|
|
6638
|
+
"id": "components-text-features--size-large"
|
|
7015
6639
|
},
|
|
7016
6640
|
{
|
|
7017
|
-
"id": "components-text-features--light-weight"
|
|
7018
|
-
"code": "() => (\n <Text as=\"span\" weight=\"light\">\n Stylized text\n </Text>\n)"
|
|
6641
|
+
"id": "components-text-features--light-weight"
|
|
7019
6642
|
},
|
|
7020
6643
|
{
|
|
7021
|
-
"id": "components-text-features--normal-weight"
|
|
7022
|
-
"code": "() => (\n <Text as=\"span\" weight=\"normal\">\n Stylized text\n </Text>\n)"
|
|
6644
|
+
"id": "components-text-features--normal-weight"
|
|
7023
6645
|
},
|
|
7024
6646
|
{
|
|
7025
|
-
"id": "components-text-features--medium-weight"
|
|
7026
|
-
"code": "() => (\n <Text as=\"span\" weight=\"medium\">\n Stylized text\n </Text>\n)"
|
|
6647
|
+
"id": "components-text-features--medium-weight"
|
|
7027
6648
|
},
|
|
7028
6649
|
{
|
|
7029
|
-
"id": "components-text-features--semibold-weight"
|
|
7030
|
-
"code": "() => (\n <Text as=\"span\" weight=\"semibold\">\n Stylized text\n </Text>\n)"
|
|
6650
|
+
"id": "components-text-features--semibold-weight"
|
|
7031
6651
|
}
|
|
7032
6652
|
],
|
|
7033
6653
|
"importPath": "@primer/react",
|
|
@@ -7060,68 +6680,52 @@
|
|
|
7060
6680
|
"a11yReviewed": "2025-01-08",
|
|
7061
6681
|
"stories": [
|
|
7062
6682
|
{
|
|
7063
|
-
"id": "components-textinput--default"
|
|
7064
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput />\n </FormControl>\n </form>\n)"
|
|
6683
|
+
"id": "components-textinput--default"
|
|
7065
6684
|
},
|
|
7066
6685
|
{
|
|
7067
|
-
"id": "components-textinput-features--disabled"
|
|
7068
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput disabled />\n </FormControl>\n </form>\n)"
|
|
6686
|
+
"id": "components-textinput-features--disabled"
|
|
7069
6687
|
},
|
|
7070
6688
|
{
|
|
7071
|
-
"id": "components-textinput-features--with-caption"
|
|
7072
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <FormControl.Caption>This is a caption</FormControl.Caption>\n <TextInput />\n </FormControl>\n </form>\n)"
|
|
6689
|
+
"id": "components-textinput-features--with-caption"
|
|
7073
6690
|
},
|
|
7074
6691
|
{
|
|
7075
|
-
"id": "components-textinput-features--visually-hidden-label"
|
|
7076
|
-
"code": "() => (\n <form>\n <Heading as=\"h2\" variant=\"small\">\n Primer form title\n </Heading>\n <FormControl>\n <FormControl.Label visuallyHidden>Primer form label</FormControl.Label>\n <TextInput />\n <FormControl.Caption>\n Label is visually hidden; the title describes the purpose visually\n </FormControl.Caption>\n </FormControl>\n </form>\n)"
|
|
6692
|
+
"id": "components-textinput-features--visually-hidden-label"
|
|
7077
6693
|
},
|
|
7078
6694
|
{
|
|
7079
|
-
"id": "components-textinput-features--error"
|
|
7080
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput />\n <FormControl.Validation variant=\"error\">\n Something went wrong\n </FormControl.Validation>\n </FormControl>\n </form>\n)"
|
|
6695
|
+
"id": "components-textinput-features--error"
|
|
7081
6696
|
},
|
|
7082
6697
|
{
|
|
7083
|
-
"id": "components-textinput-features--success"
|
|
7084
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput />\n <FormControl.Validation variant=\"success\">\n Something went wrong\n </FormControl.Validation>\n </FormControl>\n </form>\n)"
|
|
6698
|
+
"id": "components-textinput-features--success"
|
|
7085
6699
|
},
|
|
7086
6700
|
{
|
|
7087
|
-
"id": "components-textinput-features--block"
|
|
7088
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput block />\n </FormControl>\n </form>\n)"
|
|
6701
|
+
"id": "components-textinput-features--block"
|
|
7089
6702
|
},
|
|
7090
6703
|
{
|
|
7091
|
-
"id": "components-textinput-features--small"
|
|
7092
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput size=\"small\" />\n </FormControl>\n </form>\n)"
|
|
6704
|
+
"id": "components-textinput-features--small"
|
|
7093
6705
|
},
|
|
7094
6706
|
{
|
|
7095
|
-
"id": "components-textinput-features--large"
|
|
7096
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput size=\"large\" />\n </FormControl>\n </form>\n)"
|
|
6707
|
+
"id": "components-textinput-features--large"
|
|
7097
6708
|
},
|
|
7098
6709
|
{
|
|
7099
|
-
"id": "components-textinput-features--required"
|
|
7100
|
-
"code": "() => (\n <form>\n <FormControl required>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput size=\"large\" />\n </FormControl>\n </form>\n)"
|
|
6710
|
+
"id": "components-textinput-features--required"
|
|
7101
6711
|
},
|
|
7102
6712
|
{
|
|
7103
|
-
"id": "components-textinput-features--with-leading-visual"
|
|
7104
|
-
"code": "() => {\n const Checkmark = () => <CheckIcon aria-label=\"Checkmark\" />\n return (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput leadingVisual={Checkmark} />\n </FormControl>\n <FormControl>\n <FormControl.Label>Enter monies</FormControl.Label>\n <TextInput leadingVisual=\"$\" />\n </FormControl>\n </form>\n )\n}"
|
|
6713
|
+
"id": "components-textinput-features--with-leading-visual"
|
|
7105
6714
|
},
|
|
7106
6715
|
{
|
|
7107
|
-
"id": "components-textinput-features--with-trailing-icon"
|
|
7108
|
-
"code": "() => {\n const Checkmark = () => <CheckIcon aria-label=\"Checkmark\" />\n return (\n <div>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput trailingVisual={Checkmark} />\n </FormControl>\n <FormControl>\n <FormControl.Label>Enter monies</FormControl.Label>\n <TextInput trailingVisual=\"minutes\" placeholder=\"200\" />\n </FormControl>\n </div>\n )\n}"
|
|
6716
|
+
"id": "components-textinput-features--with-trailing-icon"
|
|
7109
6717
|
},
|
|
7110
6718
|
{
|
|
7111
|
-
"id": "components-textinput-features--with-trailing-action"
|
|
7112
|
-
"code": "() => {\n const [value, setValue] = useState('sample text')\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value)\n }\n return (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput\n value={value}\n onChange={handleChange}\n trailingAction={\n <Stack\n justify=\"center\"\n style={{\n minWidth: '34px',\n }}\n >\n {value.length ? (\n <TextInput.Action\n onClick={() => setValue('')}\n icon={XCircleFillIcon}\n aria-label=\"Clear input\"\n />\n ) : undefined}\n </Stack>\n }\n />\n </FormControl>\n </form>\n )\n}"
|
|
6719
|
+
"id": "components-textinput-features--with-trailing-action"
|
|
7113
6720
|
},
|
|
7114
6721
|
{
|
|
7115
|
-
"id": "components-textinput-features--with-tooltip-direction"
|
|
7116
|
-
"code": "() => {\n const [value, setValue] = useState('sample text')\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value)\n }\n return (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput\n value={value}\n onChange={handleChange}\n trailingAction={\n <Stack\n justify=\"center\"\n style={{\n minWidth: '34px',\n }}\n >\n {value.length ? (\n <TextInput.Action\n onClick={() => setValue('')}\n icon={XCircleFillIcon}\n aria-label=\"Clear input\"\n tooltipDirection=\"nw\"\n />\n ) : undefined}\n </Stack>\n }\n />\n </FormControl>\n </form>\n )\n}"
|
|
6722
|
+
"id": "components-textinput-features--with-tooltip-direction"
|
|
7117
6723
|
},
|
|
7118
6724
|
{
|
|
7119
|
-
"id": "components-textinput-features--with-loading-indicator"
|
|
7120
|
-
"code": "(args: FormControlArgs<TextInputProps>) => {\n return (\n <div>\n <h3>No visual</h3>\n\n <div className={classes.MarginBottom}>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput value=\"auto\" {...args} />\n </FormControl>\n </div>\n <div className={classes.MarginBottom}>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput value=\"leading\" {...args} loaderPosition=\"leading\" />\n </FormControl>\n </div>\n <div className={classes.MarginBottomLarge}>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput value=\"trailing\" {...args} loaderPosition=\"trailing\" />\n </FormControl>\n </div>\n\n <h3>Leading visual</h3>\n\n <div className={classes.MarginBottom}>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput leadingVisual={Calendar} {...args} value=\"auto\" />\n </FormControl>\n </div>\n <div className={classes.MarginBottom}>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput\n leadingVisual={Calendar}\n {...args}\n loaderPosition=\"leading\"\n value=\"leading\"\n />\n </FormControl>\n </div>\n <div className={classes.MarginBottomLarge}>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput\n leadingVisual={Calendar}\n {...args}\n loaderPosition=\"trailing\"\n value=\"trailing\"\n />\n </FormControl>\n </div>\n\n <h3>Trailing visual</h3>\n <FormControl>\n <div className={classes.MarginBottom}>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput trailingVisual={Calendar} {...args} value=\"auto\" />\n </FormControl>\n </div>\n <div className={classes.MarginBottom}>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput\n trailingVisual={Calendar}\n {...args}\n loaderPosition=\"leading\"\n value=\"leading\"\n />\n </FormControl>\n </div>\n <div className={classes.MarginBottomLarge}>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput\n trailingVisual={Calendar}\n {...args}\n loaderPosition=\"trailing\"\n value=\"trailing\"\n />\n </FormControl>\n </div>\n </FormControl>\n\n <h3>Both visuals</h3>\n\n <div className={classes.MarginBottom}>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput\n size=\"small\"\n leadingVisual={Calendar}\n trailingVisual={Calendar}\n {...args}\n value=\"auto\"\n />\n </FormControl>\n </div>\n <div className={classes.MarginBottom}>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput\n leadingVisual={Calendar}\n trailingVisual={Calendar}\n {...args}\n loaderPosition=\"leading\"\n value=\"leading\"\n />\n </FormControl>\n </div>\n <div className={classes.MarginBottom}>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput\n size=\"large\"\n leadingVisual={Calendar}\n trailingVisual={Calendar}\n {...args}\n loaderPosition=\"trailing\"\n value=\"trailing\"\n />\n </FormControl>\n </div>\n </div>\n )\n}"
|
|
6725
|
+
"id": "components-textinput-features--with-loading-indicator"
|
|
7121
6726
|
},
|
|
7122
6727
|
{
|
|
7123
|
-
"id": "components-textinput-features--with-autocomplete-attribute"
|
|
7124
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>First name</FormControl.Label>\n <TextInput autoComplete=\"given-name\" />\n </FormControl>\n <FormControl>\n <FormControl.Label>Last name</FormControl.Label>\n <TextInput autoComplete=\"family-name\" />\n </FormControl>\n </form>\n)"
|
|
6728
|
+
"id": "components-textinput-features--with-autocomplete-attribute"
|
|
7125
6729
|
}
|
|
7126
6730
|
],
|
|
7127
6731
|
"importPath": "@primer/react",
|
|
@@ -7298,44 +6902,34 @@
|
|
|
7298
6902
|
"a11yReviewed": "2025-01-08",
|
|
7299
6903
|
"stories": [
|
|
7300
6904
|
{
|
|
7301
|
-
"id": "deprecated-components-textinputwithtokens--default"
|
|
7302
|
-
"code": "() => {\n const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n setTokens(tokens.filter((token) => token.id !== tokenId))\n }\n return (\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInputWithTokens tokens={tokens} onTokenRemove={onTokenRemove} />\n </FormControl>\n )\n}"
|
|
6905
|
+
"id": "deprecated-components-textinputwithtokens--default"
|
|
7303
6906
|
},
|
|
7304
6907
|
{
|
|
7305
|
-
"id": "deprecated-components-textinputwithtokens-features--with-leading-visual"
|
|
7306
|
-
"code": "() => {\n const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n setTokens(tokens.filter((token) => token.id !== tokenId))\n }\n return (\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInputWithTokens\n leadingVisual={NumberIcon}\n tokens={tokens}\n onTokenRemove={onTokenRemove}\n />\n </FormControl>\n )\n}"
|
|
6908
|
+
"id": "deprecated-components-textinputwithtokens-features--with-leading-visual"
|
|
7307
6909
|
},
|
|
7308
6910
|
{
|
|
7309
|
-
"id": "deprecated-components-textinputwithtokens-features--with-trailing-visual"
|
|
7310
|
-
"code": "() => {\n const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n setTokens(tokens.filter((token) => token.id !== tokenId))\n }\n return (\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInputWithTokens\n trailingVisual={CheckIcon}\n tokens={tokens}\n onTokenRemove={onTokenRemove}\n />\n </FormControl>\n )\n}"
|
|
6911
|
+
"id": "deprecated-components-textinputwithtokens-features--with-trailing-visual"
|
|
7311
6912
|
},
|
|
7312
6913
|
{
|
|
7313
|
-
"id": "deprecated-components-textinputwithtokens-features--with-loading-indicator"
|
|
7314
|
-
"code": "(args: FormControlArgs<TextInputWithTokensProps>) => {\n const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n setTokens(tokens.filter((token) => token.id !== tokenId))\n }\n return (\n <form className={classes.Grid}>\n <FormControl>\n <FormControl.Label>No visual</FormControl.Label>\n <TextInputWithTokens\n {...args}\n tokens={tokens}\n onTokenRemove={onTokenRemove}\n />\n </FormControl>\n\n <FormControl>\n <FormControl.Label>Leading visual</FormControl.Label>\n <TextInputWithTokens\n {...args}\n tokens={tokens}\n onTokenRemove={onTokenRemove}\n leadingVisual={NumberIcon}\n />\n </FormControl>\n\n <FormControl>\n <FormControl.Label>Both visuals</FormControl.Label>\n <TextInputWithTokens\n {...args}\n tokens={tokens}\n onTokenRemove={onTokenRemove}\n leadingVisual={NumberIcon}\n trailingVisual={CheckIcon}\n />\n </FormControl>\n </form>\n )\n}"
|
|
6914
|
+
"id": "deprecated-components-textinputwithtokens-features--with-loading-indicator"
|
|
7315
6915
|
},
|
|
7316
6916
|
{
|
|
7317
|
-
"id": "deprecated-components-textinputwithtokens-features--using-issue-label-tokens"
|
|
7318
|
-
"code": "() => {\n const [tokens, setTokens] = useState([\n {\n text: 'enhancement',\n id: 1,\n fillColor: '#a2eeef',\n },\n {\n text: 'bug',\n id: 2,\n fillColor: '#d73a4a',\n },\n {\n text: 'good first issue',\n id: 3,\n fillColor: '#0cf478',\n },\n ])\n const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n setTokens(tokens.filter((token) => token.id !== tokenId))\n }\n return (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInputWithTokens\n tokenComponent={IssueLabelToken}\n tokens={tokens}\n onTokenRemove={onTokenRemove}\n />\n </FormControl>\n </form>\n )\n}"
|
|
6917
|
+
"id": "deprecated-components-textinputwithtokens-features--using-issue-label-tokens"
|
|
7319
6918
|
},
|
|
7320
6919
|
{
|
|
7321
|
-
"id": "deprecated-components-textinputwithtokens-features--unstyled"
|
|
7322
|
-
"code": "() => {\n const [tokens, setTokens] = useState([...mockTokens].slice(0, 2))\n const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n setTokens(tokens.filter((token) => token.id !== tokenId))\n }\n return (\n <form>\n <FormControl>\n <FormControl.Label visuallyHidden>Default label</FormControl.Label>\n <TextInputWithTokens\n tokens={tokens}\n onTokenRemove={onTokenRemove}\n className={classes.Unstyled}\n />\n </FormControl>\n </form>\n )\n}"
|
|
6920
|
+
"id": "deprecated-components-textinputwithtokens-features--unstyled"
|
|
7323
6921
|
},
|
|
7324
6922
|
{
|
|
7325
|
-
"id": "deprecated-components-textinputwithtokens-features--prevent-tokens-from-wrapping"
|
|
7326
|
-
"code": "() => {\n const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n setTokens(tokens.filter((token) => token.id !== tokenId))\n }\n return (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInputWithTokens\n tokens={tokens}\n onTokenRemove={onTokenRemove}\n preventTokenWrapping\n />\n </FormControl>\n </form>\n )\n}"
|
|
6923
|
+
"id": "deprecated-components-textinputwithtokens-features--prevent-tokens-from-wrapping"
|
|
7327
6924
|
},
|
|
7328
6925
|
{
|
|
7329
|
-
"id": "deprecated-components-textinputwithtokens-features--max-height"
|
|
7330
|
-
"code": "() => {\n const [tokens, setTokens] = useState([...mockTokens].slice(0, 7))\n const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n setTokens(tokens.filter((token) => token.id !== tokenId))\n }\n return (\n <div className={classes.MaxWidth}>\n {/* Setting max-width to force tokens to wrap and demo `maxHeight` behavior */}\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInputWithTokens\n tokens={tokens}\n onTokenRemove={onTokenRemove}\n maxHeight={70}\n block // `block` only needed to fill parent width without overflowing\n />\n </FormControl>\n </div>\n )\n}"
|
|
6926
|
+
"id": "deprecated-components-textinputwithtokens-features--max-height"
|
|
7331
6927
|
},
|
|
7332
6928
|
{
|
|
7333
|
-
"id": "deprecated-components-textinputwithtokens-features--size"
|
|
7334
|
-
"code": "() => {\n const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n setTokens(tokens.filter((token) => token.id !== tokenId))\n }\n return (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInputWithTokens\n tokens={tokens}\n onTokenRemove={onTokenRemove}\n size=\"small\"\n />\n </FormControl>\n </form>\n )\n}"
|
|
6929
|
+
"id": "deprecated-components-textinputwithtokens-features--size"
|
|
7335
6930
|
},
|
|
7336
6931
|
{
|
|
7337
|
-
"id": "deprecated-components-textinputwithtokens-features--truncated"
|
|
7338
|
-
"code": "() => {\n const [tokens, setTokens] = useState(mockTokens)\n const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n setTokens(tokens.filter((token) => token.id !== tokenId))\n }\n return (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInputWithTokens\n tokens={tokens}\n onTokenRemove={onTokenRemove}\n visibleTokenCount={5}\n />\n </FormControl>\n </form>\n )\n}"
|
|
6932
|
+
"id": "deprecated-components-textinputwithtokens-features--truncated"
|
|
7339
6933
|
}
|
|
7340
6934
|
],
|
|
7341
6935
|
"importPath": "@primer/react",
|
|
@@ -7411,44 +7005,34 @@
|
|
|
7411
7005
|
"a11yReviewed": "2025-01-08",
|
|
7412
7006
|
"stories": [
|
|
7413
7007
|
{
|
|
7414
|
-
"id": "components-textarea--default"
|
|
7415
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea />\n </FormControl>\n </form>\n)"
|
|
7008
|
+
"id": "components-textarea--default"
|
|
7416
7009
|
},
|
|
7417
7010
|
{
|
|
7418
|
-
"id": "components-textarea-features--disabled"
|
|
7419
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea disabled />\n </FormControl>\n </form>\n)"
|
|
7011
|
+
"id": "components-textarea-features--disabled"
|
|
7420
7012
|
},
|
|
7421
7013
|
{
|
|
7422
|
-
"id": "components-textarea-features--with-caption"
|
|
7423
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <FormControl.Caption>This is a caption</FormControl.Caption>\n <Textarea />\n </FormControl>\n </form>\n)"
|
|
7014
|
+
"id": "components-textarea-features--with-caption"
|
|
7424
7015
|
},
|
|
7425
7016
|
{
|
|
7426
|
-
"id": "components-textarea-features--visually-hidden-label"
|
|
7427
|
-
"code": "() => (\n <form>\n <Heading as=\"h2\" variant=\"small\">\n Primer form title\n </Heading>\n <FormControl>\n <FormControl.Label visuallyHidden>Primer form label</FormControl.Label>\n <Textarea />\n <FormControl.Caption>\n Label is visually hidden; the title describes the purpose visually\n </FormControl.Caption>\n </FormControl>\n </form>\n)"
|
|
7017
|
+
"id": "components-textarea-features--visually-hidden-label"
|
|
7428
7018
|
},
|
|
7429
7019
|
{
|
|
7430
|
-
"id": "components-textarea-features--error"
|
|
7431
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea />\n <FormControl.Validation variant=\"error\">\n Something went wrong\n </FormControl.Validation>\n </FormControl>\n </form>\n)"
|
|
7020
|
+
"id": "components-textarea-features--error"
|
|
7432
7021
|
},
|
|
7433
7022
|
{
|
|
7434
|
-
"id": "components-textarea-features--success"
|
|
7435
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea />\n <FormControl.Validation variant=\"success\">Success</FormControl.Validation>\n </FormControl>\n </form>\n)"
|
|
7023
|
+
"id": "components-textarea-features--success"
|
|
7436
7024
|
},
|
|
7437
7025
|
{
|
|
7438
|
-
"id": "components-textarea-features--block"
|
|
7439
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea block />\n </FormControl>\n </form>\n)"
|
|
7026
|
+
"id": "components-textarea-features--block"
|
|
7440
7027
|
},
|
|
7441
7028
|
{
|
|
7442
|
-
"id": "components-textarea-features--custom-height"
|
|
7443
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea rows={3} />\n </FormControl>\n </form>\n)"
|
|
7029
|
+
"id": "components-textarea-features--custom-height"
|
|
7444
7030
|
},
|
|
7445
7031
|
{
|
|
7446
|
-
"id": "components-textarea-features--custom-width"
|
|
7447
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea cols={60} />\n </FormControl>\n </form>\n)"
|
|
7032
|
+
"id": "components-textarea-features--custom-width"
|
|
7448
7033
|
},
|
|
7449
7034
|
{
|
|
7450
|
-
"id": "components-textarea-features--custom-resize-behavior"
|
|
7451
|
-
"code": "() => (\n <Stack as=\"form\">\n <FormControl>\n <FormControl.Label>\n Resize in either direction (default)\n </FormControl.Label>\n <Textarea resize=\"both\" />\n </FormControl>\n <FormControl>\n <FormControl.Label>No resize</FormControl.Label>\n <Textarea resize=\"none\" />\n </FormControl>\n <FormControl>\n <FormControl.Label>Horizontal resize</FormControl.Label>\n <Textarea resize=\"horizontal\" />\n </FormControl>\n <FormControl>\n <FormControl.Label>Vertical resize</FormControl.Label>\n <Textarea resize=\"vertical\" />\n </FormControl>\n </Stack>\n)"
|
|
7035
|
+
"id": "components-textarea-features--custom-resize-behavior"
|
|
7452
7036
|
}
|
|
7453
7037
|
],
|
|
7454
7038
|
"importPath": "@primer/react",
|
|
@@ -7530,24 +7114,19 @@
|
|
|
7530
7114
|
"a11yReviewed": "2025-01-08",
|
|
7531
7115
|
"stories": [
|
|
7532
7116
|
{
|
|
7533
|
-
"id": "components-timeline--default"
|
|
7534
|
-
"code": "() => (\n <Timeline>\n <Timeline.Item>\n <Timeline.Badge>\n <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n </Timeline.Badge>\n <Timeline.Body>This is a message</Timeline.Body>\n </Timeline.Item>\n <Timeline.Item>\n <Timeline.Badge>\n <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n </Timeline.Badge>\n <Timeline.Body>This is a message</Timeline.Body>\n </Timeline.Item>\n <Timeline.Item>\n <Timeline.Badge>\n <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n </Timeline.Badge>\n <Timeline.Body>This is a message</Timeline.Body>\n </Timeline.Item>\n </Timeline>\n)"
|
|
7117
|
+
"id": "components-timeline--default"
|
|
7535
7118
|
},
|
|
7536
7119
|
{
|
|
7537
|
-
"id": "components-timeline-features--clip-sidebar"
|
|
7538
|
-
"code": "() => (\n <Timeline clipSidebar>\n <Timeline.Item>\n <Timeline.Badge>\n <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n </Timeline.Badge>\n <Timeline.Body>This is a message</Timeline.Body>\n </Timeline.Item>\n <Timeline.Item>\n <Timeline.Badge>\n <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n </Timeline.Badge>\n <Timeline.Body>This is a message</Timeline.Body>\n </Timeline.Item>\n </Timeline>\n)"
|
|
7120
|
+
"id": "components-timeline-features--clip-sidebar"
|
|
7539
7121
|
},
|
|
7540
7122
|
{
|
|
7541
|
-
"id": "components-timeline-features--condensed-items"
|
|
7542
|
-
"code": "() => (\n <Timeline>\n <Timeline.Item condensed>\n <Timeline.Badge>\n <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n </Timeline.Badge>\n <Timeline.Body>This is a message</Timeline.Body>\n </Timeline.Item>\n <Timeline.Item condensed>\n <Timeline.Badge>\n <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n </Timeline.Badge>\n <Timeline.Body>This is a message</Timeline.Body>\n </Timeline.Item>\n <Timeline.Break />\n <Timeline.Item condensed>\n <Timeline.Badge>\n <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n </Timeline.Badge>\n <Timeline.Body>This is a message</Timeline.Body>\n </Timeline.Item>\n <Timeline.Item condensed>\n <Timeline.Badge>\n <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n </Timeline.Badge>\n <Timeline.Body>This is a message</Timeline.Body>\n </Timeline.Item>\n </Timeline>\n)"
|
|
7123
|
+
"id": "components-timeline-features--condensed-items"
|
|
7543
7124
|
},
|
|
7544
7125
|
{
|
|
7545
|
-
"id": "components-timeline-features--timeline-break"
|
|
7546
|
-
"code": "() => (\n <Timeline>\n <Timeline.Item>\n <Timeline.Badge className={classes.BadgeWithDoneBackground}>\n <Octicon\n icon={GitMergeIcon}\n className={classes.GitMergeIcon}\n aria-label=\"Merged\"\n />\n </Timeline.Badge>\n <Timeline.Body>This is a message</Timeline.Body>\n </Timeline.Item>\n <Timeline.Break />\n <Timeline.Item>\n <Timeline.Badge>\n <Octicon icon={GitBranchIcon} aria-label=\"Branch\" />\n </Timeline.Badge>\n <Timeline.Body>This is a message</Timeline.Body>\n </Timeline.Item>\n </Timeline>\n)"
|
|
7126
|
+
"id": "components-timeline-features--timeline-break"
|
|
7547
7127
|
},
|
|
7548
7128
|
{
|
|
7549
|
-
"id": "components-timeline-features--with-inline-links"
|
|
7550
|
-
"code": "() => (\n <Timeline>\n <Timeline.Item>\n <Timeline.Badge>\n <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n </Timeline.Badge>\n <Timeline.Body>\n <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n Monalisa\n </Link>\n enabled auto-merge (squash)\n </Timeline.Body>\n </Timeline.Item>\n </Timeline>\n)"
|
|
7129
|
+
"id": "components-timeline-features--with-inline-links"
|
|
7551
7130
|
}
|
|
7552
7131
|
],
|
|
7553
7132
|
"importPath": "@primer/react",
|
|
@@ -7591,44 +7170,34 @@
|
|
|
7591
7170
|
"a11yReviewed": "2025-01-08",
|
|
7592
7171
|
"stories": [
|
|
7593
7172
|
{
|
|
7594
|
-
"id": "components-toggleswitch--default"
|
|
7595
|
-
"code": "() => (\n <>\n <Text id=\"toggle\" className={classes.TextMediumBold}>\n Toggle label\n </Text>\n <ToggleSwitch aria-labelledby=\"toggle\" />\n </>\n)"
|
|
7173
|
+
"id": "components-toggleswitch--default"
|
|
7596
7174
|
},
|
|
7597
7175
|
{
|
|
7598
|
-
"id": "components-toggleswitch-features--small"
|
|
7599
|
-
"code": "() => (\n <ToggleSwitchStoryWrapper>\n <span id=\"toggle\" className={styles.ToggleLabel}>\n Toggle label\n </span>\n <ToggleSwitch size=\"small\" aria-labelledby=\"toggle\" />\n </ToggleSwitchStoryWrapper>\n)"
|
|
7176
|
+
"id": "components-toggleswitch-features--small"
|
|
7600
7177
|
},
|
|
7601
7178
|
{
|
|
7602
|
-
"id": "components-toggleswitch-features--with-caption"
|
|
7603
|
-
"code": "() => (\n <div className={styles.Row}>\n <div className={styles.ColGrow}>\n <span className={styles.SwitchLabel} id=\"switchLabel\">\n Notifications\n </span>\n <span className={styles.SwitchCaption} id=\"switchCaption\">\n Notifications will be delivered via email and the GitHub notification\n center\n </span>\n </div>\n <ToggleSwitch\n aria-labelledby=\"switchLabel\"\n aria-describedby=\"switchCaption\"\n />\n </div>\n)"
|
|
7179
|
+
"id": "components-toggleswitch-features--with-caption"
|
|
7604
7180
|
},
|
|
7605
7181
|
{
|
|
7606
|
-
"id": "components-toggleswitch-features--disabled"
|
|
7607
|
-
"code": "() => (\n <ToggleSwitchStoryWrapper>\n <span id=\"toggle\" className={styles.ToggleLabel}>\n Toggle label\n </span>\n <ToggleSwitch disabled aria-labelledby=\"toggle\" />\n </ToggleSwitchStoryWrapper>\n)"
|
|
7182
|
+
"id": "components-toggleswitch-features--disabled"
|
|
7608
7183
|
},
|
|
7609
7184
|
{
|
|
7610
|
-
"id": "components-toggleswitch-features--checked"
|
|
7611
|
-
"code": "() => (\n <ToggleSwitchStoryWrapper>\n <span id=\"toggle\" className={styles.ToggleLabel}>\n Toggle label\n </span>\n <ToggleSwitch checked aria-labelledby=\"toggle\" />\n </ToggleSwitchStoryWrapper>\n)"
|
|
7185
|
+
"id": "components-toggleswitch-features--checked"
|
|
7612
7186
|
},
|
|
7613
7187
|
{
|
|
7614
|
-
"id": "components-toggleswitch-features--checked-disabled"
|
|
7615
|
-
"code": "() => (\n <ToggleSwitchStoryWrapper>\n <span id=\"toggle\" className={styles.ToggleLabel}>\n Toggle label\n </span>\n <ToggleSwitch checked disabled aria-labelledby=\"toggle\" />\n </ToggleSwitchStoryWrapper>\n)"
|
|
7188
|
+
"id": "components-toggleswitch-features--checked-disabled"
|
|
7616
7189
|
},
|
|
7617
7190
|
{
|
|
7618
|
-
"id": "components-toggleswitch-features--loading"
|
|
7619
|
-
"code": "() => (\n <ToggleSwitchStoryWrapper>\n <span id=\"toggle\" className={styles.ToggleLabel}>\n Toggle label\n </span>\n <ToggleSwitch loading aria-labelledby=\"toggle\" />\n </ToggleSwitchStoryWrapper>\n)"
|
|
7191
|
+
"id": "components-toggleswitch-features--loading"
|
|
7620
7192
|
},
|
|
7621
7193
|
{
|
|
7622
|
-
"id": "components-toggleswitch-features--label-end"
|
|
7623
|
-
"code": "() => (\n <ToggleSwitchStoryWrapper>\n <span id=\"toggle\" className={styles.ToggleLabel}>\n Toggle label\n </span>\n <ToggleSwitch statusLabelPosition=\"end\" aria-labelledby=\"toggle\" />\n </ToggleSwitchStoryWrapper>\n)"
|
|
7194
|
+
"id": "components-toggleswitch-features--label-end"
|
|
7624
7195
|
},
|
|
7625
7196
|
{
|
|
7626
|
-
"id": "components-toggleswitch-features--controlled"
|
|
7627
|
-
"code": "() => {\n const [isOn, setIsOn] = React.useState(false)\n const onClick = React.useCallback(() => {\n setIsOn(!isOn)\n }, [setIsOn, isOn])\n const handleSwitchChange = (on: boolean) => {\n action(`new switch \"on\" state: ${on}`)\n }\n return (\n <>\n <div\n className={styles.Row}\n style={{\n maxWidth: '300px',\n }}\n >\n <span\n className={clsx(styles.ColGrow, styles.SwitchLabel)}\n id=\"switchLabel\"\n >\n Notifications\n </span>\n <ToggleSwitch\n onClick={onClick}\n onChange={handleSwitchChange}\n checked={isOn}\n aria-labelledby=\"switchLabel\"\n />\n </div>\n <p>The switch is {isOn ? 'on' : 'off'}</p>\n </>\n )\n}"
|
|
7197
|
+
"id": "components-toggleswitch-features--controlled"
|
|
7628
7198
|
},
|
|
7629
7199
|
{
|
|
7630
|
-
"id": "components-toggleswitch-features--with-custom-labels"
|
|
7631
|
-
"code": "() => (\n <ToggleSwitchStoryWrapper>\n <span id=\"toggle\" className={styles.ToggleLabel}>\n Toggle label\n </span>\n <ToggleSwitch\n buttonLabelOn=\"Active\"\n buttonLabelOff=\"Inactive\"\n aria-labelledby=\"toggle\"\n />\n </ToggleSwitchStoryWrapper>\n)"
|
|
7200
|
+
"id": "components-toggleswitch-features--with-custom-labels"
|
|
7632
7201
|
}
|
|
7633
7202
|
],
|
|
7634
7203
|
"importPath": "@primer/react",
|
|
@@ -7735,48 +7304,37 @@
|
|
|
7735
7304
|
"a11yReviewed": "2025-01-08",
|
|
7736
7305
|
"stories": [
|
|
7737
7306
|
{
|
|
7738
|
-
"id": "components-token--default"
|
|
7739
|
-
"code": "() => <Token text=\"token\" />"
|
|
7307
|
+
"id": "components-token--default"
|
|
7740
7308
|
},
|
|
7741
7309
|
{
|
|
7742
|
-
"id": "components-token-features--interactive-token"
|
|
7743
|
-
"code": "() => {\n return (\n <div className={classes.TokenRow}>\n <Token\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n text=\"Link\"\n />\n <Token as=\"button\" onClick={action('clicked')} text=\"Button\" />\n </div>\n )\n}"
|
|
7310
|
+
"id": "components-token-features--interactive-token"
|
|
7744
7311
|
},
|
|
7745
7312
|
{
|
|
7746
|
-
"id": "components-token-features--token-with-leading-visual"
|
|
7747
|
-
"code": "() => {\n return <Token text=\"token\" leadingVisual={GitBranchIcon} />\n}"
|
|
7313
|
+
"id": "components-token-features--token-with-leading-visual"
|
|
7748
7314
|
},
|
|
7749
7315
|
{
|
|
7750
|
-
"id": "components-token-features--token-with-on-remove-fn"
|
|
7751
|
-
"code": "({ ...args }) => {\n return (\n <div className={classes.TokenRow}>\n <Token text=\"token\" onRemove={action('remove me')} {...args} />\n <Token\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n onRemove={action('remove me')}\n text=\"Link\"\n {...args}\n />\n <Token\n as=\"button\"\n onClick={action('clicked')}\n onRemove={action('remove me')}\n text=\"Button\"\n {...args}\n />\n </div>\n )\n}"
|
|
7316
|
+
"id": "components-token-features--token-with-on-remove-fn"
|
|
7752
7317
|
},
|
|
7753
7318
|
{
|
|
7754
|
-
"id": "components-token-features--default-issue-label-token"
|
|
7755
|
-
"code": "() => {\n return <IssueLabelToken text=\"good first issue\" />\n}"
|
|
7319
|
+
"id": "components-token-features--default-issue-label-token"
|
|
7756
7320
|
},
|
|
7757
7321
|
{
|
|
7758
|
-
"id": "components-token-features--interactive-issue-label-token"
|
|
7759
|
-
"code": "() => {\n return (\n <div className={classes.TokenRow}>\n <IssueLabelToken\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n text=\"Link\"\n />\n <IssueLabelToken as=\"button\" onClick={action('clicked')} text=\"Button\" />\n </div>\n )\n}"
|
|
7322
|
+
"id": "components-token-features--interactive-issue-label-token"
|
|
7760
7323
|
},
|
|
7761
7324
|
{
|
|
7762
|
-
"id": "components-token-features--issue-label-token-with-on-remove-fn"
|
|
7763
|
-
"code": "() => {\n return (\n <div className={classes.TokenRow}>\n <IssueLabelToken text=\"token\" onRemove={action('remove me')} />\n <IssueLabelToken\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n onRemove={action('remove me')}\n text=\"Link\"\n />\n <IssueLabelToken\n as=\"button\"\n onClick={action('clicked')}\n onRemove={action('remove me')}\n text=\"Button\"\n />\n </div>\n )\n}"
|
|
7325
|
+
"id": "components-token-features--issue-label-token-with-on-remove-fn"
|
|
7764
7326
|
},
|
|
7765
7327
|
{
|
|
7766
|
-
"id": "components-token-features--small-token"
|
|
7767
|
-
"code": "() => <Token text=\"token\" size=\"small\" />"
|
|
7328
|
+
"id": "components-token-features--small-token"
|
|
7768
7329
|
},
|
|
7769
7330
|
{
|
|
7770
|
-
"id": "components-token-features--large-token"
|
|
7771
|
-
"code": "() => <Token text=\"token\" size=\"xlarge\" />"
|
|
7331
|
+
"id": "components-token-features--large-token"
|
|
7772
7332
|
},
|
|
7773
7333
|
{
|
|
7774
|
-
"id": "components-token-features--x-large-token"
|
|
7775
|
-
"code": "() => <Token text=\"token\" size=\"xlarge\" />"
|
|
7334
|
+
"id": "components-token-features--x-large-token"
|
|
7776
7335
|
},
|
|
7777
7336
|
{
|
|
7778
|
-
"id": "components-token-features--issue-label-token-custom-colors"
|
|
7779
|
-
"code": "() => {\n return (\n <div className={classes.TokenColumn}>\n <div className={classes.TokenRow}>\n <IssueLabelToken\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n text=\"Link\"\n fillColor=\"#0366d6\"\n />\n <IssueLabelToken\n as=\"button\"\n onClick={action('clicked')}\n text=\"Button\"\n fillColor=\"lightpink\"\n />\n </div>\n <h3>Color examples</h3>\n <div className={classes.TokenWrapRow}>\n <IssueLabelToken\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n text=\"😀 Link\"\n fillColor=\"#8c50c8\"\n />\n <IssueLabelToken\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n text=\"Token\"\n fillColor=\"#a9d3bc\"\n />\n <IssueLabelToken\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n text=\"🚨 Problem\"\n fillColor=\"#98afa7\"\n />\n <IssueLabelToken\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n text=\"📥 Inbox\"\n fillColor=\"#573807\"\n />\n <IssueLabelToken\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n text=\"deeppink\"\n fillColor=\"#b7b41e\"\n />\n <IssueLabelToken\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n text=\"👹 Link\"\n fillColor=\"#0f65b1\"\n />\n <IssueLabelToken\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n text=\"Tiger\"\n fillColor=\"#e7bc68\"\n />\n <IssueLabelToken\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n text=\"🐛 coral\"\n fillColor=\"#D6F2DE\"\n />\n <IssueLabelToken\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n text=\"Long label\"\n fillColor=\"#161E37\"\n />\n <IssueLabelToken\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n text=\"✅ Done\"\n fillColor=\"#232323\"\n />\n <IssueLabelToken\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n text=\"Hello\"\n fillColor=\"#E0E0E0\"\n />\n <IssueLabelToken\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n text=\"Lorem\"\n fillColor=\"#aed531\"\n />\n <IssueLabelToken\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n text=\"Lorem\"\n fillColor=\"#d980fc\"\n />\n <IssueLabelToken\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n text=\"Lorem\"\n fillColor=\"#e7f922\"\n />\n <IssueLabelToken\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n text=\"🚀 Lorem\"\n fillColor=\"#ef70e9\"\n />\n <IssueLabelToken\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n text=\"Lorem\"\n fillColor=\"#72ea84\"\n />\n <IssueLabelToken\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n text=\"Lorem\"\n fillColor=\"#87e50b\"\n />\n <IssueLabelToken\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n text=\"🤷 Lorem\"\n fillColor=\"#fcf646\"\n />\n <IssueLabelToken\n as=\"a\"\n href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n text=\"💡 Light\"\n fillColor=\"#E40C74\"\n />\n </div>\n </div>\n )\n}"
|
|
7337
|
+
"id": "components-token-features--issue-label-token-custom-colors"
|
|
7780
7338
|
}
|
|
7781
7339
|
],
|
|
7782
7340
|
"importPath": "@primer/react",
|
|
@@ -7881,16 +7439,13 @@
|
|
|
7881
7439
|
"a11yReviewed": false,
|
|
7882
7440
|
"stories": [
|
|
7883
7441
|
{
|
|
7884
|
-
"id": "deprecated-components-tooltip--default"
|
|
7885
|
-
"code": "() => (\n <>\n <div className={classes.BannerContainer}>\n <Banner\n title=\"Planned for deprecation\"\n description={\n <div data-a11y-link-underlines=\"true\">\n There are plans to deprecate this component in a future release. We\n recommend using{' '}\n <Link\n inline={true}\n href=\"/react/storybook/?path=/story/components-tooltipv2--default\"\n >\n Tooltip\n </Link>{' '}\n instead.\n </div>\n }\n variant=\"warning\"\n />\n </div>\n <div className={classes.PaddedContainer}>\n <Tooltip aria-label=\"Hello, Tooltip!\">\n <Button>Hover me</Button>\n </Tooltip>\n </div>\n </>\n)"
|
|
7442
|
+
"id": "deprecated-components-tooltip--default"
|
|
7886
7443
|
},
|
|
7887
7444
|
{
|
|
7888
|
-
"id": "deprecated-components-tooltip-features--all-directions"
|
|
7889
|
-
"code": "() => (\n <div className={classes.AllDirectionsRow}>\n <Tooltip direction=\"n\" aria-label=\"Supplementary text\">\n <Button>North</Button>\n </Tooltip>\n <Tooltip direction=\"s\" aria-label=\"Supplementary text\">\n <Button>South</Button>\n </Tooltip>\n <Tooltip direction=\"e\" aria-label=\"Supplementary text\">\n <Button>East</Button>\n </Tooltip>\n <Tooltip direction=\"w\" aria-label=\"Supplementary text\">\n <Button>West</Button>\n </Tooltip>\n <Tooltip direction=\"ne\" aria-label=\"Supplementary text\">\n <Button>North East</Button>\n </Tooltip>\n <Tooltip direction=\"nw\" aria-label=\"Supplementary text\">\n <Button>North West</Button>\n </Tooltip>\n <Tooltip direction=\"se\" aria-label=\"Supplementary text\">\n <Button>Southeast</Button>\n </Tooltip>\n <Tooltip direction=\"sw\" aria-label=\"Supplementary text\">\n <Button>Southwest</Button>\n </Tooltip>\n </div>\n)"
|
|
7445
|
+
"id": "deprecated-components-tooltip-features--all-directions"
|
|
7890
7446
|
},
|
|
7891
7447
|
{
|
|
7892
|
-
"id": "deprecated-components-tooltip-features--icon-button-tooltip"
|
|
7893
|
-
"code": "() => (\n <div className={classes.PaddedContainer}>\n <Tooltip aria-label=\"Search\">\n <IconButton icon={SearchIcon} aria-label=\"Search\" />\n </Tooltip>\n </div>\n)"
|
|
7448
|
+
"id": "deprecated-components-tooltip-features--icon-button-tooltip"
|
|
7894
7449
|
}
|
|
7895
7450
|
],
|
|
7896
7451
|
"importPath": "@primer/react/deprecated",
|
|
@@ -7933,40 +7488,31 @@
|
|
|
7933
7488
|
"importPath": "@primer/react/next",
|
|
7934
7489
|
"stories": [
|
|
7935
7490
|
{
|
|
7936
|
-
"id": "components-tooltipv2--default"
|
|
7937
|
-
"code": "() => (\n <div className={classes.PaddedContainer}>\n <Tooltip text=\"This change can't be undone.\">\n <Button>Delete</Button>\n </Tooltip>\n </div>\n)"
|
|
7491
|
+
"id": "components-tooltipv2--default"
|
|
7938
7492
|
},
|
|
7939
7493
|
{
|
|
7940
|
-
"id": "components-tooltipv2-features--anchor-has-margin"
|
|
7941
|
-
"code": "() => (\n <div className={classes.PaddedContainer}>\n <Tooltip text=\"Tooltip is still centered\">\n <Button className={classes.MarginLeftButton}>\n Button has 16px margin Left\n </Button>\n </Tooltip>\n </div>\n)"
|
|
7494
|
+
"id": "components-tooltipv2-features--anchor-has-margin"
|
|
7942
7495
|
},
|
|
7943
7496
|
{
|
|
7944
|
-
"id": "components-tooltipv2-features--label-type"
|
|
7945
|
-
"code": "() => (\n <div>\n <Tooltip text=\"Contribution Documentation for 'Primer React'\" type=\"label\">\n <Link\n href=\"https://github.com/primer/react/contributor-docs/CONTRIBUTING.md\"\n className={classes.LabelLink}\n >\n <Octicon icon={BookIcon} className={classes.LabelIcon} />\n </Link>\n </Tooltip>\n </div>\n)"
|
|
7497
|
+
"id": "components-tooltipv2-features--label-type"
|
|
7946
7498
|
},
|
|
7947
7499
|
{
|
|
7948
|
-
"id": "components-tooltipv2-features--description-type"
|
|
7949
|
-
"code": "() => (\n <div className={classes.PaddedContainer}>\n <Tooltip text=\"Supplementary text\" direction=\"n\">\n <Button>Save</Button>\n </Tooltip>\n </div>\n)"
|
|
7500
|
+
"id": "components-tooltipv2-features--description-type"
|
|
7950
7501
|
},
|
|
7951
7502
|
{
|
|
7952
|
-
"id": "components-tooltipv2-features--icon-button-with-description"
|
|
7953
|
-
"code": "() => (\n <div className={classes.PaddedContainer}>\n <Tooltip text=\"Supplementary text for icon button\" direction=\"e\">\n <IconButton icon={SearchIcon} aria-label=\"Search\" />\n </Tooltip>\n </div>\n)"
|
|
7503
|
+
"id": "components-tooltipv2-features--icon-button-with-description"
|
|
7954
7504
|
},
|
|
7955
7505
|
{
|
|
7956
|
-
"id": "components-tooltipv2-features--all-directions"
|
|
7957
|
-
"code": "() => (\n <div className={classes.AllDirectionsRow}>\n <Tooltip direction=\"n\" text=\"Supplementary text\">\n <Button>North</Button>\n </Tooltip>\n <Tooltip direction=\"s\" text=\"Supplementary text\">\n <Button>South</Button>\n </Tooltip>\n <Tooltip direction=\"e\" text=\"Supplementary text\">\n <Button>East</Button>\n </Tooltip>\n <Tooltip direction=\"w\" text=\"Supplementary text\">\n <Button>West</Button>\n </Tooltip>\n <Tooltip direction=\"ne\" text=\"Supplementary text\">\n <Button>North East</Button>\n </Tooltip>\n <Tooltip direction=\"nw\" text=\"Supplementary text\">\n <Button>North West</Button>\n </Tooltip>\n <Tooltip direction=\"se\" text=\"Supplementary text\">\n <Button>Southeast</Button>\n </Tooltip>\n <Tooltip direction=\"sw\" text=\"Supplementary text\">\n <Button>Southwest</Button>\n </Tooltip>\n </div>\n)"
|
|
7506
|
+
"id": "components-tooltipv2-features--all-directions"
|
|
7958
7507
|
},
|
|
7959
7508
|
{
|
|
7960
|
-
"id": "components-tooltipv2-features--multiline-text"
|
|
7961
|
-
"code": "() => (\n <div>\n <Tooltip\n direction=\"e\"\n text=\"Random long text that needs to be wrapped and be multipline and have some paddings around\"\n >\n <Button>Multiline East</Button>\n </Tooltip>\n </div>\n)"
|
|
7509
|
+
"id": "components-tooltipv2-features--multiline-text"
|
|
7962
7510
|
},
|
|
7963
7511
|
{
|
|
7964
|
-
"id": "components-tooltipv2-features--calculated-direction"
|
|
7965
|
-
"code": "() => (\n <div className={classes.AllDirectionsRow}>\n <Tooltip\n direction=\"w\"\n text=\"But appears in the east direction due to not having enough space in the west\"\n >\n <Button>West</Button>\n </Tooltip>\n\n <Tooltip text=\"The direction here is north by default but there is not enough space in the north therefore the tooltip appears in the south\">\n <Button>North</Button>\n </Tooltip>\n </div>\n)"
|
|
7512
|
+
"id": "components-tooltipv2-features--calculated-direction"
|
|
7966
7513
|
},
|
|
7967
7514
|
{
|
|
7968
|
-
"id": "components-tooltipv2-features--on-action-menu-anchor"
|
|
7969
|
-
"code": "() => (\n <div className={classes.ActionMenuRow}>\n <ActionMenu>\n <ActionMenu.Anchor>\n <Tooltip text=\"Supplementary text to add here\" direction=\"n\">\n <Button\n leadingVisual={GitBranchIcon}\n trailingAction={TriangleDownIcon}\n >\n ActionMenu.Anchor w/ t\n </Button>\n </Tooltip>\n </ActionMenu.Anchor>\n <ActionMenu.Overlay width=\"medium\">\n <ActionList>\n <ActionList.Item onSelect={() => alert('Main')}>\n <ActionList.LeadingVisual>\n <CheckIcon />\n </ActionList.LeadingVisual>\n main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item onSelect={() => alert('Branch 1')}>\n branch-1\n </ActionList.Item>\n <ActionList.Item onSelect={() => alert('Branch 2')}>\n branch-2\n </ActionList.Item>\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n <ActionMenu>\n <Tooltip text=\"Supplementary text to add here\" direction=\"n\">\n <ActionMenu.Button leadingVisual={GitBranchIcon}>\n ActionMenu.Button w/ t\n </ActionMenu.Button>\n </Tooltip>\n <ActionMenu.Overlay width=\"medium\">\n <ActionList>\n <ActionList.Item onSelect={() => alert('Main')}>\n <ActionList.LeadingVisual>\n <CheckIcon />\n </ActionList.LeadingVisual>\n main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item onSelect={() => alert('Branch 1')}>\n branch-1\n </ActionList.Item>\n <ActionList.Item onSelect={() => alert('Branch 2')}>\n branch-2\n </ActionList.Item>\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n <ActionMenu>\n <ActionMenu.Anchor>\n <Button leadingVisual={GitBranchIcon} trailingAction={TriangleDownIcon}>\n ActionMenu.Anchor\n </Button>\n </ActionMenu.Anchor>\n <ActionMenu.Overlay width=\"medium\">\n <ActionList>\n <ActionList.Item onSelect={() => alert('Main')}>\n <ActionList.LeadingVisual>\n <CheckIcon />\n </ActionList.LeadingVisual>\n main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item onSelect={() => alert('Branch 1')}>\n branch-1\n </ActionList.Item>\n <ActionList.Item onSelect={() => alert('Branch 2')}>\n branch-2\n </ActionList.Item>\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n <ActionMenu>\n <ActionMenu.Button leadingVisual={GitBranchIcon}>\n ActionMenu.Button\n </ActionMenu.Button>\n\n <ActionMenu.Overlay width=\"medium\">\n <ActionList>\n <ActionList.Item onSelect={() => alert('Main')}>\n <ActionList.LeadingVisual>\n <CheckIcon />\n </ActionList.LeadingVisual>\n main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item onSelect={() => alert('Branch 1')}>\n branch-1\n </ActionList.Item>\n <ActionList.Item onSelect={() => alert('Branch 2')}>\n branch-2\n </ActionList.Item>\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n </div>\n)"
|
|
7515
|
+
"id": "components-tooltipv2-features--on-action-menu-anchor"
|
|
7970
7516
|
}
|
|
7971
7517
|
],
|
|
7972
7518
|
"props": [
|
|
@@ -8010,16 +7556,13 @@
|
|
|
8010
7556
|
"a11yReviewed": false,
|
|
8011
7557
|
"stories": [
|
|
8012
7558
|
{
|
|
8013
|
-
"id": "experimental-components-topictag--default"
|
|
8014
|
-
"code": "() => <TopicTag>react</TopicTag>"
|
|
7559
|
+
"id": "experimental-components-topictag--default"
|
|
8015
7560
|
},
|
|
8016
7561
|
{
|
|
8017
|
-
"id": "experimental-components-topictag-features--as-button"
|
|
8018
|
-
"code": "() => <TopicTag as=\"button\">react</TopicTag>"
|
|
7562
|
+
"id": "experimental-components-topictag-features--as-button"
|
|
8019
7563
|
},
|
|
8020
7564
|
{
|
|
8021
|
-
"id": "experimental-components-topictag-features--as-group"
|
|
8022
|
-
"code": "() => {\n const tags = [\n 'react',\n 'nodejs',\n 'javascript',\n 'd3',\n 'teachers',\n 'community',\n 'education',\n 'programming',\n 'curriculum',\n 'math',\n ]\n return (\n <TopicTagGroup>\n {tags.map((tag) => (\n <TopicTag key={tag} href={`/topics/${tag}`}>\n {tag}\n </TopicTag>\n ))}\n </TopicTagGroup>\n )\n}"
|
|
7565
|
+
"id": "experimental-components-topictag-features--as-group"
|
|
8023
7566
|
}
|
|
8024
7567
|
],
|
|
8025
7568
|
"importPath": "@primer/react/experimental",
|
|
@@ -8056,32 +7599,25 @@
|
|
|
8056
7599
|
"a11yReviewed": "2025-01-08",
|
|
8057
7600
|
"stories": [
|
|
8058
7601
|
{
|
|
8059
|
-
"id": "components-treeview--default"
|
|
8060
|
-
"code": "() => (\n <nav aria-label=\"Files changed\">\n <TreeView aria-label=\"Files changed\">\n <TreeView.Item id=\"src\" defaultExpanded>\n <TreeView.LeadingVisual>\n <TreeView.DirectoryIcon />\n </TreeView.LeadingVisual>\n src\n <TreeView.SubTree>\n <TreeView.Item id=\"src/Avatar.tsx\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n Avatar.tsx\n <TreeView.TrailingVisual label=\"Added\">\n <Octicon icon={DiffAddedIcon} className={classes.SuccessIcon} />\n </TreeView.TrailingVisual>\n </TreeView.Item>\n <TreeView.Item id=\"src/Button.tsx\" current>\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n Button.tsx\n <TreeView.TrailingVisual label=\"Modified\">\n <Octicon\n icon={DiffModifiedIcon}\n className={classes.AttentionIcon}\n />\n </TreeView.TrailingVisual>\n </TreeView.Item>\n </TreeView.SubTree>\n </TreeView.Item>\n <TreeView.Item id=\"package.json\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n package.json\n <TreeView.TrailingVisual label=\"Modified\">\n <Octicon icon={DiffModifiedIcon} className={classes.AttentionIcon} />\n </TreeView.TrailingVisual>\n </TreeView.Item>\n </TreeView>\n </nav>\n)"
|
|
7602
|
+
"id": "components-treeview--default"
|
|
8061
7603
|
},
|
|
8062
7604
|
{
|
|
8063
|
-
"id": "components-treeview-features--files"
|
|
8064
|
-
"code": "() => (\n <nav aria-label=\"Files\">\n <TreeView aria-label=\"Files\" truncate={false}>\n <TreeView.Item id=\"src\" defaultExpanded>\n <TreeView.LeadingVisual>\n <TreeView.DirectoryIcon />\n </TreeView.LeadingVisual>\n src\n <TreeView.SubTree>\n <TreeView.Item id=\"src/Avatar.tsx\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n Avatar.tsx\n </TreeView.Item>\n <TreeView.Item id=\"src/Button\" current>\n <TreeView.LeadingVisual>\n <TreeView.DirectoryIcon />\n </TreeView.LeadingVisual>\n Button\n <TreeView.SubTree>\n <TreeView.Item id=\"src/Button/Button.tsx\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n Button.tsx\n </TreeView.Item>\n <TreeView.Item id=\"src/Button/Button.test.tsx\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n Button.test.tsx\n </TreeView.Item>\n </TreeView.SubTree>\n </TreeView.Item>\n <TreeView.Item id=\"src/ReallyLongFileNameThatShouldBeTruncated.tsx\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n ReallyLongFileNameThatShouldBeTruncated.tsx\n </TreeView.Item>\n </TreeView.SubTree>\n </TreeView.Item>\n <TreeView.Item\n id=\"public\"\n // eslint-disable-next-line no-console\n onExpandedChange={(isExpanded) =>\n console.log(\n `${isExpanded ? 'Expanded' : 'Collapsed'} \"public\" folder `,\n )\n }\n >\n <TreeView.LeadingVisual>\n <TreeView.DirectoryIcon />\n </TreeView.LeadingVisual>\n public\n <TreeView.SubTree>\n <TreeView.Item id=\"public/index.html\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n index.html\n </TreeView.Item>\n <TreeView.Item id=\"public/favicon.ico\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n favicon.ico\n </TreeView.Item>\n </TreeView.SubTree>\n </TreeView.Item>\n <TreeView.Item id=\"package.json\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n package.json\n </TreeView.Item>\n </TreeView>\n </nav>\n)"
|
|
7605
|
+
"id": "components-treeview-features--files"
|
|
8065
7606
|
},
|
|
8066
7607
|
{
|
|
8067
|
-
"id": "components-treeview-features--files-changed"
|
|
8068
|
-
"code": "() => {\n return (\n <nav aria-label=\"Files\">\n <TreeView aria-label=\"Files\" truncate={false}>\n <TreeView.Item id=\"src\" defaultExpanded>\n <TreeView.LeadingVisual>\n <TreeView.DirectoryIcon />\n </TreeView.LeadingVisual>\n src\n <TreeView.SubTree>\n <TreeView.Item id=\"src/Avatar.tsx\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n Avatar.tsx\n <TreeView.TrailingVisual label=\"added\">\n <Octicon icon={DiffAddedIcon} className={classes.SuccessIcon} />\n </TreeView.TrailingVisual>\n </TreeView.Item>\n <TreeView.Item id=\"src/Button\" defaultExpanded>\n <TreeView.LeadingVisual>\n <TreeView.DirectoryIcon />\n </TreeView.LeadingVisual>\n Button\n <TreeView.SubTree>\n <TreeView.Item id=\"src/Button/Button.tsx\" current>\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n Button.tsx\n <TreeView.TrailingVisual label=\"modified\">\n <Octicon\n icon={DiffModifiedIcon}\n className={classes.AttentionIcon}\n />\n </TreeView.TrailingVisual>\n </TreeView.Item>\n <TreeView.Item id=\"src/Button/Button.test.tsx\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n Button.test.tsx\n <TreeView.TrailingVisual label=\"modified\">\n <Octicon\n icon={DiffModifiedIcon}\n className={classes.AttentionIcon}\n />\n </TreeView.TrailingVisual>\n </TreeView.Item>\n </TreeView.SubTree>\n </TreeView.Item>\n <TreeView.Item id=\"src/ReallyLongFileNameThatShouldBeTruncated.tsx\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n ReallyLongFileNameThatShouldBeTruncated.tsx\n <TreeView.TrailingVisual label=\"modified\">\n <Octicon\n icon={DiffModifiedIcon}\n className={classes.AttentionIcon}\n />\n </TreeView.TrailingVisual>\n </TreeView.Item>\n </TreeView.SubTree>\n </TreeView.Item>\n <TreeView.Item id=\"public\" defaultExpanded>\n <TreeView.LeadingVisual>\n <TreeView.DirectoryIcon />\n </TreeView.LeadingVisual>\n public\n <TreeView.SubTree>\n <TreeView.Item id=\"public/index.html\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n index.html\n <TreeView.TrailingVisual label=\"renamed\">\n <Octicon icon={DiffRenamedIcon} />\n </TreeView.TrailingVisual>\n </TreeView.Item>\n <TreeView.Item id=\"public/favicon.ico\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n favicon.ico\n <TreeView.TrailingVisual label=\"removed\">\n <Octicon\n icon={DiffRemovedIcon}\n className={classes.DangerIcon}\n />\n </TreeView.TrailingVisual>\n </TreeView.Item>\n </TreeView.SubTree>\n </TreeView.Item>\n </TreeView>\n </nav>\n )\n}"
|
|
7608
|
+
"id": "components-treeview-features--files-changed"
|
|
8069
7609
|
},
|
|
8070
7610
|
{
|
|
8071
|
-
"id": "components-treeview-features--async-success"
|
|
8072
|
-
"code": "(args) => {\n const [isLoading, setIsLoading] = React.useState(false)\n const [asyncItems, setAsyncItems] = React.useState<string[]>([])\n let state: SubTreeState = 'initial'\n if (isLoading) {\n state = 'loading'\n } else if (asyncItems.length > 0) {\n state = 'done'\n }\n return (\n <nav aria-label=\"Files\">\n <TreeView aria-label=\"Files\">\n <TreeView.Item id=\"file-1\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n Some file\n </TreeView.Item>\n <TreeView.Item\n id=\"async-directory\"\n onExpandedChange={async (isExpanded) => {\n if (asyncItems.length === 0 && isExpanded) {\n setIsLoading(true)\n\n // Load items\n const items = await loadItems(args.responseTime)\n setIsLoading(false)\n setAsyncItems(items)\n }\n }}\n >\n <TreeView.LeadingVisual>\n <TreeView.DirectoryIcon />\n </TreeView.LeadingVisual>\n Directory with async items\n <TreeView.SubTree state={state}>\n {asyncItems.map((item) => (\n <TreeView.Item id={`item-${item}`} key={item}>\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n {item}\n </TreeView.Item>\n ))}\n </TreeView.SubTree>\n </TreeView.Item>\n <TreeView.Item id=\"another-file\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n Another file\n </TreeView.Item>\n </TreeView>\n </nav>\n )\n}"
|
|
7611
|
+
"id": "components-treeview-features--async-success"
|
|
8073
7612
|
},
|
|
8074
7613
|
{
|
|
8075
|
-
"id": "components-treeview-features--async-error"
|
|
8076
|
-
"code": "(args) => {\n const [isLoading, setIsLoading] = React.useState(false)\n const [asyncItems, setAsyncItems] = React.useState<string[]>([])\n const [error, setError] = React.useState<Error | null>(null)\n let state: SubTreeState = 'initial'\n if (isLoading) {\n state = 'loading'\n } else if (error) {\n state = 'error'\n } else if (asyncItems.length > 0) {\n state = 'done'\n }\n async function loadItems() {\n if (asyncItems.length === 0) {\n setIsLoading(true)\n try {\n // Try to load items\n const items = await alwaysFails(args.responseTime)\n setAsyncItems(items)\n } catch (error) {\n setError(error as Error)\n } finally {\n setIsLoading(false)\n }\n }\n }\n return (\n <TreeView aria-label=\"Files\">\n <TreeView.Item id=\"some-file\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n Some file\n </TreeView.Item>\n <TreeView.Item\n id=\"async-directory\"\n onExpandedChange={(isExpanded) => {\n if (isExpanded) {\n loadItems()\n }\n }}\n >\n <TreeView.LeadingVisual>\n <TreeView.DirectoryIcon />\n </TreeView.LeadingVisual>\n Directory with async items\n <TreeView.SubTree state={state}>\n {error ? (\n <TreeView.ErrorDialog\n onRetry={() => {\n setError(null)\n loadItems()\n }}\n onDismiss={() => {\n setError(null)\n }}\n >\n {error.message}\n </TreeView.ErrorDialog>\n ) : null}\n {asyncItems.map((item) => (\n <TreeView.Item key={item} id={`item-${item}`}>\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n {item}\n </TreeView.Item>\n ))}\n </TreeView.SubTree>\n </TreeView.Item>\n <TreeView.Item id=\"another-file\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n Another file\n </TreeView.Item>\n </TreeView>\n )\n}"
|
|
7614
|
+
"id": "components-treeview-features--async-error"
|
|
8077
7615
|
},
|
|
8078
7616
|
{
|
|
8079
|
-
"id": "components-treeview-features--async-with-count"
|
|
8080
|
-
"code": "(args) => {\n const [isLoading, setIsLoading] = React.useState(false)\n const [asyncItems, setAsyncItems] = React.useState<string[]>([])\n let state: SubTreeState = 'initial'\n if (isLoading) {\n state = 'loading'\n } else if (asyncItems.length > 0) {\n state = 'done'\n }\n return (\n <nav aria-label=\"Files\">\n <TreeView aria-label=\"Files\">\n <TreeView.Item id=\"some-file\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n Some file\n </TreeView.Item>\n <TreeView.Item\n id=\"async-directory\"\n onExpandedChange={async (isExpanded) => {\n if (asyncItems.length === 0 && isExpanded) {\n setIsLoading(true)\n\n // Load items\n const items = await loadItems(args.responseTime)\n setIsLoading(false)\n setAsyncItems(items)\n }\n }}\n >\n <TreeView.LeadingVisual>\n <TreeView.DirectoryIcon />\n </TreeView.LeadingVisual>\n Directory with async items\n <TreeView.SubTree state={state} count={args.count}>\n {asyncItems.map((item) => (\n <TreeView.Item key={item} id={`item-${item}`}>\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n {item}\n </TreeView.Item>\n ))}\n </TreeView.SubTree>\n </TreeView.Item>\n <TreeView.Item id=\"another-file\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n Another file\n </TreeView.Item>\n </TreeView>\n </nav>\n )\n}"
|
|
7617
|
+
"id": "components-treeview-features--async-with-count"
|
|
8081
7618
|
},
|
|
8082
7619
|
{
|
|
8083
|
-
"id": "components-treeview-features--controlled"
|
|
8084
|
-
"code": "() => {\n const [currentPath, setCurrentPath] = React.useState<string[]>([\n 'src',\n 'Avatar.tsx',\n ])\n const [tree, setTree] = React.useState<TreeItem[]>(initialTree)\n return (\n <div className={classes.ControlledContainer}>\n <div className={classes.ButtonContainer}>\n <Button onClick={() => setTree(collapseAll)}>Collapse all</Button>\n <Button onClick={() => setTree(expandAll)}>Expand all</Button>\n </div>\n <nav aria-label=\"Files\">\n <CurrentPathContext.Provider\n value={{\n currentPath,\n setCurrentPath,\n }}\n >\n <TreeView aria-label=\"Files\">\n {tree.map((item) => (\n <TreeItem\n key={item.data.name}\n item={item}\n path={[item.data.name]}\n onExpandedChange={(path, expanded) =>\n setTree((tree) => setExpanded(tree, path, expanded))\n }\n />\n ))}\n </TreeView>\n </CurrentPathContext.Provider>\n </nav>\n </div>\n )\n}"
|
|
7620
|
+
"id": "components-treeview-features--controlled"
|
|
8085
7621
|
}
|
|
8086
7622
|
],
|
|
8087
7623
|
"importPath": "@primer/react",
|
|
@@ -8296,20 +7832,16 @@
|
|
|
8296
7832
|
"a11yReviewed": "2025-01-08",
|
|
8297
7833
|
"stories": [
|
|
8298
7834
|
{
|
|
8299
|
-
"id": "components-truncate--default"
|
|
8300
|
-
"code": "() => <Truncate title=\"Some example text\">Some example text</Truncate>"
|
|
7835
|
+
"id": "components-truncate--default"
|
|
8301
7836
|
},
|
|
8302
7837
|
{
|
|
8303
|
-
"id": "components-truncate-features--expandable"
|
|
8304
|
-
"code": "() => (\n <Truncate title=\"Hover this example text\" expandable>\n Hover this example text\n </Truncate>\n)"
|
|
7838
|
+
"id": "components-truncate-features--expandable"
|
|
8305
7839
|
},
|
|
8306
7840
|
{
|
|
8307
|
-
"id": "components-truncate-features--inline"
|
|
8308
|
-
"code": "() => (\n <>\n <ArrowRightIcon />\n <Truncate title=\"Inline example text\" inline>\n Inline example text\n </Truncate>\n <ArrowLeftIcon />\n </>\n)"
|
|
7841
|
+
"id": "components-truncate-features--inline"
|
|
8309
7842
|
},
|
|
8310
7843
|
{
|
|
8311
|
-
"id": "components-truncate-features--max-width"
|
|
8312
|
-
"code": "() => (\n <Truncate title=\"Some example text with a max width\" maxWidth={200}>\n Some example text with a max width\n </Truncate>\n)"
|
|
7844
|
+
"id": "components-truncate-features--max-width"
|
|
8313
7845
|
}
|
|
8314
7846
|
],
|
|
8315
7847
|
"importPath": "@primer/react",
|
|
@@ -8348,32 +7880,28 @@
|
|
|
8348
7880
|
"a11yReviewed": "2025-01-08",
|
|
8349
7881
|
"stories": [
|
|
8350
7882
|
{
|
|
8351
|
-
"id": "components-underlinenav
|
|
8352
|
-
|
|
7883
|
+
"id": "components-underlinenav--default"
|
|
7884
|
+
},
|
|
7885
|
+
{
|
|
7886
|
+
"id": "components-underlinenav-features--default"
|
|
8353
7887
|
},
|
|
8354
7888
|
{
|
|
8355
|
-
"id": "components-underlinenav-features--with-icons"
|
|
8356
|
-
"code": "() => {\n return (\n <UnderlineNav aria-label=\"Repository with icons\">\n <UnderlineNav.Item leadingVisual={<CodeIcon />}>Code</UnderlineNav.Item>\n <UnderlineNav.Item leadingVisual={<EyeIcon />} counter={6}>\n Issues\n </UnderlineNav.Item>\n <UnderlineNav.Item\n aria-current=\"page\"\n leadingVisual={<GitPullRequestIcon />}\n >\n Pull Requests\n </UnderlineNav.Item>\n <UnderlineNav.Item leadingVisual={<CommentDiscussionIcon />} counter={7}>\n Discussions\n </UnderlineNav.Item>\n <UnderlineNav.Item leadingVisual={<ProjectIcon />}>\n Projects\n </UnderlineNav.Item>\n </UnderlineNav>\n )\n}"
|
|
7889
|
+
"id": "components-underlinenav-features--with-icons"
|
|
8357
7890
|
},
|
|
8358
7891
|
{
|
|
8359
|
-
"id": "components-underlinenav-features--with-counter-labels"
|
|
8360
|
-
"code": "() => {\n return (\n <UnderlineNav aria-label=\"Repository with counters\">\n <UnderlineNav.Item\n aria-current=\"page\"\n leadingVisual={<CodeIcon />}\n counter=\"11K\"\n >\n Code\n </UnderlineNav.Item>\n <UnderlineNav.Item leadingVisual={<IssueOpenedIcon />} counter={12}>\n Issues\n </UnderlineNav.Item>\n </UnderlineNav>\n )\n}"
|
|
7892
|
+
"id": "components-underlinenav-features--with-counter-labels"
|
|
8361
7893
|
},
|
|
8362
7894
|
{
|
|
8363
|
-
"id": "components-underlinenav-features--overflow-template"
|
|
8364
|
-
"code": "({ initialSelectedIndex = 1 }: { initialSelectedIndex?: number }) => {\n const [selectedIndex, setSelectedIndex] = React.useState<number | null>(\n initialSelectedIndex,\n )\n return (\n <UnderlineNav\n aria-label=\"Repository\"\n // @ts-ignore UnderlineNav does not take selectionVariant prop, but we need to pass it to the underlying ActionList so it doesn't show Selections.\n selectionVariant={undefined}\n >\n {items.map((item, index) => (\n <UnderlineNav.Item\n key={item.navigation}\n leadingVisual={item.icon}\n aria-current={index === selectedIndex ? 'page' : undefined}\n // Set so that navigation in interaction tests does not cause the\n // page to load the storybook iframe URL and instead keeps the test in\n // the local preview\n target=\"_self\"\n onSelect={(event) => {\n event.preventDefault()\n setSelectedIndex(index)\n }}\n counter={item.counter}\n href={item.href}\n >\n {item.navigation}\n </UnderlineNav.Item>\n ))}\n </UnderlineNav>\n )\n}"
|
|
7895
|
+
"id": "components-underlinenav-features--overflow-template"
|
|
8365
7896
|
},
|
|
8366
7897
|
{
|
|
8367
|
-
"id": "components-underlinenav-features--overflow-on-narrow-screen"
|
|
8368
|
-
"code": "() => {\n return <OverflowTemplate initialSelectedIndex={1} />\n}"
|
|
7898
|
+
"id": "components-underlinenav-features--overflow-on-narrow-screen"
|
|
8369
7899
|
},
|
|
8370
7900
|
{
|
|
8371
|
-
"id": "components-underlinenav-features--counters-loading-state"
|
|
8372
|
-
"code": "() => {\n const [selectedIndex, setSelectedIndex] = React.useState<number | null>(1)\n return (\n <UnderlineNav\n aria-label=\"Repository with loading counters\"\n loadingCounters={true}\n >\n {items.map((item, index) => (\n <UnderlineNav.Item\n key={item.navigation}\n leadingVisual={item.icon}\n aria-current={index === selectedIndex ? 'page' : undefined}\n onSelect={() => setSelectedIndex(index)}\n counter={item.counter}\n >\n {item.navigation}\n </UnderlineNav.Item>\n ))}\n </UnderlineNav>\n )\n}"
|
|
7901
|
+
"id": "components-underlinenav-features--counters-loading-state"
|
|
8373
7902
|
},
|
|
8374
7903
|
{
|
|
8375
|
-
"id": "components-underlinenav-features--variant-flush"
|
|
8376
|
-
"code": "() => {\n return (\n <UnderlineNav aria-label=\"Repository\" variant=\"flush\">\n <UnderlineNav.Item aria-current=\"page\">Code</UnderlineNav.Item>\n <UnderlineNav.Item>Issues</UnderlineNav.Item>\n <UnderlineNav.Item>Pull Requests</UnderlineNav.Item>\n </UnderlineNav>\n )\n}"
|
|
7904
|
+
"id": "components-underlinenav-features--variant-flush"
|
|
8377
7905
|
}
|
|
8378
7906
|
],
|
|
8379
7907
|
"importPath": "@primer/react",
|
|
@@ -8467,8 +7995,10 @@
|
|
|
8467
7995
|
"a11yReviewed": false,
|
|
8468
7996
|
"stories": [
|
|
8469
7997
|
{
|
|
8470
|
-
"id": "components-dialog--default"
|
|
8471
|
-
|
|
7998
|
+
"id": "deprecated-components-dialog--default"
|
|
7999
|
+
},
|
|
8000
|
+
{
|
|
8001
|
+
"id": "components-dialog--default"
|
|
8472
8002
|
}
|
|
8473
8003
|
],
|
|
8474
8004
|
"importPath": "@primer/react/deprecated",
|
|
@@ -8527,8 +8057,7 @@
|
|
|
8527
8057
|
"a11yReviewed": false,
|
|
8528
8058
|
"stories": [
|
|
8529
8059
|
{
|
|
8530
|
-
"id": "deprecated-components-filteredsearch--default"
|
|
8531
|
-
"code": "() => (\n <FilteredSearch>\n <ActionMenu>\n <ActionMenu.Button as=\"summary\">Filter</ActionMenu.Button>\n <ActionMenu.Overlay>\n <ActionList>\n <ActionList.Item>Item 1</ActionList.Item>\n <ActionList.Item>Item 2</ActionList.Item>\n <ActionList.Item>Item 3</ActionList.Item>\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n <TextInput aria-label=\"Filtered search\" leadingVisual={SearchIcon} />\n </FilteredSearch>\n)"
|
|
8060
|
+
"id": "deprecated-components-filteredsearch--default"
|
|
8532
8061
|
}
|
|
8533
8062
|
],
|
|
8534
8063
|
"importPath": "@primer/react/deprecated",
|
|
@@ -8549,12 +8078,10 @@
|
|
|
8549
8078
|
"a11yReviewed": "2025-01-08",
|
|
8550
8079
|
"stories": [
|
|
8551
8080
|
{
|
|
8552
|
-
"id": "deprecated-components-underlinenav--default"
|
|
8553
|
-
"code": "() => (\n <UnderlineNav aria-label=\"Main\">\n <UnderlineNav.Link href=\"#home\" selected>\n Home\n </UnderlineNav.Link>\n <UnderlineNav.Link href=\"#documentation\">Documentation</UnderlineNav.Link>\n <UnderlineNav.Link href=\"#support\">Support</UnderlineNav.Link>\n </UnderlineNav>\n)"
|
|
8081
|
+
"id": "deprecated-components-underlinenav--default"
|
|
8554
8082
|
},
|
|
8555
8083
|
{
|
|
8556
|
-
"id": "deprecated-components-underlinenav-features--actions"
|
|
8557
|
-
"code": "() => (\n <UnderlineNav aria-label=\"Main\" actions={<Button>Click me</Button>}>\n <UnderlineNav.Link href=\"#home\" selected>\n Home\n </UnderlineNav.Link>\n <UnderlineNav.Link href=\"#documentation\">Documentation</UnderlineNav.Link>\n <UnderlineNav.Link href=\"#support\">Support</UnderlineNav.Link>\n </UnderlineNav>\n)"
|
|
8084
|
+
"id": "deprecated-components-underlinenav-features--actions"
|
|
8558
8085
|
}
|
|
8559
8086
|
],
|
|
8560
8087
|
"importPath": "@primer/react/deprecated",
|
|
@@ -8609,16 +8136,16 @@
|
|
|
8609
8136
|
"a11yReviewed": "2025-01-08",
|
|
8610
8137
|
"stories": [
|
|
8611
8138
|
{
|
|
8612
|
-
"id": "
|
|
8613
|
-
|
|
8139
|
+
"id": "components-issuelabel--default"
|
|
8140
|
+
},
|
|
8141
|
+
{
|
|
8142
|
+
"id": "experimental-components-issuelabel--default"
|
|
8614
8143
|
},
|
|
8615
8144
|
{
|
|
8616
|
-
"id": "experimental-components-issuelabel-features--group-of-labels"
|
|
8617
|
-
"code": "() => (\n <Stack direction=\"horizontal\" gap=\"condensed\" wrap=\"wrap\">\n <IssueLabel variant=\"blue\">Issue label</IssueLabel>\n <IssueLabel variant=\"purple\">Another label</IssueLabel>\n <IssueLabel variant=\"green\">A third label</IssueLabel>\n <IssueLabel variant=\"orange\">Issue label</IssueLabel>\n <IssueLabel variant=\"yellow\">Another label</IssueLabel>\n <IssueLabel variant=\"brown\">A third label</IssueLabel>\n </Stack>\n)"
|
|
8145
|
+
"id": "experimental-components-issuelabel-features--group-of-labels"
|
|
8618
8146
|
},
|
|
8619
8147
|
{
|
|
8620
|
-
"id": "experimental-components-issuelabel-features--hex-color"
|
|
8621
|
-
"code": "(args: { fillColor: `#${string}` }) => {\n return <IssueLabel fillColor={args.fillColor}>Issue label</IssueLabel>\n}"
|
|
8148
|
+
"id": "experimental-components-issuelabel-features--hex-color"
|
|
8622
8149
|
}
|
|
8623
8150
|
],
|
|
8624
8151
|
"importPath": "@primer/react/experimental",
|
|
@@ -8656,44 +8183,34 @@
|
|
|
8656
8183
|
"a11yReviewed": false,
|
|
8657
8184
|
"stories": [
|
|
8658
8185
|
{
|
|
8659
|
-
"id": "deprecated-components-selectpanel--default"
|
|
8660
|
-
"code": "() => {\n const initialSelectedLabels = data.issue.labelIds // mock initial state: has selected labels\n const [selectedLabelIds, setSelectedLabelIds] = React.useState<string[]>(\n initialSelectedLabels,\n )\n\n /* Selection */\n const onLabelSelect = (labelId: string) => {\n if (!selectedLabelIds.includes(labelId))\n setSelectedLabelIds([...selectedLabelIds, labelId])\n else setSelectedLabelIds(selectedLabelIds.filter((id) => id !== labelId))\n }\n const onClearSelection = () => {\n setSelectedLabelIds([])\n }\n const onSubmit = () => {\n data.issue.labelIds = selectedLabelIds // pretending to persist changes\n }\n const onCancel = () => {\n setSelectedLabelIds(initialSelectedLabels)\n }\n\n /* Filtering */\n const [filteredLabels, setFilteredLabels] = React.useState(data.labels)\n const [query, setQuery] = React.useState('')\n const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n event,\n ) => {\n const query = event.currentTarget.value\n setQuery(query)\n if (query === '') setFilteredLabels(data.labels)\n else {\n setFilteredLabels(\n data.labels\n .map((label) => {\n if (label.name.toLowerCase().startsWith(query))\n return {\n priority: 1,\n label,\n }\n else if (label.name.toLowerCase().includes(query))\n return {\n priority: 2,\n label,\n }\n else if (label.description?.toLowerCase().includes(query))\n return {\n priority: 3,\n label,\n }\n else\n return {\n priority: -1,\n label,\n }\n })\n .filter((result) => result.priority > 0)\n .map((result) => result.label),\n )\n }\n }\n const sortingFn = (\n itemA: {\n id: string\n },\n itemB: {\n id: string\n },\n ) => {\n const initialSelectedIds = data.issue.labelIds\n if (\n initialSelectedIds.includes(itemA.id) &&\n initialSelectedIds.includes(itemB.id)\n )\n return 1\n else if (initialSelectedIds.includes(itemA.id)) return -1\n else if (initialSelectedIds.includes(itemB.id)) return 1\n else return 1\n }\n const itemsToShow = query ? filteredLabels : data.labels.sort(sortingFn)\n return (\n <>\n <SelectPanel\n title=\"Select labels\"\n onSubmit={onSubmit}\n onCancel={onCancel}\n onClearSelection={onClearSelection}\n >\n <SelectPanel.Button>Assign label</SelectPanel.Button>\n\n <SelectPanel.Header>\n <SelectPanel.SearchInput\n aria-label=\"Search\"\n onChange={onSearchInputChange}\n />\n </SelectPanel.Header>\n\n {itemsToShow.length === 0 ? (\n <SelectPanel.Message\n variant=\"empty\"\n title={`No labels found for \"${query}\"`}\n >\n Try a different search term\n </SelectPanel.Message>\n ) : (\n <ActionList>\n {itemsToShow.map((label) => (\n <ActionList.Item\n key={label.id}\n onSelect={() => onLabelSelect(label.id)}\n selected={selectedLabelIds.includes(label.id)}\n >\n <ActionList.LeadingVisual>\n <div\n className={sharedClasses.Circle}\n style={{\n backgroundColor: `#${label.color}`,\n }}\n />\n </ActionList.LeadingVisual>\n {label.name}\n <ActionList.Description variant=\"block\">\n {label.description}\n </ActionList.Description>\n </ActionList.Item>\n ))}\n </ActionList>\n )}\n\n <SelectPanel.Footer>\n <SelectPanel.SecondaryAction variant=\"button\">\n Edit labels\n </SelectPanel.SecondaryAction>\n </SelectPanel.Footer>\n </SelectPanel>\n </>\n )\n}"
|
|
8186
|
+
"id": "deprecated-components-selectpanel--default"
|
|
8661
8187
|
},
|
|
8662
8188
|
{
|
|
8663
|
-
"id": "deprecated-components-selectpanel-examples--minimal"
|
|
8664
|
-
"code": "() => {\n const initialSelectedLabels = data.issue.labelIds // mock initial state: has selected labels\n const [selectedLabelIds, setSelectedLabelIds] = React.useState<string[]>(\n initialSelectedLabels,\n )\n\n /* Selection */\n const onLabelSelect = (labelId: string) => {\n if (!selectedLabelIds.includes(labelId))\n setSelectedLabelIds([...selectedLabelIds, labelId])\n else setSelectedLabelIds(selectedLabelIds.filter((id) => id !== labelId))\n }\n const onSubmit = () => {\n data.issue.labelIds = selectedLabelIds // pretending to persist changes\n\n // eslint-disable-next-line no-console\n console.log('form submitted')\n }\n const onCancel = () => {\n setSelectedLabelIds(initialSelectedLabels)\n }\n const sortingFn = (\n itemA: {\n id: string\n },\n itemB: {\n id: string\n },\n ) => {\n const initialSelectedIds = data.issue.labelIds\n if (\n initialSelectedIds.includes(itemA.id) &&\n initialSelectedIds.includes(itemB.id)\n )\n return 1\n else if (initialSelectedIds.includes(itemA.id)) return -1\n else if (initialSelectedIds.includes(itemB.id)) return 1\n else return 1\n }\n const itemsToShow = data.labels.sort(sortingFn)\n return (\n <>\n <h1>Minimal SelectPanel</h1>\n\n <SelectPanel\n title=\"Select labels\"\n onSubmit={onSubmit}\n onCancel={onCancel}\n >\n <SelectPanel.Button>Assign label</SelectPanel.Button>\n\n <ActionList>\n {itemsToShow.map((label) => (\n <ActionList.Item\n key={label.id}\n onSelect={() => onLabelSelect(label.id)}\n selected={selectedLabelIds.includes(label.id)}\n >\n <ActionList.LeadingVisual>\n {getCircle(label.color)}\n </ActionList.LeadingVisual>\n {label.name}\n <ActionList.Description variant=\"block\">\n {label.description}\n </ActionList.Description>\n </ActionList.Item>\n ))}\n </ActionList>\n <SelectPanel.Footer />\n </SelectPanel>\n </>\n )\n}"
|
|
8189
|
+
"id": "deprecated-components-selectpanel-examples--minimal"
|
|
8665
8190
|
},
|
|
8666
8191
|
{
|
|
8667
|
-
"id": "deprecated-components-selectpanel-examples--short-select-panel"
|
|
8668
|
-
"code": "() => {\n const initialChannels = {\n GitHub: false,\n Email: false,\n }\n const [channels, setChannels] = React.useState(initialChannels)\n const [onlyFailures, setOnlyFailures] = React.useState(false)\n const onSubmit = () => {\n // eslint-disable-next-line no-console\n console.log('form submitted')\n }\n const onCancel = () => {\n setChannels(initialChannels)\n }\n const toggleChannel = (channel: keyof typeof channels) => {\n setChannels({\n ...channels,\n [channel]: !channels[channel],\n })\n }\n const channelsEnabled = channels.GitHub || channels.Email\n return (\n <>\n <h1>Short SelectPanel</h1>\n <p>\n Use <code>height=fit-content</code> to match height of contents\n </p>\n <SelectPanel\n title=\"Select notification channels\"\n onSubmit={onSubmit}\n onCancel={onCancel}\n >\n <SelectPanel.Button>\n <Text className={classes.TextMuted}>Notify me:</Text>{' '}\n {Object.keys(channels)\n .filter((channel) => channels[channel as keyof typeof channels])\n .join(', ') || 'Never'}\n {onlyFailures && channelsEnabled && ' (Failed workflows only)'}\n </SelectPanel.Button>\n\n <ActionList>\n <ActionList.Item\n selected={channels.GitHub}\n onSelect={() => toggleChannel('GitHub')}\n >\n On GitHub\n </ActionList.Item>\n <ActionList.Item\n selected={channels.Email}\n onSelect={() => toggleChannel('Email')}\n >\n Email\n </ActionList.Item>\n <div\n role=\"none\"\n className={`${classes.TransitionBox} ${channelsEnabled ? classes.TransitionBoxVisible : classes.TransitionBoxHidden}`}\n >\n <ActionList.Divider />\n <ActionList.Item\n selected={onlyFailures}\n onSelect={() => setOnlyFailures(!onlyFailures)}\n >\n Only notify for failed workflows\n </ActionList.Item>\n </div>\n </ActionList>\n <SelectPanel.Footer />\n </SelectPanel>\n </>\n )\n}"
|
|
8192
|
+
"id": "deprecated-components-selectpanel-examples--short-select-panel"
|
|
8669
8193
|
},
|
|
8670
8194
|
{
|
|
8671
|
-
"id": "deprecated-components-selectpanel-features--instant-selection-variant"
|
|
8672
|
-
"code": "() => {\n const [selectedTag, setSelectedTag] = React.useState<string>()\n const onSubmit = () => {\n if (!selectedTag) return\n data.ref = selectedTag // pretending to persist changes\n }\n const itemsToShow = data.tags\n return (\n <>\n <h1>Instant selection variant</h1>\n\n <SelectPanel\n title=\"Choose a tag\"\n selectionVariant=\"instant\"\n onSubmit={onSubmit}\n >\n <SelectPanel.Button leadingVisual={TagIcon}>\n {selectedTag || 'Choose a tag'}\n </SelectPanel.Button>\n\n <ActionList>\n {itemsToShow.map((tag) => (\n <ActionList.Item\n key={tag.id}\n onSelect={() => setSelectedTag(tag.id)}\n selected={selectedTag === tag.id}\n >\n {tag.name}\n </ActionList.Item>\n ))}\n </ActionList>\n <SelectPanel.Footer>\n <SelectPanel.SecondaryAction variant=\"button\">\n Edit tags\n </SelectPanel.SecondaryAction>\n </SelectPanel.Footer>\n </SelectPanel>\n </>\n )\n}"
|
|
8195
|
+
"id": "deprecated-components-selectpanel-features--instant-selection-variant"
|
|
8673
8196
|
},
|
|
8674
8197
|
{
|
|
8675
|
-
"id": "deprecated-components-selectpanel-features--with-warning"
|
|
8676
|
-
"code": "() => {\n /* Selection */\n\n const initialAssigneeIds = data.issue.assigneeIds // mock initial state\n const [selectedAssigneeIds, setSelectedAssigneeIds] =\n React.useState<string[]>(initialAssigneeIds)\n const MAX_LIMIT = 3\n const onCollaboratorSelect = (colloratorId: string) => {\n if (!selectedAssigneeIds.includes(colloratorId))\n setSelectedAssigneeIds([...selectedAssigneeIds, colloratorId])\n else\n setSelectedAssigneeIds(\n selectedAssigneeIds.filter((id) => id !== colloratorId),\n )\n }\n const onClearSelection = () => setSelectedAssigneeIds([])\n const onSubmit = () => {\n data.issue.assigneeIds = selectedAssigneeIds // pretending to persist changes\n }\n const onCancel = () => {\n setSelectedAssigneeIds(initialAssigneeIds)\n }\n\n /* Filtering */\n const [filteredUsers, setFilteredUsers] = React.useState(data.collaborators)\n const [query, setQuery] = React.useState('')\n const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n event,\n ) => {\n const query = event.currentTarget.value\n setQuery(query)\n if (query === '') setFilteredUsers(data.collaborators)\n else {\n setFilteredUsers(\n data.collaborators\n .map((collaborator) => {\n if (collaborator.login.toLowerCase().startsWith(query))\n return {\n priority: 1,\n collaborator,\n }\n else if (collaborator.name.startsWith(query))\n return {\n priority: 2,\n collaborator,\n }\n else if (collaborator.login.toLowerCase().includes(query))\n return {\n priority: 3,\n collaborator,\n }\n else if (collaborator.name.toLowerCase().includes(query))\n return {\n priority: 4,\n collaborator,\n }\n else\n return {\n priority: -1,\n collaborator,\n }\n })\n .filter((result) => result.priority > 0)\n .map((result) => result.collaborator),\n )\n }\n }\n const sortingFn = (\n itemA: {\n id: string\n },\n itemB: {\n id: string\n },\n ) => {\n const initialSelectedIds = data.issue.assigneeIds\n if (\n initialSelectedIds.includes(itemA.id) &&\n initialSelectedIds.includes(itemB.id)\n )\n return 1\n else if (initialSelectedIds.includes(itemA.id)) return -1\n else if (initialSelectedIds.includes(itemB.id)) return 1\n else return 1\n }\n const itemsToShow = query ? filteredUsers : data.collaborators.sort(sortingFn)\n return (\n <>\n <h1>SelectPanel with warning</h1>\n\n <SelectPanel\n title=\"Set assignees\"\n description={`Select up to ${MAX_LIMIT} people`}\n onSubmit={onSubmit}\n onCancel={onCancel}\n onClearSelection={onClearSelection}\n >\n <SelectPanel.Button\n variant=\"invisible\"\n trailingAction={GearIcon}\n className={classes.ButtonCustom}\n >\n Assignees\n </SelectPanel.Button>\n <SelectPanel.Header>\n <SelectPanel.SearchInput\n onChange={onSearchInputChange}\n aria-label=\"Search\"\n />\n </SelectPanel.Header>\n\n {selectedAssigneeIds.length >= MAX_LIMIT ? (\n <SelectPanel.Message variant=\"warning\" size=\"inline\">\n You have reached the limit of {MAX_LIMIT} assignees on your free\n account. <Link href=\"/upgrade\">Upgrade your account.</Link>\n </SelectPanel.Message>\n ) : null}\n\n {itemsToShow.length === 0 ? (\n <SelectPanel.Message\n variant=\"empty\"\n title={`No labels found for \"${query}\"`}\n >\n Try a different search term\n </SelectPanel.Message>\n ) : (\n <ActionList>\n {itemsToShow.map((collaborator) => (\n <ActionList.Item\n key={collaborator.id}\n onSelect={() => onCollaboratorSelect(collaborator.id)}\n selected={selectedAssigneeIds.includes(collaborator.id)}\n disabled={\n selectedAssigneeIds.length >= MAX_LIMIT &&\n !selectedAssigneeIds.includes(collaborator.id)\n }\n >\n <ActionList.LeadingVisual>\n <Avatar\n src={`https://github.com/${collaborator.login}.png`}\n />\n </ActionList.LeadingVisual>\n {collaborator.login}\n <ActionList.Description>\n {collaborator.login}\n </ActionList.Description>\n </ActionList.Item>\n ))}\n </ActionList>\n )}\n\n <SelectPanel.Footer />\n </SelectPanel>\n </>\n )\n}"
|
|
8198
|
+
"id": "deprecated-components-selectpanel-features--with-warning"
|
|
8677
8199
|
},
|
|
8678
8200
|
{
|
|
8679
|
-
"id": "deprecated-components-selectpanel-examples--open-from-menu"
|
|
8680
|
-
"code": "() => {\n /* Open state */\n const [menuOpen, setMenuOpen] = React.useState(false)\n const [selectPanelOpen, setSelectPanelOpen] = React.useState(false)\n\n /* Selection */\n const [selectedSetting, setSelectedSetting] =\n React.useState<string>('All activity')\n const initialCustomEvents: string[] = []\n const [selectedCustomEvents, setSelectedCustomEvents] =\n React.useState<string[]>(initialCustomEvents)\n const onEventSelect = (event: string) => {\n if (!selectedCustomEvents.includes(event))\n setSelectedCustomEvents([...selectedCustomEvents, event])\n else\n setSelectedCustomEvents(\n selectedCustomEvents.filter((name) => name !== event),\n )\n }\n const itemsToShow = [\n 'Issues',\n 'Pull requests',\n 'Releases',\n 'Discussions',\n 'Security alerts',\n ]\n return (\n <>\n <h1>Open in modal from ActionMenu</h1>\n\n <ActionMenu open={menuOpen} onOpenChange={(value) => setMenuOpen(value)}>\n <ActionMenu.Button leadingVisual={EyeIcon}>\n {selectedSetting === 'Ignore' ? 'Watch' : 'Unwatch'}\n </ActionMenu.Button>\n <ActionMenu.Overlay width=\"medium\">\n <ActionList selectionVariant=\"single\">\n <ActionList.Item\n selected={selectedSetting === 'Participating and @mentions'}\n onSelect={() => setSelectedSetting('Participating and @mentions')}\n >\n Participating and @mentions\n <ActionList.Description variant=\"block\">\n Only receive notifications from this repository when\n participating or @mentioned.\n </ActionList.Description>\n </ActionList.Item>\n <ActionList.Item\n selected={selectedSetting === 'All activity'}\n onSelect={() => setSelectedSetting('All activity')}\n >\n All activity\n <ActionList.Description variant=\"block\">\n Notified of all notifications on this repository.\n </ActionList.Description>\n </ActionList.Item>\n <ActionList.Item\n selected={selectedSetting === 'Ignore'}\n onSelect={() => setSelectedSetting('Ignore')}\n >\n Ignore\n <ActionList.Description variant=\"block\">\n Never be notified.\n </ActionList.Description>\n </ActionList.Item>\n <ActionList.Item\n selected={selectedSetting === 'Custom'}\n onSelect={() => {\n setMenuOpen(false)\n setSelectPanelOpen(true)\n }}\n >\n Custom\n <ActionList.TrailingVisual>\n <ArrowRightIcon />\n </ActionList.TrailingVisual>\n <ActionList.Description variant=\"block\">\n Select events you want to be notified of in addition to\n participating and @mentions.\n </ActionList.Description>\n </ActionList.Item>\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n <SelectPanel\n variant=\"modal\"\n title=\"Custom\"\n open={selectPanelOpen}\n onSubmit={() => {\n setSelectedSetting('Custom')\n setSelectPanelOpen(false)\n setMenuOpen(false)\n }}\n onCancel={() => {\n setSelectedCustomEvents(initialCustomEvents)\n setSelectPanelOpen(false)\n setMenuOpen(true)\n }}\n >\n <ActionList>\n {itemsToShow.map((item) => (\n <ActionList.Item\n key={item}\n onSelect={() => onEventSelect(item)}\n selected={selectedCustomEvents.includes(item)}\n >\n {item}\n </ActionList.Item>\n ))}\n </ActionList>\n <SelectPanel.Footer />\n </SelectPanel>\n </>\n )\n}"
|
|
8201
|
+
"id": "deprecated-components-selectpanel-examples--open-from-menu"
|
|
8681
8202
|
},
|
|
8682
8203
|
{
|
|
8683
|
-
"id": "deprecated-components-selectpanel-examples--with-groups"
|
|
8684
|
-
"code": "() => {\n /* Selection */\n const initialAssigneeIds = data.issue.assigneeIds // mock initial state\n const [selectedAssigneeIds, setSelectedAssigneeIds] =\n React.useState<string[]>(initialAssigneeIds)\n const onCollaboratorSelect = (collaboratorId: string) => {\n if (!selectedAssigneeIds.includes(collaboratorId))\n setSelectedAssigneeIds([...selectedAssigneeIds, collaboratorId])\n else\n setSelectedAssigneeIds(\n selectedAssigneeIds.filter((id) => id !== collaboratorId),\n )\n }\n const onClearSelection = () => setSelectedAssigneeIds([])\n const onSubmit = () => {\n data.issue.assigneeIds = selectedAssigneeIds // pretending to persist changes\n }\n const onCancel = () => {\n setSelectedAssigneeIds(initialAssigneeIds)\n }\n\n /* Filtering */\n const [filteredUsers, setFilteredUsers] = React.useState(data.collaborators)\n const [query, setQuery] = React.useState('')\n const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n event,\n ) => {\n const query = event.currentTarget.value\n setQuery(query)\n if (query === '') setFilteredUsers(data.collaborators)\n else {\n setFilteredUsers(\n data.collaborators\n .map((collaborator) => {\n if (collaborator.login.toLowerCase().startsWith(query))\n return {\n priority: 1,\n collaborator,\n }\n else if (collaborator.name.startsWith(query))\n return {\n priority: 2,\n collaborator,\n }\n else if (collaborator.login.toLowerCase().includes(query))\n return {\n priority: 3,\n collaborator,\n }\n else if (collaborator.name.toLowerCase().includes(query))\n return {\n priority: 4,\n collaborator,\n }\n else\n return {\n priority: -1,\n collaborator,\n }\n })\n .filter((result) => result.priority > 0)\n .map((result) => result.collaborator),\n )\n }\n }\n const sortingFn = (\n itemA: {\n id: string\n },\n itemB: {\n id: string\n },\n ) => {\n const initialSelectedIds = data.issue.assigneeIds\n if (\n initialSelectedIds.includes(itemA.id) &&\n initialSelectedIds.includes(itemB.id)\n )\n return 1\n else if (initialSelectedIds.includes(itemA.id)) return -1\n else if (initialSelectedIds.includes(itemB.id)) return 1\n else return 1\n }\n const itemsToShow = query ? filteredUsers : data.collaborators.sort(sortingFn)\n return (\n <>\n <h1>SelectPanel with groups</h1>\n\n <SelectPanel\n title=\"Request up to 100 reviewers\"\n onSubmit={onSubmit}\n onCancel={onCancel}\n onClearSelection={onClearSelection}\n >\n <SelectPanel.Button\n variant=\"invisible\"\n trailingAction={GearIcon}\n style={{\n width: '200px',\n }}\n className={classes.ButtonContentStartJustify}\n >\n Reviewers\n </SelectPanel.Button>\n <SelectPanel.Header>\n <SelectPanel.SearchInput onChange={onSearchInputChange} />\n </SelectPanel.Header>\n\n {itemsToShow.length === 0 ? (\n <SelectPanel.Message\n variant=\"empty\"\n title={`No labels found for \"${query}\"`}\n >\n Try a different search term\n </SelectPanel.Message>\n ) : (\n <ActionList>\n <ActionList.Group>\n <ActionList.GroupHeading variant=\"filled\">\n Suggestions\n </ActionList.GroupHeading>\n {itemsToShow\n .filter((collaborator) => collaborator.recommended)\n .map((collaborator) => (\n <ActionList.Item\n key={collaborator.id}\n onSelect={() => onCollaboratorSelect(collaborator.id)}\n selected={selectedAssigneeIds.includes(collaborator.id)}\n >\n <ActionList.LeadingVisual>\n <Avatar\n src={`https://github.com/${collaborator.login}.png`}\n />\n </ActionList.LeadingVisual>\n {collaborator.login}\n <ActionList.Description>\n {collaborator.login}\n </ActionList.Description>\n </ActionList.Item>\n ))}\n </ActionList.Group>\n <ActionList.Group>\n <ActionList.GroupHeading variant=\"filled\">\n Everyone else\n </ActionList.GroupHeading>\n {itemsToShow\n .filter((collaborator) => !collaborator.recommended)\n .map((collaborator) => (\n <ActionList.Item\n key={collaborator.id}\n onSelect={() => onCollaboratorSelect(collaborator.id)}\n selected={selectedAssigneeIds.includes(collaborator.id)}\n >\n <ActionList.LeadingVisual>\n <Avatar\n src={`https://github.com/${collaborator.login}.png`}\n />\n </ActionList.LeadingVisual>\n {collaborator.login}\n <ActionList.Description>\n {collaborator.login}\n </ActionList.Description>\n </ActionList.Item>\n ))}\n </ActionList.Group>\n </ActionList>\n )}\n\n <SelectPanel.Footer />\n </SelectPanel>\n </>\n )\n}"
|
|
8204
|
+
"id": "deprecated-components-selectpanel-examples--with-groups"
|
|
8685
8205
|
},
|
|
8686
8206
|
{
|
|
8687
|
-
"id": "deprecated-components-selectpanel-examples--async-search-with-use-transition"
|
|
8688
|
-
"code": "() => {\n const [isPending, startTransition] = React.useTransition()\n const [query, setQuery] = React.useState('')\n const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n event,\n ) => {\n const query = event.currentTarget.value\n startTransition(() => setQuery(query))\n }\n\n /* Selection */\n const initialAssigneeIds: string[] = data.issue.assigneeIds\n const [selectedUserIds, setSelectedUserIds] =\n React.useState<string[]>(initialAssigneeIds)\n const onUserSelect = (userId: string) => {\n if (!selectedUserIds.includes(userId))\n setSelectedUserIds([...selectedUserIds, userId])\n else setSelectedUserIds(selectedUserIds.filter((id) => id !== userId))\n }\n const onSubmit = () => {\n data.issue.assigneeIds = selectedUserIds // pretending to persist changes\n // eslint-disable-next-line no-console\n console.log('form submitted')\n }\n const onCancel = () => {\n setSelectedUserIds(initialAssigneeIds)\n }\n return (\n <>\n <h1>Async: search with useTransition</h1>\n <p>Fetching items on every keystroke search (like github users)</p>\n\n <SelectPanel\n title=\"Select collaborators\"\n onSubmit={onSubmit}\n onCancel={onCancel}\n >\n <SelectPanel.Button>Select assignees</SelectPanel.Button>\n <SelectPanel.Header>\n <SelectPanel.SearchInput\n loading={isPending}\n onChange={onSearchInputChange}\n />\n </SelectPanel.Header>\n\n <SearchableUserList\n query={query}\n initialAssigneeIds={initialAssigneeIds}\n selectedUserIds={selectedUserIds}\n onUserSelect={onUserSelect}\n />\n <SelectPanel.Footer />\n </SelectPanel>\n </>\n )\n}"
|
|
8207
|
+
"id": "deprecated-components-selectpanel-examples--async-search-with-use-transition"
|
|
8689
8208
|
},
|
|
8690
8209
|
{
|
|
8691
|
-
"id": "deprecated-components-selectpanel-examples--async-with-suspended-list"
|
|
8692
|
-
"code": "() => {\n const [query, setQuery] = React.useState('')\n const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n event,\n ) => {\n const query = event.currentTarget.value\n setQuery(query)\n }\n return (\n <>\n <h1>Async: Suspended list</h1>\n <p>\n Fetching items once when the panel is opened (like repo labels)\n <br />\n Note: Save and Cancel is not implemented in this demo\n </p>\n\n <SelectPanel title=\"Select labels\">\n <SelectPanel.Button>Assign label</SelectPanel.Button>\n\n <SelectPanel.Header>\n <SelectPanel.SearchInput onChange={onSearchInputChange} />\n </SelectPanel.Header>\n\n <React.Suspense\n fallback={\n <SelectPanel.Loading>Fetching labels...</SelectPanel.Loading>\n }\n >\n <SuspendedActionList query={query} />\n <SelectPanel.Footer>\n <SelectPanel.SecondaryAction variant=\"link\" href=\"/settings\">\n Edit labels\n </SelectPanel.SecondaryAction>\n </SelectPanel.Footer>\n </React.Suspense>\n </SelectPanel>\n </>\n )\n}"
|
|
8210
|
+
"id": "deprecated-components-selectpanel-examples--async-with-suspended-list"
|
|
8693
8211
|
},
|
|
8694
8212
|
{
|
|
8695
|
-
"id": "deprecated-components-selectpanel-examples--with-filter-buttons"
|
|
8696
|
-
"code": "() => {\n const [selectedFilter, setSelectedFilter] = React.useState<\n 'branches' | 'tags'\n >('branches')\n\n /* Selection */\n const [savedInitialRef, setSavedInitialRef] = React.useState(data.ref)\n const [selectedRef, setSelectedRef] = React.useState(savedInitialRef)\n const onSubmit = () => {\n setSavedInitialRef(selectedRef)\n data.ref = selectedRef // pretending to persist changes\n\n // eslint-disable-next-line no-console\n console.log('form submitted')\n }\n const onCancel = () => {\n setSelectedRef(savedInitialRef)\n }\n\n /* Filter */\n const [query, setQuery] = React.useState('')\n const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n event,\n ) => {\n const query = event.currentTarget.value\n setQuery(query)\n }\n const [filteredRefs, setFilteredRefs] = React.useState(data.branches)\n const setSearchResults = (\n query: string,\n selectedFilter: 'branches' | 'tags',\n ) => {\n if (query === '') setFilteredRefs(data[selectedFilter])\n else {\n setFilteredRefs(\n data[selectedFilter]\n .map((item) => {\n if (item.name.toLowerCase().startsWith(query))\n return {\n priority: 1,\n item,\n }\n else if (item.name.toLowerCase().includes(query))\n return {\n priority: 2,\n item,\n }\n else\n return {\n priority: -1,\n item,\n }\n })\n .filter((result) => result.priority > 0)\n .map((result) => result.item),\n )\n }\n }\n React.useEffect(\n function updateSearchResults() {\n setSearchResults(query, selectedFilter)\n },\n [query, selectedFilter],\n )\n const sortingFn = (ref: { id: string }) => {\n if (ref.id === savedInitialRef) return -1\n else return 1\n }\n const itemsToShow = query\n ? filteredRefs\n : data[selectedFilter].sort(sortingFn)\n return (\n <>\n <h1>With Filter Buttons {savedInitialRef}</h1>\n\n <SelectPanel\n title=\"Switch branches/tags\"\n onSubmit={onSubmit}\n onCancel={onCancel}\n >\n <SelectPanel.Button\n leadingVisual={GitBranchIcon}\n trailingVisual={TriangleDownIcon}\n >\n {savedInitialRef}\n </SelectPanel.Button>\n\n <SelectPanel.Header>\n <SelectPanel.SearchInput onChange={onSearchInputChange} />\n\n <div id=\"filters\" className={classes.FilterButtons}>\n <Button\n variant=\"invisible\"\n style={{\n fontWeight:\n selectedFilter === 'branches'\n ? 'var(--base-text-weight-medium)'\n : 'var(--base-text-weight-normal)',\n color: 'var(--fgColor-default)',\n }}\n onClick={() => setSelectedFilter('branches')}\n count={20}\n >\n Branches\n </Button>\n <Button\n variant=\"invisible\"\n style={{\n fontWeight:\n selectedFilter === 'tags'\n ? 'var(--base-text-weight-medium)'\n : 'var(--base-text-weight-normal)',\n color: 'var(--fgColor-default)',\n }}\n onClick={() => setSelectedFilter('tags')}\n count={8}\n >\n Tags\n </Button>\n </div>\n </SelectPanel.Header>\n\n {itemsToShow.length === 0 ? (\n <SelectPanel.Message\n variant=\"empty\"\n title={`No labels found for \"${query}\"`}\n >\n Try a different search term\n </SelectPanel.Message>\n ) : (\n <ActionList>\n {itemsToShow.map((item) => (\n <ActionList.Item\n key={item.id}\n selected={selectedRef === item.id}\n onSelect={() => setSelectedRef(item.id)}\n >\n {item.name}\n <ActionList.TrailingVisual>\n {item.trailingInfo}\n </ActionList.TrailingVisual>\n </ActionList.Item>\n ))}\n </ActionList>\n )}\n\n <SelectPanel.Footer>\n <SelectPanel.SecondaryAction\n variant=\"link\"\n href={`/${selectedFilter}`}\n >\n View all {selectedFilter}\n </SelectPanel.SecondaryAction>\n </SelectPanel.Footer>\n </SelectPanel>\n </>\n )\n}"
|
|
8213
|
+
"id": "deprecated-components-selectpanel-examples--with-filter-buttons"
|
|
8697
8214
|
}
|
|
8698
8215
|
],
|
|
8699
8216
|
"importPath": "@primer/react/experimental",
|
|
@@ -8886,32 +8403,25 @@
|
|
|
8886
8403
|
"a11yReviewed": "2025-01-08",
|
|
8887
8404
|
"stories": [
|
|
8888
8405
|
{
|
|
8889
|
-
"id": "experimental-components-underlinepanels--default"
|
|
8890
|
-
"code": "() => {\n const tabs = ['Tab 1', 'Tab 2', 'Tab 3']\n const panels = ['Panel 1', 'Panel 2', 'Panel 3']\n return (\n <UnderlinePanels aria-label=\"Select a tab\">\n {tabs.map((tab: string, index: number) => (\n <UnderlinePanels.Tab\n key={index}\n aria-selected={index === 0 ? true : undefined}\n >\n {tab}\n </UnderlinePanels.Tab>\n ))}\n {panels.map((panel: string, index: number) => (\n <UnderlinePanels.Panel key={index}>{panel}</UnderlinePanels.Panel>\n ))}\n </UnderlinePanels>\n )\n}"
|
|
8406
|
+
"id": "experimental-components-underlinepanels--default"
|
|
8891
8407
|
},
|
|
8892
8408
|
{
|
|
8893
|
-
"id": "experimental-components-underlinepanels-features--labelled-by-external-element"
|
|
8894
|
-
"code": "() => (\n <>\n <h2 id=\"my-heading\">UnderlinePanels example</h2>\n <UnderlinePanels aria-labelledby=\"my-heading\">\n <UnderlinePanels.Tab>Tab 1</UnderlinePanels.Tab>\n <UnderlinePanels.Tab>Tab 2</UnderlinePanels.Tab>\n <UnderlinePanels.Tab>Tab 3</UnderlinePanels.Tab>\n <UnderlinePanels.Panel>Panel 1</UnderlinePanels.Panel>\n <UnderlinePanels.Panel>Panel 2</UnderlinePanels.Panel>\n <UnderlinePanels.Panel>Panel 3</UnderlinePanels.Panel>\n </UnderlinePanels>\n </>\n)"
|
|
8409
|
+
"id": "experimental-components-underlinepanels-features--labelled-by-external-element"
|
|
8895
8410
|
},
|
|
8896
8411
|
{
|
|
8897
|
-
"id": "experimental-components-underlinepanels-features--selected-tab"
|
|
8898
|
-
"code": "() => (\n <UnderlinePanels aria-label=\"Select a tab\" id=\"tab-panels\">\n <UnderlinePanels.Tab>Tab 1</UnderlinePanels.Tab>\n <UnderlinePanels.Tab aria-selected={true}>Tab 2</UnderlinePanels.Tab>\n <UnderlinePanels.Tab>Tab 3</UnderlinePanels.Tab>\n <UnderlinePanels.Panel>Panel 1</UnderlinePanels.Panel>\n <UnderlinePanels.Panel>Panel 2</UnderlinePanels.Panel>\n <UnderlinePanels.Panel>Panel 3</UnderlinePanels.Panel>\n </UnderlinePanels>\n)"
|
|
8412
|
+
"id": "experimental-components-underlinepanels-features--selected-tab"
|
|
8899
8413
|
},
|
|
8900
8414
|
{
|
|
8901
|
-
"id": "experimental-components-underlinepanels-features--with-counters"
|
|
8902
|
-
"code": "() => {\n return (\n <UnderlinePanels aria-label=\"Tabs with counters\">\n <UnderlinePanels.Tab counter=\"11K\">Tab 1</UnderlinePanels.Tab>\n <UnderlinePanels.Tab counter={12}>Tab 2</UnderlinePanels.Tab>\n <UnderlinePanels.Panel>Panel 1</UnderlinePanels.Panel>\n <UnderlinePanels.Panel>Panel 2</UnderlinePanels.Panel>\n </UnderlinePanels>\n )\n}"
|
|
8415
|
+
"id": "experimental-components-underlinepanels-features--with-counters"
|
|
8903
8416
|
},
|
|
8904
8417
|
{
|
|
8905
|
-
"id": "experimental-components-underlinepanels-features--with-counters-in-loading-state"
|
|
8906
|
-
"code": "() => {\n return (\n <UnderlinePanels aria-label=\"Tabs with counters\" loadingCounters>\n <UnderlinePanels.Tab counter=\"11K\">Tab 1</UnderlinePanels.Tab>\n <UnderlinePanels.Tab counter={12}>Tab 2</UnderlinePanels.Tab>\n <UnderlinePanels.Panel>Panel 1</UnderlinePanels.Panel>\n <UnderlinePanels.Panel>Panel 2</UnderlinePanels.Panel>\n </UnderlinePanels>\n )\n}"
|
|
8418
|
+
"id": "experimental-components-underlinepanels-features--with-counters-in-loading-state"
|
|
8907
8419
|
},
|
|
8908
8420
|
{
|
|
8909
|
-
"id": "experimental-components-underlinepanels-features--with-icons"
|
|
8910
|
-
"code": "() => (\n <UnderlinePanels aria-label=\"Tabs with icons\">\n <UnderlinePanels.Tab icon={CodeIcon}>Tab 1</UnderlinePanels.Tab>\n <UnderlinePanels.Tab icon={EyeIcon}>Tab 2</UnderlinePanels.Tab>\n <UnderlinePanels.Tab icon={GitPullRequestIcon}>Tab 3</UnderlinePanels.Tab>\n <UnderlinePanels.Panel>Panel 1</UnderlinePanels.Panel>\n <UnderlinePanels.Panel>Panel 2</UnderlinePanels.Panel>\n <UnderlinePanels.Panel>Panel 3</UnderlinePanels.Panel>\n </UnderlinePanels>\n)"
|
|
8421
|
+
"id": "experimental-components-underlinepanels-features--with-icons"
|
|
8911
8422
|
},
|
|
8912
8423
|
{
|
|
8913
|
-
"id": "experimental-components-underlinepanels-features--with-icons-hidden-on-narrow-screen"
|
|
8914
|
-
"code": "() => (\n <UnderlinePanels aria-label=\"Tabs with icons\">\n <UnderlinePanels.Tab icon={CodeIcon}>Tab 1</UnderlinePanels.Tab>\n <UnderlinePanels.Tab icon={EyeIcon}>Tab 2</UnderlinePanels.Tab>\n <UnderlinePanels.Tab icon={GitPullRequestIcon}>Tab 3</UnderlinePanels.Tab>\n <UnderlinePanels.Tab icon={CommentDiscussionIcon}>\n Tab 4\n </UnderlinePanels.Tab>\n <UnderlinePanels.Tab icon={PlayIcon}>Tab 5</UnderlinePanels.Tab>\n <UnderlinePanels.Tab icon={ProjectIcon}>Tab 6</UnderlinePanels.Tab>\n <UnderlinePanels.Tab icon={GraphIcon}>Tab 7</UnderlinePanels.Tab>\n <UnderlinePanels.Tab icon={GearIcon}>Tab 8</UnderlinePanels.Tab>\n <UnderlinePanels.Tab icon={ShieldLockIcon}>Tab 9</UnderlinePanels.Tab>\n <UnderlinePanels.Panel>Panel 1</UnderlinePanels.Panel>\n <UnderlinePanels.Panel>Panel 2</UnderlinePanels.Panel>\n <UnderlinePanels.Panel>Panel 3</UnderlinePanels.Panel>\n <UnderlinePanels.Panel>Panel 4</UnderlinePanels.Panel>\n <UnderlinePanels.Panel>Panel 5</UnderlinePanels.Panel>\n <UnderlinePanels.Panel>Panel 6</UnderlinePanels.Panel>\n <UnderlinePanels.Panel>Panel 7</UnderlinePanels.Panel>\n <UnderlinePanels.Panel>Panel 8</UnderlinePanels.Panel>\n <UnderlinePanels.Panel>Panel 9</UnderlinePanels.Panel>\n </UnderlinePanels>\n)"
|
|
8424
|
+
"id": "experimental-components-underlinepanels-features--with-icons-hidden-on-narrow-screen"
|
|
8915
8425
|
}
|
|
8916
8426
|
],
|
|
8917
8427
|
"importPath": "@primer/react/experimental",
|