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

Update the global styles sidebar to use a navigation component #34885

Merged
merged 6 commits into from
Sep 20, 2021
Merged

Update the global styles sidebar to use a navigation component #34885

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0e7d4aa
Update the global styles sidebar to use a navigation component
youknowriad Sep 16, 2021
80a0d6f
Prevent navigation styles from leaking to their content
youknowriad Sep 17, 2021
1e65bf8
Remove collapsible panels and bring more clarity to the UI
youknowriad Sep 17, 2021
ec8f7c8
Some design tweaks
youknowriad Sep 17, 2021
6dc5e41
Fix color panel
youknowriad Sep 20, 2021
e7cae22
Tweak navigation menu colors
youknowriad Sep 20, 2021
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: 3 additions & 1 deletion packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ export const PanelColorGradientSettingsInner = ( {
children,
settings,
title,
showTitle = true,
...props
} ) => {
if (
Expand Down Expand Up @@ -120,13 +121,14 @@ export const PanelColorGradientSettingsInner = ( {
/>
</span>
);

return (
<PanelBody
className={ classnames(
'block-editor-panel-color-gradient-settings',
className
) }
title={ titleElement }
title={ showTitle ? titleElement : undefined }
{ ...props }
>
{ settings.map( ( setting, index ) => (
Expand Down
4 changes: 3 additions & 1 deletion packages/block-editor/src/hooks/color-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
Expand All @@ -20,6 +20,7 @@ export default function ColorPanel( {
settings,
clientId,
enableContrastChecking = true,
showTitle = true,
} ) {
const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
const [ detectedColor, setDetectedColor ] = useState();
Expand Down Expand Up @@ -58,6 +59,7 @@ export default function ColorPanel( {
title={ __( 'Color' ) }
initialOpen={ false }
settings={ settings }
showTitle={ showTitle }
>
{ enableContrastChecking && (
<ContrastChecker
Expand Down
16 changes: 9 additions & 7 deletions packages/components/src/navigation/menu/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,13 +74,15 @@ export default function NavigationMenu( props ) {
/>
) }

<NavigationMenuTitle
hasSearch={ hasSearch }
onSearch={ onSearch }
search={ search }
title={ title }
titleAction={ titleAction }
/>
{ title && (
<NavigationMenuTitle
hasSearch={ hasSearch }
onSearch={ onSearch }
search={ search }
title={ title }
titleAction={ titleAction }
/>
) }

<NavigableMenu>
<ul aria-labelledby={ menuTitleId }>
Expand Down
54 changes: 31 additions & 23 deletions packages/components/src/navigation/styles/navigation-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,15 @@ import { isRTL } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { G2, UI } from '../../utils/colors-values';
import { BASE, G2, UI } from '../../utils/colors-values';
import Button from '../../button';
import { Text } from '../../text';
import { reduceMotion, rtl } from '../../utils';
import { space } from '../../ui/utils/space';

export const NavigationUI = styled.div`
width: 100%;
background-color: ${ G2.darkGray.primary };
box-sizing: border-box;
color: #f0f0f0;
padding: 0 ${ space( 4 ) };
overflow: hidden;
`;
Expand All @@ -47,16 +45,19 @@ export const MenuUI = styled.div`

export const MenuBackButtonUI = styled( Button )`
&.is-tertiary {
color: ${ G2.lightGray.ui };
color: inherit;
opacity: 0.7;

&:hover:not( :disabled ) {
color: #ddd;
opacity: 1;
box-shadow: none;
color: inherit;
}

&:active:not( :disabled ) {
background: transparent;
color: #ddd;
opacity: 1;
color: inherit;
}
}
`;
Expand All @@ -68,7 +69,7 @@ export const MenuTitleUI = styled.div`

export const MenuTitleHeadingUI = styled( Text )`
align-items: center;
color: ${ G2.gray[ 100 ] };
color: inherit;
display: flex;
justify-content: space-between;
margin-bottom: ${ space( 2 ) };
Expand All @@ -84,17 +85,20 @@ export const MenuTitleActionsUI = styled.span`
height: ${ space( 6 ) }; // 24px, same height as the buttons inside

.components-button.is-small {
color: ${ G2.lightGray.ui };
color: inherit;
opacity: 0.7;
margin-right: ${ space( 1 ) }; // Avoid hiding the focus outline
padding: 0;

&:active:not( :disabled ) {
background: none;
color: ${ G2.gray[ 200 ] };
opacity: 1;
color: inherit;
}
&:hover:not( :disabled ) {
box-shadow: none;
color: ${ G2.gray[ 200 ] };
opacity: 1;
color: inherit;
}
}
`;
Expand Down Expand Up @@ -142,46 +146,49 @@ export const MenuTitleSearchUI = styled.div`
`;

export const GroupTitleUI = styled( Text )`
color: inherit;
margin-top: ${ space( 2 ) };
padding: ${ () =>
isRTL()
? `${ space( 1 ) } ${ space( 4 ) } ${ space( 1 ) } 0`
: `${ space( 1 ) } 0 ${ space( 1 ) } ${ space( 4 ) }` };
text-transform: uppercase;
color: ${ G2.gray[ 100 ] };
`;

export const ItemBaseUI = styled.li`
border-radius: 2px;
color: ${ G2.lightGray.ui };
color: inherit;
margin-bottom: 0;

button,
a.components-button,
a {
> button,
> a.components-button,
> a {
width: 100%;
color: ${ G2.lightGray.ui };
color: inherit;
opacity: 0.7;
padding: ${ space( 2 ) } ${ space( 4 ) }; /* 8px 16px */
${ rtl( { textAlign: 'left' }, { textAlign: 'right' } ) }

&:hover,
&:focus:not( [aria-disabled='true'] ):active,
&:active:not( [aria-disabled='true'] ):active {
color: #ddd;
color: inherit;
opacity: 1;
}
}

&.is-active {
background-color: ${ UI.theme };
color: ${ UI.textDark };
color: ${ BASE.white };

button,
a {
color: ${ UI.textDark };
> button,
> a {
color: ${ BASE.white };
opacity: 1;
}
}

svg path {
> svg path {
color: ${ G2.lightGray.ui };
}
`;
Expand All @@ -196,7 +203,8 @@ export const ItemUI = styled.div`
font-weight: 400;
line-height: 20px;
width: 100%;
color: ${ G2.lightGray.ui };
color: inherit;
opacity: 0.7;
`;

export const ItemBadgeUI = styled.span`
Expand Down
18 changes: 1 addition & 17 deletions packages/edit-post/src/components/preferences-modal/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@ $vertical-tabs-width: 160px;
}

.components-navigation {
background-color: $white;
padding: 0;
max-height: 100%;
overflow-y: auto;
color: $black;

> * {
// Matches spacing cleared from the modal content element.
Expand All @@ -38,42 +38,26 @@ $vertical-tabs-width: 160px;

.components-navigation__menu {
margin: 0;
color: $gray-900;

.components-navigation__item {
color: $gray-900; // The inheritance of some items is quite strong, so we have to duplicate this one.

& > button {
color: inherit;
padding: 3px $grid-unit-20;
height: $grid-unit-60;
// Aligns button text instead of button box.
margin: 0 #{-$grid-unit-20};
width: calc(#{$grid-unit-40} + 100%);
&:focus {
background: $gray-100;
font-weight: 500;
}
&:hover {
color: var(--wp-admin-theme-color);
}
}
.components-toggle-control__label {
color: inherit;
}
}
.components-navigation__menu-title-heading {
color: inherit;
border-bottom: 1px solid $gray-300;
padding-left: 0;
padding-right: 0;
}
.components-navigation__back-button {
color: inherit;
padding-left: 0;
&:hover {
color: var(--wp-admin-theme-color);
}
}
.edit-post-preferences-modal__custom-fields-confirmation-button {
width: auto;
Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
width: 0;
overflow: hidden;
background: $gray-900;
color: $white;
transition: width 100ms linear;
@include reduce-motion("transition");

Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/src/components/sidebar/color-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ export default function ColorPanel( {
gradients={ gradients }
disableCustomColors={ ! areCustomSolidsEnabled }
disableCustomGradients={ ! areCustomGradientsEnabled }
showTitle={ false }
>
<ColorPalettePanel
key={ 'color-palette-panel-' + name }
Expand Down
Loading