ResizableBox: Make invisible resize handles bigger (#14481)

* make invisible resize handles bigger * add support for all possible handles (even corners) * add comment about functional/visual parts
WordPress · Mar 27, 2019 · d9768ad · d9768ad
1 parent ea2a0ae
commit d9768ad
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 14 deletions.
diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss
@@ -99,7 +99,11 @@ $z-layers: (
 	".nux-dot-tip": 1000001,
 
 	// Show tooltips above NUX tips, wp-admin menus, submenus, and sidebar:
-	".components-tooltip": 1000002
+	".components-tooltip": 1000002,
+
+	// Make sure corner handles are above side handles for ResizableBox component
+	".components-resizable-box__side-handle": 1,
+	".components-resizable-box__corner-handle": 2
 );
 
 @function z-index( $key ) {

diff --git a/packages/components/src/resizable-box/index.js b/packages/components/src/resizable-box/index.js
@@ -16,6 +16,8 @@ function ResizableBox( { className, ...props } ) {
 	};
 
 	const handleClassName = 'components-resizable-box__handle';
+	const sideHandleClassName = 'components-resizable-box__side-handle';
+	const cornerHandleClassName = 'components-resizable-box__corner-handle';
 
 	return (
 		<ReResizableBox
@@ -26,18 +28,46 @@ function ResizableBox( { className, ...props } ) {
 			handleClasses={ {
 				top: classnames(
 					handleClassName,
+					sideHandleClassName,
 					'components-resizable-box__handle-top',
 				),
 				right: classnames(
 					handleClassName,
+					sideHandleClassName,
 					'components-resizable-box__handle-right',
 				),
 				bottom: classnames(
 					handleClassName,
+					sideHandleClassName,
 					'components-resizable-box__handle-bottom',
 				),
 				left: classnames(
 					handleClassName,
+					sideHandleClassName,
+					'components-resizable-box__handle-left',
+				),
+				topLeft: classnames(
+					handleClassName,
+					cornerHandleClassName,
+					'components-resizable-box__handle-top',
+					'components-resizable-box__handle-left',
+				),
+				topRight: classnames(
+					handleClassName,
+					cornerHandleClassName,
+					'components-resizable-box__handle-top',
+					'components-resizable-box__handle-right',
+				),
+				bottomRight: classnames(
+					handleClassName,
+					cornerHandleClassName,
+					'components-resizable-box__handle-bottom',
+					'components-resizable-box__handle-right',
+				),
+				bottomLeft: classnames(
+					handleClassName,
+					cornerHandleClassName,
+					'components-resizable-box__handle-bottom',
 					'components-resizable-box__handle-left',
 				),
 			} }
@@ -46,6 +76,10 @@ function ResizableBox( { className, ...props } ) {
 				right: handleStylesOverrides,
 				bottom: handleStylesOverrides,
 				left: handleStylesOverrides,
+				topLeft: handleStylesOverrides,
+				topRight: handleStylesOverrides,
+				bottomRight: handleStylesOverrides,
+				bottomLeft: handleStylesOverrides,
 			} }
 			{ ...props }
 		/>

diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss
@@ -1,16 +1,14 @@
+// This is a wrapper of the actual visible handle (pseudo element). It is styled
+// to be much bigger than the visual part so it's easier to click and use.
 .components-resizable-box__handle {
 	display: none;
+	width: $resize-handler-container-size;
+	height: $resize-handler-container-size;
 
 	// Show the resize handle when selected.
 	.components-resizable-box__container.is-selected & {
 		display: block;
 	}
-
-	// The handle is a pseudo-element and will sit inside this larger
-	// container size.
-	width: $resize-handler-container-size;
-	height: $resize-handler-container-size;
-	padding: $grid-size-small;
 }
 
 // This is the "visible" resize handle.
@@ -23,21 +21,48 @@
 	border-radius: 50%;
 	background: theme(primary);
 	cursor: inherit;
+	position: absolute;
+	top: calc(50% - #{$resize-handler-size / 2});
+	right: calc(50% - #{$resize-handler-size / 2});
+}
+
+// Show corner handles on top of side handles so they can be used
+.components-resizable-box__side-handle {
+	z-index: z-index(".components-resizable-box__side-handle");
+}
+
+.components-resizable-box__corner-handle {
+	z-index: z-index(".components-resizable-box__corner-handle");
+}
+
+// Make horizontal side-handles full width
+.components-resizable-box__side-handle.components-resizable-box__handle-top,
+.components-resizable-box__side-handle.components-resizable-box__handle-bottom {
+	width: 100%;
+	left: 0;
+}
+
+// Make vertical side-handles full height
+.components-resizable-box__side-handle.components-resizable-box__handle-left,
+.components-resizable-box__side-handle.components-resizable-box__handle-right {
+	height: 100%;
+	top: 0;
 }
 
 /*!rtl:begin:ignore*/
 .components-resizable-box__handle-right {
-	top: calc(50% - #{$resize-handler-container-size / 2});
 	right: calc(#{$resize-handler-container-size / 2} * -1);
 }
 
-.components-resizable-box__handle-bottom {
-	bottom: calc(#{$resize-handler-container-size / 2} * -1);
-	left: calc(50% - #{$resize-handler-container-size / 2});
-}
-
 .components-resizable-box__handle-left {
-	top: calc(50% - #{$resize-handler-container-size / 2});
 	left: calc(#{$resize-handler-container-size / 2} * -1);
 }
+
+.components-resizable-box__handle-top {
+	top: calc(#{$resize-handler-container-size / 2} * -1);
+}
+
+.components-resizable-box__handle-bottom {
+	bottom: calc(#{$resize-handler-container-size / 2} * -1);
+}
 /*!rtl:end:ignore*/