From a1bd878b5cc4f65c281776c1f0c03b360b53cdab Mon Sep 17 00:00:00 2001 From: Justin Fagnani Date: Wed, 5 Apr 2023 12:19:11 -0400 Subject: [PATCH 1/3] Allow numbers to be used as values in styleMap() --- .changeset/slimy-clouds-roll.md | 7 +++++++ packages/lit-html/src/directives/style-map.ts | 9 ++++++--- .../lit-html/src/test/directives/style-map_test.ts | 14 ++++++++++++-- packages/tests/src/web-test-runner.config.ts | 4 ++-- 4 files changed, 27 insertions(+), 7 deletions(-) create mode 100644 .changeset/slimy-clouds-roll.md diff --git a/.changeset/slimy-clouds-roll.md b/.changeset/slimy-clouds-roll.md new file mode 100644 index 0000000000..2972209269 --- /dev/null +++ b/.changeset/slimy-clouds-roll.md @@ -0,0 +1,7 @@ +--- +'lit-html': patch +'lit': patch +'lit-element': patch +--- + +Allow numbers to be used as values in styleMap() diff --git a/packages/lit-html/src/directives/style-map.ts b/packages/lit-html/src/directives/style-map.ts index acc104a615..a02e1793d4 100644 --- a/packages/lit-html/src/directives/style-map.ts +++ b/packages/lit-html/src/directives/style-map.ts @@ -21,7 +21,7 @@ import { * for CSSStyleDeclaration like `backgroundColor`. */ export interface StyleInfo { - [name: string]: string | undefined | null; + [name: string]: string | number | undefined | null; } const important = 'important'; @@ -101,11 +101,14 @@ class StyleMapDirective extends Directive { const value = styleInfo[name]; if (value != null) { this._previousStyleProperties.add(name); - const isImportant = value.endsWith(importantFlag); + const isImportant = + typeof value === 'string' && value.endsWith(importantFlag); if (name.includes('-') || isImportant) { style.setProperty( name, - isImportant ? value.slice(0, flagTrim) : value, + isImportant + ? (value as string).slice(0, flagTrim) + : (value as string), isImportant ? important : '' ); } else { diff --git a/packages/lit-html/src/test/directives/style-map_test.ts b/packages/lit-html/src/test/directives/style-map_test.ts index eceef044da..898cf23e21 100644 --- a/packages/lit-html/src/test/directives/style-map_test.ts +++ b/packages/lit-html/src/test/directives/style-map_test.ts @@ -79,12 +79,22 @@ suite('styleMap', () => { }); test('adds and updates properties', () => { - renderStyleMap({marginTop: '2px', 'padding-bottom': '4px', opacity: '0.5'}); + renderStyleMap({ + marginTop: '2px', + 'padding-bottom': '4px', + opacity: '0.5', + 'z-index': 10, + }); const el = container.firstElementChild as HTMLElement; assert.equal(el.style.marginTop, '2px'); assert.equal(el.style.paddingBottom, '4px'); assert.equal(el.style.opacity, '0.5'); - renderStyleMap({marginTop: '4px', paddingBottom: '8px', opacity: '0.55'}); + renderStyleMap({ + marginTop: '4px', + paddingBottom: '8px', + opacity: '0.55', + 'z-index': 1, + }); assert.equal(el.style.marginTop, '4px'); assert.equal(el.style.paddingBottom, '8px'); assert.equal(el.style.opacity, '0.55'); diff --git a/packages/tests/src/web-test-runner.config.ts b/packages/tests/src/web-test-runner.config.ts index 7873df15f4..dcbf0b8613 100644 --- a/packages/tests/src/web-test-runner.config.ts +++ b/packages/tests/src/web-test-runner.config.ts @@ -24,8 +24,8 @@ const browserPresets = { // Default set of Playwright browsers to test when running locally. local: [ 'chromium', // keep browsers on separate lines - 'firefox', // to make it easier to comment out - 'webkit', // individual browsers + // 'firefox', // to make it easier to comment out + // 'webkit', // individual browsers ], // Browsers to test during automated continuous integration. From 1a60f4429667d42d6b74aa4619539d9d4935e7cd Mon Sep 17 00:00:00 2001 From: Justin Fagnani Date: Wed, 5 Apr 2023 14:43:06 -0400 Subject: [PATCH 2/3] Update packages/lit-html/src/test/directives/style-map_test.ts Co-authored-by: Augustine Kim --- packages/lit-html/src/test/directives/style-map_test.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/lit-html/src/test/directives/style-map_test.ts b/packages/lit-html/src/test/directives/style-map_test.ts index 898cf23e21..e65c318a93 100644 --- a/packages/lit-html/src/test/directives/style-map_test.ts +++ b/packages/lit-html/src/test/directives/style-map_test.ts @@ -98,6 +98,7 @@ suite('styleMap', () => { assert.equal(el.style.marginTop, '4px'); assert.equal(el.style.paddingBottom, '8px'); assert.equal(el.style.opacity, '0.55'); + assert.equal(el.style.zIndex, '1'); }); test('removes properties', () => { From e33a2b23d495ad0a908b2e953db0939d2dddd719 Mon Sep 17 00:00:00 2001 From: Augustine Kim Date: Wed, 5 Apr 2023 11:47:29 -0700 Subject: [PATCH 3/3] Apply suggestions from code review - Adjust changeset - Add z-index assertions to tests --- .changeset/slimy-clouds-roll.md | 1 - packages/lit-html/src/test/directives/style-map_test.ts | 1 + packages/tests/src/web-test-runner.config.ts | 4 ++-- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.changeset/slimy-clouds-roll.md b/.changeset/slimy-clouds-roll.md index 2972209269..f384c395db 100644 --- a/.changeset/slimy-clouds-roll.md +++ b/.changeset/slimy-clouds-roll.md @@ -1,7 +1,6 @@ --- 'lit-html': patch 'lit': patch -'lit-element': patch --- Allow numbers to be used as values in styleMap() diff --git a/packages/lit-html/src/test/directives/style-map_test.ts b/packages/lit-html/src/test/directives/style-map_test.ts index e65c318a93..fbe5d400bc 100644 --- a/packages/lit-html/src/test/directives/style-map_test.ts +++ b/packages/lit-html/src/test/directives/style-map_test.ts @@ -89,6 +89,7 @@ suite('styleMap', () => { assert.equal(el.style.marginTop, '2px'); assert.equal(el.style.paddingBottom, '4px'); assert.equal(el.style.opacity, '0.5'); + assert.equal(el.style.zIndex, '10'); renderStyleMap({ marginTop: '4px', paddingBottom: '8px', diff --git a/packages/tests/src/web-test-runner.config.ts b/packages/tests/src/web-test-runner.config.ts index dcbf0b8613..7873df15f4 100644 --- a/packages/tests/src/web-test-runner.config.ts +++ b/packages/tests/src/web-test-runner.config.ts @@ -24,8 +24,8 @@ const browserPresets = { // Default set of Playwright browsers to test when running locally. local: [ 'chromium', // keep browsers on separate lines - // 'firefox', // to make it easier to comment out - // 'webkit', // individual browsers + 'firefox', // to make it easier to comment out + 'webkit', // individual browsers ], // Browsers to test during automated continuous integration.