From 67440095f4fafd68da528e9a88e6a42a86136d9c Mon Sep 17 00:00:00 2001
From: Nathan Walker <walkerrunpdx@gmail.com>
Date: Sun, 19 Nov 2023 15:30:07 -0800
Subject: [PATCH] fix(css): box-shadow none handling (#10445)

closes https://github.com/NativeScript/NativeScript/issues/10403
---
 apps/toolbox/src/app.css                    |  4 +++
 apps/toolbox/src/pages/box-shadow.xml       |  6 +++--
 packages/core/ui/styling/css-shadow.spec.ts | 28 +++------------------
 packages/core/ui/styling/css-shadow.ts      |  3 +++
 packages/core/ui/styling/css-stroke.spec.ts |  3 +--
 packages/core/ui/styling/css-stroke.ts      |  3 +++
 packages/core/ui/styling/css-utils.ts       |  6 +----
 7 files changed, 20 insertions(+), 33 deletions(-)

diff --git a/apps/toolbox/src/app.css b/apps/toolbox/src/app.css
index 0e77e788e..60a5319f5 100644
--- a/apps/toolbox/src/app.css
+++ b/apps/toolbox/src/app.css
@@ -221,4 +221,8 @@ Button {
 .switch-demo-page Switch.custom-switch:disabled:checked {
     color: #ddd;
     background-color: #777;
+}
+
+.no-shadow {
+    box-shadow: none;
 }
\ No newline at end of file
diff --git a/apps/toolbox/src/pages/box-shadow.xml b/apps/toolbox/src/pages/box-shadow.xml
index 6724ea0d4..46bc3ea52 100644
--- a/apps/toolbox/src/pages/box-shadow.xml
+++ b/apps/toolbox/src/pages/box-shadow.xml
@@ -9,7 +9,7 @@
             <!-- layouts -->
             <ScrollView height="100%" visibility="{{ selectedComponentType === 'layouts' ? 'visible' : 'collapsed' }}">
                 <StackLayout padding="20">
-									<StackLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderColor="{{ borderColor }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
+					<StackLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderColor="{{ borderColor }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
                         <Label text="StackLayout" />
                     </StackLayout>
 
@@ -40,10 +40,12 @@
             </GridLayout>
 
             <!-- buttons -->
-            <GridLayout rows="*" height="100%" visibility="{{ selectedComponentType === 'buttons' ? 'visible' : 'collapsed' }}">
+            <GridLayout rows="*,*" height="100%" visibility="{{ selectedComponentType === 'buttons' ? 'visible' : 'collapsed' }}">
 
                 <Button horizontalAlignment="center" verticalAlignment="center" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderColor="{{ borderColor }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}" text="button" />
 
+                <Button row="1" horizontalAlignment="center" verticalAlignment="center" class="demo-component no-shadow" text="button no shadow" />
+
             </GridLayout>
 
 						<!-- images -->
diff --git a/packages/core/ui/styling/css-shadow.spec.ts b/packages/core/ui/styling/css-shadow.spec.ts
index e451bb4e1..780696f33 100644
--- a/packages/core/ui/styling/css-shadow.spec.ts
+++ b/packages/core/ui/styling/css-shadow.spec.ts
@@ -6,12 +6,7 @@ import { Color } from '../../color';
 describe('css-shadow', () => {
 	it('empty', () => {
 		const shadow = parseCSSShadow('');
-		expect(shadow.inset).toBe(false);
-		expect(shadow.offsetX).toBeUndefined();
-		expect(shadow.offsetY).toBeUndefined();
-		expect(shadow.blurRadius).toBeUndefined();
-		expect(shadow.spreadRadius).toBeUndefined();
-		expect(shadow.color).toBeUndefined();
+		expect(shadow).toBeNull();
 	});
 
 	it('1px 1px 2px black', () => {
@@ -137,33 +132,18 @@ describe('css-shadow', () => {
 
 	it('none', () => {
 		const shadow = parseCSSShadow('none');
-		expect(shadow.inset).toBe(false);
-		expect(shadow.offsetX).toBeUndefined();
-		expect(shadow.offsetY).toBeUndefined();
-		expect(shadow.blurRadius).toBeUndefined();
-		expect(shadow.spreadRadius).toBeUndefined();
-		expect(shadow.color).toBeUndefined();
+		expect(shadow).toBeNull();
 	});
 
 	it('unset', () => {
 		const shadow = parseCSSShadow('unset');
-		expect(shadow.inset).toBe(false);
-		expect(shadow.offsetX).toBeUndefined();
-		expect(shadow.offsetY).toBeUndefined();
-		expect(shadow.blurRadius).toBeUndefined();
-		expect(shadow.spreadRadius).toBeUndefined();
-		expect(shadow.color).toBeUndefined();
+		expect(shadow).toBeNull();
 	});
 
 	it('unset 5em 1em gold', () => {
 		// invalid shorthand should result in nothing being applied
 		const shadow = parseCSSShadow('unset 5em 1em gold');
-		expect(shadow.inset).toBe(false);
-		expect(shadow.offsetX).toBeUndefined();
-		expect(shadow.offsetY).toBeUndefined();
-		expect(shadow.blurRadius).toBeUndefined();
-		expect(shadow.spreadRadius).toBeUndefined();
-		expect(shadow.color).toBeUndefined();
+		expect(shadow).toBeNull();
 	});
 
 	it('5em 1em gold unset', () => {
diff --git a/packages/core/ui/styling/css-shadow.ts b/packages/core/ui/styling/css-shadow.ts
index 292d141b7..b2850b87f 100644
--- a/packages/core/ui/styling/css-shadow.ts
+++ b/packages/core/ui/styling/css-shadow.ts
@@ -21,6 +21,9 @@ export interface ShadowCSSValues {
  */
 export function parseCSSShadow(value: string): ShadowCSSValues {
 	const data = parseCSSShorthand(value);
+	if (!data) {
+		return null;
+	}
 	const [offsetX, offsetY, blurRadius, spreadRadius] = data.values;
 
 	return {
diff --git a/packages/core/ui/styling/css-stroke.spec.ts b/packages/core/ui/styling/css-stroke.spec.ts
index 715b23012..81a2b8833 100644
--- a/packages/core/ui/styling/css-stroke.spec.ts
+++ b/packages/core/ui/styling/css-stroke.spec.ts
@@ -6,8 +6,7 @@ import { Color } from '../../color';
 describe('css-text-stroke', () => {
 	it('empty', () => {
 		const stroke = parseCSSStroke('');
-		expect(stroke.width).toBeUndefined();
-		expect(stroke.color).toBeUndefined();
+		expect(stroke).toBeNull();
 	});
 
 	it('1px navy', () => {
diff --git a/packages/core/ui/styling/css-stroke.ts b/packages/core/ui/styling/css-stroke.ts
index 03e1a39a0..be813ffdd 100644
--- a/packages/core/ui/styling/css-stroke.ts
+++ b/packages/core/ui/styling/css-stroke.ts
@@ -14,6 +14,9 @@ export interface StrokeCSSValues {
  */
 export function parseCSSStroke(value: string): StrokeCSSValues {
 	const data = parseCSSShorthand(value);
+	if (!data) {
+		return null;
+	}
 	const [width] = data.values;
 
 	return {
diff --git a/packages/core/ui/styling/css-utils.ts b/packages/core/ui/styling/css-utils.ts
index 71c8bdac3..81684401a 100644
--- a/packages/core/ui/styling/css-utils.ts
+++ b/packages/core/ui/styling/css-utils.ts
@@ -37,11 +37,7 @@ export function parseCSSShorthand(value: string): {
 	const first = parts[0];
 
 	if (['', 'none', 'unset'].includes(first)) {
-		return {
-			inset: false,
-			color: undefined,
-			values: [],
-		};
+		return null;
 	} else {
 		const invalidColors = ['inset', 'unset'];
 		const inset = parts.includes('inset');