diff --git a/.changeset/actionlist-keyboard-a11y.md b/.changeset/actionlist-keyboard-a11y.md new file mode 100644 index 00000000000..783a7875609 --- /dev/null +++ b/.changeset/actionlist-keyboard-a11y.md @@ -0,0 +1,5 @@ +--- +'@primer/components': patch +--- + +ActionList: Improve keyboard accessibility with focus styles cross browser 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/ActionList2/Item.tsx b/src/ActionList2/Item.tsx index ceba9a841d4..b7ddd462b9d 100644 --- a/src/ActionList2/Item.tsx +++ b/src/ActionList2/Item.tsx @@ -94,7 +94,7 @@ export const Item = React.forwardRef( onSelect = () => null, sx: sxProp = {}, id, - _PrivateItemWrapper = ({children}) => <>{children}, + _PrivateItemWrapper, ...props }, forwardedRef @@ -109,9 +109,9 @@ export const Item = React.forwardRef( fontSize: 1, paddingY: '6px', // custom value off the scale lineHeight: TEXT_ROW_HEIGHT, - marginX: listVariant === 'inset' ? 2 : 0, minHeight: 5, - borderRadius: 2, + marginX: listVariant === 'inset' ? 2 : 0, + borderRadius: listVariant === 'inset' ? 2 : 0, transition: 'background 33.333ms linear', color: getVariantStyles(variant, disabled).color, textDecoration: 'none', // for as="a" @@ -121,11 +121,17 @@ export const Item = React.forwardRef( backgroundColor: `actionListItem.${variant}.hoverBg`, color: getVariantStyles(variant, disabled).hoverColor }, - ':focus:not([aria-disabled])': { + ':focus:not([data-focus-visible-added])': { backgroundColor: `actionListItem.${variant}.selectedBg`, color: getVariantStyles(variant, disabled).hoverColor, outline: 'none' }, + '&[data-focus-visible-added]': { + // we don't use :focus-visible because not all browsers (safari) have it yet + outline: 'none', + border: `2 solid`, + boxShadow: `0 0 0 2px ${theme?.colors.accent.emphasis}` + }, ':active:not([aria-disabled])': { backgroundColor: `actionListItem.${variant}.activeBg`, color: getVariantStyles(variant, disabled).hoverColor @@ -147,14 +153,16 @@ export const Item = React.forwardRef( borderColor: 'var(--divider-color, transparent)' }, // show between 2 items - ':not(:first-of-type):not([aria-selected=true])': {'--divider-color': theme?.colors.actionListItem.inlineDivider}, + ':not(:first-of-type)': {'--divider-color': theme?.colors.actionListItem.inlineDivider}, // hide divider after dividers & group header, with higher importance! '[data-component="ActionList.Divider"] + &': {'--divider-color': 'transparent !important'}, // hide border on current and previous item - '&:hover:not([aria-disabled]), &:focus:not([aria-disabled])': {'--divider-color': 'transparent'}, - '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &': {'--divider-color': 'transparent'}, - // hide border around selected item - '&[aria-selected=true] + &': {'--divider-color': 'transparent'} + '&:hover:not([aria-disabled]), &:focus:not([aria-disabled]), &[data-focus-visible-added]:not([aria-disabled])': { + '--divider-color': 'transparent' + }, + '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &, &[data-focus-visible-added] + li': { + '--divider-color': 'transparent' + } } const clickHandler = React.useCallback( @@ -165,11 +173,24 @@ export const Item = React.forwardRef( [onSelect, disabled] ) + const keyPressHandler = React.useCallback( + event => { + if (disabled) return + + if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) { + onSelect(event) + } + }, + [onSelect, disabled] + ) + // use props.id if provided, otherwise generate one. const labelId = useSSRSafeId(id) const inlineDescriptionId = useSSRSafeId(id && `${id}--inline-description`) const blockDescriptionId = useSSRSafeId(id && `${id}--block-description`) + const ItemWrapper = _PrivateItemWrapper || React.Fragment + return ( {slots => ( @@ -177,14 +198,15 @@ export const Item = React.forwardRef( ref={forwardedRef} sx={merge(styles, sxProp as SxProp)} onClick={clickHandler} + onKeyPress={keyPressHandler} aria-selected={selected} aria-disabled={disabled ? true : undefined} - tabIndex={disabled ? undefined : -1} + tabIndex={disabled || _PrivateItemWrapper ? undefined : 0} aria-labelledby={`${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`} aria-describedby={slots.BlockDescription ? blockDescriptionId : undefined} {...props} > - <_PrivateItemWrapper> + {slots.LeadingVisual} ( {slots.BlockDescription} - + )} 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", } diff --git a/src/stories/ActionList2.stories.tsx b/src/stories/ActionList2.stories.tsx index 069642f65ed..7adebe0d748 100644 --- a/src/stories/ActionList2.stories.tsx +++ b/src/stories/ActionList2.stories.tsx @@ -73,15 +73,14 @@ export function SimpleListStory(): JSX.Element { return ( <>

Simple List

- - - Copy link - Quote reply - Edit comment - - Delete file - - + + + Copy link + Quote reply + Edit comment + + Delete file + ) } @@ -91,40 +90,39 @@ export function WithIcon(): JSX.Element { return ( <>

With Icon

- - - - - - - github.com/primer - - - - - - MIT License - - - - - - 256 stars - - - - - - 3 forks - - - - - - 4 vulnerabilities - - - + + + + + + + github.com/primer + + + + + + MIT License + + + + + + 256 stars + + + + + + 3 forks + + + + + + 4 vulnerabilities + + ) } @@ -637,7 +635,7 @@ export function DOMPropsStory(): JSX.Element {

Simple List

- alert(`Id is '${event.currentTarget.getAttribute('id')}'`)}> + alert(`Id is '${event.target.id}'`)}> Has an id @@ -1185,7 +1183,7 @@ const SortableItem: React.FC = ({option, onSelect, reorder}) sx={{ opacity: isDragging ? 0.5 : 1, boxShadow: isOver ? theme => `0px 2px 0 0px ${theme.colors.accent.emphasis}` : undefined, - borderRadius: isOver ? 0 : undefined + borderRadius: isOver ? 0 : 2 }} > {option.icon}