From cf5d59e761b981aa74bd1d82d4e1f455c5285695 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Mon, 8 Aug 2022 21:33:43 +0200 Subject: [PATCH 1/4] Swatch: Remove component in favor of ColorIndicator --- .../components/src/color-list-picker/index.js | 15 ++++++++++--- .../src/duotone-picker/duotone-swatch.js | 17 +++++++++----- packages/components/src/style.scss | 1 - packages/components/src/swatch/index.tsx | 22 ------------------- packages/components/src/swatch/style.scss | 21 ------------------ packages/components/src/swatch/types.ts | 11 ---------- packages/components/tsconfig.json | 1 - 7 files changed, 24 insertions(+), 64 deletions(-) delete mode 100644 packages/components/src/swatch/index.tsx delete mode 100644 packages/components/src/swatch/style.scss delete mode 100644 packages/components/src/swatch/types.ts diff --git a/packages/components/src/color-list-picker/index.js b/packages/components/src/color-list-picker/index.js index 7a0bf8acdc47a..904bd4fb095ca 100644 --- a/packages/components/src/color-list-picker/index.js +++ b/packages/components/src/color-list-picker/index.js @@ -2,13 +2,16 @@ * WordPress dependencies */ import { useState } from '@wordpress/element'; +import { swatch } from '@wordpress/icons'; /** * Internal dependencies */ import Button from '../button'; import ColorPalette from '../color-palette'; -import Swatch from '../swatch'; +import ColorIndicator from '../color-indicator'; +import Icon from '../icon'; +import { Flex, FlexItem } from '../flex'; function ColorOption( { label, @@ -23,10 +26,16 @@ function ColorOption( { <> { isOpen && ( + ) : ( + ); } diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss index fbcdbc59c3f45..d26b4aee22c7d 100644 --- a/packages/components/src/style.scss +++ b/packages/components/src/style.scss @@ -39,7 +39,6 @@ @import "./search-control/style.scss"; @import "./select-control/style.scss"; @import "./snackbar/style.scss"; -@import "./swatch/style.scss"; @import "./tab-panel/style.scss"; @import "./text-control/style.scss"; @import "./tip/style.scss"; diff --git a/packages/components/src/swatch/index.tsx b/packages/components/src/swatch/index.tsx deleted file mode 100644 index 955fb3079fe4a..0000000000000 --- a/packages/components/src/swatch/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -/** - * WordPress dependencies - */ -import { swatch } from '@wordpress/icons'; - -/** - * Internal dependencies - */ -import Icon from '../icon'; -import type { SwatchProps } from './types'; - -// This component will be deprecated. Use `ColorIndicator` instead. -// TODO: Consolidate this component with `ColorIndicator`. -function Swatch( { fill }: SwatchProps ) { - return fill ? ( - - ) : ( - - ); -} - -export default Swatch; diff --git a/packages/components/src/swatch/style.scss b/packages/components/src/swatch/style.scss deleted file mode 100644 index b18b361f39d65..0000000000000 --- a/packages/components/src/swatch/style.scss +++ /dev/null @@ -1,21 +0,0 @@ -.components-swatch { - width: 18px; - height: 18px; - border-radius: 50%; - color: transparent; - background: transparent; - - // Regular border doesn't seem to work in the toolbar button, but pseudo-selector border does. - &::after { - content: ""; - display: block; - width: 100%; - height: 100%; - border: $border-width solid rgba(0, 0, 0, 0.2); - border-radius: 50%; - } -} - -.components-button.has-icon.has-text .components-swatch { - margin-right: $grid-unit; -} diff --git a/packages/components/src/swatch/types.ts b/packages/components/src/swatch/types.ts deleted file mode 100644 index 96db68094ad6f..0000000000000 --- a/packages/components/src/swatch/types.ts +++ /dev/null @@ -1,11 +0,0 @@ -/** - * External dependencies - */ -import type { CSSProperties } from 'react'; - -export type SwatchProps = { - /** - * The color to display in the swatch. - */ - fill?: CSSProperties[ 'background' ]; -}; diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index b58f29202efdd..cc5f7e3be2634 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -85,7 +85,6 @@ "src/spacer/**/*", "src/spinner/**/*", "src/surface/**/*", - "src/swatch/**/*", "src/text/**/*", "src/text-control/**/*", "src/text-highlight/**/*", From 1373f830f1f69536cf282742679709894e192784 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Mon, 8 Aug 2022 22:05:02 +0200 Subject: [PATCH 2/4] Fix button --- packages/components/src/color-list-picker/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/src/color-list-picker/style.scss b/packages/components/src/color-list-picker/style.scss index 232be723ed958..75965d5612f13 100644 --- a/packages/components/src/color-list-picker/style.scss +++ b/packages/components/src/color-list-picker/style.scss @@ -6,3 +6,7 @@ .components-color-list-picker__color-picker { margin: $grid-unit-10 0; } + +.components-color-list-picker__swatch-button { + padding: 6px; +} From 18cb882be2f6aa5c3e7db6d9dd6669fc658f533f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Mon, 8 Aug 2022 22:17:10 +0200 Subject: [PATCH 3/4] Update CHANGELOG.md --- packages/components/CHANGELOG.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 2ed01a8f098e6..d2391908747a4 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -29,7 +29,7 @@ - `Flex`, `FlexItem`, `FlexBlock`: Convert to TypeScript ([#42537](https://github.com/WordPress/gutenberg/pull/42537)). - `InputControl`: Fix incorrect `size` prop passing ([#42793](https://github.com/WordPress/gutenberg/pull/42793)). - `Popover`: rewrite Storybook examples using controls [#42903](https://github.com/WordPress/gutenberg/pull/42903)). -- `Swatch`: Convert to TypeScript ([#42162](https://github.com/WordPress/gutenberg/pull/42162)). +- `Swatch`: Remove component in favor of `ColorIndicator` [#43068](https://github.com/WordPress/gutenberg/pull/43068)). ## 19.16.0 (2022-07-27) @@ -87,7 +87,6 @@ - `Popover`: call `getAnchorRect` callback prop even if `anchorRefFallback` has no value. ([#42329](https://github.com/WordPress/gutenberg/pull/42329)). - Fix `ToolTip` position to ensure it is always positioned relative to the first child of the ToolTip. ([#41268](https://github.com/WordPress/gutenberg/pull/41268)) - ### Enhancements - `ToggleGroupControl`: Add large size variant ([#42008](https://github.com/WordPress/gutenberg/pull/42008/)). From 31ecbefc601732d54daa9c864139f44da7124bf8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Thu, 11 Aug 2022 17:13:32 +0200 Subject: [PATCH 4/4] Use HStack and fix jumping text when changing colors Co-Authored-By: Marco Ciampini <1083581+ciampo@users.noreply.github.com> --- packages/components/src/color-list-picker/index.js | 13 ++++++++----- .../components/src/color-list-picker/style.scss | 7 +++++++ 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/components/src/color-list-picker/index.js b/packages/components/src/color-list-picker/index.js index 904bd4fb095ca..9748a8ea3ba72 100644 --- a/packages/components/src/color-list-picker/index.js +++ b/packages/components/src/color-list-picker/index.js @@ -11,7 +11,7 @@ import Button from '../button'; import ColorPalette from '../color-palette'; import ColorIndicator from '../color-indicator'; import Icon from '../icon'; -import { Flex, FlexItem } from '../flex'; +import { HStack } from '../h-stack'; function ColorOption( { label, @@ -28,14 +28,17 @@ function ColorOption( { className="components-color-list-picker__swatch-button" onClick={ () => setIsOpen( ( prev ) => ! prev ) } > - + { value ? ( - + ) : ( ) } - { label } - + { label } + { isOpen && (