Skip to content

Commit

Permalink
ColorPalette: Improve color name readability (WordPress#50450)
Browse files Browse the repository at this point in the history
Co-authored-by: Marco Ciampini <[email protected]>
  • Loading branch information
2 people authored and sethrubenstein committed Jul 13, 2023
1 parent b6a3dc7 commit ec08e17
Show file tree
Hide file tree
Showing 6 changed files with 314 additions and 182 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -78,45 +78,52 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: flex-start;
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
gap: calc(4px * 2);
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
width: 100%;
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 0;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.emotion-10>* {
min-width: 0;
min-height: 0;
}
.emotion-13 {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
max-height: 100%;
max-width: 100%;
.emotion-12 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: calc(4px * 0.5);
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.emotion-12>* {
min-height: 0;
min-width: 0;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.emotion-15 {
.emotion-14 {
display: block;
max-height: 100%;
max-width: 100%;
min-height: 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div>
Expand Down Expand Up @@ -157,30 +164,39 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
class="components-dropdown"
tabindex="-1"
>
<button
aria-expanded="false"
aria-haspopup="true"
aria-label="Custom color picker. The currently selected color is called "red" and has a value of "f00"."
class="components-flex components-color-palette__custom-color emotion-10 emotion-5"
<div
class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-wrapper emotion-10 emotion-5"
data-wp-c16t="true"
data-wp-component="Flex"
style="background: rgb(255, 0, 0); color: rgb(0, 0, 0);"
data-wp-component="VStack"
>
<span
class="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-13 emotion-5"
data-wp-c16t="true"
data-wp-component="FlexItem"
>
red
</span>
<span
class="components-flex-item components-color-palette__custom-color-value emotion-15 emotion-5"
<button
aria-expanded="false"
aria-haspopup="true"
aria-label="Custom color picker. The currently selected color is called "red" and has a value of "#-f-0-0"."
class="components-color-palette__custom-color-button"
style="background: rgb(255, 0, 0);"
/>
<div
class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-text-wrapper emotion-12 emotion-5"
data-wp-c16t="true"
data-wp-component="FlexItem"
data-wp-component="VStack"
>
f00
</span>
</button>
<span
class="components-truncate components-color-palette__custom-color-name emotion-14 emotion-5"
data-wp-c16t="true"
data-wp-component="Truncate"
>
red
</span>
<span
class="components-truncate components-color-palette__custom-color-value components-color-palette__custom-color-value--is-hex emotion-14 emotion-5"
data-wp-c16t="true"
data-wp-component="Truncate"
>
#f00
</span>
</div>
</div>
</div>
<div
class="components-circular-option-picker"
Expand Down
6 changes: 2 additions & 4 deletions packages/components/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,15 @@

## Unreleased

### Enhancements

- `Button`: Add `__next32pxSmallSize` prop to opt into the new 32px size when the `isSmall` prop is enabled ([#51012](https://github.com/WordPress/gutenberg/pull/51012)).

### Bug Fix

- `FocalPointUnitControl`: Add aria-labels ([#50993](https://github.com/WordPress/gutenberg/pull/50993)).

### Enhancements

- Wrapped `TabPanel` in a `forwardRef` call ([#50199](https://github.com/WordPress/gutenberg/pull/50199)).
- `ColorPalette`: Improve readability of color name and value, and improve rendering of partially transparent colors ([#50450](https://github.com/WordPress/gutenberg/pull/50450)).
- `Button`: Add `__next32pxSmallSize` prop to opt into the new 32px size when the `isSmall` prop is enabled ([#51012](https://github.com/WordPress/gutenberg/pull/51012)).

### Experimental

Expand Down
93 changes: 47 additions & 46 deletions packages/components/src/color-palette/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import type { ForwardedRef } from 'react';
import { colord, extend } from 'colord';
import namesPlugin from 'colord/plugins/names';
import a11yPlugin from 'colord/plugins/a11y';
import classnames from 'classnames';

/**
* WordPress dependencies
Expand All @@ -19,7 +20,6 @@ import Dropdown from '../dropdown';
import { ColorPicker } from '../color-picker';
import CircularOptionPicker from '../circular-option-picker';
import { VStack } from '../v-stack';
import { Flex, FlexItem } from '../flex';
import { Truncate } from '../truncate';
import { ColorHeading } from './styles';
import DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';
Expand All @@ -37,7 +37,6 @@ import {
extractColorNameFromCurrentValue,
isMultiplePaletteArray,
normalizeColorValue,
showTransparentBackground,
} from './utils';

extend( [ namesPlugin, a11yPlugin ] );
Expand Down Expand Up @@ -219,21 +218,18 @@ function UnforwardedColorPalette(
/>
</DropdownContentWrapper>
);
const isHex = value?.startsWith( '#' );

const colordColor = colord( normalizedColorValue ?? '' );

const valueWithoutLeadingHash = value?.startsWith( '#' )
? value.substring( 1 )
: value ?? '';

const customColorAccessibleLabel = !! valueWithoutLeadingHash
// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
const displayValue = value?.replace( /^var\((.+)\)$/, '$1' );
const customColorAccessibleLabel = !! displayValue
? sprintf(
// translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
// translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
__(
'Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'
),
buttonLabelName,
valueWithoutLeadingHash
isHex ? displayValue.split( '' ).join( '-' ) : displayValue
)
: __( 'Custom color picker.' );

Expand All @@ -257,43 +253,48 @@ function UnforwardedColorPalette(
isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
renderContent={ renderCustomColorPicker }
renderToggle={ ( { isOpen, onToggle } ) => (
<Flex
as={ 'button' }
ref={ customColorPaletteCallbackRef }
justify="space-between"
align="flex-start"
className="components-color-palette__custom-color"
aria-expanded={ isOpen }
aria-haspopup="true"
onClick={ onToggle }
aria-label={ customColorAccessibleLabel }
style={
showTransparentBackground( value )
? { color: '#000' }
: {
background: value,
color:
colordColor.contrast() >
colordColor.contrast( '#000' )
? '#fff'
: '#000',
}
}
<VStack
className="components-color-palette__custom-color-wrapper"
spacing={ 0 }
>
<FlexItem
isBlock
as={ Truncate }
className="components-color-palette__custom-color-name"
>
{ buttonLabelName }
</FlexItem>
<FlexItem
as="span"
className="components-color-palette__custom-color-value"
<button
ref={ customColorPaletteCallbackRef }
className="components-color-palette__custom-color-button"
aria-expanded={ isOpen }
aria-haspopup="true"
onClick={ onToggle }
aria-label={ customColorAccessibleLabel }
style={ {
background: value,
} }
/>
<VStack
className="components-color-palette__custom-color-text-wrapper"
spacing={ 0.5 }
>
{ valueWithoutLeadingHash }
</FlexItem>
</Flex>
<Truncate className="components-color-palette__custom-color-name">
{ value
? buttonLabelName
: 'No color selected' }
</Truncate>
{ /*
This `Truncate` is always rendered, even if
there is no `displayValue`, to ensure the layout
does not shift
*/ }
<Truncate
className={ classnames(
'components-color-palette__custom-color-value',
{
'components-color-palette__custom-color-value--is-hex':
isHex,
}
) }
>
{ displayValue }
</Truncate>
</VStack>
</VStack>
) }
/>
) }
Expand Down
76 changes: 57 additions & 19 deletions packages/components/src/color-palette/style.scss
Original file line number Diff line number Diff line change
@@ -1,41 +1,79 @@
.components-color-palette__custom-color {
$border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);

.components-color-palette__custom-color-wrapper {
position: relative;
z-index: 0;
}
.components-color-palette__custom-color-button {
position: relative;
border: none;
background: none;
border-radius: $radius-block-ui;
height: $grid-unit-80;
padding: $grid-unit-15;
font-family: inherit;
width: 100%;
// The background image creates a checkerboard pattern. Ignore rtlcss to
// make it work both in LTR and RTL.
// See https://github.com/WordPress/gutenberg/pull/42510
/*rtl:begin:ignore*/
background-image:
repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
background-position: 0 0, 24px 24px;
/*rtl:end:ignore*/
background-size: calc(2 * 24px) calc(2 * 24px);
box-sizing: border-box;
color: $white;
cursor: pointer;
box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
// Show a thin outline in Windows high contrast mode.
outline: 1px solid transparent;
border-radius: $radius-block-ui $radius-block-ui 0 0;
box-shadow: $border-as-box-shadow;

&:focus {
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
// Show a outline in Windows high contrast mode.
outline-width: 2px;
}

&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
// The background image creates a checkerboard pattern. Ignore rtlcss to
// make it work both in LTR and RTL.
// See https://github.com/WordPress/gutenberg/pull/42510
/*rtl:begin:ignore*/
background-image:
repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
background-position: 0 0, 24px 24px;
/*rtl:end:ignore*/
background-size: calc(2 * 24px) calc(2 * 24px);
}
}

.components-color-palette__custom-color-text-wrapper {
padding: $grid-unit-15 $grid-unit-20;
border-radius: 0 0 $radius-block-ui $radius-block-ui;
position: relative;
font-size: $default-font-size;

// Add a border with the same technique as the button above,
// but only for left, bottom, and right sides.
box-shadow:
inset 0 -1 * $border-width 0 0 rgba(0, 0, 0, 0.2),
inset $border-width 0 0 0 rgba(0, 0, 0, 0.2),
inset -1 * $border-width 0 0 0 rgba(0, 0, 0, 0.2);
}

.components-color-palette__custom-color-name {
text-align: left;
color: $components-color-foreground;
margin: 0 $border-width;
}

.components-color-palette__custom-color-value {
margin-left: $grid-unit-20;
text-transform: uppercase;
color: $gray-700;

&--is-hex {
text-transform: uppercase;
}

// Add a zero-width space when this element is empty to preserve
// a minimum height of 1 line of text, and avoid layout jumps.
&:empty::after {
content: "\200B";
visibility: hidden;
}
}
Loading

0 comments on commit ec08e17

Please sign in to comment.