diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 7d1caaaa..74a2c246 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -235,7 +235,9 @@ code { kbd { background: var(--sl-color-neutral-100); border: solid 1px var(--sl-color-neutral-200); - box-shadow: inset 0 1px 0 0 var(--sl-color-neutral-0), inset 0 -1px 0 0 var(--sl-color-neutral-200); + box-shadow: + inset 0 1px 0 0 var(--sl-color-neutral-0), + inset 0 -1px 0 0 var(--sl-color-neutral-200); font-family: var(--sl-font-mono); font-size: 0.9125em; border-radius: var(--docs-border-radius); @@ -511,7 +513,9 @@ pre .token.italic { right: 0; white-space: normal; color: var(--sl-color-neutral-800); - transition: 150ms opacity, 150ms scale; + transition: + 150ms opacity, + 150ms scale; } .copy-code-button::part(button) { @@ -982,7 +986,9 @@ main { padding: 0.5rem; margin: 0; cursor: pointer; - transition: 250ms scale ease, 250ms rotate ease; + transition: + 250ms scale ease, + 250ms rotate ease; } @media screen and (max-width: 900px) { diff --git a/docs/pages/tutorials/integrating-with-rails.md b/docs/pages/tutorials/integrating-with-rails.md index 251c4dee..d1bf9cd7 100644 --- a/docs/pages/tutorials/integrating-with-rails.md +++ b/docs/pages/tutorials/integrating-with-rails.md @@ -88,7 +88,7 @@ module.exports = environment; The final step is to add the corresponding `pack_tags` to the page. You should have the following `tags` in the `` section of `app/views/layouts/application.html.erb`. ```html - + diff --git a/package-lock.json b/package-lock.json index 3346e06f..6541a2e7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -69,7 +69,7 @@ "ora": "^6.3.1", "pascal-case": "^3.1.2", "plop": "^3.1.1", - "prettier": "^2.8.8", + "prettier": "^3.0.3", "prismjs": "^1.29.0", "react": "^18.2.0", "recursive-copy": "^2.0.14", @@ -6717,6 +6717,21 @@ "prettier": "^2.8.0" } }, + "node_modules/custom-element-jet-brains-integration/node_modules/prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/custom-element-vs-code-integration": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/custom-element-vs-code-integration/-/custom-element-vs-code-integration-1.2.1.tgz", @@ -6726,6 +6741,21 @@ "prettier": "^2.7.1" } }, + "node_modules/custom-element-vs-code-integration/node_modules/prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/custom-elements-manifest": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/custom-elements-manifest/-/custom-elements-manifest-1.0.0.tgz", @@ -14883,15 +14913,15 @@ } }, "node_modules/prettier": { - "version": "2.8.8", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", - "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz", + "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==", "dev": true, "bin": { - "prettier": "bin-prettier.js" + "prettier": "bin/prettier.cjs" }, "engines": { - "node": ">=10.13.0" + "node": ">=14" }, "funding": { "url": "https://github.com/prettier/prettier?sponsor=1" @@ -23614,6 +23644,14 @@ "dev": true, "requires": { "prettier": "^2.8.0" + }, + "dependencies": { + "prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true + } } }, "custom-element-vs-code-integration": { @@ -23623,6 +23661,14 @@ "dev": true, "requires": { "prettier": "^2.7.1" + }, + "dependencies": { + "prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true + } } }, "custom-elements-manifest": { @@ -29755,9 +29801,9 @@ "dev": true }, "prettier": { - "version": "2.8.8", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", - "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz", + "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==", "dev": true }, "prismjs": { diff --git a/package.json b/package.json index 9df87738..3e969843 100644 --- a/package.json +++ b/package.json @@ -120,7 +120,7 @@ "ora": "^6.3.1", "pascal-case": "^3.1.2", "plop": "^3.1.1", - "prettier": "^2.8.8", + "prettier": "^3.0.3", "prismjs": "^1.29.0", "react": "^18.2.0", "recursive-copy": "^2.0.14", diff --git a/prettier.config.cjs b/prettier.config.js similarity index 80% rename from prettier.config.cjs rename to prettier.config.js index 7aa3310b..b535619c 100644 --- a/prettier.config.cjs +++ b/prettier.config.js @@ -1,5 +1,5 @@ -/* eslint-env node */ -module.exports = { +/** @type {import("prettier").Config} */ +const config = { arrowParens: 'avoid', bracketSpacing: true, htmlWhitespaceSensitivity: 'css', @@ -16,3 +16,5 @@ module.exports = { trailingComma: 'none', useTabs: false }; + +export default config; diff --git a/scripts/make-react.js b/scripts/make-react.js index a5e0f99a..8fd8406d 100644 --- a/scripts/make-react.js +++ b/scripts/make-react.js @@ -4,7 +4,7 @@ import path from 'path'; import chalk from 'chalk'; import { deleteSync } from 'del'; import prettier from 'prettier'; -import prettierConfig from '../prettier.config.cjs'; +import { default as prettierConfig } from '../prettier.config.js'; import { getAllComponents } from './shared.js'; const { outdir } = commandLineArgs({ name: 'outdir', type: String }); @@ -20,7 +20,7 @@ const metadata = JSON.parse(fs.readFileSync(path.join(outdir, 'custom-elements.j const components = getAllComponents(metadata); const index = []; -components.map(component => { +components.forEach(async component => { const tagWithoutPrefix = component.tagName.replace(/^sl-/, ''); const componentDir = path.join(reactDir, tagWithoutPrefix); const componentFile = path.join(componentDir, 'index.ts'); @@ -41,7 +41,7 @@ components.map(component => { const jsDoc = component.jsDoc || ''; - const source = prettier.format( + const source = await prettier.format( ` import * as React from 'react'; import { createComponent } from '@lit-labs/react'; diff --git a/scripts/make-themes.js b/scripts/make-themes.js index b9ae9901..eb4c12ac 100644 --- a/scripts/make-themes.js +++ b/scripts/make-themes.js @@ -24,7 +24,7 @@ filesToEmbed.forEach(file => { }); // Loop through each theme file, copying the .css and generating a .js version for Lit users -files.forEach(file => { +files.forEach(async file => { let source = fs.readFileSync(file, 'utf8'); // If the source has "/* _filename.css */" in it, replace it with the embedded styles @@ -32,11 +32,11 @@ files.forEach(file => { source = source.replace(`/* ${key} */`, embeds[key]); }); - const css = prettier.format(stripComments(source), { + const css = await prettier.format(stripComments(source), { parser: 'css' }); - let js = prettier.format( + let js = await prettier.format( ` import { css } from 'lit'; diff --git a/src/components/alert/alert.test.ts b/src/components/alert/alert.test.ts index e3b70a25..84ba45cb 100644 --- a/src/components/alert/alert.test.ts +++ b/src/components/alert/alert.test.ts @@ -210,10 +210,12 @@ describe('', () => { }; it('deletes the toast stack after the last alert is done', async () => { - const container = await fixture(html`
- alert 1 - alert 2 -
`); + const container = await fixture( + html`
+ alert 1 + alert 2 +
` + ); const alert1 = queryByTestId(container, 'alert1'); const alert2 = queryByTestId(container, 'alert2'); diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts index 1a6f66c9..613a7de7 100644 --- a/src/components/button/button.styles.ts +++ b/src/components/button/button.styles.ts @@ -25,8 +25,11 @@ export default css` white-space: nowrap; vertical-align: middle; padding: 0; - transition: var(--sl-transition-x-fast) background-color, var(--sl-transition-x-fast) color, - var(--sl-transition-x-fast) border, var(--sl-transition-x-fast) box-shadow; + transition: + var(--sl-transition-x-fast) background-color, + var(--sl-transition-x-fast) color, + var(--sl-transition-x-fast) border, + var(--sl-transition-x-fast) box-shadow; cursor: inherit; } diff --git a/src/components/button/button.test.ts b/src/components/button/button.test.ts index c99faf59..b71ed433 100644 --- a/src/components/button/button.test.ts +++ b/src/components/button/button.test.ts @@ -99,25 +99,25 @@ describe('', () => { }); it('should render a link with rel="noreferrer noopener" when target is set and rel is not', async () => { - const el = await fixture( - html` Link ` - ); + const el = await fixture(html` + Link + `); const link = el.shadowRoot!.querySelector('a')!; expect(link?.getAttribute('rel')).to.equal('noreferrer noopener'); }); it('should render a link with rel="" when a target is provided and rel is empty', async () => { - const el = await fixture( - html` Link ` - ); + const el = await fixture(html` + Link + `); const link = el.shadowRoot!.querySelector('a')!; expect(link?.getAttribute('rel')).to.equal(''); }); it(`should render a link with a custom rel when a custom rel is provided`, async () => { - const el = await fixture( - html` Link ` - ); + const el = await fixture(html` + Link + `); const link = el.shadowRoot!.querySelector('a')!; expect(link?.getAttribute('rel')).to.equal('1'); }); diff --git a/src/components/card/card.test.ts b/src/components/card/card.test.ts index 02096871..cdb9fd57 100644 --- a/src/components/card/card.test.ts +++ b/src/components/card/card.test.ts @@ -7,9 +7,9 @@ describe('', () => { describe('when provided no parameters', () => { before(async () => { - el = await fixture( - html` This is just a basic card. No image, no header, and no footer. Just your content. ` - ); + el = await fixture(html` + This is just a basic card. No image, no header, and no footer. Just your content. + `); }); it('should pass accessibility tests', async () => { diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts index ae741796..1c5adf3c 100644 --- a/src/components/checkbox/checkbox.styles.ts +++ b/src/components/checkbox/checkbox.styles.ts @@ -46,8 +46,11 @@ export default css` border-radius: 2px; background-color: var(--sl-input-background-color); color: var(--sl-color-neutral-0); - transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color, - var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow; + transition: + var(--sl-transition-fast) border-color, + var(--sl-transition-fast) background-color, + var(--sl-transition-fast) color, + var(--sl-transition-fast) box-shadow; } .checkbox__input { diff --git a/src/components/color-picker/color-picker.styles.ts b/src/components/color-picker/color-picker.styles.ts index 6ebec95e..f8f98b3f 100644 --- a/src/components/color-picker/color-picker.styles.ts +++ b/src/components/color-picker/color-picker.styles.ts @@ -245,7 +245,11 @@ export default css` linear-gradient(45deg, transparent 75%, var(--sl-color-neutral-300) 75%), linear-gradient(45deg, var(--sl-color-neutral-300) 25%, transparent 25%); background-size: 10px 10px; - background-position: 0 0, 0 0, -5px -5px, 5px 5px; + background-position: + 0 0, + 0 0, + -5px -5px, + 5px 5px; } .color-picker--disabled { @@ -311,7 +315,9 @@ export default css` height: 100%; border-radius: inherit; background-color: currentColor; - box-shadow: inset 0 0 0 2px var(--sl-input-border-color), inset 0 0 0 4px var(--sl-color-neutral-0); + box-shadow: + inset 0 0 0 2px var(--sl-input-border-color), + inset 0 0 0 4px var(--sl-color-neutral-0); } .color-dropdown__trigger--empty:before { diff --git a/src/components/color-picker/color-picker.test.ts b/src/components/color-picker/color-picker.test.ts index 34f3d57c..a05f7f13 100644 --- a/src/components/color-picker/color-picker.test.ts +++ b/src/components/color-picker/color-picker.test.ts @@ -97,9 +97,9 @@ describe('', () => { }); it('should render the correct swatches when passing a string of color values', async () => { - const el = await fixture( - html` ` - ); + const el = await fixture(html` + + `); const swatches = [...el.shadowRoot!.querySelectorAll('[part~="swatch"] > div')]; expect(swatches.length).to.equal(3); diff --git a/src/components/dialog/dialog.test.ts b/src/components/dialog/dialog.test.ts index 0cabd063..d0817075 100644 --- a/src/components/dialog/dialog.test.ts +++ b/src/components/dialog/dialog.test.ts @@ -17,9 +17,9 @@ describe('', () => { }); it('should not be visible without the open attribute', async () => { - const el = await fixture( - html` Lorem ipsum dolor sit amet, consectetur adipiscing elit. ` - ); + const el = await fixture(html` + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + `); const base = el.shadowRoot!.querySelector('[part~="base"]')!; expect(base.hidden).to.be.true; diff --git a/src/components/drawer/drawer.test.ts b/src/components/drawer/drawer.test.ts index e444e0d4..ed60e026 100644 --- a/src/components/drawer/drawer.test.ts +++ b/src/components/drawer/drawer.test.ts @@ -16,9 +16,9 @@ describe('', () => { }); it('should not be visible without the open attribute', async () => { - const el = await fixture( - html` Lorem ipsum dolor sit amet, consectetur adipiscing elit. ` - ); + const el = await fixture(html` + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + `); const base = el.shadowRoot!.querySelector('[part~="base"]')!; expect(base.hidden).to.be.true; diff --git a/src/components/format-date/format-date.test.ts b/src/components/format-date/format-date.test.ts index d422df52..972ed6d4 100644 --- a/src/components/format-date/format-date.test.ts +++ b/src/components/format-date/format-date.test.ts @@ -52,11 +52,9 @@ describe('', () => { ]; results.forEach(setup => { it(`date has correct language format: ${setup.lang}`, async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); expect(el.shadowRoot?.textContent?.trim()).to.equal(setup.result); }); }); @@ -66,14 +64,12 @@ describe('', () => { const weekdays = ['narrow', 'short', 'long']; weekdays.forEach((weekdayFormat: 'narrow' | 'short' | 'long') => { it(`date has correct weekday format: ${weekdayFormat}`, async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); const expected = new Intl.DateTimeFormat('en-US', { weekday: weekdayFormat }).format( new Date(new Date().getFullYear(), 0, 1) @@ -87,11 +83,9 @@ describe('', () => { const eras = ['narrow', 'short', 'long']; eras.forEach((eraFormat: 'narrow' | 'short' | 'long') => { it(`date has correct era format: ${eraFormat}`, async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); const expected = new Intl.DateTimeFormat('en-US', { era: eraFormat }).format( new Date(new Date().getFullYear(), 0, 1) @@ -105,11 +99,9 @@ describe('', () => { const yearFormats = ['numeric', '2-digit']; yearFormats.forEach((yearFormat: 'numeric' | '2-digit') => { it(`date has correct year format: ${yearFormat}`, async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); const expected = new Intl.DateTimeFormat('en-US', { year: yearFormat }).format( new Date(new Date().getFullYear(), 0, 1) @@ -123,11 +115,9 @@ describe('', () => { const monthFormats = ['numeric', '2-digit', 'narrow', 'short', 'long']; monthFormats.forEach((monthFormat: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long') => { it(`date has correct month format: ${monthFormat}`, async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); const expected = new Intl.DateTimeFormat('en-US', { month: monthFormat }).format( new Date(new Date().getFullYear(), 0, 1) @@ -141,11 +131,9 @@ describe('', () => { const dayFormats = ['numeric', '2-digit']; dayFormats.forEach((dayFormat: 'numeric' | '2-digit') => { it(`date has correct day format: ${dayFormat}`, async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); const expected = new Intl.DateTimeFormat('en-US', { day: dayFormat }).format( new Date(new Date().getFullYear(), 0, 1) @@ -159,11 +147,9 @@ describe('', () => { const hourFormats = ['numeric', '2-digit']; hourFormats.forEach((hourFormat: 'numeric' | '2-digit') => { it(`date has correct hour format: ${hourFormat}`, async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); const expected = new Intl.DateTimeFormat('en-US', { hour: hourFormat }).format( new Date(new Date().getFullYear(), 0, 1) @@ -177,14 +163,9 @@ describe('', () => { const minuteFormats = ['numeric', '2-digit']; minuteFormats.forEach((minuteFormat: 'numeric' | '2-digit') => { it(`date has correct minute format: ${minuteFormat}`, async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); const expected = new Intl.DateTimeFormat('en-US', { minute: minuteFormat }).format( new Date(new Date().getFullYear(), 0, 1) @@ -198,14 +179,9 @@ describe('', () => { const secondFormats = ['numeric', '2-digit']; secondFormats.forEach((secondFormat: 'numeric' | '2-digit') => { it(`date has correct second format: ${secondFormat}`, async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); const expected = new Intl.DateTimeFormat('en-US', { second: secondFormat }).format( new Date(new Date().getFullYear(), 0, 1) @@ -219,14 +195,12 @@ describe('', () => { const timeZoneNameFormats = ['short', 'long']; timeZoneNameFormats.forEach((timeZoneNameFormat: 'short' | 'long') => { it(`date has correct timeZoneName format: ${timeZoneNameFormat}`, async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); const expected = new Intl.DateTimeFormat('en-US', { timeZoneName: timeZoneNameFormat }).format( new Date(new Date().getFullYear(), 0, 1) @@ -240,14 +214,9 @@ describe('', () => { const timeZones = ['America/New_York', 'America/Los_Angeles', 'Europe/Zurich']; timeZones.forEach(timeZone => { it(`date has correct timeZoneName format: ${timeZone}`, async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); const expected = new Intl.DateTimeFormat('en-US', { timeZone: timeZone }).format( new Date(new Date().getFullYear(), 0, 1) @@ -261,14 +230,12 @@ describe('', () => { const hourFormatValues = ['auto', '12', '24']; hourFormatValues.forEach(hourFormatValue => { it(`date has correct hourFormat format: ${hourFormatValue}`, async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); const expected = new Intl.DateTimeFormat('en-US', { hour12: hourFormatValue === 'auto' ? undefined : hourFormatValue === '12' diff --git a/src/components/format-number/format-number.test.ts b/src/components/format-number/format-number.test.ts index 026ea733..d54089f0 100644 --- a/src/components/format-number/format-number.test.ts +++ b/src/components/format-number/format-number.test.ts @@ -24,9 +24,9 @@ describe('', () => { describe('lang property', () => { ['de', 'de-CH', 'fr', 'es', 'he', 'ja', 'nl', 'pl', 'pt', 'ru'].forEach(lang => { it(`number has correct language format: ${lang}`, async () => { - const el = await fixture( - html` ` - ); + const el = await fixture(html` + + `); const expected = new Intl.NumberFormat(lang, { style: 'decimal', useGrouping: true }).format(1000); expect(el.shadowRoot?.textContent).to.equal(expected); }); @@ -36,9 +36,9 @@ describe('', () => { describe('type property', () => { ['currency', 'decimal', 'percent'].forEach(type => { it(`number has correct type format: ${type}`, async () => { - const el = await fixture( - html` ` - ); + const el = await fixture(html` + + `); const expected = new Intl.NumberFormat('en-US', { style: type, currency: 'USD' }).format(1000); expect(el.shadowRoot?.textContent).to.equal(expected); }); @@ -62,9 +62,9 @@ describe('', () => { describe('currency property', () => { ['USD', 'CAD', 'AUD', 'UAH'].forEach(currency => { it(`number has correct type format: ${currency}`, async () => { - const el = await fixture( - html` ` - ); + const el = await fixture(html` + + `); const expected = new Intl.NumberFormat('en-US', { style: 'decimal', currency: currency }).format(1000); expect(el.shadowRoot?.textContent).to.equal(expected); }); @@ -74,9 +74,9 @@ describe('', () => { describe('currencyDisplay property', () => { ['symbol', 'narrowSymbol', 'code', 'name'].forEach(currencyDisplay => { it(`number has correct type format: ${currencyDisplay}`, async () => { - const el = await fixture( - html` ` - ); + const el = await fixture(html` + + `); const expected = new Intl.NumberFormat('en-US', { style: 'decimal', currencyDisplay: currencyDisplay }).format( 1000 ); @@ -88,9 +88,9 @@ describe('', () => { describe('minimumIntegerDigits property', () => { [4, 5, 6].forEach(minDigits => { it(`number has correct type format: ${minDigits}`, async () => { - const el = await fixture( - html` ` - ); + const el = await fixture(html` + + `); const expected = new Intl.NumberFormat('en-US', { style: 'decimal', currencyDisplay: 'symbol', @@ -104,9 +104,9 @@ describe('', () => { describe('minimumFractionDigits property', () => { [4, 5, 6].forEach(minFractionDigits => { it(`number has correct type format: ${minFractionDigits}`, async () => { - const el = await fixture( - html` ` - ); + const el = await fixture(html` + + `); const expected = new Intl.NumberFormat('en-US', { style: 'decimal', currencyDisplay: 'symbol', @@ -120,9 +120,9 @@ describe('', () => { describe('maximumFractionDigits property', () => { [4, 5, 6].forEach(maxFractionDigits => { it(`number has correct type format: ${maxFractionDigits}`, async () => { - const el = await fixture( - html` ` - ); + const el = await fixture(html` + + `); const expected = new Intl.NumberFormat('en-US', { style: 'decimal', currencyDisplay: 'symbol', @@ -136,11 +136,9 @@ describe('', () => { describe('minimumSignificantDigits property', () => { [4, 5, 6].forEach(minSignificantDigits => { it(`number has correct type format: ${minSignificantDigits}`, async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); const expected = new Intl.NumberFormat('en-US', { style: 'decimal', currencyDisplay: 'symbol', @@ -154,11 +152,9 @@ describe('', () => { describe('maximumSignificantDigits property', () => { [4, 5, 6].forEach(maxSignificantDigits => { it(`number has correct type format: ${maxSignificantDigits}`, async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); const expected = new Intl.NumberFormat('en-US', { style: 'decimal', currencyDisplay: 'symbol', diff --git a/src/components/icon-button/icon-button.test.ts b/src/components/icon-button/icon-button.test.ts index fc270d3a..c24cf4e2 100644 --- a/src/components/icon-button/icon-button.test.ts +++ b/src/components/icon-button/icon-button.test.ts @@ -30,15 +30,13 @@ describe('', () => { describe('when styling the host element', () => { it('renders the correct color and font size', async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); const icon = el.shadowRoot!.querySelector('sl-icon')!; const styles = getComputedStyle(icon); @@ -85,16 +83,16 @@ describe('', () => { describe('and target is present', () => { ['_blank', '_parent', '_self', '_top'].forEach((target: LinkTarget) => { it(`the anchor target is the provided target: ${target}`, async () => { - const el = await fixture( - html` ` - ); + const el = await fixture(html` + + `); expect(el.shadowRoot?.querySelector(`a[target="${target}"]`)).to.exist; }); it(`the anchor rel is set to 'noreferrer noopener'`, async () => { - const el = await fixture( - html` ` - ); + const el = await fixture(html` + + `); expect(el.shadowRoot?.querySelector(`a[rel="noreferrer noopener"]`)).to.exist; }); }); @@ -103,9 +101,9 @@ describe('', () => { describe('and download is present', () => { it(`the anchor download attribute is the provided download`, async () => { const fakeDownload = 'some/path'; - const el = await fixture( - html` ` - ); + const el = await fixture(html` + + `); expect(el.shadowRoot?.querySelector(`a[download="${fakeDownload}"]`)).to.exist; }); @@ -121,9 +119,9 @@ describe('', () => { it('the internal aria-label attribute is set to the provided label when rendering an anchor', async () => { const fakeLabel = 'some label'; - const el = await fixture( - html` ` - ); + const el = await fixture(html` + + `); expect(el.shadowRoot?.querySelector(`a[aria-label="${fakeLabel}"]`)).to.exist; }); }); diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts index 105666de..b8acc96c 100644 --- a/src/components/input/input.styles.ts +++ b/src/components/input/input.styles.ts @@ -23,7 +23,10 @@ export default css` vertical-align: middle; overflow: hidden; cursor: text; - transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow, + transition: + var(--sl-transition-fast) color, + var(--sl-transition-fast) border, + var(--sl-transition-fast) box-shadow, var(--sl-transition-fast) background-color; } diff --git a/src/components/progress-bar/progress-bar.styles.ts b/src/components/progress-bar/progress-bar.styles.ts index e4522d9f..13dc1eff 100644 --- a/src/components/progress-bar/progress-bar.styles.ts +++ b/src/components/progress-bar/progress-bar.styles.ts @@ -33,7 +33,9 @@ export default css` line-height: var(--height); white-space: nowrap; overflow: hidden; - transition: 400ms width, 400ms background-color; + transition: + 400ms width, + 400ms background-color; user-select: none; } diff --git a/src/components/progress-bar/progress-bar.test.ts b/src/components/progress-bar/progress-bar.test.ts index 0211070f..87a2cde8 100644 --- a/src/components/progress-bar/progress-bar.test.ts +++ b/src/components/progress-bar/progress-bar.test.ts @@ -73,12 +73,10 @@ describe('', () => { describe('when provided a ariaLabelledBy, and value parameter', () => { before(async () => { - el = await fixture( - html` - - - ` - ); + el = await fixture(html` + + + `); }); it('should pass accessibility tests', async () => { diff --git a/src/components/progress-ring/progress-ring.test.ts b/src/components/progress-ring/progress-ring.test.ts index e1216670..7e167e07 100644 --- a/src/components/progress-ring/progress-ring.test.ts +++ b/src/components/progress-ring/progress-ring.test.ts @@ -52,12 +52,10 @@ describe('', () => { describe('when provided a ariaLabelledBy, and value parameter', () => { before(async () => { - el = await fixture( - html` - - - ` - ); + el = await fixture(html` + + + `); }); it('should pass accessibility tests', async () => { diff --git a/src/components/radio/radio.styles.ts b/src/components/radio/radio.styles.ts index b98f17ba..3db7436c 100644 --- a/src/components/radio/radio.styles.ts +++ b/src/components/radio/radio.styles.ts @@ -56,8 +56,11 @@ export default css` border-radius: 50%; background-color: var(--sl-input-background-color); color: transparent; - transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color, - var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow; + transition: + var(--sl-transition-fast) border-color, + var(--sl-transition-fast) background-color, + var(--sl-transition-fast) color, + var(--sl-transition-fast) box-shadow; } .radio__input { diff --git a/src/components/range/range.styles.ts b/src/components/range/range.styles.ts index 7c4f3b56..b42370d7 100644 --- a/src/components/range/range.styles.ts +++ b/src/components/range/range.styles.ts @@ -117,8 +117,11 @@ export default css` border-radius: 50%; background-color: var(--sl-color-primary-600); border-color: var(--sl-color-primary-600); - transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color, - var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow; + transition: + var(--sl-transition-fast) border-color, + var(--sl-transition-fast) background-color, + var(--sl-transition-fast) color, + var(--sl-transition-fast) box-shadow; cursor: pointer; } diff --git a/src/components/relative-time/relative-time.test.ts b/src/components/relative-time/relative-time.test.ts index 0c264539..70347c52 100644 --- a/src/components/relative-time/relative-time.test.ts +++ b/src/components/relative-time/relative-time.test.ts @@ -20,9 +20,9 @@ const expectFormattedRelativeTimeToBe = async (relativeTime: SlRelativeTime, exp }; const createRelativeTimeWithDate = async (relativeDate: Date): Promise => { - const relativeTime: SlRelativeTime = await fixture( - html` ` - ); + const relativeTime: SlRelativeTime = await fixture(html` + + `); relativeTime.date = relativeDate; return relativeTime; }; @@ -113,27 +113,27 @@ describe('sl-relative-time', () => { it(`shows the correct relative time given a String object: ${testCase.expectedOutput}`, async () => { const dateString = testCase.date.toISOString(); - const relativeTime: SlRelativeTime = await fixture( - html` ` - ); + const relativeTime: SlRelativeTime = await fixture(html` + + `); await expectFormattedRelativeTimeToBe(relativeTime, testCase.expectedOutput); }); }); it('always shows numeric if requested via numeric property', async () => { - const relativeTime: SlRelativeTime = await fixture( - html` ` - ); + const relativeTime: SlRelativeTime = await fixture(html` + + `); relativeTime.date = yesterday; await expectFormattedRelativeTimeToBe(relativeTime, '1 day ago'); }); it('shows human readable form if appropriate and numeric property is auto', async () => { - const relativeTime: SlRelativeTime = await fixture( - html` ` - ); + const relativeTime: SlRelativeTime = await fixture(html` + + `); relativeTime.date = yesterday; await expectFormattedRelativeTimeToBe(relativeTime, 'yesterday'); @@ -150,9 +150,9 @@ describe('sl-relative-time', () => { it('allows to use a short form of the unit', async () => { const twoYearsAgo = new Date(currentTime.getTime() - 2 * nonLeapYearInSeconds); - const relativeTime: SlRelativeTime = await fixture( - html` ` - ); + const relativeTime: SlRelativeTime = await fixture(html` + + `); relativeTime.date = twoYearsAgo; await expectFormattedRelativeTimeToBe(relativeTime, '2 yr. ago'); @@ -160,18 +160,18 @@ describe('sl-relative-time', () => { it('allows to use a long form of the unit', async () => { const twoYearsAgo = new Date(currentTime.getTime() - 2 * nonLeapYearInSeconds); - const relativeTime: SlRelativeTime = await fixture( - html` ` - ); + const relativeTime: SlRelativeTime = await fixture(html` + + `); relativeTime.date = twoYearsAgo; await expectFormattedRelativeTimeToBe(relativeTime, '2 years ago'); }); it('is formatted according to the requested locale', async () => { - const relativeTime: SlRelativeTime = await fixture( - html` ` - ); + const relativeTime: SlRelativeTime = await fixture(html` + + `); relativeTime.date = yesterday; await expectFormattedRelativeTimeToBe(relativeTime, 'gestern'); @@ -192,9 +192,9 @@ describe('sl-relative-time', () => { it('does not display a time element on invalid time string', async () => { const invalidDateString = 'thisIsNotATimeString'; - const relativeTime: SlRelativeTime = await fixture( - html` ` - ); + const relativeTime: SlRelativeTime = await fixture(html` + + `); await relativeTime.updateComplete; expect(extractTimeElement(relativeTime)).to.be.null; diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts index 380e0f4f..84af6c9f 100644 --- a/src/components/select/select.styles.ts +++ b/src/components/select/select.styles.ts @@ -46,7 +46,10 @@ export default css` vertical-align: middle; overflow: hidden; cursor: pointer; - transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow, + transition: + var(--sl-transition-fast) color, + var(--sl-transition-fast) border, + var(--sl-transition-fast) box-shadow, var(--sl-transition-fast) background-color; } diff --git a/src/components/split-panel/split-panel.test.ts b/src/components/split-panel/split-panel.test.ts index 82ae5114..33e687c2 100644 --- a/src/components/split-panel/split-panel.test.ts +++ b/src/components/split-panel/split-panel.test.ts @@ -43,19 +43,23 @@ describe('', () => { }); it('should be accessible', async () => { - const splitPanel = await fixture(html` -
Start
-
End
- `); + const splitPanel = await fixture( + html` +
Start
+
End
+ ` + ); await expect(splitPanel).to.be.accessible(); }); it('should show both panels', async () => { - const splitPanel = await fixture(html` -
Start
-
End
- `); + const splitPanel = await fixture( + html` +
Start
+
End
+ ` + ); expect(splitPanel).to.contain.text('Start'); expect(splitPanel).to.contain.text('End'); @@ -63,10 +67,12 @@ describe('', () => { describe('panel sizing horizontal', () => { it('has two evenly sized panels by default', async () => { - const splitPanel = await fixture(html` -
Start
-
End
- `); + const splitPanel = await fixture( + html` +
Start
+
End
+ ` + ); const startPanelWidth = getPanelWidth(splitPanel, 'start-panel'); const endPanelWidth = getPanelWidth(splitPanel, 'end-panel'); @@ -75,10 +81,12 @@ describe('', () => { }); it('changes the sizing of the panels based on the position attribute', async () => { - const splitPanel = await fixture(html` -
Start
-
End
- `); + const splitPanel = await fixture( + html` +
Start
+
End
+ ` + ); const startPanelWidth = getPanelWidth(splitPanel, 'start-panel'); const endPanelWidth = getPanelWidth(splitPanel, 'end-panel'); @@ -87,10 +95,12 @@ describe('', () => { }); it('updates the position in pixels to the correct result', async () => { - const splitPanel = await fixture(html` -
Start
-
End
- `); + const splitPanel = await fixture( + html` +
Start
+
End
+ ` + ); splitPanel.position = 10; @@ -100,10 +110,12 @@ describe('', () => { }); it('emits the sl-reposition event on position change', async () => { - const splitPanel = await fixture(html` -
Start
-
End
- `); + const splitPanel = await fixture( + html` +
Start
+
End
+ ` + ); const repositionPromise = oneEvent(splitPanel, 'sl-reposition'); splitPanel.position = 10; @@ -111,10 +123,12 @@ describe('', () => { }); it('can be resized using the mouse', async () => { - const splitPanel = await fixture(html` -
Start
-
End
- `); + const splitPanel = await fixture( + html` +
Start
+
End
+ ` + ); const positionInPixels = splitPanel.positionInPixels; @@ -127,10 +141,12 @@ describe('', () => { }); it('cannot be resized if disabled', async () => { - const splitPanel = await fixture(html` -
Start
-
End
- `); + const splitPanel = await fixture( + html` +
Start
+
End
+ ` + ); const positionInPixels = splitPanel.positionInPixels; @@ -143,10 +159,12 @@ describe('', () => { }); it('snaps to predefined positions', async () => { - const splitPanel = await fixture(html` -
Start
-
End
- `); + const splitPanel = await fixture( + html` +
Start
+
End
+ ` + ); const positionInPixels = splitPanel.positionInPixels; splitPanel.snap = `${positionInPixels - 40}px`; @@ -162,10 +180,12 @@ describe('', () => { describe('panel sizing vertical', () => { it('has two evenly sized panels by default', async () => { - const splitPanel = await fixture(html` -
Start
-
End
- `); + const splitPanel = await fixture( + html` +
Start
+
End
+ ` + ); const startPanelHeight = getPanelHeight(splitPanel, 'start-panel'); const endPanelHeight = getPanelHeight(splitPanel, 'end-panel'); @@ -174,10 +194,12 @@ describe('', () => { }); it('changes the sizing of the panels based on the position attribute', async () => { - const splitPanel = await fixture(html` -
Start
-
End
- `); + const splitPanel = await fixture( + html` +
Start
+
End
+ ` + ); const startPanelHeight = getPanelHeight(splitPanel, 'start-panel'); const endPanelHeight = getPanelHeight(splitPanel, 'end-panel'); @@ -186,10 +208,12 @@ describe('', () => { }); it('updates the position in pixels to the correct result', async () => { - const splitPanel = await fixture(html` -
Start
-
End
- `); + const splitPanel = await fixture( + html` +
Start
+
End
+ ` + ); splitPanel.position = 10; @@ -199,10 +223,12 @@ describe('', () => { }); it('emits the sl-reposition event on position change ', async () => { - const splitPanel = await fixture(html` -
Start
-
End
- `); + const splitPanel = await fixture( + html` +
Start
+
End
+ ` + ); const repositionPromise = oneEvent(splitPanel, 'sl-reposition'); splitPanel.position = 10; @@ -210,10 +236,12 @@ describe('', () => { }); it('can be resized using the mouse ', async () => { - const splitPanel = await fixture(html` -
Start
-
End
- `); + const splitPanel = await fixture( + html` +
Start
+
End
+ ` + ); const positionInPixels = splitPanel.positionInPixels; @@ -226,10 +254,12 @@ describe('', () => { }); it('cannot be resized if disabled', async () => { - const splitPanel = await fixture(html` -
Start
-
End
- `); + const splitPanel = await fixture( + html` +
Start
+
End
+ ` + ); const positionInPixels = splitPanel.positionInPixels; @@ -242,10 +272,12 @@ describe('', () => { }); it('snaps to predefined positions', async () => { - const splitPanel = await fixture(html` -
Start
-
End
- `); + const splitPanel = await fixture( + html` +
Start
+
End
+ ` + ); const positionInPixels = splitPanel.positionInPixels; splitPanel.snap = `${positionInPixels - 40}px`; diff --git a/src/components/switch/switch.styles.ts b/src/components/switch/switch.styles.ts index 920f9dc5..136b56db 100644 --- a/src/components/switch/switch.styles.ts +++ b/src/components/switch/switch.styles.ts @@ -55,7 +55,9 @@ export default css` background-color: var(--sl-color-neutral-400); border: solid var(--sl-input-border-width) var(--sl-color-neutral-400); border-radius: var(--height); - transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color; + transition: + var(--sl-transition-fast) border-color, + var(--sl-transition-fast) background-color; } .switch__control .switch__thumb { @@ -65,8 +67,11 @@ export default css` border-radius: 50%; border: solid var(--sl-input-border-width) var(--sl-color-neutral-400); translate: calc((var(--width) - var(--height)) / -2); - transition: var(--sl-transition-fast) translate ease, var(--sl-transition-fast) background-color, - var(--sl-transition-fast) border-color, var(--sl-transition-fast) box-shadow; + transition: + var(--sl-transition-fast) translate ease, + var(--sl-transition-fast) background-color, + var(--sl-transition-fast) border-color, + var(--sl-transition-fast) box-shadow; } .switch__input { diff --git a/src/components/tab-group/tab-group.styles.ts b/src/components/tab-group/tab-group.styles.ts index 94825ba6..ad776add 100644 --- a/src/components/tab-group/tab-group.styles.ts +++ b/src/components/tab-group/tab-group.styles.ts @@ -24,7 +24,9 @@ export default css` .tab-group__indicator { position: absolute; - transition: var(--sl-transition-fast) translate ease, var(--sl-transition-fast) width ease; + transition: + var(--sl-transition-fast) translate ease, + var(--sl-transition-fast) width ease; } .tab-group--has-scroll-controls .tab-group__nav-container { diff --git a/src/components/tab-group/tab-group.test.ts b/src/components/tab-group/tab-group.test.ts index d415d1db..2a27ecfb 100644 --- a/src/components/tab-group/tab-group.test.ts +++ b/src/components/tab-group/tab-group.test.ts @@ -187,8 +187,10 @@ describe('', () => { const generateTabs = (n: number): HTMLTemplateResult[] => { const result: HTMLTemplateResult[] = []; for (let i = 0; i < n; i++) { - result.push(html`Tab ${i} - Content of tab ${i}0 `); + result.push( + html`Tab ${i} + Content of tab ${i}0 ` + ); } return result; }; diff --git a/src/components/tab/tab.styles.ts b/src/components/tab/tab.styles.ts index acbe36fb..6259f2ca 100644 --- a/src/components/tab/tab.styles.ts +++ b/src/components/tab/tab.styles.ts @@ -20,7 +20,9 @@ export default css` white-space: nowrap; user-select: none; cursor: pointer; - transition: var(--transition-speed) box-shadow, var(--transition-speed) color; + transition: + var(--transition-speed) box-shadow, + var(--transition-speed) color; } .tab:hover:not(.tab--disabled) { diff --git a/src/components/textarea/textarea.styles.ts b/src/components/textarea/textarea.styles.ts index ac18266a..dc301efd 100644 --- a/src/components/textarea/textarea.styles.ts +++ b/src/components/textarea/textarea.styles.ts @@ -20,7 +20,10 @@ export default css` line-height: var(--sl-line-height-normal); letter-spacing: var(--sl-input-letter-spacing); vertical-align: middle; - transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow, + transition: + var(--sl-transition-fast) color, + var(--sl-transition-fast) border, + var(--sl-transition-fast) box-shadow, var(--sl-transition-fast) background-color; cursor: text; } diff --git a/src/components/tree-item/tree-item.component.ts b/src/components/tree-item/tree-item.component.ts index ca471bad..03487eff 100644 --- a/src/components/tree-item/tree-item.component.ts +++ b/src/components/tree-item/tree-item.component.ts @@ -267,11 +267,10 @@ export default class SlTreeItem extends ShoelaceElement { ${when( this.selectable, - () => - html` - - ` + class="tree-item__checkbox" + ?disabled="${this.disabled}" + ?checked="${live(this.selected)}" + ?indeterminate="${this.indeterminate}" + tabindex="-1" + > + ` )}