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

ToolsPanel: Remove hardcoded classnames #35415

Merged
merged 9 commits into from
Oct 15, 2021
Merged

ToolsPanel: Remove hardcoded classnames #35415

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
daf5885
Remove reference to components-tools-panel class
aaronrobertshaw Oct 7, 2021
1e4e918
Remove hardcoded references to components-base-control in styles
aaronrobertshaw Oct 7, 2021
ba53bd2
Remove hardcoded dropdown classes from styles
aaronrobertshaw Oct 7, 2021
77ab9f0
Tweak selector for overriding BaseControl styles
aaronrobertshaw Oct 7, 2021
355810f
Switch first-child to first-of-type
aaronrobertshaw Oct 8, 2021
99a4572
Reinstate the hardcoded classnames for targeting dropdown menu
aaronrobertshaw Oct 13, 2021
9439aaf
Switch tools panel header to use HStack and Heading
aaronrobertshaw Oct 14, 2021
d684a45
Tweak panel header spacing
aaronrobertshaw Oct 14, 2021
2112f8d
Remove stale comment
aaronrobertshaw Oct 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/components/src/tools-panel/stories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,6 +224,6 @@ export const WithSlotFillItems = () => {
export { TypographyPanel } from './typography-panel';

const PanelWrapperView = styled.div`
max-width: 260px;
max-width: 270px;
font-size: 13px;
`;
58 changes: 36 additions & 22 deletions packages/components/src/tools-panel/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ import { css } from '@emotion/react';
/**
* Internal dependencies
*/
import {
StyledField as BaseControlField,
Wrapper as BaseControlWrapper,
} from '../base-control/styles/base-control-styles';
import { COLORS, CONFIG } from '../utils';
import { space } from '../ui/utils/space';

Expand Down Expand Up @@ -40,42 +44,51 @@ export const ToolsPanel = css`
* CSS grid display to be re-established.
*/
export const ToolsPanelWithInnerWrapper = css`
> div {
> div:not( :first-of-type ) {
${ toolsPanelGrid.container }
${ toolsPanelGrid.item.fullWidth }
}
`;

export const ToolsPanelHiddenInnerWrapper = css`
> div {
> div:not( :first-of-type ) {
display: none;
}
`;

export const ToolsPanelHeader = css`
align-items: center;
display: flex;
font-size: inherit;
font-weight: 500;
${ toolsPanelGrid.item.fullWidth }
justify-content: space-between;
line-height: normal;

.components-tools-panel & {
margin: 0;
}

gap: ${ space( 2 ) };
aaronrobertshaw marked this conversation as resolved.
Show resolved Hide resolved

/**
* The targeting of dropdown menu component classes here is a temporary
* measure only.
*
* The following styles should be replaced once the DropdownMenu has been
* refactored and can be targeted via component interpolation.
*/
.components-dropdown-menu {
margin-top: ${ space( -1 ) };
margin-bottom: ${ space( -1 ) };
margin: ${ space( -1 ) } 0;
height: ${ space( 6 ) };

/* first-child used to overcome specificity of menu toggle styles */
.components-dropdown-menu__toggle {
padding: 0;
height: ${ space( 6 ) };
min-width: ${ space( 6 ) };
width: ${ space( 6 ) };
}
}
`;

.components-dropdown-menu__toggle {
padding: 0;
height: ${ space( 6 ) };
min-width: ${ space( 6 ) };
width: ${ space( 6 ) };
export const ToolsPanelHeading = css`
font-size: inherit;
font-weight: 500;
line-height: normal;

/* Required to meet specificity requirements to ensure zero margin */
&& {
margin: 0;
}
`;

Expand All @@ -95,10 +108,11 @@ export const ToolsPanelItem = css`
max-width: 100%;
}

& > .components-base-control:last-child {
/* Remove BaseControl components margins and leave spacing to grid layout */
&& ${ BaseControlWrapper } {
margin-bottom: 0;

.components-base-control__field {
${ BaseControlField } {
margin-bottom: 0;
}
}
Expand Down
13 changes: 9 additions & 4 deletions packages/components/src/tools-panel/tools-panel-header/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import { __, _x, sprintf } from '@wordpress/i18n';
import DropdownMenu from '../../dropdown-menu';
import MenuGroup from '../../menu-group';
import MenuItem from '../../menu-item';
import { HStack } from '../../h-stack';
import { Heading } from '../../heading';
import { useToolsPanelHeader } from './hook';
import { contextConnect, WordPressComponentProps } from '../../ui/context';
import type {
Expand Down Expand Up @@ -116,9 +118,10 @@ const ToolsPanelHeader = (
forwardedRef: Ref< any >
) => {
const {
areAllOptionalControlsHidden,
dropdownMenuClassName,
hasMenuItems,
areAllOptionalControlsHidden,
headingClassName,
label: labelText,
menuItems,
resetAll,
Expand All @@ -141,8 +144,10 @@ const ToolsPanelHeader = (
: _x( 'View options', 'Button label to reveal tool panel options' );

return (
<h2 { ...headerProps } ref={ forwardedRef }>
{ labelText }
<HStack { ...headerProps } ref={ forwardedRef }>
<Heading level={ 2 } className={ headingClassName }>
{ labelText }
</Heading>
{ hasMenuItems && (
<DropdownMenu
icon={ dropDownMenuIcon }
Expand Down Expand Up @@ -176,7 +181,7 @@ const ToolsPanelHeader = (
) }
</DropdownMenu>
) }
</h2>
</HStack>
);
};

Expand Down
7 changes: 6 additions & 1 deletion packages/components/src/tools-panel/tools-panel-header/hook.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ export function useToolsPanelHeader(
return cx( styles.DropdownMenu );
}, [] );

const headingClassName = useMemo( () => {
return cx( styles.ToolsPanelHeading );
}, [] );

const {
menuItems,
hasMenuItems,
Expand All @@ -37,9 +41,10 @@ export function useToolsPanelHeader(

return {
...otherProps,
areAllOptionalControlsHidden,
dropdownMenuClassName,
hasMenuItems,
areAllOptionalControlsHidden,
headingClassName,
menuItems,
className: classes,
};
Expand Down