Add storybook example

packages/block-editor/src/components/height-control/index.js

@@ -83,7 +83,7 @@ export default function HeightControl( {
 	};
 
 	return (
-		<fieldset className="component-height-control">
+		<fieldset className="block-editor-height-control">
 			<BaseControl.VisualLabel as="legend">
 				{ label }
 			</BaseControl.VisualLabel>
@@ -113,6 +113,7 @@ export default function HeightControl( {
 							}
 							withInputField={ false }
 							onChange={ handleSliderChange }
+							__nextHasNoMarginBottom
 						/>
 					</Spacer>
 				</FlexItem>

packages/block-editor/src/components/height-control/stories/index.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import HeightControl from '../';
+
+export default {
+	component: HeightControl,
+	title: 'BlockEditor/HeightControl',
+};
+
+const Template = ( props ) => {
+	const [ value, setValue ] = useState();
+	return <HeightControl onChange={ setValue } value={ value } { ...props } />;
+};
+
+export const Default = Template.bind( {} );

packages/block-editor/src/components/height-control/style.scss

@@ -0,0 +1,5 @@
+.block-editor-height-control {
+	border: 0;
+	margin: 0;
+	padding: 0;
+}

packages/block-editor/src/style.scss

@@ -32,6 +32,7 @@
 @import "./components/date-format-picker/style.scss";
 @import "./components/duotone-control/style.scss";
 @import "./components/font-appearance-control/style.scss";
+@import "./components/height-control/style.scss";
 @import "./components/image-size-control/style.scss";
 @import "./components/inner-blocks/style.scss";
 @import "./components/inserter-list-item/style.scss";