Use new gridColumn prop for single column controls

WordPress · Oct 15, 2021 · 562ad1f · 562ad1f
1 parent 185949d
commit 562ad1f
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/packages/components/src/tools-panel/stories/index.js b/packages/components/src/tools-panel/stories/index.js
@@ -40,7 +40,7 @@ export const _default = () => {
 					resetAll={ resetAll }
 				>
 					<ToolsPanelItem
-						className="single-column"
+						gridColumn="span 1"
 						hasValue={ () => !! width }
 						label="Width"
 						onDeselect={ () => setWidth( undefined ) }
@@ -53,7 +53,7 @@ export const _default = () => {
 						/>
 					</ToolsPanelItem>
 					<ToolsPanelItem
-						className="single-column"
+						gridColumn="span 1"
 						hasValue={ () => !! height }
 						label="Height"
 						onDeselect={ () => setHeight( undefined ) }
@@ -100,7 +100,7 @@ export const WithOptionalItemsPlusIcon = () => {
 					resetAll={ resetAll }
 				>
 					<ToolsPanelItem
-						className="single-column"
+						gridColumn="span 1"
 						hasValue={ () => !! width }
 						label="Width"
 						onDeselect={ () => setWidth( undefined ) }
@@ -113,7 +113,7 @@ export const WithOptionalItemsPlusIcon = () => {
 						/>
 					</ToolsPanelItem>
 					<ToolsPanelItem
-						className="single-column"
+						gridColumn="span 1"
 						hasValue={ () => !! height }
 						label="Height"
 						onDeselect={ () => setHeight( undefined ) }
@@ -162,7 +162,7 @@ export const WithSlotFillItems = () => {
 		<SlotFillProvider>
 			<ToolsPanelItems>
 				<ToolsPanelItem
-					className="single-column"
+					gridColumn="span 1"
 					hasValue={ () => !! width }
 					label="Injected Width"
 					onDeselect={ () => updateAttribute( 'width', undefined ) }
@@ -178,7 +178,7 @@ export const WithSlotFillItems = () => {
 					/>
 				</ToolsPanelItem>
 				<ToolsPanelItem
-					className="single-column"
+					gridColumn="span 1"
 					hasValue={ () => !! height }
 					label="Injected Height"
 					onDeselect={ () => updateAttribute( 'height', undefined ) }