Skip to content

Commit 6744009

Browse files
NathanWalkerNathanWalker
authored
fix(css): box-shadow none handling (#10445)
closes #10403
1 parent 5b9d861 commit 6744009

File tree

7 files changed

+20
-33
lines changed

7 files changed

+20
-33
lines changed

‎apps/toolbox/src/app.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -221,4 +221,8 @@ Button {
221221
.switch-demo-page Switch.custom-switch:disabled:checked {
222222
color: #ddd;
223223
background-color: #777;
224+
}
225+
226+
.no-shadow {
227+
box-shadow: none;
224228
}

‎apps/toolbox/src/pages/box-shadow.xml

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<!-- layouts -->
1010
<ScrollView height="100%" visibility="{{ selectedComponentType === 'layouts' ? 'visible' : 'collapsed' }}">
1111
<StackLayout padding="20">
12-
<StackLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderColor="{{ borderColor }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
12+
<StackLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderColor="{{ borderColor }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
1313
<Label text="StackLayout" />
1414
</StackLayout>
1515

@@ -40,10 +40,12 @@
4040
</GridLayout>
4141

4242
<!-- buttons -->
43-
<GridLayout rows="*" height="100%" visibility="{{ selectedComponentType === 'buttons' ? 'visible' : 'collapsed' }}">
43+
<GridLayout rows="*,*" height="100%" visibility="{{ selectedComponentType === 'buttons' ? 'visible' : 'collapsed' }}">
4444

4545
<Button horizontalAlignment="center" verticalAlignment="center" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderColor="{{ borderColor }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}" text="button" />
4646

47+
<Button row="1" horizontalAlignment="center" verticalAlignment="center" class="demo-component no-shadow" text="button no shadow" />
48+
4749
</GridLayout>
4850

4951
<!-- images -->

‎packages/core/ui/styling/css-shadow.spec.ts

Lines changed: 4 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,7 @@ import { Color } from '../../color';
66
describe('css-shadow', () => {
77
it('empty', () => {
88
const shadow = parseCSSShadow('');
9-
expect(shadow.inset).toBe(false);
10-
expect(shadow.offsetX).toBeUndefined();
11-
expect(shadow.offsetY).toBeUndefined();
12-
expect(shadow.blurRadius).toBeUndefined();
13-
expect(shadow.spreadRadius).toBeUndefined();
14-
expect(shadow.color).toBeUndefined();
9+
expect(shadow).toBeNull();
1510
});
1611

1712
it('1px 1px 2px black', () => {
@@ -137,33 +132,18 @@ describe('css-shadow', () => {
137132

138133
it('none', () => {
139134
const shadow = parseCSSShadow('none');
140-
expect(shadow.inset).toBe(false);
141-
expect(shadow.offsetX).toBeUndefined();
142-
expect(shadow.offsetY).toBeUndefined();
143-
expect(shadow.blurRadius).toBeUndefined();
144-
expect(shadow.spreadRadius).toBeUndefined();
145-
expect(shadow.color).toBeUndefined();
135+
expect(shadow).toBeNull();
146136
});
147137

148138
it('unset', () => {
149139
const shadow = parseCSSShadow('unset');
150-
expect(shadow.inset).toBe(false);
151-
expect(shadow.offsetX).toBeUndefined();
152-
expect(shadow.offsetY).toBeUndefined();
153-
expect(shadow.blurRadius).toBeUndefined();
154-
expect(shadow.spreadRadius).toBeUndefined();
155-
expect(shadow.color).toBeUndefined();
140+
expect(shadow).toBeNull();
156141
});
157142

158143
it('unset 5em 1em gold', () => {
159144
// invalid shorthand should result in nothing being applied
160145
const shadow = parseCSSShadow('unset 5em 1em gold');
161-
expect(shadow.inset).toBe(false);
162-
expect(shadow.offsetX).toBeUndefined();
163-
expect(shadow.offsetY).toBeUndefined();
164-
expect(shadow.blurRadius).toBeUndefined();
165-
expect(shadow.spreadRadius).toBeUndefined();
166-
expect(shadow.color).toBeUndefined();
146+
expect(shadow).toBeNull();
167147
});
168148

169149
it('5em 1em gold unset', () => {

‎packages/core/ui/styling/css-shadow.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ export interface ShadowCSSValues {
2121
*/
2222
export function parseCSSShadow(value: string): ShadowCSSValues {
2323
const data = parseCSSShorthand(value);
24+
if (!data) {
25+
return null;
26+
}
2427
const [offsetX, offsetY, blurRadius, spreadRadius] = data.values;
2528

2629
return {

‎packages/core/ui/styling/css-stroke.spec.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ import { Color } from '../../color';
66
describe('css-text-stroke', () => {
77
it('empty', () => {
88
const stroke = parseCSSStroke('');
9-
expect(stroke.width).toBeUndefined();
10-
expect(stroke.color).toBeUndefined();
9+
expect(stroke).toBeNull();
1110
});
1211

1312
it('1px navy', () => {

‎packages/core/ui/styling/css-stroke.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ export interface StrokeCSSValues {
1414
*/
1515
export function parseCSSStroke(value: string): StrokeCSSValues {
1616
const data = parseCSSShorthand(value);
17+
if (!data) {
18+
return null;
19+
}
1720
const [width] = data.values;
1821

1922
return {

‎packages/core/ui/styling/css-utils.ts

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,7 @@ export function parseCSSShorthand(value: string): {
3737
const first = parts[0];
3838

3939
if (['', 'none', 'unset'].includes(first)) {
40-
return {
41-
inset: false,
42-
color: undefined,
43-
values: [],
44-
};
40+
return null;
4541
} else {
4642
const invalidColors = ['inset', 'unset'];
4743
const inset = parts.includes('inset');

0 commit comments

Comments
 (0)