@primer/react 38.4.0-rc.08b86440d → 38.4.0-rc.36e3b554d
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 +2 -0
- package/dist/PageLayout/PageLayout-28cb4d6e.css +2 -0
- package/dist/PageLayout/PageLayout-28cb4d6e.css.map +1 -0
- package/dist/PageLayout/PageLayout.d.ts.map +1 -1
- package/dist/PageLayout/PageLayout.js +422 -590
- package/dist/PageLayout/PageLayout.module.css.js +2 -2
- package/generated/components.json +1082 -586
- package/package.json +3 -3
- package/dist/PageLayout/PageLayout-28a244f7.css +0 -2
- package/dist/PageLayout/PageLayout-28a244f7.css.map +0 -1
|
@@ -9,10 +9,8 @@
|
|
|
9
9
|
"a11yReviewed": "2025-01-08",
|
|
10
10
|
"stories": [
|
|
11
11
|
{
|
|
12
|
-
"id": "components-actionbar--default"
|
|
13
|
-
|
|
14
|
-
{
|
|
15
|
-
"id": "experimental-components-actionbar--default"
|
|
12
|
+
"id": "experimental-components-actionbar--default",
|
|
13
|
+
"code": "() => (\n <ActionBar aria-label=\"Toolbar\">\n <ActionBar.IconButton\n icon={BoldIcon}\n aria-label=\"Bold\"\n ></ActionBar.IconButton>\n <ActionBar.IconButton\n icon={ItalicIcon}\n aria-label=\"Italic\"\n ></ActionBar.IconButton>\n <ActionBar.IconButton\n icon={CodeIcon}\n aria-label=\"Code\"\n ></ActionBar.IconButton>\n <ActionBar.IconButton\n icon={LinkIcon}\n aria-label=\"Link\"\n ></ActionBar.IconButton>\n <ActionBar.Divider />\n <ActionBar.IconButton\n icon={FileAddedIcon}\n aria-label=\"File Added\"\n ></ActionBar.IconButton>\n <ActionBar.IconButton\n icon={SearchIcon}\n aria-label=\"Search\"\n ></ActionBar.IconButton>\n <ActionBar.IconButton\n icon={QuoteIcon}\n aria-label=\"Insert Quote\"\n ></ActionBar.IconButton>\n <ActionBar.IconButton\n icon={ListUnorderedIcon}\n aria-label=\"Unordered List\"\n ></ActionBar.IconButton>\n <ActionBar.IconButton\n icon={ListOrderedIcon}\n aria-label=\"Ordered List\"\n ></ActionBar.IconButton>\n <ActionBar.IconButton\n icon={TasklistIcon}\n aria-label=\"Task List\"\n ></ActionBar.IconButton>\n </ActionBar>\n)"
|
|
16
14
|
}
|
|
17
15
|
],
|
|
18
16
|
"importPath": "@primer/react",
|
|
@@ -153,112 +151,148 @@
|
|
|
153
151
|
"a11yReviewed": "2025-01-08",
|
|
154
152
|
"stories": [
|
|
155
153
|
{
|
|
156
|
-
"id": "components-actionlist--default"
|
|
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)"
|
|
157
156
|
},
|
|
158
157
|
{
|
|
159
|
-
"id": "components-actionlist-features--simple-list"
|
|
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)"
|
|
160
160
|
},
|
|
161
161
|
{
|
|
162
|
-
"id": "components-actionlist-features--with-visual-list-heading"
|
|
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)"
|
|
163
164
|
},
|
|
164
165
|
{
|
|
165
|
-
"id": "components-actionlist-features--with-custom-heading"
|
|
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)"
|
|
166
168
|
},
|
|
167
169
|
{
|
|
168
|
-
"id": "components-actionlist-features--with-icons"
|
|
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)"
|
|
169
172
|
},
|
|
170
173
|
{
|
|
171
|
-
"id": "components-actionlist-features--with-avatars"
|
|
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)"
|
|
172
176
|
},
|
|
173
177
|
{
|
|
174
|
-
"id": "components-actionlist-features--item-dividers"
|
|
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)"
|
|
175
180
|
},
|
|
176
181
|
{
|
|
177
|
-
"id": "components-actionlist-features--single-divider"
|
|
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)"
|
|
178
184
|
},
|
|
179
185
|
{
|
|
180
|
-
"id": "components-actionlist-features--inline-description"
|
|
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)"
|
|
181
188
|
},
|
|
182
189
|
{
|
|
183
|
-
"id": "components-actionlist-features--block-description"
|
|
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)"
|
|
184
192
|
},
|
|
185
193
|
{
|
|
186
|
-
"id": "components-actionlist-features--single-select"
|
|
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}"
|
|
187
196
|
},
|
|
188
197
|
{
|
|
189
|
-
"id": "components-actionlist-features--inactive-single-select"
|
|
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}"
|
|
190
200
|
},
|
|
191
201
|
{
|
|
192
|
-
"id": "components-actionlist-features--multi-select"
|
|
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}"
|
|
193
204
|
},
|
|
194
205
|
{
|
|
195
|
-
"id": "components-actionlist-features--listbox-single-select"
|
|
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}"
|
|
196
208
|
},
|
|
197
209
|
{
|
|
198
|
-
"id": "components-actionlist-features--listbox-multi-select"
|
|
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}"
|
|
199
212
|
},
|
|
200
213
|
{
|
|
201
|
-
"id": "components-actionlist-features--with-dynamic-content"
|
|
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}"
|
|
202
216
|
},
|
|
203
217
|
{
|
|
204
|
-
"id": "components-actionlist-features--disabled-selected-multiselect"
|
|
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)"
|
|
205
220
|
},
|
|
206
221
|
{
|
|
207
|
-
"id": "components-actionlist-features--disabled-multiselect"
|
|
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)"
|
|
208
224
|
},
|
|
209
225
|
{
|
|
210
|
-
"id": "components-actionlist-features--inactive-multiselect"
|
|
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}"
|
|
211
228
|
},
|
|
212
229
|
{
|
|
213
|
-
"id": "components-actionlist-features--disabled-item"
|
|
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}"
|
|
214
232
|
},
|
|
215
233
|
{
|
|
216
|
-
"id": "components-actionlist-features--inactive-item"
|
|
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}"
|
|
217
236
|
},
|
|
218
237
|
{
|
|
219
|
-
"id": "components-actionlist-features--loading-item"
|
|
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}"
|
|
220
240
|
},
|
|
221
241
|
{
|
|
222
|
-
"id": "components-actionlist-features--links"
|
|
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)"
|
|
223
244
|
},
|
|
224
245
|
{
|
|
225
|
-
"id": "components-actionlist-features--custom-item-children"
|
|
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)"
|
|
226
248
|
},
|
|
227
249
|
{
|
|
228
|
-
"id": "components-actionlist-features--text-wrap-and-truncation"
|
|
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)"
|
|
229
252
|
},
|
|
230
253
|
{
|
|
231
|
-
"id": "components-actionlist-features--conditional-children"
|
|
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}"
|
|
232
256
|
},
|
|
233
257
|
{
|
|
234
|
-
"id": "components-actionlist-features--child-with-side-effects"
|
|
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}"
|
|
235
260
|
},
|
|
236
261
|
{
|
|
237
|
-
"id": "components-actionlist-features--inside-overlay"
|
|
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}"
|
|
238
264
|
},
|
|
239
265
|
{
|
|
240
|
-
"id": "components-actionlist-features--group-with-subtle-title"
|
|
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}"
|
|
241
268
|
},
|
|
242
269
|
{
|
|
243
|
-
"id": "components-actionlist-features--group-with-filled-title"
|
|
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}"
|
|
244
272
|
},
|
|
245
273
|
{
|
|
246
|
-
"id": "components-actionlist-features--with-custom-trailing-visuals"
|
|
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)"
|
|
247
276
|
},
|
|
248
277
|
{
|
|
249
|
-
"id": "components-actionlist-features--with-keyboard-shortcuts"
|
|
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)"
|
|
250
280
|
},
|
|
251
281
|
{
|
|
252
|
-
"id": "components-actionlist-features--with-trailing-count"
|
|
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)"
|
|
253
284
|
},
|
|
254
285
|
{
|
|
255
|
-
"id": "components-actionlist-features--with-trailing-action"
|
|
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}"
|
|
256
288
|
},
|
|
257
289
|
{
|
|
258
|
-
"id": "components-actionlist-features--full-variant"
|
|
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)"
|
|
259
292
|
},
|
|
260
293
|
{
|
|
261
|
-
"id": "components-actionlist-features--large-item"
|
|
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)"
|
|
262
296
|
}
|
|
263
297
|
],
|
|
264
298
|
"importPath": "@primer/react",
|
|
@@ -615,25 +649,32 @@
|
|
|
615
649
|
"a11yReviewed": "2025-01-08",
|
|
616
650
|
"stories": [
|
|
617
651
|
{
|
|
618
|
-
"id": "components-actionmenu--default"
|
|
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)"
|
|
619
654
|
},
|
|
620
655
|
{
|
|
621
|
-
"id": "components-actionmenu-features--links-and-actions"
|
|
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)"
|
|
622
658
|
},
|
|
623
659
|
{
|
|
624
|
-
"id": "components-actionmenu-features--single-select"
|
|
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}"
|
|
625
662
|
},
|
|
626
663
|
{
|
|
627
|
-
"id": "components-actionmenu-features--multi-select"
|
|
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}"
|
|
628
666
|
},
|
|
629
667
|
{
|
|
630
|
-
"id": "components-actionmenu-features--inactive-items"
|
|
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)"
|
|
631
670
|
},
|
|
632
671
|
{
|
|
633
|
-
"id": "components-actionmenu-features--loading-items"
|
|
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)"
|
|
634
674
|
},
|
|
635
675
|
{
|
|
636
|
-
"id": "components-actionmenu-features--submenus"
|
|
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)"
|
|
637
678
|
}
|
|
638
679
|
],
|
|
639
680
|
"importPath": "@primer/react",
|
|
@@ -750,40 +791,52 @@
|
|
|
750
791
|
"a11yReviewed": "2025-01-08",
|
|
751
792
|
"stories": [
|
|
752
793
|
{
|
|
753
|
-
"id": "components-anchoredoverlay--default"
|
|
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}"
|
|
754
796
|
},
|
|
755
797
|
{
|
|
756
|
-
"id": "components-anchoredoverlay-features--portal-inside-scrolling-element"
|
|
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}"
|
|
757
800
|
},
|
|
758
801
|
{
|
|
759
|
-
"id": "components-anchoredoverlay-features--custom-anchor-id"
|
|
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}"
|
|
760
804
|
},
|
|
761
805
|
{
|
|
762
|
-
"id": "components-anchoredoverlay-features--height"
|
|
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}"
|
|
763
808
|
},
|
|
764
809
|
{
|
|
765
|
-
"id": "components-anchoredoverlay-features--width"
|
|
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}"
|
|
766
812
|
},
|
|
767
813
|
{
|
|
768
|
-
"id": "components-anchoredoverlay-features--anchor-alignment"
|
|
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}"
|
|
769
816
|
},
|
|
770
817
|
{
|
|
771
|
-
"id": "components-anchoredoverlay-features--anchor-side"
|
|
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}"
|
|
772
820
|
},
|
|
773
821
|
{
|
|
774
|
-
"id": "components-anchoredoverlay-features--offset-position-from-anchor"
|
|
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}"
|
|
775
824
|
},
|
|
776
825
|
{
|
|
777
|
-
"id": "components-anchoredoverlay-features--offset-alignment-from-anchor"
|
|
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}"
|
|
778
828
|
},
|
|
779
829
|
{
|
|
780
|
-
"id": "components-anchoredoverlay-features--focus-trap-overrides"
|
|
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}"
|
|
781
832
|
},
|
|
782
833
|
{
|
|
783
|
-
"id": "components-anchoredoverlay-features--focus-zone-overrides"
|
|
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}"
|
|
784
836
|
},
|
|
785
837
|
{
|
|
786
|
-
"id": "components-anchoredoverlay-features--overlay-props-overrides"
|
|
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}"
|
|
787
840
|
}
|
|
788
841
|
],
|
|
789
842
|
"importPath": "@primer/react",
|
|
@@ -931,37 +984,48 @@
|
|
|
931
984
|
"a11yReviewed": "2025-01-08",
|
|
932
985
|
"stories": [
|
|
933
986
|
{
|
|
934
|
-
"id": "components-autocomplete--default"
|
|
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}"
|
|
935
989
|
},
|
|
936
990
|
{
|
|
937
|
-
"id": "components-autocomplete-features--with-token-input"
|
|
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}"
|
|
938
993
|
},
|
|
939
994
|
{
|
|
940
|
-
"id": "components-autocomplete-features--add-new-item"
|
|
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}"
|
|
941
997
|
},
|
|
942
998
|
{
|
|
943
|
-
"id": "components-autocomplete-features--custom-search-filter-fn"
|
|
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}"
|
|
944
1001
|
},
|
|
945
1002
|
{
|
|
946
|
-
"id": "components-autocomplete-features--custom-sort-after-menu-close"
|
|
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}"
|
|
947
1005
|
},
|
|
948
1006
|
{
|
|
949
|
-
"id": "components-autocomplete-features--with-callback-when-overlay-open-state-changes"
|
|
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}"
|
|
950
1009
|
},
|
|
951
1010
|
{
|
|
952
|
-
"id": "components-autocomplete-features--async-loading-of-items"
|
|
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}"
|
|
953
1013
|
},
|
|
954
1014
|
{
|
|
955
|
-
"id": "components-autocomplete-features--rendering-the-menu-outside-an-overlay"
|
|
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}"
|
|
956
1017
|
},
|
|
957
1018
|
{
|
|
958
|
-
"id": "components-autocomplete-features--custom-overlay-menu-anchor"
|
|
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}"
|
|
959
1021
|
},
|
|
960
1022
|
{
|
|
961
|
-
"id": "components-autocomplete-features--in-overlay-with-custom-scroll-container-ref"
|
|
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}"
|
|
962
1025
|
},
|
|
963
1026
|
{
|
|
964
|
-
"id": "components-autocomplete-features--in-a-dialog"
|
|
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}"
|
|
965
1029
|
}
|
|
966
1030
|
],
|
|
967
1031
|
"importPath": "@primer/react",
|
|
@@ -1099,16 +1163,20 @@
|
|
|
1099
1163
|
"a11yReviewed": "2025-01-08",
|
|
1100
1164
|
"stories": [
|
|
1101
1165
|
{
|
|
1102
|
-
"id": "components-avatar--default"
|
|
1166
|
+
"id": "components-avatar--default",
|
|
1167
|
+
"code": "() => <Avatar src=\"https://avatars.githubusercontent.com/u/7143434?v=4\" />"
|
|
1103
1168
|
},
|
|
1104
1169
|
{
|
|
1105
|
-
"id": "components-avatar-features--square"
|
|
1170
|
+
"id": "components-avatar-features--square",
|
|
1171
|
+
"code": "() => (\n <Avatar\n square\n alt=\"primer\"\n src=\"https://avatars.githubusercontent.com/primer\"\n />\n)"
|
|
1106
1172
|
},
|
|
1107
1173
|
{
|
|
1108
|
-
"id": "components-avatar-features--size"
|
|
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)"
|
|
1109
1176
|
},
|
|
1110
1177
|
{
|
|
1111
|
-
"id": "components-avatar-features--size-responsive"
|
|
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)"
|
|
1112
1180
|
}
|
|
1113
1181
|
],
|
|
1114
1182
|
"importPath": "@primer/react",
|
|
@@ -1149,31 +1217,36 @@
|
|
|
1149
1217
|
"a11yReviewed": "2025-01-08",
|
|
1150
1218
|
"stories": [
|
|
1151
1219
|
{
|
|
1152
|
-
"id": "components-avatarstack--
|
|
1153
|
-
|
|
1154
|
-
{
|
|
1155
|
-
"id": "components-avatarstack-features--align-left"
|
|
1220
|
+
"id": "components-avatarstack-features--align-left",
|
|
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)"
|
|
1156
1222
|
},
|
|
1157
1223
|
{
|
|
1158
|
-
"id": "components-avatarstack-features--align-right"
|
|
1224
|
+
"id": "components-avatarstack-features--align-right",
|
|
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)"
|
|
1159
1226
|
},
|
|
1160
1227
|
{
|
|
1161
|
-
"id": "components-avatarstack-features--disable-expand-on-hover"
|
|
1228
|
+
"id": "components-avatarstack-features--disable-expand-on-hover",
|
|
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)"
|
|
1162
1230
|
},
|
|
1163
1231
|
{
|
|
1164
|
-
"id": "components-avatarstack-features--custom-size-on-parent"
|
|
1232
|
+
"id": "components-avatarstack-features--custom-size-on-parent",
|
|
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)"
|
|
1165
1234
|
},
|
|
1166
1235
|
{
|
|
1167
|
-
"id": "components-avatarstack-features--custom-size-on-parent-responsive"
|
|
1236
|
+
"id": "components-avatarstack-features--custom-size-on-parent-responsive",
|
|
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)"
|
|
1168
1238
|
},
|
|
1169
1239
|
{
|
|
1170
|
-
"id": "components-avatarstack-features--custom-size-on-children"
|
|
1240
|
+
"id": "components-avatarstack-features--custom-size-on-children",
|
|
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)"
|
|
1171
1242
|
},
|
|
1172
1243
|
{
|
|
1173
|
-
"id": "components-avatarstack-features--custom-size-on-children-responsive"
|
|
1244
|
+
"id": "components-avatarstack-features--custom-size-on-children-responsive",
|
|
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)"
|
|
1174
1246
|
},
|
|
1175
1247
|
{
|
|
1176
|
-
"id": "components-avatarstack-features--with-single-avatar"
|
|
1248
|
+
"id": "components-avatarstack-features--with-single-avatar",
|
|
1249
|
+
"code": "() => (\n <AvatarStack>\n <Avatar\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/primer\"\n />\n </AvatarStack>\n)"
|
|
1177
1250
|
}
|
|
1178
1251
|
],
|
|
1179
1252
|
"importPath": "@primer/react",
|
|
@@ -1220,49 +1293,64 @@
|
|
|
1220
1293
|
"importPath": "@primer/react",
|
|
1221
1294
|
"stories": [
|
|
1222
1295
|
{
|
|
1223
|
-
"id": "components-banner--default"
|
|
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}"
|
|
1224
1298
|
},
|
|
1225
1299
|
{
|
|
1226
|
-
"id": "components-banner-features--critical"
|
|
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}"
|
|
1227
1302
|
},
|
|
1228
1303
|
{
|
|
1229
|
-
"id": "components-banner-features--info"
|
|
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}"
|
|
1230
1306
|
},
|
|
1231
1307
|
{
|
|
1232
|
-
"id": "components-banner-features--success"
|
|
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}"
|
|
1233
1310
|
},
|
|
1234
1311
|
{
|
|
1235
|
-
"id": "components-banner-features--upsell"
|
|
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}"
|
|
1236
1314
|
},
|
|
1237
1315
|
{
|
|
1238
|
-
"id": "components-banner-features--warning"
|
|
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}"
|
|
1239
1318
|
},
|
|
1240
1319
|
{
|
|
1241
|
-
"id": "components-banner-features--dismiss"
|
|
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}"
|
|
1242
1322
|
},
|
|
1243
1323
|
{
|
|
1244
|
-
"id": "components-banner-features--dismiss-with-actions"
|
|
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}"
|
|
1245
1326
|
},
|
|
1246
1327
|
{
|
|
1247
|
-
"id": "components-banner-features--with-hidden-title"
|
|
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}"
|
|
1248
1330
|
},
|
|
1249
1331
|
{
|
|
1250
|
-
"id": "components-banner-features--with-hidden-title-and-actions"
|
|
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}"
|
|
1251
1334
|
},
|
|
1252
1335
|
{
|
|
1253
|
-
"id": "components-banner-features--dismissible-with-hidden-title-and-actions"
|
|
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}"
|
|
1254
1338
|
},
|
|
1255
1339
|
{
|
|
1256
|
-
"id": "components-banner-features--dismissible-with-hidden-title-and-secondary-action"
|
|
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}"
|
|
1257
1342
|
},
|
|
1258
1343
|
{
|
|
1259
|
-
"id": "components-banner-features--with-actions"
|
|
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}"
|
|
1260
1346
|
},
|
|
1261
1347
|
{
|
|
1262
|
-
"id": "components-banner-features--custom-icon"
|
|
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}"
|
|
1263
1350
|
},
|
|
1264
1351
|
{
|
|
1265
|
-
"id": "components-banner-examples--with-announcement"
|
|
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}"
|
|
1266
1354
|
}
|
|
1267
1355
|
],
|
|
1268
1356
|
"props": [
|
|
@@ -1386,28 +1474,36 @@
|
|
|
1386
1474
|
"a11yReviewed": "2025-01-08",
|
|
1387
1475
|
"stories": [
|
|
1388
1476
|
{
|
|
1389
|
-
"id": "experimental-components-blankslate--default"
|
|
1477
|
+
"id": "experimental-components-blankslate--default",
|
|
1478
|
+
"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)"
|
|
1390
1479
|
},
|
|
1391
1480
|
{
|
|
1392
|
-
"id": "experimental-components-blankslate-features--with-visual"
|
|
1481
|
+
"id": "experimental-components-blankslate-features--with-visual",
|
|
1482
|
+
"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)"
|
|
1393
1483
|
},
|
|
1394
1484
|
{
|
|
1395
|
-
"id": "experimental-components-blankslate-features--with-primary-action-as-link"
|
|
1485
|
+
"id": "experimental-components-blankslate-features--with-primary-action-as-link",
|
|
1486
|
+
"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)"
|
|
1396
1487
|
},
|
|
1397
1488
|
{
|
|
1398
|
-
"id": "experimental-components-blankslate-features--with-primary-action-as-button"
|
|
1489
|
+
"id": "experimental-components-blankslate-features--with-primary-action-as-button",
|
|
1490
|
+
"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}"
|
|
1399
1491
|
},
|
|
1400
1492
|
{
|
|
1401
|
-
"id": "experimental-components-blankslate-features--with-secondary-action"
|
|
1493
|
+
"id": "experimental-components-blankslate-features--with-secondary-action",
|
|
1494
|
+
"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)"
|
|
1402
1495
|
},
|
|
1403
1496
|
{
|
|
1404
|
-
"id": "experimental-components-blankslate-features--with-border"
|
|
1497
|
+
"id": "experimental-components-blankslate-features--with-border",
|
|
1498
|
+
"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)"
|
|
1405
1499
|
},
|
|
1406
1500
|
{
|
|
1407
|
-
"id": "experimental-components-blankslate-features--narrow"
|
|
1501
|
+
"id": "experimental-components-blankslate-features--narrow",
|
|
1502
|
+
"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)"
|
|
1408
1503
|
},
|
|
1409
1504
|
{
|
|
1410
|
-
"id": "experimental-components-blankslate-features--spacious"
|
|
1505
|
+
"id": "experimental-components-blankslate-features--spacious",
|
|
1506
|
+
"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)"
|
|
1411
1507
|
}
|
|
1412
1508
|
],
|
|
1413
1509
|
"importPath": "@primer/react/experimental",
|
|
@@ -1489,13 +1585,16 @@
|
|
|
1489
1585
|
"a11yReviewed": "2025-01-08",
|
|
1490
1586
|
"stories": [
|
|
1491
1587
|
{
|
|
1492
|
-
"id": "components-branchname--default"
|
|
1588
|
+
"id": "components-branchname--default",
|
|
1589
|
+
"code": "() => <BranchName href=\"#\">branch_name</BranchName>"
|
|
1493
1590
|
},
|
|
1494
1591
|
{
|
|
1495
|
-
"id": "components-branchname-features--with-branch-icon"
|
|
1592
|
+
"id": "components-branchname-features--with-branch-icon",
|
|
1593
|
+
"code": "() => (\n <BranchName href=\"#\">\n <Stack direction=\"horizontal\" gap=\"condensed\" align=\"center\">\n <Octicon icon={GitBranchIcon} />\n branch_name\n </Stack>\n </BranchName>\n)"
|
|
1496
1594
|
},
|
|
1497
1595
|
{
|
|
1498
|
-
"id": "components-branchname-features--not-a-link"
|
|
1596
|
+
"id": "components-branchname-features--not-a-link",
|
|
1597
|
+
"code": "() => <BranchName as=\"span\">branch_name_as_span</BranchName>"
|
|
1499
1598
|
}
|
|
1500
1599
|
],
|
|
1501
1600
|
"importPath": "@primer/react",
|
|
@@ -1520,7 +1619,8 @@
|
|
|
1520
1619
|
"a11yReviewed": "2025-01-08",
|
|
1521
1620
|
"stories": [
|
|
1522
1621
|
{
|
|
1523
|
-
"id": "components-breadcrumbs--default"
|
|
1622
|
+
"id": "components-breadcrumbs--default",
|
|
1623
|
+
"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)"
|
|
1524
1624
|
}
|
|
1525
1625
|
],
|
|
1526
1626
|
"importPath": "@primer/react",
|
|
@@ -1600,82 +1700,108 @@
|
|
|
1600
1700
|
"a11yReviewed": "2025-01-08",
|
|
1601
1701
|
"stories": [
|
|
1602
1702
|
{
|
|
1603
|
-
"id": "components-button--default"
|
|
1703
|
+
"id": "components-button--default",
|
|
1704
|
+
"code": "() => <Button>Default</Button>"
|
|
1604
1705
|
},
|
|
1605
1706
|
{
|
|
1606
|
-
"id": "components-button-features--primary"
|
|
1707
|
+
"id": "components-button-features--primary",
|
|
1708
|
+
"code": "() => <Button variant=\"primary\">Primary</Button>"
|
|
1607
1709
|
},
|
|
1608
1710
|
{
|
|
1609
|
-
"id": "components-button-features--danger"
|
|
1711
|
+
"id": "components-button-features--danger",
|
|
1712
|
+
"code": "() => <Button variant=\"danger\">Danger</Button>"
|
|
1610
1713
|
},
|
|
1611
1714
|
{
|
|
1612
|
-
"id": "components-button-features--invisible"
|
|
1715
|
+
"id": "components-button-features--invisible",
|
|
1716
|
+
"code": "() => <Button variant=\"invisible\">Invisible</Button>"
|
|
1613
1717
|
},
|
|
1614
1718
|
{
|
|
1615
|
-
"id": "components-button-features--link"
|
|
1719
|
+
"id": "components-button-features--link",
|
|
1720
|
+
"code": "() => <Button variant=\"link\">Button that looks like a link</Button>"
|
|
1616
1721
|
},
|
|
1617
1722
|
{
|
|
1618
|
-
"id": "components-button-features--leading-visual"
|
|
1723
|
+
"id": "components-button-features--leading-visual",
|
|
1724
|
+
"code": "() => <Button leadingVisual={HeartIcon}>Leading visual</Button>"
|
|
1619
1725
|
},
|
|
1620
1726
|
{
|
|
1621
|
-
"id": "components-button-features--trailing-visual"
|
|
1727
|
+
"id": "components-button-features--trailing-visual",
|
|
1728
|
+
"code": "() => <Button trailingVisual={EyeIcon}>Trailing visual</Button>"
|
|
1622
1729
|
},
|
|
1623
1730
|
{
|
|
1624
|
-
"id": "components-button-features--trailing-counter"
|
|
1731
|
+
"id": "components-button-features--trailing-counter",
|
|
1732
|
+
"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}"
|
|
1625
1733
|
},
|
|
1626
1734
|
{
|
|
1627
|
-
"id": "components-button-features--trailing-counter-with-no-text"
|
|
1735
|
+
"id": "components-button-features--trailing-counter-with-no-text",
|
|
1736
|
+
"code": "() => <Button aria-label=\"Comments\" leadingVisual={CommentIcon} count={3} />"
|
|
1628
1737
|
},
|
|
1629
1738
|
{
|
|
1630
|
-
"id": "components-button-features--trailing-counter-all-variants"
|
|
1739
|
+
"id": "components-button-features--trailing-counter-all-variants",
|
|
1740
|
+
"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}"
|
|
1631
1741
|
},
|
|
1632
1742
|
{
|
|
1633
|
-
"id": "components-button-features--trailing-action"
|
|
1743
|
+
"id": "components-button-features--trailing-action",
|
|
1744
|
+
"code": "() => <Button trailingAction={TriangleDownIcon}>Trailing action</Button>"
|
|
1634
1745
|
},
|
|
1635
1746
|
{
|
|
1636
|
-
"id": "components-button-features--block"
|
|
1747
|
+
"id": "components-button-features--block",
|
|
1748
|
+
"code": "() => <Button block>Default</Button>"
|
|
1637
1749
|
},
|
|
1638
1750
|
{
|
|
1639
|
-
"id": "components-button-features--disabled"
|
|
1751
|
+
"id": "components-button-features--disabled",
|
|
1752
|
+
"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)"
|
|
1640
1753
|
},
|
|
1641
1754
|
{
|
|
1642
|
-
"id": "components-button-features--inactive"
|
|
1755
|
+
"id": "components-button-features--inactive",
|
|
1756
|
+
"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)"
|
|
1643
1757
|
},
|
|
1644
1758
|
{
|
|
1645
|
-
"id": "components-button-features--small"
|
|
1759
|
+
"id": "components-button-features--small",
|
|
1760
|
+
"code": "() => <Button size=\"small\">Default</Button>"
|
|
1646
1761
|
},
|
|
1647
1762
|
{
|
|
1648
|
-
"id": "components-button-features--medium"
|
|
1763
|
+
"id": "components-button-features--medium",
|
|
1764
|
+
"code": "() => <Button size=\"medium\">Default</Button>"
|
|
1649
1765
|
},
|
|
1650
1766
|
{
|
|
1651
|
-
"id": "components-button-features--large"
|
|
1767
|
+
"id": "components-button-features--large",
|
|
1768
|
+
"code": "() => <Button size=\"large\">Default</Button>"
|
|
1652
1769
|
},
|
|
1653
1770
|
{
|
|
1654
|
-
"id": "components-button-features--loading"
|
|
1771
|
+
"id": "components-button-features--loading",
|
|
1772
|
+
"code": "() => <Button loading>Default</Button>"
|
|
1655
1773
|
},
|
|
1656
1774
|
{
|
|
1657
|
-
"id": "components-button-features--loading-custom-announcement"
|
|
1775
|
+
"id": "components-button-features--loading-custom-announcement",
|
|
1776
|
+
"code": "() => (\n <Button loading loadingAnnouncement=\"This is a custom loading announcement\">\n Default\n </Button>\n)"
|
|
1658
1777
|
},
|
|
1659
1778
|
{
|
|
1660
|
-
"id": "components-button-features--loading-with-leading-visual"
|
|
1779
|
+
"id": "components-button-features--loading-with-leading-visual",
|
|
1780
|
+
"code": "() => (\n <Button loading leadingVisual={DownloadIcon}>\n Export\n </Button>\n)"
|
|
1661
1781
|
},
|
|
1662
1782
|
{
|
|
1663
|
-
"id": "components-button-features--loading-with-trailing-visual"
|
|
1783
|
+
"id": "components-button-features--loading-with-trailing-visual",
|
|
1784
|
+
"code": "() => (\n <Button loading trailingVisual={DownloadIcon}>\n Export\n </Button>\n)"
|
|
1664
1785
|
},
|
|
1665
1786
|
{
|
|
1666
|
-
"id": "components-button-features--loading-with-trailing-action"
|
|
1787
|
+
"id": "components-button-features--loading-with-trailing-action",
|
|
1788
|
+
"code": "() => (\n <Button loading trailingAction={TriangleDownIcon}>\n Export dropdown\n </Button>\n)"
|
|
1667
1789
|
},
|
|
1668
1790
|
{
|
|
1669
|
-
"id": "components-button-features--loading-trigger"
|
|
1791
|
+
"id": "components-button-features--loading-trigger",
|
|
1792
|
+
"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}"
|
|
1670
1793
|
},
|
|
1671
1794
|
{
|
|
1672
|
-
"id": "components-button-features--label-wrap"
|
|
1795
|
+
"id": "components-button-features--label-wrap",
|
|
1796
|
+
"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}"
|
|
1673
1797
|
},
|
|
1674
1798
|
{
|
|
1675
|
-
"id": "components-button-features--inactive-button-with-tooltip"
|
|
1799
|
+
"id": "components-button-features--inactive-button-with-tooltip",
|
|
1800
|
+
"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)"
|
|
1676
1801
|
},
|
|
1677
1802
|
{
|
|
1678
|
-
"id": "components-button-features--expanded-button"
|
|
1803
|
+
"id": "components-button-features--expanded-button",
|
|
1804
|
+
"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)"
|
|
1679
1805
|
}
|
|
1680
1806
|
],
|
|
1681
1807
|
"importPath": "@primer/react",
|
|
@@ -1794,52 +1920,68 @@
|
|
|
1794
1920
|
"a11yReviewed": "2025-01-08",
|
|
1795
1921
|
"stories": [
|
|
1796
1922
|
{
|
|
1797
|
-
"id": "components-iconbutton--default"
|
|
1923
|
+
"id": "components-iconbutton--default",
|
|
1924
|
+
"code": "() => <IconButton icon={HeartIcon} aria-label=\"Favorite\" />"
|
|
1798
1925
|
},
|
|
1799
1926
|
{
|
|
1800
|
-
"id": "components-iconbutton-features--primary"
|
|
1927
|
+
"id": "components-iconbutton-features--primary",
|
|
1928
|
+
"code": "() => <IconButton icon={HeartIcon} variant=\"primary\" aria-label=\"Favorite\" />"
|
|
1801
1929
|
},
|
|
1802
1930
|
{
|
|
1803
|
-
"id": "components-iconbutton-features--danger"
|
|
1931
|
+
"id": "components-iconbutton-features--danger",
|
|
1932
|
+
"code": "() => <IconButton icon={HeartIcon} variant=\"danger\" aria-label=\"Favorite\" />"
|
|
1804
1933
|
},
|
|
1805
1934
|
{
|
|
1806
|
-
"id": "components-iconbutton-features--invisible"
|
|
1935
|
+
"id": "components-iconbutton-features--invisible",
|
|
1936
|
+
"code": "() => <IconButton icon={HeartIcon} variant=\"invisible\" aria-label=\"Favorite\" />"
|
|
1807
1937
|
},
|
|
1808
1938
|
{
|
|
1809
|
-
"id": "components-iconbutton-features--disabled"
|
|
1939
|
+
"id": "components-iconbutton-features--disabled",
|
|
1940
|
+
"code": "() => <IconButton disabled icon={HeartIcon} aria-label=\"Favorite\" />"
|
|
1810
1941
|
},
|
|
1811
1942
|
{
|
|
1812
|
-
"id": "components-iconbutton-features--small"
|
|
1943
|
+
"id": "components-iconbutton-features--small",
|
|
1944
|
+
"code": "() => <IconButton size=\"small\" icon={HeartIcon} aria-label=\"Favorite\" />"
|
|
1813
1945
|
},
|
|
1814
1946
|
{
|
|
1815
|
-
"id": "components-iconbutton-features--medium"
|
|
1947
|
+
"id": "components-iconbutton-features--medium",
|
|
1948
|
+
"code": "() => <IconButton size=\"medium\" icon={HeartIcon} aria-label=\"Favorite\" />"
|
|
1816
1949
|
},
|
|
1817
1950
|
{
|
|
1818
|
-
"id": "components-iconbutton-features--large"
|
|
1951
|
+
"id": "components-iconbutton-features--large",
|
|
1952
|
+
"code": "() => <IconButton size=\"large\" icon={HeartIcon} aria-label=\"Favorite\" />"
|
|
1819
1953
|
},
|
|
1820
1954
|
{
|
|
1821
|
-
"id": "components-iconbutton-features--with-description"
|
|
1955
|
+
"id": "components-iconbutton-features--with-description",
|
|
1956
|
+
"code": "() => (\n <IconButton\n icon={InboxIcon}\n aria-label=\"Notifications\"\n description=\"You have no unread notifications.\"\n />\n)"
|
|
1822
1957
|
},
|
|
1823
1958
|
{
|
|
1824
|
-
"id": "components-iconbutton-features--external-tooltip"
|
|
1959
|
+
"id": "components-iconbutton-features--external-tooltip",
|
|
1960
|
+
"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)"
|
|
1825
1961
|
},
|
|
1826
1962
|
{
|
|
1827
|
-
"id": "components-iconbutton-features--external-tooltip-version-1"
|
|
1963
|
+
"id": "components-iconbutton-features--external-tooltip-version-1",
|
|
1964
|
+
"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)"
|
|
1828
1965
|
},
|
|
1829
1966
|
{
|
|
1830
|
-
"id": "components-iconbutton-features--as-a-menu-anchor"
|
|
1967
|
+
"id": "components-iconbutton-features--as-a-menu-anchor",
|
|
1968
|
+
"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)"
|
|
1831
1969
|
},
|
|
1832
1970
|
{
|
|
1833
|
-
"id": "components-iconbutton-features--loading"
|
|
1971
|
+
"id": "components-iconbutton-features--loading",
|
|
1972
|
+
"code": "() => (\n <IconButton loading icon={HeartIcon} variant=\"primary\" aria-label=\"Primary\" />\n)"
|
|
1834
1973
|
},
|
|
1835
1974
|
{
|
|
1836
|
-
"id": "components-iconbutton-features--loading-trigger"
|
|
1975
|
+
"id": "components-iconbutton-features--loading-trigger",
|
|
1976
|
+
"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}"
|
|
1837
1977
|
},
|
|
1838
1978
|
{
|
|
1839
|
-
"id": "components-iconbutton-features--keybinding-hint-on-description"
|
|
1979
|
+
"id": "components-iconbutton-features--keybinding-hint-on-description",
|
|
1980
|
+
"code": "() => (\n <IconButton\n icon={InboxIcon}\n aria-label=\"Notifications\"\n description=\"You have unread notifications\"\n keybindingHint=\"G+N\"\n />\n)"
|
|
1840
1981
|
},
|
|
1841
1982
|
{
|
|
1842
|
-
"id": "components-iconbutton-features--keybinding-hint"
|
|
1983
|
+
"id": "components-iconbutton-features--keybinding-hint",
|
|
1984
|
+
"code": "() => <IconButton icon={BoldIcon} aria-label=\"Bold\" keybindingHint=\"Mod+B\" />"
|
|
1843
1985
|
}
|
|
1844
1986
|
],
|
|
1845
1987
|
"importPath": "@primer/react",
|
|
@@ -1927,19 +2069,24 @@
|
|
|
1927
2069
|
"a11yReviewed": "2025-01-08",
|
|
1928
2070
|
"stories": [
|
|
1929
2071
|
{
|
|
1930
|
-
"id": "components-buttongroup--default"
|
|
2072
|
+
"id": "components-buttongroup--default",
|
|
2073
|
+
"code": "() => (\n <ButtonGroup>\n <Button>Button 1</Button>\n <Button>Button 2</Button>\n <Button>Button 3</Button>\n </ButtonGroup>\n)"
|
|
1931
2074
|
},
|
|
1932
2075
|
{
|
|
1933
|
-
"id": "components-buttongroup-features--icon-buttons"
|
|
2076
|
+
"id": "components-buttongroup-features--icon-buttons",
|
|
2077
|
+
"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)"
|
|
1934
2078
|
},
|
|
1935
2079
|
{
|
|
1936
|
-
"id": "components-buttongroup-features--loading-buttons"
|
|
2080
|
+
"id": "components-buttongroup-features--loading-buttons",
|
|
2081
|
+
"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}"
|
|
1937
2082
|
},
|
|
1938
2083
|
{
|
|
1939
|
-
"id": "components-buttongroup-features--dropdown-split"
|
|
2084
|
+
"id": "components-buttongroup-features--dropdown-split",
|
|
2085
|
+
"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}"
|
|
1940
2086
|
},
|
|
1941
2087
|
{
|
|
1942
|
-
"id": "components-buttongroup-features--as-toolbar"
|
|
2088
|
+
"id": "components-buttongroup-features--as-toolbar",
|
|
2089
|
+
"code": "() => (\n <ButtonGroup role=\"toolbar\">\n <Button>Button 1</Button>\n <Button>Button 2</Button>\n <Button>Button 3</Button>\n </ButtonGroup>\n)"
|
|
1943
2090
|
}
|
|
1944
2091
|
],
|
|
1945
2092
|
"importPath": "@primer/react",
|
|
@@ -1959,19 +2106,24 @@
|
|
|
1959
2106
|
"a11yReviewed": "2025-01-08",
|
|
1960
2107
|
"stories": [
|
|
1961
2108
|
{
|
|
1962
|
-
"id": "components-checkbox--default"
|
|
2109
|
+
"id": "components-checkbox--default",
|
|
2110
|
+
"code": "() => (\n <form>\n <FormControl>\n <Checkbox value=\"default\" />\n <FormControl.Label>Default label</FormControl.Label>\n </FormControl>\n </form>\n)"
|
|
1963
2111
|
},
|
|
1964
2112
|
{
|
|
1965
|
-
"id": "components-checkbox-features--with-leading-visual"
|
|
2113
|
+
"id": "components-checkbox-features--with-leading-visual",
|
|
2114
|
+
"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}"
|
|
1966
2115
|
},
|
|
1967
2116
|
{
|
|
1968
|
-
"id": "components-checkbox-features--disabled"
|
|
2117
|
+
"id": "components-checkbox-features--disabled",
|
|
2118
|
+
"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}"
|
|
1969
2119
|
},
|
|
1970
2120
|
{
|
|
1971
|
-
"id": "components-checkbox-features--with-caption"
|
|
2121
|
+
"id": "components-checkbox-features--with-caption",
|
|
2122
|
+
"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}"
|
|
1972
2123
|
},
|
|
1973
2124
|
{
|
|
1974
|
-
"id": "components-checkbox-features--indeterminate"
|
|
2125
|
+
"id": "components-checkbox-features--indeterminate",
|
|
2126
|
+
"code": "() => (\n <form>\n <FormControl>\n <Checkbox value=\"default\" indeterminate />\n <FormControl.Label>Default label</FormControl.Label>\n </FormControl>\n </form>\n)"
|
|
1975
2127
|
}
|
|
1976
2128
|
],
|
|
1977
2129
|
"importPath": "@primer/react",
|
|
@@ -2038,22 +2190,28 @@
|
|
|
2038
2190
|
"a11yReviewed": "2025-01-08",
|
|
2039
2191
|
"stories": [
|
|
2040
2192
|
{
|
|
2041
|
-
"id": "components-checkboxgroup--default"
|
|
2193
|
+
"id": "components-checkboxgroup--default",
|
|
2194
|
+
"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)"
|
|
2042
2195
|
},
|
|
2043
2196
|
{
|
|
2044
|
-
"id": "components-checkboxgroup-features--visually-hidden-label"
|
|
2197
|
+
"id": "components-checkboxgroup-features--visually-hidden-label",
|
|
2198
|
+
"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)"
|
|
2045
2199
|
},
|
|
2046
2200
|
{
|
|
2047
|
-
"id": "components-checkboxgroup-features--with-external-label"
|
|
2201
|
+
"id": "components-checkboxgroup-features--with-external-label",
|
|
2202
|
+
"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)"
|
|
2048
2203
|
},
|
|
2049
2204
|
{
|
|
2050
|
-
"id": "components-checkboxgroup-features--error"
|
|
2205
|
+
"id": "components-checkboxgroup-features--error",
|
|
2206
|
+
"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)"
|
|
2051
2207
|
},
|
|
2052
2208
|
{
|
|
2053
|
-
"id": "components-checkboxgroup-features--success"
|
|
2209
|
+
"id": "components-checkboxgroup-features--success",
|
|
2210
|
+
"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)"
|
|
2054
2211
|
},
|
|
2055
2212
|
{
|
|
2056
|
-
"id": "components-checkboxgroup-features--caption"
|
|
2213
|
+
"id": "components-checkboxgroup-features--caption",
|
|
2214
|
+
"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)"
|
|
2057
2215
|
}
|
|
2058
2216
|
],
|
|
2059
2217
|
"importPath": "@primer/react",
|
|
@@ -2147,7 +2305,8 @@
|
|
|
2147
2305
|
"a11yReviewed": "2025-01-08",
|
|
2148
2306
|
"stories": [
|
|
2149
2307
|
{
|
|
2150
|
-
"id": "deprecated-components-circlebadge--default"
|
|
2308
|
+
"id": "deprecated-components-circlebadge--default",
|
|
2309
|
+
"code": "() => (\n <CircleBadge>\n <CircleBadge.Icon icon={ZapIcon} aria-label=\"User badge\" />\n </CircleBadge>\n)"
|
|
2151
2310
|
}
|
|
2152
2311
|
],
|
|
2153
2312
|
"importPath": "@primer/react",
|
|
@@ -2207,16 +2366,20 @@
|
|
|
2207
2366
|
"importPath": "@primer/react",
|
|
2208
2367
|
"stories": [
|
|
2209
2368
|
{
|
|
2210
|
-
"id": "components-confirmationdialog--default"
|
|
2369
|
+
"id": "components-confirmationdialog--default",
|
|
2370
|
+
"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}"
|
|
2211
2371
|
},
|
|
2212
2372
|
{
|
|
2213
|
-
"id": "components-confirmationdialog-features--shorthand-hook"
|
|
2373
|
+
"id": "components-confirmationdialog-features--shorthand-hook",
|
|
2374
|
+
"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}"
|
|
2214
2375
|
},
|
|
2215
2376
|
{
|
|
2216
|
-
"id": "components-confirmationdialog-features--shorthand-hook-from-action-menu"
|
|
2377
|
+
"id": "components-confirmationdialog-features--shorthand-hook-from-action-menu",
|
|
2378
|
+
"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}"
|
|
2217
2379
|
},
|
|
2218
2380
|
{
|
|
2219
|
-
"id": "components-confirmationdialog-features--loading-states"
|
|
2381
|
+
"id": "components-confirmationdialog-features--loading-states",
|
|
2382
|
+
"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}"
|
|
2220
2383
|
}
|
|
2221
2384
|
],
|
|
2222
2385
|
"props": [
|
|
@@ -2281,13 +2444,16 @@
|
|
|
2281
2444
|
"a11yReviewed": "2025-01-08",
|
|
2282
2445
|
"stories": [
|
|
2283
2446
|
{
|
|
2284
|
-
"id": "components-counterlabel--default"
|
|
2447
|
+
"id": "components-counterlabel--default",
|
|
2448
|
+
"code": "() => <CounterLabel>12</CounterLabel>"
|
|
2285
2449
|
},
|
|
2286
2450
|
{
|
|
2287
|
-
"id": "components-counterlabel-features--primary-theme"
|
|
2451
|
+
"id": "components-counterlabel-features--primary-theme",
|
|
2452
|
+
"code": "() => <CounterLabel variant=\"primary\">12</CounterLabel>"
|
|
2288
2453
|
},
|
|
2289
2454
|
{
|
|
2290
|
-
"id": "components-counterlabel-features--secondary-theme"
|
|
2455
|
+
"id": "components-counterlabel-features--secondary-theme",
|
|
2456
|
+
"code": "() => <CounterLabel variant=\"secondary\">12</CounterLabel>"
|
|
2291
2457
|
}
|
|
2292
2458
|
],
|
|
2293
2459
|
"importPath": "@primer/react",
|
|
@@ -2315,46 +2481,56 @@
|
|
|
2315
2481
|
"a11yReviewed": "2025-01-08",
|
|
2316
2482
|
"stories": [
|
|
2317
2483
|
{
|
|
2318
|
-
"id": "components-datatable--default"
|
|
2484
|
+
"id": "experimental-components-datatable--default",
|
|
2485
|
+
"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)"
|
|
2319
2486
|
},
|
|
2320
2487
|
{
|
|
2321
|
-
"id": "experimental-components-datatable--
|
|
2488
|
+
"id": "experimental-components-datatable-features--with-title",
|
|
2489
|
+
"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)"
|
|
2322
2490
|
},
|
|
2323
2491
|
{
|
|
2324
|
-
"id": "experimental-components-datatable-features--with-title"
|
|
2492
|
+
"id": "experimental-components-datatable-features--with-title-and-subtitle",
|
|
2493
|
+
"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)"
|
|
2325
2494
|
},
|
|
2326
2495
|
{
|
|
2327
|
-
"id": "experimental-components-datatable-features--with-
|
|
2496
|
+
"id": "experimental-components-datatable-features--with-sorting",
|
|
2497
|
+
"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}"
|
|
2328
2498
|
},
|
|
2329
2499
|
{
|
|
2330
|
-
"id": "experimental-components-datatable-features--with-
|
|
2500
|
+
"id": "experimental-components-datatable-features--with-actions",
|
|
2501
|
+
"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)"
|
|
2331
2502
|
},
|
|
2332
2503
|
{
|
|
2333
|
-
"id": "experimental-components-datatable-features--with-
|
|
2504
|
+
"id": "experimental-components-datatable-features--with-action",
|
|
2505
|
+
"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)"
|
|
2334
2506
|
},
|
|
2335
2507
|
{
|
|
2336
|
-
"id": "experimental-components-datatable-features--with-action"
|
|
2508
|
+
"id": "experimental-components-datatable-features--with-row-action",
|
|
2509
|
+
"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)"
|
|
2337
2510
|
},
|
|
2338
2511
|
{
|
|
2339
|
-
"id": "experimental-components-datatable-features--with-row-
|
|
2512
|
+
"id": "experimental-components-datatable-features--with-row-actions",
|
|
2513
|
+
"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)"
|
|
2340
2514
|
},
|
|
2341
2515
|
{
|
|
2342
|
-
"id": "experimental-components-datatable-features--with-row-
|
|
2516
|
+
"id": "experimental-components-datatable-features--with-row-action-menu",
|
|
2517
|
+
"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)"
|
|
2343
2518
|
},
|
|
2344
2519
|
{
|
|
2345
|
-
"id": "experimental-components-datatable-features--with-
|
|
2520
|
+
"id": "experimental-components-datatable-features--with-custom-heading",
|
|
2521
|
+
"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)"
|
|
2346
2522
|
},
|
|
2347
2523
|
{
|
|
2348
|
-
"id": "experimental-components-datatable-features--with-
|
|
2524
|
+
"id": "experimental-components-datatable-features--with-no-content",
|
|
2525
|
+
"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}"
|
|
2349
2526
|
},
|
|
2350
2527
|
{
|
|
2351
|
-
"id": "experimental-components-datatable-features--with-
|
|
2528
|
+
"id": "experimental-components-datatable-features--with-loading",
|
|
2529
|
+
"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}"
|
|
2352
2530
|
},
|
|
2353
2531
|
{
|
|
2354
|
-
"id": "experimental-components-datatable-features--with-
|
|
2355
|
-
}
|
|
2356
|
-
{
|
|
2357
|
-
"id": "experimental-components-datatable-features--with-pagination"
|
|
2532
|
+
"id": "experimental-components-datatable-features--with-pagination",
|
|
2533
|
+
"code": "() => {\n const pageSize = 10\n const [pageIndex, setPageIndex] = React.useState(0)\n const start = pageIndex * pageSize\n const end = start + pageSize\n const rows = repos.slice(start, end)\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 },\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.Pagination\n aria-label=\"Pagination for Repositories\"\n pageSize={pageSize}\n totalCount={repos.length}\n onChange={({ pageIndex }) => {\n setPageIndex(pageIndex)\n }}\n />\n </Table.Container>\n )\n}"
|
|
2358
2534
|
}
|
|
2359
2535
|
],
|
|
2360
2536
|
"importPath": "@primer/react/experimental",
|
|
@@ -2746,7 +2922,8 @@
|
|
|
2746
2922
|
"a11yReviewed": "2025-01-08",
|
|
2747
2923
|
"stories": [
|
|
2748
2924
|
{
|
|
2749
|
-
"id": "components-details--default"
|
|
2925
|
+
"id": "components-details--default",
|
|
2926
|
+
"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}"
|
|
2750
2927
|
}
|
|
2751
2928
|
],
|
|
2752
2929
|
"importPath": "@primer/react",
|
|
@@ -2779,34 +2956,44 @@
|
|
|
2779
2956
|
"a11yReviewed": "2025-01-08",
|
|
2780
2957
|
"stories": [
|
|
2781
2958
|
{
|
|
2782
|
-
"id": "components-dialog--default"
|
|
2959
|
+
"id": "components-dialog--default",
|
|
2960
|
+
"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}"
|
|
2783
2961
|
},
|
|
2784
2962
|
{
|
|
2785
|
-
"id": "components-dialog-features--with-custom-renderers"
|
|
2963
|
+
"id": "components-dialog-features--with-custom-renderers",
|
|
2964
|
+
"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}"
|
|
2786
2965
|
},
|
|
2787
2966
|
{
|
|
2788
|
-
"id": "components-dialog-features--stress-test"
|
|
2967
|
+
"id": "components-dialog-features--stress-test",
|
|
2968
|
+
"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}"
|
|
2789
2969
|
},
|
|
2790
2970
|
{
|
|
2791
|
-
"id": "components-dialog-features--repro-multistep-dialog-with-conditional-footer"
|
|
2971
|
+
"id": "components-dialog-features--repro-multistep-dialog-with-conditional-footer",
|
|
2972
|
+
"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}"
|
|
2792
2973
|
},
|
|
2793
2974
|
{
|
|
2794
|
-
"id": "components-dialog-features--bottom-sheet-narrow"
|
|
2975
|
+
"id": "components-dialog-features--bottom-sheet-narrow",
|
|
2976
|
+
"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}"
|
|
2795
2977
|
},
|
|
2796
2978
|
{
|
|
2797
|
-
"id": "components-dialog-features--full-screen-narrow"
|
|
2979
|
+
"id": "components-dialog-features--full-screen-narrow",
|
|
2980
|
+
"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}"
|
|
2798
2981
|
},
|
|
2799
2982
|
{
|
|
2800
|
-
"id": "components-dialog-features--side-sheet"
|
|
2983
|
+
"id": "components-dialog-features--side-sheet",
|
|
2984
|
+
"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}"
|
|
2801
2985
|
},
|
|
2802
2986
|
{
|
|
2803
|
-
"id": "components-dialog-features--return-focus-ref"
|
|
2987
|
+
"id": "components-dialog-features--return-focus-ref",
|
|
2988
|
+
"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}"
|
|
2804
2989
|
},
|
|
2805
2990
|
{
|
|
2806
|
-
"id": "components-dialog-features--new-issues"
|
|
2991
|
+
"id": "components-dialog-features--new-issues",
|
|
2992
|
+
"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}"
|
|
2807
2993
|
},
|
|
2808
2994
|
{
|
|
2809
|
-
"id": "components-dialog-features--retains-focus-trap-with-dynamic-content"
|
|
2995
|
+
"id": "components-dialog-features--retains-focus-trap-with-dynamic-content",
|
|
2996
|
+
"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}"
|
|
2810
2997
|
}
|
|
2811
2998
|
],
|
|
2812
2999
|
"importPath": "@primer/react",
|
|
@@ -2978,25 +3165,32 @@
|
|
|
2978
3165
|
"a11yReviewed": "2025-01-08",
|
|
2979
3166
|
"stories": [
|
|
2980
3167
|
{
|
|
2981
|
-
"id": "components-flash--default"
|
|
3168
|
+
"id": "components-flash--default",
|
|
3169
|
+
"code": "() => <Flash>Default</Flash>"
|
|
2982
3170
|
},
|
|
2983
3171
|
{
|
|
2984
|
-
"id": "components-flash-features--success"
|
|
3172
|
+
"id": "components-flash-features--success",
|
|
3173
|
+
"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)"
|
|
2985
3174
|
},
|
|
2986
3175
|
{
|
|
2987
|
-
"id": "components-flash-features--danger"
|
|
3176
|
+
"id": "components-flash-features--danger",
|
|
3177
|
+
"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)"
|
|
2988
3178
|
},
|
|
2989
3179
|
{
|
|
2990
|
-
"id": "components-flash-features--warning"
|
|
3180
|
+
"id": "components-flash-features--warning",
|
|
3181
|
+
"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)"
|
|
2991
3182
|
},
|
|
2992
3183
|
{
|
|
2993
|
-
"id": "components-flash-features--full"
|
|
3184
|
+
"id": "components-flash-features--full",
|
|
3185
|
+
"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)"
|
|
2994
3186
|
},
|
|
2995
3187
|
{
|
|
2996
|
-
"id": "components-flash-features--with-icon-and-action"
|
|
3188
|
+
"id": "components-flash-features--with-icon-and-action",
|
|
3189
|
+
"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)"
|
|
2997
3190
|
},
|
|
2998
3191
|
{
|
|
2999
|
-
"id": "components-flash-features--with-icon-action-dismiss"
|
|
3192
|
+
"id": "components-flash-features--with-icon-action-dismiss",
|
|
3193
|
+
"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)"
|
|
3000
3194
|
}
|
|
3001
3195
|
],
|
|
3002
3196
|
"importPath": "@primer/react",
|
|
@@ -3033,52 +3227,68 @@
|
|
|
3033
3227
|
"a11yReviewed": "2025-01-08",
|
|
3034
3228
|
"stories": [
|
|
3035
3229
|
{
|
|
3036
|
-
"id": "components-formcontrol--default"
|
|
3230
|
+
"id": "components-formcontrol--default",
|
|
3231
|
+
"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)"
|
|
3037
3232
|
},
|
|
3038
3233
|
{
|
|
3039
|
-
"id": "components-formcontrol-features--with-complex-inputs"
|
|
3234
|
+
"id": "components-formcontrol-features--with-complex-inputs",
|
|
3235
|
+
"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}"
|
|
3040
3236
|
},
|
|
3041
3237
|
{
|
|
3042
|
-
"id": "components-formcontrol-features--form-control-with-custom-input"
|
|
3238
|
+
"id": "components-formcontrol-features--form-control-with-custom-input",
|
|
3239
|
+
"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}"
|
|
3043
3240
|
},
|
|
3044
3241
|
{
|
|
3045
|
-
"id": "components-formcontrol-features--with-checkbox-and-radio-inputs"
|
|
3242
|
+
"id": "components-formcontrol-features--with-checkbox-and-radio-inputs",
|
|
3243
|
+
"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}"
|
|
3046
3244
|
},
|
|
3047
3245
|
{
|
|
3048
|
-
"id": "components-formcontrol-features--single-input"
|
|
3246
|
+
"id": "components-formcontrol-features--single-input",
|
|
3247
|
+
"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)"
|
|
3049
3248
|
},
|
|
3050
3249
|
{
|
|
3051
|
-
"id": "components-formcontrol-features--validation-example"
|
|
3250
|
+
"id": "components-formcontrol-features--validation-example",
|
|
3251
|
+
"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}"
|
|
3052
3252
|
},
|
|
3053
3253
|
{
|
|
3054
|
-
"id": "components-formcontrol-features--with-select-panel"
|
|
3254
|
+
"id": "components-formcontrol-features--with-select-panel",
|
|
3255
|
+
"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}"
|
|
3055
3256
|
},
|
|
3056
3257
|
{
|
|
3057
|
-
"id": "components-formcontrol-features--with-leading-visual"
|
|
3258
|
+
"id": "components-formcontrol-features--with-leading-visual",
|
|
3259
|
+
"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)"
|
|
3058
3260
|
},
|
|
3059
3261
|
{
|
|
3060
|
-
"id": "components-formcontrol-features--disabled-inputs"
|
|
3262
|
+
"id": "components-formcontrol-features--disabled-inputs",
|
|
3263
|
+
"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)"
|
|
3061
3264
|
},
|
|
3062
3265
|
{
|
|
3063
|
-
"id": "components-formcontrol-features--custom-required"
|
|
3266
|
+
"id": "components-formcontrol-features--custom-required",
|
|
3267
|
+
"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)"
|
|
3064
3268
|
},
|
|
3065
3269
|
{
|
|
3066
|
-
"id": "components-formcontrol-features--with-caption"
|
|
3270
|
+
"id": "components-formcontrol-features--with-caption",
|
|
3271
|
+
"code": "() => (\n <FormControl>\n <FormControl.Label>Example label</FormControl.Label>\n <TextInput />\n <FormControl.Caption>Example caption</FormControl.Caption>\n </FormControl>\n)"
|
|
3067
3272
|
},
|
|
3068
3273
|
{
|
|
3069
|
-
"id": "components-formcontrol-features--with-caption-and-disabled"
|
|
3274
|
+
"id": "components-formcontrol-features--with-caption-and-disabled",
|
|
3275
|
+
"code": "() => (\n <FormControl disabled>\n <FormControl.Label>Example label</FormControl.Label>\n <TextInput />\n <FormControl.Caption>Example caption</FormControl.Caption>\n </FormControl>\n)"
|
|
3070
3276
|
},
|
|
3071
3277
|
{
|
|
3072
|
-
"id": "components-formcontrol-features--with-hidden-label"
|
|
3278
|
+
"id": "components-formcontrol-features--with-hidden-label",
|
|
3279
|
+
"code": "() => (\n <FormControl>\n <FormControl.Label visuallyHidden>Example label</FormControl.Label>\n <TextInput />\n </FormControl>\n)"
|
|
3073
3280
|
},
|
|
3074
3281
|
{
|
|
3075
|
-
"id": "components-formcontrol-features--with-required-indicator"
|
|
3282
|
+
"id": "components-formcontrol-features--with-required-indicator",
|
|
3283
|
+
"code": "() => (\n <FormControl required>\n <FormControl.Label requiredIndicator>Example label</FormControl.Label>\n <TextInput />\n </FormControl>\n)"
|
|
3076
3284
|
},
|
|
3077
3285
|
{
|
|
3078
|
-
"id": "components-formcontrol-features--with-success-validation"
|
|
3286
|
+
"id": "components-formcontrol-features--with-success-validation",
|
|
3287
|
+
"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)"
|
|
3079
3288
|
},
|
|
3080
3289
|
{
|
|
3081
|
-
"id": "components-formcontrol-features--with-error-validation"
|
|
3290
|
+
"id": "components-formcontrol-features--with-error-validation",
|
|
3291
|
+
"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)"
|
|
3082
3292
|
}
|
|
3083
3293
|
],
|
|
3084
3294
|
"importPath": "@primer/react",
|
|
@@ -3240,16 +3450,20 @@
|
|
|
3240
3450
|
"a11yReviewed": "2025-01-08",
|
|
3241
3451
|
"stories": [
|
|
3242
3452
|
{
|
|
3243
|
-
"id": "components-header--default"
|
|
3453
|
+
"id": "components-header--default",
|
|
3454
|
+
"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)"
|
|
3244
3455
|
},
|
|
3245
3456
|
{
|
|
3246
|
-
"id": "components-header-features--with-full-size-item"
|
|
3457
|
+
"id": "components-header-features--with-full-size-item",
|
|
3458
|
+
"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)"
|
|
3247
3459
|
},
|
|
3248
3460
|
{
|
|
3249
|
-
"id": "components-header-features--with-links"
|
|
3461
|
+
"id": "components-header-features--with-links",
|
|
3462
|
+
"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)"
|
|
3250
3463
|
},
|
|
3251
3464
|
{
|
|
3252
|
-
"id": "components-header-features--with-many-items"
|
|
3465
|
+
"id": "components-header-features--with-many-items",
|
|
3466
|
+
"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)"
|
|
3253
3467
|
}
|
|
3254
3468
|
],
|
|
3255
3469
|
"importPath": "@primer/react",
|
|
@@ -3296,16 +3510,20 @@
|
|
|
3296
3510
|
"a11yReviewed": "2025-01-08",
|
|
3297
3511
|
"stories": [
|
|
3298
3512
|
{
|
|
3299
|
-
"id": "components-heading--default"
|
|
3513
|
+
"id": "components-heading--default",
|
|
3514
|
+
"code": "() => <Heading>Default H2 Heading</Heading>"
|
|
3300
3515
|
},
|
|
3301
3516
|
{
|
|
3302
|
-
"id": "components-heading-features--small"
|
|
3517
|
+
"id": "components-heading-features--small",
|
|
3518
|
+
"code": "() => <Heading variant=\"small\">Small heading</Heading>"
|
|
3303
3519
|
},
|
|
3304
3520
|
{
|
|
3305
|
-
"id": "components-heading-features--medium"
|
|
3521
|
+
"id": "components-heading-features--medium",
|
|
3522
|
+
"code": "() => <Heading variant=\"medium\">Medium heading</Heading>"
|
|
3306
3523
|
},
|
|
3307
3524
|
{
|
|
3308
|
-
"id": "components-heading-features--large"
|
|
3525
|
+
"id": "components-heading-features--large",
|
|
3526
|
+
"code": "() => <Heading variant=\"large\">Large heading</Heading>"
|
|
3309
3527
|
}
|
|
3310
3528
|
],
|
|
3311
3529
|
"importPath": "@primer/react",
|
|
@@ -3329,13 +3547,16 @@
|
|
|
3329
3547
|
"a11yReviewed": "2025-01-08",
|
|
3330
3548
|
"stories": [
|
|
3331
3549
|
{
|
|
3332
|
-
"id": "experimental-components-hidden--default"
|
|
3550
|
+
"id": "experimental-components-hidden--default",
|
|
3551
|
+
"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)"
|
|
3333
3552
|
},
|
|
3334
3553
|
{
|
|
3335
|
-
"id": "experimental-components-hidden-features--hide-content"
|
|
3554
|
+
"id": "experimental-components-hidden-features--hide-content",
|
|
3555
|
+
"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)"
|
|
3336
3556
|
},
|
|
3337
3557
|
{
|
|
3338
|
-
"id": "experimental-components-hidden-features--render-content-responsively"
|
|
3558
|
+
"id": "experimental-components-hidden-features--render-content-responsively",
|
|
3559
|
+
"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)"
|
|
3339
3560
|
}
|
|
3340
3561
|
],
|
|
3341
3562
|
"importPath": "@primer/react/experimental",
|
|
@@ -3358,25 +3579,28 @@
|
|
|
3358
3579
|
"importPath": "@primer/react/experimental",
|
|
3359
3580
|
"stories": [
|
|
3360
3581
|
{
|
|
3361
|
-
"id": "components-inlinemessage--default"
|
|
3362
|
-
|
|
3363
|
-
{
|
|
3364
|
-
"id": "experimental-components-inlinemessage--default"
|
|
3582
|
+
"id": "experimental-components-inlinemessage--default",
|
|
3583
|
+
"code": "() => {\n return (\n <InlineMessage variant=\"unavailable\">\n An example inline message\n </InlineMessage>\n )\n}"
|
|
3365
3584
|
},
|
|
3366
3585
|
{
|
|
3367
|
-
"id": "experimental-components-inlinemessage-features--critical"
|
|
3586
|
+
"id": "experimental-components-inlinemessage-features--critical",
|
|
3587
|
+
"code": "() => {\n return (\n <InlineMessage variant=\"critical\">An example inline message</InlineMessage>\n )\n}"
|
|
3368
3588
|
},
|
|
3369
3589
|
{
|
|
3370
|
-
"id": "experimental-components-inlinemessage-features--success"
|
|
3590
|
+
"id": "experimental-components-inlinemessage-features--success",
|
|
3591
|
+
"code": "() => {\n return (\n <InlineMessage variant=\"success\">An example inline message</InlineMessage>\n )\n}"
|
|
3371
3592
|
},
|
|
3372
3593
|
{
|
|
3373
|
-
"id": "experimental-components-inlinemessage-features--unavailable"
|
|
3594
|
+
"id": "experimental-components-inlinemessage-features--unavailable",
|
|
3595
|
+
"code": "() => {\n return (\n <InlineMessage variant=\"unavailable\">\n An example inline message\n </InlineMessage>\n )\n}"
|
|
3374
3596
|
},
|
|
3375
3597
|
{
|
|
3376
|
-
"id": "experimental-components-inlinemessage-features--warning"
|
|
3598
|
+
"id": "experimental-components-inlinemessage-features--warning",
|
|
3599
|
+
"code": "() => {\n return (\n <InlineMessage variant=\"warning\">An example inline message</InlineMessage>\n )\n}"
|
|
3377
3600
|
},
|
|
3378
3601
|
{
|
|
3379
|
-
"id": "experimental-components-inlinemessage-features--multiline"
|
|
3602
|
+
"id": "experimental-components-inlinemessage-features--multiline",
|
|
3603
|
+
"code": "() => {\n return (\n <div\n style={{\n maxWidth: '30ch',\n }}\n >\n <InlineMessage variant=\"success\">\n An example inline message that spans multiple lines\n </InlineMessage>\n </div>\n )\n}"
|
|
3380
3604
|
}
|
|
3381
3605
|
],
|
|
3382
3606
|
"props": [
|
|
@@ -3403,10 +3627,12 @@
|
|
|
3403
3627
|
"a11yReviewed": "2025-01-08",
|
|
3404
3628
|
"stories": [
|
|
3405
3629
|
{
|
|
3406
|
-
"id": "experimental-components-keybindinghint-features--on-emphasis"
|
|
3630
|
+
"id": "experimental-components-keybindinghint-features--on-emphasis",
|
|
3631
|
+
"code": "(args) => (\n <div className={classes.EmphasisBackground}>\n <KeybindingHint {...args} />\n </div>\n)"
|
|
3407
3632
|
},
|
|
3408
3633
|
{
|
|
3409
|
-
"id": "experimental-components-keybindinghint-features--on-primary"
|
|
3634
|
+
"id": "experimental-components-keybindinghint-features--on-primary",
|
|
3635
|
+
"code": "(args) => (\n <div className={classes.PrimaryBackground}>\n <KeybindingHint {...args} />\n </div>\n)"
|
|
3410
3636
|
}
|
|
3411
3637
|
],
|
|
3412
3638
|
"importPath": "@primer/react",
|
|
@@ -3445,40 +3671,52 @@
|
|
|
3445
3671
|
"a11yReviewed": "2025-01-08",
|
|
3446
3672
|
"stories": [
|
|
3447
3673
|
{
|
|
3448
|
-
"id": "components-label--default"
|
|
3674
|
+
"id": "components-label--default",
|
|
3675
|
+
"code": "() => <Label>Default</Label>"
|
|
3449
3676
|
},
|
|
3450
3677
|
{
|
|
3451
|
-
"id": "components-label-features--primary"
|
|
3678
|
+
"id": "components-label-features--primary",
|
|
3679
|
+
"code": "() => <Label variant=\"primary\">Primary</Label>"
|
|
3452
3680
|
},
|
|
3453
3681
|
{
|
|
3454
|
-
"id": "components-label-features--secondary"
|
|
3682
|
+
"id": "components-label-features--secondary",
|
|
3683
|
+
"code": "() => <Label variant=\"secondary\">Secondary</Label>"
|
|
3455
3684
|
},
|
|
3456
3685
|
{
|
|
3457
|
-
"id": "components-label-features--accent"
|
|
3686
|
+
"id": "components-label-features--accent",
|
|
3687
|
+
"code": "() => <Label variant=\"accent\">Accent</Label>"
|
|
3458
3688
|
},
|
|
3459
3689
|
{
|
|
3460
|
-
"id": "components-label-features--success"
|
|
3690
|
+
"id": "components-label-features--success",
|
|
3691
|
+
"code": "() => <Label variant=\"success\">Success</Label>"
|
|
3461
3692
|
},
|
|
3462
3693
|
{
|
|
3463
|
-
"id": "components-label-features--attention"
|
|
3694
|
+
"id": "components-label-features--attention",
|
|
3695
|
+
"code": "() => <Label variant=\"attention\">Attention</Label>"
|
|
3464
3696
|
},
|
|
3465
3697
|
{
|
|
3466
|
-
"id": "components-label-features--severe"
|
|
3698
|
+
"id": "components-label-features--severe",
|
|
3699
|
+
"code": "() => <Label variant=\"severe\">Primary</Label>"
|
|
3467
3700
|
},
|
|
3468
3701
|
{
|
|
3469
|
-
"id": "components-label-features--danger"
|
|
3702
|
+
"id": "components-label-features--danger",
|
|
3703
|
+
"code": "() => <Label variant=\"danger\">Danger</Label>"
|
|
3470
3704
|
},
|
|
3471
3705
|
{
|
|
3472
|
-
"id": "components-label-features--done"
|
|
3706
|
+
"id": "components-label-features--done",
|
|
3707
|
+
"code": "() => <Label variant=\"done\">Done</Label>"
|
|
3473
3708
|
},
|
|
3474
3709
|
{
|
|
3475
|
-
"id": "components-label-features--sponsors"
|
|
3710
|
+
"id": "components-label-features--sponsors",
|
|
3711
|
+
"code": "() => <Label variant=\"sponsors\">Sponsors</Label>"
|
|
3476
3712
|
},
|
|
3477
3713
|
{
|
|
3478
|
-
"id": "components-label-features--size-large"
|
|
3714
|
+
"id": "components-label-features--size-large",
|
|
3715
|
+
"code": "() => <Label size=\"large\">Default</Label>"
|
|
3479
3716
|
},
|
|
3480
3717
|
{
|
|
3481
|
-
"id": "components-label-features--size-small"
|
|
3718
|
+
"id": "components-label-features--size-small",
|
|
3719
|
+
"code": "() => <Label size=\"small\">Default</Label>"
|
|
3482
3720
|
}
|
|
3483
3721
|
],
|
|
3484
3722
|
"importPath": "@primer/react",
|
|
@@ -3506,22 +3744,28 @@
|
|
|
3506
3744
|
"a11yReviewed": "2025-01-08",
|
|
3507
3745
|
"stories": [
|
|
3508
3746
|
{
|
|
3509
|
-
"id": "components-labelgroup--default"
|
|
3747
|
+
"id": "components-labelgroup--default",
|
|
3748
|
+
"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)"
|
|
3510
3749
|
},
|
|
3511
3750
|
{
|
|
3512
|
-
"id": "components-labelgroup-features--truncate-auto"
|
|
3751
|
+
"id": "components-labelgroup-features--truncate-auto",
|
|
3752
|
+
"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)"
|
|
3513
3753
|
},
|
|
3514
3754
|
{
|
|
3515
|
-
"id": "components-labelgroup-features--truncate-auto-with-interactive-tokens"
|
|
3755
|
+
"id": "components-labelgroup-features--truncate-auto-with-interactive-tokens",
|
|
3756
|
+
"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)"
|
|
3516
3757
|
},
|
|
3517
3758
|
{
|
|
3518
|
-
"id": "components-labelgroup-features--truncate-after-five"
|
|
3759
|
+
"id": "components-labelgroup-features--truncate-after-five",
|
|
3760
|
+
"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)"
|
|
3519
3761
|
},
|
|
3520
3762
|
{
|
|
3521
|
-
"id": "components-labelgroup-features--truncate-auto-expand-inline"
|
|
3763
|
+
"id": "components-labelgroup-features--truncate-auto-expand-inline",
|
|
3764
|
+
"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)"
|
|
3522
3765
|
},
|
|
3523
3766
|
{
|
|
3524
|
-
"id": "components-labelgroup-features--truncate-auto-expand-inline-with-interactive-tokens"
|
|
3767
|
+
"id": "components-labelgroup-features--truncate-auto-expand-inline-with-interactive-tokens",
|
|
3768
|
+
"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)"
|
|
3525
3769
|
}
|
|
3526
3770
|
],
|
|
3527
3771
|
"importPath": "@primer/react",
|
|
@@ -3555,13 +3799,16 @@
|
|
|
3555
3799
|
"a11yReviewed": "2025-01-08",
|
|
3556
3800
|
"stories": [
|
|
3557
3801
|
{
|
|
3558
|
-
"id": "components-link--default"
|
|
3802
|
+
"id": "components-link--default",
|
|
3803
|
+
"code": "() => <Link href=\"#\">Links are great</Link>"
|
|
3559
3804
|
},
|
|
3560
3805
|
{
|
|
3561
|
-
"id": "components-link-features--muted"
|
|
3806
|
+
"id": "components-link-features--muted",
|
|
3807
|
+
"code": "() => (\n <Link href=\"#\" muted>\n Link\n </Link>\n)"
|
|
3562
3808
|
},
|
|
3563
3809
|
{
|
|
3564
|
-
"id": "components-link-features--inline"
|
|
3810
|
+
"id": "components-link-features--inline",
|
|
3811
|
+
"code": "() => (\n <div data-a11y-link-underlines=\"true\">\n <Link inline={true} href=\"#\">\n Link\n </Link>\n </div>\n)"
|
|
3565
3812
|
}
|
|
3566
3813
|
],
|
|
3567
3814
|
"importPath": "@primer/react",
|
|
@@ -3617,58 +3864,76 @@
|
|
|
3617
3864
|
"a11yReviewed": "2025-01-08",
|
|
3618
3865
|
"stories": [
|
|
3619
3866
|
{
|
|
3620
|
-
"id": "components-navlist--default"
|
|
3867
|
+
"id": "components-navlist--default",
|
|
3868
|
+
"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)"
|
|
3621
3869
|
},
|
|
3622
3870
|
{
|
|
3623
|
-
"id": "components-navlist-features--expand-with-custom-items"
|
|
3871
|
+
"id": "components-navlist-features--expand-with-custom-items",
|
|
3872
|
+
"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}"
|
|
3624
3873
|
},
|
|
3625
3874
|
{
|
|
3626
|
-
"id": "components-navlist-features--expand-with-pages"
|
|
3875
|
+
"id": "components-navlist-features--expand-with-pages",
|
|
3876
|
+
"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}"
|
|
3627
3877
|
},
|
|
3628
3878
|
{
|
|
3629
|
-
"id": "components-navlist-features--group-with-expand-and-custom-items"
|
|
3879
|
+
"id": "components-navlist-features--group-with-expand-and-custom-items",
|
|
3880
|
+
"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}"
|
|
3630
3881
|
},
|
|
3631
3882
|
{
|
|
3632
|
-
"id": "components-navlist-features--with-description"
|
|
3883
|
+
"id": "components-navlist-features--with-description",
|
|
3884
|
+
"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)"
|
|
3633
3885
|
},
|
|
3634
3886
|
{
|
|
3635
|
-
"id": "components-navlist-features--with-expand"
|
|
3887
|
+
"id": "components-navlist-features--with-expand",
|
|
3888
|
+
"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}"
|
|
3636
3889
|
},
|
|
3637
3890
|
{
|
|
3638
|
-
"id": "components-navlist-features--with-expand-and-icons"
|
|
3891
|
+
"id": "components-navlist-features--with-expand-and-icons",
|
|
3892
|
+
"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}"
|
|
3639
3893
|
},
|
|
3640
3894
|
{
|
|
3641
|
-
"id": "components-navlist-features--with-group"
|
|
3895
|
+
"id": "components-navlist-features--with-group",
|
|
3896
|
+
"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)"
|
|
3642
3897
|
},
|
|
3643
3898
|
{
|
|
3644
|
-
"id": "components-navlist-features--with-group-expand"
|
|
3899
|
+
"id": "components-navlist-features--with-group-expand",
|
|
3900
|
+
"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}"
|
|
3645
3901
|
},
|
|
3646
3902
|
{
|
|
3647
|
-
"id": "components-navlist-features--with-group-heading-links"
|
|
3903
|
+
"id": "components-navlist-features--with-group-heading-links",
|
|
3904
|
+
"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)"
|
|
3648
3905
|
},
|
|
3649
3906
|
{
|
|
3650
|
-
"id": "components-navlist-features--with-inactive-items"
|
|
3907
|
+
"id": "components-navlist-features--with-inactive-items",
|
|
3908
|
+
"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)"
|
|
3651
3909
|
},
|
|
3652
3910
|
{
|
|
3653
|
-
"id": "components-navlist-features--with-nested-sub-items"
|
|
3911
|
+
"id": "components-navlist-features--with-nested-sub-items",
|
|
3912
|
+
"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)"
|
|
3654
3913
|
},
|
|
3655
3914
|
{
|
|
3656
|
-
"id": "components-navlist-features--with-next-js-link"
|
|
3915
|
+
"id": "components-navlist-features--with-next-js-link",
|
|
3916
|
+
"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)"
|
|
3657
3917
|
},
|
|
3658
3918
|
{
|
|
3659
|
-
"id": "components-navlist-features--with-react-router-link"
|
|
3919
|
+
"id": "components-navlist-features--with-react-router-link",
|
|
3920
|
+
"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)"
|
|
3660
3921
|
},
|
|
3661
3922
|
{
|
|
3662
|
-
"id": "components-navlist-features--with-reloads"
|
|
3923
|
+
"id": "components-navlist-features--with-reloads",
|
|
3924
|
+
"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}"
|
|
3663
3925
|
},
|
|
3664
3926
|
{
|
|
3665
|
-
"id": "components-navlist-features--with-sub-items"
|
|
3927
|
+
"id": "components-navlist-features--with-sub-items",
|
|
3928
|
+
"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)"
|
|
3666
3929
|
},
|
|
3667
3930
|
{
|
|
3668
|
-
"id": "components-navlist-features--with-trailing-action"
|
|
3931
|
+
"id": "components-navlist-features--with-trailing-action",
|
|
3932
|
+
"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}"
|
|
3669
3933
|
},
|
|
3670
3934
|
{
|
|
3671
|
-
"id": "components-navlist-features--with-trailing-action-in-sub-item"
|
|
3935
|
+
"id": "components-navlist-features--with-trailing-action-in-sub-item",
|
|
3936
|
+
"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}"
|
|
3672
3937
|
}
|
|
3673
3938
|
],
|
|
3674
3939
|
"importPath": "@primer/react",
|
|
@@ -3934,7 +4199,8 @@
|
|
|
3934
4199
|
"a11yReviewed": false,
|
|
3935
4200
|
"stories": [
|
|
3936
4201
|
{
|
|
3937
|
-
"id": "deprecated-components-octicon--default"
|
|
4202
|
+
"id": "deprecated-components-octicon--default",
|
|
4203
|
+
"code": "() => <Octicon icon={HeartFillIcon} aria-label=\"Like\" size={32} />"
|
|
3938
4204
|
}
|
|
3939
4205
|
],
|
|
3940
4206
|
"importPath": "@primer/react/deprecated",
|
|
@@ -3980,16 +4246,16 @@
|
|
|
3980
4246
|
"a11yReviewed": "2025-01-08",
|
|
3981
4247
|
"stories": [
|
|
3982
4248
|
{
|
|
3983
|
-
"id": "components-overlay--default"
|
|
4249
|
+
"id": "private-components-overlay--default",
|
|
4250
|
+
"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}"
|
|
3984
4251
|
},
|
|
3985
4252
|
{
|
|
3986
|
-
"id": "private-components-overlay--
|
|
4253
|
+
"id": "private-components-overlay-features--dialog-overlay",
|
|
4254
|
+
"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}"
|
|
3987
4255
|
},
|
|
3988
4256
|
{
|
|
3989
|
-
"id": "private-components-overlay-features--
|
|
3990
|
-
}
|
|
3991
|
-
{
|
|
3992
|
-
"id": "private-components-overlay-features--positioned-overlays"
|
|
4257
|
+
"id": "private-components-overlay-features--positioned-overlays",
|
|
4258
|
+
"code": "({ right, role, open }: Args) => {\n const [isOpen, setIsOpen] = useState(false)\n const [direction, setDirection] = useState<'left' | 'right'>(\n right ? 'right' : 'left',\n )\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 setDirection('left')\n }}\n >\n Open left overlay\n </Button>\n <Button\n ref={buttonRef}\n onClick={() => {\n setIsOpen(!isOpen)\n setDirection('right')\n }}\n style={{\n marginTop: '8px',\n }}\n >\n Open right overlay\n </Button>\n {isOpen || open ? (\n direction === 'left' ? (\n <Overlay\n initialFocusRef={confirmButtonRef}\n returnFocusRef={buttonRef}\n ignoreClickRefs={[buttonRef]}\n onEscape={closeOverlay}\n onClickOutside={closeOverlay}\n width=\"auto\"\n anchorSide=\"inside-right\"\n role={role}\n aria-modal={role === 'dialog' ? 'true' : undefined}\n aria-label={role === 'dialog' ? 'Left aligned overlay' : undefined}\n ref={containerRef}\n >\n <div className={classes.ResponsiveWidthContainer}>\n <div className={classes.OverlayFullHeight}>\n <IconButton\n aria-label=\"Close\"\n onClick={closeOverlay}\n icon={XIcon}\n variant=\"invisible\"\n className={classes.CloseButtonLeft}\n />\n <Text>Look! left aligned</Text>\n </div>\n </div>\n </Overlay>\n ) : (\n <Overlay\n initialFocusRef={confirmButtonRef}\n returnFocusRef={buttonRef}\n ignoreClickRefs={[buttonRef]}\n onEscape={closeOverlay}\n onClickOutside={closeOverlay}\n width=\"auto\"\n anchorSide={'inside-left'}\n right={0}\n position=\"fixed\"\n role={role}\n aria-modal={role === 'dialog' ? 'true' : undefined}\n aria-label={role === 'dialog' ? 'Right aligned overlay' : undefined}\n ref={containerRef}\n >\n <div className={classes.ResponsiveWidthContainer}>\n <div className={classes.OverlayFullHeight}>\n <IconButton\n aria-label=\"Close\"\n onClick={closeOverlay}\n icon={XIcon}\n variant=\"invisible\"\n className={classes.CloseButtonRight}\n />\n <Text>Look! right aligned</Text>\n </div>\n </div>\n </Overlay>\n )\n ) : null}\n </div>\n )\n}"
|
|
3993
4259
|
}
|
|
3994
4260
|
],
|
|
3995
4261
|
"importPath": "@primer/react",
|
|
@@ -4142,43 +4408,52 @@
|
|
|
4142
4408
|
"a11yReviewed": "2025-01-08",
|
|
4143
4409
|
"stories": [
|
|
4144
4410
|
{
|
|
4145
|
-
"id": "components-pageheader--
|
|
4146
|
-
|
|
4147
|
-
{
|
|
4148
|
-
"id": "components-pageheader-features--has-title-only"
|
|
4411
|
+
"id": "components-pageheader-features--has-title-only",
|
|
4412
|
+
"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>\n </div>\n)"
|
|
4149
4413
|
},
|
|
4150
4414
|
{
|
|
4151
|
-
"id": "components-pageheader-features--has-large-title"
|
|
4415
|
+
"id": "components-pageheader-features--has-large-title",
|
|
4416
|
+
"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)"
|
|
4152
4417
|
},
|
|
4153
4418
|
{
|
|
4154
|
-
"id": "components-pageheader-features--with-leading-and-trailing-visuals"
|
|
4419
|
+
"id": "components-pageheader-features--with-leading-and-trailing-visuals",
|
|
4420
|
+
"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)"
|
|
4155
4421
|
},
|
|
4156
4422
|
{
|
|
4157
|
-
"id": "components-pageheader-features--with-leading-visual-hidden-on-regular-viewport"
|
|
4423
|
+
"id": "components-pageheader-features--with-leading-visual-hidden-on-regular-viewport",
|
|
4424
|
+
"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)"
|
|
4158
4425
|
},
|
|
4159
4426
|
{
|
|
4160
|
-
"id": "components-pageheader-features--with-actions"
|
|
4427
|
+
"id": "components-pageheader-features--with-actions",
|
|
4428
|
+
"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)"
|
|
4161
4429
|
},
|
|
4162
4430
|
{
|
|
4163
|
-
"id": "components-pageheader-features--with-description-slot"
|
|
4431
|
+
"id": "components-pageheader-features--with-description-slot",
|
|
4432
|
+
"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)"
|
|
4164
4433
|
},
|
|
4165
4434
|
{
|
|
4166
|
-
"id": "components-pageheader-features--with-navigation-slot"
|
|
4435
|
+
"id": "components-pageheader-features--with-navigation-slot",
|
|
4436
|
+
"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)"
|
|
4167
4437
|
},
|
|
4168
4438
|
{
|
|
4169
|
-
"id": "components-pageheader-features--with-custom-navigation"
|
|
4439
|
+
"id": "components-pageheader-features--with-custom-navigation",
|
|
4440
|
+
"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)"
|
|
4170
4441
|
},
|
|
4171
4442
|
{
|
|
4172
|
-
"id": "components-pageheader-features--with-leading-and-trailing-actions"
|
|
4443
|
+
"id": "components-pageheader-features--with-leading-and-trailing-actions",
|
|
4444
|
+
"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)"
|
|
4173
4445
|
},
|
|
4174
4446
|
{
|
|
4175
|
-
"id": "components-pageheader-features--with-parent-link-and-actions-of-context-area"
|
|
4447
|
+
"id": "components-pageheader-features--with-parent-link-and-actions-of-context-area",
|
|
4448
|
+
"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)"
|
|
4176
4449
|
},
|
|
4177
4450
|
{
|
|
4178
|
-
"id": "components-pageheader-features--with-context-bar-and-actions-of-context-area"
|
|
4451
|
+
"id": "components-pageheader-features--with-context-bar-and-actions-of-context-area",
|
|
4452
|
+
"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)"
|
|
4179
4453
|
},
|
|
4180
4454
|
{
|
|
4181
|
-
"id": "components-pageheader-features--with-actions-that-have-responsive-content"
|
|
4455
|
+
"id": "components-pageheader-features--with-actions-that-have-responsive-content",
|
|
4456
|
+
"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)"
|
|
4182
4457
|
}
|
|
4183
4458
|
],
|
|
4184
4459
|
"importPath": "@primer/react",
|
|
@@ -4505,31 +4780,40 @@
|
|
|
4505
4780
|
"a11yReviewed": "2025-01-08",
|
|
4506
4781
|
"stories": [
|
|
4507
4782
|
{
|
|
4508
|
-
"id": "components-pagelayout--default"
|
|
4783
|
+
"id": "components-pagelayout--default",
|
|
4784
|
+
"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)"
|
|
4509
4785
|
},
|
|
4510
4786
|
{
|
|
4511
|
-
"id": "components-pagelayout-features--pull-request-page"
|
|
4787
|
+
"id": "components-pagelayout-features--pull-request-page",
|
|
4788
|
+
"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)"
|
|
4512
4789
|
},
|
|
4513
4790
|
{
|
|
4514
|
-
"id": "components-pagelayout-features--sticky-pane"
|
|
4791
|
+
"id": "components-pagelayout-features--sticky-pane",
|
|
4792
|
+
"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)"
|
|
4515
4793
|
},
|
|
4516
4794
|
{
|
|
4517
|
-
"id": "components-pagelayout-features--nested-scroll-container"
|
|
4795
|
+
"id": "components-pagelayout-features--nested-scroll-container",
|
|
4796
|
+
"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)"
|
|
4518
4797
|
},
|
|
4519
4798
|
{
|
|
4520
|
-
"id": "components-pagelayout-features--custom-sticky-header"
|
|
4799
|
+
"id": "components-pagelayout-features--custom-sticky-header",
|
|
4800
|
+
"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)"
|
|
4521
4801
|
},
|
|
4522
4802
|
{
|
|
4523
|
-
"id": "components-pagelayout-features--resizable-pane"
|
|
4803
|
+
"id": "components-pagelayout-features--resizable-pane",
|
|
4804
|
+
"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)"
|
|
4524
4805
|
},
|
|
4525
4806
|
{
|
|
4526
|
-
"id": "components-pagelayout-features--scroll-container-within-page-layout-pane"
|
|
4807
|
+
"id": "components-pagelayout-features--scroll-container-within-page-layout-pane",
|
|
4808
|
+
"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)"
|
|
4527
4809
|
},
|
|
4528
4810
|
{
|
|
4529
|
-
"id": "components-pagelayout-features--custom-pane-widths"
|
|
4811
|
+
"id": "components-pagelayout-features--custom-pane-widths",
|
|
4812
|
+
"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)"
|
|
4530
4813
|
},
|
|
4531
4814
|
{
|
|
4532
|
-
"id": "components-pagelayout-features--with-custom-pane-heading"
|
|
4815
|
+
"id": "components-pagelayout-features--with-custom-pane-heading",
|
|
4816
|
+
"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)"
|
|
4533
4817
|
}
|
|
4534
4818
|
],
|
|
4535
4819
|
"importPath": "@primer/react",
|
|
@@ -4781,7 +5065,8 @@
|
|
|
4781
5065
|
"a11yReviewed": false,
|
|
4782
5066
|
"stories": [
|
|
4783
5067
|
{
|
|
4784
|
-
"id": "deprecated-components-pagehead--default"
|
|
5068
|
+
"id": "deprecated-components-pagehead--default",
|
|
5069
|
+
"code": "() => (\n <Pagehead>\n <Heading as=\"h2\" variant=\"small\">\n Pagehead\n </Heading>\n </Pagehead>\n)"
|
|
4785
5070
|
}
|
|
4786
5071
|
],
|
|
4787
5072
|
"importPath": "@primer/react/deprecated",
|
|
@@ -4803,19 +5088,24 @@
|
|
|
4803
5088
|
"a11yReviewed": "2025-01-08",
|
|
4804
5089
|
"stories": [
|
|
4805
5090
|
{
|
|
4806
|
-
"id": "components-pagination--default"
|
|
5091
|
+
"id": "components-pagination--default",
|
|
5092
|
+
"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}"
|
|
4807
5093
|
},
|
|
4808
5094
|
{
|
|
4809
|
-
"id": "components-pagination-features--larger-page-count-margin"
|
|
5095
|
+
"id": "components-pagination-features--larger-page-count-margin",
|
|
5096
|
+
"code": "() => (\n <Pagination\n pageCount={15}\n currentPage={5}\n marginPageCount={4}\n onPageChange={(e) => e.preventDefault()}\n />\n)"
|
|
4810
5097
|
},
|
|
4811
5098
|
{
|
|
4812
|
-
"id": "components-pagination-features--hide-page-numbers"
|
|
5099
|
+
"id": "components-pagination-features--hide-page-numbers",
|
|
5100
|
+
"code": "() => (\n <Pagination\n pageCount={15}\n currentPage={5}\n showPages={false}\n onPageChange={(e) => e.preventDefault()}\n />\n)"
|
|
4813
5101
|
},
|
|
4814
5102
|
{
|
|
4815
|
-
"id": "components-pagination-features--hide-page-numbers-by-viewport"
|
|
5103
|
+
"id": "components-pagination-features--hide-page-numbers-by-viewport",
|
|
5104
|
+
"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)"
|
|
4816
5105
|
},
|
|
4817
5106
|
{
|
|
4818
|
-
"id": "components-pagination-features--higher-surrounding-page-count"
|
|
5107
|
+
"id": "components-pagination-features--higher-surrounding-page-count",
|
|
5108
|
+
"code": "() => (\n <Pagination\n pageCount={15}\n currentPage={5}\n surroundingPageCount={4}\n onPageChange={(e) => e.preventDefault()}\n />\n)"
|
|
4819
5109
|
}
|
|
4820
5110
|
],
|
|
4821
5111
|
"importPath": "@primer/react",
|
|
@@ -4881,7 +5171,8 @@
|
|
|
4881
5171
|
"a11yReviewed": "2025-01-08",
|
|
4882
5172
|
"stories": [
|
|
4883
5173
|
{
|
|
4884
|
-
"id": "components-popover--default"
|
|
5174
|
+
"id": "components-popover--default",
|
|
5175
|
+
"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)"
|
|
4885
5176
|
}
|
|
4886
5177
|
],
|
|
4887
5178
|
"importPath": "@primer/react",
|
|
@@ -4961,19 +5252,20 @@
|
|
|
4961
5252
|
"a11yReviewed": false,
|
|
4962
5253
|
"stories": [
|
|
4963
5254
|
{
|
|
4964
|
-
"id": "
|
|
5255
|
+
"id": "behaviors-portal--default",
|
|
5256
|
+
"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)"
|
|
4965
5257
|
},
|
|
4966
5258
|
{
|
|
4967
|
-
"id": "behaviors-portal--
|
|
5259
|
+
"id": "behaviors-portal-features--custom-portal-root-by-id",
|
|
5260
|
+
"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)"
|
|
4968
5261
|
},
|
|
4969
5262
|
{
|
|
4970
|
-
"id": "behaviors-portal-features--custom-portal-root-by-
|
|
5263
|
+
"id": "behaviors-portal-features--custom-portal-root-by-registration",
|
|
5264
|
+
"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}"
|
|
4971
5265
|
},
|
|
4972
5266
|
{
|
|
4973
|
-
"id": "behaviors-portal-features--
|
|
4974
|
-
},
|
|
4975
|
-
{
|
|
4976
|
-
"id": "behaviors-portal-features--multiple-portal-roots"
|
|
5267
|
+
"id": "behaviors-portal-features--multiple-portal-roots",
|
|
5268
|
+
"code": "() => {\n const outerContainerRef = React.useRef<HTMLDivElement>(null)\n const innerContainerRef = React.useRef<HTMLDivElement>(null)\n const [mounted, setMounted] = React.useState(false)\n React.useEffect(() => {\n if (\n outerContainerRef.current instanceof HTMLElement &&\n innerContainerRef.current instanceof HTMLElement\n ) {\n registerPortalRoot(outerContainerRef.current, 'outer')\n registerPortalRoot(innerContainerRef.current, 'inner')\n setMounted(true)\n }\n }, [outerContainerRef])\n return (\n <>\n Root position\n <div\n className={clsx(classes.PortalContainer, classes.OuterContainer)}\n ref={outerContainerRef}\n >\n Outer container\n <div\n className={clsx(classes.PortalContainer, classes.InnerContainer)}\n ref={innerContainerRef}\n >\n {mounted ? (\n <>\n <Portal containerName=\"outer\">\n Portaled content rendered at the outer container.\n </Portal>\n <Portal containerName=\"inner\">\n Portaled content rendered at the end of the inner container.\n </Portal>\n <Portal>\n Portaled content rendered at <code><BaseStyles></code>{' '}\n root.\n </Portal>\n </>\n ) : null}\n Inner container\n </div>\n </div>\n </>\n )\n}"
|
|
4977
5269
|
}
|
|
4978
5270
|
],
|
|
4979
5271
|
"importPath": "@primer/react",
|
|
@@ -5001,34 +5293,44 @@
|
|
|
5001
5293
|
"a11yReviewed": "2025-01-08",
|
|
5002
5294
|
"stories": [
|
|
5003
5295
|
{
|
|
5004
|
-
"id": "components-progressbar--default"
|
|
5296
|
+
"id": "components-progressbar--default",
|
|
5297
|
+
"code": "() => <ProgressBar aria-label=\"Upload test.png\" />"
|
|
5005
5298
|
},
|
|
5006
5299
|
{
|
|
5007
|
-
"id": "components-progressbar-features--progress-zero"
|
|
5300
|
+
"id": "components-progressbar-features--progress-zero",
|
|
5301
|
+
"code": "() => <ProgressBar progress=\"0\" aria-label=\"Upload test.png\" />"
|
|
5008
5302
|
},
|
|
5009
5303
|
{
|
|
5010
|
-
"id": "components-progressbar-features--progress-half"
|
|
5304
|
+
"id": "components-progressbar-features--progress-half",
|
|
5305
|
+
"code": "() => <ProgressBar progress=\"50\" aria-label=\"Upload test.png\" />"
|
|
5011
5306
|
},
|
|
5012
5307
|
{
|
|
5013
|
-
"id": "components-progressbar-features--progress-done"
|
|
5308
|
+
"id": "components-progressbar-features--progress-done",
|
|
5309
|
+
"code": "() => <ProgressBar progress=\"100\" aria-label=\"Upload test.png\" />"
|
|
5014
5310
|
},
|
|
5015
5311
|
{
|
|
5016
|
-
"id": "components-progressbar-features--size-small"
|
|
5312
|
+
"id": "components-progressbar-features--size-small",
|
|
5313
|
+
"code": "() => (\n <ProgressBar progress=\"66\" barSize=\"small\" aria-label=\"Upload test.png\" />\n)"
|
|
5017
5314
|
},
|
|
5018
5315
|
{
|
|
5019
|
-
"id": "components-progressbar-features--size-large"
|
|
5316
|
+
"id": "components-progressbar-features--size-large",
|
|
5317
|
+
"code": "() => (\n <ProgressBar progress=\"66\" barSize=\"large\" aria-label=\"Upload test.png\" />\n)"
|
|
5020
5318
|
},
|
|
5021
5319
|
{
|
|
5022
|
-
"id": "components-progressbar-features--inline"
|
|
5320
|
+
"id": "components-progressbar-features--inline",
|
|
5321
|
+
"code": "() => (\n <ProgressBar\n inline\n progress=\"66\"\n style={{\n width: '100px',\n }}\n aria-label=\"Upload test.png\"\n />\n)"
|
|
5023
5322
|
},
|
|
5024
5323
|
{
|
|
5025
|
-
"id": "components-progressbar-features--all-colors"
|
|
5324
|
+
"id": "components-progressbar-features--all-colors",
|
|
5325
|
+
"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)"
|
|
5026
5326
|
},
|
|
5027
5327
|
{
|
|
5028
|
-
"id": "components-progressbar-features--multiple-items"
|
|
5328
|
+
"id": "components-progressbar-features--multiple-items",
|
|
5329
|
+
"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)"
|
|
5029
5330
|
},
|
|
5030
5331
|
{
|
|
5031
|
-
"id": "components-progressbar-features--animated"
|
|
5332
|
+
"id": "components-progressbar-features--animated",
|
|
5333
|
+
"code": "() => <ProgressBar progress=\"50\" aria-label=\"Upload test.png\" animated />"
|
|
5032
5334
|
}
|
|
5033
5335
|
],
|
|
5034
5336
|
"importPath": "@primer/react",
|
|
@@ -5097,16 +5399,20 @@
|
|
|
5097
5399
|
"a11yReviewed": "2025-01-08",
|
|
5098
5400
|
"stories": [
|
|
5099
5401
|
{
|
|
5100
|
-
"id": "components-radio--default"
|
|
5402
|
+
"id": "components-radio--default",
|
|
5403
|
+
"code": "() => (\n <form>\n <FormControl>\n <Radio name=\"default-radio-name\" value=\"default\" />\n <FormControl.Label>Label</FormControl.Label>\n </FormControl>\n </form>\n)"
|
|
5101
5404
|
},
|
|
5102
5405
|
{
|
|
5103
|
-
"id": "components-radio-features--with-leading-visual"
|
|
5406
|
+
"id": "components-radio-features--with-leading-visual",
|
|
5407
|
+
"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}"
|
|
5104
5408
|
},
|
|
5105
5409
|
{
|
|
5106
|
-
"id": "components-radio-features--disabled"
|
|
5410
|
+
"id": "components-radio-features--disabled",
|
|
5411
|
+
"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}"
|
|
5107
5412
|
},
|
|
5108
5413
|
{
|
|
5109
|
-
"id": "components-radio-features--with-caption"
|
|
5414
|
+
"id": "components-radio-features--with-caption",
|
|
5415
|
+
"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}"
|
|
5110
5416
|
}
|
|
5111
5417
|
],
|
|
5112
5418
|
"importPath": "@primer/react",
|
|
@@ -5163,22 +5469,28 @@
|
|
|
5163
5469
|
"a11yReviewed": "2025-01-08",
|
|
5164
5470
|
"stories": [
|
|
5165
5471
|
{
|
|
5166
|
-
"id": "components-radiogroup--default"
|
|
5472
|
+
"id": "components-radiogroup--default",
|
|
5473
|
+
"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)"
|
|
5167
5474
|
},
|
|
5168
5475
|
{
|
|
5169
|
-
"id": "components-radiogroup-features--visually-hidden-label"
|
|
5476
|
+
"id": "components-radiogroup-features--visually-hidden-label",
|
|
5477
|
+
"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)"
|
|
5170
5478
|
},
|
|
5171
5479
|
{
|
|
5172
|
-
"id": "components-radiogroup-features--with-external-label"
|
|
5480
|
+
"id": "components-radiogroup-features--with-external-label",
|
|
5481
|
+
"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)"
|
|
5173
5482
|
},
|
|
5174
5483
|
{
|
|
5175
|
-
"id": "components-radiogroup-features--error"
|
|
5484
|
+
"id": "components-radiogroup-features--error",
|
|
5485
|
+
"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)"
|
|
5176
5486
|
},
|
|
5177
5487
|
{
|
|
5178
|
-
"id": "components-radiogroup-features--success"
|
|
5488
|
+
"id": "components-radiogroup-features--success",
|
|
5489
|
+
"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)"
|
|
5179
5490
|
},
|
|
5180
5491
|
{
|
|
5181
|
-
"id": "components-radiogroup-features--caption"
|
|
5492
|
+
"id": "components-radiogroup-features--caption",
|
|
5493
|
+
"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)"
|
|
5182
5494
|
}
|
|
5183
5495
|
],
|
|
5184
5496
|
"importPath": "@primer/react",
|
|
@@ -5279,16 +5591,20 @@
|
|
|
5279
5591
|
"a11yReviewed": "2025-01-08",
|
|
5280
5592
|
"stories": [
|
|
5281
5593
|
{
|
|
5282
|
-
"id": "components-relativetime--default"
|
|
5594
|
+
"id": "components-relativetime--default",
|
|
5595
|
+
"code": "() => <RelativeTime date={new Date('2020-01-01T00:00:00Z')} noTitle={true} />"
|
|
5283
5596
|
},
|
|
5284
5597
|
{
|
|
5285
|
-
"id": "components-relativetime-features--micro-format"
|
|
5598
|
+
"id": "components-relativetime-features--micro-format",
|
|
5599
|
+
"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}"
|
|
5286
5600
|
},
|
|
5287
5601
|
{
|
|
5288
|
-
"id": "components-relativetime-features--recent-time"
|
|
5602
|
+
"id": "components-relativetime-features--recent-time",
|
|
5603
|
+
"code": "(args) => {\n const { ...rest } = args\n return <RelativeTime noTitle={true} {...rest} date={new Date()} />\n}"
|
|
5289
5604
|
},
|
|
5290
5605
|
{
|
|
5291
|
-
"id": "components-relativetime-features--count-down-timer"
|
|
5606
|
+
"id": "components-relativetime-features--count-down-timer",
|
|
5607
|
+
"code": "(args) => {\n const { ...rest } = args\n return <RelativeTime noTitle={true} {...rest} />\n}"
|
|
5292
5608
|
}
|
|
5293
5609
|
],
|
|
5294
5610
|
"importPath": "@primer/react",
|
|
@@ -5434,34 +5750,44 @@
|
|
|
5434
5750
|
"a11yReviewed": "2025-01-08",
|
|
5435
5751
|
"stories": [
|
|
5436
5752
|
{
|
|
5437
|
-
"id": "components-segmentedcontrol--default"
|
|
5753
|
+
"id": "components-segmentedcontrol--default",
|
|
5754
|
+
"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)"
|
|
5438
5755
|
},
|
|
5439
5756
|
{
|
|
5440
|
-
"id": "components-segmentedcontrol-features--with-icons"
|
|
5757
|
+
"id": "components-segmentedcontrol-features--with-icons",
|
|
5758
|
+
"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)"
|
|
5441
5759
|
},
|
|
5442
5760
|
{
|
|
5443
|
-
"id": "components-segmentedcontrol-features--controlled"
|
|
5761
|
+
"id": "components-segmentedcontrol-features--controlled",
|
|
5762
|
+
"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}"
|
|
5444
5763
|
},
|
|
5445
5764
|
{
|
|
5446
|
-
"id": "components-segmentedcontrol-features--variant-narrow-hide-labels"
|
|
5765
|
+
"id": "components-segmentedcontrol-features--variant-narrow-hide-labels",
|
|
5766
|
+
"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)"
|
|
5447
5767
|
},
|
|
5448
5768
|
{
|
|
5449
|
-
"id": "components-segmentedcontrol-features--variant-narrow-action-menu"
|
|
5769
|
+
"id": "components-segmentedcontrol-features--variant-narrow-action-menu",
|
|
5770
|
+
"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)"
|
|
5450
5771
|
},
|
|
5451
5772
|
{
|
|
5452
|
-
"id": "components-segmentedcontrol-features--fullwidth-narrow"
|
|
5773
|
+
"id": "components-segmentedcontrol-features--fullwidth-narrow",
|
|
5774
|
+
"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)"
|
|
5453
5775
|
},
|
|
5454
5776
|
{
|
|
5455
|
-
"id": "components-segmentedcontrol-features--fullwidth-regular"
|
|
5777
|
+
"id": "components-segmentedcontrol-features--fullwidth-regular",
|
|
5778
|
+
"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)"
|
|
5456
5779
|
},
|
|
5457
5780
|
{
|
|
5458
|
-
"id": "components-segmentedcontrol-features--fullwidth-all"
|
|
5781
|
+
"id": "components-segmentedcontrol-features--fullwidth-all",
|
|
5782
|
+
"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)"
|
|
5459
5783
|
},
|
|
5460
5784
|
{
|
|
5461
|
-
"id": "components-segmentedcontrol-features--icon-only"
|
|
5785
|
+
"id": "components-segmentedcontrol-features--icon-only",
|
|
5786
|
+
"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)"
|
|
5462
5787
|
},
|
|
5463
5788
|
{
|
|
5464
|
-
"id": "components-segmentedcontrol-features--associated-with-a-label-and-caption"
|
|
5789
|
+
"id": "components-segmentedcontrol-features--associated-with-a-label-and-caption",
|
|
5790
|
+
"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)"
|
|
5465
5791
|
}
|
|
5466
5792
|
],
|
|
5467
5793
|
"importPath": "@primer/react",
|
|
@@ -5617,40 +5943,52 @@
|
|
|
5617
5943
|
"a11yReviewed": "2025-01-08",
|
|
5618
5944
|
"stories": [
|
|
5619
5945
|
{
|
|
5620
|
-
"id": "components-select--default"
|
|
5946
|
+
"id": "components-select--default",
|
|
5947
|
+
"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)"
|
|
5621
5948
|
},
|
|
5622
5949
|
{
|
|
5623
|
-
"id": "components-select-features--with-option-groups"
|
|
5950
|
+
"id": "components-select-features--with-option-groups",
|
|
5951
|
+
"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)"
|
|
5624
5952
|
},
|
|
5625
5953
|
{
|
|
5626
|
-
"id": "components-select-features--disabled"
|
|
5954
|
+
"id": "components-select-features--disabled",
|
|
5955
|
+
"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)"
|
|
5627
5956
|
},
|
|
5628
5957
|
{
|
|
5629
|
-
"id": "components-select-features--with-caption"
|
|
5958
|
+
"id": "components-select-features--with-caption",
|
|
5959
|
+
"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)"
|
|
5630
5960
|
},
|
|
5631
5961
|
{
|
|
5632
|
-
"id": "components-select-features--visually-hidden-label"
|
|
5962
|
+
"id": "components-select-features--visually-hidden-label",
|
|
5963
|
+
"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)"
|
|
5633
5964
|
},
|
|
5634
5965
|
{
|
|
5635
|
-
"id": "components-select-features--error"
|
|
5966
|
+
"id": "components-select-features--error",
|
|
5967
|
+
"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)"
|
|
5636
5968
|
},
|
|
5637
5969
|
{
|
|
5638
|
-
"id": "components-select-features--success"
|
|
5970
|
+
"id": "components-select-features--success",
|
|
5971
|
+
"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)"
|
|
5639
5972
|
},
|
|
5640
5973
|
{
|
|
5641
|
-
"id": "components-select-features--block"
|
|
5974
|
+
"id": "components-select-features--block",
|
|
5975
|
+
"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)"
|
|
5642
5976
|
},
|
|
5643
5977
|
{
|
|
5644
|
-
"id": "components-select-features--small"
|
|
5978
|
+
"id": "components-select-features--small",
|
|
5979
|
+
"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)"
|
|
5645
5980
|
},
|
|
5646
5981
|
{
|
|
5647
|
-
"id": "components-select-features--large"
|
|
5982
|
+
"id": "components-select-features--large",
|
|
5983
|
+
"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)"
|
|
5648
5984
|
},
|
|
5649
5985
|
{
|
|
5650
|
-
"id": "components-select-features--with-custom-styling"
|
|
5986
|
+
"id": "components-select-features--with-custom-styling",
|
|
5987
|
+
"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)"
|
|
5651
5988
|
},
|
|
5652
5989
|
{
|
|
5653
|
-
"id": "components-select-features--with-placeholder-option"
|
|
5990
|
+
"id": "components-select-features--with-placeholder-option",
|
|
5991
|
+
"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)"
|
|
5654
5992
|
}
|
|
5655
5993
|
],
|
|
5656
5994
|
"importPath": "@primer/react",
|
|
@@ -5697,31 +6035,40 @@
|
|
|
5697
6035
|
"a11yReviewed": "2025-01-08",
|
|
5698
6036
|
"stories": [
|
|
5699
6037
|
{
|
|
5700
|
-
"id": "components-selectpanel--default"
|
|
6038
|
+
"id": "components-selectpanel--default",
|
|
6039
|
+
"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}"
|
|
5701
6040
|
},
|
|
5702
6041
|
{
|
|
5703
|
-
"id": "components-selectpanel-features--with-item-dividers"
|
|
6042
|
+
"id": "components-selectpanel-features--with-item-dividers",
|
|
6043
|
+
"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}"
|
|
5704
6044
|
},
|
|
5705
6045
|
{
|
|
5706
|
-
"id": "components-selectpanel-features--with-placeholder-for-search-input"
|
|
6046
|
+
"id": "components-selectpanel-features--with-placeholder-for-search-input",
|
|
6047
|
+
"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}"
|
|
5707
6048
|
},
|
|
5708
6049
|
{
|
|
5709
|
-
"id": "components-selectpanel-features--single-select"
|
|
6050
|
+
"id": "components-selectpanel-features--single-select",
|
|
6051
|
+
"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}"
|
|
5710
6052
|
},
|
|
5711
6053
|
{
|
|
5712
|
-
"id": "components-selectpanel-features--multi-select"
|
|
6054
|
+
"id": "components-selectpanel-features--multi-select",
|
|
6055
|
+
"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}"
|
|
5713
6056
|
},
|
|
5714
6057
|
{
|
|
5715
|
-
"id": "components-selectpanel-features--with-external-anchor"
|
|
6058
|
+
"id": "components-selectpanel-features--with-external-anchor",
|
|
6059
|
+
"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}"
|
|
5716
6060
|
},
|
|
5717
6061
|
{
|
|
5718
|
-
"id": "components-selectpanel-features--with-secondary-action-button"
|
|
6062
|
+
"id": "components-selectpanel-features--with-secondary-action-button",
|
|
6063
|
+
"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}"
|
|
5719
6064
|
},
|
|
5720
6065
|
{
|
|
5721
|
-
"id": "components-selectpanel-features--with-secondary-action-link"
|
|
6066
|
+
"id": "components-selectpanel-features--with-secondary-action-link",
|
|
6067
|
+
"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}"
|
|
5722
6068
|
},
|
|
5723
6069
|
{
|
|
5724
|
-
"id": "components-selectpanel-features--with-groups"
|
|
6070
|
+
"id": "components-selectpanel-features--with-groups",
|
|
6071
|
+
"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}"
|
|
5725
6072
|
}
|
|
5726
6073
|
],
|
|
5727
6074
|
"importPath": "@primer/react",
|
|
@@ -5928,16 +6275,16 @@
|
|
|
5928
6275
|
"a11yReviewed": "2025-01-08",
|
|
5929
6276
|
"stories": [
|
|
5930
6277
|
{
|
|
5931
|
-
"id": "components-skeletonbox--default"
|
|
5932
|
-
|
|
5933
|
-
{
|
|
5934
|
-
"id": "components-skeleton-skeletonbox--default"
|
|
6278
|
+
"id": "components-skeleton-skeletonbox--default",
|
|
6279
|
+
"code": "() => <SkeletonBox />"
|
|
5935
6280
|
},
|
|
5936
6281
|
{
|
|
5937
|
-
"id": "components-skeleton-skeletonbox-features--custom-height"
|
|
6282
|
+
"id": "components-skeleton-skeletonbox-features--custom-height",
|
|
6283
|
+
"code": "() => <SkeletonBox height=\"4rem\" />"
|
|
5938
6284
|
},
|
|
5939
6285
|
{
|
|
5940
|
-
"id": "components-skeleton-skeletonbox-features--custom-width"
|
|
6286
|
+
"id": "components-skeleton-skeletonbox-features--custom-width",
|
|
6287
|
+
"code": "() => <SkeletonBox width=\"300px\" />"
|
|
5941
6288
|
}
|
|
5942
6289
|
],
|
|
5943
6290
|
"importPath": "@primer/react",
|
|
@@ -5970,22 +6317,24 @@
|
|
|
5970
6317
|
"a11yReviewed": "2025-01-08",
|
|
5971
6318
|
"stories": [
|
|
5972
6319
|
{
|
|
5973
|
-
"id": "components-skeletonavatar--default"
|
|
5974
|
-
|
|
5975
|
-
{
|
|
5976
|
-
"id": "components-skeleton-skeletonavatar--default"
|
|
6320
|
+
"id": "components-skeleton-skeletonavatar--default",
|
|
6321
|
+
"code": "() => <SkeletonAvatar />"
|
|
5977
6322
|
},
|
|
5978
6323
|
{
|
|
5979
|
-
"id": "components-skeleton-skeletonavatar-features--square"
|
|
6324
|
+
"id": "components-skeleton-skeletonavatar-features--square",
|
|
6325
|
+
"code": "() => <SkeletonAvatar square />"
|
|
5980
6326
|
},
|
|
5981
6327
|
{
|
|
5982
|
-
"id": "components-skeleton-skeletonavatar-features--size"
|
|
6328
|
+
"id": "components-skeleton-skeletonavatar-features--size",
|
|
6329
|
+
"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)"
|
|
5983
6330
|
},
|
|
5984
6331
|
{
|
|
5985
|
-
"id": "components-skeleton-skeletonavatar-features--size-responsive"
|
|
6332
|
+
"id": "components-skeleton-skeletonavatar-features--size-responsive",
|
|
6333
|
+
"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)"
|
|
5986
6334
|
},
|
|
5987
6335
|
{
|
|
5988
|
-
"id": "components-skeleton-skeletonavatar-features--in-a-stack"
|
|
6336
|
+
"id": "components-skeleton-skeletonavatar-features--in-a-stack",
|
|
6337
|
+
"code": "() => (\n <AvatarStack>\n <SkeletonAvatar />\n <SkeletonAvatar />\n <SkeletonAvatar />\n <SkeletonAvatar />\n </AvatarStack>\n)"
|
|
5989
6338
|
}
|
|
5990
6339
|
],
|
|
5991
6340
|
"importPath": "@primer/react/experimental",
|
|
@@ -6018,40 +6367,48 @@
|
|
|
6018
6367
|
"a11yReviewed": "2025-01-08",
|
|
6019
6368
|
"stories": [
|
|
6020
6369
|
{
|
|
6021
|
-
"id": "components-skeletontext--default"
|
|
6022
|
-
|
|
6023
|
-
{
|
|
6024
|
-
"id": "components-skeleton-skeletontext--default"
|
|
6370
|
+
"id": "components-skeleton-skeletontext--default",
|
|
6371
|
+
"code": "() => <SkeletonText />"
|
|
6025
6372
|
},
|
|
6026
6373
|
{
|
|
6027
|
-
"id": "components-skeleton-skeletontext-features--with-max-width"
|
|
6374
|
+
"id": "components-skeleton-skeletontext-features--with-max-width",
|
|
6375
|
+
"code": "() => <SkeletonText maxWidth={200} />"
|
|
6028
6376
|
},
|
|
6029
6377
|
{
|
|
6030
|
-
"id": "components-skeleton-skeletontext-features--with-multiple-lines"
|
|
6378
|
+
"id": "components-skeleton-skeletontext-features--with-multiple-lines",
|
|
6379
|
+
"code": "() => <SkeletonText lines={3} />"
|
|
6031
6380
|
},
|
|
6032
6381
|
{
|
|
6033
|
-
"id": "components-skeleton-skeletontext-features--display"
|
|
6382
|
+
"id": "components-skeleton-skeletontext-features--display",
|
|
6383
|
+
"code": "() => <SkeletonText size=\"display\" />"
|
|
6034
6384
|
},
|
|
6035
6385
|
{
|
|
6036
|
-
"id": "components-skeleton-skeletontext-features--subtitle"
|
|
6386
|
+
"id": "components-skeleton-skeletontext-features--subtitle",
|
|
6387
|
+
"code": "() => <SkeletonText size=\"subtitle\" />"
|
|
6037
6388
|
},
|
|
6038
6389
|
{
|
|
6039
|
-
"id": "components-skeleton-skeletontext-features--title-large"
|
|
6390
|
+
"id": "components-skeleton-skeletontext-features--title-large",
|
|
6391
|
+
"code": "() => <SkeletonText size=\"titleLarge\" />"
|
|
6040
6392
|
},
|
|
6041
6393
|
{
|
|
6042
|
-
"id": "components-skeleton-skeletontext-features--title-medium"
|
|
6394
|
+
"id": "components-skeleton-skeletontext-features--title-medium",
|
|
6395
|
+
"code": "() => <SkeletonText size=\"titleMedium\" />"
|
|
6043
6396
|
},
|
|
6044
6397
|
{
|
|
6045
|
-
"id": "components-skeleton-skeletontext-features--title-small"
|
|
6398
|
+
"id": "components-skeleton-skeletontext-features--title-small",
|
|
6399
|
+
"code": "() => <SkeletonText size=\"titleSmall\" />"
|
|
6046
6400
|
},
|
|
6047
6401
|
{
|
|
6048
|
-
"id": "components-skeleton-skeletontext-features--body-large"
|
|
6402
|
+
"id": "components-skeleton-skeletontext-features--body-large",
|
|
6403
|
+
"code": "() => <SkeletonText size=\"bodyLarge\" />"
|
|
6049
6404
|
},
|
|
6050
6405
|
{
|
|
6051
|
-
"id": "components-skeleton-skeletontext-features--body-medium"
|
|
6406
|
+
"id": "components-skeleton-skeletontext-features--body-medium",
|
|
6407
|
+
"code": "() => <SkeletonText size=\"bodyMedium\" />"
|
|
6052
6408
|
},
|
|
6053
6409
|
{
|
|
6054
|
-
"id": "components-skeleton-skeletontext-features--body-small"
|
|
6410
|
+
"id": "components-skeleton-skeletontext-features--body-small",
|
|
6411
|
+
"code": "() => <SkeletonText size=\"bodySmall\" />"
|
|
6055
6412
|
}
|
|
6056
6413
|
],
|
|
6057
6414
|
"importPath": "@primer/react/experimental",
|
|
@@ -6125,19 +6482,24 @@
|
|
|
6125
6482
|
"status": "alpha",
|
|
6126
6483
|
"stories": [
|
|
6127
6484
|
{
|
|
6128
|
-
"id": "components-spinner--default"
|
|
6485
|
+
"id": "components-spinner--default",
|
|
6486
|
+
"code": "() => <Spinner />"
|
|
6129
6487
|
},
|
|
6130
6488
|
{
|
|
6131
|
-
"id": "components-spinner-features--small"
|
|
6489
|
+
"id": "components-spinner-features--small",
|
|
6490
|
+
"code": "() => <Spinner size=\"small\" />"
|
|
6132
6491
|
},
|
|
6133
6492
|
{
|
|
6134
|
-
"id": "components-spinner-features--large"
|
|
6493
|
+
"id": "components-spinner-features--large",
|
|
6494
|
+
"code": "() => <Spinner size=\"large\" />"
|
|
6135
6495
|
},
|
|
6136
6496
|
{
|
|
6137
|
-
"id": "components-spinner-features--suppress-screen-reader-text"
|
|
6497
|
+
"id": "components-spinner-features--suppress-screen-reader-text",
|
|
6498
|
+
"code": "() => (\n <Stack direction=\"horizontal\" className={classes.SuppressScreenReaderText}>\n <Spinner size=\"small\" srText={null} />\n <AriaStatus>Loading...</AriaStatus>\n </Stack>\n)"
|
|
6138
6499
|
},
|
|
6139
6500
|
{
|
|
6140
|
-
"id": "components-spinner-features--with-delay"
|
|
6501
|
+
"id": "components-spinner-features--with-delay",
|
|
6502
|
+
"code": "() => <Spinner delay />"
|
|
6141
6503
|
}
|
|
6142
6504
|
],
|
|
6143
6505
|
"subcomponents": []
|
|
@@ -6150,10 +6512,12 @@
|
|
|
6150
6512
|
"a11yReviewed": "2025-01-08",
|
|
6151
6513
|
"stories": [
|
|
6152
6514
|
{
|
|
6153
|
-
"id": "components-splitpagelayout--default"
|
|
6515
|
+
"id": "components-splitpagelayout--default",
|
|
6516
|
+
"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)"
|
|
6154
6517
|
},
|
|
6155
6518
|
{
|
|
6156
|
-
"id": "components-splitpagelayout-features--settings-page"
|
|
6519
|
+
"id": "components-splitpagelayout-features--settings-page",
|
|
6520
|
+
"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)"
|
|
6157
6521
|
}
|
|
6158
6522
|
],
|
|
6159
6523
|
"importPath": "@primer/react",
|
|
@@ -6360,10 +6724,12 @@
|
|
|
6360
6724
|
"a11yReviewed": "2025-01-08",
|
|
6361
6725
|
"stories": [
|
|
6362
6726
|
{
|
|
6363
|
-
"id": "components-stack--default"
|
|
6727
|
+
"id": "components-stack--default",
|
|
6728
|
+
"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)"
|
|
6364
6729
|
},
|
|
6365
6730
|
{
|
|
6366
|
-
"id": "components-stack-features--shrinking-stack-items"
|
|
6731
|
+
"id": "components-stack-features--shrinking-stack-items",
|
|
6732
|
+
"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)"
|
|
6367
6733
|
}
|
|
6368
6734
|
],
|
|
6369
6735
|
"importPath": "@primer/react",
|
|
@@ -6433,46 +6799,56 @@
|
|
|
6433
6799
|
"a11yReviewed": "2025-01-08",
|
|
6434
6800
|
"stories": [
|
|
6435
6801
|
{
|
|
6436
|
-
"id": "components-statelabel--
|
|
6437
|
-
|
|
6438
|
-
{
|
|
6439
|
-
"id": "components-statelabel-features--issue-opened"
|
|
6802
|
+
"id": "components-statelabel-features--issue-opened",
|
|
6803
|
+
"code": "() => <StateLabel status=\"issueOpened\">Open</StateLabel>"
|
|
6440
6804
|
},
|
|
6441
6805
|
{
|
|
6442
|
-
"id": "components-statelabel-features--issue-closed"
|
|
6806
|
+
"id": "components-statelabel-features--issue-closed",
|
|
6807
|
+
"code": "() => <StateLabel status=\"issueClosed\">Closed</StateLabel>"
|
|
6443
6808
|
},
|
|
6444
6809
|
{
|
|
6445
|
-
"id": "components-statelabel-features--issue-closed-not-planned"
|
|
6810
|
+
"id": "components-statelabel-features--issue-closed-not-planned",
|
|
6811
|
+
"code": "() => <StateLabel status=\"issueClosedNotPlanned\">Closed</StateLabel>"
|
|
6446
6812
|
},
|
|
6447
6813
|
{
|
|
6448
|
-
"id": "components-statelabel-features--issue-draft"
|
|
6814
|
+
"id": "components-statelabel-features--issue-draft",
|
|
6815
|
+
"code": "() => <StateLabel status=\"issueDraft\">Draft</StateLabel>"
|
|
6449
6816
|
},
|
|
6450
6817
|
{
|
|
6451
|
-
"id": "components-statelabel-features--pull-opened"
|
|
6818
|
+
"id": "components-statelabel-features--pull-opened",
|
|
6819
|
+
"code": "() => <StateLabel status=\"pullOpened\">Open</StateLabel>"
|
|
6452
6820
|
},
|
|
6453
6821
|
{
|
|
6454
|
-
"id": "components-statelabel-features--pull-closed"
|
|
6822
|
+
"id": "components-statelabel-features--pull-closed",
|
|
6823
|
+
"code": "() => <StateLabel status=\"pullClosed\">Closed</StateLabel>"
|
|
6455
6824
|
},
|
|
6456
6825
|
{
|
|
6457
|
-
"id": "components-statelabel-features--pull-merged"
|
|
6826
|
+
"id": "components-statelabel-features--pull-merged",
|
|
6827
|
+
"code": "() => <StateLabel status=\"pullMerged\">Merged</StateLabel>"
|
|
6458
6828
|
},
|
|
6459
6829
|
{
|
|
6460
|
-
"id": "components-statelabel-features--queued"
|
|
6830
|
+
"id": "components-statelabel-features--queued",
|
|
6831
|
+
"code": "() => <StateLabel status=\"pullQueued\">Queued</StateLabel>"
|
|
6461
6832
|
},
|
|
6462
6833
|
{
|
|
6463
|
-
"id": "components-statelabel-features--draft"
|
|
6834
|
+
"id": "components-statelabel-features--draft",
|
|
6835
|
+
"code": "() => <StateLabel status=\"draft\">Draft</StateLabel>"
|
|
6464
6836
|
},
|
|
6465
6837
|
{
|
|
6466
|
-
"id": "components-statelabel-features--unavailable"
|
|
6838
|
+
"id": "components-statelabel-features--unavailable",
|
|
6839
|
+
"code": "() => <StateLabel status=\"unavailable\">Unavailable</StateLabel>"
|
|
6467
6840
|
},
|
|
6468
6841
|
{
|
|
6469
|
-
"id": "components-statelabel-features--small"
|
|
6842
|
+
"id": "components-statelabel-features--small",
|
|
6843
|
+
"code": "() => (\n <StateLabel status=\"issueOpened\" size=\"small\">\n Open\n </StateLabel>\n)"
|
|
6470
6844
|
},
|
|
6471
6845
|
{
|
|
6472
|
-
"id": "components-statelabel-features--open"
|
|
6846
|
+
"id": "components-statelabel-features--open",
|
|
6847
|
+
"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)"
|
|
6473
6848
|
},
|
|
6474
6849
|
{
|
|
6475
|
-
"id": "components-statelabel-features--closed"
|
|
6850
|
+
"id": "components-statelabel-features--closed",
|
|
6851
|
+
"code": "() => <StateLabel status=\"closed\">Closed</StateLabel>"
|
|
6476
6852
|
}
|
|
6477
6853
|
],
|
|
6478
6854
|
"importPath": "@primer/react",
|
|
@@ -6498,10 +6874,8 @@
|
|
|
6498
6874
|
"a11yReviewed": "2025-01-08",
|
|
6499
6875
|
"stories": [
|
|
6500
6876
|
{
|
|
6501
|
-
"id": "components-subnav--
|
|
6502
|
-
|
|
6503
|
-
{
|
|
6504
|
-
"id": "components-subnav-features--selected"
|
|
6877
|
+
"id": "components-subnav-features--selected",
|
|
6878
|
+
"code": "() => (\n <SubNav aria-label=\"Main\">\n <SubNav.Links>\n <SubNav.Link href=\"#home\" selected>\n Home\n </SubNav.Link>\n <SubNav.Link href=\"#documentation\">Documentation</SubNav.Link>\n <SubNav.Link href=\"#support\">Support</SubNav.Link>\n </SubNav.Links>\n </SubNav>\n)"
|
|
6505
6879
|
}
|
|
6506
6880
|
],
|
|
6507
6881
|
"importPath": "@primer/react",
|
|
@@ -6572,10 +6946,12 @@
|
|
|
6572
6946
|
"a11yReviewed": false,
|
|
6573
6947
|
"stories": [
|
|
6574
6948
|
{
|
|
6575
|
-
"id": "deprecated-components-tabnav--default"
|
|
6949
|
+
"id": "deprecated-components-tabnav--default",
|
|
6950
|
+
"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)"
|
|
6576
6951
|
},
|
|
6577
6952
|
{
|
|
6578
|
-
"id": "deprecated-components-tabnav-features--selected"
|
|
6953
|
+
"id": "deprecated-components-tabnav-features--selected",
|
|
6954
|
+
"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)"
|
|
6579
6955
|
}
|
|
6580
6956
|
],
|
|
6581
6957
|
"importPath": "@primer/react/deprecated",
|
|
@@ -6620,34 +6996,44 @@
|
|
|
6620
6996
|
"a11yReviewed": "2025-01-08",
|
|
6621
6997
|
"stories": [
|
|
6622
6998
|
{
|
|
6623
|
-
"id": "components-text--default"
|
|
6999
|
+
"id": "components-text--default",
|
|
7000
|
+
"code": "() => <Text>Default Text</Text>"
|
|
6624
7001
|
},
|
|
6625
7002
|
{
|
|
6626
|
-
"id": "components-text-features--polymorphism"
|
|
7003
|
+
"id": "components-text-features--polymorphism",
|
|
7004
|
+
"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)"
|
|
6627
7005
|
},
|
|
6628
7006
|
{
|
|
6629
|
-
"id": "components-text-features--styled-text"
|
|
7007
|
+
"id": "components-text-features--styled-text",
|
|
7008
|
+
"code": "() => (\n <Text as=\"p\" className={classes.StyledText} size=\"small\">\n Stylized text\n </Text>\n)"
|
|
6630
7009
|
},
|
|
6631
7010
|
{
|
|
6632
|
-
"id": "components-text-features--size-small"
|
|
7011
|
+
"id": "components-text-features--size-small",
|
|
7012
|
+
"code": "() => (\n <Text as=\"span\" size=\"small\">\n Stylized text\n </Text>\n)"
|
|
6633
7013
|
},
|
|
6634
7014
|
{
|
|
6635
|
-
"id": "components-text-features--size-medium"
|
|
7015
|
+
"id": "components-text-features--size-medium",
|
|
7016
|
+
"code": "() => (\n <Text as=\"span\" size=\"medium\">\n Stylized text\n </Text>\n)"
|
|
6636
7017
|
},
|
|
6637
7018
|
{
|
|
6638
|
-
"id": "components-text-features--size-large"
|
|
7019
|
+
"id": "components-text-features--size-large",
|
|
7020
|
+
"code": "() => (\n <Text as=\"span\" size=\"large\">\n Stylized text\n </Text>\n)"
|
|
6639
7021
|
},
|
|
6640
7022
|
{
|
|
6641
|
-
"id": "components-text-features--light-weight"
|
|
7023
|
+
"id": "components-text-features--light-weight",
|
|
7024
|
+
"code": "() => (\n <Text as=\"span\" weight=\"light\">\n Stylized text\n </Text>\n)"
|
|
6642
7025
|
},
|
|
6643
7026
|
{
|
|
6644
|
-
"id": "components-text-features--normal-weight"
|
|
7027
|
+
"id": "components-text-features--normal-weight",
|
|
7028
|
+
"code": "() => (\n <Text as=\"span\" weight=\"normal\">\n Stylized text\n </Text>\n)"
|
|
6645
7029
|
},
|
|
6646
7030
|
{
|
|
6647
|
-
"id": "components-text-features--medium-weight"
|
|
7031
|
+
"id": "components-text-features--medium-weight",
|
|
7032
|
+
"code": "() => (\n <Text as=\"span\" weight=\"medium\">\n Stylized text\n </Text>\n)"
|
|
6648
7033
|
},
|
|
6649
7034
|
{
|
|
6650
|
-
"id": "components-text-features--semibold-weight"
|
|
7035
|
+
"id": "components-text-features--semibold-weight",
|
|
7036
|
+
"code": "() => (\n <Text as=\"span\" weight=\"semibold\">\n Stylized text\n </Text>\n)"
|
|
6651
7037
|
}
|
|
6652
7038
|
],
|
|
6653
7039
|
"importPath": "@primer/react",
|
|
@@ -6680,52 +7066,68 @@
|
|
|
6680
7066
|
"a11yReviewed": "2025-01-08",
|
|
6681
7067
|
"stories": [
|
|
6682
7068
|
{
|
|
6683
|
-
"id": "components-textinput--default"
|
|
7069
|
+
"id": "components-textinput--default",
|
|
7070
|
+
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput />\n </FormControl>\n </form>\n)"
|
|
6684
7071
|
},
|
|
6685
7072
|
{
|
|
6686
|
-
"id": "components-textinput-features--disabled"
|
|
7073
|
+
"id": "components-textinput-features--disabled",
|
|
7074
|
+
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput disabled />\n </FormControl>\n </form>\n)"
|
|
6687
7075
|
},
|
|
6688
7076
|
{
|
|
6689
|
-
"id": "components-textinput-features--with-caption"
|
|
7077
|
+
"id": "components-textinput-features--with-caption",
|
|
7078
|
+
"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)"
|
|
6690
7079
|
},
|
|
6691
7080
|
{
|
|
6692
|
-
"id": "components-textinput-features--visually-hidden-label"
|
|
7081
|
+
"id": "components-textinput-features--visually-hidden-label",
|
|
7082
|
+
"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)"
|
|
6693
7083
|
},
|
|
6694
7084
|
{
|
|
6695
|
-
"id": "components-textinput-features--error"
|
|
7085
|
+
"id": "components-textinput-features--error",
|
|
7086
|
+
"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)"
|
|
6696
7087
|
},
|
|
6697
7088
|
{
|
|
6698
|
-
"id": "components-textinput-features--success"
|
|
7089
|
+
"id": "components-textinput-features--success",
|
|
7090
|
+
"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)"
|
|
6699
7091
|
},
|
|
6700
7092
|
{
|
|
6701
|
-
"id": "components-textinput-features--block"
|
|
7093
|
+
"id": "components-textinput-features--block",
|
|
7094
|
+
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput block />\n </FormControl>\n </form>\n)"
|
|
6702
7095
|
},
|
|
6703
7096
|
{
|
|
6704
|
-
"id": "components-textinput-features--small"
|
|
7097
|
+
"id": "components-textinput-features--small",
|
|
7098
|
+
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput size=\"small\" />\n </FormControl>\n </form>\n)"
|
|
6705
7099
|
},
|
|
6706
7100
|
{
|
|
6707
|
-
"id": "components-textinput-features--large"
|
|
7101
|
+
"id": "components-textinput-features--large",
|
|
7102
|
+
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput size=\"large\" />\n </FormControl>\n </form>\n)"
|
|
6708
7103
|
},
|
|
6709
7104
|
{
|
|
6710
|
-
"id": "components-textinput-features--required"
|
|
7105
|
+
"id": "components-textinput-features--required",
|
|
7106
|
+
"code": "() => (\n <form>\n <FormControl required>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput size=\"large\" />\n </FormControl>\n </form>\n)"
|
|
6711
7107
|
},
|
|
6712
7108
|
{
|
|
6713
|
-
"id": "components-textinput-features--with-leading-visual"
|
|
7109
|
+
"id": "components-textinput-features--with-leading-visual",
|
|
7110
|
+
"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}"
|
|
6714
7111
|
},
|
|
6715
7112
|
{
|
|
6716
|
-
"id": "components-textinput-features--with-trailing-icon"
|
|
7113
|
+
"id": "components-textinput-features--with-trailing-icon",
|
|
7114
|
+
"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}"
|
|
6717
7115
|
},
|
|
6718
7116
|
{
|
|
6719
|
-
"id": "components-textinput-features--with-trailing-action"
|
|
7117
|
+
"id": "components-textinput-features--with-trailing-action",
|
|
7118
|
+
"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}"
|
|
6720
7119
|
},
|
|
6721
7120
|
{
|
|
6722
|
-
"id": "components-textinput-features--with-tooltip-direction"
|
|
7121
|
+
"id": "components-textinput-features--with-tooltip-direction",
|
|
7122
|
+
"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}"
|
|
6723
7123
|
},
|
|
6724
7124
|
{
|
|
6725
|
-
"id": "components-textinput-features--with-loading-indicator"
|
|
7125
|
+
"id": "components-textinput-features--with-loading-indicator",
|
|
7126
|
+
"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}"
|
|
6726
7127
|
},
|
|
6727
7128
|
{
|
|
6728
|
-
"id": "components-textinput-features--with-autocomplete-attribute"
|
|
7129
|
+
"id": "components-textinput-features--with-autocomplete-attribute",
|
|
7130
|
+
"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)"
|
|
6729
7131
|
}
|
|
6730
7132
|
],
|
|
6731
7133
|
"importPath": "@primer/react",
|
|
@@ -6902,34 +7304,44 @@
|
|
|
6902
7304
|
"a11yReviewed": "2025-01-08",
|
|
6903
7305
|
"stories": [
|
|
6904
7306
|
{
|
|
6905
|
-
"id": "deprecated-components-textinputwithtokens--default"
|
|
7307
|
+
"id": "deprecated-components-textinputwithtokens--default",
|
|
7308
|
+
"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}"
|
|
6906
7309
|
},
|
|
6907
7310
|
{
|
|
6908
|
-
"id": "deprecated-components-textinputwithtokens-features--with-leading-visual"
|
|
7311
|
+
"id": "deprecated-components-textinputwithtokens-features--with-leading-visual",
|
|
7312
|
+
"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}"
|
|
6909
7313
|
},
|
|
6910
7314
|
{
|
|
6911
|
-
"id": "deprecated-components-textinputwithtokens-features--with-trailing-visual"
|
|
7315
|
+
"id": "deprecated-components-textinputwithtokens-features--with-trailing-visual",
|
|
7316
|
+
"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}"
|
|
6912
7317
|
},
|
|
6913
7318
|
{
|
|
6914
|
-
"id": "deprecated-components-textinputwithtokens-features--with-loading-indicator"
|
|
7319
|
+
"id": "deprecated-components-textinputwithtokens-features--with-loading-indicator",
|
|
7320
|
+
"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}"
|
|
6915
7321
|
},
|
|
6916
7322
|
{
|
|
6917
|
-
"id": "deprecated-components-textinputwithtokens-features--using-issue-label-tokens"
|
|
7323
|
+
"id": "deprecated-components-textinputwithtokens-features--using-issue-label-tokens",
|
|
7324
|
+
"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}"
|
|
6918
7325
|
},
|
|
6919
7326
|
{
|
|
6920
|
-
"id": "deprecated-components-textinputwithtokens-features--unstyled"
|
|
7327
|
+
"id": "deprecated-components-textinputwithtokens-features--unstyled",
|
|
7328
|
+
"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}"
|
|
6921
7329
|
},
|
|
6922
7330
|
{
|
|
6923
|
-
"id": "deprecated-components-textinputwithtokens-features--prevent-tokens-from-wrapping"
|
|
7331
|
+
"id": "deprecated-components-textinputwithtokens-features--prevent-tokens-from-wrapping",
|
|
7332
|
+
"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}"
|
|
6924
7333
|
},
|
|
6925
7334
|
{
|
|
6926
|
-
"id": "deprecated-components-textinputwithtokens-features--max-height"
|
|
7335
|
+
"id": "deprecated-components-textinputwithtokens-features--max-height",
|
|
7336
|
+
"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}"
|
|
6927
7337
|
},
|
|
6928
7338
|
{
|
|
6929
|
-
"id": "deprecated-components-textinputwithtokens-features--size"
|
|
7339
|
+
"id": "deprecated-components-textinputwithtokens-features--size",
|
|
7340
|
+
"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}"
|
|
6930
7341
|
},
|
|
6931
7342
|
{
|
|
6932
|
-
"id": "deprecated-components-textinputwithtokens-features--truncated"
|
|
7343
|
+
"id": "deprecated-components-textinputwithtokens-features--truncated",
|
|
7344
|
+
"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}"
|
|
6933
7345
|
}
|
|
6934
7346
|
],
|
|
6935
7347
|
"importPath": "@primer/react",
|
|
@@ -7005,34 +7417,44 @@
|
|
|
7005
7417
|
"a11yReviewed": "2025-01-08",
|
|
7006
7418
|
"stories": [
|
|
7007
7419
|
{
|
|
7008
|
-
"id": "components-textarea--default"
|
|
7420
|
+
"id": "components-textarea--default",
|
|
7421
|
+
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea />\n </FormControl>\n </form>\n)"
|
|
7009
7422
|
},
|
|
7010
7423
|
{
|
|
7011
|
-
"id": "components-textarea-features--disabled"
|
|
7424
|
+
"id": "components-textarea-features--disabled",
|
|
7425
|
+
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea disabled />\n </FormControl>\n </form>\n)"
|
|
7012
7426
|
},
|
|
7013
7427
|
{
|
|
7014
|
-
"id": "components-textarea-features--with-caption"
|
|
7428
|
+
"id": "components-textarea-features--with-caption",
|
|
7429
|
+
"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)"
|
|
7015
7430
|
},
|
|
7016
7431
|
{
|
|
7017
|
-
"id": "components-textarea-features--visually-hidden-label"
|
|
7432
|
+
"id": "components-textarea-features--visually-hidden-label",
|
|
7433
|
+
"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)"
|
|
7018
7434
|
},
|
|
7019
7435
|
{
|
|
7020
|
-
"id": "components-textarea-features--error"
|
|
7436
|
+
"id": "components-textarea-features--error",
|
|
7437
|
+
"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)"
|
|
7021
7438
|
},
|
|
7022
7439
|
{
|
|
7023
|
-
"id": "components-textarea-features--success"
|
|
7440
|
+
"id": "components-textarea-features--success",
|
|
7441
|
+
"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)"
|
|
7024
7442
|
},
|
|
7025
7443
|
{
|
|
7026
|
-
"id": "components-textarea-features--block"
|
|
7444
|
+
"id": "components-textarea-features--block",
|
|
7445
|
+
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea block />\n </FormControl>\n </form>\n)"
|
|
7027
7446
|
},
|
|
7028
7447
|
{
|
|
7029
|
-
"id": "components-textarea-features--custom-height"
|
|
7448
|
+
"id": "components-textarea-features--custom-height",
|
|
7449
|
+
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea rows={3} />\n </FormControl>\n </form>\n)"
|
|
7030
7450
|
},
|
|
7031
7451
|
{
|
|
7032
|
-
"id": "components-textarea-features--custom-width"
|
|
7452
|
+
"id": "components-textarea-features--custom-width",
|
|
7453
|
+
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea cols={60} />\n </FormControl>\n </form>\n)"
|
|
7033
7454
|
},
|
|
7034
7455
|
{
|
|
7035
|
-
"id": "components-textarea-features--custom-resize-behavior"
|
|
7456
|
+
"id": "components-textarea-features--custom-resize-behavior",
|
|
7457
|
+
"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)"
|
|
7036
7458
|
}
|
|
7037
7459
|
],
|
|
7038
7460
|
"importPath": "@primer/react",
|
|
@@ -7114,19 +7536,24 @@
|
|
|
7114
7536
|
"a11yReviewed": "2025-01-08",
|
|
7115
7537
|
"stories": [
|
|
7116
7538
|
{
|
|
7117
|
-
"id": "components-timeline--default"
|
|
7539
|
+
"id": "components-timeline--default",
|
|
7540
|
+
"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)"
|
|
7118
7541
|
},
|
|
7119
7542
|
{
|
|
7120
|
-
"id": "components-timeline-features--clip-sidebar"
|
|
7543
|
+
"id": "components-timeline-features--clip-sidebar",
|
|
7544
|
+
"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)"
|
|
7121
7545
|
},
|
|
7122
7546
|
{
|
|
7123
|
-
"id": "components-timeline-features--condensed-items"
|
|
7547
|
+
"id": "components-timeline-features--condensed-items",
|
|
7548
|
+
"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)"
|
|
7124
7549
|
},
|
|
7125
7550
|
{
|
|
7126
|
-
"id": "components-timeline-features--timeline-break"
|
|
7551
|
+
"id": "components-timeline-features--timeline-break",
|
|
7552
|
+
"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)"
|
|
7127
7553
|
},
|
|
7128
7554
|
{
|
|
7129
|
-
"id": "components-timeline-features--with-inline-links"
|
|
7555
|
+
"id": "components-timeline-features--with-inline-links",
|
|
7556
|
+
"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)"
|
|
7130
7557
|
}
|
|
7131
7558
|
],
|
|
7132
7559
|
"importPath": "@primer/react",
|
|
@@ -7170,34 +7597,44 @@
|
|
|
7170
7597
|
"a11yReviewed": "2025-01-08",
|
|
7171
7598
|
"stories": [
|
|
7172
7599
|
{
|
|
7173
|
-
"id": "components-toggleswitch--default"
|
|
7600
|
+
"id": "components-toggleswitch--default",
|
|
7601
|
+
"code": "() => (\n <>\n <Text id=\"toggle\" className={classes.TextMediumBold}>\n Toggle label\n </Text>\n <ToggleSwitch aria-labelledby=\"toggle\" />\n </>\n)"
|
|
7174
7602
|
},
|
|
7175
7603
|
{
|
|
7176
|
-
"id": "components-toggleswitch-features--small"
|
|
7604
|
+
"id": "components-toggleswitch-features--small",
|
|
7605
|
+
"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)"
|
|
7177
7606
|
},
|
|
7178
7607
|
{
|
|
7179
|
-
"id": "components-toggleswitch-features--with-caption"
|
|
7608
|
+
"id": "components-toggleswitch-features--with-caption",
|
|
7609
|
+
"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)"
|
|
7180
7610
|
},
|
|
7181
7611
|
{
|
|
7182
|
-
"id": "components-toggleswitch-features--disabled"
|
|
7612
|
+
"id": "components-toggleswitch-features--disabled",
|
|
7613
|
+
"code": "() => (\n <ToggleSwitchStoryWrapper>\n <span id=\"toggle\" className={styles.ToggleLabel}>\n Toggle label\n </span>\n <ToggleSwitch disabled aria-labelledby=\"toggle\" />\n </ToggleSwitchStoryWrapper>\n)"
|
|
7183
7614
|
},
|
|
7184
7615
|
{
|
|
7185
|
-
"id": "components-toggleswitch-features--checked"
|
|
7616
|
+
"id": "components-toggleswitch-features--checked",
|
|
7617
|
+
"code": "() => (\n <ToggleSwitchStoryWrapper>\n <span id=\"toggle\" className={styles.ToggleLabel}>\n Toggle label\n </span>\n <ToggleSwitch checked aria-labelledby=\"toggle\" />\n </ToggleSwitchStoryWrapper>\n)"
|
|
7186
7618
|
},
|
|
7187
7619
|
{
|
|
7188
|
-
"id": "components-toggleswitch-features--checked-disabled"
|
|
7620
|
+
"id": "components-toggleswitch-features--checked-disabled",
|
|
7621
|
+
"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)"
|
|
7189
7622
|
},
|
|
7190
7623
|
{
|
|
7191
|
-
"id": "components-toggleswitch-features--loading"
|
|
7624
|
+
"id": "components-toggleswitch-features--loading",
|
|
7625
|
+
"code": "() => (\n <ToggleSwitchStoryWrapper>\n <span id=\"toggle\" className={styles.ToggleLabel}>\n Toggle label\n </span>\n <ToggleSwitch loading aria-labelledby=\"toggle\" />\n </ToggleSwitchStoryWrapper>\n)"
|
|
7192
7626
|
},
|
|
7193
7627
|
{
|
|
7194
|
-
"id": "components-toggleswitch-features--label-end"
|
|
7628
|
+
"id": "components-toggleswitch-features--label-end",
|
|
7629
|
+
"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)"
|
|
7195
7630
|
},
|
|
7196
7631
|
{
|
|
7197
|
-
"id": "components-toggleswitch-features--controlled"
|
|
7632
|
+
"id": "components-toggleswitch-features--controlled",
|
|
7633
|
+
"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}"
|
|
7198
7634
|
},
|
|
7199
7635
|
{
|
|
7200
|
-
"id": "components-toggleswitch-features--with-custom-labels"
|
|
7636
|
+
"id": "components-toggleswitch-features--with-custom-labels",
|
|
7637
|
+
"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)"
|
|
7201
7638
|
}
|
|
7202
7639
|
],
|
|
7203
7640
|
"importPath": "@primer/react",
|
|
@@ -7304,37 +7741,48 @@
|
|
|
7304
7741
|
"a11yReviewed": "2025-01-08",
|
|
7305
7742
|
"stories": [
|
|
7306
7743
|
{
|
|
7307
|
-
"id": "components-token--default"
|
|
7744
|
+
"id": "components-token--default",
|
|
7745
|
+
"code": "() => <Token text=\"token\" />"
|
|
7308
7746
|
},
|
|
7309
7747
|
{
|
|
7310
|
-
"id": "components-token-features--interactive-token"
|
|
7748
|
+
"id": "components-token-features--interactive-token",
|
|
7749
|
+
"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}"
|
|
7311
7750
|
},
|
|
7312
7751
|
{
|
|
7313
|
-
"id": "components-token-features--token-with-leading-visual"
|
|
7752
|
+
"id": "components-token-features--token-with-leading-visual",
|
|
7753
|
+
"code": "() => {\n return <Token text=\"token\" leadingVisual={GitBranchIcon} />\n}"
|
|
7314
7754
|
},
|
|
7315
7755
|
{
|
|
7316
|
-
"id": "components-token-features--token-with-on-remove-fn"
|
|
7756
|
+
"id": "components-token-features--token-with-on-remove-fn",
|
|
7757
|
+
"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}"
|
|
7317
7758
|
},
|
|
7318
7759
|
{
|
|
7319
|
-
"id": "components-token-features--default-issue-label-token"
|
|
7760
|
+
"id": "components-token-features--default-issue-label-token",
|
|
7761
|
+
"code": "() => {\n return <IssueLabelToken text=\"good first issue\" />\n}"
|
|
7320
7762
|
},
|
|
7321
7763
|
{
|
|
7322
|
-
"id": "components-token-features--interactive-issue-label-token"
|
|
7764
|
+
"id": "components-token-features--interactive-issue-label-token",
|
|
7765
|
+
"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}"
|
|
7323
7766
|
},
|
|
7324
7767
|
{
|
|
7325
|
-
"id": "components-token-features--issue-label-token-with-on-remove-fn"
|
|
7768
|
+
"id": "components-token-features--issue-label-token-with-on-remove-fn",
|
|
7769
|
+
"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}"
|
|
7326
7770
|
},
|
|
7327
7771
|
{
|
|
7328
|
-
"id": "components-token-features--small-token"
|
|
7772
|
+
"id": "components-token-features--small-token",
|
|
7773
|
+
"code": "() => <Token text=\"token\" size=\"small\" />"
|
|
7329
7774
|
},
|
|
7330
7775
|
{
|
|
7331
|
-
"id": "components-token-features--large-token"
|
|
7776
|
+
"id": "components-token-features--large-token",
|
|
7777
|
+
"code": "() => <Token text=\"token\" size=\"xlarge\" />"
|
|
7332
7778
|
},
|
|
7333
7779
|
{
|
|
7334
|
-
"id": "components-token-features--x-large-token"
|
|
7780
|
+
"id": "components-token-features--x-large-token",
|
|
7781
|
+
"code": "() => <Token text=\"token\" size=\"xlarge\" />"
|
|
7335
7782
|
},
|
|
7336
7783
|
{
|
|
7337
|
-
"id": "components-token-features--issue-label-token-custom-colors"
|
|
7784
|
+
"id": "components-token-features--issue-label-token-custom-colors",
|
|
7785
|
+
"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}"
|
|
7338
7786
|
}
|
|
7339
7787
|
],
|
|
7340
7788
|
"importPath": "@primer/react",
|
|
@@ -7439,13 +7887,16 @@
|
|
|
7439
7887
|
"a11yReviewed": false,
|
|
7440
7888
|
"stories": [
|
|
7441
7889
|
{
|
|
7442
|
-
"id": "deprecated-components-tooltip--default"
|
|
7890
|
+
"id": "deprecated-components-tooltip--default",
|
|
7891
|
+
"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)"
|
|
7443
7892
|
},
|
|
7444
7893
|
{
|
|
7445
|
-
"id": "deprecated-components-tooltip-features--all-directions"
|
|
7894
|
+
"id": "deprecated-components-tooltip-features--all-directions",
|
|
7895
|
+
"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)"
|
|
7446
7896
|
},
|
|
7447
7897
|
{
|
|
7448
|
-
"id": "deprecated-components-tooltip-features--icon-button-tooltip"
|
|
7898
|
+
"id": "deprecated-components-tooltip-features--icon-button-tooltip",
|
|
7899
|
+
"code": "() => (\n <div className={classes.PaddedContainer}>\n <Tooltip aria-label=\"Search\">\n <IconButton icon={SearchIcon} aria-label=\"Search\" />\n </Tooltip>\n </div>\n)"
|
|
7449
7900
|
}
|
|
7450
7901
|
],
|
|
7451
7902
|
"importPath": "@primer/react/deprecated",
|
|
@@ -7488,31 +7939,40 @@
|
|
|
7488
7939
|
"importPath": "@primer/react/next",
|
|
7489
7940
|
"stories": [
|
|
7490
7941
|
{
|
|
7491
|
-
"id": "components-tooltipv2--default"
|
|
7942
|
+
"id": "components-tooltipv2--default",
|
|
7943
|
+
"code": "() => (\n <div className={classes.PaddedContainer}>\n <Tooltip text=\"This change can't be undone.\">\n <Button>Delete</Button>\n </Tooltip>\n </div>\n)"
|
|
7492
7944
|
},
|
|
7493
7945
|
{
|
|
7494
|
-
"id": "components-tooltipv2-features--anchor-has-margin"
|
|
7946
|
+
"id": "components-tooltipv2-features--anchor-has-margin",
|
|
7947
|
+
"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)"
|
|
7495
7948
|
},
|
|
7496
7949
|
{
|
|
7497
|
-
"id": "components-tooltipv2-features--label-type"
|
|
7950
|
+
"id": "components-tooltipv2-features--label-type",
|
|
7951
|
+
"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)"
|
|
7498
7952
|
},
|
|
7499
7953
|
{
|
|
7500
|
-
"id": "components-tooltipv2-features--description-type"
|
|
7954
|
+
"id": "components-tooltipv2-features--description-type",
|
|
7955
|
+
"code": "() => (\n <div className={classes.PaddedContainer}>\n <Tooltip text=\"Supplementary text\" direction=\"n\">\n <Button>Save</Button>\n </Tooltip>\n </div>\n)"
|
|
7501
7956
|
},
|
|
7502
7957
|
{
|
|
7503
|
-
"id": "components-tooltipv2-features--icon-button-with-description"
|
|
7958
|
+
"id": "components-tooltipv2-features--icon-button-with-description",
|
|
7959
|
+
"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)"
|
|
7504
7960
|
},
|
|
7505
7961
|
{
|
|
7506
|
-
"id": "components-tooltipv2-features--all-directions"
|
|
7962
|
+
"id": "components-tooltipv2-features--all-directions",
|
|
7963
|
+
"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)"
|
|
7507
7964
|
},
|
|
7508
7965
|
{
|
|
7509
|
-
"id": "components-tooltipv2-features--multiline-text"
|
|
7966
|
+
"id": "components-tooltipv2-features--multiline-text",
|
|
7967
|
+
"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)"
|
|
7510
7968
|
},
|
|
7511
7969
|
{
|
|
7512
|
-
"id": "components-tooltipv2-features--calculated-direction"
|
|
7970
|
+
"id": "components-tooltipv2-features--calculated-direction",
|
|
7971
|
+
"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)"
|
|
7513
7972
|
},
|
|
7514
7973
|
{
|
|
7515
|
-
"id": "components-tooltipv2-features--on-action-menu-anchor"
|
|
7974
|
+
"id": "components-tooltipv2-features--on-action-menu-anchor",
|
|
7975
|
+
"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)"
|
|
7516
7976
|
}
|
|
7517
7977
|
],
|
|
7518
7978
|
"props": [
|
|
@@ -7556,13 +8016,16 @@
|
|
|
7556
8016
|
"a11yReviewed": false,
|
|
7557
8017
|
"stories": [
|
|
7558
8018
|
{
|
|
7559
|
-
"id": "experimental-components-topictag--default"
|
|
8019
|
+
"id": "experimental-components-topictag--default",
|
|
8020
|
+
"code": "() => <TopicTag>react</TopicTag>"
|
|
7560
8021
|
},
|
|
7561
8022
|
{
|
|
7562
|
-
"id": "experimental-components-topictag-features--as-button"
|
|
8023
|
+
"id": "experimental-components-topictag-features--as-button",
|
|
8024
|
+
"code": "() => <TopicTag as=\"button\">react</TopicTag>"
|
|
7563
8025
|
},
|
|
7564
8026
|
{
|
|
7565
|
-
"id": "experimental-components-topictag-features--as-group"
|
|
8027
|
+
"id": "experimental-components-topictag-features--as-group",
|
|
8028
|
+
"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}"
|
|
7566
8029
|
}
|
|
7567
8030
|
],
|
|
7568
8031
|
"importPath": "@primer/react/experimental",
|
|
@@ -7599,25 +8062,32 @@
|
|
|
7599
8062
|
"a11yReviewed": "2025-01-08",
|
|
7600
8063
|
"stories": [
|
|
7601
8064
|
{
|
|
7602
|
-
"id": "components-treeview--default"
|
|
8065
|
+
"id": "components-treeview--default",
|
|
8066
|
+
"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)"
|
|
7603
8067
|
},
|
|
7604
8068
|
{
|
|
7605
|
-
"id": "components-treeview-features--files"
|
|
8069
|
+
"id": "components-treeview-features--files",
|
|
8070
|
+
"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)"
|
|
7606
8071
|
},
|
|
7607
8072
|
{
|
|
7608
|
-
"id": "components-treeview-features--files-changed"
|
|
8073
|
+
"id": "components-treeview-features--files-changed",
|
|
8074
|
+
"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}"
|
|
7609
8075
|
},
|
|
7610
8076
|
{
|
|
7611
|
-
"id": "components-treeview-features--async-success"
|
|
8077
|
+
"id": "components-treeview-features--async-success",
|
|
8078
|
+
"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}"
|
|
7612
8079
|
},
|
|
7613
8080
|
{
|
|
7614
|
-
"id": "components-treeview-features--async-error"
|
|
8081
|
+
"id": "components-treeview-features--async-error",
|
|
8082
|
+
"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}"
|
|
7615
8083
|
},
|
|
7616
8084
|
{
|
|
7617
|
-
"id": "components-treeview-features--async-with-count"
|
|
8085
|
+
"id": "components-treeview-features--async-with-count",
|
|
8086
|
+
"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}"
|
|
7618
8087
|
},
|
|
7619
8088
|
{
|
|
7620
|
-
"id": "components-treeview-features--controlled"
|
|
8089
|
+
"id": "components-treeview-features--controlled",
|
|
8090
|
+
"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}"
|
|
7621
8091
|
}
|
|
7622
8092
|
],
|
|
7623
8093
|
"importPath": "@primer/react",
|
|
@@ -7832,16 +8302,20 @@
|
|
|
7832
8302
|
"a11yReviewed": "2025-01-08",
|
|
7833
8303
|
"stories": [
|
|
7834
8304
|
{
|
|
7835
|
-
"id": "components-truncate--default"
|
|
8305
|
+
"id": "components-truncate--default",
|
|
8306
|
+
"code": "() => <Truncate title=\"Some example text\">Some example text</Truncate>"
|
|
7836
8307
|
},
|
|
7837
8308
|
{
|
|
7838
|
-
"id": "components-truncate-features--expandable"
|
|
8309
|
+
"id": "components-truncate-features--expandable",
|
|
8310
|
+
"code": "() => (\n <Truncate title=\"Hover this example text\" expandable>\n Hover this example text\n </Truncate>\n)"
|
|
7839
8311
|
},
|
|
7840
8312
|
{
|
|
7841
|
-
"id": "components-truncate-features--inline"
|
|
8313
|
+
"id": "components-truncate-features--inline",
|
|
8314
|
+
"code": "() => (\n <>\n <ArrowRightIcon />\n <Truncate title=\"Inline example text\" inline>\n Inline example text\n </Truncate>\n <ArrowLeftIcon />\n </>\n)"
|
|
7842
8315
|
},
|
|
7843
8316
|
{
|
|
7844
|
-
"id": "components-truncate-features--max-width"
|
|
8317
|
+
"id": "components-truncate-features--max-width",
|
|
8318
|
+
"code": "() => (\n <Truncate title=\"Some example text with a max width\" maxWidth={200}>\n Some example text with a max width\n </Truncate>\n)"
|
|
7845
8319
|
}
|
|
7846
8320
|
],
|
|
7847
8321
|
"importPath": "@primer/react",
|
|
@@ -7880,28 +8354,32 @@
|
|
|
7880
8354
|
"a11yReviewed": "2025-01-08",
|
|
7881
8355
|
"stories": [
|
|
7882
8356
|
{
|
|
7883
|
-
"id": "components-underlinenav--default"
|
|
7884
|
-
}
|
|
7885
|
-
{
|
|
7886
|
-
"id": "components-underlinenav-features--default"
|
|
8357
|
+
"id": "components-underlinenav-features--default",
|
|
8358
|
+
"code": "() => {\n const children = ['Code', 'Pull requests', 'Actions', 'Projects', 'Wiki']\n return (\n <UnderlineNav aria-label=\"Repository\">\n {children.map((child: string, index: number) => (\n <UnderlineNavItem\n key={index}\n href=\"#\"\n aria-current={index === 0 ? 'page' : undefined}\n >\n {child}\n </UnderlineNavItem>\n ))}\n </UnderlineNav>\n )\n}"
|
|
7887
8359
|
},
|
|
7888
8360
|
{
|
|
7889
|
-
"id": "components-underlinenav-features--with-icons"
|
|
8361
|
+
"id": "components-underlinenav-features--with-icons",
|
|
8362
|
+
"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}"
|
|
7890
8363
|
},
|
|
7891
8364
|
{
|
|
7892
|
-
"id": "components-underlinenav-features--with-counter-labels"
|
|
8365
|
+
"id": "components-underlinenav-features--with-counter-labels",
|
|
8366
|
+
"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}"
|
|
7893
8367
|
},
|
|
7894
8368
|
{
|
|
7895
|
-
"id": "components-underlinenav-features--overflow-template"
|
|
8369
|
+
"id": "components-underlinenav-features--overflow-template",
|
|
8370
|
+
"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}"
|
|
7896
8371
|
},
|
|
7897
8372
|
{
|
|
7898
|
-
"id": "components-underlinenav-features--overflow-on-narrow-screen"
|
|
8373
|
+
"id": "components-underlinenav-features--overflow-on-narrow-screen",
|
|
8374
|
+
"code": "() => {\n return <OverflowTemplate initialSelectedIndex={1} />\n}"
|
|
7899
8375
|
},
|
|
7900
8376
|
{
|
|
7901
|
-
"id": "components-underlinenav-features--counters-loading-state"
|
|
8377
|
+
"id": "components-underlinenav-features--counters-loading-state",
|
|
8378
|
+
"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}"
|
|
7902
8379
|
},
|
|
7903
8380
|
{
|
|
7904
|
-
"id": "components-underlinenav-features--variant-flush"
|
|
8381
|
+
"id": "components-underlinenav-features--variant-flush",
|
|
8382
|
+
"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}"
|
|
7905
8383
|
}
|
|
7906
8384
|
],
|
|
7907
8385
|
"importPath": "@primer/react",
|
|
@@ -7995,10 +8473,8 @@
|
|
|
7995
8473
|
"a11yReviewed": false,
|
|
7996
8474
|
"stories": [
|
|
7997
8475
|
{
|
|
7998
|
-
"id": "
|
|
7999
|
-
}
|
|
8000
|
-
{
|
|
8001
|
-
"id": "components-dialog--default"
|
|
8476
|
+
"id": "components-dialog--default",
|
|
8477
|
+
"code": "() => {\n const [isOpen, setIsOpen] = useState(false)\n const returnFocusRef = useRef(null)\n return (\n <div>\n <div\n style={{\n marginBottom: 'var(--stack-gap-normal)',\n }}\n >\n <Banner\n title=\"This component is deprecated\"\n description=\"We recommend using Dialog instead.\"\n variant=\"warning\"\n />\n </div>\n <Button\n data-testid=\"trigger-button\"\n ref={returnFocusRef}\n onClick={() => setIsOpen(true)}\n >\n Show Dialog\n </Button>\n <Dialog\n returnFocusRef={returnFocusRef}\n isOpen={isOpen}\n onDismiss={() => setIsOpen(false)}\n aria-labelledby=\"header\"\n >\n <div data-testid=\"inner\">\n <Dialog.Header id=\"header\">Title</Dialog.Header>\n <div\n style={{\n padding: 'var(--stack-gap-normal)',\n }}\n >\n <Text>Some content</Text>\n </div>\n </div>\n </Dialog>\n </div>\n )\n}"
|
|
8002
8478
|
}
|
|
8003
8479
|
],
|
|
8004
8480
|
"importPath": "@primer/react/deprecated",
|
|
@@ -8057,7 +8533,8 @@
|
|
|
8057
8533
|
"a11yReviewed": false,
|
|
8058
8534
|
"stories": [
|
|
8059
8535
|
{
|
|
8060
|
-
"id": "deprecated-components-filteredsearch--default"
|
|
8536
|
+
"id": "deprecated-components-filteredsearch--default",
|
|
8537
|
+
"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)"
|
|
8061
8538
|
}
|
|
8062
8539
|
],
|
|
8063
8540
|
"importPath": "@primer/react/deprecated",
|
|
@@ -8078,10 +8555,12 @@
|
|
|
8078
8555
|
"a11yReviewed": "2025-01-08",
|
|
8079
8556
|
"stories": [
|
|
8080
8557
|
{
|
|
8081
|
-
"id": "deprecated-components-underlinenav--default"
|
|
8558
|
+
"id": "deprecated-components-underlinenav--default",
|
|
8559
|
+
"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)"
|
|
8082
8560
|
},
|
|
8083
8561
|
{
|
|
8084
|
-
"id": "deprecated-components-underlinenav-features--actions"
|
|
8562
|
+
"id": "deprecated-components-underlinenav-features--actions",
|
|
8563
|
+
"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)"
|
|
8085
8564
|
}
|
|
8086
8565
|
],
|
|
8087
8566
|
"importPath": "@primer/react/deprecated",
|
|
@@ -8136,16 +8615,16 @@
|
|
|
8136
8615
|
"a11yReviewed": "2025-01-08",
|
|
8137
8616
|
"stories": [
|
|
8138
8617
|
{
|
|
8139
|
-
"id": "components-issuelabel--default"
|
|
8140
|
-
|
|
8141
|
-
{
|
|
8142
|
-
"id": "experimental-components-issuelabel--default"
|
|
8618
|
+
"id": "experimental-components-issuelabel--default",
|
|
8619
|
+
"code": "() => <IssueLabel>Issue label</IssueLabel>"
|
|
8143
8620
|
},
|
|
8144
8621
|
{
|
|
8145
|
-
"id": "experimental-components-issuelabel-features--group-of-labels"
|
|
8622
|
+
"id": "experimental-components-issuelabel-features--group-of-labels",
|
|
8623
|
+
"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)"
|
|
8146
8624
|
},
|
|
8147
8625
|
{
|
|
8148
|
-
"id": "experimental-components-issuelabel-features--hex-color"
|
|
8626
|
+
"id": "experimental-components-issuelabel-features--hex-color",
|
|
8627
|
+
"code": "(args: { fillColor: `#${string}` }) => {\n return <IssueLabel fillColor={args.fillColor}>Issue label</IssueLabel>\n}"
|
|
8149
8628
|
}
|
|
8150
8629
|
],
|
|
8151
8630
|
"importPath": "@primer/react/experimental",
|
|
@@ -8183,34 +8662,44 @@
|
|
|
8183
8662
|
"a11yReviewed": false,
|
|
8184
8663
|
"stories": [
|
|
8185
8664
|
{
|
|
8186
|
-
"id": "deprecated-components-selectpanel--default"
|
|
8665
|
+
"id": "deprecated-components-selectpanel--default",
|
|
8666
|
+
"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}"
|
|
8187
8667
|
},
|
|
8188
8668
|
{
|
|
8189
|
-
"id": "deprecated-components-selectpanel-examples--minimal"
|
|
8669
|
+
"id": "deprecated-components-selectpanel-examples--minimal",
|
|
8670
|
+
"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}"
|
|
8190
8671
|
},
|
|
8191
8672
|
{
|
|
8192
|
-
"id": "deprecated-components-selectpanel-examples--short-select-panel"
|
|
8673
|
+
"id": "deprecated-components-selectpanel-examples--short-select-panel",
|
|
8674
|
+
"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}"
|
|
8193
8675
|
},
|
|
8194
8676
|
{
|
|
8195
|
-
"id": "deprecated-components-selectpanel-features--instant-selection-variant"
|
|
8677
|
+
"id": "deprecated-components-selectpanel-features--instant-selection-variant",
|
|
8678
|
+
"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}"
|
|
8196
8679
|
},
|
|
8197
8680
|
{
|
|
8198
|
-
"id": "deprecated-components-selectpanel-features--with-warning"
|
|
8681
|
+
"id": "deprecated-components-selectpanel-features--with-warning",
|
|
8682
|
+
"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}"
|
|
8199
8683
|
},
|
|
8200
8684
|
{
|
|
8201
|
-
"id": "deprecated-components-selectpanel-examples--open-from-menu"
|
|
8685
|
+
"id": "deprecated-components-selectpanel-examples--open-from-menu",
|
|
8686
|
+
"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}"
|
|
8202
8687
|
},
|
|
8203
8688
|
{
|
|
8204
|
-
"id": "deprecated-components-selectpanel-examples--with-groups"
|
|
8689
|
+
"id": "deprecated-components-selectpanel-examples--with-groups",
|
|
8690
|
+
"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}"
|
|
8205
8691
|
},
|
|
8206
8692
|
{
|
|
8207
|
-
"id": "deprecated-components-selectpanel-examples--async-search-with-use-transition"
|
|
8693
|
+
"id": "deprecated-components-selectpanel-examples--async-search-with-use-transition",
|
|
8694
|
+
"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}"
|
|
8208
8695
|
},
|
|
8209
8696
|
{
|
|
8210
|
-
"id": "deprecated-components-selectpanel-examples--async-with-suspended-list"
|
|
8697
|
+
"id": "deprecated-components-selectpanel-examples--async-with-suspended-list",
|
|
8698
|
+
"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}"
|
|
8211
8699
|
},
|
|
8212
8700
|
{
|
|
8213
|
-
"id": "deprecated-components-selectpanel-examples--with-filter-buttons"
|
|
8701
|
+
"id": "deprecated-components-selectpanel-examples--with-filter-buttons",
|
|
8702
|
+
"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}"
|
|
8214
8703
|
}
|
|
8215
8704
|
],
|
|
8216
8705
|
"importPath": "@primer/react/experimental",
|
|
@@ -8403,25 +8892,32 @@
|
|
|
8403
8892
|
"a11yReviewed": "2025-01-08",
|
|
8404
8893
|
"stories": [
|
|
8405
8894
|
{
|
|
8406
|
-
"id": "experimental-components-underlinepanels--default"
|
|
8895
|
+
"id": "experimental-components-underlinepanels--default",
|
|
8896
|
+
"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}"
|
|
8407
8897
|
},
|
|
8408
8898
|
{
|
|
8409
|
-
"id": "experimental-components-underlinepanels-features--labelled-by-external-element"
|
|
8899
|
+
"id": "experimental-components-underlinepanels-features--labelled-by-external-element",
|
|
8900
|
+
"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)"
|
|
8410
8901
|
},
|
|
8411
8902
|
{
|
|
8412
|
-
"id": "experimental-components-underlinepanels-features--selected-tab"
|
|
8903
|
+
"id": "experimental-components-underlinepanels-features--selected-tab",
|
|
8904
|
+
"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)"
|
|
8413
8905
|
},
|
|
8414
8906
|
{
|
|
8415
|
-
"id": "experimental-components-underlinepanels-features--with-counters"
|
|
8907
|
+
"id": "experimental-components-underlinepanels-features--with-counters",
|
|
8908
|
+
"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}"
|
|
8416
8909
|
},
|
|
8417
8910
|
{
|
|
8418
|
-
"id": "experimental-components-underlinepanels-features--with-counters-in-loading-state"
|
|
8911
|
+
"id": "experimental-components-underlinepanels-features--with-counters-in-loading-state",
|
|
8912
|
+
"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}"
|
|
8419
8913
|
},
|
|
8420
8914
|
{
|
|
8421
|
-
"id": "experimental-components-underlinepanels-features--with-icons"
|
|
8915
|
+
"id": "experimental-components-underlinepanels-features--with-icons",
|
|
8916
|
+
"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)"
|
|
8422
8917
|
},
|
|
8423
8918
|
{
|
|
8424
|
-
"id": "experimental-components-underlinepanels-features--with-icons-hidden-on-narrow-screen"
|
|
8919
|
+
"id": "experimental-components-underlinepanels-features--with-icons-hidden-on-narrow-screen",
|
|
8920
|
+
"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)"
|
|
8425
8921
|
}
|
|
8426
8922
|
],
|
|
8427
8923
|
"importPath": "@primer/react/experimental",
|