@primer/react 37.32.0-rc.6f0aa9a4f → 37.32.0-rc.7e9c30881
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/generated/components.json +19 -19
- package/package.json +1 -1
|
@@ -989,7 +989,7 @@
|
|
|
989
989
|
"stories": [
|
|
990
990
|
{
|
|
991
991
|
"id": "components-autocomplete--default",
|
|
992
|
-
"code": "() => {\n return (\n <form\n
|
|
992
|
+
"code": "() => {\n return (\n <Box\n as=\"form\"\n sx={{\n p: 3,\n }}\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 </Box>\n )\n}"
|
|
993
993
|
},
|
|
994
994
|
{
|
|
995
995
|
"id": "components-autocomplete-features--with-token-input",
|
|
@@ -6175,7 +6175,7 @@
|
|
|
6175
6175
|
},
|
|
6176
6176
|
{
|
|
6177
6177
|
"id": "components-segmentedcontrol-features--associated-with-a-label-and-caption",
|
|
6178
|
-
"code": "() => (\n <
|
|
6178
|
+
"code": "() => (\n <Box\n display=\"flex\"\n sx={(theme) => ({\n flexDirection: 'column',\n gap: theme.space[1],\n [`@media screen and (min-width: ${theme.breakpoints[1]})`]: {\n flexDirection: 'row',\n },\n })}\n >\n <Box flexGrow={1}>\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 </Box>\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 </Box>\n)"
|
|
6179
6179
|
}
|
|
6180
6180
|
],
|
|
6181
6181
|
"importPath": "@primer/react",
|
|
@@ -8196,7 +8196,7 @@
|
|
|
8196
8196
|
},
|
|
8197
8197
|
{
|
|
8198
8198
|
"id": "components-token-features--interactive-token",
|
|
8199
|
-
"code": "() => {\n return (\n <
|
|
8199
|
+
"code": "() => {\n return (\n <Box\n display=\"flex\"\n sx={{\n alignItems: 'start',\n gap: get('space.2'),\n }}\n >\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 </Box>\n )\n}"
|
|
8200
8200
|
},
|
|
8201
8201
|
{
|
|
8202
8202
|
"id": "components-token-features--token-with-leading-visual",
|
|
@@ -8204,7 +8204,7 @@
|
|
|
8204
8204
|
},
|
|
8205
8205
|
{
|
|
8206
8206
|
"id": "components-token-features--token-with-on-remove-fn",
|
|
8207
|
-
"code": "({ ...args }) => {\n return (\n <
|
|
8207
|
+
"code": "({ ...args }) => {\n return (\n <Box\n display=\"flex\"\n sx={{\n alignItems: 'start',\n gap: get('space.2'),\n }}\n >\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 </Box>\n )\n}"
|
|
8208
8208
|
},
|
|
8209
8209
|
{
|
|
8210
8210
|
"id": "components-token-features--default-issue-label-token",
|
|
@@ -8212,11 +8212,11 @@
|
|
|
8212
8212
|
},
|
|
8213
8213
|
{
|
|
8214
8214
|
"id": "components-token-features--interactive-issue-label-token",
|
|
8215
|
-
"code": "() => {\n return (\n <
|
|
8215
|
+
"code": "() => {\n return (\n <Box\n display=\"flex\"\n sx={{\n alignItems: 'start',\n gap: get('space.2'),\n }}\n >\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 </Box>\n )\n}"
|
|
8216
8216
|
},
|
|
8217
8217
|
{
|
|
8218
8218
|
"id": "components-token-features--issue-label-token-with-on-remove-fn",
|
|
8219
|
-
"code": "() => {\n return (\n <
|
|
8219
|
+
"code": "() => {\n return (\n <Box\n display=\"flex\"\n sx={{\n alignItems: 'start',\n gap: get('space.2'),\n }}\n >\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 </Box>\n )\n}"
|
|
8220
8220
|
},
|
|
8221
8221
|
{
|
|
8222
8222
|
"id": "components-token-features--small-token",
|
|
@@ -8232,7 +8232,7 @@
|
|
|
8232
8232
|
},
|
|
8233
8233
|
{
|
|
8234
8234
|
"id": "components-token-features--issue-label-token-custom-colors",
|
|
8235
|
-
"code": "() => {\n return (\n <
|
|
8235
|
+
"code": "() => {\n return (\n <Box\n display=\"flex\"\n sx={{\n flexDirection: 'column',\n alignItems: 'start',\n gap: get('space.2'),\n }}\n >\n <Box\n display=\"flex\"\n sx={{\n alignItems: 'start',\n gap: get('space.2'),\n }}\n >\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 </Box>\n <h3>Color examples</h3>\n <Box\n display=\"flex\"\n flexWrap=\"wrap\"\n sx={{\n alignItems: 'start',\n gap: get('space.2'),\n }}\n >\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 </Box>\n </Box>\n )\n}"
|
|
8236
8236
|
}
|
|
8237
8237
|
],
|
|
8238
8238
|
"importPath": "@primer/react",
|
|
@@ -8398,15 +8398,15 @@
|
|
|
8398
8398
|
"stories": [
|
|
8399
8399
|
{
|
|
8400
8400
|
"id": "deprecated-components-tooltip--default",
|
|
8401
|
-
"code": "() => (\n <>\n <
|
|
8401
|
+
"code": "() => (\n <>\n <Box\n sx={{\n mb: 3,\n }}\n >\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 </Box>\n <Box\n sx={{\n p: 5,\n }}\n >\n <Tooltip aria-label=\"Hello, Tooltip!\">\n <Button>Hover me</Button>\n </Tooltip>\n </Box>\n </>\n)"
|
|
8402
8402
|
},
|
|
8403
8403
|
{
|
|
8404
8404
|
"id": "deprecated-components-tooltip-features--all-directions",
|
|
8405
|
-
"code": "() => (\n <
|
|
8405
|
+
"code": "() => (\n <Box\n sx={{\n padding: 5,\n display: 'flex',\n gap: '8px',\n }}\n >\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 </Box>\n)"
|
|
8406
8406
|
},
|
|
8407
8407
|
{
|
|
8408
8408
|
"id": "deprecated-components-tooltip-features--icon-button-tooltip",
|
|
8409
|
-
"code": "() => (\n <
|
|
8409
|
+
"code": "() => (\n <Box\n sx={{\n p: 5,\n }}\n >\n <Tooltip aria-label=\"Search\">\n <IconButton icon={SearchIcon} aria-label=\"Search\" />\n </Tooltip>\n </Box>\n)"
|
|
8410
8410
|
}
|
|
8411
8411
|
],
|
|
8412
8412
|
"importPath": "@primer/react/deprecated",
|
|
@@ -8455,39 +8455,39 @@
|
|
|
8455
8455
|
"stories": [
|
|
8456
8456
|
{
|
|
8457
8457
|
"id": "components-tooltipv2--default",
|
|
8458
|
-
"code": "() => (\n <
|
|
8458
|
+
"code": "() => (\n <Box\n sx={{\n p: 6,\n }}\n >\n <Tooltip text=\"This change can't be undone.\">\n <Button>Delete</Button>\n </Tooltip>\n </Box>\n)"
|
|
8459
8459
|
},
|
|
8460
8460
|
{
|
|
8461
8461
|
"id": "components-tooltipv2-features--anchor-has-margin",
|
|
8462
|
-
"code": "() => (\n <
|
|
8462
|
+
"code": "() => (\n <Box\n sx={{\n p: 5,\n }}\n >\n <Tooltip text=\"Tooltip is still centered\">\n <Button\n sx={{\n marginLeft: 3,\n }}\n >\n Button has 16px margin Left\n </Button>\n </Tooltip>\n </Box>\n)"
|
|
8463
8463
|
},
|
|
8464
8464
|
{
|
|
8465
8465
|
"id": "components-tooltipv2-features--label-type",
|
|
8466
|
-
"code": "() => (\n <
|
|
8466
|
+
"code": "() => (\n <Box>\n <Tooltip text=\"Contribution Documentation for 'Primer React'\" type=\"label\">\n <Link\n href=\"https://github.com/primer/react/contributor-docs/CONTRIBUTING.md\"\n sx={{\n ml: 1,\n color: 'fg.muted',\n }}\n >\n <Octicon\n icon={BookIcon}\n sx={{\n color: 'fg.muted',\n }}\n />\n </Link>\n </Tooltip>\n </Box>\n)"
|
|
8467
8467
|
},
|
|
8468
8468
|
{
|
|
8469
8469
|
"id": "components-tooltipv2-features--description-type",
|
|
8470
|
-
"code": "() => (\n <
|
|
8470
|
+
"code": "() => (\n <Box\n sx={{\n p: 5,\n }}\n >\n <Tooltip text=\"Supplementary text\" direction=\"n\">\n <Button>Save</Button>\n </Tooltip>\n </Box>\n)"
|
|
8471
8471
|
},
|
|
8472
8472
|
{
|
|
8473
8473
|
"id": "components-tooltipv2-features--icon-button-with-description",
|
|
8474
|
-
"code": "() => (\n <
|
|
8474
|
+
"code": "() => (\n <Box\n sx={{\n p: 5,\n }}\n >\n <Tooltip text=\"Supplementary text for icon button\" direction=\"e\">\n <IconButton icon={SearchIcon} aria-label=\"Search\" />\n </Tooltip>\n </Box>\n)"
|
|
8475
8475
|
},
|
|
8476
8476
|
{
|
|
8477
8477
|
"id": "components-tooltipv2-features--all-directions",
|
|
8478
|
-
"code": "() => (\n <
|
|
8478
|
+
"code": "() => (\n <Box\n sx={{\n padding: 5,\n display: 'flex',\n gap: '8px',\n }}\n >\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 </Box>\n)"
|
|
8479
8479
|
},
|
|
8480
8480
|
{
|
|
8481
8481
|
"id": "components-tooltipv2-features--multiline-text",
|
|
8482
|
-
"code": "() => (\n <
|
|
8482
|
+
"code": "() => (\n <Box>\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 </Box>\n)"
|
|
8483
8483
|
},
|
|
8484
8484
|
{
|
|
8485
8485
|
"id": "components-tooltipv2-features--calculated-direction",
|
|
8486
|
-
"code": "() => (\n <
|
|
8486
|
+
"code": "() => (\n <Box\n sx={{\n padding: 5,\n display: 'flex',\n gap: '8px',\n }}\n >\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 </Box>\n)"
|
|
8487
8487
|
},
|
|
8488
8488
|
{
|
|
8489
8489
|
"id": "components-tooltipv2-features--on-action-menu-anchor",
|
|
8490
|
-
"code": "() => (\n <
|
|
8490
|
+
"code": "() => (\n <Box\n sx={{\n display: 'flex',\n padding: 5,\n gap: 2,\n }}\n >\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 </Box>\n)"
|
|
8491
8491
|
}
|
|
8492
8492
|
],
|
|
8493
8493
|
"props": [
|
package/package.json
CHANGED