fix(css): box-shadow none handling (#10445)

NathanWalker · web-flow · commit 67440095f4fa · 2023-11-19T15:30:07.000-08:00
closes #10403
diff --git 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;
 }
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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');

Original file line number	Diff line number	Diff line change
`@@ -221,4 +221,8 @@ Button {`
`221`	`221`	`.switch-demo-page Switch.custom-switch:disabled:checked {`
`222`	`222`	`color: #ddd;`
`223`	`223`	`background-color: #777;`
	`224`	`+}`
	`225`	`+`
	`226`	`+.no-shadow {`
	`227`	`+ box-shadow: none;`
`224`	`228`	`}`