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

Jump to bottom

Global Styles Sidebar: adjust icon vertical alignment with labels #39982

Merged
merged 9 commits into from
Apr 5, 2022
Merged

Global Styles Sidebar: adjust icon vertical alignment with labels #39982

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
adaa637
Global Styles: fix icon vertical alignment in `NavigatorButton`
ciampo Apr 1, 2022
5a144d9
Global Styles: fix icon vertical alignment in root screen
ciampo Apr 1, 2022
3c18a6a
Global Styles: fix icon vertical alignment in block list screen
ciampo Apr 1, 2022
9293746
Global Styles: fix icon vertical alignment in colors screen
ciampo Apr 1, 2022
26bbed8
Global Styles: fix icon vertical alignment in palette panel
ciampo Apr 1, 2022
3ad77e4
Move `ColorIndicator` styles to sass
ciampo Apr 1, 2022
27887aa
Introduce local `ColorIndicatorWithSpacer` component, refactor `Color…
ciampo Apr 5, 2022
d33b9a4
Remove `ZStack` fix, now unnecessary
ciampo Apr 5, 2022
daf5048
Use fixed height wrapper instead of spacer
ciampo Apr 5, 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
23 changes: 23 additions & 0 deletions packages/edit-site/src/components/global-styles/color-indicator-wrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { Flex } from '@wordpress/components';

function ColorIndicatorWrapper( { className, ...props } ) {
return (
<Flex
className={ classnames(
'edit-site-global-styles__color-indicator-wrapper',
className
) }
{ ...props }
/>
);
}

export default ColorIndicatorWrapper;
4 changes: 1 addition & 3 deletions packages/edit-site/src/components/global-styles/navigation-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,7 @@ function GenericNavigationButton( { icon, children, ...props } ) {
<Item { ...props }>
{ icon && (
<HStack justify="flex-start">
<FlexItem>
<Icon icon={ icon } size={ 24 } />
</FlexItem>
<Icon icon={ icon } size={ 24 } />
<FlexItem>{ children }</FlexItem>
</HStack>
) }
Expand Down
19 changes: 8 additions & 11 deletions packages/edit-site/src/components/global-styles/palette.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
__experimentalHStack as HStack,
__experimentalZStack as ZStack,
__experimentalVStack as VStack,
FlexBlock,
ColorIndicator,
} from '@wordpress/components';
import { __, _n, sprintf } from '@wordpress/i18n';
Expand All @@ -19,6 +18,7 @@ import { useMemo } from '@wordpress/element';
import Subtitle from './subtitle';
import { NavigationButton } from './navigation-button';
import { useSetting } from './hooks';
import ColorIndicatorWrapper from './color-indicator-wrapper';

const EMPTY_COLORS = [];

Expand Down Expand Up @@ -64,16 +64,13 @@ function Palette( { name } ) {
colors.length === 0 ? 'row-reverse' : 'row'
}
>
<FlexBlock>
<ZStack isLayered={ false } offset={ -8 }>
{ colors.slice( 0, 5 ).map( ( { color } ) => (
<ColorIndicator
key={ color }
colorValue={ color }
/>
) ) }
</ZStack>
</FlexBlock>
<ZStack isLayered={ false } offset={ -8 }>
{ colors.slice( 0, 5 ).map( ( { color } ) => (
<ColorIndicatorWrapper key={ color }>
<ColorIndicator colorValue={ color } />
</ColorIndicatorWrapper>
) ) }
</ZStack>
<FlexItem>{ paletteButtonText }</FlexItem>
</HStack>
</NavigationButton>
Expand Down
4 changes: 1 addition & 3 deletions packages/edit-site/src/components/global-styles/screen-block-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,7 @@ function BlockMenuItem( { block } ) {
return (
<NavigationButton path={ '/blocks/' + block.name }>
<HStack justify="flex-start">
<FlexItem>
<BlockIcon icon={ block.icon } />
</FlexItem>
<BlockIcon icon={ block.icon } />
<FlexItem>{ block.title }</FlexItem>
</HStack>
</NavigationButton>
Expand Down
13 changes: 7 additions & 6 deletions packages/edit-site/src/components/global-styles/screen-colors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import Palette from './palette';
import { NavigationButton } from './navigation-button';
import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
import Subtitle from './subtitle';
import ColorIndicatorWrapper from './color-indicator-wrapper';

function BackgroundColorItem( { name, parentMenu } ) {
const supports = getSupportedGlobalStylesPanels( name );
Expand All @@ -34,11 +35,11 @@ function BackgroundColorItem( { name, parentMenu } ) {
return (
<NavigationButton path={ parentMenu + '/colors/background' }>
<HStack justify="flex-start">
<FlexItem>
<ColorIndicatorWrapper>
<ColorIndicator
colorValue={ gradientValue ?? backgroundColor }
/>
</FlexItem>
</ColorIndicatorWrapper>
<FlexItem>{ __( 'Background' ) }</FlexItem>
</HStack>
</NavigationButton>
Expand All @@ -57,9 +58,9 @@ function TextColorItem( { name, parentMenu } ) {
return (
<NavigationButton path={ parentMenu + '/colors/text' }>
<HStack justify="flex-start">
<FlexItem>
<ColorIndicatorWrapper>
<ColorIndicator colorValue={ color } />
</FlexItem>
</ColorIndicatorWrapper>
<FlexItem>{ __( 'Text' ) }</FlexItem>
</HStack>
</NavigationButton>
Expand All @@ -78,9 +79,9 @@ function LinkColorItem( { name, parentMenu } ) {
return (
<NavigationButton path={ parentMenu + '/colors/link' }>
<HStack justify="flex-start">
<FlexItem>
<ColorIndicatorWrapper>
<ColorIndicator colorValue={ color } />
</FlexItem>
</ColorIndicatorWrapper>
<FlexItem>{ __( 'Links' ) }</FlexItem>
</HStack>
</NavigationButton>
Expand Down
22 changes: 8 additions & 14 deletions packages/edit-site/src/components/global-styles/screen-root.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,13 +46,11 @@ function ScreenRoot() {
<NavigationButton path="/variations">
<HStack justify="space-between">
<FlexItem>{ __( 'Browse styles' ) }</FlexItem>
<FlexItem>
<Icon
icon={
isRTL() ? chevronLeft : chevronRight
}
/>
</FlexItem>
<Icon
icon={
isRTL() ? chevronLeft : chevronRight
}
/>
</HStack>
</NavigationButton>
) }
Expand All @@ -75,13 +73,9 @@ function ScreenRoot() {
<NavigationButton path="/blocks">
<HStack justify="space-between">
<FlexItem>{ __( 'Blocks' ) }</FlexItem>
<FlexItem>
<Icon
icon={
isRTL() ? chevronLeft : chevronRight
}
/>
</FlexItem>
<Icon
icon={ isRTL() ? chevronLeft : chevronRight }
/>
</HStack>
</NavigationButton>
</ItemGroup>
Expand Down
4 changes: 4 additions & 0 deletions packages/edit-site/src/components/global-styles/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,3 +93,7 @@
}
}

.edit-site-global-styles__color-indicator-wrapper {
// Match the height of the rest of the icons (24px).
height: $grid-unit * 3;
}