From a577f008435ed2f14711e0399817b3b8acfa2e8c Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 6 Apr 2022 04:05:08 +0900 Subject: [PATCH 1/8] Add local icon wrapper component for inheriting color --- .../global-styles/icon-with-current-color.js | 13 +++++++++++++ .../src/components/global-styles/style.scss | 3 +++ 2 files changed, 16 insertions(+) create mode 100644 packages/edit-site/src/components/global-styles/icon-with-current-color.js diff --git a/packages/edit-site/src/components/global-styles/icon-with-current-color.js b/packages/edit-site/src/components/global-styles/icon-with-current-color.js new file mode 100644 index 0000000000000..bf9ea83ce57dd --- /dev/null +++ b/packages/edit-site/src/components/global-styles/icon-with-current-color.js @@ -0,0 +1,13 @@ +/** + * WordPress dependencies + */ +import { Icon } from '@wordpress/components'; + +export function IconWithCurrentColor( { className, ...props } ) { + return ( + + ); +} diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index ebf09d5a82505..ec96c5815bc27 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -93,3 +93,6 @@ } } +.edit-site-global-styles-icon-with-current-color { + fill: currentColor; +} From ccdbe2755b89f68c7ac857c1a8262bc7c072b371 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 6 Apr 2022 04:06:47 +0900 Subject: [PATCH 2/8] Replace Icon components to inherit color --- .../edit-site/src/components/global-styles/header.js | 9 ++------- .../src/components/global-styles/navigation-button.js | 8 ++++++-- .../src/components/global-styles/screen-root.js | 7 ++++--- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/header.js b/packages/edit-site/src/components/global-styles/header.js index 5bc5b539e11c9..abc162acc652d 100644 --- a/packages/edit-site/src/components/global-styles/header.js +++ b/packages/edit-site/src/components/global-styles/header.js @@ -9,7 +9,7 @@ import { __experimentalView as View, } from '@wordpress/components'; import { isRTL, __ } from '@wordpress/i18n'; -import { chevronRight, chevronLeft, Icon } from '@wordpress/icons'; +import { chevronRight, chevronLeft } from '@wordpress/icons'; /** * Internal dependencies @@ -22,12 +22,7 @@ function ScreenHeader( { title, description } ) { - } + icon={ isRTL() ? chevronRight : chevronLeft } size="small" aria-label={ __( 'Navigate to the previous view' ) } /> diff --git a/packages/edit-site/src/components/global-styles/navigation-button.js b/packages/edit-site/src/components/global-styles/navigation-button.js index 7530f497b0332..67bebabea7c81 100644 --- a/packages/edit-site/src/components/global-styles/navigation-button.js +++ b/packages/edit-site/src/components/global-styles/navigation-button.js @@ -8,7 +8,11 @@ import { FlexItem, __experimentalHStack as HStack, } from '@wordpress/components'; -import { Icon } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import { IconWithCurrentColor } from './icon-with-current-color'; function GenericNavigationButton( { icon, children, ...props } ) { return ( @@ -16,7 +20,7 @@ function GenericNavigationButton( { icon, children, ...props } ) { { icon && ( - + { children } diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js index 9305e957b096c..711ee34f91740 100644 --- a/packages/edit-site/src/components/global-styles/screen-root.js +++ b/packages/edit-site/src/components/global-styles/screen-root.js @@ -13,13 +13,14 @@ import { CardMedia, } from '@wordpress/components'; import { isRTL, __ } from '@wordpress/i18n'; -import { chevronLeft, chevronRight, Icon } from '@wordpress/icons'; +import { chevronLeft, chevronRight } from '@wordpress/icons'; import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; /** * Internal dependencies */ +import { IconWithCurrentColor } from './icon-with-current-color'; import { NavigationButton } from './navigation-button'; import ContextMenu from './context-menu'; import StylesPreview from './preview'; @@ -47,7 +48,7 @@ function ScreenRoot() { { __( 'Browse styles' ) } - { __( 'Blocks' ) } - Date: Wed, 6 Apr 2022 04:18:47 +0900 Subject: [PATCH 3/8] Fix bug --- .../global-styles/icon-with-current-color.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/icon-with-current-color.js b/packages/edit-site/src/components/global-styles/icon-with-current-color.js index bf9ea83ce57dd..f20289d90363b 100644 --- a/packages/edit-site/src/components/global-styles/icon-with-current-color.js +++ b/packages/edit-site/src/components/global-styles/icon-with-current-color.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ @@ -6,7 +11,10 @@ import { Icon } from '@wordpress/components'; export function IconWithCurrentColor( { className, ...props } ) { return ( ); From 1af91329d3bffd6f87f1555ec2eb43c54617c621 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 6 Apr 2022 04:20:26 +0900 Subject: [PATCH 4/8] Ensure that ItemGroup button color isn't overridden by UA color --- packages/components/src/item-group/styles.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/item-group/styles.ts b/packages/components/src/item-group/styles.ts index 131754cfa54b5..cb2758752e656 100644 --- a/packages/components/src/item-group/styles.ts +++ b/packages/components/src/item-group/styles.ts @@ -36,6 +36,7 @@ export const item = css` width: 100%; display: block; margin: 0; + color: inherit; `; export const bordered = css` From 1e340e78c50fd378ea927f15dced34aa553d35e0 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 6 Apr 2022 04:21:06 +0900 Subject: [PATCH 5/8] Fix Surface color to be correct UI color, not pure black --- packages/components/src/surface/styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/surface/styles.js b/packages/components/src/surface/styles.js index 1c54c45b69860..26d8827e49cdb 100644 --- a/packages/components/src/surface/styles.js +++ b/packages/components/src/surface/styles.js @@ -10,7 +10,7 @@ import { CONFIG, COLORS } from '../utils'; export const Surface = css` background-color: ${ CONFIG.surfaceColor }; - color: ${ COLORS.black }; + color: ${ COLORS.darkGray.primary }; position: relative; `; From d7aeacb4a34cb8566edc0cbc90c8f94d4339009d Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 6 Apr 2022 04:21:40 +0900 Subject: [PATCH 6/8] Correct "Beta" tag background color --- packages/edit-site/src/components/sidebar/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss index 134efcbc2f142..b0e3cdfd1463e 100644 --- a/packages/edit-site/src/components/sidebar/style.scss +++ b/packages/edit-site/src/components/sidebar/style.scss @@ -80,7 +80,7 @@ padding: 0 $grid-unit-10; height: $grid-unit-30; border-radius: $radius-block-ui; - background-color: $black; + background-color: $gray-900; color: $white; align-items: center; font-size: $helptext-font-size; From 50fd9ab6597c89a5bc945c6d40fa2d756beeac46 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 6 Apr 2022 04:51:35 +0900 Subject: [PATCH 7/8] Add changelog --- packages/components/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index c3d28c0de13f9..fbafcfc6a2220 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -21,6 +21,8 @@ ### Bug Fix - Use `Object.assign` instead of `{ ...spread }` syntax to avoid errors in the code generated by TypeScript ([#39932](https://github.com/WordPress/gutenberg/pull/39932)). +- `ItemGroup`: Ensure that the Item's text color is not overriden by the user agent's button color ([#40055](https://github.com/WordPress/gutenberg/pull/40055)). +- `Surface`: Use updated UI text color `#1e1e1e` instead of `#000` ([#40055](https://github.com/WordPress/gutenberg/pull/40055)). ## 19.7.0 (2022-03-23) From 30529f11844bcb3ada9bcd516ef9b069ace2c1c8 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 6 Apr 2022 05:08:54 +0900 Subject: [PATCH 8/8] Update snapshots --- .../src/card/test/__snapshots__/index.js.snap | 12 +++++----- .../flyout/test/__snapshots__/index.js.snap | 2 +- .../test/__snapshots__/index.js.snap | 21 +++++++++--------- .../surface/test/__snapshots__/index.js.snap | 22 +++++++++---------- 4 files changed, 29 insertions(+), 28 deletions(-) diff --git a/packages/components/src/card/test/__snapshots__/index.js.snap b/packages/components/src/card/test/__snapshots__/index.js.snap index eea876b0cffe5..f36ceca8dcc7f 100644 --- a/packages/components/src/card/test/__snapshots__/index.js.snap +++ b/packages/components/src/card/test/__snapshots__/index.js.snap @@ -124,7 +124,7 @@ Snapshot Diff: "background-color": "#fff", - "border-radius": "calc(2px - 1px)", "box-shadow": "0 0 0 1px rgba(0, 0, 0, 0.1)", - "color": "#000", + "color": "#1e1e1e", "outline": "none", "position": "relative", }, @@ -174,8 +174,8 @@ Snapshot Diff: @@ -1,30 +1,30 @@
@@ -213,7 +213,7 @@ Object { "asFragment": [Function], "baseElement": .emotion-0 { background-color: #fff; - color: #000; + color: #1e1e1e; position: relative; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); outline: none; @@ -469,7 +469,7 @@ Object { , "container": .emotion-0 { background-color: #fff; - color: #000; + color: #1e1e1e; position: relative; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); outline: none; @@ -809,7 +809,7 @@ Compared values have no visual difference. exports[`Card Card component should warn when the isElevated prop is passed 1`] = ` .emotion-0 { background-color: #fff; - color: #000; + color: #1e1e1e; position: relative; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); outline: none; diff --git a/packages/components/src/flyout/test/__snapshots__/index.js.snap b/packages/components/src/flyout/test/__snapshots__/index.js.snap index 1759d8ddb0e8b..66893021274f9 100644 --- a/packages/components/src/flyout/test/__snapshots__/index.js.snap +++ b/packages/components/src/flyout/test/__snapshots__/index.js.snap @@ -3,7 +3,7 @@ exports[`props should render correctly 1`] = ` .emotion-1 { background-color: #fff; - color: #000; + color: #1e1e1e; position: relative; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); outline: none; diff --git a/packages/components/src/item-group/test/__snapshots__/index.js.snap b/packages/components/src/item-group/test/__snapshots__/index.js.snap index 0c7f8072e17ac..f6e84366baaba 100644 --- a/packages/components/src/item-group/test/__snapshots__/index.js.snap +++ b/packages/components/src/item-group/test/__snapshots__/index.js.snap @@ -11,8 +11,8 @@ Snapshot Diff: role="listitem" >
@@ -24,8 +24,8 @@ Snapshot Diff: role="listitem" >
@@ -44,8 +44,8 @@ Snapshot Diff: role="listitem" >
@@ -78,6 +78,7 @@ exports[`ItemGroup ItemGroup component should render correctly 1`] = ` width: 100%; display: block; margin: 0; + color: inherit; border-radius: 2px; } @@ -120,8 +121,8 @@ Snapshot Diff: role="listitem" >
@@ -147,8 +148,8 @@ Snapshot Diff: role="listitem" >
diff --git a/packages/components/src/surface/test/__snapshots__/index.js.snap b/packages/components/src/surface/test/__snapshots__/index.js.snap index 043575488d0e7..fc61465bc2569 100644 --- a/packages/components/src/surface/test/__snapshots__/index.js.snap +++ b/packages/components/src/surface/test/__snapshots__/index.js.snap @@ -6,8 +6,8 @@ Snapshot Diff: + Second value
@@ -21,8 +21,8 @@ Snapshot Diff: + Second value
@@ -36,8 +36,8 @@ Snapshot Diff: + Second value
@@ -51,8 +51,8 @@ Snapshot Diff: + Second value
@@ -63,7 +63,7 @@ Snapshot Diff: exports[`props should render correctly 1`] = ` .emotion-0 { background-color: #fff; - color: #000; + color: #1e1e1e; position: relative; } @@ -82,8 +82,8 @@ Snapshot Diff: + Second value