@primer/react 37.32.0-rc.f8e94f384 → 38.0.0-rc.0
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.
- package/CHANGELOG.md +17 -1
- package/dist/browser.esm.js +2 -2
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +2 -2
- package/dist/browser.umd.js.map +1 -1
- package/dist/components.css +4 -3
- package/generated/components.json +82 -78
- package/lib/Autocomplete/AutocompleteMenu.js +7 -7
- package/lib/CircleOcticon/CircleOcticon.d.ts +3 -0
- package/lib/CircleOcticon/CircleOcticon.d.ts.map +1 -1
- package/lib/CircleOcticon/CircleOcticon.js +3 -0
- package/lib/ConfirmationDialog/ConfirmationDialog.d.ts +8 -0
- package/lib/ConfirmationDialog/ConfirmationDialog.d.ts.map +1 -1
- package/lib/ConfirmationDialog/ConfirmationDialog.js +6 -2
- package/lib/ProgressBar/ProgressBar-a0957632.css +2 -0
- package/lib/ProgressBar/ProgressBar-a0957632.css.map +1 -0
- package/lib/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/lib/ProgressBar/ProgressBar.js +53 -49
- package/lib/ProgressBar/ProgressBar.module.css.js +1 -1
- package/{lib-esm/Radio/Radio-b2a92b7d.css → lib/Radio/Radio-df9a5c02.css} +2 -2
- package/{lib-esm/Radio/Radio-b2a92b7d.css.map → lib/Radio/Radio-df9a5c02.css.map} +1 -1
- package/lib/Radio/Radio.module.css.js +1 -1
- package/lib/Select/Select.js +61 -53
- package/lib/SelectPanel/SelectPanel.js +2 -2
- package/lib/SubNav/SubNav.d.ts +8 -16
- package/lib/SubNav/SubNav.d.ts.map +1 -1
- package/lib/SubNav/SubNav.js +3 -6
- package/lib-esm/Autocomplete/AutocompleteMenu.js +1 -1
- package/lib-esm/CircleOcticon/CircleOcticon.d.ts +3 -0
- package/lib-esm/CircleOcticon/CircleOcticon.js +3 -0
- package/lib-esm/ConfirmationDialog/ConfirmationDialog.d.ts +8 -0
- package/lib-esm/ConfirmationDialog/ConfirmationDialog.js +6 -2
- package/lib-esm/ProgressBar/ProgressBar-a0957632.css +2 -0
- package/lib-esm/ProgressBar/ProgressBar-a0957632.css.map +1 -0
- package/lib-esm/ProgressBar/ProgressBar.js +53 -49
- package/lib-esm/ProgressBar/ProgressBar.module.css.js +1 -1
- package/{lib/Radio/Radio-b2a92b7d.css → lib-esm/Radio/Radio-df9a5c02.css} +2 -2
- package/{lib/Radio/Radio-b2a92b7d.css.map → lib-esm/Radio/Radio-df9a5c02.css.map} +1 -1
- package/lib-esm/Radio/Radio.module.css.js +1 -1
- package/lib-esm/Select/Select.js +61 -53
- package/lib-esm/SelectPanel/SelectPanel.js +1 -1
- package/lib-esm/SubNav/SubNav.d.ts +8 -16
- package/lib-esm/SubNav/SubNav.js +3 -6
- package/package.json +3 -4
- package/lib/ProgressBar/ProgressBar-430cdef7.css +0 -2
- package/lib/ProgressBar/ProgressBar-430cdef7.css.map +0 -1
- package/lib/node_modules/@github/mini-throttle/dist/index.js +0 -43
- package/lib-esm/ProgressBar/ProgressBar-430cdef7.css +0 -2
- package/lib-esm/ProgressBar/ProgressBar-430cdef7.css.map +0 -1
- package/lib-esm/node_modules/@github/mini-throttle/dist/index.js +0 -40
|
@@ -989,7 +989,7 @@
|
|
|
989
989
|
"stories": [
|
|
990
990
|
{
|
|
991
991
|
"id": "components-autocomplete--default",
|
|
992
|
-
"code": "() => {\n return (\n <
|
|
992
|
+
"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}"
|
|
993
993
|
},
|
|
994
994
|
{
|
|
995
995
|
"id": "components-autocomplete-features--with-token-input",
|
|
@@ -2161,19 +2161,19 @@
|
|
|
2161
2161
|
},
|
|
2162
2162
|
{
|
|
2163
2163
|
"id": "components-checkbox-features--with-leading-visual",
|
|
2164
|
-
"code": "() => {\n return (\n <
|
|
2164
|
+
"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}"
|
|
2165
2165
|
},
|
|
2166
2166
|
{
|
|
2167
2167
|
"id": "components-checkbox-features--disabled",
|
|
2168
|
-
"code": "() => {\n return (\n <
|
|
2168
|
+
"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}"
|
|
2169
2169
|
},
|
|
2170
2170
|
{
|
|
2171
2171
|
"id": "components-checkbox-features--with-caption",
|
|
2172
|
-
"code": "() => {\n return (\n <
|
|
2172
|
+
"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}"
|
|
2173
2173
|
},
|
|
2174
2174
|
{
|
|
2175
2175
|
"id": "components-checkbox-features--indeterminate",
|
|
2176
|
-
"code": "() => (\n <
|
|
2176
|
+
"code": "() => (\n <form>\n <FormControl>\n <Checkbox value=\"default\" indeterminate />\n <FormControl.Label>Default label</FormControl.Label>\n </FormControl>\n </form>\n)"
|
|
2177
2177
|
}
|
|
2178
2178
|
],
|
|
2179
2179
|
"importPath": "@primer/react",
|
|
@@ -2440,11 +2440,11 @@
|
|
|
2440
2440
|
"source": "https://github.com/primer/react/tree/main/packages/react/src/CircleOcticon",
|
|
2441
2441
|
"id": "circle_octicon",
|
|
2442
2442
|
"name": "CircleOcticon",
|
|
2443
|
-
"status": "
|
|
2443
|
+
"status": "deprecated",
|
|
2444
2444
|
"a11yReviewed": "2025-01-08",
|
|
2445
2445
|
"stories": [
|
|
2446
2446
|
{
|
|
2447
|
-
"id": "components-circleocticon--default",
|
|
2447
|
+
"id": "deprecated-components-circleocticon--default",
|
|
2448
2448
|
"code": "() => (\n <CircleOcticon\n icon={CheckIcon}\n size={32}\n sx={{\n backgroundColor: 'success.emphasis',\n color: 'fg.onEmphasis',\n }}\n aria-label=\"Changes approved\"\n />\n)"
|
|
2449
2449
|
}
|
|
2450
2450
|
],
|
|
@@ -2488,6 +2488,10 @@
|
|
|
2488
2488
|
{
|
|
2489
2489
|
"id": "components-confirmationdialog-features--shorthand-hook-from-action-menu",
|
|
2490
2490
|
"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}"
|
|
2491
|
+
},
|
|
2492
|
+
{
|
|
2493
|
+
"id": "components-confirmationdialog-features--loading-states",
|
|
2494
|
+
"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}"
|
|
2491
2495
|
}
|
|
2492
2496
|
],
|
|
2493
2497
|
"props": [
|
|
@@ -5661,15 +5665,15 @@
|
|
|
5661
5665
|
},
|
|
5662
5666
|
{
|
|
5663
5667
|
"id": "components-progressbar-features--inline",
|
|
5664
|
-
"code": "() => (\n <ProgressBar\n inline\n progress=\"66\"\n
|
|
5668
|
+
"code": "() => (\n <ProgressBar\n inline\n progress=\"66\"\n style={{\n width: '100px',\n }}\n aria-label=\"Upload test.png\"\n />\n)"
|
|
5665
5669
|
},
|
|
5666
5670
|
{
|
|
5667
|
-
"id": "components-progressbar-features--
|
|
5668
|
-
"code": "() => (\n <ProgressBar progress=\"
|
|
5671
|
+
"id": "components-progressbar-features--all-colors",
|
|
5672
|
+
"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)"
|
|
5669
5673
|
},
|
|
5670
5674
|
{
|
|
5671
5675
|
"id": "components-progressbar-features--multiple-items",
|
|
5672
|
-
"code": "() => (\n <ProgressBar>\n <ProgressBar.Item\n progress={33}\n aria-label=\"Photo Usage\"\n
|
|
5676
|
+
"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)"
|
|
5673
5677
|
},
|
|
5674
5678
|
{
|
|
5675
5679
|
"id": "components-progressbar-features--animated",
|
|
@@ -6175,7 +6179,7 @@
|
|
|
6175
6179
|
},
|
|
6176
6180
|
{
|
|
6177
6181
|
"id": "components-segmentedcontrol-features--associated-with-a-label-and-caption",
|
|
6178
|
-
"code": "() => (\n <
|
|
6182
|
+
"code": "() => (\n <div className={classes.LabelAndCaptionContainer}>\n <div className={classes.LabelAndCaption}>\n <Text fontSize={2} fontWeight=\"bold\" id=\"scLabel-vert\" display=\"block\">\n File view\n </Text>\n <Text color=\"fg.subtle\" fontSize={1} id=\"scCaption-vert\" display=\"block\">\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)"
|
|
6179
6183
|
}
|
|
6180
6184
|
],
|
|
6181
6185
|
"importPath": "@primer/react",
|
|
@@ -6334,51 +6338,51 @@
|
|
|
6334
6338
|
"stories": [
|
|
6335
6339
|
{
|
|
6336
6340
|
"id": "components-select--default",
|
|
6337
|
-
"code": "() => (\n <
|
|
6341
|
+
"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)"
|
|
6338
6342
|
},
|
|
6339
6343
|
{
|
|
6340
6344
|
"id": "components-select-features--with-option-groups",
|
|
6341
|
-
"code": "() => (\n <
|
|
6345
|
+
"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)"
|
|
6342
6346
|
},
|
|
6343
6347
|
{
|
|
6344
6348
|
"id": "components-select-features--disabled",
|
|
6345
|
-
"code": "() => (\n <
|
|
6349
|
+
"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)"
|
|
6346
6350
|
},
|
|
6347
6351
|
{
|
|
6348
6352
|
"id": "components-select-features--with-caption",
|
|
6349
|
-
"code": "() => (\n <
|
|
6353
|
+
"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)"
|
|
6350
6354
|
},
|
|
6351
6355
|
{
|
|
6352
6356
|
"id": "components-select-features--visually-hidden-label",
|
|
6353
|
-
"code": "() => (\n <
|
|
6357
|
+
"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)"
|
|
6354
6358
|
},
|
|
6355
6359
|
{
|
|
6356
6360
|
"id": "components-select-features--error",
|
|
6357
|
-
"code": "() => (\n <
|
|
6361
|
+
"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)"
|
|
6358
6362
|
},
|
|
6359
6363
|
{
|
|
6360
6364
|
"id": "components-select-features--success",
|
|
6361
|
-
"code": "() => (\n <
|
|
6365
|
+
"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)"
|
|
6362
6366
|
},
|
|
6363
6367
|
{
|
|
6364
6368
|
"id": "components-select-features--block",
|
|
6365
|
-
"code": "() => (\n <
|
|
6369
|
+
"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)"
|
|
6366
6370
|
},
|
|
6367
6371
|
{
|
|
6368
6372
|
"id": "components-select-features--small",
|
|
6369
|
-
"code": "() => (\n <
|
|
6373
|
+
"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)"
|
|
6370
6374
|
},
|
|
6371
6375
|
{
|
|
6372
6376
|
"id": "components-select-features--large",
|
|
6373
|
-
"code": "() => (\n <
|
|
6377
|
+
"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)"
|
|
6374
6378
|
},
|
|
6375
6379
|
{
|
|
6376
6380
|
"id": "components-select-features--with-custom-styling",
|
|
6377
|
-
"code": "() => (\n <
|
|
6381
|
+
"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)"
|
|
6378
6382
|
},
|
|
6379
6383
|
{
|
|
6380
6384
|
"id": "components-select-features--with-placeholder-option",
|
|
6381
|
-
"code": "() => (\n <
|
|
6385
|
+
"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)"
|
|
6382
6386
|
}
|
|
6383
6387
|
],
|
|
6384
6388
|
"importPath": "@primer/react",
|
|
@@ -6836,7 +6840,7 @@
|
|
|
6836
6840
|
},
|
|
6837
6841
|
{
|
|
6838
6842
|
"id": "components-spinner-features--suppress-screen-reader-text",
|
|
6839
|
-
"code": "() => (\n <
|
|
6843
|
+
"code": "() => (\n <Stack direction=\"horizontal\" className={classes.SuppressScreenReaderText}>\n <Spinner size=\"small\" srText={null} />\n <AriaStatus>Loading...</AriaStatus>\n </Stack>\n)"
|
|
6840
6844
|
}
|
|
6841
6845
|
],
|
|
6842
6846
|
"importPath": "@primer/react",
|
|
@@ -6889,7 +6893,7 @@
|
|
|
6889
6893
|
},
|
|
6890
6894
|
{
|
|
6891
6895
|
"id": "components-splitpagelayout-features--settings-page",
|
|
6892
|
-
"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
|
|
6896
|
+
"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)"
|
|
6893
6897
|
}
|
|
6894
6898
|
],
|
|
6895
6899
|
"importPath": "@primer/react",
|
|
@@ -7419,11 +7423,11 @@
|
|
|
7419
7423
|
},
|
|
7420
7424
|
{
|
|
7421
7425
|
"id": "components-text-features--polymorphism",
|
|
7422
|
-
"code": "() => (\n <
|
|
7426
|
+
"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)"
|
|
7423
7427
|
},
|
|
7424
7428
|
{
|
|
7425
7429
|
"id": "components-text-features--styled-text",
|
|
7426
|
-
"code": "() => (\n <Text
|
|
7430
|
+
"code": "() => (\n <Text as=\"p\" className={classes.StyledText} size=\"small\">\n Stylized text\n </Text>\n)"
|
|
7427
7431
|
},
|
|
7428
7432
|
{
|
|
7429
7433
|
"id": "components-text-features--size-small",
|
|
@@ -7490,67 +7494,67 @@
|
|
|
7490
7494
|
"stories": [
|
|
7491
7495
|
{
|
|
7492
7496
|
"id": "components-textinput--default",
|
|
7493
|
-
"code": "() => (\n <
|
|
7497
|
+
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput />\n </FormControl>\n </form>\n)"
|
|
7494
7498
|
},
|
|
7495
7499
|
{
|
|
7496
7500
|
"id": "components-textinput-features--disabled",
|
|
7497
|
-
"code": "() => (\n <
|
|
7501
|
+
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput disabled />\n </FormControl>\n </form>\n)"
|
|
7498
7502
|
},
|
|
7499
7503
|
{
|
|
7500
7504
|
"id": "components-textinput-features--with-caption",
|
|
7501
|
-
"code": "() => (\n <
|
|
7505
|
+
"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)"
|
|
7502
7506
|
},
|
|
7503
7507
|
{
|
|
7504
7508
|
"id": "components-textinput-features--visually-hidden-label",
|
|
7505
|
-
"code": "() => (\n <
|
|
7509
|
+
"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)"
|
|
7506
7510
|
},
|
|
7507
7511
|
{
|
|
7508
7512
|
"id": "components-textinput-features--error",
|
|
7509
|
-
"code": "() => (\n <
|
|
7513
|
+
"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)"
|
|
7510
7514
|
},
|
|
7511
7515
|
{
|
|
7512
7516
|
"id": "components-textinput-features--success",
|
|
7513
|
-
"code": "() => (\n <
|
|
7517
|
+
"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)"
|
|
7514
7518
|
},
|
|
7515
7519
|
{
|
|
7516
7520
|
"id": "components-textinput-features--block",
|
|
7517
|
-
"code": "() => (\n <
|
|
7521
|
+
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput block />\n </FormControl>\n </form>\n)"
|
|
7518
7522
|
},
|
|
7519
7523
|
{
|
|
7520
7524
|
"id": "components-textinput-features--small",
|
|
7521
|
-
"code": "() => (\n <
|
|
7525
|
+
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput size=\"small\" />\n </FormControl>\n </form>\n)"
|
|
7522
7526
|
},
|
|
7523
7527
|
{
|
|
7524
7528
|
"id": "components-textinput-features--large",
|
|
7525
|
-
"code": "() => (\n <
|
|
7529
|
+
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput size=\"large\" />\n </FormControl>\n </form>\n)"
|
|
7526
7530
|
},
|
|
7527
7531
|
{
|
|
7528
7532
|
"id": "components-textinput-features--required",
|
|
7529
|
-
"code": "() => (\n <
|
|
7533
|
+
"code": "() => (\n <form>\n <FormControl required>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput size=\"large\" />\n </FormControl>\n </form>\n)"
|
|
7530
7534
|
},
|
|
7531
7535
|
{
|
|
7532
7536
|
"id": "components-textinput-features--with-leading-visual",
|
|
7533
|
-
"code": "() => {\n const Checkmark = () => <CheckIcon aria-label=\"Checkmark\" />\n return (\n <
|
|
7537
|
+
"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}"
|
|
7534
7538
|
},
|
|
7535
7539
|
{
|
|
7536
7540
|
"id": "components-textinput-features--with-trailing-icon",
|
|
7537
|
-
"code": "() => {\n const Checkmark = () => <CheckIcon aria-label=\"Checkmark\" />\n return (\n <
|
|
7541
|
+
"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}"
|
|
7538
7542
|
},
|
|
7539
7543
|
{
|
|
7540
7544
|
"id": "components-textinput-features--with-trailing-action",
|
|
7541
|
-
"code": "() => {\n const [value, setValue] = useState('sample text')\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value)\n }\n return (\n <
|
|
7545
|
+
"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}"
|
|
7542
7546
|
},
|
|
7543
7547
|
{
|
|
7544
7548
|
"id": "components-textinput-features--with-tooltip-direction",
|
|
7545
|
-
"code": "() => {\n const [value, setValue] = useState('sample text')\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value)\n }\n return (\n <
|
|
7549
|
+
"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}"
|
|
7546
7550
|
},
|
|
7547
7551
|
{
|
|
7548
7552
|
"id": "components-textinput-features--with-loading-indicator",
|
|
7549
|
-
"code": "(args: FormControlArgs<TextInputProps>) => {\n return (\n <
|
|
7553
|
+
"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}"
|
|
7550
7554
|
},
|
|
7551
7555
|
{
|
|
7552
7556
|
"id": "components-textinput-features--with-autocomplete-attribute",
|
|
7553
|
-
"code": "() => (\n <
|
|
7557
|
+
"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)"
|
|
7554
7558
|
}
|
|
7555
7559
|
],
|
|
7556
7560
|
"importPath": "@primer/react",
|
|
@@ -7750,31 +7754,31 @@
|
|
|
7750
7754
|
},
|
|
7751
7755
|
{
|
|
7752
7756
|
"id": "components-textinputwithtokens-features--with-loading-indicator",
|
|
7753
|
-
"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 <
|
|
7757
|
+
"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}"
|
|
7754
7758
|
},
|
|
7755
7759
|
{
|
|
7756
7760
|
"id": "components-textinputwithtokens-features--using-issue-label-tokens",
|
|
7757
|
-
"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 <
|
|
7761
|
+
"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}"
|
|
7758
7762
|
},
|
|
7759
7763
|
{
|
|
7760
7764
|
"id": "components-textinputwithtokens-features--unstyled",
|
|
7761
|
-
"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 <
|
|
7765
|
+
"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}"
|
|
7762
7766
|
},
|
|
7763
7767
|
{
|
|
7764
7768
|
"id": "components-textinputwithtokens-features--prevent-tokens-from-wrapping",
|
|
7765
|
-
"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 <
|
|
7769
|
+
"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}"
|
|
7766
7770
|
},
|
|
7767
7771
|
{
|
|
7768
7772
|
"id": "components-textinputwithtokens-features--max-height",
|
|
7769
|
-
"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 <
|
|
7773
|
+
"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}"
|
|
7770
7774
|
},
|
|
7771
7775
|
{
|
|
7772
7776
|
"id": "components-textinputwithtokens-features--size",
|
|
7773
|
-
"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 <
|
|
7777
|
+
"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}"
|
|
7774
7778
|
},
|
|
7775
7779
|
{
|
|
7776
7780
|
"id": "components-textinputwithtokens-features--truncated",
|
|
7777
|
-
"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 <
|
|
7781
|
+
"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}"
|
|
7778
7782
|
}
|
|
7779
7783
|
],
|
|
7780
7784
|
"importPath": "@primer/react",
|
|
@@ -7851,39 +7855,39 @@
|
|
|
7851
7855
|
"stories": [
|
|
7852
7856
|
{
|
|
7853
7857
|
"id": "components-textarea--default",
|
|
7854
|
-
"code": "() => (\n <
|
|
7858
|
+
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea />\n </FormControl>\n </form>\n)"
|
|
7855
7859
|
},
|
|
7856
7860
|
{
|
|
7857
7861
|
"id": "components-textarea-features--disabled",
|
|
7858
|
-
"code": "() => (\n <
|
|
7862
|
+
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea disabled />\n </FormControl>\n </form>\n)"
|
|
7859
7863
|
},
|
|
7860
7864
|
{
|
|
7861
7865
|
"id": "components-textarea-features--with-caption",
|
|
7862
|
-
"code": "() => (\n <
|
|
7866
|
+
"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)"
|
|
7863
7867
|
},
|
|
7864
7868
|
{
|
|
7865
7869
|
"id": "components-textarea-features--visually-hidden-label",
|
|
7866
|
-
"code": "() => (\n <
|
|
7870
|
+
"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)"
|
|
7867
7871
|
},
|
|
7868
7872
|
{
|
|
7869
7873
|
"id": "components-textarea-features--error",
|
|
7870
|
-
"code": "() => (\n <
|
|
7874
|
+
"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)"
|
|
7871
7875
|
},
|
|
7872
7876
|
{
|
|
7873
7877
|
"id": "components-textarea-features--success",
|
|
7874
|
-
"code": "() => (\n <
|
|
7878
|
+
"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)"
|
|
7875
7879
|
},
|
|
7876
7880
|
{
|
|
7877
7881
|
"id": "components-textarea-features--block",
|
|
7878
|
-
"code": "() => (\n <
|
|
7882
|
+
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea block />\n </FormControl>\n </form>\n)"
|
|
7879
7883
|
},
|
|
7880
7884
|
{
|
|
7881
7885
|
"id": "components-textarea-features--custom-height",
|
|
7882
|
-
"code": "() => (\n <
|
|
7886
|
+
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea rows={3} />\n </FormControl>\n </form>\n)"
|
|
7883
7887
|
},
|
|
7884
7888
|
{
|
|
7885
7889
|
"id": "components-textarea-features--custom-width",
|
|
7886
|
-
"code": "() => (\n <
|
|
7890
|
+
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea cols={60} />\n </FormControl>\n </form>\n)"
|
|
7887
7891
|
},
|
|
7888
7892
|
{
|
|
7889
7893
|
"id": "components-textarea-features--custom-resize-behavior",
|
|
@@ -8196,7 +8200,7 @@
|
|
|
8196
8200
|
},
|
|
8197
8201
|
{
|
|
8198
8202
|
"id": "components-token-features--interactive-token",
|
|
8199
|
-
"code": "() => {\n return (\n <
|
|
8203
|
+
"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}"
|
|
8200
8204
|
},
|
|
8201
8205
|
{
|
|
8202
8206
|
"id": "components-token-features--token-with-leading-visual",
|
|
@@ -8204,7 +8208,7 @@
|
|
|
8204
8208
|
},
|
|
8205
8209
|
{
|
|
8206
8210
|
"id": "components-token-features--token-with-on-remove-fn",
|
|
8207
|
-
"code": "({ ...args }) => {\n return (\n <
|
|
8211
|
+
"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}"
|
|
8208
8212
|
},
|
|
8209
8213
|
{
|
|
8210
8214
|
"id": "components-token-features--default-issue-label-token",
|
|
@@ -8212,11 +8216,11 @@
|
|
|
8212
8216
|
},
|
|
8213
8217
|
{
|
|
8214
8218
|
"id": "components-token-features--interactive-issue-label-token",
|
|
8215
|
-
"code": "() => {\n return (\n <
|
|
8219
|
+
"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}"
|
|
8216
8220
|
},
|
|
8217
8221
|
{
|
|
8218
8222
|
"id": "components-token-features--issue-label-token-with-on-remove-fn",
|
|
8219
|
-
"code": "() => {\n return (\n <
|
|
8223
|
+
"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}"
|
|
8220
8224
|
},
|
|
8221
8225
|
{
|
|
8222
8226
|
"id": "components-token-features--small-token",
|
|
@@ -8232,7 +8236,7 @@
|
|
|
8232
8236
|
},
|
|
8233
8237
|
{
|
|
8234
8238
|
"id": "components-token-features--issue-label-token-custom-colors",
|
|
8235
|
-
"code": "() => {\n return (\n <
|
|
8239
|
+
"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}"
|
|
8236
8240
|
}
|
|
8237
8241
|
],
|
|
8238
8242
|
"importPath": "@primer/react",
|
|
@@ -8398,15 +8402,15 @@
|
|
|
8398
8402
|
"stories": [
|
|
8399
8403
|
{
|
|
8400
8404
|
"id": "deprecated-components-tooltip--default",
|
|
8401
|
-
"code": "() => (\n <>\n <
|
|
8405
|
+
"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)"
|
|
8402
8406
|
},
|
|
8403
8407
|
{
|
|
8404
8408
|
"id": "deprecated-components-tooltip-features--all-directions",
|
|
8405
|
-
"code": "() => (\n <
|
|
8409
|
+
"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)"
|
|
8406
8410
|
},
|
|
8407
8411
|
{
|
|
8408
8412
|
"id": "deprecated-components-tooltip-features--icon-button-tooltip",
|
|
8409
|
-
"code": "() => (\n <
|
|
8413
|
+
"code": "() => (\n <div className={classes.PaddedContainer}>\n <Tooltip aria-label=\"Search\">\n <IconButton icon={SearchIcon} aria-label=\"Search\" />\n </Tooltip>\n </div>\n)"
|
|
8410
8414
|
}
|
|
8411
8415
|
],
|
|
8412
8416
|
"importPath": "@primer/react/deprecated",
|
|
@@ -8455,39 +8459,39 @@
|
|
|
8455
8459
|
"stories": [
|
|
8456
8460
|
{
|
|
8457
8461
|
"id": "components-tooltipv2--default",
|
|
8458
|
-
"code": "() => (\n <
|
|
8462
|
+
"code": "() => (\n <div className={classes.PaddedContainer}>\n <Tooltip text=\"This change can't be undone.\">\n <Button>Delete</Button>\n </Tooltip>\n </div>\n)"
|
|
8459
8463
|
},
|
|
8460
8464
|
{
|
|
8461
8465
|
"id": "components-tooltipv2-features--anchor-has-margin",
|
|
8462
|
-
"code": "() => (\n <
|
|
8466
|
+
"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)"
|
|
8463
8467
|
},
|
|
8464
8468
|
{
|
|
8465
8469
|
"id": "components-tooltipv2-features--label-type",
|
|
8466
|
-
"code": "() => (\n <
|
|
8470
|
+
"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)"
|
|
8467
8471
|
},
|
|
8468
8472
|
{
|
|
8469
8473
|
"id": "components-tooltipv2-features--description-type",
|
|
8470
|
-
"code": "() => (\n <
|
|
8474
|
+
"code": "() => (\n <div className={classes.PaddedContainer}>\n <Tooltip text=\"Supplementary text\" direction=\"n\">\n <Button>Save</Button>\n </Tooltip>\n </div>\n)"
|
|
8471
8475
|
},
|
|
8472
8476
|
{
|
|
8473
8477
|
"id": "components-tooltipv2-features--icon-button-with-description",
|
|
8474
|
-
"code": "() => (\n <
|
|
8478
|
+
"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)"
|
|
8475
8479
|
},
|
|
8476
8480
|
{
|
|
8477
8481
|
"id": "components-tooltipv2-features--all-directions",
|
|
8478
|
-
"code": "() => (\n <
|
|
8482
|
+
"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)"
|
|
8479
8483
|
},
|
|
8480
8484
|
{
|
|
8481
8485
|
"id": "components-tooltipv2-features--multiline-text",
|
|
8482
|
-
"code": "() => (\n <
|
|
8486
|
+
"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)"
|
|
8483
8487
|
},
|
|
8484
8488
|
{
|
|
8485
8489
|
"id": "components-tooltipv2-features--calculated-direction",
|
|
8486
|
-
"code": "() => (\n <
|
|
8490
|
+
"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)"
|
|
8487
8491
|
},
|
|
8488
8492
|
{
|
|
8489
8493
|
"id": "components-tooltipv2-features--on-action-menu-anchor",
|
|
8490
|
-
"code": "() => (\n <
|
|
8494
|
+
"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)"
|
|
8491
8495
|
}
|
|
8492
8496
|
],
|
|
8493
8497
|
"props": [
|
|
@@ -8555,7 +8559,7 @@
|
|
|
8555
8559
|
},
|
|
8556
8560
|
{
|
|
8557
8561
|
"id": "components-treeview-features--controlled",
|
|
8558
|
-
"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 <
|
|
8562
|
+
"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}"
|
|
8559
8563
|
}
|
|
8560
8564
|
],
|
|
8561
8565
|
"importPath": "@primer/react",
|