From 1c74a115eeec260025ccec70486c0e015688319c Mon Sep 17 00:00:00 2001 From: Daniel Bachhuber Date: Thu, 7 Jul 2022 05:13:32 -0700 Subject: [PATCH 1/6] ColorPalette: `background` is already styled when `value` is 'transparent' --- .../components/src/color-palette/index.js | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js index 5ef690eb1e4fa8..e8012893735de0 100644 --- a/packages/components/src/color-palette/index.js +++ b/packages/components/src/color-palette/index.js @@ -228,14 +228,18 @@ export default function ColorPalette( { aria-haspopup="true" onClick={ onToggle } aria-label={ customColorAccessibleLabel } - style={ { - background: value, - color: - colordColor.contrast() > - colordColor.contrast( '#000' ) - ? '#fff' - : '#000', - } } + style={ + 'transparent' === value + ? { color: '#000' } + : { + background: value, + color: + colordColor.contrast() > + colordColor.contrast( '#000' ) + ? '#fff' + : '#000', + } + } > Date: Fri, 15 Jul 2022 09:14:55 -0700 Subject: [PATCH 2/6] Use `colord( currentValue ).alpha()` to determine transparency --- packages/components/src/color-palette/index.js | 6 +++++- .../components/src/color-palette/test/utils.ts | 17 ++++++++++++++++- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js index e8012893735de0..d4f5dd21a862af 100644 --- a/packages/components/src/color-palette/index.js +++ b/packages/components/src/color-palette/index.js @@ -162,6 +162,10 @@ export const extractColorNameFromCurrentValue = ( return __( 'Custom' ); }; +export const showTransparentBackground = ( currentValue ) => { + return colord( currentValue ).alpha() === 0; +}; + export default function ColorPalette( { clearable = true, className, @@ -229,7 +233,7 @@ export default function ColorPalette( { onClick={ onToggle } aria-label={ customColorAccessibleLabel } style={ - 'transparent' === value + showTransparentBackground( value ) ? { color: '#000' } : { background: value, diff --git a/packages/components/src/color-palette/test/utils.ts b/packages/components/src/color-palette/test/utils.ts index 32103883a11ea2..7441de3ca8aa45 100644 --- a/packages/components/src/color-palette/test/utils.ts +++ b/packages/components/src/color-palette/test/utils.ts @@ -1,7 +1,10 @@ /** * Internal dependencies */ -import { extractColorNameFromCurrentValue } from '../'; +import { + extractColorNameFromCurrentValue, + showTransparentBackground, +} from '../'; describe( 'ColorPalette: Utils', () => { describe( 'extractColorNameFromCurrentValue', () => { @@ -21,4 +24,16 @@ describe( 'ColorPalette: Utils', () => { expect( result ).toBe( 'Blue' ); } ); } ); + describe( 'showTransparentBackground', () => { + test( 'should return true for transparent colors', () => { + expect( showTransparentBackground( 'transparent' ) ).toBe( true ); + expect( showTransparentBackground( '#75757500' ) ).toBe( true ); + } ); + + test( 'should return true for transparent colors', () => { + expect( showTransparentBackground( '#FFF' ) ).toBe( false ); + expect( showTransparentBackground( '#757575' ) ).toBe( false ); + expect( showTransparentBackground( '#f5f5f524' ) ).toBe( false ); // 0.14 alpha. + } ); + } ); } ); From d482da9668142d7b8fefb39ec2f59487c9d11b10 Mon Sep 17 00:00:00 2001 From: Daniel Bachhuber Date: Tue, 26 Jul 2022 12:01:33 -0700 Subject: [PATCH 3/6] Add a test case for `undefined` value --- packages/components/src/color-palette/test/utils.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/components/src/color-palette/test/utils.ts b/packages/components/src/color-palette/test/utils.ts index 7441de3ca8aa45..7d04370740ea73 100644 --- a/packages/components/src/color-palette/test/utils.ts +++ b/packages/components/src/color-palette/test/utils.ts @@ -25,6 +25,9 @@ describe( 'ColorPalette: Utils', () => { } ); } ); describe( 'showTransparentBackground', () => { + test( 'should return undefined for transparent colors', () => { + expect( undefined ).toBe( undefined ); + } ); test( 'should return true for transparent colors', () => { expect( showTransparentBackground( 'transparent' ) ).toBe( true ); expect( showTransparentBackground( '#75757500' ) ).toBe( true ); From 23f9b5188933363d350d1dee408a71119fed3869 Mon Sep 17 00:00:00 2001 From: Daniel Bachhuber Date: Tue, 26 Jul 2022 12:04:11 -0700 Subject: [PATCH 4/6] Add a changelog entry --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index bac27e61ad0e57..d73bbe6b79a85b 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -19,6 +19,7 @@ - `InputControl`: Implement wrapper subcomponents for adding responsive padding to `prefix`/`suffix` ([#42378](https://github.com/WordPress/gutenberg/pull/42378)). - `SelectControl`: Add flag for larger default size ([#42456](https://github.com/WordPress/gutenberg/pull/42456/)). - `UnitControl`: Update unit select's focus styles to match input's ([#42383](https://github.com/WordPress/gutenberg/pull/42383)). +- `ColorPalette`: Display checkered preview background when `value` is transparent ([#42232](https://github.com/WordPress/gutenberg/pull/42232)). - `CustomSelectControl`: Add size variants ([#42460](https://github.com/WordPress/gutenberg/pull/42460/)). - `CustomSelectControl`: Add flag to opt in to unconstrained width ([#42460](https://github.com/WordPress/gutenberg/pull/42460/)). - `Dropdown`: Implement wrapper subcomponent for adding different padding to the dropdown content ([#42595](https://github.com/WordPress/gutenberg/pull/42595/)). From fe2d69811a79efcf4d521ec5bd7a2016d3092649 Mon Sep 17 00:00:00 2001 From: Daniel Bachhuber Date: Tue, 26 Jul 2022 12:06:40 -0700 Subject: [PATCH 5/6] Clarify test description Co-authored-by: Lena Morita --- packages/components/src/color-palette/test/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/color-palette/test/utils.ts b/packages/components/src/color-palette/test/utils.ts index 7d04370740ea73..b657a33f54f064 100644 --- a/packages/components/src/color-palette/test/utils.ts +++ b/packages/components/src/color-palette/test/utils.ts @@ -33,7 +33,7 @@ describe( 'ColorPalette: Utils', () => { expect( showTransparentBackground( '#75757500' ) ).toBe( true ); } ); - test( 'should return true for transparent colors', () => { + test( 'should return false for non-transparent colors', () => { expect( showTransparentBackground( '#FFF' ) ).toBe( false ); expect( showTransparentBackground( '#757575' ) ).toBe( false ); expect( showTransparentBackground( '#f5f5f524' ) ).toBe( false ); // 0.14 alpha. From 43afb0cdc47f06010449984cf644548b4fbe42fc Mon Sep 17 00:00:00 2001 From: Daniel Bachhuber Date: Tue, 26 Jul 2022 14:02:45 -0700 Subject: [PATCH 6/6] Updated expected behavior for `undefined` value --- packages/components/src/color-palette/index.js | 3 +++ packages/components/src/color-palette/test/utils.ts | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js index d4f5dd21a862af..024fabdb672028 100644 --- a/packages/components/src/color-palette/index.js +++ b/packages/components/src/color-palette/index.js @@ -163,6 +163,9 @@ export const extractColorNameFromCurrentValue = ( }; export const showTransparentBackground = ( currentValue ) => { + if ( typeof currentValue === 'undefined' ) { + return true; + } return colord( currentValue ).alpha() === 0; }; diff --git a/packages/components/src/color-palette/test/utils.ts b/packages/components/src/color-palette/test/utils.ts index b657a33f54f064..bbb0d82c6e91d7 100644 --- a/packages/components/src/color-palette/test/utils.ts +++ b/packages/components/src/color-palette/test/utils.ts @@ -25,8 +25,8 @@ describe( 'ColorPalette: Utils', () => { } ); } ); describe( 'showTransparentBackground', () => { - test( 'should return undefined for transparent colors', () => { - expect( undefined ).toBe( undefined ); + test( 'should return true for undefined color values', () => { + expect( showTransparentBackground( undefined ) ).toBe( true ); } ); test( 'should return true for transparent colors', () => { expect( showTransparentBackground( 'transparent' ) ).toBe( true );