mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

update prettier

pull/1617/head
Cory LaViska 2023-10-12 13:56:11 -04:00
rodzic 85f91b7785
commit c7b53cff47
34 zmienionych plików z 394 dodań i 310 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

12
docs/assets/styles/docs.css
Wyświetl plik

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

2
docs/pages/tutorials/integrating-with-rails.md
Wyświetl plik

@ -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 `<head>` section of `app/views/layouts/application.html.erb`.
```html
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<!-- ... -->

64
package-lock.json wygenerowano
Wyświetl plik

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

2
package.json
Wyświetl plik

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

6
prettier.config.cjs → prettier.config.js
Wyświetl plik

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

6
scripts/make-react.js
Wyświetl plik

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

6
scripts/make-themes.js
Wyświetl plik

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

10
src/components/alert/alert.test.ts
Wyświetl plik

@ -210,10 +210,12 @@ describe('<sl-alert>', () => {
};
it('deletes the toast stack after the last alert is done', async () => {
const container = await fixture<HTMLElement>(html`<div>
<sl-alert data-testid="alert1" closable>alert 1</sl-alert>
<sl-alert data-testid="alert2" closable>alert 2</sl-alert>
</div>`);
const container = await fixture<HTMLElement>(
html`<div>
<sl-alert data-testid="alert1" closable>alert 1</sl-alert>
<sl-alert data-testid="alert2" closable>alert 2</sl-alert>
</div>`
);
const alert1 = queryByTestId<SlAlert>(container, 'alert1');
const alert2 = queryByTestId<SlAlert>(container, 'alert2');

7
src/components/button/button.styles.ts
Wyświetl plik

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

18
src/components/button/button.test.ts
Wyświetl plik

@ -99,25 +99,25 @@ describe('<sl-button>', () => {
});
it('should render a link with rel="noreferrer noopener" when target is set and rel is not', async () => {
const el = await fixture<SlButton>(
html` <sl-button href="https://example.com/" target="_blank">Link</sl-button> `
);
const el = await fixture<SlButton>(html`
<sl-button href="https://example.com/" target="_blank">Link</sl-button>
`);
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<SlButton>(
html` <sl-button href="https://example.com/" target="_blank" rel="">Link</sl-button> `
);
const el = await fixture<SlButton>(html`
<sl-button href="https://example.com/" target="_blank" rel="">Link</sl-button>
`);
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<SlButton>(
html` <sl-button href="https://example.com/" target="_blank" rel="1">Link</sl-button> `
);
const el = await fixture<SlButton>(html`
<sl-button href="https://example.com/" target="_blank" rel="1">Link</sl-button>
`);
const link = el.shadowRoot!.querySelector('a')!;
expect(link?.getAttribute('rel')).to.equal('1');
});

6
src/components/card/card.test.ts
Wyświetl plik

@ -7,9 +7,9 @@ describe('<sl-card>', () => {
describe('when provided no parameters', () => {
before(async () => {
el = await fixture<SlCard>(
html` <sl-card>This is just a basic card. No image, no header, and no footer. Just your content.</sl-card> `
);
el = await fixture<SlCard>(html`
<sl-card>This is just a basic card. No image, no header, and no footer. Just your content.</sl-card>
`);
});
it('should pass accessibility tests', async () => {

7
src/components/checkbox/checkbox.styles.ts
Wyświetl plik

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

10
src/components/color-picker/color-picker.styles.ts
Wyświetl plik

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

6
src/components/color-picker/color-picker.test.ts
Wyświetl plik

@ -97,9 +97,9 @@ describe('<sl-color-picker>', () => {
});
it('should render the correct swatches when passing a string of color values', async () => {
const el = await fixture<SlColorPicker>(
html` <sl-color-picker swatches="red; #008000; rgb(0,0,255);"></sl-color-picker> `
);
const el = await fixture<SlColorPicker>(html`
<sl-color-picker swatches="red; #008000; rgb(0,0,255);"></sl-color-picker>
`);
const swatches = [...el.shadowRoot!.querySelectorAll('[part~="swatch"] > div')];
expect(swatches.length).to.equal(3);

6
src/components/dialog/dialog.test.ts
Wyświetl plik

@ -17,9 +17,9 @@ describe('<sl-dialog>', () => {
});
it('should not be visible without the open attribute', async () => {
const el = await fixture<SlDialog>(
html` <sl-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog> `
);
const el = await fixture<SlDialog>(html`
<sl-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
`);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
expect(base.hidden).to.be.true;

6
src/components/drawer/drawer.test.ts
Wyświetl plik

@ -16,9 +16,9 @@ describe('<sl-drawer>', () => {
});
it('should not be visible without the open attribute', async () => {
const el = await fixture<SlDrawer>(
html` <sl-drawer>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-drawer> `
);
const el = await fixture<SlDrawer>(html`
<sl-drawer>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-drawer>
`);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
expect(base.hidden).to.be.true;

123
src/components/format-date/format-date.test.ts
Wyświetl plik

@ -52,11 +52,9 @@ describe('<sl-format-date>', () => {
];
results.forEach(setup => {
it(`date has correct language format: ${setup.lang}`, async () => {
const el = await fixture<SlFormatDate>(
html`
<sl-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" lang="${setup.lang}"></sl-format-date>
`
);
const el = await fixture<SlFormatDate>(html`
<sl-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" lang="${setup.lang}"></sl-format-date>
`);
expect(el.shadowRoot?.textContent?.trim()).to.equal(setup.result);
});
});
@ -66,14 +64,12 @@ describe('<sl-format-date>', () => {
const weekdays = ['narrow', 'short', 'long'];
weekdays.forEach((weekdayFormat: 'narrow' | 'short' | 'long') => {
it(`date has correct weekday format: ${weekdayFormat}`, async () => {
const el = await fixture<SlFormatDate>(
html`
<sl-format-date
.date="${new Date(new Date().getFullYear(), 0, 1)}"
weekday="${weekdayFormat}"
></sl-format-date>
`
);
const el = await fixture<SlFormatDate>(html`
<sl-format-date
.date="${new Date(new Date().getFullYear(), 0, 1)}"
weekday="${weekdayFormat}"
></sl-format-date>
`);
const expected = new Intl.DateTimeFormat('en-US', { weekday: weekdayFormat }).format(
new Date(new Date().getFullYear(), 0, 1)
@ -87,11 +83,9 @@ describe('<sl-format-date>', () => {
const eras = ['narrow', 'short', 'long'];
eras.forEach((eraFormat: 'narrow' | 'short' | 'long') => {
it(`date has correct era format: ${eraFormat}`, async () => {
const el = await fixture<SlFormatDate>(
html`
<sl-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" era="${eraFormat}"></sl-format-date>
`
);
const el = await fixture<SlFormatDate>(html`
<sl-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" era="${eraFormat}"></sl-format-date>
`);
const expected = new Intl.DateTimeFormat('en-US', { era: eraFormat }).format(
new Date(new Date().getFullYear(), 0, 1)
@ -105,11 +99,9 @@ describe('<sl-format-date>', () => {
const yearFormats = ['numeric', '2-digit'];
yearFormats.forEach((yearFormat: 'numeric' | '2-digit') => {
it(`date has correct year format: ${yearFormat}`, async () => {
const el = await fixture<SlFormatDate>(
html`
<sl-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" year="${yearFormat}"></sl-format-date>
`
);
const el = await fixture<SlFormatDate>(html`
<sl-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" year="${yearFormat}"></sl-format-date>
`);
const expected = new Intl.DateTimeFormat('en-US', { year: yearFormat }).format(
new Date(new Date().getFullYear(), 0, 1)
@ -123,11 +115,9 @@ describe('<sl-format-date>', () => {
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<SlFormatDate>(
html`
<sl-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" month="${monthFormat}"></sl-format-date>
`
);
const el = await fixture<SlFormatDate>(html`
<sl-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" month="${monthFormat}"></sl-format-date>
`);
const expected = new Intl.DateTimeFormat('en-US', { month: monthFormat }).format(
new Date(new Date().getFullYear(), 0, 1)
@ -141,11 +131,9 @@ describe('<sl-format-date>', () => {
const dayFormats = ['numeric', '2-digit'];
dayFormats.forEach((dayFormat: 'numeric' | '2-digit') => {
it(`date has correct day format: ${dayFormat}`, async () => {
const el = await fixture<SlFormatDate>(
html`
<sl-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" day="${dayFormat}"></sl-format-date>
`
);
const el = await fixture<SlFormatDate>(html`
<sl-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" day="${dayFormat}"></sl-format-date>
`);
const expected = new Intl.DateTimeFormat('en-US', { day: dayFormat }).format(
new Date(new Date().getFullYear(), 0, 1)
@ -159,11 +147,9 @@ describe('<sl-format-date>', () => {
const hourFormats = ['numeric', '2-digit'];
hourFormats.forEach((hourFormat: 'numeric' | '2-digit') => {
it(`date has correct hour format: ${hourFormat}`, async () => {
const el = await fixture<SlFormatDate>(
html`
<sl-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" hour="${hourFormat}"></sl-format-date>
`
);
const el = await fixture<SlFormatDate>(html`
<sl-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" hour="${hourFormat}"></sl-format-date>
`);
const expected = new Intl.DateTimeFormat('en-US', { hour: hourFormat }).format(
new Date(new Date().getFullYear(), 0, 1)
@ -177,14 +163,9 @@ describe('<sl-format-date>', () => {
const minuteFormats = ['numeric', '2-digit'];
minuteFormats.forEach((minuteFormat: 'numeric' | '2-digit') => {
it(`date has correct minute format: ${minuteFormat}`, async () => {
const el = await fixture<SlFormatDate>(
html`
<sl-format-date
.date="${new Date(new Date().getFullYear(), 0, 1)}"
minute="${minuteFormat}"
></sl-format-date>
`
);
const el = await fixture<SlFormatDate>(html`
<sl-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" minute="${minuteFormat}"></sl-format-date>
`);
const expected = new Intl.DateTimeFormat('en-US', { minute: minuteFormat }).format(
new Date(new Date().getFullYear(), 0, 1)
@ -198,14 +179,9 @@ describe('<sl-format-date>', () => {
const secondFormats = ['numeric', '2-digit'];
secondFormats.forEach((secondFormat: 'numeric' | '2-digit') => {
it(`date has correct second format: ${secondFormat}`, async () => {
const el = await fixture<SlFormatDate>(
html`
<sl-format-date
.date="${new Date(new Date().getFullYear(), 0, 1)}"
second="${secondFormat}"
></sl-format-date>
`
);
const el = await fixture<SlFormatDate>(html`
<sl-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" second="${secondFormat}"></sl-format-date>
`);
const expected = new Intl.DateTimeFormat('en-US', { second: secondFormat }).format(
new Date(new Date().getFullYear(), 0, 1)
@ -219,14 +195,12 @@ describe('<sl-format-date>', () => {
const timeZoneNameFormats = ['short', 'long'];
timeZoneNameFormats.forEach((timeZoneNameFormat: 'short' | 'long') => {
it(`date has correct timeZoneName format: ${timeZoneNameFormat}`, async () => {
const el = await fixture<SlFormatDate>(
html`
<sl-format-date
.date="${new Date(new Date().getFullYear(), 0, 1)}"
time-zone-name="${timeZoneNameFormat}"
></sl-format-date>
`
);
const el = await fixture<SlFormatDate>(html`
<sl-format-date
.date="${new Date(new Date().getFullYear(), 0, 1)}"
time-zone-name="${timeZoneNameFormat}"
></sl-format-date>
`);
const expected = new Intl.DateTimeFormat('en-US', { timeZoneName: timeZoneNameFormat }).format(
new Date(new Date().getFullYear(), 0, 1)
@ -240,14 +214,9 @@ describe('<sl-format-date>', () => {
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<SlFormatDate>(
html`
<sl-format-date
.date="${new Date(new Date().getFullYear(), 0, 1)}"
time-zone="${timeZone}"
></sl-format-date>
`
);
const el = await fixture<SlFormatDate>(html`
<sl-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" time-zone="${timeZone}"></sl-format-date>
`);
const expected = new Intl.DateTimeFormat('en-US', { timeZone: timeZone }).format(
new Date(new Date().getFullYear(), 0, 1)
@ -261,14 +230,12 @@ describe('<sl-format-date>', () => {
const hourFormatValues = ['auto', '12', '24'];
hourFormatValues.forEach(hourFormatValue => {
it(`date has correct hourFormat format: ${hourFormatValue}`, async () => {
const el = await fixture<SlFormatDate>(
html`
<sl-format-date
.date="${new Date(new Date().getFullYear(), 0, 1)}"
hour-format="${hourFormatValue as 'auto' | '12' | '24'}"
></sl-format-date>
`
);
const el = await fixture<SlFormatDate>(html`
<sl-format-date
.date="${new Date(new Date().getFullYear(), 0, 1)}"
hour-format="${hourFormatValue as 'auto' | '12' | '24'}"
></sl-format-date>
`);
const expected = new Intl.DateTimeFormat('en-US', {
hour12: hourFormatValue === 'auto' ? undefined : hourFormatValue === '12'

58
src/components/format-number/format-number.test.ts
Wyświetl plik

@ -24,9 +24,9 @@ describe('<sl-format-number>', () => {
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<SlFormatNumber>(
html` <sl-format-number value="1000" lang="${lang}"></sl-format-number> `
);
const el = await fixture<SlFormatNumber>(html`
<sl-format-number value="1000" lang="${lang}"></sl-format-number>
`);
const expected = new Intl.NumberFormat(lang, { style: 'decimal', useGrouping: true }).format(1000);
expect(el.shadowRoot?.textContent).to.equal(expected);
});
@ -36,9 +36,9 @@ describe('<sl-format-number>', () => {
describe('type property', () => {
['currency', 'decimal', 'percent'].forEach(type => {
it(`number has correct type format: ${type}`, async () => {
const el = await fixture<SlFormatNumber>(
html` <sl-format-number value="1000" type="${type}"></sl-format-number> `
);
const el = await fixture<SlFormatNumber>(html`
<sl-format-number value="1000" type="${type}"></sl-format-number>
`);
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('<sl-format-number>', () => {
describe('currency property', () => {
['USD', 'CAD', 'AUD', 'UAH'].forEach(currency => {
it(`number has correct type format: ${currency}`, async () => {
const el = await fixture<SlFormatNumber>(
html` <sl-format-number value="1000" currency="${currency}"></sl-format-number> `
);
const el = await fixture<SlFormatNumber>(html`
<sl-format-number value="1000" currency="${currency}"></sl-format-number>
`);
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('<sl-format-number>', () => {
describe('currencyDisplay property', () => {
['symbol', 'narrowSymbol', 'code', 'name'].forEach(currencyDisplay => {
it(`number has correct type format: ${currencyDisplay}`, async () => {
const el = await fixture<SlFormatNumber>(
html` <sl-format-number value="1000" currency-display="${currencyDisplay}"></sl-format-number> `
);
const el = await fixture<SlFormatNumber>(html`
<sl-format-number value="1000" currency-display="${currencyDisplay}"></sl-format-number>
`);
const expected = new Intl.NumberFormat('en-US', { style: 'decimal', currencyDisplay: currencyDisplay }).format(
1000
);
@ -88,9 +88,9 @@ describe('<sl-format-number>', () => {
describe('minimumIntegerDigits property', () => {
[4, 5, 6].forEach(minDigits => {
it(`number has correct type format: ${minDigits}`, async () => {
const el = await fixture<SlFormatNumber>(
html` <sl-format-number value="1000" minimum-integer-digits="${minDigits}"></sl-format-number> `
);
const el = await fixture<SlFormatNumber>(html`
<sl-format-number value="1000" minimum-integer-digits="${minDigits}"></sl-format-number>
`);
const expected = new Intl.NumberFormat('en-US', {
style: 'decimal',
currencyDisplay: 'symbol',
@ -104,9 +104,9 @@ describe('<sl-format-number>', () => {
describe('minimumFractionDigits property', () => {
[4, 5, 6].forEach(minFractionDigits => {
it(`number has correct type format: ${minFractionDigits}`, async () => {
const el = await fixture<SlFormatNumber>(
html` <sl-format-number value="1000" minimum-fraction-digits="${minFractionDigits}"></sl-format-number> `
);
const el = await fixture<SlFormatNumber>(html`
<sl-format-number value="1000" minimum-fraction-digits="${minFractionDigits}"></sl-format-number>
`);
const expected = new Intl.NumberFormat('en-US', {
style: 'decimal',
currencyDisplay: 'symbol',
@ -120,9 +120,9 @@ describe('<sl-format-number>', () => {
describe('maximumFractionDigits property', () => {
[4, 5, 6].forEach(maxFractionDigits => {
it(`number has correct type format: ${maxFractionDigits}`, async () => {
const el = await fixture<SlFormatNumber>(
html` <sl-format-number value="1000" maximum-fraction-digits="${maxFractionDigits}"></sl-format-number> `
);
const el = await fixture<SlFormatNumber>(html`
<sl-format-number value="1000" maximum-fraction-digits="${maxFractionDigits}"></sl-format-number>
`);
const expected = new Intl.NumberFormat('en-US', {
style: 'decimal',
currencyDisplay: 'symbol',
@ -136,11 +136,9 @@ describe('<sl-format-number>', () => {
describe('minimumSignificantDigits property', () => {
[4, 5, 6].forEach(minSignificantDigits => {
it(`number has correct type format: ${minSignificantDigits}`, async () => {
const el = await fixture<SlFormatNumber>(
html`
<sl-format-number value="1000" minimum-significant-digits="${minSignificantDigits}"></sl-format-number>
`
);
const el = await fixture<SlFormatNumber>(html`
<sl-format-number value="1000" minimum-significant-digits="${minSignificantDigits}"></sl-format-number>
`);
const expected = new Intl.NumberFormat('en-US', {
style: 'decimal',
currencyDisplay: 'symbol',
@ -154,11 +152,9 @@ describe('<sl-format-number>', () => {
describe('maximumSignificantDigits property', () => {
[4, 5, 6].forEach(maxSignificantDigits => {
it(`number has correct type format: ${maxSignificantDigits}`, async () => {
const el = await fixture<SlFormatNumber>(
html`
<sl-format-number value="1000" maximum-significant-digits="${maxSignificantDigits}"></sl-format-number>
`
);
const el = await fixture<SlFormatNumber>(html`
<sl-format-number value="1000" maximum-significant-digits="${maxSignificantDigits}"></sl-format-number>
`);
const expected = new Intl.NumberFormat('en-US', {
style: 'decimal',
currencyDisplay: 'symbol',

40
src/components/icon-button/icon-button.test.ts
Wyświetl plik

@ -30,15 +30,13 @@ describe('<sl-icon-button>', () => {
describe('when styling the host element', () => {
it('renders the correct color and font size', async () => {
const el = await fixture<SlIconButton>(
html`
<sl-icon-button
library="system"
name="check"
style="color: rgb(0, 136, 221); font-size: 2rem;"
></sl-icon-button>
`
);
const el = await fixture<SlIconButton>(html`
<sl-icon-button
library="system"
name="check"
style="color: rgb(0, 136, 221); font-size: 2rem;"
></sl-icon-button>
`);
const icon = el.shadowRoot!.querySelector('sl-icon')!;
const styles = getComputedStyle(icon);
@ -85,16 +83,16 @@ describe('<sl-icon-button>', () => {
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<SlIconButton>(
html` <sl-icon-button href="some/path" target="${target}"></sl-icon-button> `
);
const el = await fixture<SlIconButton>(html`
<sl-icon-button href="some/path" target="${target}"></sl-icon-button>
`);
expect(el.shadowRoot?.querySelector(`a[target="${target}"]`)).to.exist;
});
it(`the anchor rel is set to 'noreferrer noopener'`, async () => {
const el = await fixture<SlIconButton>(
html` <sl-icon-button href="some/path" target="${target}"></sl-icon-button> `
);
const el = await fixture<SlIconButton>(html`
<sl-icon-button href="some/path" target="${target}"></sl-icon-button>
`);
expect(el.shadowRoot?.querySelector(`a[rel="noreferrer noopener"]`)).to.exist;
});
});
@ -103,9 +101,9 @@ describe('<sl-icon-button>', () => {
describe('and download is present', () => {
it(`the anchor download attribute is the provided download`, async () => {
const fakeDownload = 'some/path';
const el = await fixture<SlIconButton>(
html` <sl-icon-button href="some/path" download="${fakeDownload}"></sl-icon-button> `
);
const el = await fixture<SlIconButton>(html`
<sl-icon-button href="some/path" download="${fakeDownload}"></sl-icon-button>
`);
expect(el.shadowRoot?.querySelector(`a[download="${fakeDownload}"]`)).to.exist;
});
@ -121,9 +119,9 @@ describe('<sl-icon-button>', () => {
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<SlIconButton>(
html` <sl-icon-button href="some/path" label="${fakeLabel}"></sl-icon-button> `
);
const el = await fixture<SlIconButton>(html`
<sl-icon-button href="some/path" label="${fakeLabel}"></sl-icon-button>
`);
expect(el.shadowRoot?.querySelector(`a[aria-label="${fakeLabel}"]`)).to.exist;
});
});

5
src/components/input/input.styles.ts
Wyświetl plik

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

4
src/components/progress-bar/progress-bar.styles.ts
Wyświetl plik

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

10
src/components/progress-bar/progress-bar.test.ts
Wyświetl plik

@ -73,12 +73,10 @@ describe('<sl-progress-bar>', () => {
describe('when provided a ariaLabelledBy, and value parameter', () => {
before(async () => {
el = await fixture<SlProgressBar>(
html`
<label id="labelledby">Progress Ring Label</label>
<sl-progress-bar ariaLabelledBy="labelledby" value="25"></sl-progress-bar>
`
);
el = await fixture<SlProgressBar>(html`
<label id="labelledby">Progress Ring Label</label>
<sl-progress-bar ariaLabelledBy="labelledby" value="25"></sl-progress-bar>
`);
});
it('should pass accessibility tests', async () => {

10
src/components/progress-ring/progress-ring.test.ts
Wyświetl plik

@ -52,12 +52,10 @@ describe('<sl-progress-ring>', () => {
describe('when provided a ariaLabelledBy, and value parameter', () => {
before(async () => {
el = await fixture<SlProgressRing>(
html`
<label id="labelledby">Progress Ring Label</label>
<sl-progress-ring ariaLabelledBy="labelledby" value="25"></sl-progress-ring>
`
);
el = await fixture<SlProgressRing>(html`
<label id="labelledby">Progress Ring Label</label>
<sl-progress-ring ariaLabelledBy="labelledby" value="25"></sl-progress-ring>
`);
});
it('should pass accessibility tests', async () => {

7
src/components/radio/radio.styles.ts
Wyświetl plik

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

7
src/components/range/range.styles.ts
Wyświetl plik

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

48
src/components/relative-time/relative-time.test.ts
Wyświetl plik

@ -20,9 +20,9 @@ const expectFormattedRelativeTimeToBe = async (relativeTime: SlRelativeTime, exp
};
const createRelativeTimeWithDate = async (relativeDate: Date): Promise<SlRelativeTime> => {
const relativeTime: SlRelativeTime = await fixture<SlRelativeTime>(
html` <sl-relative-time lang="en-US"></sl-relative-time> `
);
const relativeTime: SlRelativeTime = await fixture<SlRelativeTime>(html`
<sl-relative-time lang="en-US"></sl-relative-time>
`);
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<SlRelativeTime>(
html` <sl-relative-time lang="en-US" date="${dateString}"></sl-relative-time> `
);
const relativeTime: SlRelativeTime = await fixture<SlRelativeTime>(html`
<sl-relative-time lang="en-US" date="${dateString}"></sl-relative-time>
`);
await expectFormattedRelativeTimeToBe(relativeTime, testCase.expectedOutput);
});
});
it('always shows numeric if requested via numeric property', async () => {
const relativeTime: SlRelativeTime = await fixture<SlRelativeTime>(
html` <sl-relative-time lang="en-US" numeric="always"></sl-relative-time> `
);
const relativeTime: SlRelativeTime = await fixture<SlRelativeTime>(html`
<sl-relative-time lang="en-US" numeric="always"></sl-relative-time>
`);
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<SlRelativeTime>(
html` <sl-relative-time lang="en-US" numeric="auto"></sl-relative-time> `
);
const relativeTime: SlRelativeTime = await fixture<SlRelativeTime>(html`
<sl-relative-time lang="en-US" numeric="auto"></sl-relative-time>
`);
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<SlRelativeTime>(
html` <sl-relative-time lang="en-US" numeric="always" format="short"></sl-relative-time> `
);
const relativeTime: SlRelativeTime = await fixture<SlRelativeTime>(html`
<sl-relative-time lang="en-US" numeric="always" format="short"></sl-relative-time>
`);
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<SlRelativeTime>(
html` <sl-relative-time lang="en-US" numeric="always" format="long"></sl-relative-time> `
);
const relativeTime: SlRelativeTime = await fixture<SlRelativeTime>(html`
<sl-relative-time lang="en-US" numeric="always" format="long"></sl-relative-time>
`);
relativeTime.date = twoYearsAgo;
await expectFormattedRelativeTimeToBe(relativeTime, '2 years ago');
});
it('is formatted according to the requested locale', async () => {
const relativeTime: SlRelativeTime = await fixture<SlRelativeTime>(
html` <sl-relative-time lang="de-DE" numeric="auto"></sl-relative-time> `
);
const relativeTime: SlRelativeTime = await fixture<SlRelativeTime>(html`
<sl-relative-time lang="de-DE" numeric="auto"></sl-relative-time>
`);
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<SlRelativeTime>(
html` <sl-relative-time lang="en-US" date="${invalidDateString}"></sl-relative-time> `
);
const relativeTime: SlRelativeTime = await fixture<SlRelativeTime>(html`
<sl-relative-time lang="en-US" date="${invalidDateString}"></sl-relative-time>
`);
await relativeTime.updateComplete;
expect(extractTimeElement(relativeTime)).to.be.null;

5
src/components/select/select.styles.ts
Wyświetl plik

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

160
src/components/split-panel/split-panel.test.ts
Wyświetl plik

@ -43,19 +43,23 @@ describe('<sl-split-panel>', () => {
});
it('should be accessible', async () => {
const splitPanel = await fixture(html`<sl-split-panel>
<div slot="start">Start</div>
<div slot="end">End</div>
</sl-split-panel>`);
const splitPanel = await fixture(
html`<sl-split-panel>
<div slot="start">Start</div>
<div slot="end">End</div>
</sl-split-panel>`
);
await expect(splitPanel).to.be.accessible();
});
it('should show both panels', async () => {
const splitPanel = await fixture(html`<sl-split-panel>
<div slot="start">Start</div>
<div slot="end">End</div>
</sl-split-panel>`);
const splitPanel = await fixture(
html`<sl-split-panel>
<div slot="start">Start</div>
<div slot="end">End</div>
</sl-split-panel>`
);
expect(splitPanel).to.contain.text('Start');
expect(splitPanel).to.contain.text('End');
@ -63,10 +67,12 @@ describe('<sl-split-panel>', () => {
describe('panel sizing horizontal', () => {
it('has two evenly sized panels by default', async () => {
const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel>
<div slot="start" data-testid="start-panel">Start</div>
<div slot="end" data-testid="end-panel">End</div>
</sl-split-panel>`);
const splitPanel = await fixture<SlSplitPanel>(
html`<sl-split-panel>
<div slot="start" data-testid="start-panel">Start</div>
<div slot="end" data-testid="end-panel">End</div>
</sl-split-panel>`
);
const startPanelWidth = getPanelWidth(splitPanel, 'start-panel');
const endPanelWidth = getPanelWidth(splitPanel, 'end-panel');
@ -75,10 +81,12 @@ describe('<sl-split-panel>', () => {
});
it('changes the sizing of the panels based on the position attribute', async () => {
const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel position="25">
<div slot="start" data-testid="start-panel">Start</div>
<div slot="end" data-testid="end-panel">End</div>
</sl-split-panel>`);
const splitPanel = await fixture<SlSplitPanel>(
html`<sl-split-panel position="25">
<div slot="start" data-testid="start-panel">Start</div>
<div slot="end" data-testid="end-panel">End</div>
</sl-split-panel>`
);
const startPanelWidth = getPanelWidth(splitPanel, 'start-panel');
const endPanelWidth = getPanelWidth(splitPanel, 'end-panel');
@ -87,10 +95,12 @@ describe('<sl-split-panel>', () => {
});
it('updates the position in pixels to the correct result', async () => {
const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel position="25">
<div slot="start" data-testid="start-panel">Start</div>
<div slot="end" data-testid="end-panel">End</div>
</sl-split-panel>`);
const splitPanel = await fixture<SlSplitPanel>(
html`<sl-split-panel position="25">
<div slot="start" data-testid="start-panel">Start</div>
<div slot="end" data-testid="end-panel">End</div>
</sl-split-panel>`
);
splitPanel.position = 10;
@ -100,10 +110,12 @@ describe('<sl-split-panel>', () => {
});
it('emits the sl-reposition event on position change', async () => {
const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel>
<div slot="start">Start</div>
<div slot="end">End</div>
</sl-split-panel>`);
const splitPanel = await fixture<SlSplitPanel>(
html`<sl-split-panel>
<div slot="start">Start</div>
<div slot="end">End</div>
</sl-split-panel>`
);
const repositionPromise = oneEvent(splitPanel, 'sl-reposition');
splitPanel.position = 10;
@ -111,10 +123,12 @@ describe('<sl-split-panel>', () => {
});
it('can be resized using the mouse', async () => {
const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel>
<div slot="start">Start</div>
<div slot="end">End</div>
</sl-split-panel>`);
const splitPanel = await fixture<SlSplitPanel>(
html`<sl-split-panel>
<div slot="start">Start</div>
<div slot="end">End</div>
</sl-split-panel>`
);
const positionInPixels = splitPanel.positionInPixels;
@ -127,10 +141,12 @@ describe('<sl-split-panel>', () => {
});
it('cannot be resized if disabled', async () => {
const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel disabled>
<div slot="start">Start</div>
<div slot="end">End</div>
</sl-split-panel>`);
const splitPanel = await fixture<SlSplitPanel>(
html`<sl-split-panel disabled>
<div slot="start">Start</div>
<div slot="end">End</div>
</sl-split-panel>`
);
const positionInPixels = splitPanel.positionInPixels;
@ -143,10 +159,12 @@ describe('<sl-split-panel>', () => {
});
it('snaps to predefined positions', async () => {
const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel>
<div slot="start">Start</div>
<div slot="end">End</div>
</sl-split-panel>`);
const splitPanel = await fixture<SlSplitPanel>(
html`<sl-split-panel>
<div slot="start">Start</div>
<div slot="end">End</div>
</sl-split-panel>`
);
const positionInPixels = splitPanel.positionInPixels;
splitPanel.snap = `${positionInPixels - 40}px`;
@ -162,10 +180,12 @@ describe('<sl-split-panel>', () => {
describe('panel sizing vertical', () => {
it('has two evenly sized panels by default', async () => {
const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel vertical style="height: 400px;">
<div slot="start" data-testid="start-panel">Start</div>
<div slot="end" data-testid="end-panel">End</div>
</sl-split-panel>`);
const splitPanel = await fixture<SlSplitPanel>(
html`<sl-split-panel vertical style="height: 400px;">
<div slot="start" data-testid="start-panel">Start</div>
<div slot="end" data-testid="end-panel">End</div>
</sl-split-panel>`
);
const startPanelHeight = getPanelHeight(splitPanel, 'start-panel');
const endPanelHeight = getPanelHeight(splitPanel, 'end-panel');
@ -174,10 +194,12 @@ describe('<sl-split-panel>', () => {
});
it('changes the sizing of the panels based on the position attribute', async () => {
const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel position="25" vertical style="height: 400px;">
<div slot="start" data-testid="start-panel">Start</div>
<div slot="end" data-testid="end-panel">End</div>
</sl-split-panel>`);
const splitPanel = await fixture<SlSplitPanel>(
html`<sl-split-panel position="25" vertical style="height: 400px;">
<div slot="start" data-testid="start-panel">Start</div>
<div slot="end" data-testid="end-panel">End</div>
</sl-split-panel>`
);
const startPanelHeight = getPanelHeight(splitPanel, 'start-panel');
const endPanelHeight = getPanelHeight(splitPanel, 'end-panel');
@ -186,10 +208,12 @@ describe('<sl-split-panel>', () => {
});
it('updates the position in pixels to the correct result', async () => {
const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel position="25" vertical style="height: 400px;">
<div slot="start" data-testid="start-panel">Start</div>
<div slot="end" data-testid="end-panel">End</div>
</sl-split-panel>`);
const splitPanel = await fixture<SlSplitPanel>(
html`<sl-split-panel position="25" vertical style="height: 400px;">
<div slot="start" data-testid="start-panel">Start</div>
<div slot="end" data-testid="end-panel">End</div>
</sl-split-panel>`
);
splitPanel.position = 10;
@ -199,10 +223,12 @@ describe('<sl-split-panel>', () => {
});
it('emits the sl-reposition event on position change ', async () => {
const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel vertical style="height: 400px;">
<div slot="start">Start</div>
<div slot="end">End</div>
</sl-split-panel>`);
const splitPanel = await fixture<SlSplitPanel>(
html`<sl-split-panel vertical style="height: 400px;">
<div slot="start">Start</div>
<div slot="end">End</div>
</sl-split-panel>`
);
const repositionPromise = oneEvent(splitPanel, 'sl-reposition');
splitPanel.position = 10;
@ -210,10 +236,12 @@ describe('<sl-split-panel>', () => {
});
it('can be resized using the mouse ', async () => {
const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel vertical style="height: 400px;">
<div slot="start">Start</div>
<div slot="end">End</div>
</sl-split-panel>`);
const splitPanel = await fixture<SlSplitPanel>(
html`<sl-split-panel vertical style="height: 400px;">
<div slot="start">Start</div>
<div slot="end">End</div>
</sl-split-panel>`
);
const positionInPixels = splitPanel.positionInPixels;
@ -226,10 +254,12 @@ describe('<sl-split-panel>', () => {
});
it('cannot be resized if disabled', async () => {
const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel disabled vertical style="height: 400px;">
<div slot="start">Start</div>
<div slot="end">End</div>
</sl-split-panel>`);
const splitPanel = await fixture<SlSplitPanel>(
html`<sl-split-panel disabled vertical style="height: 400px;">
<div slot="start">Start</div>
<div slot="end">End</div>
</sl-split-panel>`
);
const positionInPixels = splitPanel.positionInPixels;
@ -242,10 +272,12 @@ describe('<sl-split-panel>', () => {
});
it('snaps to predefined positions', async () => {
const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel vertical style="height: 400px;">
<div slot="start">Start</div>
<div slot="end">End</div>
</sl-split-panel>`);
const splitPanel = await fixture<SlSplitPanel>(
html`<sl-split-panel vertical style="height: 400px;">
<div slot="start">Start</div>
<div slot="end">End</div>
</sl-split-panel>`
);
const positionInPixels = splitPanel.positionInPixels;
splitPanel.snap = `${positionInPixels - 40}px`;

11
src/components/switch/switch.styles.ts
Wyświetl plik

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

4
src/components/tab-group/tab-group.styles.ts
Wyświetl plik

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

6
src/components/tab-group/tab-group.test.ts
Wyświetl plik

@ -187,8 +187,10 @@ describe('<sl-tab-group>', () => {
const generateTabs = (n: number): HTMLTemplateResult[] => {
const result: HTMLTemplateResult[] = [];
for (let i = 0; i < n; i++) {
result.push(html`<sl-tab slot="nav" panel="tab-${i}">Tab ${i}</sl-tab>
<sl-tab-panel name="tab-${i}">Content of tab ${i}0</sl-tab-panel> `);
result.push(
html`<sl-tab slot="nav" panel="tab-${i}">Tab ${i}</sl-tab>
<sl-tab-panel name="tab-${i}">Content of tab ${i}0</sl-tab-panel> `
);
}
return result;
};

4
src/components/tab/tab.styles.ts
Wyświetl plik

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

5
src/components/textarea/textarea.styles.ts
Wyświetl plik

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

23
src/components/tree-item/tree-item.component.ts
Wyświetl plik

@ -267,11 +267,10 @@ export default class SlTreeItem extends ShoelaceElement {
${when(
this.selectable,
() =>
html`
<sl-checkbox
part="checkbox"
exportparts="
() => html`
<sl-checkbox
part="checkbox"
exportparts="
base:checkbox__base,
control:checkbox__control,
control--checked:checkbox__control--checked,
@ -280,13 +279,13 @@ export default class SlTreeItem extends ShoelaceElement {
indeterminate-icon:checkbox__indeterminate-icon,
label:checkbox__label
"
class="tree-item__checkbox"
?disabled="${this.disabled}"
?checked="${live(this.selected)}"
?indeterminate="${this.indeterminate}"
tabindex="-1"
></sl-checkbox>
`
class="tree-item__checkbox"
?disabled="${this.disabled}"
?checked="${live(this.selected)}"
?indeterminate="${this.indeterminate}"
tabindex="-1"
></sl-checkbox>
`
)}
<slot class="tree-item__label" part="label"></slot>