From 48a9691a913350f8c925cd2434c844c8aa08668f Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 11 Jul 2023 14:14:02 +0900 Subject: [PATCH 1/8] ItemGroup: Apply focus state to `Item` component rendered as anchor element --- packages/components/src/item-group/item/hook.ts | 2 +- packages/components/src/item-group/styles.ts | 1 + .../src/components/sidebar-navigation-item/style.scss | 11 ----------- 3 files changed, 2 insertions(+), 12 deletions(-) diff --git a/packages/components/src/item-group/item/hook.ts b/packages/components/src/item-group/item/hook.ts index bd3be96c618b8..9120539e61082 100644 --- a/packages/components/src/item-group/item/hook.ts +++ b/packages/components/src/item-group/item/hook.ts @@ -42,7 +42,7 @@ export function useItem( props: WordPressComponentProps< ItemProps, 'div' > ) { const classes = useMemo( () => cx( - as === 'button' && styles.unstyledButton, + ( as === 'button' || as === 'a' ) && styles.unstyledButton, styles.itemSizes[ size ] || styles.itemSizes.medium, styles.item, spacedAround && styles.spacedAround, diff --git a/packages/components/src/item-group/styles.ts b/packages/components/src/item-group/styles.ts index 670fdf987dd93..7cc458095c616 100644 --- a/packages/components/src/item-group/styles.ts +++ b/packages/components/src/item-group/styles.ts @@ -14,6 +14,7 @@ export const unstyledButton = css` cursor: pointer; background: none; text-align: start; + text-decoration: none; svg, path { diff --git a/packages/edit-site/src/components/sidebar-navigation-item/style.scss b/packages/edit-site/src/components/sidebar-navigation-item/style.scss index d81b6764f7b72..2e5c0efdc4a64 100644 --- a/packages/edit-site/src/components/sidebar-navigation-item/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-item/style.scss @@ -22,17 +22,6 @@ fill: $gray-700; } - &:is(a) { - text-decoration: none; - display: flex; - align-items: center; - - &:focus { - box-shadow: none; - outline: none; - } - } - &.with-suffix { padding-right: $grid-unit-20; } From ebe07be4705e69f78115335d34bee216d0e04f8e Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 11 Jul 2023 14:54:08 +0900 Subject: [PATCH 2/8] Update changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 6e38eb22213fc..981d03390a3aa 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,6 +5,7 @@ ### Bug Fix - `Popover`: Pin `react-dropdown-menu` version to avoid breaking changes in dependency updates. ([52356](https://github.com/WordPress/gutenberg/pull/52356)). +- `ItemGroup`: Apply focus style to `Item` component rendered as anchor element. ([52495](https://github.com/WordPress/gutenberg/pull/52495)). ## 25.3.0 (2023-07-05) From 821a377c3bafdd4006bb43da3018dc0a0d968033 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 11 Jul 2023 15:21:40 +0900 Subject: [PATCH 3/8] Don't apply text-decoration in the case of a button element --- .../components/src/item-group/item/hook.ts | 3 +- packages/components/src/item-group/styles.ts | 56 ++++++++++--------- 2 files changed, 31 insertions(+), 28 deletions(-) diff --git a/packages/components/src/item-group/item/hook.ts b/packages/components/src/item-group/item/hook.ts index 9120539e61082..ff97e3adae160 100644 --- a/packages/components/src/item-group/item/hook.ts +++ b/packages/components/src/item-group/item/hook.ts @@ -42,7 +42,8 @@ export function useItem( props: WordPressComponentProps< ItemProps, 'div' > ) { const classes = useMemo( () => cx( - ( as === 'button' || as === 'a' ) && styles.unstyledButton, + ( as === 'button' || as === 'a' ) && + styles.unstyledButton( as ), styles.itemSizes[ size ] || styles.itemSizes.medium, styles.item, spacedAround && styles.spacedAround, diff --git a/packages/components/src/item-group/styles.ts b/packages/components/src/item-group/styles.ts index 7cc458095c616..09b8728d3ee61 100644 --- a/packages/components/src/item-group/styles.ts +++ b/packages/components/src/item-group/styles.ts @@ -8,33 +8,35 @@ import { css } from '@emotion/react'; */ import { CONFIG, COLORS } from '../utils'; -export const unstyledButton = css` - appearance: none; - border: 1px solid transparent; - cursor: pointer; - background: none; - text-align: start; - text-decoration: none; - - svg, - path { - fill: currentColor; - } - - &:hover { - color: ${ COLORS.ui.theme }; - } - - &:focus-visible { - box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) - var( - --wp-components-color-accent, - var( --wp-admin-theme-color, ${ COLORS.ui.theme } ) - ); - // Windows high contrast mode. - outline: 2px solid transparent; - } -`; +export const unstyledButton = ( as: 'a' | 'button' ) => { + return css` + appearance: none; + border: 1px solid transparent; + cursor: pointer; + background: none; + text-align: start; + text-decoration: ${ as === 'a' ? 'none' : undefined }; + + svg, + path { + fill: currentColor; + } + + &:hover { + color: ${ COLORS.ui.theme }; + } + + &:focus-visible { + box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) + var( + --wp-components-color-accent, + var( --wp-admin-theme-color, ${ COLORS.ui.theme } ) + ); + // Windows high contrast mode. + outline: 2px solid transparent; + } + `; +}; export const itemWrapper = css` width: 100%; From 11942658c6b6aef1e410b1c2d8f399381500d75b Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 11 Jul 2023 19:45:55 +0900 Subject: [PATCH 4/8] Update snapshot --- .../preferences-modal/test/__snapshots__/index.js.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap index 182531ee01c02..4c10b5f8aff44 100644 --- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap @@ -618,9 +618,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active .emotion-13:focus-visible { box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var( - --wp-components-color-accent, - var( --wp-admin-theme-color, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) ) - ); + --wp-components-color-accent, + var( --wp-admin-theme-color, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) ) + ); outline: 2px solid transparent; } From 48b6050d99cec51a1ce2ebddc849da31264eb4f6 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Wed, 12 Jul 2023 22:29:55 +0900 Subject: [PATCH 5/8] Update storybook and add default styles to anchor element --- packages/components/src/item-group/stories/index.tsx | 11 ++++++++--- packages/components/src/item-group/styles.ts | 10 +++++++++- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/components/src/item-group/stories/index.tsx b/packages/components/src/item-group/stories/index.tsx index 3fa35c67cfb53..e520ff10c160f 100644 --- a/packages/components/src/item-group/stories/index.tsx +++ b/packages/components/src/item-group/stories/index.tsx @@ -39,20 +39,25 @@ Default.args = { children: ( [ { - children: 'First item', + children: 'First button item', // eslint-disable-next-line no-alert onClick: () => alert( 'First item clicked' ), }, { - children: 'Second item', + children: 'Second button item', // eslint-disable-next-line no-alert onClick: () => alert( 'Second item clicked' ), }, { - children: 'Third item', + children: 'Third button item', // eslint-disable-next-line no-alert onClick: () => alert( 'Third item clicked' ), }, + { + children: 'Anchor item', + as: 'a', + href: 'https://wordpress.org', + }, ] as ItemProps[] ).map( mapPropsToItem ), }; diff --git a/packages/components/src/item-group/styles.ts b/packages/components/src/item-group/styles.ts index 09b8728d3ee61..95076f0bb4081 100644 --- a/packages/components/src/item-group/styles.ts +++ b/packages/components/src/item-group/styles.ts @@ -6,10 +6,12 @@ import { css } from '@emotion/react'; /** * Internal dependencies */ -import { CONFIG, COLORS } from '../utils'; +import { CONFIG, COLORS, font } from '../utils'; export const unstyledButton = ( as: 'a' | 'button' ) => { return css` + font-size: ${ font( 'default.fontSize' ) }; + font-family: inherit; appearance: none; border: 1px solid transparent; cursor: pointer; @@ -26,6 +28,11 @@ export const unstyledButton = ( as: 'a' | 'button' ) => { color: ${ COLORS.ui.theme }; } + &:focus { + box-shadow: none; + outline: none; + } + &:focus-visible { box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var( @@ -34,6 +41,7 @@ export const unstyledButton = ( as: 'a' | 'button' ) => { ); // Windows high contrast mode. outline: 2px solid transparent; + outline-offset: 0; } `; }; From 672e3995aea55944fc67942bedc68eb8b17ff519 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Wed, 12 Jul 2023 23:44:46 +0900 Subject: [PATCH 6/8] Update snapshot --- .../preferences-modal/test/__snapshots__/index.js.snap | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap index 4c10b5f8aff44..32254bb91c695 100644 --- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap @@ -590,6 +590,8 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active } .emotion-13 { + font-size: 13px; + font-family: inherit; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; @@ -616,12 +618,18 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); } +.emotion-13:focus { + box-shadow: none; + outline: none; +} + .emotion-13:focus-visible { box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-components-color-accent, var( --wp-admin-theme-color, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) ) ); outline: 2px solid transparent; + outline-offset: 0; } .emotion-15 { From 74cdb6b1b994be456e6e4569ecac86cfc9e7b5cd Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Thu, 13 Jul 2023 00:01:23 +0900 Subject: [PATCH 7/8] Update changelog --- packages/components/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 981d03390a3aa..4fca51110c4f0 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,7 +5,7 @@ ### Bug Fix - `Popover`: Pin `react-dropdown-menu` version to avoid breaking changes in dependency updates. ([52356](https://github.com/WordPress/gutenberg/pull/52356)). -- `ItemGroup`: Apply focus style to `Item` component rendered as anchor element. ([52495](https://github.com/WordPress/gutenberg/pull/52495)). +- `Item`: Unify focus style and add default font styles. ([52495](https://github.com/WordPress/gutenberg/pull/52495)). ## 25.3.0 (2023-07-05) From 51ef2f83b269b7738e3c4c147d69bc04cbb6d8b8 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Fri, 14 Jul 2023 00:46:38 +0900 Subject: [PATCH 8/8] Fix incorrect changelog entries --- packages/components/CHANGELOG.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 3d8a71a1d137a..1e7e654ac1c81 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -9,8 +9,8 @@ ### Bug Fix -- `Popover`: Pin `react-dropdown-menu` version to avoid breaking changes in dependency updates. ([52356](https://github.com/WordPress/gutenberg/pull/52356)). -- `Item`: Unify focus style and add default font styles. ([52495](https://github.com/WordPress/gutenberg/pull/52495)). +- `Popover`: Pin `react-dropdown-menu` version to avoid breaking changes in dependency updates. ([#52356](https://github.com/WordPress/gutenberg/pull/52356)). +- `Item`: Unify focus style and add default font styles. ([#52495](https://github.com/WordPress/gutenberg/pull/52495)). ## 25.3.0 (2023-07-05)