From c29f8381a4ac751d8ef637314d4386cffc0a272b Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 23 Jun 2022 10:35:46 +0100 Subject: [PATCH 1/9] Style palette popover --- .../src/components/colors-gradients/style.scss | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss index 1db1d70364209..3a4ca14867acd 100644 --- a/packages/block-editor/src/components/colors-gradients/style.scss +++ b/packages/block-editor/src/components/colors-gradients/style.scss @@ -1,7 +1,16 @@ +// Must equal $color-palette-circle-size from: +// @wordpress/components/src/circular-option-picker/style.scss +$swatch-size: 28px; +$swatch-gap: 12px; + .block-editor-color-gradient-control { .block-editor-color-gradient-control__color-indicator { margin-bottom: $grid-unit-15; } + + > .components-base-control__field { + margin-bottom: 0; + } } .block-editor-color-gradient-control__fieldset { @@ -18,11 +27,6 @@ } .block-editor-panel-color-gradient-settings { - - // Must equal $color-palette-circle-size from: - // @wordpress/components/src/circular-option-picker/style.scss - $swatch-size: 28px; - @media screen and (min-width: $break-medium) { .components-circular-option-picker__swatches { display: grid; @@ -41,7 +45,8 @@ } .block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content { - width: $sidebar-width; + width: ( $swatch-size * 6 ) + ( $swatch-gap * 5 ) + ( $grid-unit-20 * 2 ); // Ensure the popover perfectly wraps the swatches. + padding: $grid-unit-20; } From d54c4cb5290035dff58d9616e22fa607a657d24c Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 21 Jul 2022 21:00:16 +0900 Subject: [PATCH 2/9] Remove bottom margin using prop --- .../block-editor/src/components/colors-gradients/control.js | 1 + .../block-editor/src/components/colors-gradients/style.scss | 6 +----- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js index 199d5e6942daa..12d519aa474d3 100644 --- a/packages/block-editor/src/components/colors-gradients/control.js +++ b/packages/block-editor/src/components/colors-gradients/control.js @@ -115,6 +115,7 @@ function ColorGradientControlInner( { return ( .components-base-control__field { - margin-bottom: 0; - } } .block-editor-color-gradient-control__fieldset { @@ -45,7 +41,7 @@ $swatch-gap: 12px; } .block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content { - width: ( $swatch-size * 6 ) + ( $swatch-gap * 5 ) + ( $grid-unit-20 * 2 ); // Ensure the popover perfectly wraps the swatches. + width: ( $swatch-size * 6 ) + ( $swatch-gap * 5 ) + ( $grid-unit-20 * 2 ); // Ensure the popover perfectly wraps the swatches. padding: $grid-unit-20; } From 04132714695774250c2ddd18f6e9d3b141321146 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 21 Jul 2022 21:20:35 +0900 Subject: [PATCH 3/9] Update snapshot --- .../color-palette/test/__snapshots__/control.js.snap | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap index 8d6e786a984cb..5b063aa3fd9b3 100644 --- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap +++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap @@ -6,10 +6,6 @@ exports[`ColorPaletteControl matches the snapshot 1`] = ` font-size: 13px; } -.emotion-2 { - margin-bottom: calc(4px * 2); -} - .components-panel__row .emotion-2 { margin-bottom: inherit; } From 598af90d4717a0535913d36375e81338b1e6d61d Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 23 Jul 2022 00:55:21 +0900 Subject: [PATCH 4/9] Use DropdownContentWrapper for padding --- .../src/components/colors-gradients/dropdown.js | 10 ++++++++-- .../src/components/colors-gradients/style.scss | 6 ++---- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/colors-gradients/dropdown.js b/packages/block-editor/src/components/colors-gradients/dropdown.js index c8e911493033a..e44ed72775ef2 100644 --- a/packages/block-editor/src/components/colors-gradients/dropdown.js +++ b/packages/block-editor/src/components/colors-gradients/dropdown.js @@ -11,6 +11,7 @@ import { ColorIndicator, Dropdown, FlexItem, + __experimentalDropdownContentWrapper as DropdownContentWrapper, __experimentalHStack as HStack, __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; @@ -155,10 +156,15 @@ export default function ColorGradientSettingsDropdown( { ( - + +
+ +
+ ) } /> diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss index f60fe265d4a31..c024d8eaad20a 100644 --- a/packages/block-editor/src/components/colors-gradients/style.scss +++ b/packages/block-editor/src/components/colors-gradients/style.scss @@ -40,12 +40,10 @@ $swatch-gap: 12px; } -.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content { - width: ( $swatch-size * 6 ) + ( $swatch-gap * 5 ) + ( $grid-unit-20 * 2 ); // Ensure the popover perfectly wraps the swatches. - padding: $grid-unit-20; +.block-editor-panel-color-gradient-settings__dropdown-content { + width: ( $swatch-size * 6 ) + ( $swatch-gap * 5 ); // Ensure the popover perfectly wraps the swatches. } - .block-editor-panel-color-gradient-settings__color-indicator { // Show a diagonal line (crossed out) for empty swatches. background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%); From 0ad423497075573e523080a14e5e892b14a25a14 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 23 Jul 2022 01:06:11 +0900 Subject: [PATCH 5/9] Apply changes to BorderControl --- .../border-control-dropdown/component.tsx | 7 +++---- .../border-control/border-control-dropdown/hook.ts | 5 ----- .../components/src/border-control/stories/index.tsx | 3 +++ packages/components/src/border-control/styles.ts | 13 +++++-------- 4 files changed, 11 insertions(+), 17 deletions(-) diff --git a/packages/components/src/border-control/border-control-dropdown/component.tsx b/packages/components/src/border-control/border-control-dropdown/component.tsx index 41d073c03e8d8..13068fb8a3ee2 100644 --- a/packages/components/src/border-control/border-control-dropdown/component.tsx +++ b/packages/components/src/border-control/border-control-dropdown/component.tsx @@ -22,6 +22,7 @@ import { VStack } from '../../v-stack'; import { contextConnect, WordPressComponentProps } from '../../ui/context'; import { useBorderControlDropdown } from './hook'; import { StyledLabel } from '../../base-control/styles/base-control-styles'; +import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper'; import type { Color, @@ -141,7 +142,6 @@ const BorderControlDropdown = ( onReset, onColorChange, onStyleChange, - popoverClassName, popoverContentClassName, popoverControlsClassName, resetButtonClassName, @@ -189,7 +189,7 @@ const BorderControlDropdown = ( ); const renderContent = ( { onClose }: PopoverProps ) => ( - <> + { showDropdownHeader ? ( @@ -236,7 +236,7 @@ const BorderControlDropdown = ( { __( 'Reset to default' ) } ) } - + ); return ( @@ -245,7 +245,6 @@ const BorderControlDropdown = ( renderContent={ renderContent } popoverProps={ { ...__unstablePopoverProps, - className: popoverClassName, } } { ...otherProps } ref={ forwardedRef } diff --git a/packages/components/src/border-control/border-control-dropdown/hook.ts b/packages/components/src/border-control/border-control-dropdown/hook.ts index aab058874ae96..bcf90b71a59db 100644 --- a/packages/components/src/border-control/border-control-dropdown/hook.ts +++ b/packages/components/src/border-control/border-control-dropdown/hook.ts @@ -66,10 +66,6 @@ export function useBorderControlDropdown( ); }, [ border, cx, __next36pxDefaultSize ] ); - const popoverClassName = useMemo( () => { - return cx( styles.borderControlPopover ); - }, [ cx ] ); - const popoverControlsClassName = useMemo( () => { return cx( styles.borderControlPopoverControls ); }, [ cx ] ); @@ -92,7 +88,6 @@ export function useBorderControlDropdown( onColorChange, onStyleChange, onReset, - popoverClassName, popoverContentClassName, popoverControlsClassName, resetButtonClassName, diff --git a/packages/components/src/border-control/stories/index.tsx b/packages/components/src/border-control/stories/index.tsx index a4d0c95c2b241..59aa440591b7f 100644 --- a/packages/components/src/border-control/stories/index.tsx +++ b/packages/components/src/border-control/stories/index.tsx @@ -39,6 +39,9 @@ const colors = [ { name: 'Blue', color: '#72aee6' }, { name: 'Red', color: '#e65054' }, { name: 'Yellow', color: '#f2d675' }, + { name: 'Blue', color: '#72aee6' }, + { name: 'Red', color: '#e65054' }, + { name: 'Yellow', color: '#f2d675' }, ]; // Multiple origin colors. diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts index ca07db87d0e12..84dc98ce9284e 100644 --- a/packages/components/src/border-control/styles.ts +++ b/packages/components/src/border-control/styles.ts @@ -142,16 +142,13 @@ export const colorIndicatorWrapper = ( `; }; -export const borderControlPopover = css` - /* Remove padding from content, this will be re-added via inner elements*/ - && .components-popover__content { - padding: 0; - width: 264px; - } -`; +// Must equal $color-palette-circle-size from: +// @wordpress/components/src/circular-option-picker/style.scss +const swatchSize = 28; +const swatchGap = 12; export const borderControlPopoverControls = css` - padding: ${ space( 2 ) }; + width: ${ swatchSize * 6 + swatchGap * 5 }px; > div:first-of-type > ${ StyledLabel } { margin-bottom: 0; From 91f7086ad880a832d365592b7de71b6562bc8adc Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 23 Jul 2022 01:28:10 +0900 Subject: [PATCH 6/9] BorderControl: Handle reset button --- .../border-control-dropdown/component.tsx | 94 ++++++++++--------- 1 file changed, 49 insertions(+), 45 deletions(-) diff --git a/packages/components/src/border-control/border-control-dropdown/component.tsx b/packages/components/src/border-control/border-control-dropdown/component.tsx index 13068fb8a3ee2..1886d1a73ce92 100644 --- a/packages/components/src/border-control/border-control-dropdown/component.tsx +++ b/packages/components/src/border-control/border-control-dropdown/component.tsx @@ -189,54 +189,58 @@ const BorderControlDropdown = ( ); const renderContent = ( { onClose }: PopoverProps ) => ( - - - { showDropdownHeader ? ( - - { __( 'Border color' ) } - + + + ) } - + ); return ( From 6d7026eca97757853ee2a62763be06052fb908df Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 23 Jul 2022 01:31:35 +0900 Subject: [PATCH 7/9] DropdownContentWrapper: Improve sibling margin handling --- packages/components/src/dropdown/styles.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/components/src/dropdown/styles.ts b/packages/components/src/dropdown/styles.ts index 11a135dd7981d..a0923db3ac389 100644 --- a/packages/components/src/dropdown/styles.ts +++ b/packages/components/src/dropdown/styles.ts @@ -25,7 +25,14 @@ const padding = ( { paddingSize = 'small' }: DropdownContentWrapperProps ) => { export const DropdownContentWrapperDiv = styled.div< DropdownContentWrapperProps >` // Negative margin to reset (offset) the default padding on .components-popover__content - margin: ${ space( -2 ) }; + margin-left: ${ space( -2 ) }; + margin-right: ${ space( -2 ) }; + &:first-child { + margin-top: ${ space( -2 ) }; + } + &:last-child { + margin-bottom: ${ space( -2 ) }; + } ${ padding }; `; From a190d780e0ccccc261cb679e636cbebec29697b4 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 23 Jul 2022 01:37:15 +0900 Subject: [PATCH 8/9] BorderControl: Clear our reset button top radius --- packages/components/src/border-control/styles.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts index 84dc98ce9284e..c379ebe17054c 100644 --- a/packages/components/src/border-control/styles.ts +++ b/packages/components/src/border-control/styles.ts @@ -171,6 +171,8 @@ export const resetButton = css` /* Override button component styling */ && { border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 200 ] }; + border-top-left-radius: 0; + border-top-right-radius: 0; height: 46px; } `; From d39790a1705aa6ecc2b00f59ff8aa67c7a71e4f8 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 23 Jul 2022 01:58:26 +0900 Subject: [PATCH 9/9] Fix SSR issue --- packages/components/src/dropdown/styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/dropdown/styles.ts b/packages/components/src/dropdown/styles.ts index a0923db3ac389..f64e886e8be26 100644 --- a/packages/components/src/dropdown/styles.ts +++ b/packages/components/src/dropdown/styles.ts @@ -27,10 +27,10 @@ export const DropdownContentWrapperDiv = styled.div< DropdownContentWrapperProps // Negative margin to reset (offset) the default padding on .components-popover__content margin-left: ${ space( -2 ) }; margin-right: ${ space( -2 ) }; - &:first-child { + &:first-of-type { margin-top: ${ space( -2 ) }; } - &:last-child { + &:last-of-type { margin-bottom: ${ space( -2 ) }; }