diff --git a/.changeset/state-label-draft-issue.md b/.changeset/state-label-draft-issue.md new file mode 100644 index 00000000000..4ce780939db --- /dev/null +++ b/.changeset/state-label-draft-issue.md @@ -0,0 +1,5 @@ +--- +"@primer/components": patch +--- + +Add support for draft issues to the StateLabel component diff --git a/docs/content/StateLabel.md b/docs/content/StateLabel.md index 36a56335bf1..c742e345e1a 100644 --- a/docs/content/StateLabel.md +++ b/docs/content/StateLabel.md @@ -14,6 +14,7 @@ Use StateLabel components to show the status of an issue or pull request. Closed Merged Draft + Draft ``` @@ -29,7 +30,7 @@ StateLabel components get `COMMON` system props. Read our [System Props](/system ## Component props -| Name | Type | Default | Description | -| :------ | :----- | :------: | :------------------------------------------------------------------------------------------------ | -| variant | String | 'normal' | a value of `small` or `normal` results in a smaller or larger version of the StateLabel. | -| status | String | | Can be one of `issueOpened`, `issueClosed`, `pullOpened`, `pullClosed`, `pullMerged`, or `draft`. | +| Name | Type | Default | Description | +| :------ | :----- | :------: | :------------------------------------------------------------------------------------------------------------- | +| variant | String | 'normal' | a value of `small` or `normal` results in a smaller or larger version of the StateLabel. | +| status | String | | Can be one of `issueOpened`, `issueClosed`, `pullOpened`, `pullClosed`, `pullMerged`, `draft` or `issueDraft`. | diff --git a/package-lock.json b/package-lock.json index 98ab3b1563e..52712a1536d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "31.1.0", "license": "MIT", "dependencies": { - "@primer/octicons-react": "^13.0.0", + "@primer/octicons-react": "^16.1.0", "@primer/primitives": "6.1.0", "@radix-ui/react-polymorphic": "0.0.14", "@react-aria/ssr": "3.1.0", @@ -7550,9 +7550,9 @@ } }, "node_modules/@primer/octicons-react": { - "version": "13.0.0", - "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-13.0.0.tgz", - "integrity": "sha512-j5XppNRCvgaMZLPsVvvmp6GSh7P5pq6PUbsfLNBWi2Kz3KYDeoGDWbPr5MjoxFOGUn6Hjnt6qjHPRxahd11vLQ==", + "version": "16.1.1", + "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz", + "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==", "engines": { "node": ">=8" }, @@ -43345,9 +43345,9 @@ "dev": true }, "@primer/octicons-react": { - "version": "13.0.0", - "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-13.0.0.tgz", - "integrity": "sha512-j5XppNRCvgaMZLPsVvvmp6GSh7P5pq6PUbsfLNBWi2Kz3KYDeoGDWbPr5MjoxFOGUn6Hjnt6qjHPRxahd11vLQ==", + "version": "16.1.1", + "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz", + "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==", "requires": {} }, "@primer/primitives": { diff --git a/package.json b/package.json index a4eee2d2c39..ad696bd5282 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "author": "GitHub, Inc.", "license": "MIT", "dependencies": { - "@primer/octicons-react": "^13.0.0", + "@primer/octicons-react": "^16.1.0", "@primer/primitives": "6.1.0", "@radix-ui/react-polymorphic": "0.0.14", "@react-aria/ssr": "3.1.0", diff --git a/src/StateLabel.tsx b/src/StateLabel.tsx index 44940705cf4..928331881b6 100644 --- a/src/StateLabel.tsx +++ b/src/StateLabel.tsx @@ -1,4 +1,11 @@ -import {GitMergeIcon, GitPullRequestIcon, IssueClosedIcon, IssueOpenedIcon, QuestionIcon} from '@primer/octicons-react' +import { + GitMergeIcon, + GitPullRequestIcon, + IssueClosedIcon, + IssueDraftIcon, + IssueOpenedIcon, + QuestionIcon +} from '@primer/octicons-react' import React from 'react' import styled from 'styled-components' import {variant} from 'styled-system' @@ -13,7 +20,8 @@ const octiconMap = { issueClosed: IssueClosedIcon, pullClosed: GitPullRequestIcon, pullMerged: GitMergeIcon, - draft: GitPullRequestIcon + draft: GitPullRequestIcon, + issueDraft: IssueDraftIcon } const colorVariants = variant({ @@ -42,6 +50,10 @@ const colorVariants = variant({ draft: { backgroundColor: 'neutral.emphasis', color: 'fg.onEmphasis' + }, + issueDraft: { + backgroundColor: 'neutral.emphasis', + color: 'fg.onEmphasis' } } }) diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index 2c6da0942e3..f7d4b9f3499 100644 --- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -972,6 +972,7 @@ Array [ style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } diff --git a/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap b/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap index c1b358fecbb..315659bbbca 100644 --- a/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap +++ b/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap @@ -21,6 +21,7 @@ exports[`CircleBadge CircleBadge.Icon renders consistently 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } diff --git a/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap b/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap index 3ca9e0cfe9b..52cf1d110b9 100644 --- a/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap +++ b/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap @@ -52,6 +52,7 @@ exports[`CircleOcticon renders consistently 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } diff --git a/src/__tests__/__snapshots__/Dialog.test.tsx.snap b/src/__tests__/__snapshots__/Dialog.test.tsx.snap index 4add54b6e7e..09650df2e1b 100644 --- a/src/__tests__/__snapshots__/Dialog.test.tsx.snap +++ b/src/__tests__/__snapshots__/Dialog.test.tsx.snap @@ -163,6 +163,7 @@ Array [ style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } diff --git a/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap b/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap index 70220a71b24..a640314d7b8 100644 --- a/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap +++ b/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap @@ -95,6 +95,7 @@ exports[`DropdownMenu renders consistently 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } diff --git a/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap b/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap index 99460543226..8c07d900237 100644 --- a/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +++ b/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap @@ -352,6 +352,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -383,6 +384,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -418,6 +420,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -448,6 +451,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } diff --git a/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap b/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap index 1853db7e5e5..c24a5619bc6 100644 --- a/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +++ b/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap @@ -108,6 +108,7 @@ exports[`SelectPanel renders consistently 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } diff --git a/src/__tests__/__snapshots__/StateLabel.test.tsx.snap b/src/__tests__/__snapshots__/StateLabel.test.tsx.snap index d5811d296a4..06001921e64 100644 --- a/src/__tests__/__snapshots__/StateLabel.test.tsx.snap +++ b/src/__tests__/__snapshots__/StateLabel.test.tsx.snap @@ -36,7 +36,7 @@ exports[`StateLabel renders children 1`] = ` className="c1" dangerouslySetInnerHTML={ Object { - "__html": "", + "__html": "", } } fill="currentColor" @@ -45,6 +45,7 @@ exports[`StateLabel renders children 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -92,7 +93,7 @@ exports[`StateLabel renders consistently 1`] = ` className="c1" dangerouslySetInnerHTML={ Object { - "__html": "", + "__html": "", } } fill="currentColor" @@ -101,6 +102,7 @@ exports[`StateLabel renders consistently 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -148,7 +150,7 @@ exports[`StateLabel respects the status prop 1`] = ` className="c1" dangerouslySetInnerHTML={ Object { - "__html": "", + "__html": "", } } fill="currentColor" @@ -157,6 +159,7 @@ exports[`StateLabel respects the status prop 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -203,7 +206,7 @@ exports[`StateLabel respects the status prop 2`] = ` className="c1" dangerouslySetInnerHTML={ Object { - "__html": "", + "__html": "", } } fill="currentColor" @@ -212,6 +215,7 @@ exports[`StateLabel respects the status prop 2`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -267,6 +271,7 @@ exports[`StateLabel respects the status prop 3`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -313,7 +318,7 @@ exports[`StateLabel respects the variant prop 1`] = ` className="c1" dangerouslySetInnerHTML={ Object { - "__html": "", + "__html": "", } } fill="currentColor" @@ -322,6 +327,7 @@ exports[`StateLabel respects the variant prop 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -368,7 +374,7 @@ exports[`StateLabel respects the variant prop 2`] = ` className="c1" dangerouslySetInnerHTML={ Object { - "__html": "", + "__html": "", } } fill="currentColor" @@ -377,6 +383,7 @@ exports[`StateLabel respects the variant prop 2`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } diff --git a/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap b/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap index 8f07a8121db..0d5c9fea6a7 100644 --- a/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap +++ b/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap @@ -15,6 +15,7 @@ exports[`StyledOcticon renders consistently 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index 7c4b9abbe53..c7e0556b8db 100644 --- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -290,6 +290,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -337,6 +338,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -775,6 +777,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -822,6 +825,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -869,6 +873,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -916,6 +921,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -963,6 +969,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -1010,6 +1017,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -1057,6 +1065,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -1104,6 +1113,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -1402,6 +1412,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -1449,6 +1460,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -1496,6 +1508,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -1543,6 +1556,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -1590,6 +1604,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -1637,6 +1652,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -1684,6 +1700,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -1731,6 +1748,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -2029,6 +2047,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -2076,6 +2095,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -2123,6 +2143,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -2170,6 +2191,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -2217,6 +2239,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -2264,6 +2287,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -2311,6 +2335,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -2358,6 +2383,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -2656,6 +2682,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -2703,6 +2730,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -2750,6 +2778,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -2797,6 +2826,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -2844,6 +2874,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -2891,6 +2922,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -2938,6 +2970,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -2985,6 +3018,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -3283,6 +3317,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -3330,6 +3365,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -3377,6 +3413,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -3424,6 +3461,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -3471,6 +3509,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -3518,6 +3557,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -3565,6 +3605,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -3612,6 +3653,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -3911,6 +3953,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -3958,6 +4001,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -4005,6 +4049,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -4052,6 +4097,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -4099,6 +4145,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -4146,6 +4193,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -4193,6 +4241,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -4240,6 +4289,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -4881,6 +4931,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -4928,6 +4979,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -4975,6 +5027,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -5022,6 +5075,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -5069,6 +5123,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -5116,6 +5171,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -5163,6 +5219,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -5210,6 +5267,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -5513,6 +5571,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -5560,6 +5619,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -5607,6 +5667,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -5654,6 +5715,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -5701,6 +5763,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -5748,6 +5811,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -5795,6 +5859,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -5842,6 +5907,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } diff --git a/src/__tests__/__snapshots__/Token.test.tsx.snap b/src/__tests__/__snapshots__/Token.test.tsx.snap index fb7ad3a693c..a50979b01ba 100644 --- a/src/__tests__/__snapshots__/Token.test.tsx.snap +++ b/src/__tests__/__snapshots__/Token.test.tsx.snap @@ -199,6 +199,7 @@ exports[`Token components AvatarToken renders all sizes 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -409,6 +410,7 @@ exports[`Token components AvatarToken renders all sizes 2`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -619,6 +621,7 @@ exports[`Token components AvatarToken renders all sizes 3`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -829,6 +832,7 @@ exports[`Token components AvatarToken renders all sizes 4`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -1251,6 +1255,7 @@ exports[`Token components AvatarToken renders with a remove button 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -1427,6 +1432,7 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -1603,6 +1609,7 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -1779,6 +1786,7 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -1955,6 +1963,7 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -2214,6 +2223,7 @@ exports[`Token components IssueLabelToken renders custom fill color 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -2390,6 +2400,7 @@ exports[`Token components IssueLabelToken renders default fill color 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -2679,6 +2690,7 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -2845,6 +2857,7 @@ exports[`Token components Token renders all sizes 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -3011,6 +3024,7 @@ exports[`Token components Token renders all sizes 2`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -3177,6 +3191,7 @@ exports[`Token components Token renders all sizes 3`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -3343,6 +3358,7 @@ exports[`Token components Token renders all sizes 4`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", } @@ -3782,6 +3798,7 @@ exports[`Token components Token renders with a remove button 1`] = ` style={ Object { "display": "inline-block", + "overflow": "visible", "userSelect": "none", "verticalAlign": "text-bottom", }