From 9cdf1d28426468ab35730a9dfd0abef121fc1a45 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Sun, 18 Oct 2020 14:57:04 -0700 Subject: [PATCH 1/5] add default label to AnglePickerControl --- packages/components/src/angle-picker-control/index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/components/src/angle-picker-control/index.js b/packages/components/src/angle-picker-control/index.js index 9d6e52c5b7e845..643f835168d5a0 100644 --- a/packages/components/src/angle-picker-control/index.js +++ b/packages/components/src/angle-picker-control/index.js @@ -7,6 +7,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { useInstanceId } from '@wordpress/compose'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -22,10 +23,11 @@ import { export default function AnglePickerControl( { className, + hideLabelFromVision, id: idProp, - value, + label = __( 'Angle' ), onChange, - label, + value, ...props } ) { const instanceId = useInstanceId( @@ -45,6 +47,7 @@ export default function AnglePickerControl( { return ( Date: Sun, 18 Oct 2020 15:02:48 -0700 Subject: [PATCH 2/5] update AnglePickerControl usage in CustomGradientPicker --- packages/components/src/custom-gradient-picker/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/custom-gradient-picker/index.js b/packages/components/src/custom-gradient-picker/index.js index 57220e5b40cf23..3ad7319eeeb38d 100644 --- a/packages/components/src/custom-gradient-picker/index.js +++ b/packages/components/src/custom-gradient-picker/index.js @@ -43,8 +43,9 @@ const GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => { }; return ( ); }; From cde8fb9fab549ef8b43fbaa342f56e7946df4a84 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Sun, 18 Oct 2020 15:09:27 -0700 Subject: [PATCH 3/5] polish design details in CustomGradientPicker - switch label position to side on control for gradient type - use flex blocks to wrap type and angle controls --- .../src/custom-gradient-picker/index.js | 16 ++++++++++------ .../styles/custom-gradient-picker-styles.js | 10 +++++++--- 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/packages/components/src/custom-gradient-picker/index.js b/packages/components/src/custom-gradient-picker/index.js index 3ad7319eeeb38d..39e63ab404ed2d 100644 --- a/packages/components/src/custom-gradient-picker/index.js +++ b/packages/components/src/custom-gradient-picker/index.js @@ -13,7 +13,7 @@ import { __ } from '@wordpress/i18n'; */ import AnglePickerControl from '../angle-picker-control'; import CustomGradientBar from './custom-gradient-bar'; -import { Flex, FlexItem } from '../flex'; +import { Flex } from '../flex'; import SelectControl from '../select-control'; import { getGradientParsed } from './utils'; import { serializeGradient } from './serializer'; @@ -22,7 +22,10 @@ import { HORIZONTAL_GRADIENT_ORIENTATION, GRADIENT_OPTIONS, } from './constants'; -import { SelectWrapper } from './styles/custom-gradient-picker-styles'; +import { + AccessoryWrapper, + SelectWrapper, +} from './styles/custom-gradient-picker-styles'; const GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => { const angle = get( @@ -86,6 +89,7 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => { - { type === 'linear-gradient' && ( - + + { type === 'linear-gradient' && ( - - ) } + ) } + ); diff --git a/packages/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.js b/packages/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.js index f3d39295b163f3..f8c99b5a8800d6 100644 --- a/packages/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.js +++ b/packages/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.js @@ -5,8 +5,12 @@ import styled from '@emotion/styled'; /** * Internal dependencies */ -import { FlexItem } from '../../flex'; +import { FlexBlock } from '../../flex'; -export const SelectWrapper = styled( FlexItem )` - width: 110px; +export const SelectWrapper = styled( FlexBlock )` + flex-grow: 5; +`; + +export const AccessoryWrapper = styled( FlexBlock )` + flex-grow: 4; `; From 7f8f3ab79fecba12e9711dfc32e6b92b23a57c20 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Sun, 18 Oct 2020 15:19:43 -0700 Subject: [PATCH 4/5] improve design related flex usage in AnglePickerControl --- .../src/angle-picker-control/index.js | 17 +++++++---------- .../styles/angle-picker-control-styles.js | 6 +----- 2 files changed, 8 insertions(+), 15 deletions(-) diff --git a/packages/components/src/angle-picker-control/index.js b/packages/components/src/angle-picker-control/index.js index 643f835168d5a0..3b089f1ccefcc7 100644 --- a/packages/components/src/angle-picker-control/index.js +++ b/packages/components/src/angle-picker-control/index.js @@ -13,13 +13,10 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import BaseControl from '../base-control'; -import { FlexBlock } from '../flex'; +import { FlexBlock, FlexItem } from '../flex'; import NumberControl from '../number-control'; import AngleCircle from './angle-circle'; -import { - Root, - NumberControlWrapper, -} from './styles/angle-picker-control-styles'; +import { Root } from './styles/angle-picker-control-styles'; export default function AnglePickerControl( { className, @@ -52,8 +49,8 @@ export default function AnglePickerControl( { label={ label } { ...props } > - - + + - - + + ); diff --git a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js index f63f9bc6d1b00a..f025cddb77907c 100644 --- a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js +++ b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js @@ -6,7 +6,7 @@ import styled from '@emotion/styled'; /** * Internal dependencies */ -import { Flex, FlexItem } from '../../flex'; +import { Flex } from '../../flex'; import { color } from '../../utils/style-mixins'; const CIRCLE_SIZE = 30; @@ -15,10 +15,6 @@ export const Root = styled( Flex )` max-width: 200px; `; -export const NumberControlWrapper = styled( FlexItem )` - width: 80px; -`; - export const CircleRoot = styled.div` border-radius: 50%; border: 1px solid ${ color( 'ui.borderLight' ) }; From f23a398a2fdd061c21691a64d91bdae65d13d662 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Sun, 18 Oct 2020 16:35:12 -0700 Subject: [PATCH 5/5] improve spacing related styles for CircularOptionPicker for CircularOptionPicker - restore default horizontal spacing as equal to vertical - improve accuracy of negative margin swatch wrapping correction - drop a purposeless rule for PanelColorGradientSettingsInner - create media query bound optimization for six swatches per line --- .../components/colors-gradients/style.scss | 22 +++++++++++++++++++ .../src/circular-option-picker/style.scss | 8 +++---- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss index 7bc533fd8ec601..861710065f7612 100644 --- a/packages/block-editor/src/components/colors-gradients/style.scss +++ b/packages/block-editor/src/components/colors-gradients/style.scss @@ -23,4 +23,26 @@ &.is-opened &__panel-title .component-color-indicator { display: none; } + + // Must equal $color-palette-circle-size from: + // @wordpress/components/src/circular-option-picker/style.scss + $swatch-size: 28px; + + // Optimize fit of six swatches per line using calc() to create variable + // spacing that mimics a "justified/space-between" layout and works with + // or without scrollbars + @media screen and (min-width: $break-medium) { + // Overrides the default negative margin + .components-circular-option-picker__swatches { + margin-right: 0; + } + // Figures the spacing + .components-circular-option-picker__option-wrapper { + margin-right: calc((100% - (#{$swatch-size} * 6)) / 5); + } + // Removes the right margin on every sixth swatch + .components-circular-option-picker__option-wrapper:nth-child(6n + 6) { + margin-right: 0; + } + } } diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss index 0e23e51d24189a..0dc42542dc80ba 100644 --- a/packages/components/src/circular-option-picker/style.scss +++ b/packages/components/src/circular-option-picker/style.scss @@ -4,16 +4,16 @@ $color-palette-circle-spacing: 12px; .components-circular-option-picker { display: inline-block; width: 100%; - margin-right: -10px; .components-circular-option-picker__custom-clear-wrapper { display: flex; justify-content: flex-end; } - // Account for scrollbar or no scrollbar. + // Effectively negates the end swatch spacing to keep the swatches + // from wrapping before necessary. .components-circular-option-picker__swatches { - margin-right: -$grid-unit-20; + margin-right: -$color-palette-circle-spacing; } } @@ -21,7 +21,7 @@ $color-palette-circle-spacing: 12px; display: inline-block; height: $color-palette-circle-size; width: $color-palette-circle-size; - margin-right: $color-palette-circle-spacing + $grid-unit-05; + margin-right: $color-palette-circle-spacing; margin-bottom: $color-palette-circle-spacing; vertical-align: top; transform: scale(1);