javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-14 18:12:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
closes https://github.com/NativeScript/NativeScript/issues/10403
This commit is contained in:
Nathan Walker
2023-11-19 15:30:07 -08:00
committed by GitHub
parent 5b9d861fa3
commit 67440095f4
7 changed files with 20 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/toolbox/src/app.css
View File

@ -221,4 +221,8 @@ Button {
.switch-demo-page Switch.custom-switch:disabled:checked {
color: #ddd;
background-color: #777;
}
.no-shadow {
box-shadow: none;
}

6
apps/toolbox/src/pages/box-shadow.xml
View File

@ -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 -->

28
packages/core/ui/styling/css-shadow.spec.ts
View File

@ -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', () => {

3
packages/core/ui/styling/css-shadow.ts
View File

@ -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 {

3
packages/core/ui/styling/css-stroke.spec.ts
View File

@ -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', () => {

3
packages/core/ui/styling/css-stroke.ts
View File

@ -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 {

6
packages/core/ui/styling/css-utils.ts
View File

@ -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');