Components: ResizableBox, add showHandle prop (#18097)

* Components: ResizableBox, Add showHandle prop

This update adds a new prop to the ResizableBox component. This new prop
`showHandle` (`bool`) determines if the draggable resize handles should be
visible or not.

* Add ResizableBox storybook example

This update adds a default story for ResizableBox. Knobs have been added
to the story to better demonstrate the effects of the props.

* Rename is-show-handle to has-show-handle

Refactor styles to consolidate selected and show handle

* Refactor ResizableBox story example

Moves the inline-styled div to the parent. Allows for the Example
component to read more clearly.

packages/components/src/resizable-box/README.md

@@ -53,3 +53,11 @@ const Edit = ( props ) => {
 	);
 }
 ```
+
+### Props
+
+Name | Type | Default | Description
+--- | --- | --- | ---
+`showHandle` | `bool` | `false` | Determines of the resize handles are visible.
+
+For additional props, check out [re-resizable](https://github.com/bokuweb/re-resizable#props).

packages/components/src/resizable-box/index.js

@@ -4,7 +4,7 @@
 import classnames from 'classnames';
 import { Resizable } from 're-resizable';
 
-function ResizableBox( { className, ...props } ) {
+function ResizableBox( { className, showHandle = false, ...props } ) {
 	// Removes the inline styles in the drag handles.
 	const handleStylesOverrides = {
 		width: null,
@@ -23,7 +23,8 @@ function ResizableBox( { className, ...props } ) {
 		<Resizable
 			className={ classnames(
 				'components-resizable-box__container',
-				className,
+				showHandle && 'has-show-handle',
+				className
 			) }
 			handleClasses={ {
 				top: classnames(

packages/components/src/resizable-box/stories/index.js

@@ -0,0 +1,83 @@
+/**
+ * External dependencies
+ */
+import { boolean, number, text } from '@storybook/addon-knobs';
+
+/**
+ * Internal dependencies
+ */
+import ResizableBox from '../';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+export default { title: 'ResizableBox', component: ResizableBox };
+
+const Example = ( props ) => {
+	const [ attributes, setAttributes ] = useState( { height: 200, width: 400 } );
+	const { height, width } = attributes;
+	const { children, ...restProps } = props;
+
+	return (
+		<div style={ { margin: 30 } }>
+			<ResizableBox
+				{ ...restProps }
+				size={ {
+					height,
+					width,
+				} }
+				onResizeStop={ ( event, direction, elt, delta ) => {
+					setAttributes( {
+						height: parseInt( height + delta.height, 10 ),
+						width: parseInt( width + delta.width, 10 ),
+					} );
+				} }
+			>
+				{ children }
+			</ResizableBox>
+		</div>
+	);
+};
+
+export const _default = () => {
+	const content = text( 'Example: Content', 'Resize' );
+	const showHandle = boolean( 'showHandle', true );
+	const minHeight = number( 'minHeight', 50 );
+	const minWidth = number( 'minWidth', 50 );
+	const enable = {
+		top: boolean( 'enable.top', false ),
+		right: boolean( 'enable.right', true ),
+		bottom: boolean( 'enable.bottom', true ),
+		left: boolean( 'enable.left', false ),
+		topRight: boolean( 'enable.topRight', false ),
+		bottomRight: boolean( 'enable.bottomRight', true ),
+		bottomLeft: boolean( 'enable.bottomLeft', false ),
+		topLeft: boolean( 'enable.topLeft', false ),
+	};
+
+	const props = {
+		enable,
+		minHeight,
+		minWidth,
+		showHandle,
+	};
+
+	return (
+		<Example { ...props }>
+			<div
+				style={ {
+					background: '#eee',
+					display: 'flex',
+					height: '100%',
+					width: '100%',
+					alignItems: 'center',
+					justifyContent: 'center',
+				} }
+			>
+				<span>{ content }</span>
+			</div>
+		</Example>
+	);
+};

packages/components/src/resizable-box/style.scss

@@ -5,8 +5,10 @@
 	width: $resize-handler-container-size;
 	height: $resize-handler-container-size;
 
-	// Show the resize handle when selected.
-	.components-resizable-box__container.is-selected & {
+	// Show the resize handle when selected OR
+	// Show the resize handle if set in props
+	.components-resizable-box__container.is-selected &,
+	.components-resizable-box__container.has-show-handle & {
 		display: block;
 	}
 }