Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update color palette popover style #41900

Merged
merged 10 commits into from
Jul 26, 2022
Merged

Update color palette popover style #41900

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c29f838
Style palette popover
jameskoster Jun 23, 2022
d54c4cb
Remove bottom margin using prop
mirka Jul 21, 2022
0413271
Update snapshot
mirka Jul 21, 2022
598af90
Use DropdownContentWrapper for padding
mirka Jul 22, 2022
0ad4234
Apply changes to BorderControl
mirka Jul 22, 2022
91f7086
BorderControl: Handle reset button
mirka Jul 22, 2022
6d7026e
DropdownContentWrapper: Improve sibling margin handling
mirka Jul 22, 2022
a190d78
BorderControl: Clear our reset button top radius
mirka Jul 22, 2022
d39790a
Fix SSR issue
mirka Jul 22, 2022
0e5e0a1
Merge branch 'trunk' into update/color-palette-popover
jameskoster Jul 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/colors-gradients/control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ function ColorGradientControlInner( {

return (
<BaseControl
__nextHasNoMarginBottom
className={ classnames(
'block-editor-color-gradient-control',
className
Expand Down
10 changes: 8 additions & 2 deletions packages/block-editor/src/components/colors-gradients/dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
ColorIndicator,
Dropdown,
FlexItem,
__experimentalDropdownContentWrapper as DropdownContentWrapper,
__experimentalHStack as HStack,
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
Expand Down Expand Up @@ -155,10 +156,15 @@ export default function ColorGradientSettingsDropdown( {
<Dropdown
popoverProps={ popoverProps }
className="block-editor-tools-panel-color-gradient-settings__dropdown"
contentClassName="block-editor-panel-color-gradient-settings__dropdown-content"
renderToggle={ renderToggle( toggleSettings ) }
renderContent={ () => (
<ColorGradientControl { ...controlProps } />
<DropdownContentWrapper paddingSize="medium">
<div className="block-editor-panel-color-gradient-settings__dropdown-content">
<ColorGradientControl
{ ...controlProps }
/>
</div>
</DropdownContentWrapper>
) }
/>
</WithToolsPanelItem>
Expand Down
15 changes: 7 additions & 8 deletions packages/block-editor/src/components/colors-gradients/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
// 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;
Expand All @@ -18,11 +23,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;
Expand All @@ -40,11 +40,10 @@

}

.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
width: $sidebar-width;
.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%);
Expand Down
93 changes: 48 additions & 45 deletions packages/components/src/border-control/border-control-dropdown/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -141,7 +142,6 @@ const BorderControlDropdown = (
onReset,
onColorChange,
onStyleChange,
popoverClassName,
popoverContentClassName,
popoverControlsClassName,
resetButtonClassName,
Expand Down Expand Up @@ -190,51 +190,55 @@ const BorderControlDropdown = (

const renderContent = ( { onClose }: PopoverProps ) => (
<>
<VStack className={ popoverControlsClassName } spacing={ 6 }>
{ showDropdownHeader ? (
<HStack>
<StyledLabel>{ __( 'Border color' ) }</StyledLabel>
<Button
isSmall
label={ __( 'Close border color' ) }
icon={ closeSmall }
onClick={ onClose }
/>
</HStack>
) : undefined }
<ColorPalette
className={ popoverContentClassName }
value={ color }
onChange={ onColorChange }
{ ...{ colors, disableCustomColors } }
__experimentalHasMultipleOrigins={
__experimentalHasMultipleOrigins
}
__experimentalIsRenderedInSidebar={
__experimentalIsRenderedInSidebar
}
clearable={ false }
enableAlpha={ enableAlpha }
/>
{ enableStyle && (
<BorderControlStylePicker
label={ __( 'Style' ) }
value={ style }
onChange={ onStyleChange }
<DropdownContentWrapper paddingSize="medium">
<VStack className={ popoverControlsClassName } spacing={ 6 }>
{ showDropdownHeader ? (
<HStack>
<StyledLabel>{ __( 'Border color' ) }</StyledLabel>
<Button
isSmall
label={ __( 'Close border color' ) }
icon={ closeSmall }
onClick={ onClose }
/>
</HStack>
) : undefined }
<ColorPalette
className={ popoverContentClassName }
value={ color }
onChange={ onColorChange }
{ ...{ colors, disableCustomColors } }
__experimentalHasMultipleOrigins={
__experimentalHasMultipleOrigins
}
__experimentalIsRenderedInSidebar={
__experimentalIsRenderedInSidebar
}
clearable={ false }
enableAlpha={ enableAlpha }
/>
) }
</VStack>
{ enableStyle && (
<BorderControlStylePicker
label={ __( 'Style' ) }
value={ style }
onChange={ onStyleChange }
/>
) }
</VStack>
</DropdownContentWrapper>
{ showResetButton && (
<Button
className={ resetButtonClassName }
variant="tertiary"
onClick={ () => {
onReset();
onClose();
} }
>
{ __( 'Reset to default' ) }
</Button>
<DropdownContentWrapper paddingSize="none">
<Button
className={ resetButtonClassName }
variant="tertiary"
onClick={ () => {
onReset();
onClose();
} }
>
{ __( 'Reset to default' ) }
</Button>
</DropdownContentWrapper>
) }
</>
);
Expand All @@ -245,7 +249,6 @@ const BorderControlDropdown = (
renderContent={ renderContent }
popoverProps={ {
...__unstablePopoverProps,
className: popoverClassName,
} }
{ ...otherProps }
ref={ forwardedRef }
Expand Down
5 changes: 0 additions & 5 deletions packages/components/src/border-control/border-control-dropdown/hook.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ] );
Expand All @@ -92,7 +88,6 @@ export function useBorderControlDropdown(
onColorChange,
onStyleChange,
onReset,
popoverClassName,
popoverContentClassName,
popoverControlsClassName,
resetButtonClassName,
Expand Down
3 changes: 3 additions & 0 deletions packages/components/src/border-control/stories/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
15 changes: 7 additions & 8 deletions packages/components/src/border-control/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -174,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;
}
`;
Expand Down
9 changes: 8 additions & 1 deletion packages/components/src/dropdown/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-of-type {
margin-top: ${ space( -2 ) };
}
&:last-of-type {
margin-bottom: ${ space( -2 ) };
}
${ padding };
`;