Skip to content

Commit

Permalink
ToolsPanel: Remove hardcoded classnames (#35415)
Browse files Browse the repository at this point in the history
Remove hardcoded classes with the exception of those for the dropdown menu component.
  • Loading branch information
aaronrobertshaw authored Oct 15, 2021
1 parent 8b1e0eb commit 5b8bf51
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 28 deletions.
2 changes: 1 addition & 1 deletion packages/components/src/tools-panel/stories/index.js
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;
`;
57 changes: 35 additions & 22 deletions packages/components/src/tools-panel/styles.ts
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,50 @@ 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 ) };
/**
* 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 ) };
.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 +107,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
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
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

0 comments on commit 5b8bf51

Please sign in to comment.