@primer/react 37.32.0-rc.f648ca0d1 → 37.32.0-rc.f8e94f384
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 +53 -53
- package/package.json +3 -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",
|
|
@@ -7419,11 +7419,11 @@
|
|
|
7419
7419
|
},
|
|
7420
7420
|
{
|
|
7421
7421
|
"id": "components-text-features--polymorphism",
|
|
7422
|
-
"code": "() => (\n <
|
|
7422
|
+
"code": "() => (\n <Box\n sx={{\n display: 'flex',\n flexDirection: 'column',\n }}\n >\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 </Box>\n)"
|
|
7423
7423
|
},
|
|
7424
7424
|
{
|
|
7425
7425
|
"id": "components-text-features--styled-text",
|
|
7426
|
-
"code": "() => (\n <Text
|
|
7426
|
+
"code": "() => (\n <Text\n as=\"p\"\n sx={{\n color: 'fg.onEmphasis',\n bg: 'neutral.emphasis',\n p: 2,\n }}\n size=\"small\"\n >\n Stylized text\n </Text>\n)"
|
|
7427
7427
|
},
|
|
7428
7428
|
{
|
|
7429
7429
|
"id": "components-text-features--size-small",
|
|
@@ -7490,67 +7490,67 @@
|
|
|
7490
7490
|
"stories": [
|
|
7491
7491
|
{
|
|
7492
7492
|
"id": "components-textinput--default",
|
|
7493
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput />\n </FormControl>\n </
|
|
7493
|
+
"code": "() => (\n <Box as=\"form\">\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput />\n </FormControl>\n </Box>\n)"
|
|
7494
7494
|
},
|
|
7495
7495
|
{
|
|
7496
7496
|
"id": "components-textinput-features--disabled",
|
|
7497
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput disabled />\n </FormControl>\n </
|
|
7497
|
+
"code": "() => (\n <Box as=\"form\">\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput disabled />\n </FormControl>\n </Box>\n)"
|
|
7498
7498
|
},
|
|
7499
7499
|
{
|
|
7500
7500
|
"id": "components-textinput-features--with-caption",
|
|
7501
|
-
"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 </
|
|
7501
|
+
"code": "() => (\n <Box as=\"form\">\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <FormControl.Caption>This is a caption</FormControl.Caption>\n <TextInput />\n </FormControl>\n </Box>\n)"
|
|
7502
7502
|
},
|
|
7503
7503
|
{
|
|
7504
7504
|
"id": "components-textinput-features--visually-hidden-label",
|
|
7505
|
-
"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 </
|
|
7505
|
+
"code": "() => (\n <Box as=\"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 </Box>\n)"
|
|
7506
7506
|
},
|
|
7507
7507
|
{
|
|
7508
7508
|
"id": "components-textinput-features--error",
|
|
7509
|
-
"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 </
|
|
7509
|
+
"code": "() => (\n <Box as=\"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 </Box>\n)"
|
|
7510
7510
|
},
|
|
7511
7511
|
{
|
|
7512
7512
|
"id": "components-textinput-features--success",
|
|
7513
|
-
"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 </
|
|
7513
|
+
"code": "() => (\n <Box as=\"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 </Box>\n)"
|
|
7514
7514
|
},
|
|
7515
7515
|
{
|
|
7516
7516
|
"id": "components-textinput-features--block",
|
|
7517
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput block />\n </FormControl>\n </
|
|
7517
|
+
"code": "() => (\n <Box as=\"form\">\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput block />\n </FormControl>\n </Box>\n)"
|
|
7518
7518
|
},
|
|
7519
7519
|
{
|
|
7520
7520
|
"id": "components-textinput-features--small",
|
|
7521
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput size=\"small\" />\n </FormControl>\n </
|
|
7521
|
+
"code": "() => (\n <Box as=\"form\">\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput size=\"small\" />\n </FormControl>\n </Box>\n)"
|
|
7522
7522
|
},
|
|
7523
7523
|
{
|
|
7524
7524
|
"id": "components-textinput-features--large",
|
|
7525
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput size=\"large\" />\n </FormControl>\n </
|
|
7525
|
+
"code": "() => (\n <Box as=\"form\">\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput size=\"large\" />\n </FormControl>\n </Box>\n)"
|
|
7526
7526
|
},
|
|
7527
7527
|
{
|
|
7528
7528
|
"id": "components-textinput-features--required",
|
|
7529
|
-
"code": "() => (\n <form>\n <FormControl required>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput size=\"large\" />\n </FormControl>\n </
|
|
7529
|
+
"code": "() => (\n <Box as=\"form\">\n <FormControl required>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput size=\"large\" />\n </FormControl>\n </Box>\n)"
|
|
7530
7530
|
},
|
|
7531
7531
|
{
|
|
7532
7532
|
"id": "components-textinput-features--with-leading-visual",
|
|
7533
|
-
"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 </
|
|
7533
|
+
"code": "() => {\n const Checkmark = () => <CheckIcon aria-label=\"Checkmark\" />\n return (\n <Box as=\"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 </Box>\n )\n}"
|
|
7534
7534
|
},
|
|
7535
7535
|
{
|
|
7536
7536
|
"id": "components-textinput-features--with-trailing-icon",
|
|
7537
|
-
"code": "() => {\n const Checkmark = () => <CheckIcon aria-label=\"Checkmark\" />\n return (\n <
|
|
7537
|
+
"code": "() => {\n const Checkmark = () => <CheckIcon aria-label=\"Checkmark\" />\n return (\n <Box>\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 </Box>\n )\n}"
|
|
7538
7538
|
},
|
|
7539
7539
|
{
|
|
7540
7540
|
"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 <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 </
|
|
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 <Box as=\"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 </Box>\n )\n}"
|
|
7542
7542
|
},
|
|
7543
7543
|
{
|
|
7544
7544
|
"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 <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 </
|
|
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 <Box as=\"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 </Box>\n )\n}"
|
|
7546
7546
|
},
|
|
7547
7547
|
{
|
|
7548
7548
|
"id": "components-textinput-features--with-loading-indicator",
|
|
7549
|
-
"code": "(args: FormControlArgs<TextInputProps>) => {\n return (\n <
|
|
7549
|
+
"code": "(args: FormControlArgs<TextInputProps>) => {\n return (\n <Box as=\"form\">\n <h3>No visual</h3>\n\n <Box mb={2}>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput value=\"auto\" {...args} />\n </FormControl>\n </Box>\n <Box mb={2}>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput value=\"leading\" {...args} loaderPosition=\"leading\" />\n </FormControl>\n </Box>\n <Box mb={5}>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput value=\"trailing\" {...args} loaderPosition=\"trailing\" />\n </FormControl>\n </Box>\n\n <h3>Leading visual</h3>\n\n <Box mb={2}>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput leadingVisual={Calendar} {...args} value=\"auto\" />\n </FormControl>\n </Box>\n <Box mb={2}>\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 </Box>\n <Box mb={5}>\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 </Box>\n\n <h3>Trailing visual</h3>\n <FormControl>\n <Box mb={2}>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInput trailingVisual={Calendar} {...args} value=\"auto\" />\n </FormControl>\n </Box>\n <Box mb={2}>\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 </Box>\n <Box mb={5}>\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 </Box>\n </FormControl>\n\n <h3>Both visuals</h3>\n\n <Box mb={2}>\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 </Box>\n <Box mb={2}>\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 </Box>\n <Box mb={2}>\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 </Box>\n </Box>\n )\n}"
|
|
7550
7550
|
},
|
|
7551
7551
|
{
|
|
7552
7552
|
"id": "components-textinput-features--with-autocomplete-attribute",
|
|
7553
|
-
"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 </
|
|
7553
|
+
"code": "() => (\n <Box as=\"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 </Box>\n)"
|
|
7554
7554
|
}
|
|
7555
7555
|
],
|
|
7556
7556
|
"importPath": "@primer/react",
|
|
@@ -7750,31 +7750,31 @@
|
|
|
7750
7750
|
},
|
|
7751
7751
|
{
|
|
7752
7752
|
"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 <
|
|
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 <Box\n display=\"grid\"\n sx={{\n gap: 3,\n }}\n as=\"form\"\n >\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 </Box>\n )\n}"
|
|
7754
7754
|
},
|
|
7755
7755
|
{
|
|
7756
7756
|
"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 <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 </
|
|
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 <Box as=\"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 </Box>\n )\n}"
|
|
7758
7758
|
},
|
|
7759
7759
|
{
|
|
7760
7760
|
"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 <form>\n <FormControl>\n <FormControl.Label visuallyHidden>Default label</FormControl.Label>\n <TextInputWithTokens\n tokens={tokens}\n onTokenRemove={onTokenRemove}\n
|
|
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 <Box as=\"form\">\n <FormControl>\n <FormControl.Label visuallyHidden>Default label</FormControl.Label>\n <TextInputWithTokens\n tokens={tokens}\n onTokenRemove={onTokenRemove}\n sx={{\n border: '0',\n padding: '0',\n boxShadow: 'none',\n ':focus-within': {\n border: '0',\n boxShadow: 'none',\n },\n }}\n />\n </FormControl>\n </Box>\n )\n}"
|
|
7762
7762
|
},
|
|
7763
7763
|
{
|
|
7764
7764
|
"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 <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInputWithTokens\n tokens={tokens}\n onTokenRemove={onTokenRemove}\n preventTokenWrapping\n />\n </FormControl>\n </
|
|
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 <Box as=\"form\">\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <TextInputWithTokens\n tokens={tokens}\n onTokenRemove={onTokenRemove}\n preventTokenWrapping\n />\n </FormControl>\n </Box>\n )\n}"
|
|
7766
7766
|
},
|
|
7767
7767
|
{
|
|
7768
7768
|
"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 <
|
|
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 <Box\n sx={{\n maxWidth: '300px',\n }}\n >\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 </Box>\n )\n}"
|
|
7770
7770
|
},
|
|
7771
7771
|
{
|
|
7772
7772
|
"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 <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 </
|
|
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 <Box as=\"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 </Box>\n )\n}"
|
|
7774
7774
|
},
|
|
7775
7775
|
{
|
|
7776
7776
|
"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 <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 </
|
|
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 <Box as=\"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 </Box>\n )\n}"
|
|
7778
7778
|
}
|
|
7779
7779
|
],
|
|
7780
7780
|
"importPath": "@primer/react",
|
|
@@ -7851,39 +7851,39 @@
|
|
|
7851
7851
|
"stories": [
|
|
7852
7852
|
{
|
|
7853
7853
|
"id": "components-textarea--default",
|
|
7854
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea />\n </FormControl>\n </
|
|
7854
|
+
"code": "() => (\n <Box as=\"form\">\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea />\n </FormControl>\n </Box>\n)"
|
|
7855
7855
|
},
|
|
7856
7856
|
{
|
|
7857
7857
|
"id": "components-textarea-features--disabled",
|
|
7858
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea disabled />\n </FormControl>\n </
|
|
7858
|
+
"code": "() => (\n <Box as=\"form\">\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea disabled />\n </FormControl>\n </Box>\n)"
|
|
7859
7859
|
},
|
|
7860
7860
|
{
|
|
7861
7861
|
"id": "components-textarea-features--with-caption",
|
|
7862
|
-
"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 </
|
|
7862
|
+
"code": "() => (\n <Box as=\"form\">\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <FormControl.Caption>This is a caption</FormControl.Caption>\n <Textarea />\n </FormControl>\n </Box>\n)"
|
|
7863
7863
|
},
|
|
7864
7864
|
{
|
|
7865
7865
|
"id": "components-textarea-features--visually-hidden-label",
|
|
7866
|
-
"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 </
|
|
7866
|
+
"code": "() => (\n <Box as=\"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 </Box>\n)"
|
|
7867
7867
|
},
|
|
7868
7868
|
{
|
|
7869
7869
|
"id": "components-textarea-features--error",
|
|
7870
|
-
"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 </
|
|
7870
|
+
"code": "() => (\n <Box as=\"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 </Box>\n)"
|
|
7871
7871
|
},
|
|
7872
7872
|
{
|
|
7873
7873
|
"id": "components-textarea-features--success",
|
|
7874
|
-
"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 </
|
|
7874
|
+
"code": "() => (\n <Box as=\"form\">\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea />\n <FormControl.Validation variant=\"success\">Success</FormControl.Validation>\n </FormControl>\n </Box>\n)"
|
|
7875
7875
|
},
|
|
7876
7876
|
{
|
|
7877
7877
|
"id": "components-textarea-features--block",
|
|
7878
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea block />\n </FormControl>\n </
|
|
7878
|
+
"code": "() => (\n <Box as=\"form\">\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea block />\n </FormControl>\n </Box>\n)"
|
|
7879
7879
|
},
|
|
7880
7880
|
{
|
|
7881
7881
|
"id": "components-textarea-features--custom-height",
|
|
7882
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea rows={3} />\n </FormControl>\n </
|
|
7882
|
+
"code": "() => (\n <Box as=\"form\">\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea rows={3} />\n </FormControl>\n </Box>\n)"
|
|
7883
7883
|
},
|
|
7884
7884
|
{
|
|
7885
7885
|
"id": "components-textarea-features--custom-width",
|
|
7886
|
-
"code": "() => (\n <form>\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea cols={60} />\n </FormControl>\n </
|
|
7886
|
+
"code": "() => (\n <Box as=\"form\">\n <FormControl>\n <FormControl.Label>Default label</FormControl.Label>\n <Textarea cols={60} />\n </FormControl>\n </Box>\n)"
|
|
7887
7887
|
},
|
|
7888
7888
|
{
|
|
7889
7889
|
"id": "components-textarea-features--custom-resize-behavior",
|
|
@@ -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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/react",
|
|
3
|
-
"version": "37.32.0-rc.
|
|
3
|
+
"version": "37.32.0-rc.f8e94f384",
|
|
4
4
|
"description": "An implementation of GitHub's Primer Design System using React",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-esm/index.js",
|
|
@@ -147,6 +147,7 @@
|
|
|
147
147
|
"@types/react-dom": "18.3.1",
|
|
148
148
|
"@types/react-is": "18.3.1",
|
|
149
149
|
"@types/react-test-renderer": "18.3.1",
|
|
150
|
+
"@types/semver": "7.7.0",
|
|
150
151
|
"@types/styled-components": "^5.1.26",
|
|
151
152
|
"@vitejs/plugin-react": "^4.3.3",
|
|
152
153
|
"afterframe": "^1.0.2",
|
|
@@ -191,6 +192,7 @@
|
|
|
191
192
|
"rollup-plugin-import-css": "^0.0.0",
|
|
192
193
|
"rollup-plugin-postcss": "4.0.2",
|
|
193
194
|
"rollup-plugin-visualizer": "6.0.3",
|
|
195
|
+
"semver": "7.7.1",
|
|
194
196
|
"storybook": "^9.1.0",
|
|
195
197
|
"styled-components": "5.3.11",
|
|
196
198
|
"terser": "5.36.0",
|