From f07bfb2ac8d438762495ba002914cc1460e0910e Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 20 Oct 2022 17:42:39 +1000 Subject: [PATCH 1/4] UnitControl: Normalize wrapper classnames This is achieved by removing the unnecessary outer wrapper for the UnitControl. --- .../components/border-radius-control/index.js | 2 +- .../components/src/border-control/styles.ts | 2 +- .../components/src/unit-control/index.tsx | 50 ++++++++----------- .../styles/unit-control-styles.ts | 14 ++---- packages/components/src/unit-control/types.ts | 4 -- 5 files changed, 27 insertions(+), 45 deletions(-) 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 0821ab38acc3ca..8754d39ac570f4 100644 --- a/packages/block-editor/src/components/border-radius-control/index.js +++ b/packages/block-editor/src/components/border-radius-control/index.js @@ -94,7 +94,7 @@ export default function BorderRadiusControl( { onChange, values } ) { { isLinked ? ( <> ( undefined ); const classes = classnames( 'components-unit-control', className ); - const wrapperClasses = classnames( - 'components-unit-control-wrapper', - __unstableWrapperClassName - ); const handleOnQuantityChange = ( nextQuantityValue: number | string | undefined, @@ -182,7 +176,7 @@ function UnforwardedUnitControl( : undefined; const changeProps = { event, data }; - // The `onChange` callback already gets called, no need to call it explicitely. + // The `onChange` callback already gets called, no need to call it explicitly. onUnitChange?.( validParsedUnit, changeProps ); setUnit( validParsedUnit ); @@ -263,27 +257,25 @@ function UnforwardedUnitControl( } return ( - - - + ); } diff --git a/packages/components/src/unit-control/styles/unit-control-styles.ts b/packages/components/src/unit-control/styles/unit-control-styles.ts index ba5952a5ba65d6..2d9dc5f13fb111 100644 --- a/packages/components/src/unit-control/styles/unit-control-styles.ts +++ b/packages/components/src/unit-control/styles/unit-control-styles.ts @@ -18,16 +18,6 @@ type SelectProps = { selectSize: SelectSize; }; -export const Root = styled.div` - box-sizing: border-box; - position: relative; - - /* Target the InputControl's backdrop and make focus styles smoother. */ - &&& ${ BackdropUI } { - transition: box-shadow 0.1s linear; - } -`; - // TODO: Resolve need to use &&& to increase specificity // https://github.com/WordPress/gutenberg/issues/18483 @@ -37,6 +27,10 @@ export const ValueInput = styled( NumberControl )` display: block; width: 100%; } + + ${ BackdropUI } { + transition: box-shadow 0.1s linear; + } } `; diff --git a/packages/components/src/unit-control/types.ts b/packages/components/src/unit-control/types.ts index 78200369fb8592..edbd5ac8f4cd6b 100644 --- a/packages/components/src/unit-control/types.ts +++ b/packages/components/src/unit-control/types.ts @@ -100,8 +100,4 @@ export type UnitControlProps = Omit< UnitSelectControlProps, 'unit' > & * Callback when either the quantity or the unit inputs lose focus. */ onBlur?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >; - /** - * Custom CSS class to apply to the unit control's outer wrapper. - */ - __unstableWrapperClassName?: string; }; From 62177b1b236af119a65f6f1809d69571d44d34de Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 21 Oct 2022 15:38:32 +1000 Subject: [PATCH 2/4] Reinstate wrapper class on outer element --- packages/components/src/unit-control/index.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx index 703c7f68f7e872..c4baaf64568da6 100644 --- a/packages/components/src/unit-control/index.tsx +++ b/packages/components/src/unit-control/index.tsx @@ -104,7 +104,13 @@ function UnforwardedUnitControl( // Stores parsed value for hand-off in state reducer. const refParsedQuantity = useRef< number | undefined >( undefined ); - const classes = classnames( 'components-unit-control', className ); + const classes = classnames( + 'components-unit-control', + // This class is added for legacy purposes to maintain it on the outer + // wrapper. See: https://github.com/WordPress/gutenberg/pull/45139 + 'components-unit-control-wrapper', + className + ); const handleOnQuantityChange = ( nextQuantityValue: number | string | undefined, From d80788e8d264ccf04a2a548168a32aa629aab466 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 21 Oct 2022 15:53:42 +1000 Subject: [PATCH 3/4] Add box-sizing for all InputControls --- .../components/src/input-control/styles/input-control-styles.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx index b35efb42378ea7..1be98530d1fa48 100644 --- a/packages/components/src/input-control/styles/input-control-styles.tsx +++ b/packages/components/src/input-control/styles/input-control-styles.tsx @@ -34,6 +34,7 @@ const rootFocusedStyles = ( { isFocused }: RootProps ) => { }; export const Root = styled( Flex )< RootProps >` + box-sizing: border-box; position: relative; border-radius: 2px; padding-top: 0; From 9ceafa4d8501ba0056d1de8804a956564f1b085d Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 21 Oct 2022 16:06:53 +1000 Subject: [PATCH 4/4] Update snapshots --- .../dimension-control/test/__snapshots__/index.test.js.snap | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap index 83e6fe500faa1a..5f932fd5e0fffb 100644 --- a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap +++ b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap @@ -38,6 +38,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = ` -webkit-justify-content: space-between; justify-content: space-between; height: 100%; + box-sizing: border-box; position: relative; border-radius: 2px; padding-top: 0; @@ -309,6 +310,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = ` -webkit-justify-content: space-between; justify-content: space-between; height: 100%; + box-sizing: border-box; position: relative; border-radius: 2px; padding-top: 0; @@ -590,6 +592,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`] -webkit-justify-content: space-between; justify-content: space-between; height: 100%; + box-sizing: border-box; position: relative; border-radius: 2px; padding-top: 0; @@ -883,6 +886,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`] -webkit-justify-content: space-between; justify-content: space-between; height: 100%; + box-sizing: border-box; position: relative; border-radius: 2px; padding-top: 0;