From e74524cea61fd5683d6fd76fc4f85efdfb3dd13a Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 22 Jun 2022 17:32:01 +1000 Subject: [PATCH] Update border control components to allow 40px height --- .../all-input-control.js | 2 ++ .../components/border-radius-control/index.js | 26 +++++++++++++++---- .../border-radius-control/input-controls.js | 4 +++ .../border-radius-control/style.scss | 14 ++++++++++ .../border-box-control-linked-button/hook.ts | 6 ++--- .../component.tsx | 6 ++--- .../border-box-control-visualizer/hook.ts | 6 ++--- .../border-box-control/component.tsx | 8 +++--- .../src/border-box-control/stories/index.js | 2 +- .../src/border-box-control/styles.ts | 10 +++---- .../src/border-box-control/types.ts | 8 +++--- .../border-control-dropdown/hook.ts | 6 ++--- .../border-control/component.tsx | 4 +-- .../src/border-control/border-control/hook.ts | 9 +++---- .../components/src/border-control/styles.ts | 18 ++++++------- .../components/src/border-control/types.ts | 4 +-- 16 files changed, 84 insertions(+), 49 deletions(-) diff --git a/packages/block-editor/src/components/border-radius-control/all-input-control.js b/packages/block-editor/src/components/border-radius-control/all-input-control.js index 31ad2aa30df9f..3dd08018eff2d 100644 --- a/packages/block-editor/src/components/border-radius-control/all-input-control.js +++ b/packages/block-editor/src/components/border-radius-control/all-input-control.js @@ -19,6 +19,7 @@ export default function AllInputControl( { selectedUnits, setSelectedUnits, values, + __next40pxDefaultSize, ...props } ) { let allValue = getAllValue( values ); @@ -61,6 +62,7 @@ export default function AllInputControl( { onChange={ handleOnChange } onUnitChange={ handleOnUnitChange } placeholder={ allPlaceholder } + size={ __next40pxDefaultSize ? '__unstable-large' : undefined } /> ); } diff --git a/packages/block-editor/src/components/border-radius-control/index.js b/packages/block-editor/src/components/border-radius-control/index.js index 9c2e96ba99b93..3f7d4ad7659d5 100644 --- a/packages/block-editor/src/components/border-radius-control/index.js +++ b/packages/block-editor/src/components/border-radius-control/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ @@ -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 ) ); @@ -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 (
{ __( 'Radius' ) } -
+
{ isLinked ? ( <> ) } diff --git a/packages/block-editor/src/components/border-radius-control/input-controls.js b/packages/block-editor/src/components/border-radius-control/input-controls.js index aa32c68c1a472..ea8c29bbe0aa5 100644 --- a/packages/block-editor/src/components/border-radius-control/input-controls.js +++ b/packages/block-editor/src/components/border-radius-control/input-controls.js @@ -20,6 +20,7 @@ export default function BoxInputControls( { selectedUnits, setSelectedUnits, values: valuesProp, + __next40pxDefaultSize, ...props } ) { const createHandleOnChange = ( corner ) => ( next ) => { @@ -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 @@ -80,6 +83,7 @@ export default function BoxInputControls( { onUnitChange={ createHandleOnUnitChange( corner ) } + size={ size } />
diff --git a/packages/block-editor/src/components/border-radius-control/style.scss b/packages/block-editor/src/components/border-radius-control/style.scss index 7e4f220709924..4f18385f821ed 100644 --- a/packages/block-editor/src/components/border-radius-control/style.scss +++ b/packages/block-editor/src/components/border-radius-control/style.scss @@ -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 { diff --git a/packages/components/src/border-box-control/border-box-control-linked-button/hook.ts b/packages/components/src/border-box-control/border-box-control-linked-button/hook.ts index 58c2089888409..61ae0ddf854d6 100644 --- a/packages/components/src/border-box-control/border-box-control-linked-button/hook.ts +++ b/packages/components/src/border-box-control/border-box-control-linked-button/hook.ts @@ -17,7 +17,7 @@ export function useBorderBoxControlLinkedButton( ) { const { className, - __next36pxDefaultSize = false, + __next40pxDefaultSize = false, ...otherProps } = useContextSystem( props, 'BorderBoxControlLinkedButton' ); @@ -25,10 +25,10 @@ export function useBorderBoxControlLinkedButton( 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 }; } diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx b/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx index e0d44852bca58..79431e0303998 100644 --- a/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx +++ b/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx @@ -34,7 +34,7 @@ const BorderBoxControlSplitControls = ( value, __experimentalHasMultipleOrigins, __experimentalIsRenderedInSidebar, - __next36pxDefaultSize, + __next40pxDefaultSize, ...otherProps } = useBorderBoxControlSplitControls( props ); @@ -67,7 +67,7 @@ const BorderBoxControlSplitControls = ( isCompact: true, __experimentalHasMultipleOrigins, __experimentalIsRenderedInSidebar, - __next36pxDefaultSize, + __next40pxDefaultSize, }; const mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] ); @@ -76,7 +76,7 @@ const BorderBoxControlSplitControls = ( { 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 }; } diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx index a49a2aa53d41d..fa74424a4eb7d 100644 --- a/packages/components/src/border-box-control/border-box-control/component.tsx +++ b/packages/components/src/border-box-control/border-box-control/component.tsx @@ -62,7 +62,7 @@ const BorderBoxControl = ( toggleLinked, __experimentalHasMultipleOrigins, __experimentalIsRenderedInSidebar, - __next36pxDefaultSize = false, + __next40pxDefaultSize = false, ...otherProps } = useBorderBoxControl( props ); @@ -118,7 +118,7 @@ const BorderBoxControl = ( __experimentalIsRenderedInSidebar={ __experimentalIsRenderedInSidebar } - __next36pxDefaultSize={ __next36pxDefaultSize } + __next40pxDefaultSize={ __next40pxDefaultSize } /> ) : ( ) } diff --git a/packages/components/src/border-box-control/stories/index.js b/packages/components/src/border-box-control/stories/index.js index 469d6d4d3407f..4f3cee23a8f61 100644 --- a/packages/components/src/border-box-control/stories/index.js +++ b/packages/components/src/border-box-control/stories/index.js @@ -84,7 +84,7 @@ Default.args = { style: 'dashed', width: '1px', }, - __next36pxDefaultSize: false, + __next40pxDefaultSize: false, popoverPlacement: 'right-start', }; diff --git a/packages/components/src/border-box-control/styles.ts b/packages/components/src/border-box-control/styles.ts index e5bb4ce638acd..d5ea81264f9c4 100644 --- a/packages/components/src/border-box-control/styles.ts +++ b/packages/components/src/border-box-control/styles.ts @@ -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' }; `; }; @@ -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 ) }; diff --git a/packages/components/src/border-box-control/types.ts b/packages/components/src/border-box-control/types.ts index d852a5bd1e40a..72c2193d279d7 100644 --- a/packages/components/src/border-box-control/types.ts +++ b/packages/components/src/border-box-control/types.ts @@ -49,7 +49,7 @@ export type BorderBoxControlProps = ColorProps & * * @default false */ - __next36pxDefaultSize?: boolean; + __next40pxDefaultSize?: boolean; }; export type LinkedButtonProps = { @@ -71,7 +71,7 @@ export type LinkedButtonProps = { * * @default false */ - __next36pxDefaultSize?: boolean; + __next40pxDefaultSize?: boolean; }; export type VisualizerProps = { @@ -87,7 +87,7 @@ export type VisualizerProps = { * * @default false */ - __next36pxDefaultSize?: boolean; + __next40pxDefaultSize?: boolean; }; export type SplitControlsProps = ColorProps & { @@ -121,5 +121,5 @@ export type SplitControlsProps = ColorProps & { * * @default false */ - __next36pxDefaultSize?: boolean; + __next40pxDefaultSize?: boolean; }; diff --git a/packages/components/src/border-control/border-control-dropdown/hook.ts b/packages/components/src/border-control/border-control-dropdown/hook.ts index bcf90b71a59db..15d29f7bb02ec 100644 --- a/packages/components/src/border-control/border-control-dropdown/hook.ts +++ b/packages/components/src/border-control/border-control-dropdown/hook.ts @@ -22,7 +22,7 @@ export function useBorderControlDropdown( colors, onChange, previousStyleSelection, - __next36pxDefaultSize, + __next40pxDefaultSize, ...otherProps } = useContextSystem( props, 'BorderControlDropdown' ); @@ -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 ); diff --git a/packages/components/src/border-control/border-control/component.tsx b/packages/components/src/border-control/border-control/component.tsx index 5e75dbb30f106..ae3fc61640168 100644 --- a/packages/components/src/border-control/border-control/component.tsx +++ b/packages/components/src/border-control/border-control/component.tsx @@ -59,7 +59,7 @@ const UnconnectedBorderControl = ( withSlider, __experimentalHasMultipleOrigins, __experimentalIsRenderedInSidebar, - __next36pxDefaultSize, + __next40pxDefaultSize, ...otherProps } = useBorderControl( props ); @@ -88,7 +88,7 @@ const UnconnectedBorderControl = ( __experimentalIsRenderedInSidebar={ __experimentalIsRenderedInSidebar } - __next36pxDefaultSize={ __next36pxDefaultSize } + __next40pxDefaultSize={ __next40pxDefaultSize } /> } label={ __( 'Border width' ) } diff --git a/packages/components/src/border-control/border-control/hook.ts b/packages/components/src/border-control/border-control/hook.ts index 30215572bfb7f..8610e0a2a3096 100644 --- a/packages/components/src/border-control/border-control/hook.ts +++ b/packages/components/src/border-control/border-control/hook.ts @@ -35,7 +35,7 @@ export function useBorderControl( shouldSanitizeBorder = true, value: border, width, - __next36pxDefaultSize = false, + __next40pxDefaultSize = false, ...otherProps } = useContextSystem( props, 'BorderControl' ); @@ -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 @@ -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() ); @@ -143,6 +142,6 @@ export function useBorderControl( value: border, widthUnit, widthValue, - __next36pxDefaultSize, + __next40pxDefaultSize, }; } diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts index 3c49e53a350ee..8fd5db8528b9e 100644 --- a/packages/components/src/border-control/styles.ts +++ b/packages/components/src/border-control/styles.ts @@ -57,12 +57,12 @@ export const wrapperWidth = css` `; /* - * When default control height is 36px the following should be removed. - * See: InputControl and __next36pxDefaultSize. + * When default control height is 40px the following should be removed. + * See: InputControl and __next40pxDefaultSize. */ -export const wrapperHeight = ( __next36pxDefaultSize?: boolean ) => { +export const wrapperHeight = ( __next40pxDefaultSize?: boolean ) => { return css` - height: ${ __next36pxDefaultSize ? '36px' : '30px' }; + height: ${ __next40pxDefaultSize ? '40px' : '30px' }; `; }; @@ -106,7 +106,7 @@ export const colorIndicatorBorder = ( border?: Border ) => { export const colorIndicatorWrapper = ( border?: Border, - __next36pxDefaultSize?: boolean + __next40pxDefaultSize?: boolean ) => { const { style } = border || {}; @@ -114,9 +114,9 @@ export const colorIndicatorWrapper = ( border-radius: 9999px; border: 2px solid transparent; ${ style ? colorIndicatorBorder( border ) : undefined } - width: ${ __next36pxDefaultSize ? '28px' : '22px' }; - height: ${ __next36pxDefaultSize ? '28px' : '22px' }; - padding: ${ __next36pxDefaultSize ? '2px' : '1px' }; + width: ${ __next40pxDefaultSize ? '28px' : '22px' }; + height: ${ __next40pxDefaultSize ? '28px' : '22px' }; + padding: ${ __next40pxDefaultSize ? '2px' : '1px' }; /* * ColorIndicator @@ -125,7 +125,7 @@ export const colorIndicatorWrapper = ( * over the active state of the border control dropdown's toggle button. */ & > span { - ${ ! __next36pxDefaultSize + ${ ! __next40pxDefaultSize ? css` /* Dimensions fit in 30px overall control height. */ height: 16px; diff --git a/packages/components/src/border-control/types.ts b/packages/components/src/border-control/types.ts index 20cef1e4f6be4..a21343101cbe0 100644 --- a/packages/components/src/border-control/types.ts +++ b/packages/components/src/border-control/types.ts @@ -124,7 +124,7 @@ export type BorderControlProps = ColorProps & * * @default false */ - __next36pxDefaultSize?: boolean; + __next40pxDefaultSize?: boolean; }; export type DropdownProps = ColorProps & { @@ -166,7 +166,7 @@ export type DropdownProps = ColorProps & { * * @default false */ - __next36pxDefaultSize?: boolean; + __next40pxDefaultSize?: boolean; }; export type StylePickerProps = LabelProps & {