ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update prettier

Browse source 
* update prettier to v3.x
* update prettify in @lion/nodejs-helpers to match updated prettier
* remove redundant await for promise
* remove `@types/prettier` as it's now included in `prettier`
* format lit template snippets with `jsx`
This commit is contained in:
Kristján Oddsson 2024-05-17 19:43:23 +00:00 committed by GitHub
parent 1df3854196
commit c7c83d1d8b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
49 changed files with 490 additions and 430 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
.changeset/yellow-mails-exist.md Normal file
View file

@ -0,0 +1,7 @@
---
'@lion/nodejs-helpers': minor
---
Update underlying code-formatter prettier to major version 3 and updated the prettify API accordingly.
Consumers of this package need to make sure to await any calls to `prettify` as the function now returns a promise.

17
docs/blog/extending-documentation.md
View file

@ -262,15 +262,14 @@ Or you can add an extra paragraph below the content. Create a fenced codeblock:
### Lea Tabs Special Feature ### Lea Tabs Special Feature
```js ```js
export const specialFeature = () => export const specialFeature = () => html`
html` <lea-tabs>
<lea-tabs> <lea-tab slot="tab">Info</lea-tab>
<lea-tab slot="tab">Info</lea-tab> <lea-tab-panel slot="panel"> Info page with lots of information about us. </lea-tab-panel>
<lea-tab-panel slot="panel"> Info page with lots of information about us. </lea-tab-panel> <lea-tab slot="tab">Work</lea-tab>
<lea-tab slot="tab">Work</lea-tab> <lea-tab-panel slot="panel"> Work page that showcases our work. </lea-tab-panel>
<lea-tab-panel slot="panel"> Work page that showcases our work. </lea-tab-panel> </lea-tabs>
</lea-tabs> `;
`;
``` ```
## Summary ## Summary

21
docs/components/button/use-cases.md
View file

@ -28,16 +28,17 @@ export const disabled = () => html`<lion-button disabled>Disabled</lion-button>`
The minimum click area needs to be at least `44px` by `44px` according to [WCAG Success Criterion 2.5.5 Target Size (Enhanced)](https://www.w3.org/TR/WCAG22/#target-size-enhanced). The minimum click area needs to be at least `44px` by `44px` according to [WCAG Success Criterion 2.5.5 Target Size (Enhanced)](https://www.w3.org/TR/WCAG22/#target-size-enhanced).
```js preview-story ```js preview-story
export const minimumClickArea = () => html` <style> export const minimumClickArea = () =>
.small { html` <style>
padding: 4px; .small {
line-height: 1em; padding: 4px;
} line-height: 1em;
.small::before { }
border: 1px dashed #000; .small::before {
} border: 1px dashed #000;
</style> }
<lion-button class="small">xs</lion-button>`; </style>
<lion-button class="small">xs</lion-button>`;
``` ```
## Usage with native form ## Usage with native form

8
docs/components/collapsible/assets/applyDemoCollapsibleStyles.js
View file

@ -7,7 +7,9 @@ const applyDemoCollapsibleStyles = () => {
margin: 16px; margin: 16px;
border-radius: 4px; border-radius: 4px;
width: 400px; width: 400px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow:
0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);
} }
.demo-custom-collapsible-body { .demo-custom-collapsible-body {
@ -18,7 +20,9 @@ const applyDemoCollapsibleStyles = () => {
border-width: 0; border-width: 0;
border-radius: 2px; border-radius: 2px;
padding: 12px 24px; padding: 12px 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow:
0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);
font-weight: bold; font-weight: bold;
color: #3f51b5; color: #3f51b5;
} }

5
docs/components/combobox/overview.md
View file

@ -25,8 +25,9 @@ export const main = () => html`
<lion-combobox name="combo" label="Default"> <lion-combobox name="combo" label="Default">
${lazyRender( ${lazyRender(
listboxData.map( listboxData.map(
(entry, i) => (entry, i) => html`
html` <lion-option .checked="${i === 0}" .choiceValue="${entry}">${entry}</lion-option> `, <lion-option .checked="${i === 0}" .choiceValue="${entry}">${entry}</lion-option>
`,
), ),
)} )}
</lion-combobox> </lion-combobox>

4
docs/components/combobox/src/gh-combobox/gh-button.js
View file

@ -35,7 +35,9 @@ export class GhButton extends LionButton {
color: #24292e; color: #24292e;
background-color: #fafbfc; background-color: #fafbfc;
border-color: rgba(27, 31, 35, 0.15); border-color: rgba(27, 31, 35, 0.15);
box-shadow: 0 1px 0 rgba(27, 31, 35, 0.04), inset 0 1px 0 hsla(0, 0%, 100%, 0.25); box-shadow:
0 1px 0 rgba(27, 31, 35, 0.04),
inset 0 1px 0 hsla(0, 0%, 100%, 0.25);
transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1); transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
} }

11
docs/components/combobox/src/gh-combobox/gh-combobox.js
View file

@ -123,8 +123,15 @@ export class GhCombobox extends LionCombobox {
/** @configure LionCombobox */ /** @configure LionCombobox */
:host { :host {
font-family: apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, font-family:
Apple Color Emoji, Segoe UI Emoji; apple-system,
BlinkMacSystemFont,
Segoe UI,
Helvetica,
Arial,
sans-serif,
Apple Color Emoji,
Segoe UI Emoji;
font-size: 14px; font-size: 14px;
} }

14
docs/components/combobox/src/google-combobox/google-combobox.js
View file

@ -403,15 +403,13 @@ export class GoogleCombobox extends LionCombobox {
), ),
prefix: () => renderLitAsNode(html` <span>${googleSearchIcon}</span> `), prefix: () => renderLitAsNode(html` <span>${googleSearchIcon}</span> `),
suffix: () => suffix: () =>
renderLitAsNode( renderLitAsNode(html`
html` <button aria-label="Search by voice">${googleVoiceSearchIcon}</button> `, <button aria-label="Search by voice">${googleVoiceSearchIcon}</button>
), `),
'clear-btn': () => 'clear-btn': () =>
renderLitAsNode( renderLitAsNode(html`
html` <button @click="${this.__clearText}" aria-label="Clear text">${googleClearIcon}</button>
<button @click="${this.__clearText}" aria-label="Clear text">${googleClearIcon}</button> `),
`,
),
}; };
} }

10
docs/components/combobox/src/md-combobox/MdFieldMixin.js
View file

@ -48,7 +48,8 @@ export const MdFieldMixin = dedupeMixin(
transform: perspective(100px); transform: perspective(100px);
-ms-transform: none; -ms-transform: none;
transform-origin: 0 0; transform-origin: 0 0;
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transition:
transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
/* z-index: 1; */ /* z-index: 1; */
@ -205,7 +206,9 @@ export const MdFieldMixin = dedupeMixin(
background-position: 50%; background-position: 50%;
transform: scale(10, 10); transform: scale(10, 10);
opacity: 0; opacity: 0;
transition: transform 0.25s, opacity 0.5s; transition:
transform 0.25s,
opacity 0.5s;
} }
.input-group__container > .input-group__prefix ::slotted(button:active)::after, .input-group__container > .input-group__prefix ::slotted(button:active)::after,
@ -288,7 +291,8 @@ export const MdFieldMixin = dedupeMixin(
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
transform: scaleX(1); transform: scaleX(1);
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transition:
transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
opacity 0.1s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.1s cubic-bezier(0.25, 0.8, 0.25, 1),
background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
} }

18
docs/components/combobox/src/wa-combobox/wa-combobox.js
View file

@ -28,7 +28,9 @@ class WaOption extends LionOption {
cursor: pointer; cursor: pointer;
color: rgb(74, 74, 74); color: rgb(74, 74, 74);
padding: 0; padding: 0;
transition: max-height 0.4s ease, opacity 0.3s ease; transition:
max-height 0.4s ease,
opacity 0.3s ease;
max-height: 500px; max-height: 500px;
} }
@ -287,8 +289,18 @@ class WaCombobox extends LionCombobox {
...super.styles, ...super.styles,
css` css`
:host { :host {
font-family: SF Pro Text, SF Pro Icons, system, -apple-system, system-ui, BlinkMacSystemFont, font-family:
Helvetica Neue, Helvetica, Lucida Grande, Kohinoor Devanagari, sans-serif; SF Pro Text,
SF Pro Icons,
system,
-apple-system,
system-ui,
BlinkMacSystemFont,
Helvetica Neue,
Helvetica,
Lucida Grande,
Kohinoor Devanagari,
sans-serif;
} }
.input-group__container { .input-group__container {

34
docs/components/combobox/use-cases.md
View file

@ -242,8 +242,9 @@ export const multipleChoice = () => html`
></demo-selection-display> ></demo-selection-display>
${lazyRender( ${lazyRender(
listboxData.map( listboxData.map(
(entry, i) => (entry, i) => html`
html` <lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option> `, <lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option>
`,
), ),
)} )}
</lion-combobox> </lion-combobox>
@ -264,8 +265,9 @@ export const multipleCustomizableChoice = () => html`
></demo-selection-display> ></demo-selection-display>
${lazyRender( ${lazyRender(
listboxData.map( listboxData.map(
(entry, i) => (entry, i) => html`
html` <lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option> `, <lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option>
`,
), ),
)} )}
</lion-combobox> </lion-combobox>
@ -434,23 +436,23 @@ const onModelValueChanged = event => {
console.log(`event.target.modelValue: ${JSON.stringify(event.target.modelValue)}`); console.log(`event.target.modelValue: ${JSON.stringify(event.target.modelValue)}`);
}; };
export const complexObjectChoiceValue = () => html` <complex-object-combobox export const complexObjectChoiceValue = () =>
name="combo" html` <complex-object-combobox
label="Display only the label once selected" name="combo"
@model-value-changed="${onModelValueChanged}" label="Display only the label once selected"
> @model-value-changed="${onModelValueChanged}"
${lazyRender( >
listboxComplexData.map( ${lazyRender(
entry => listboxComplexData.map(
html` entry => html`
<lion-option .choiceValue="${entry.label}"> <lion-option .choiceValue="${entry.label}">
<div data-key>${entry.label}</div> <div data-key>${entry.label}</div>
<small>${entry.description}</small> <small>${entry.description}</small>
</lion-option> </lion-option>
`, `,
), ),
)} )}
</complex-object-combobox>`; </complex-object-combobox>`;
``` ```
## Listbox compatibility ## Listbox compatibility

20
docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js
View file

@ -46,9 +46,15 @@ export class IntlInputTelDropdown extends ScopedElementsMixin(LionInputTelDropdo
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
-webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s; -webkit-transition:
-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; border-color ease-in-out 0.15s,
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; -webkit-box-shadow ease-in-out 0.15s;
-o-transition:
border-color ease-in-out 0.15s,
box-shadow ease-in-out 0.15s;
transition:
border-color ease-in-out 0.15s,
box-shadow ease-in-out 0.15s;
} }
.input-group__input { .input-group__input {
@ -64,8 +70,12 @@ export class IntlInputTelDropdown extends ScopedElementsMixin(LionInputTelDropdo
:host([focused]) .input-group__container { :host([focused]) .input-group__container {
border-color: #66afe9; border-color: #66afe9;
outline: 0; outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%); -webkit-box-shadow:
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%); inset 0 1px 1px rgb(0 0 0 / 8%),
0 0 8px rgb(102 175 233 / 60%);
box-shadow:
inset 0 1px 1px rgb(0 0 0 / 8%),
0 0 8px rgb(102 175 233 / 60%);
} }
`, `,
]; ];

5
docs/components/input/use-cases.md
View file

@ -20,8 +20,9 @@ Can be provided via the `label-sr-only` boolean attribute.
The label will be hidden, but still readable by screen readers. The label will be hidden, but still readable by screen readers.
```js preview-story ```js preview-story
export const labelSrOnly = () => export const labelSrOnly = () => html`
html` <lion-input label-sr-only label="Input" name="input"></lion-input> `; <lion-input label-sr-only label="Input" name="input"></lion-input>
`;
``` ```
> Note: Once we support the ElementInternals API, the equivalent will be `<lion-input aria-label="Input" name="input"></lion-input>` > Note: Once we support the ElementInternals API, the equivalent will be `<lion-input aria-label="Input" name="input"></lion-input>`

22
docs/components/progress-indicator/examples.md
View file

@ -51,15 +51,14 @@ By given the progress-indicator a value it becomes determinate.
The min is automatically set to "0" and max to "100", but they can be set to your local needs. The min is automatically set to "0" and max to "100", but they can be set to your local needs.
```js preview-story ```js preview-story
export const progressBarDemo = () => export const progressBarDemo = () => html`
html` <my-determinate-progress-bar
<my-determinate-progress-bar aria-label="Interest rate"
aria-label="Interest rate" name="my-bar"
name="my-bar" value="50"
value="50" ></my-determinate-progress-bar>
></my-determinate-progress-bar> <button @click="${changeProgress}">Randomize Value</button>
<button @click="${changeProgress}">Randomize Value</button> `;
`;
``` ```
## Styled progress spinner example ## Styled progress spinner example
@ -120,6 +119,7 @@ class MyIndeterminateProgressSpinner extends LionProgressIndicator {
``` ```
```js preview-story ```js preview-story
export const main = () => export const main = () => html`
html` <my-indeterminate-progress-spinner></my-indeterminate-progress-spinner> `; <my-indeterminate-progress-spinner></my-indeterminate-progress-spinner>
`;
``` ```

4
docs/components/tabs/src/lea-tab-panel.js
View file

@ -7,7 +7,9 @@ export class LeaTabPanel extends LitElement {
background-color: #fff; background-color: #fff;
background-image: linear-gradient(top, #fff, #ddd); background-image: linear-gradient(top, #fff, #ddd);
border-radius: 0 2px 2px 2px; border-radius: 0 2px 2px 2px;
box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset; box-shadow:
0 2px 2px #000,
0 -1px 0 #fff inset;
padding: 30px; padding: 30px;
} }
`; `;

9
docs/components/tabs/src/lea-tab.js
View file

@ -10,7 +10,10 @@ export class LeaTab extends LitElement {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
color: #fff; color: #fff;
float: left; float: left;
font: bold 12px/35px 'Lucida sans', Arial, Helvetica; font:
bold 12px/35px 'Lucida sans',
Arial,
Helvetica;
height: 35px; height: 35px;
padding: 0 30px; padding: 0 30px;
text-decoration: none; text-decoration: none;
@ -23,7 +26,9 @@ export class LeaTab extends LitElement {
:host(:focus) { :host(:focus) {
border-radius: 4px; border-radius: 4px;
box-shadow: 0 0 8px #9fcaea, 0 0 0 1px #559bd1; box-shadow:
0 0 8px #9fcaea,
0 0 0 1px #559bd1;
/* outline: 0; */ /* outline: 0; */
} }

40
docs/fundamentals/node-tools/providence-analytics/assets/_mermaid.svg.js
View file

@ -19,7 +19,10 @@ export const providenceFlowSvg = html` <svg
> >
<style> <style>
#mermaid-1592918098747 .label { #mermaid-1592918098747 .label {
font-family: trebuchet ms, verdana, arial; font-family:
trebuchet ms,
verdana,
arial;
color: #333; color: #333;
} }
#mermaid-1592918098747 .node circle, #mermaid-1592918098747 .node circle,
@ -57,7 +60,10 @@ export const providenceFlowSvg = html` <svg
max-width: 200px; max-width: 200px;
max-height: 400px; max-height: 400px;
padding: 2px; padding: 2px;
font-family: trebuchet ms, verdana, arial; font-family:
trebuchet ms,
verdana,
arial;
font-size: 12px; font-size: 12px;
background: #ffffde; background: #ffffde;
border: 1px solid #aa3; border: 1px solid #aa3;
@ -118,7 +124,10 @@ export const providenceFlowSvg = html` <svg
#mermaid-1592918098747 .noteText { #mermaid-1592918098747 .noteText {
fill: #000; fill: #000;
stroke: none; stroke: none;
font-family: trebuchet ms, verdana, arial; font-family:
trebuchet ms,
verdana,
arial;
font-size: 14px; font-size: 14px;
} }
#mermaid-1592918098747 .section { #mermaid-1592918098747 .section {
@ -267,7 +276,10 @@ export const providenceFlowSvg = html` <svg
#mermaid-1592918098747 g.classGroup text { #mermaid-1592918098747 g.classGroup text {
fill: #9370db; fill: #9370db;
stroke: none; stroke: none;
font-family: trebuchet ms, verdana, arial; font-family:
trebuchet ms,
verdana,
arial;
font-size: 10px; font-size: 10px;
} }
#mermaid-1592918098747 g.classGroup rect { #mermaid-1592918098747 g.classGroup rect {
@ -553,7 +565,10 @@ export const providenceInternalFlowSvg = html`
> >
<style> <style>
#mermaid-1592918099462 .label { #mermaid-1592918099462 .label {
font-family: trebuchet ms, verdana, arial; font-family:
trebuchet ms,
verdana,
arial;
color: #333; color: #333;
} }
#mermaid-1592918099462 .node circle, #mermaid-1592918099462 .node circle,
@ -591,7 +606,10 @@ export const providenceInternalFlowSvg = html`
max-width: 200px; max-width: 200px;
max-height: 400px; max-height: 400px;
padding: 2px; padding: 2px;
font-family: trebuchet ms, verdana, arial; font-family:
trebuchet ms,
verdana,
arial;
font-size: 12px; font-size: 12px;
background: #ffffde; background: #ffffde;
border: 1px solid #aa3; border: 1px solid #aa3;
@ -652,7 +670,10 @@ export const providenceInternalFlowSvg = html`
#mermaid-1592918099462 .noteText { #mermaid-1592918099462 .noteText {
fill: #000; fill: #000;
stroke: none; stroke: none;
font-family: trebuchet ms, verdana, arial; font-family:
trebuchet ms,
verdana,
arial;
font-size: 14px; font-size: 14px;
} }
#mermaid-1592918099462 .section { #mermaid-1592918099462 .section {
@ -801,7 +822,10 @@ export const providenceInternalFlowSvg = html`
#mermaid-1592918099462 g.classGroup text { #mermaid-1592918099462 g.classGroup text {
fill: #9370db; fill: #9370db;
stroke: none; stroke: none;
font-family: trebuchet ms, verdana, arial; font-family:
trebuchet ms,
verdana,
arial;
font-size: 10px; font-size: 10px;
} }
#mermaid-1592918099462 g.classGroup rect { #mermaid-1592918099462 g.classGroup rect {

150
docs/fundamentals/systems/overlays/_edge-cases.md
View file

@ -33,21 +33,20 @@ See [css-tricks: popping-hidden-overflow](https://css-tricks.com/popping-hidden-
#### Overflow: the problem #### Overflow: the problem
```js preview-story ```js preview-story
export const edgeCaseOverflowProblem = () => export const edgeCaseOverflowProblem = () => html`
html` <div style="padding: 54px 24px 36px;">
<div style="padding: 54px 24px 36px;"> <div
<div style="overflow: hidden; border: 1px black dashed; padding-top: 44px; padding-bottom: 16px;"
style="overflow: hidden; border: 1px black dashed; padding-top: 44px; padding-bottom: 16px;" >
> <div style="display: flex; justify-content: space-evenly; position: relative;">
<div style="display: flex; justify-content: space-evenly; position: relative;"> <demo-overlay-el opened use-absolute>
<demo-overlay-el opened use-absolute> <button slot="invoker" aria-label="local, non modal"></button>
<button slot="invoker" aria-label="local, non modal"></button> <div slot="content">absolute (for&nbsp;demo)</div>
<div slot="content">absolute (for&nbsp;demo)</div> </demo-overlay-el>
</demo-overlay-el>
</div>
</div> </div>
</div> </div>
`; </div>
`;
``` ```
#### Overflow: the solution #### Overflow: the solution
@ -60,50 +59,46 @@ Two solutions are thinkable:
Our overlay system makes sure that there's always a fixed layer that pops out of the hidden parent. Our overlay system makes sure that there's always a fixed layer that pops out of the hidden parent.
```js preview-story ```js preview-story
export const edgeCaseOverflowSolution = () => export const edgeCaseOverflowSolution = () => html`
html` <div style="padding: 54px 24px 36px;">
<div style="padding: 54px 24px 36px;"> <div
<div style="overflow: hidden; border: 1px black dashed; padding-top: 36px; padding-bottom: 16px;"
style="overflow: hidden; border: 1px black dashed; padding-top: 36px; padding-bottom: 16px;" >
> <div style="display: flex; justify-content: space-evenly; position: relative;">
<div style="display: flex; justify-content: space-evenly; position: relative;"> <demo-overlay-el opened .config="${{ placementMode: 'local', trapsKeyboardFocus: false }}">
<demo-overlay-el <button slot="invoker" aria-label="local, non modal"></button>
opened <div slot="content">no matter</div>
.config="${{ placementMode: 'local', trapsKeyboardFocus: false }}" </demo-overlay-el>
>
<button slot="invoker" aria-label="local, non modal"></button>
<div slot="content">no matter</div>
</demo-overlay-el>
<demo-overlay-el opened .config="${{ placementMode: 'local', trapsKeyboardFocus: true }}"> <demo-overlay-el opened .config="${{ placementMode: 'local', trapsKeyboardFocus: true }}">
<button slot="invoker" aria-label="local, modal"></button> <button slot="invoker" aria-label="local, modal"></button>
<div slot="content">what configuration</div> <div slot="content">what configuration</div>
</demo-overlay-el> </demo-overlay-el>
<demo-overlay-el <demo-overlay-el
opened opened
.config="${{ placementMode: 'local', popperConfig: { strategy: 'absolute' } }}" .config="${{ placementMode: 'local', popperConfig: { strategy: 'absolute' } }}"
> >
<button slot="invoker" aria-label="local, absolute"></button> <button slot="invoker" aria-label="local, absolute"></button>
<div slot="content">...it</div> <div slot="content">...it</div>
</demo-overlay-el> </demo-overlay-el>
<demo-overlay-el <demo-overlay-el
opened opened
.config="${{ placementMode: 'local', popperConfig: { strategy: 'fixed' } }}" .config="${{ placementMode: 'local', popperConfig: { strategy: 'fixed' } }}"
> >
<button slot="invoker" aria-label="local, fixed"></button> <button slot="invoker" aria-label="local, fixed"></button>
<div slot="content">just</div> <div slot="content">just</div>
</demo-overlay-el> </demo-overlay-el>
<demo-overlay-el opened .config="${{ placementMode: 'global' }}"> <demo-overlay-el opened .config="${{ placementMode: 'global' }}">
<button slot="invoker" aria-label="global"></button> <button slot="invoker" aria-label="global"></button>
<div slot="content">works</div> <div slot="content">works</div>
</demo-overlay-el> </demo-overlay-el>
</div>
</div> </div>
</div> </div>
`; </div>
`;
``` ```
### Stacking context ### Stacking context
@ -114,32 +109,31 @@ The example below shows the difference between a modal and non-modal overlay pla
#### Stacking context: the problem #### Stacking context: the problem
```js preview-story ```js preview-story
export const edgeCaseStackProblem = () => export const edgeCaseStackProblem = () => html`
html` <div style="width: 300px; height: 300px; position: relative;">
<div style="width: 300px; height: 300px; position: relative;"> <div
<div id="stacking-context-a"
id="stacking-context-a" style="position: absolute; z-index: 2; top: 0; width: 100px; height: 200px;"
style="position: absolute; z-index: 2; top: 0; width: 100px; height: 200px;" >
> I am on top and I don't care about your 9999
I am on top and I don't care about your 9999
</div>
<div
id="stacking-context-b"
style="position: absolute; z-index: 1; top: 0; width: 200px; height: 200px;"
>
<demo-overlay-el no-dialog-el style="overflow:hidden; position: relative;">
<button slot="invoker">invoke</button>
<div slot="content">
The overlay can never be in front, since the parent stacking context has a lower
priority than its sibling.
<div id="stacking-context-b-inner" style="position: absolute; z-index: 9999;">
So, even if we add a new stacking context in our overlay with z-index 9999, it will
never be painted on top.
</div>
</div>
</demo-overlay-el>
</div>
</div> </div>
`;
<div
id="stacking-context-b"
style="position: absolute; z-index: 1; top: 0; width: 200px; height: 200px;"
>
<demo-overlay-el no-dialog-el style="overflow:hidden; position: relative;">
<button slot="invoker">invoke</button>
<div slot="content">
The overlay can never be in front, since the parent stacking context has a lower priority
than its sibling.
<div id="stacking-context-b-inner" style="position: absolute; z-index: 9999;">
So, even if we add a new stacking context in our overlay with z-index 9999, it will
never be painted on top.
</div>
</div>
</demo-overlay-el>
</div>
</div>
`;
``` ```

9
docs/fundamentals/systems/overlays/use-cases.md
View file

@ -131,15 +131,12 @@ render() {
or declaratively in your template with the `.config` property or declaratively in your template with the `.config` property
```html ```jsx
<demo-el-using-overlaymixin .config=${{ ...withModalDialogConfig() }}> <demo-el-using-overlaymixin .config="${{ ...withModalDialogConfig() }}">
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}">
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
>
⨯
</button> </button>
</div> </div>
</demo-el-using-overlaymixin> </demo-el-using-overlaymixin>

9
docs/fundamentals/tools/helpers/action-logger.md
View file

@ -40,13 +40,10 @@ const uid = Math.random().toString(36).substr(2, 10);
This connects the logger element to the trigger. This connects the logger element to the trigger.
```html ```jsx
<div>To log: <code>Hello, World!</code></div> <div>To log: <code>Hello, World!</code></div>
<button <button @click="${e => { e.target.parentElement.querySelector('#logger-${uid}').log('Hello, World!') }}">Click this button
@click=${e => { </button>
e.target.parentElement.querySelector('#logger-${uid}').log('Hello, World!')
}}
>Click this button</button>
<sb-action-logger id="logger-${uid}"></sb-action-logger> <sb-action-logger id="logger-${uid}"></sb-action-logger>
``` ```

4
docs/fundamentals/tools/singleton-manager/example-complex/demo-app.js
View file

@ -37,7 +37,9 @@ class DemoApp extends LitElement {
font-size: 1rem; font-size: 1rem;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
transition: background 250ms ease-in-out, transform 150ms ease; transition:
background 250ms ease-in-out,
transform 150ms ease;
} }
button:hover, button:hover,

4
docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js
View file

@ -35,7 +35,9 @@ class DemoApp extends LitElement {
font-size: 1rem; font-size: 1rem;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
transition: background 250ms ease-in-out, transform 150ms ease; transition:
background 250ms ease-in-out,
transform 150ms ease;
} }
button:hover, button:hover,

4
docs/fundamentals/tools/singleton-manager/example-success/demo-app.js
View file

@ -37,7 +37,9 @@ class DemoApp extends LitElement {
font-size: 1rem; font-size: 1rem;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
transition: background 250ms ease-in-out, transform 150ms ease; transition:
background 250ms ease-in-out,
transform 150ms ease;
} }
button:hover, button:hover,

4
package.json
View file

@ -58,7 +58,7 @@
"@types/fs-extra": "^11.0.4", "@types/fs-extra": "^11.0.4",
"@types/glob": "^8.1.0", "@types/glob": "^8.1.0",
"@types/mocha": "^10.0.6", "@types/mocha": "^10.0.6",
"@types/prettier": "^2.7.3", "@types/prettier": "^3.0.0",
"@web/dev-server-legacy": "^0.1.7", "@web/dev-server-legacy": "^0.1.7",
"@web/test-runner": "^0.18.1", "@web/test-runner": "^0.18.1",
"@web/test-runner-browserstack": "^0.7.1", "@web/test-runner-browserstack": "^0.7.1",
@ -82,7 +82,7 @@
"mocha": "^10.4.0", "mocha": "^10.4.0",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"postinstall-postinstall": "^2.1.0", "postinstall-postinstall": "^2.1.0",
"prettier": "^2.8.8", "prettier": "^3.2.5",
"prettier-package-json": "^2.8.0", "prettier-package-json": "^2.8.0",
"remark-html": "^13.0.2", "remark-html": "^13.0.2",
"rollup": "^2.79.1", "rollup": "^2.79.1",

10
packages-node/nodejs-helpers/package.json
View file

@ -29,13 +29,13 @@
"types": "wireit" "types": "wireit"
}, },
"dependencies": { "dependencies": {
"@babel/generator": "^7.24.4", "@babel/generator": "^7.24.5",
"@babel/parser": "^7.24.4", "@babel/parser": "^7.24.5",
"@babel/traverse": "^7.24.1", "@babel/traverse": "^7.24.5",
"@babel/types": "^7.24.0", "@babel/types": "^7.24.5",
"es-module-lexer": "^0.3.26", "es-module-lexer": "^0.3.26",
"globby": "^14.0.1", "globby": "^14.0.1",
"prettier": "^2.8.8" "prettier": "^3.2.5"
}, },
"keywords": [ "keywords": [
"lion-tools", "lion-tools",

8
packages-node/nodejs-helpers/src/prettify.js
View file

@ -48,14 +48,14 @@ const getPrettierParser = fileExtension => {
* Prettifies text using the prettier. * Prettifies text using the prettier.
* - Supported file extensions are: js | cjs | mjs | md | html | json | css | yaml | yml * - Supported file extensions are: js | cjs | mjs | md | html | json | css | yaml | yml
* @example * @example
* prettify('some js code'); * await prettify('some js code');
* prettify('<html>some html</html>', 'html'); * await prettify('<html>some html</html>', 'html');
* prettify('some-markdown', 'md', {printWidth: 120}); * await prettify('some-markdown', 'md', {printWidth: 120});
* @param {string} text * @param {string} text
* @param {string} fileExtension ['js'] * @param {string} fileExtension ['js']
* @param {PrettierOptions} [options] [{ printWidth = 100, singleQuote = true }] * @param {PrettierOptions} [options] [{ printWidth = 100, singleQuote = true }]
* @see {@link https://prettier.io/docs/en/options.html} * @see {@link https://prettier.io/docs/en/options.html}
* @returns {string} * @returns {Promise<string>}
* @throws ERROR_UNSUPPORTED_FILE_EXTENSION * @throws ERROR_UNSUPPORTED_FILE_EXTENSION
*/ */
export const prettify = (text, fileExtension = 'js', options = {}) => { export const prettify = (text, fileExtension = 'js', options = {}) => {

2
packages-node/nodejs-helpers/src/tasks/bypass-export-map.js
View file

@ -115,7 +115,7 @@ const generateAdjustedExportFile = async (fileName, exportsDir, outputDir) => {
const initialCode = await readFile(inputPath, 'utf-8'); const initialCode = await readFile(inputPath, 'utf-8');
const adjustImportExportVisitor = getAdjustImportExportVisitor(exportsDir, outputDir); const adjustImportExportVisitor = getAdjustImportExportVisitor(exportsDir, outputDir);
const adjustedCode = transformCode(initialCode, adjustImportExportVisitor); const adjustedCode = transformCode(initialCode, adjustImportExportVisitor);
return writeFile(outputPath, prettify(adjustedCode)); return writeFile(outputPath, await prettify(adjustedCode));
}; };
/** /**

4
packages-node/nodejs-helpers/src/tasks/bypass-import-map.js
View file

@ -95,8 +95,8 @@ const bypassImportMapForFile = async (filePath, packageDir, importMap) => {
const initialCode = await readFile(filePath, 'utf-8'); const initialCode = await readFile(filePath, 'utf-8');
const adjustImportVisitor = getAdjustImportVisitor(filePath, packageDir, importMap); const adjustImportVisitor = getAdjustImportVisitor(filePath, packageDir, importMap);
const updatedCode = transformCode(initialCode, adjustImportVisitor); const updatedCode = transformCode(initialCode, adjustImportVisitor);
const prettyInitialCode = prettify(initialCode); const prettyInitialCode = await prettify(initialCode);
const prettyUpdatedCode = prettify(updatedCode); const prettyUpdatedCode = await prettify(updatedCode);
if (prettyInitialCode === prettyUpdatedCode) { if (prettyInitialCode === prettyUpdatedCode) {
return Promise.resolve(); return Promise.resolve();
} }

4
packages-node/nodejs-helpers/test-node/tasks/bypass-export-map.test.js
View file

@ -194,7 +194,7 @@ describe('components import other components and native + 3rd party imports', ()
'utf-8', 'utf-8',
); );
// Then // Then
expect(prettify(adjustedCode)).to.equal(prettify(expectedCode)); expect(await prettify(adjustedCode)).to.equal(await prettify(expectedCode));
} }
}); });
@ -216,7 +216,7 @@ describe('components import other components and native + 3rd party imports', ()
); );
// Then // Then
expect(prettify(adjustedCode)).to.equal(prettify(expectedCode)); expect(await prettify(adjustedCode)).to.equal(await prettify(expectedCode));
} }
}); });
}); });

8
packages-node/nodejs-helpers/test-node/tasks/bypass-import-map.test.js
View file

@ -58,8 +58,8 @@ describe('Bypass import map task', () => {
// Then // Then
if (process.platform !== 'win32') { if (process.platform !== 'win32') {
// FIXME: skipping test for windows case // FIXME: skipping test for windows case
expect(prettify(adjustedCodeArrowDown)).to.equal(prettify(expectedCodeArrowDown)); expect(await prettify(adjustedCodeArrowDown)).to.equal(await prettify(expectedCodeArrowDown));
expect(prettify(adjustedCodeArrowUp)).to.equal(prettify(expectedCodeArrowUp)); expect(await prettify(adjustedCodeArrowUp)).to.equal(await prettify(expectedCodeArrowUp));
} }
}); });
@ -101,8 +101,8 @@ describe('Bypass import map task', () => {
// Then // Then
if (process.platform !== 'win32') { if (process.platform !== 'win32') {
// FIXME: skipping test for windows case // FIXME: skipping test for windows case
expect(prettify(adjustedCodeArrowDown)).to.equal(prettify(expectedCodeArrowDown)); expect(await prettify(adjustedCodeArrowDown)).to.equal(await prettify(expectedCodeArrowDown));
expect(prettify(adjustedCodeArrowUp)).to.equal(prettify(expectedCodeArrowUp)); expect(await prettify(adjustedCodeArrowUp)).to.equal(await prettify(expectedCodeArrowUp));
} }
}); });
}); });

5
packages-node/providence-analytics/test-node/program/analyzers/match-imports.test.js
View file

@ -15,9 +15,8 @@ import MatchImportsAnalyzer from '../../../src/program/analyzers/match-imports.j
setupAnalyzerTest(); setupAnalyzerTest();
// //
describe('Analyzer "match-imports"', async () => { describe('Analyzer "match-imports"', async () => {
const matchImportsQueryConfig = await QueryService.getQueryConfigFromAnalyzer( const matchImportsQueryConfig =
MatchImportsAnalyzer, await QueryService.getQueryConfigFromAnalyzer(MatchImportsAnalyzer);
);
/** @type {Partial<ProvidenceConfig>} */ /** @type {Partial<ProvidenceConfig>} */
const _providenceCfg = { const _providenceCfg = {
targetProjectPaths: ['/importing/target/project'], targetProjectPaths: ['/importing/target/project'],

5
packages-node/providence-analytics/test-node/program/analyzers/match-subclasses.test.js
View file

@ -84,9 +84,8 @@ describe('Analyzer "match-subclasses"', async () => {
], ],
}; };
const matchSubclassesQueryConfig = await QueryService.getQueryConfigFromAnalyzer( const matchSubclassesQueryConfig =
MatchSubclassesAnalyzer, await QueryService.getQueryConfigFromAnalyzer(MatchSubclassesAnalyzer);
);
/** @type {Partial<ProvidenceConfig>} */ /** @type {Partial<ProvidenceConfig>} */
const _providenceCfg = { const _providenceCfg = {
targetProjectPaths: [searchTargetProject.path], targetProjectPaths: [searchTargetProject.path],

16
packages/ui/components/button/test-suites/LionButtonReset.suite.js
View file

@ -164,15 +164,13 @@ export function LionButtonResetSuite({ klass = LionButtonReset } = {}) {
const formSpyLater = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault())); const formSpyLater = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault()));
const form2El = /** @type {HTMLFormElement} */ ( const form2El = /** @type {HTMLFormElement} */ (
await fixture( await fixture(html`
html` <div @click="${outsideSpy}">
<div @click="${outsideSpy}"> <form @click="${formSpyEarly}">
<form @click="${formSpyEarly}"> <div @click="${insideSpy}">${lionButton}</div>
<div @click="${insideSpy}">${lionButton}</div> </form>
</form> </div>
</div> `)
`,
)
); );
const form2Node = /** @type {HTMLFormElement} */ (form2El.querySelector('form')); const form2Node = /** @type {HTMLFormElement} */ (form2El.querySelector('form'));

56
packages/ui/components/calendar/test/lion-calendar.test.js
View file

@ -355,10 +355,12 @@ describe('<lion-calendar>', () => {
it('has a initCentralDate() method for external contexts like datepickers', async () => { it('has a initCentralDate() method for external contexts like datepickers', async () => {
const initialCentralDate = new Date('2014/07/05'); const initialCentralDate = new Date('2014/07/05');
const initialSelectedDate = new Date('2014/07/07'); const initialSelectedDate = new Date('2014/07/07');
const el = await fixture(html`<lion-calendar const el = await fixture(
.centralDate="${initialCentralDate}" html`<lion-calendar
.selectedDate="${initialSelectedDate}" .centralDate="${initialCentralDate}"
></lion-calendar>`); .selectedDate="${initialSelectedDate}"
></lion-calendar>`,
);
expect(el.selectedDate).to.equal(initialSelectedDate); expect(el.selectedDate).to.equal(initialSelectedDate);
expect(el.centralDate).to.equal(initialCentralDate); expect(el.centralDate).to.equal(initialCentralDate);
@ -408,14 +410,12 @@ describe('<lion-calendar>', () => {
it('disables a date with disableDates function', async () => { it('disables a date with disableDates function', async () => {
/** @param {Date} d */ /** @param {Date} d */
const disable15th = d => d.getDate() === 15; const disable15th = d => d.getDate() === 15;
const el = await fixture( const el = await fixture(html`
html` <lion-calendar
<lion-calendar .selectedDate="${new Date('2000/12/01')}"
.selectedDate="${new Date('2000/12/01')}" .disableDates=${disable15th}
.disableDates=${disable15th} ></lion-calendar>
></lion-calendar> `);
`,
);
const elObj = new CalendarObject(el); const elObj = new CalendarObject(el);
elObj.dayEls.forEach((d, i) => { elObj.dayEls.forEach((d, i) => {
const shouldBeDisabled = i === 15 - 1; const shouldBeDisabled = i === 15 - 1;
@ -490,15 +490,13 @@ describe('<lion-calendar>', () => {
// without normalization, selectedDate < minDate would wrongfully be disabled // without normalization, selectedDate < minDate would wrongfully be disabled
const minDate = new Date('2000-11-02T04:00:00'); const minDate = new Date('2000-11-02T04:00:00');
const el = await fixture( const el = await fixture(html`
html` <lion-calendar
<lion-calendar .selectedDate="${selectedDate}"
.selectedDate="${selectedDate}" .minDate="${minDate}"
.minDate="${minDate}" .maxDate="${maxDate}"
.maxDate="${maxDate}" ></lion-calendar>
></lion-calendar> `);
`,
);
const elObj = new CalendarObject(el); const elObj = new CalendarObject(el);
expect(elObj.getDayObj(29).isDisabled).to.equal(false); expect(elObj.getDayObj(29).isDisabled).to.equal(false);
@ -1531,15 +1529,13 @@ describe('<lion-calendar>', () => {
}); });
it('is accessible with disabled dates', async () => { it('is accessible with disabled dates', async () => {
const el = await fixture( const el = await fixture(html`
html` <lion-calendar
<lion-calendar .disableDates=${
.disableDates=${ /** @param {Date} date */ date => date.getDay() === 6 || date.getDay() === 0
/** @param {Date} date */ date => date.getDay() === 6 || date.getDay() === 0 }
} ></lion-calendar>
></lion-calendar> `);
`,
);
await expect(el).to.be.accessible(); await expect(el).to.be.accessible();
}); });

64
packages/ui/components/combobox/test/lion-combobox.test.js
View file

@ -2300,17 +2300,17 @@ describe('lion-combobox', () => {
await fixture(html` await fixture(html`
<${tag} name="foo" autocomplete="both" multiple-choice> <${tag} name="foo" autocomplete="both" multiple-choice>
<lion-option .label="${'Artichoke as label'}" .choiceValue="${{ <lion-option .label="${'Artichoke as label'}" .choiceValue="${{
value: 'Artichoke', value: 'Artichoke',
}}">Artichoke</lion-option> }}">Artichoke</lion-option>
<lion-option .label="${'Chard as label'}" .choiceValue="${{ <lion-option .label="${'Chard as label'}" .choiceValue="${{
value: 'Chard', value: 'Chard',
}}">Chard</lion-option> }}">Chard</lion-option>
<lion-option .label="${'Chicory as label'}" .choiceValue="${{ <lion-option .label="${'Chicory as label'}" .choiceValue="${{
value: 'Chicory', value: 'Chicory',
}}">Chicory</lion-option> }}">Chicory</lion-option>
<lion-option .label="${'Victoria Plum as label'}" .choiceValue="${{ <lion-option .label="${'Victoria Plum as label'}" .choiceValue="${{
value: 'Victoria Plum', value: 'Victoria Plum',
}}">Victoria Plum</lion-option> }}">Victoria Plum</lion-option>
</${tag}> </${tag}>
`) `)
); );
@ -2353,17 +2353,17 @@ describe('lion-combobox', () => {
await fixture(html` await fixture(html`
<${tag} name="foo"> <${tag} name="foo">
<lion-option .label="${'Artichoke as label'}" .choiceValue="${{ <lion-option .label="${'Artichoke as label'}" .choiceValue="${{
value: 'Artichoke', value: 'Artichoke',
}}">Artichoke</lion-option> }}">Artichoke</lion-option>
<lion-option .label="${'Chard as label'}" .choiceValue="${{ <lion-option .label="${'Chard as label'}" .choiceValue="${{
value: 'Chard', value: 'Chard',
}}" checked>Chard</lion-option> }}" checked>Chard</lion-option>
<lion-option .label="${'Chicory as label'}" .choiceValue="${{ <lion-option .label="${'Chicory as label'}" .choiceValue="${{
value: 'Chicory', value: 'Chicory',
}}">Chicory</lion-option> }}">Chicory</lion-option>
<lion-option .label="${'Victoria Plum as label'}" .choiceValue="${{ <lion-option .label="${'Victoria Plum as label'}" .choiceValue="${{
value: 'Victoria Plum', value: 'Victoria Plum',
}}">Victoria Plum</lion-option> }}">Victoria Plum</lion-option>
</${tag}> </${tag}>
`) `)
); );
@ -2403,17 +2403,17 @@ describe('lion-combobox', () => {
await fixture(html` await fixture(html`
<${tag} name="foo" .modelValue="${{ value: 'Artichoke' }}"> <${tag} name="foo" .modelValue="${{ value: 'Artichoke' }}">
<lion-option .label="${'Artichoke as label'}" .choiceValue="${{ <lion-option .label="${'Artichoke as label'}" .choiceValue="${{
value: 'Artichoke', value: 'Artichoke',
}}">Artichoke</lion-option> }}">Artichoke</lion-option>
<lion-option .label="${'Chard as label'}" .choiceValue="${{ <lion-option .label="${'Chard as label'}" .choiceValue="${{
value: 'Chard', value: 'Chard',
}}">Chard</lion-option> }}">Chard</lion-option>
<lion-option .label="${'Chicory as label'}" .choiceValue="${{ <lion-option .label="${'Chicory as label'}" .choiceValue="${{
value: 'Chicory', value: 'Chicory',
}}">Chicory</lion-option> }}">Chicory</lion-option>
<lion-option .label="${'Victoria Plum as label'}" .choiceValue="${{ <lion-option .label="${'Victoria Plum as label'}" .choiceValue="${{
value: 'Victoria Plum', value: 'Victoria Plum',
}}">Victoria Plum</lion-option> }}">Victoria Plum</lion-option>
</${tag}> </${tag}>
`) `)
); );
@ -2450,17 +2450,17 @@ describe('lion-combobox', () => {
await fixture(html` await fixture(html`
<${tag} name="foo"> <${tag} name="foo">
<lion-option .label="${'Artichoke as label'}" .choiceValue="${{ <lion-option .label="${'Artichoke as label'}" .choiceValue="${{
value: 'Artichoke', value: 'Artichoke',
}}">Artichoke</lion-option> }}">Artichoke</lion-option>
<lion-option .label="${'Chard as label'}" .choiceValue="${{ <lion-option .label="${'Chard as label'}" .choiceValue="${{
value: 'Chard', value: 'Chard',
}}">Chard</lion-option> }}">Chard</lion-option>
<lion-option .label="${'Chicory as label'}" .choiceValue="${{ <lion-option .label="${'Chicory as label'}" .choiceValue="${{
value: 'Chicory', value: 'Chicory',
}}">Chicory</lion-option> }}">Chicory</lion-option>
<lion-option .label="${'Victoria Plum as label'}" .choiceValue="${{ <lion-option .label="${'Victoria Plum as label'}" .choiceValue="${{
value: 'Victoria Plum', value: 'Victoria Plum',
}}">Victoria Plum</lion-option> }}">Victoria Plum</lion-option>
</${tag}> </${tag}>
`) `)
); );

36
packages/ui/components/form-core/test-suites/form-group/FormGroupMixin.suite.js
View file

@ -1485,9 +1485,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
const el = /** @type {DynamicCWrapper} */ ( const el = /** @type {DynamicCWrapper} */ (
await fixture(html` await fixture(html`
<${dynamicChildrenTag} .fields="${['firstName']}" .modelValue="${{ <${dynamicChildrenTag} .fields="${['firstName']}" .modelValue="${{
firstName: 'foo', firstName: 'foo',
lastName: 'bar', lastName: 'bar',
}}"> }}">
</${dynamicChildrenTag}> </${dynamicChildrenTag}>
`) `)
); );
@ -1503,9 +1503,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
const el2 = /** @type {DynamicCWrapper} */ ( const el2 = /** @type {DynamicCWrapper} */ (
await fixture(html` await fixture(html`
<${dynamicChildrenTag} .fields="${['firstName']}" .serializedValue="${{ <${dynamicChildrenTag} .fields="${['firstName']}" .serializedValue="${{
firstName: 'foo', firstName: 'foo',
lastName: 'bar', lastName: 'bar',
}}"> }}">
</${dynamicChildrenTag}> </${dynamicChildrenTag}>
`) `)
); );
@ -1530,9 +1530,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
const el = /** @type {DynamicCWrapper} */ ( const el = /** @type {DynamicCWrapper} */ (
await fixture(html` await fixture(html`
<${dynamicChildrenTag} .fields="${['firstName']}" .modelValue="${{ <${dynamicChildrenTag} .fields="${['firstName']}" .modelValue="${{
firstName: 'foo', firstName: 'foo',
lastName: 'bar', lastName: 'bar',
}}"> }}">
</${dynamicChildrenTag}> </${dynamicChildrenTag}>
`) `)
); );
@ -1551,9 +1551,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
const el2 = /** @type {DynamicCWrapper} */ ( const el2 = /** @type {DynamicCWrapper} */ (
await fixture(html` await fixture(html`
<${dynamicChildrenTag} .fields="${['firstName']}" .serializedValue="${{ <${dynamicChildrenTag} .fields="${['firstName']}" .serializedValue="${{
firstName: 'foo', firstName: 'foo',
lastName: 'bar', lastName: 'bar',
}}"> }}">
</${dynamicChildrenTag}> </${dynamicChildrenTag}>
`) `)
); );
@ -1574,9 +1574,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
const el = /** @type {DynamicCWrapper} */ ( const el = /** @type {DynamicCWrapper} */ (
await fixture(html` await fixture(html`
<${dynamicChildrenTag} .modelValue="${{ <${dynamicChildrenTag} .modelValue="${{
firstName: 'foo', firstName: 'foo',
lastName: 'bar', lastName: 'bar',
}}"> }}">
</${dynamicChildrenTag}> </${dynamicChildrenTag}>
`) `)
); );
@ -1595,9 +1595,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
const el2 = /** @type {DynamicCWrapper} */ ( const el2 = /** @type {DynamicCWrapper} */ (
await fixture(html` await fixture(html`
<${dynamicChildrenTag} .serializedValue="${{ <${dynamicChildrenTag} .serializedValue="${{
firstName: 'foo', firstName: 'foo',
lastName: 'bar', lastName: 'bar',
}}"> }}">
</${dynamicChildrenTag}> </${dynamicChildrenTag}>
`) `)
); );

10
packages/ui/components/form-integrations/test/dialog-integrations.test.js
View file

@ -17,10 +17,12 @@ import '@lion/ui/define/lion-radio.js';
// Test umbrella form inside dialog // Test umbrella form inside dialog
describe('Form inside dialog Integrations', () => { describe('Form inside dialog Integrations', () => {
it('Successfully registers all form components inside a dialog', async () => { it('Successfully registers all form components inside a dialog', async () => {
const el = /** @type {LionDialog} */ await fixture(html` <lion-dialog> const el = /** @type {LionDialog} */ await fixture(
<button slot="invoker">Open Dialog</button> html` <lion-dialog>
<umbrella-form slot="content"></umbrella-form> <button slot="invoker">Open Dialog</button>
</lion-dialog>`); <umbrella-form slot="content"></umbrella-form>
</lion-dialog>`,
);
// @ts-ignore // @ts-ignore
const formEl = /** @type {LionForm} */ (el._overlayCtrl.contentNode._lionFormNode); const formEl = /** @type {LionForm} */ (el._overlayCtrl.contentNode._lionFormNode);

8
packages/ui/components/form/test/lion-form.test.js
View file

@ -208,8 +208,8 @@ describe('<lion-form>', () => {
<lion-form> <lion-form>
<form> <form>
<${childTag} name="firstName" .modelValue=${'Foo'} .validators=${[ <${childTag} name="firstName" .modelValue=${'Foo'} .validators=${[
new Required(), new Required(),
]}></${childTag}> ]}></${childTag}>
<${childTag} name="lastName" .validators=${[new Required()]}></${childTag}> <${childTag} name="lastName" .validators=${[new Required()]}></${childTag}>
<button type="submit">submit</button> <button type="submit">submit</button>
</form> </form>
@ -229,8 +229,8 @@ describe('<lion-form>', () => {
<form> <form>
<lion-fieldset name="name"> <lion-fieldset name="name">
<${childTag} name="firstName" .modelValue=${'Foo'} .validators=${[ <${childTag} name="firstName" .modelValue=${'Foo'} .validators=${[
new Required(), new Required(),
]}></${childTag}> ]}></${childTag}>
<${childTag} name="lastName" .validators=${[new Required()]}></${childTag}> <${childTag} name="lastName" .validators=${[new Required()]}></${childTag}>
</lion-fieldset> </lion-fieldset>
<button type="submit">submit</button> <button type="submit">submit</button>

13
packages/ui/components/helpers/src/SbActionLogger.js
View file

@ -25,8 +25,17 @@ export class SbActionLogger extends LitElement {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
display: block; display: block;
font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', font-family:
BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; 'Nunito Sans',
-apple-system,
'.SFNSText-Regular',
'San Francisco',
BlinkMacSystemFont,
'Segoe UI',
'Helvetica Neue',
Helvetica,
Arial,
sans-serif;
} }
.header__info { .header__info {

26
packages/ui/components/icon/test/lion-icon.test.js
View file

@ -118,20 +118,18 @@ describe('lion-icon', () => {
window.addEventListener('importDone', resolve); window.addEventListener('importDone', resolve);
}); });
const el = await fixture( const el = await fixture(html`
html` <lion-icon
<lion-icon .svg=${until(
.svg=${until( import('./heart.svg.js').then(e => {
import('./heart.svg.js').then(e => { dispatchEvent(new CustomEvent('importDone'));
dispatchEvent(new CustomEvent('importDone')); return e.default;
return e.default; }),
}), html``,
html``, )}
)} aria-label="Love"
aria-label="Love" ></lion-icon>
></lion-icon> `);
`,
);
await svgLoading; await svgLoading;
// We need to await the until directive is resolved and rendered to the dom // We need to await the until directive is resolved and rendered to the dom

24
packages/ui/components/input-amount/test/lion-input-amount.test.js
View file

@ -36,24 +36,20 @@ describe('<lion-input-amount>', () => {
it('formatAmount uses locale provided in formatOptions', async () => { it('formatAmount uses locale provided in formatOptions', async () => {
let el = /** @type {LionInputAmount} */ ( let el = /** @type {LionInputAmount} */ (
await fixture( await fixture(html`
html`
<lion-input-amount
.formatOptions="${{ locale: 'en-GB' }}"
.modelValue="${123}"
></lion-input-amount>
`,
)
);
expect(el.formattedValue).to.equal('123.00');
el = await fixture(
html`
<lion-input-amount <lion-input-amount
.formatOptions="${{ locale: 'nl-NL' }}" .formatOptions="${{ locale: 'en-GB' }}"
.modelValue="${123}" .modelValue="${123}"
></lion-input-amount> ></lion-input-amount>
`, `)
); );
expect(el.formattedValue).to.equal('123.00');
el = await fixture(html`
<lion-input-amount
.formatOptions="${{ locale: 'nl-NL' }}"
.modelValue="${123}"
></lion-input-amount>
`);
expect(el.formattedValue).to.equal('123,00'); expect(el.formattedValue).to.equal('123,00');
}); });

8
packages/ui/components/input-datepicker/test/lion-input-datepicker.test.js
View file

@ -286,10 +286,10 @@ describe('<lion-input-datepicker>', () => {
it('converts MinDate validator to "minDate" property', async () => { it('converts MinDate validator to "minDate" property', async () => {
const myMinDate = new Date('2019/06/15'); const myMinDate = new Date('2019/06/15');
const el = await fixture(html` <lion-input-datepicker const el = await fixture(
.validators="${[new MinDate(myMinDate)]}" html` <lion-input-datepicker .validators="${[new MinDate(myMinDate)]}">
> </lion-input-datepicker>`,
</lion-input-datepicker>`); );
const elObj = new DatepickerInputObject(el); const elObj = new DatepickerInputObject(el);
await elObj.openCalendar(); await elObj.openCalendar();

6
packages/ui/components/input-file/test/lion-input-file.test.js
View file

@ -637,9 +637,9 @@ describe('lion-input-file', () => {
}) })
); );
const el = await fixture( const el = await fixture(html`
html` <lion-input-file multiple max-file-size="3" accept=".txt"></lion-input-file> `, <lion-input-file multiple max-file-size="3" accept=".txt"></lion-input-file>
); `);
setTimeout(() => { setTimeout(() => {
mimicSelectFile(el, [file, fileWrongSize, file2, fileWrongType]); mimicSelectFile(el, [file, fileWrongSize, file2, fileWrongType]);

43
packages/ui/components/input-tel-dropdown/test/LionInputTelDropdown.test.js
View file

@ -46,8 +46,9 @@ class WithFormControlInputTelDropdown extends ScopedElementsMixin(LionInputTelDr
${repeat( ${repeat(
data.regionMetaList, data.regionMetaList,
regionMeta => regionMeta.regionCode, regionMeta => regionMeta.regionCode,
regionMeta => regionMeta => html`
html` <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option> `, <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option>
`,
)} )}
</lion-select-rich> </lion-select-rich>
`; `;
@ -86,8 +87,9 @@ describe('WithFormControlInputTelDropdown', () => {
${repeat( ${repeat(
data.regionMetaList, data.regionMetaList,
regionMeta => regionMeta.regionCode, regionMeta => regionMeta.regionCode,
regionMeta => regionMeta => html`
html` <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option> `, <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option>
`,
)} )}
</lion-select-rich> </lion-select-rich>
`; `;
@ -96,14 +98,12 @@ describe('WithFormControlInputTelDropdown', () => {
} }
customElements.define('input-tel-dropdown-mac', InputTelDropdownMac); customElements.define('input-tel-dropdown-mac', InputTelDropdownMac);
const el = /** @type {LionInputTelDropdown} */ ( const el = /** @type {LionInputTelDropdown} */ (
await fixture( await fixture(html`
html` <input-tel-dropdown-mac
<input-tel-dropdown-mac .allowedRegions="${['NL', 'BE']}"
.allowedRegions="${['NL', 'BE']}" .modelValue="${'+31612345678'}"
.modelValue="${'+31612345678'}" ></input-tel-dropdown-mac>
></input-tel-dropdown-mac> `)
`,
)
); );
const dropdownElement = el.refs.dropdown.value; const dropdownElement = el.refs.dropdown.value;
// @ts-expect-error [allow-protected-in-tests] // @ts-expect-error [allow-protected-in-tests]
@ -140,8 +140,9 @@ describe('WithFormControlInputTelDropdown', () => {
${repeat( ${repeat(
data.regionMetaList, data.regionMetaList,
regionMeta => regionMeta.regionCode, regionMeta => regionMeta.regionCode,
regionMeta => regionMeta => html`
html` <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option> `, <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option>
`,
)} )}
</lion-select-rich> </lion-select-rich>
`; `;
@ -150,14 +151,12 @@ describe('WithFormControlInputTelDropdown', () => {
} }
customElements.define('input-tel-dropdown-windows', InputTelDropdownWindows); customElements.define('input-tel-dropdown-windows', InputTelDropdownWindows);
const el = /** @type {LionInputTelDropdown} */ ( const el = /** @type {LionInputTelDropdown} */ (
await fixture( await fixture(html`
html` <input-tel-dropdown-windows
<input-tel-dropdown-windows .allowedRegions="${['NL', 'BE']}"
.allowedRegions="${['NL', 'BE']}" .modelValue="${'+31612345678'}"
.modelValue="${'+31612345678'}" ></input-tel-dropdown-windows>
></input-tel-dropdown-windows> `)
`,
)
); );
const dropdownElement = el.refs.dropdown.value; const dropdownElement = el.refs.dropdown.value;
// @ts-expect-error [allow-protected-in-tests] // @ts-expect-error [allow-protected-in-tests]

5
packages/ui/components/listbox/test-suites/ListboxMixin.suite.js
View file

@ -1639,8 +1639,9 @@ export function runListboxMixinSuite(customConfig = {}) {
${repeat( ${repeat(
this.options, this.options,
(/** @type {string} */ option) => option, (/** @type {string} */ option) => option,
(/** @type {string} */ option) => (/** @type {string} */ option) => html`
html` <lion-option .choiceValue="${option}">${option}</lion-option> `, <lion-option .choiceValue="${option}">${option}</lion-option>
`,
)} )}
</${tag}> </${tag}>
`; `;

88
packages/ui/components/progress-indicator/test/lion-progress-indicator.test.js
View file

@ -24,9 +24,9 @@ describe('lion-progress-indicator', () => {
}); });
it('can override a label with "aria-label"', async () => { it('can override a label with "aria-label"', async () => {
const el = await fixture( const el = await fixture(html`
html` <lion-progress-indicator aria-label="foo"></lion-progress-indicator> `, <lion-progress-indicator aria-label="foo"></lion-progress-indicator>
); `);
await el.localizeNamespacesLoaded; await el.localizeNamespacesLoaded;
expect(el.getAttribute('aria-label')).to.equal('foo'); expect(el.getAttribute('aria-label')).to.equal('foo');
el.setAttribute('aria-label', 'bar'); el.setAttribute('aria-label', 'bar');
@ -37,9 +37,9 @@ describe('lion-progress-indicator', () => {
}); });
it('can override a label with "aria-labelledby"', async () => { it('can override a label with "aria-labelledby"', async () => {
const el = await fixture( const el = await fixture(html`
html` <lion-progress-indicator aria-labelledby="foo-id"></lion-progress-indicator> `, <lion-progress-indicator aria-labelledby="foo-id"></lion-progress-indicator>
); `);
await el.localizeNamespacesLoaded; await el.localizeNamespacesLoaded;
expect(el.getAttribute('aria-labelledby')).to.equal('foo-id'); expect(el.getAttribute('aria-labelledby')).to.equal('foo-id');
expect(el.hasAttribute('aria-label')).to.be.false; expect(el.hasAttribute('aria-label')).to.be.false;
@ -62,9 +62,9 @@ describe('lion-progress-indicator', () => {
}); });
it('keeps own aria-label when switch to determinate state', async () => { it('keeps own aria-label when switch to determinate state', async () => {
const el = await fixture( const el = await fixture(html`
html` <lion-progress-indicator aria-label="foo"></lion-progress-indicator> `, <lion-progress-indicator aria-label="foo"></lion-progress-indicator>
); `);
expect(el.getAttribute('aria-label')).to.equal('foo'); expect(el.getAttribute('aria-label')).to.equal('foo');
el.setAttribute('value', '30'); el.setAttribute('value', '30');
await el.updateComplete; await el.updateComplete;
@ -74,16 +74,16 @@ describe('lion-progress-indicator', () => {
describe('determinate', async () => { describe('determinate', async () => {
it('is determinate when it has a value', async () => { it('is determinate when it has a value', async () => {
const el = await fixture( const el = await fixture(html`
html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `, <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
); `);
expect(el.indeterminate).to.be.false; expect(el.indeterminate).to.be.false;
}); });
it('can update value', async () => { it('can update value', async () => {
const el = await fixture( const el = await fixture(html`
html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `, <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
); `);
expect(el.getAttribute('aria-valuenow')).to.equal('25'); expect(el.getAttribute('aria-valuenow')).to.equal('25');
el.value = 30; el.value = 30;
await el.updateComplete; await el.updateComplete;
@ -91,9 +91,9 @@ describe('lion-progress-indicator', () => {
}); });
it('can update min', async () => { it('can update min', async () => {
const el = await fixture( const el = await fixture(html`
html` <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator> `, <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator>
); `);
expect(el.getAttribute('aria-valuemin')).to.equal('0'); expect(el.getAttribute('aria-valuemin')).to.equal('0');
el.min = 30; el.min = 30;
await el.updateComplete; await el.updateComplete;
@ -101,9 +101,9 @@ describe('lion-progress-indicator', () => {
}); });
it('can update max', async () => { it('can update max', async () => {
const el = await fixture( const el = await fixture(html`
html` <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator> `, <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator>
); `);
expect(el.getAttribute('aria-valuemax')).to.equal('100'); expect(el.getAttribute('aria-valuemax')).to.equal('100');
el.max = 70; el.max = 70;
await el.updateComplete; await el.updateComplete;
@ -111,9 +111,9 @@ describe('lion-progress-indicator', () => {
}); });
it('min & max limits value', async () => { it('min & max limits value', async () => {
const el = await fixture( const el = await fixture(html`
html` <lion-progress-indicator value="150" aria-label="foo"></lion-progress-indicator> `, <lion-progress-indicator value="150" aria-label="foo"></lion-progress-indicator>
); `);
// sets to default max: 100 // sets to default max: 100
expect(el.getAttribute('aria-valuenow')).to.equal('100'); expect(el.getAttribute('aria-valuenow')).to.equal('100');
el.value = -20; el.value = -20;
@ -124,14 +124,12 @@ describe('lion-progress-indicator', () => {
// TODO make this feature available // TODO make this feature available
it.skip('supports valuetext', async () => { it.skip('supports valuetext', async () => {
const el = await fixture( const el = await fixture(html`
html` <lion-progress-indicator
<lion-progress-indicator value="8"
value="8" value-text="{value}% (34 minutes) remaining"
value-text="{value}% (34 minutes) remaining" ></lion-progress-indicator>
></lion-progress-indicator> `);
`,
);
expect(el.getAttribute('aria-valuetext')).to.equal('8% (34 minutes) remaining'); expect(el.getAttribute('aria-valuetext')).to.equal('8% (34 minutes) remaining');
}); });
@ -179,11 +177,9 @@ describe('lion-progress-indicator', () => {
describe('Subclasers', () => { describe('Subclasers', () => {
it('can use _progressPercentage getter to get the progress percentage', async () => { it('can use _progressPercentage getter to get the progress percentage', async () => {
const el = await fixture( const el = await fixture(html`
html` <lion-progress-indicator max="50" value="10" aria-label="foo"></lion-progress-indicator>
<lion-progress-indicator max="50" value="10" aria-label="foo"></lion-progress-indicator> `);
`,
);
expect(el._progressPercentage).to.equal(20); expect(el._progressPercentage).to.equal(20);
}); });
}); });
@ -203,23 +199,23 @@ describe('lion-progress-indicator', () => {
describe('determinate', () => { describe('determinate', () => {
it('passes a11y test', async () => { it('passes a11y test', async () => {
const el = await fixture( const el = await fixture(html`
html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `, <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
); `);
await expect(el).to.be.accessible(); await expect(el).to.be.accessible();
}); });
it('once value is set', async () => { it('once value is set', async () => {
const el = await fixture( const el = await fixture(html`
html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `, <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
); `);
expect(el.getAttribute('aria-valuenow')).to.equal('25'); expect(el.getAttribute('aria-valuenow')).to.equal('25');
}); });
it('allows to set min & max values', async () => { it('allows to set min & max values', async () => {
const el = await fixture( const el = await fixture(html`
html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `, <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
); `);
expect(el.getAttribute('aria-valuemin')).to.equal('0'); expect(el.getAttribute('aria-valuemin')).to.equal('0');
expect(el.getAttribute('aria-valuemax')).to.equal('100'); expect(el.getAttribute('aria-valuemax')).to.equal('100');
}); });

14
packages/ui/components/select-rich/test/lion-select-rich.test.js
View file

@ -444,9 +444,9 @@ describe('lion-select-rich', () => {
}); });
it('adds focus to element with [role=listbox] when trapsKeyboardFocus is true', async () => { it('adds focus to element with [role=listbox] when trapsKeyboardFocus is true', async () => {
const el = await fixture( const el = await fixture(html`
html` <lion-select-rich .config=${{ trapsKeyboardFocus: true }}></lion-select-rich> `, <lion-select-rich .config=${{ trapsKeyboardFocus: true }}></lion-select-rich>
); `);
const { _listboxNode } = getSelectRichMembers(el); const { _listboxNode } = getSelectRichMembers(el);
expect(document.activeElement).to.not.equal(_listboxNode); expect(document.activeElement).to.not.equal(_listboxNode);
@ -503,11 +503,9 @@ describe('lion-select-rich', () => {
}); });
it('does not close the listbox with [Tab] key once opened when trapsKeyboardFocus is true', async () => { it('does not close the listbox with [Tab] key once opened when trapsKeyboardFocus is true', async () => {
const el = await fixture( const el = await fixture(html`
html` <lion-select-rich opened .config=${{ trapsKeyboardFocus: true }}> </lion-select-rich>
<lion-select-rich opened .config=${{ trapsKeyboardFocus: true }}> </lion-select-rich> `);
`,
);
// tab can only be caught via keydown // tab can only be caught via keydown
const { _listboxNode } = getSelectRichMembers(el); const { _listboxNode } = getSelectRichMembers(el);
_listboxNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' })); _listboxNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));

12
packages/ui/components/steps/test/lion-step.test.js
View file

@ -50,13 +50,11 @@ describe('lion-step', () => {
}); });
it('is hidden when attribute hidden is true', async () => { it('is hidden when attribute hidden is true', async () => {
const el = await fixture( const el = await fixture(html`
html` <fake-lion-steps>
<fake-lion-steps> <lion-step hidden>Step 1</lion-step>
<lion-step hidden>Step 1</lion-step> </fake-lion-steps>
</fake-lion-steps> `);
`,
);
expect(el.children[0]).not.to.be.displayed; expect(el.children[0]).not.to.be.displayed;
}); });

12
packages/ui/components/switch/test/lion-switch.test.js
View file

@ -160,13 +160,11 @@ describe('lion-switch', () => {
it('should not propagate the "checked-changed" event further up when caught by switch', async () => { it('should not propagate the "checked-changed" event further up when caught by switch', async () => {
const handlerSpy = sinon.spy(); const handlerSpy = sinon.spy();
const parentHandlerSpy = sinon.spy(); const parentHandlerSpy = sinon.spy();
const el = await fixture( const el = await fixture(html`
html` <div @checked-changed=${parentHandlerSpy}>
<div @checked-changed=${parentHandlerSpy}> <lion-switch @checked-changed=${handlerSpy} .choiceValue=${'foo'}></lion-switch>
<lion-switch @checked-changed=${handlerSpy} .choiceValue=${'foo'}></lion-switch> </div>
</div> `);
`,
);
const switchEl = /** @type {LionSwitch} */ (el.firstElementChild); const switchEl = /** @type {LionSwitch} */ (el.firstElementChild);
switchEl.checked = true; switchEl.checked = true;
await switchEl.updateComplete; await switchEl.updateComplete;