From 4e2ffec28bfe3aef34dfe94679ecc9edb052df36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Mon, 19 Feb 2024 12:59:05 +0100
Subject: [PATCH] scaling mock data

---
 .../src/mocks/data/data-type/data-type.data.ts  | 17 +++++++++++++++++
 .../block-scale-handler.element.ts              | 11 +++++++++--
 .../ref-grid-block/ref-grid-block.element.ts    |  1 +
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts
index 94176ce43a..6eeae83a67 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts
@@ -648,6 +648,23 @@ export const data: Array<UmbMockDataTypeModel> = [
 						contentElementTypeKey: '4f68ba66-6fb2-4778-83b8-6ab4ca3a7c5c',
 						rowMinSpan: 1,
 						rowMaxSpan: 1,
+						columnSpanOptions: [
+							{
+								columnSpan: 1,
+							},
+							{
+								columnSpan: 2,
+							},
+							{
+								columnSpan: 3,
+							},
+							{
+								columnSpan: 6,
+							},
+							{
+								columnSpan: 12,
+							},
+						],
 						areas: [
 							{
 								key: 'area1_key',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-scale-handler/block-scale-handler.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-scale-handler/block-scale-handler.element.ts
index 9b335bcb1a..e8871cdc78 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-scale-handler/block-scale-handler.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-scale-handler/block-scale-handler.element.ts
@@ -14,10 +14,13 @@ export class UmbBlockGridScaleHandlerElement extends UmbLitElement implements Um
 		this.addEventListener('dragstart', (e: DragEvent) => {
 			e.preventDefault();
 		});
+		this.addEventListener('dragstart', (e: DragEvent) => {
+			e.preventDefault();
+		});
 	}
 	render() {
 		return html`
-			<div id="handler"></div>
+			<button aria-label="TODO: Some introduction to keyboard scaling" id="handler"></button>
 			<div id="label">TODO: Label content [NL]</div>
 		`;
 	}
@@ -38,7 +41,7 @@ export class UmbBlockGridScaleHandlerElement extends UmbLitElement implements Um
 
 			#handler {
 				position: absolute;
-				// TODO: Look at the feature I out-commented here, what was that supose to do [NL]:
+				// TODO: Look at the feature I out-commented here, what was that suppose to do [NL]:
 				//display: var(--umb-block-grid--block-ui-display, block);
 				display: block;
 				z-index: 2;
@@ -61,6 +64,10 @@ export class UmbBlockGridScaleHandlerElement extends UmbLitElement implements Um
 			#handler:focus {
 				opacity: 1;
 			}
+			#handler:focus {
+				outline: 2px solid var(--uui-color-selected);
+				outline-offset: 1px;
+			}
 			#handler::after {
 				content: '';
 				position: absolute;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/ref-grid-block/ref-grid-block.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/ref-grid-block/ref-grid-block.element.ts
index 22997ef112..ac38752079 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/ref-grid-block/ref-grid-block.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/ref-grid-block/ref-grid-block.element.ts
@@ -18,6 +18,7 @@ export class UmbRefGridBlockElement extends UUIRefNodeElement {
 		...UUIRefNodeElement.styles,
 		css`
 			:host {
+				min-width: 20px; // Set to something, to overwrite UUI min width.
 				min-height: var(--uui-size-16);
 				flex-flow: row wrap;
 			}