Skip to content

Commit

Permalink
Update border control components to allow 40px height
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaronrobertshaw
aaronrobertshaw committed Sep 20, 2022
1 parent 3f4f184 commit e74524c
Show file tree
Hide file tree
Showing 16 changed files with 84 additions and 49 deletions.
2 changes: 2 additions & 0 deletions packages/block-editor/src/components/border-radius-control/all-input-control.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export default function AllInputControl( {
selectedUnits,
setSelectedUnits,
values,
__next40pxDefaultSize,
...props
} ) {
let allValue = getAllValue( values );
Expand Down Expand Up @@ -61,6 +62,7 @@ export default function AllInputControl( {
onChange={ handleOnChange }
onUnitChange={ handleOnUnitChange }
placeholder={ allPlaceholder }
size={ __next40pxDefaultSize ? '__unstable-large' : undefined }
/>
);
}
26 changes: 21 additions & 5 deletions packages/block-editor/src/components/border-radius-control/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
Expand Down Expand Up @@ -40,13 +45,18 @@ const MAX_BORDER_RADIUS_VALUES = {
/**
* Control to display border radius options.
*
* @param {Object} props Component props.
* @param {Function} props.onChange Callback to handle onChange.
* @param {Object} props.values Border radius values.
* @param {Object} props Component props.
* @param {Function} props.onChange Callback to handle onChange.
* @param {Object} props.values Border radius values.
* @param {boolean} props.__next40pxDefaultSize Toggles default height to 40px.
*
* @return {WPElement} Custom border radius control.
*/
export default function BorderRadiusControl( { onChange, values } ) {
export default function BorderRadiusControl( {
onChange,
values,
__next40pxDefaultSize = false,
} ) {
const [ isLinked, setIsLinked ] = useState(
! hasDefinedValues( values ) || ! hasMixedValues( values )
);
Expand Down Expand Up @@ -85,12 +95,16 @@ export default function BorderRadiusControl( { onChange, values } ) {
onChange( next !== undefined ? `${ next }${ unit }` : undefined );
};

const classes = classnames( 'components-border-radius-control__wrapper', {
'has-40px-default-size': __next40pxDefaultSize,
} );

return (
<fieldset className="components-border-radius-control">
<BaseControl.VisualLabel as="legend">
{ __( 'Radius' ) }
</BaseControl.VisualLabel>
<div className="components-border-radius-control__wrapper">
<div className={ classes }>
{ isLinked ? (
<>
<AllInputControl
Expand All @@ -101,6 +115,7 @@ export default function BorderRadiusControl( { onChange, values } ) {
selectedUnits={ selectedUnits }
setSelectedUnits={ setSelectedUnits }
units={ units }
__next40pxDefaultSize={ __next40pxDefaultSize }
/>
<RangeControl
label={ __( 'Border radius' ) }
Expand All @@ -123,6 +138,7 @@ export default function BorderRadiusControl( { onChange, values } ) {
setSelectedUnits={ setSelectedUnits }
values={ values || DEFAULT_VALUES }
units={ units }
__next40pxDefaultSize={ __next40pxDefaultSize }
/>
) }
<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />
Expand Down
4 changes: 4 additions & 0 deletions packages/block-editor/src/components/border-radius-control/input-controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export default function BoxInputControls( {
selectedUnits,
setSelectedUnits,
values: valuesProp,
__next40pxDefaultSize,
...props
} ) {
const createHandleOnChange = ( corner ) => ( next ) => {
Expand Down Expand Up @@ -54,6 +55,8 @@ export default function BoxInputControls( {
bottomRight: valuesProp,
};

const size = __next40pxDefaultSize ? '__unstable-large' : undefined;

// Controls are wrapped in tooltips as visible labels aren't desired here.
// Tooltip rendering also requires the UnitControl to be wrapped. See:
// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
Expand All @@ -80,6 +83,7 @@ export default function BoxInputControls( {
onUnitChange={ createHandleOnUnitChange(
corner
) }
size={ size }
/>
</div>
</Tooltip>
Expand Down
14 changes: 14 additions & 0 deletions packages/block-editor/src/components/border-radius-control/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,20 @@
> span {
flex: 0 0 auto;
}

&.has-40px-default-size {
.components-range-control {
.components-base-control__field {
height: 40px;
display: flex;
align-items: center;
}
}

.component-border-radius-control__linked-button.has-icon {
margin-top: 8px;
}
}
}

.components-border-radius-control__input-controls-wrapper {
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/border-box-control/border-box-control-linked-button/hook.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,18 +17,18 @@ export function useBorderBoxControlLinkedButton(
) {
const {
className,
__next36pxDefaultSize = false,
__next40pxDefaultSize = false,
...otherProps
} = useContextSystem( props, 'BorderBoxControlLinkedButton' );

// Generate class names.
const cx = useCx();
const classes = useMemo( () => {
return cx(
styles.BorderBoxControlLinkedButton( __next36pxDefaultSize ),
styles.BorderBoxControlLinkedButton( __next40pxDefaultSize ),
className
);
}, [ className, cx, __next36pxDefaultSize ] );
}, [ className, cx, __next40pxDefaultSize ] );

return { ...otherProps, className: classes };
}
6 changes: 3 additions & 3 deletions packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const BorderBoxControlSplitControls = (
value,
__experimentalHasMultipleOrigins,
__experimentalIsRenderedInSidebar,
__next36pxDefaultSize,
__next40pxDefaultSize,
...otherProps
} = useBorderBoxControlSplitControls( props );

Expand Down Expand Up @@ -67,7 +67,7 @@ const BorderBoxControlSplitControls = (
isCompact: true,
__experimentalHasMultipleOrigins,
__experimentalIsRenderedInSidebar,
__next36pxDefaultSize,
__next40pxDefaultSize,
};

const mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );
Expand All @@ -76,7 +76,7 @@ const BorderBoxControlSplitControls = (
<Grid { ...otherProps } ref={ mergedRef } gap={ 4 }>
<BorderBoxControlVisualizer
value={ value }
__next36pxDefaultSize={ __next36pxDefaultSize }
__next40pxDefaultSize={ __next40pxDefaultSize }
/>
<BorderControl
className={ centeredClassName }
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/border-box-control/border-box-control-visualizer/hook.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export function useBorderBoxControlVisualizer(
const {
className,
value,
__next36pxDefaultSize = false,
__next40pxDefaultSize = false,
...otherProps
} = useContextSystem( props, 'BorderBoxControlVisualizer' );

Expand All @@ -27,12 +27,12 @@ export function useBorderBoxControlVisualizer(
const rtlWatchResult = rtl.watch();
const classes = useMemo( () => {
return cx(
styles.borderBoxControlVisualizer( value, __next36pxDefaultSize ),
styles.borderBoxControlVisualizer( value, __next40pxDefaultSize ),
className
);
// rtlWatchResult is needed to refresh styles when the writing direction changes
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [ cx, className, value, __next36pxDefaultSize, rtlWatchResult ] );
}, [ cx, className, value, __next40pxDefaultSize, rtlWatchResult ] );

return { ...otherProps, className: classes, value };
}
8 changes: 4 additions & 4 deletions packages/components/src/border-box-control/border-box-control/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const BorderBoxControl = (
toggleLinked,
__experimentalHasMultipleOrigins,
__experimentalIsRenderedInSidebar,
__next36pxDefaultSize = false,
__next40pxDefaultSize = false,
...otherProps
} = useBorderBoxControl( props );

Expand Down Expand Up @@ -118,7 +118,7 @@ const BorderBoxControl = (
__experimentalIsRenderedInSidebar={
__experimentalIsRenderedInSidebar
}
__next36pxDefaultSize={ __next36pxDefaultSize }
__next40pxDefaultSize={ __next40pxDefaultSize }
/>
) : (
<BorderBoxControlSplitControls
Expand All @@ -136,13 +136,13 @@ const BorderBoxControl = (
__experimentalIsRenderedInSidebar={
__experimentalIsRenderedInSidebar
}
__next36pxDefaultSize={ __next36pxDefaultSize }
__next40pxDefaultSize={ __next40pxDefaultSize }
/>
) }
<BorderBoxControlLinkedButton
onClick={ toggleLinked }
isLinked={ isLinked }
__next36pxDefaultSize={ __next36pxDefaultSize }
__next40pxDefaultSize={ __next40pxDefaultSize }
/>
</HStack>
</View>
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/border-box-control/stories/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ Default.args = {
style: 'dashed',
width: '1px',
},
__next36pxDefaultSize: false,
__next40pxDefaultSize: false,
popoverPlacement: 'right-start',
};

Expand Down
10 changes: 5 additions & 5 deletions packages/components/src/border-box-control/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,13 @@ export const LinkedBorderControl = css`
`;

export const BorderBoxControlLinkedButton = (
__next36pxDefaultSize?: boolean
__next40pxDefaultSize?: boolean
) => {
return css`
flex: 0;
flex-basis: 24px;
line-height: 0;
margin-top: ${ __next36pxDefaultSize ? '6px' : '3px' };
margin-top: ${ __next40pxDefaultSize ? '8px' : '3px' };
`;
};

Expand All @@ -46,13 +46,13 @@ const BorderBoxStyleWithFallback = ( border?: Border ) => {

export const borderBoxControlVisualizer = (
borders?: Borders,
__next36pxDefaultSize?: boolean
__next40pxDefaultSize?: boolean
) => {
return css`
position: absolute;
top: ${ __next36pxDefaultSize ? '18px' : '15px' };
top: ${ __next40pxDefaultSize ? '20px' : '15px' };
right: 30px;
bottom: ${ __next36pxDefaultSize ? '18px' : '15px' };
bottom: ${ __next40pxDefaultSize ? '20px' : '15px' };
left: 30px;
border-top: ${ BorderBoxStyleWithFallback( borders?.top ) };
border-bottom: ${ BorderBoxStyleWithFallback( borders?.bottom ) };
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/border-box-control/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export type BorderBoxControlProps = ColorProps &
*
* @default false
*/
__next36pxDefaultSize?: boolean;
__next40pxDefaultSize?: boolean;
};

export type LinkedButtonProps = {
Expand All @@ -71,7 +71,7 @@ export type LinkedButtonProps = {
*
* @default false
*/
__next36pxDefaultSize?: boolean;
__next40pxDefaultSize?: boolean;
};

export type VisualizerProps = {
Expand All @@ -87,7 +87,7 @@ export type VisualizerProps = {
*
* @default false
*/
__next36pxDefaultSize?: boolean;
__next40pxDefaultSize?: boolean;
};

export type SplitControlsProps = ColorProps & {
Expand Down Expand Up @@ -121,5 +121,5 @@ export type SplitControlsProps = ColorProps & {
*
* @default false
*/
__next36pxDefaultSize?: boolean;
__next40pxDefaultSize?: boolean;
};
6 changes: 3 additions & 3 deletions packages/components/src/border-control/border-control-dropdown/hook.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export function useBorderControlDropdown(
colors,
onChange,
previousStyleSelection,
__next36pxDefaultSize,
__next40pxDefaultSize,
...otherProps
} = useContextSystem( props, 'BorderControlDropdown' );

Expand Down Expand Up @@ -62,9 +62,9 @@ export function useBorderControlDropdown(

const indicatorWrapperClassName = useMemo( () => {
return cx(
styles.colorIndicatorWrapper( border, __next36pxDefaultSize )
styles.colorIndicatorWrapper( border, __next40pxDefaultSize )
);
}, [ border, cx, __next36pxDefaultSize ] );
}, [ border, cx, __next40pxDefaultSize ] );

const popoverControlsClassName = useMemo( () => {
return cx( styles.borderControlPopoverControls );
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/border-control/border-control/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const UnconnectedBorderControl = (
withSlider,
__experimentalHasMultipleOrigins,
__experimentalIsRenderedInSidebar,
__next36pxDefaultSize,
__next40pxDefaultSize,
...otherProps
} = useBorderControl( props );

Expand Down Expand Up @@ -88,7 +88,7 @@ const UnconnectedBorderControl = (
__experimentalIsRenderedInSidebar={
__experimentalIsRenderedInSidebar
}
__next36pxDefaultSize={ __next36pxDefaultSize }
__next40pxDefaultSize={ __next40pxDefaultSize }
/>
}
label={ __( 'Border width' ) }
Expand Down
9 changes: 4 additions & 5 deletions packages/components/src/border-control/border-control/hook.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export function useBorderControl(
shouldSanitizeBorder = true,
value: border,
width,
__next36pxDefaultSize = false,
__next40pxDefaultSize = false,
...otherProps
} = useContextSystem( props, 'BorderControl' );

Expand Down Expand Up @@ -65,7 +65,6 @@ export function useBorderControl(
const [ parsedValue ] =
parseQuantityAndUnitFromRawValue( newWidth );
const hasZeroWidth = parsedValue === 0;

const updatedBorder = { ...border, width: newWidthValue };

// Setting the border width explicitly to zero will also set the
Expand Down Expand Up @@ -121,10 +120,10 @@ export function useBorderControl(
const wrapperWidth = isCompact ? '90px' : width;
const innerWrapperClassName = useMemo( () => {
const widthStyle = !! wrapperWidth && styles.wrapperWidth;
const heightStyle = styles.wrapperHeight( __next36pxDefaultSize );
const heightStyle = styles.wrapperHeight( __next40pxDefaultSize );

return cx( styles.innerWrapper(), widthStyle, heightStyle );
}, [ wrapperWidth, cx, __next36pxDefaultSize ] );
}, [ wrapperWidth, cx, __next40pxDefaultSize ] );

const sliderClassName = useMemo( () => {
return cx( styles.borderSlider() );
Expand All @@ -143,6 +142,6 @@ export function useBorderControl(
value: border,
widthUnit,
widthValue,
__next36pxDefaultSize,
__next40pxDefaultSize,
};
}
Loading

0 comments on commit e74524c

Please sign in to comment.