update prettier
* 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
GitHub
parent
1df3854196
commit
c7c83d1d8b
49 changed files with 490 additions and 430 deletions
7
.changeset/yellow-mails-exist.md
Normal file
7
.changeset/yellow-mails-exist.md
Normal 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.
|
||||
|
|
@ -262,15 +262,14 @@ Or you can add an extra paragraph below the content. Create a fenced codeblock:
|
|||
### Lea Tabs Special Feature
|
||||
|
||||
```js
|
||||
export const specialFeature = () =>
|
||||
html`
|
||||
<lea-tabs>
|
||||
<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 slot="tab">Work</lea-tab>
|
||||
<lea-tab-panel slot="panel"> Work page that showcases our work. </lea-tab-panel>
|
||||
</lea-tabs>
|
||||
`;
|
||||
export const specialFeature = () => html`
|
||||
<lea-tabs>
|
||||
<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 slot="tab">Work</lea-tab>
|
||||
<lea-tab-panel slot="panel"> Work page that showcases our work. </lea-tab-panel>
|
||||
</lea-tabs>
|
||||
`;
|
||||
```
|
||||
|
||||
## Summary
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
|
||||
```js preview-story
|
||||
export const minimumClickArea = () => html` <style>
|
||||
.small {
|
||||
padding: 4px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.small::before {
|
||||
border: 1px dashed #000;
|
||||
}
|
||||
</style>
|
||||
<lion-button class="small">xs</lion-button>`;
|
||||
export const minimumClickArea = () =>
|
||||
html` <style>
|
||||
.small {
|
||||
padding: 4px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.small::before {
|
||||
border: 1px dashed #000;
|
||||
}
|
||||
</style>
|
||||
<lion-button class="small">xs</lion-button>`;
|
||||
```
|
||||
|
||||
## Usage with native form
|
||||
|
|
|
|||
|
|
@ -7,7 +7,9 @@ const applyDemoCollapsibleStyles = () => {
|
|||
margin: 16px;
|
||||
border-radius: 4px;
|
||||
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 {
|
||||
|
|
@ -18,7 +20,9 @@ const applyDemoCollapsibleStyles = () => {
|
|||
border-width: 0;
|
||||
border-radius: 2px;
|
||||
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;
|
||||
color: #3f51b5;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,8 +25,9 @@ export const main = () => html`
|
|||
<lion-combobox name="combo" label="Default">
|
||||
${lazyRender(
|
||||
listboxData.map(
|
||||
(entry, i) =>
|
||||
html` <lion-option .checked="${i === 0}" .choiceValue="${entry}">${entry}</lion-option> `,
|
||||
(entry, i) => html`
|
||||
<lion-option .checked="${i === 0}" .choiceValue="${entry}">${entry}</lion-option>
|
||||
`,
|
||||
),
|
||||
)}
|
||||
</lion-combobox>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,9 @@ export class GhButton extends LionButton {
|
|||
color: #24292e;
|
||||
background-color: #fafbfc;
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -123,8 +123,15 @@ export class GhCombobox extends LionCombobox {
|
|||
/** @configure LionCombobox */
|
||||
|
||||
:host {
|
||||
font-family: apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
|
||||
Apple Color Emoji, Segoe UI Emoji;
|
||||
font-family:
|
||||
apple-system,
|
||||
BlinkMacSystemFont,
|
||||
Segoe UI,
|
||||
Helvetica,
|
||||
Arial,
|
||||
sans-serif,
|
||||
Apple Color Emoji,
|
||||
Segoe UI Emoji;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -403,15 +403,13 @@ export class GoogleCombobox extends LionCombobox {
|
|||
),
|
||||
prefix: () => renderLitAsNode(html` <span>${googleSearchIcon}</span> `),
|
||||
suffix: () =>
|
||||
renderLitAsNode(
|
||||
html` <button aria-label="Search by voice">${googleVoiceSearchIcon}</button> `,
|
||||
),
|
||||
renderLitAsNode(html`
|
||||
<button aria-label="Search by voice">${googleVoiceSearchIcon}</button>
|
||||
`),
|
||||
'clear-btn': () =>
|
||||
renderLitAsNode(
|
||||
html`
|
||||
<button @click="${this.__clearText}" aria-label="Clear text">${googleClearIcon}</button>
|
||||
`,
|
||||
),
|
||||
renderLitAsNode(html`
|
||||
<button @click="${this.__clearText}" aria-label="Clear text">${googleClearIcon}</button>
|
||||
`),
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -48,7 +48,8 @@ export const MdFieldMixin = dedupeMixin(
|
|||
transform: perspective(100px);
|
||||
-ms-transform: none;
|
||||
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),
|
||||
width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
/* z-index: 1; */
|
||||
|
|
@ -205,7 +206,9 @@ export const MdFieldMixin = dedupeMixin(
|
|||
background-position: 50%;
|
||||
transform: scale(10, 10);
|
||||
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,
|
||||
|
|
@ -288,7 +291,8 @@ export const MdFieldMixin = dedupeMixin(
|
|||
visibility: visible;
|
||||
opacity: 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),
|
||||
background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,9 @@ class WaOption extends LionOption {
|
|||
cursor: pointer;
|
||||
color: rgb(74, 74, 74);
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
@ -287,8 +289,18 @@ class WaCombobox extends LionCombobox {
|
|||
...super.styles,
|
||||
css`
|
||||
:host {
|
||||
font-family: SF Pro Text, SF Pro Icons, system, -apple-system, system-ui, BlinkMacSystemFont,
|
||||
Helvetica Neue, Helvetica, Lucida Grande, Kohinoor Devanagari, sans-serif;
|
||||
font-family:
|
||||
SF Pro Text,
|
||||
SF Pro Icons,
|
||||
system,
|
||||
-apple-system,
|
||||
system-ui,
|
||||
BlinkMacSystemFont,
|
||||
Helvetica Neue,
|
||||
Helvetica,
|
||||
Lucida Grande,
|
||||
Kohinoor Devanagari,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.input-group__container {
|
||||
|
|
|
|||
|
|
@ -242,8 +242,9 @@ export const multipleChoice = () => html`
|
|||
></demo-selection-display>
|
||||
${lazyRender(
|
||||
listboxData.map(
|
||||
(entry, i) =>
|
||||
html` <lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option> `,
|
||||
(entry, i) => html`
|
||||
<lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option>
|
||||
`,
|
||||
),
|
||||
)}
|
||||
</lion-combobox>
|
||||
|
|
@ -264,8 +265,9 @@ export const multipleCustomizableChoice = () => html`
|
|||
></demo-selection-display>
|
||||
${lazyRender(
|
||||
listboxData.map(
|
||||
(entry, i) =>
|
||||
html` <lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option> `,
|
||||
(entry, i) => html`
|
||||
<lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option>
|
||||
`,
|
||||
),
|
||||
)}
|
||||
</lion-combobox>
|
||||
|
|
@ -434,23 +436,23 @@ const onModelValueChanged = event => {
|
|||
console.log(`event.target.modelValue: ${JSON.stringify(event.target.modelValue)}`);
|
||||
};
|
||||
|
||||
export const complexObjectChoiceValue = () => html` <complex-object-combobox
|
||||
name="combo"
|
||||
label="Display only the label once selected"
|
||||
@model-value-changed="${onModelValueChanged}"
|
||||
>
|
||||
${lazyRender(
|
||||
listboxComplexData.map(
|
||||
entry =>
|
||||
html`
|
||||
export const complexObjectChoiceValue = () =>
|
||||
html` <complex-object-combobox
|
||||
name="combo"
|
||||
label="Display only the label once selected"
|
||||
@model-value-changed="${onModelValueChanged}"
|
||||
>
|
||||
${lazyRender(
|
||||
listboxComplexData.map(
|
||||
entry => html`
|
||||
<lion-option .choiceValue="${entry.label}">
|
||||
<div data-key>${entry.label}</div>
|
||||
<small>${entry.description}</small>
|
||||
</lion-option>
|
||||
`,
|
||||
),
|
||||
)}
|
||||
</complex-object-combobox>`;
|
||||
),
|
||||
)}
|
||||
</complex-object-combobox>`;
|
||||
```
|
||||
|
||||
## Listbox compatibility
|
||||
|
|
|
|||
|
|
@ -46,9 +46,15 @@ export class IntlInputTelDropdown extends ScopedElementsMixin(LionInputTelDropdo
|
|||
border-radius: 4px;
|
||||
-webkit-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;
|
||||
-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;
|
||||
-webkit-transition:
|
||||
border-color 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 {
|
||||
|
|
@ -64,8 +70,12 @@ export class IntlInputTelDropdown extends ScopedElementsMixin(LionInputTelDropdo
|
|||
:host([focused]) .input-group__container {
|
||||
border-color: #66afe9;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: 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%);
|
||||
-webkit-box-shadow:
|
||||
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%);
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
```js preview-story
|
||||
export const labelSrOnly = () =>
|
||||
html` <lion-input label-sr-only label="Input" name="input"></lion-input> `;
|
||||
export const labelSrOnly = () => html`
|
||||
<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>`
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
```js preview-story
|
||||
export const progressBarDemo = () =>
|
||||
html`
|
||||
<my-determinate-progress-bar
|
||||
aria-label="Interest rate"
|
||||
name="my-bar"
|
||||
value="50"
|
||||
></my-determinate-progress-bar>
|
||||
<button @click="${changeProgress}">Randomize Value</button>
|
||||
`;
|
||||
export const progressBarDemo = () => html`
|
||||
<my-determinate-progress-bar
|
||||
aria-label="Interest rate"
|
||||
name="my-bar"
|
||||
value="50"
|
||||
></my-determinate-progress-bar>
|
||||
<button @click="${changeProgress}">Randomize Value</button>
|
||||
`;
|
||||
```
|
||||
|
||||
## Styled progress spinner example
|
||||
|
|
@ -120,6 +119,7 @@ class MyIndeterminateProgressSpinner extends LionProgressIndicator {
|
|||
```
|
||||
|
||||
```js preview-story
|
||||
export const main = () =>
|
||||
html` <my-indeterminate-progress-spinner></my-indeterminate-progress-spinner> `;
|
||||
export const main = () => html`
|
||||
<my-indeterminate-progress-spinner></my-indeterminate-progress-spinner>
|
||||
`;
|
||||
```
|
||||
|
|
|
|||
|
|
@ -7,7 +7,9 @@ export class LeaTabPanel extends LitElement {
|
|||
background-color: #fff;
|
||||
background-image: linear-gradient(top, #fff, #ddd);
|
||||
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;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,10 @@ export class LeaTab extends LitElement {
|
|||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
float: left;
|
||||
font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
|
||||
font:
|
||||
bold 12px/35px 'Lucida sans',
|
||||
Arial,
|
||||
Helvetica;
|
||||
height: 35px;
|
||||
padding: 0 30px;
|
||||
text-decoration: none;
|
||||
|
|
@ -23,7 +26,9 @@ export class LeaTab extends LitElement {
|
|||
|
||||
:host(:focus) {
|
||||
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; */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,10 @@ export const providenceFlowSvg = html` <svg
|
|||
>
|
||||
<style>
|
||||
#mermaid-1592918098747 .label {
|
||||
font-family: trebuchet ms, verdana, arial;
|
||||
font-family:
|
||||
trebuchet ms,
|
||||
verdana,
|
||||
arial;
|
||||
color: #333;
|
||||
}
|
||||
#mermaid-1592918098747 .node circle,
|
||||
|
|
@ -57,7 +60,10 @@ export const providenceFlowSvg = html` <svg
|
|||
max-width: 200px;
|
||||
max-height: 400px;
|
||||
padding: 2px;
|
||||
font-family: trebuchet ms, verdana, arial;
|
||||
font-family:
|
||||
trebuchet ms,
|
||||
verdana,
|
||||
arial;
|
||||
font-size: 12px;
|
||||
background: #ffffde;
|
||||
border: 1px solid #aa3;
|
||||
|
|
@ -118,7 +124,10 @@ export const providenceFlowSvg = html` <svg
|
|||
#mermaid-1592918098747 .noteText {
|
||||
fill: #000;
|
||||
stroke: none;
|
||||
font-family: trebuchet ms, verdana, arial;
|
||||
font-family:
|
||||
trebuchet ms,
|
||||
verdana,
|
||||
arial;
|
||||
font-size: 14px;
|
||||
}
|
||||
#mermaid-1592918098747 .section {
|
||||
|
|
@ -267,7 +276,10 @@ export const providenceFlowSvg = html` <svg
|
|||
#mermaid-1592918098747 g.classGroup text {
|
||||
fill: #9370db;
|
||||
stroke: none;
|
||||
font-family: trebuchet ms, verdana, arial;
|
||||
font-family:
|
||||
trebuchet ms,
|
||||
verdana,
|
||||
arial;
|
||||
font-size: 10px;
|
||||
}
|
||||
#mermaid-1592918098747 g.classGroup rect {
|
||||
|
|
@ -553,7 +565,10 @@ export const providenceInternalFlowSvg = html`
|
|||
>
|
||||
<style>
|
||||
#mermaid-1592918099462 .label {
|
||||
font-family: trebuchet ms, verdana, arial;
|
||||
font-family:
|
||||
trebuchet ms,
|
||||
verdana,
|
||||
arial;
|
||||
color: #333;
|
||||
}
|
||||
#mermaid-1592918099462 .node circle,
|
||||
|
|
@ -591,7 +606,10 @@ export const providenceInternalFlowSvg = html`
|
|||
max-width: 200px;
|
||||
max-height: 400px;
|
||||
padding: 2px;
|
||||
font-family: trebuchet ms, verdana, arial;
|
||||
font-family:
|
||||
trebuchet ms,
|
||||
verdana,
|
||||
arial;
|
||||
font-size: 12px;
|
||||
background: #ffffde;
|
||||
border: 1px solid #aa3;
|
||||
|
|
@ -652,7 +670,10 @@ export const providenceInternalFlowSvg = html`
|
|||
#mermaid-1592918099462 .noteText {
|
||||
fill: #000;
|
||||
stroke: none;
|
||||
font-family: trebuchet ms, verdana, arial;
|
||||
font-family:
|
||||
trebuchet ms,
|
||||
verdana,
|
||||
arial;
|
||||
font-size: 14px;
|
||||
}
|
||||
#mermaid-1592918099462 .section {
|
||||
|
|
@ -801,7 +822,10 @@ export const providenceInternalFlowSvg = html`
|
|||
#mermaid-1592918099462 g.classGroup text {
|
||||
fill: #9370db;
|
||||
stroke: none;
|
||||
font-family: trebuchet ms, verdana, arial;
|
||||
font-family:
|
||||
trebuchet ms,
|
||||
verdana,
|
||||
arial;
|
||||
font-size: 10px;
|
||||
}
|
||||
#mermaid-1592918099462 g.classGroup rect {
|
||||
|
|
|
|||
|
|
@ -33,21 +33,20 @@ See [css-tricks: popping-hidden-overflow](https://css-tricks.com/popping-hidden-
|
|||
#### Overflow: the problem
|
||||
|
||||
```js preview-story
|
||||
export const edgeCaseOverflowProblem = () =>
|
||||
html`
|
||||
<div style="padding: 54px 24px 36px;">
|
||||
<div
|
||||
style="overflow: hidden; border: 1px black dashed; padding-top: 44px; padding-bottom: 16px;"
|
||||
>
|
||||
<div style="display: flex; justify-content: space-evenly; position: relative;">
|
||||
<demo-overlay-el opened use-absolute>
|
||||
<button slot="invoker" aria-label="local, non modal"></button>
|
||||
<div slot="content">absolute (for demo)</div>
|
||||
</demo-overlay-el>
|
||||
</div>
|
||||
export const edgeCaseOverflowProblem = () => html`
|
||||
<div style="padding: 54px 24px 36px;">
|
||||
<div
|
||||
style="overflow: hidden; border: 1px black dashed; padding-top: 44px; padding-bottom: 16px;"
|
||||
>
|
||||
<div style="display: flex; justify-content: space-evenly; position: relative;">
|
||||
<demo-overlay-el opened use-absolute>
|
||||
<button slot="invoker" aria-label="local, non modal"></button>
|
||||
<div slot="content">absolute (for demo)</div>
|
||||
</demo-overlay-el>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
</div>
|
||||
`;
|
||||
```
|
||||
|
||||
#### 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.
|
||||
|
||||
```js preview-story
|
||||
export const edgeCaseOverflowSolution = () =>
|
||||
html`
|
||||
<div style="padding: 54px 24px 36px;">
|
||||
<div
|
||||
style="overflow: hidden; border: 1px black dashed; padding-top: 36px; padding-bottom: 16px;"
|
||||
>
|
||||
<div style="display: flex; justify-content: space-evenly; position: relative;">
|
||||
<demo-overlay-el
|
||||
opened
|
||||
.config="${{ placementMode: 'local', trapsKeyboardFocus: false }}"
|
||||
>
|
||||
<button slot="invoker" aria-label="local, non modal"></button>
|
||||
<div slot="content">no matter</div>
|
||||
</demo-overlay-el>
|
||||
export const edgeCaseOverflowSolution = () => html`
|
||||
<div style="padding: 54px 24px 36px;">
|
||||
<div
|
||||
style="overflow: hidden; border: 1px black dashed; padding-top: 36px; padding-bottom: 16px;"
|
||||
>
|
||||
<div style="display: flex; justify-content: space-evenly; position: relative;">
|
||||
<demo-overlay-el opened .config="${{ placementMode: 'local', trapsKeyboardFocus: false }}">
|
||||
<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 }}">
|
||||
<button slot="invoker" aria-label="local, modal"></button>
|
||||
<div slot="content">what configuration</div>
|
||||
</demo-overlay-el>
|
||||
<demo-overlay-el opened .config="${{ placementMode: 'local', trapsKeyboardFocus: true }}">
|
||||
<button slot="invoker" aria-label="local, modal"></button>
|
||||
<div slot="content">what configuration</div>
|
||||
</demo-overlay-el>
|
||||
|
||||
<demo-overlay-el
|
||||
opened
|
||||
.config="${{ placementMode: 'local', popperConfig: { strategy: 'absolute' } }}"
|
||||
>
|
||||
<button slot="invoker" aria-label="local, absolute"></button>
|
||||
<div slot="content">...it</div>
|
||||
</demo-overlay-el>
|
||||
<demo-overlay-el
|
||||
opened
|
||||
.config="${{ placementMode: 'local', popperConfig: { strategy: 'absolute' } }}"
|
||||
>
|
||||
<button slot="invoker" aria-label="local, absolute"></button>
|
||||
<div slot="content">...it</div>
|
||||
</demo-overlay-el>
|
||||
|
||||
<demo-overlay-el
|
||||
opened
|
||||
.config="${{ placementMode: 'local', popperConfig: { strategy: 'fixed' } }}"
|
||||
>
|
||||
<button slot="invoker" aria-label="local, fixed"></button>
|
||||
<div slot="content">just</div>
|
||||
</demo-overlay-el>
|
||||
<demo-overlay-el
|
||||
opened
|
||||
.config="${{ placementMode: 'local', popperConfig: { strategy: 'fixed' } }}"
|
||||
>
|
||||
<button slot="invoker" aria-label="local, fixed"></button>
|
||||
<div slot="content">just</div>
|
||||
</demo-overlay-el>
|
||||
|
||||
<demo-overlay-el opened .config="${{ placementMode: 'global' }}">
|
||||
<button slot="invoker" aria-label="global"></button>
|
||||
<div slot="content">works</div>
|
||||
</demo-overlay-el>
|
||||
</div>
|
||||
<demo-overlay-el opened .config="${{ placementMode: 'global' }}">
|
||||
<button slot="invoker" aria-label="global"></button>
|
||||
<div slot="content">works</div>
|
||||
</demo-overlay-el>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
</div>
|
||||
`;
|
||||
```
|
||||
|
||||
### Stacking context
|
||||
|
|
@ -114,32 +109,31 @@ The example below shows the difference between a modal and non-modal overlay pla
|
|||
#### Stacking context: the problem
|
||||
|
||||
```js preview-story
|
||||
export const edgeCaseStackProblem = () =>
|
||||
html`
|
||||
<div style="width: 300px; height: 300px; position: relative;">
|
||||
<div
|
||||
id="stacking-context-a"
|
||||
style="position: absolute; z-index: 2; top: 0; width: 100px; height: 200px;"
|
||||
>
|
||||
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>
|
||||
export const edgeCaseStackProblem = () => html`
|
||||
<div style="width: 300px; height: 300px; position: relative;">
|
||||
<div
|
||||
id="stacking-context-a"
|
||||
style="position: absolute; z-index: 2; top: 0; width: 100px; height: 200px;"
|
||||
>
|
||||
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>
|
||||
`;
|
||||
```
|
||||
|
|
|
|||
|
|
@ -131,15 +131,12 @@ render() {
|
|||
|
||||
or declaratively in your template with the `.config` property
|
||||
|
||||
```html
|
||||
<demo-el-using-overlaymixin .config=${{ ...withModalDialogConfig() }}>
|
||||
```jsx
|
||||
<demo-el-using-overlaymixin .config="${{ ...withModalDialogConfig() }}">
|
||||
<button slot="invoker">Click me to open the overlay!</button>
|
||||
<div slot="content" class="demo-overlay">
|
||||
Hello! You can close this notification here:
|
||||
<button
|
||||
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
|
||||
>
|
||||
⨯
|
||||
<button @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}">
|
||||
</button>
|
||||
</div>
|
||||
</demo-el-using-overlaymixin>
|
||||
|
|
|
|||
|
|
@ -40,13 +40,10 @@ const uid = Math.random().toString(36).substr(2, 10);
|
|||
|
||||
This connects the logger element to the trigger.
|
||||
|
||||
```html
|
||||
```jsx
|
||||
<div>To log: <code>Hello, World!</code></div>
|
||||
<button
|
||||
@click=${e => {
|
||||
e.target.parentElement.querySelector('#logger-${uid}').log('Hello, World!')
|
||||
}}
|
||||
>Click this button</button>
|
||||
<button @click="${e => { e.target.parentElement.querySelector('#logger-${uid}').log('Hello, World!') }}">Click this button
|
||||
</button>
|
||||
<sb-action-logger id="logger-${uid}"></sb-action-logger>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -37,7 +37,9 @@ class DemoApp extends LitElement {
|
|||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: background 250ms ease-in-out, transform 150ms ease;
|
||||
transition:
|
||||
background 250ms ease-in-out,
|
||||
transform 150ms ease;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
|
|
|
|||
|
|
@ -35,7 +35,9 @@ class DemoApp extends LitElement {
|
|||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: background 250ms ease-in-out, transform 150ms ease;
|
||||
transition:
|
||||
background 250ms ease-in-out,
|
||||
transform 150ms ease;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
|
|
|
|||
|
|
@ -37,7 +37,9 @@ class DemoApp extends LitElement {
|
|||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: background 250ms ease-in-out, transform 150ms ease;
|
||||
transition:
|
||||
background 250ms ease-in-out,
|
||||
transform 150ms ease;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
"@types/fs-extra": "^11.0.4",
|
||||
"@types/glob": "^8.1.0",
|
||||
"@types/mocha": "^10.0.6",
|
||||
"@types/prettier": "^2.7.3",
|
||||
"@types/prettier": "^3.0.0",
|
||||
"@web/dev-server-legacy": "^0.1.7",
|
||||
"@web/test-runner": "^0.18.1",
|
||||
"@web/test-runner-browserstack": "^0.7.1",
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
"mocha": "^10.4.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postinstall-postinstall": "^2.1.0",
|
||||
"prettier": "^2.8.8",
|
||||
"prettier": "^3.2.5",
|
||||
"prettier-package-json": "^2.8.0",
|
||||
"remark-html": "^13.0.2",
|
||||
"rollup": "^2.79.1",
|
||||
|
|
|
|||
|
|
@ -29,13 +29,13 @@
|
|||
"types": "wireit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/generator": "^7.24.4",
|
||||
"@babel/parser": "^7.24.4",
|
||||
"@babel/traverse": "^7.24.1",
|
||||
"@babel/types": "^7.24.0",
|
||||
"@babel/generator": "^7.24.5",
|
||||
"@babel/parser": "^7.24.5",
|
||||
"@babel/traverse": "^7.24.5",
|
||||
"@babel/types": "^7.24.5",
|
||||
"es-module-lexer": "^0.3.26",
|
||||
"globby": "^14.0.1",
|
||||
"prettier": "^2.8.8"
|
||||
"prettier": "^3.2.5"
|
||||
},
|
||||
"keywords": [
|
||||
"lion-tools",
|
||||
|
|
|
|||
|
|
@ -48,14 +48,14 @@ const getPrettierParser = fileExtension => {
|
|||
* Prettifies text using the prettier.
|
||||
* - Supported file extensions are: js | cjs | mjs | md | html | json | css | yaml | yml
|
||||
* @example
|
||||
* prettify('some js code');
|
||||
* prettify('<html>some html</html>', 'html');
|
||||
* prettify('some-markdown', 'md', {printWidth: 120});
|
||||
* await prettify('some js code');
|
||||
* await prettify('<html>some html</html>', 'html');
|
||||
* await prettify('some-markdown', 'md', {printWidth: 120});
|
||||
* @param {string} text
|
||||
* @param {string} fileExtension ['js']
|
||||
* @param {PrettierOptions} [options] [{ printWidth = 100, singleQuote = true }]
|
||||
* @see {@link https://prettier.io/docs/en/options.html}
|
||||
* @returns {string}
|
||||
* @returns {Promise<string>}
|
||||
* @throws ERROR_UNSUPPORTED_FILE_EXTENSION
|
||||
*/
|
||||
export const prettify = (text, fileExtension = 'js', options = {}) => {
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@ const generateAdjustedExportFile = async (fileName, exportsDir, outputDir) => {
|
|||
const initialCode = await readFile(inputPath, 'utf-8');
|
||||
const adjustImportExportVisitor = getAdjustImportExportVisitor(exportsDir, outputDir);
|
||||
const adjustedCode = transformCode(initialCode, adjustImportExportVisitor);
|
||||
return writeFile(outputPath, prettify(adjustedCode));
|
||||
return writeFile(outputPath, await prettify(adjustedCode));
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -95,8 +95,8 @@ const bypassImportMapForFile = async (filePath, packageDir, importMap) => {
|
|||
const initialCode = await readFile(filePath, 'utf-8');
|
||||
const adjustImportVisitor = getAdjustImportVisitor(filePath, packageDir, importMap);
|
||||
const updatedCode = transformCode(initialCode, adjustImportVisitor);
|
||||
const prettyInitialCode = prettify(initialCode);
|
||||
const prettyUpdatedCode = prettify(updatedCode);
|
||||
const prettyInitialCode = await prettify(initialCode);
|
||||
const prettyUpdatedCode = await prettify(updatedCode);
|
||||
if (prettyInitialCode === prettyUpdatedCode) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -194,7 +194,7 @@ describe('components import other components and native + 3rd party imports', ()
|
|||
'utf-8',
|
||||
);
|
||||
// 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
|
||||
expect(prettify(adjustedCode)).to.equal(prettify(expectedCode));
|
||||
expect(await prettify(adjustedCode)).to.equal(await prettify(expectedCode));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -58,8 +58,8 @@ describe('Bypass import map task', () => {
|
|||
// Then
|
||||
if (process.platform !== 'win32') {
|
||||
// FIXME: skipping test for windows case
|
||||
expect(prettify(adjustedCodeArrowDown)).to.equal(prettify(expectedCodeArrowDown));
|
||||
expect(prettify(adjustedCodeArrowUp)).to.equal(prettify(expectedCodeArrowUp));
|
||||
expect(await prettify(adjustedCodeArrowDown)).to.equal(await prettify(expectedCodeArrowDown));
|
||||
expect(await prettify(adjustedCodeArrowUp)).to.equal(await prettify(expectedCodeArrowUp));
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -101,8 +101,8 @@ describe('Bypass import map task', () => {
|
|||
// Then
|
||||
if (process.platform !== 'win32') {
|
||||
// FIXME: skipping test for windows case
|
||||
expect(prettify(adjustedCodeArrowDown)).to.equal(prettify(expectedCodeArrowDown));
|
||||
expect(prettify(adjustedCodeArrowUp)).to.equal(prettify(expectedCodeArrowUp));
|
||||
expect(await prettify(adjustedCodeArrowDown)).to.equal(await prettify(expectedCodeArrowDown));
|
||||
expect(await prettify(adjustedCodeArrowUp)).to.equal(await prettify(expectedCodeArrowUp));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -15,9 +15,8 @@ import MatchImportsAnalyzer from '../../../src/program/analyzers/match-imports.j
|
|||
setupAnalyzerTest();
|
||||
//
|
||||
describe('Analyzer "match-imports"', async () => {
|
||||
const matchImportsQueryConfig = await QueryService.getQueryConfigFromAnalyzer(
|
||||
MatchImportsAnalyzer,
|
||||
);
|
||||
const matchImportsQueryConfig =
|
||||
await QueryService.getQueryConfigFromAnalyzer(MatchImportsAnalyzer);
|
||||
/** @type {Partial<ProvidenceConfig>} */
|
||||
const _providenceCfg = {
|
||||
targetProjectPaths: ['/importing/target/project'],
|
||||
|
|
|
|||
|
|
@ -84,9 +84,8 @@ describe('Analyzer "match-subclasses"', async () => {
|
|||
],
|
||||
};
|
||||
|
||||
const matchSubclassesQueryConfig = await QueryService.getQueryConfigFromAnalyzer(
|
||||
MatchSubclassesAnalyzer,
|
||||
);
|
||||
const matchSubclassesQueryConfig =
|
||||
await QueryService.getQueryConfigFromAnalyzer(MatchSubclassesAnalyzer);
|
||||
/** @type {Partial<ProvidenceConfig>} */
|
||||
const _providenceCfg = {
|
||||
targetProjectPaths: [searchTargetProject.path],
|
||||
|
|
|
|||
|
|
@ -164,15 +164,13 @@ export function LionButtonResetSuite({ klass = LionButtonReset } = {}) {
|
|||
const formSpyLater = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault()));
|
||||
|
||||
const form2El = /** @type {HTMLFormElement} */ (
|
||||
await fixture(
|
||||
html`
|
||||
<div @click="${outsideSpy}">
|
||||
<form @click="${formSpyEarly}">
|
||||
<div @click="${insideSpy}">${lionButton}</div>
|
||||
</form>
|
||||
</div>
|
||||
`,
|
||||
)
|
||||
await fixture(html`
|
||||
<div @click="${outsideSpy}">
|
||||
<form @click="${formSpyEarly}">
|
||||
<div @click="${insideSpy}">${lionButton}</div>
|
||||
</form>
|
||||
</div>
|
||||
`)
|
||||
);
|
||||
const form2Node = /** @type {HTMLFormElement} */ (form2El.querySelector('form'));
|
||||
|
||||
|
|
|
|||
|
|
@ -355,10 +355,12 @@ describe('<lion-calendar>', () => {
|
|||
it('has a initCentralDate() method for external contexts like datepickers', async () => {
|
||||
const initialCentralDate = new Date('2014/07/05');
|
||||
const initialSelectedDate = new Date('2014/07/07');
|
||||
const el = await fixture(html`<lion-calendar
|
||||
.centralDate="${initialCentralDate}"
|
||||
.selectedDate="${initialSelectedDate}"
|
||||
></lion-calendar>`);
|
||||
const el = await fixture(
|
||||
html`<lion-calendar
|
||||
.centralDate="${initialCentralDate}"
|
||||
.selectedDate="${initialSelectedDate}"
|
||||
></lion-calendar>`,
|
||||
);
|
||||
|
||||
expect(el.selectedDate).to.equal(initialSelectedDate);
|
||||
expect(el.centralDate).to.equal(initialCentralDate);
|
||||
|
|
@ -408,14 +410,12 @@ describe('<lion-calendar>', () => {
|
|||
it('disables a date with disableDates function', async () => {
|
||||
/** @param {Date} d */
|
||||
const disable15th = d => d.getDate() === 15;
|
||||
const el = await fixture(
|
||||
html`
|
||||
<lion-calendar
|
||||
.selectedDate="${new Date('2000/12/01')}"
|
||||
.disableDates=${disable15th}
|
||||
></lion-calendar>
|
||||
`,
|
||||
);
|
||||
const el = await fixture(html`
|
||||
<lion-calendar
|
||||
.selectedDate="${new Date('2000/12/01')}"
|
||||
.disableDates=${disable15th}
|
||||
></lion-calendar>
|
||||
`);
|
||||
const elObj = new CalendarObject(el);
|
||||
elObj.dayEls.forEach((d, i) => {
|
||||
const shouldBeDisabled = i === 15 - 1;
|
||||
|
|
@ -490,15 +490,13 @@ describe('<lion-calendar>', () => {
|
|||
// without normalization, selectedDate < minDate would wrongfully be disabled
|
||||
const minDate = new Date('2000-11-02T04:00:00');
|
||||
|
||||
const el = await fixture(
|
||||
html`
|
||||
<lion-calendar
|
||||
.selectedDate="${selectedDate}"
|
||||
.minDate="${minDate}"
|
||||
.maxDate="${maxDate}"
|
||||
></lion-calendar>
|
||||
`,
|
||||
);
|
||||
const el = await fixture(html`
|
||||
<lion-calendar
|
||||
.selectedDate="${selectedDate}"
|
||||
.minDate="${minDate}"
|
||||
.maxDate="${maxDate}"
|
||||
></lion-calendar>
|
||||
`);
|
||||
const elObj = new CalendarObject(el);
|
||||
|
||||
expect(elObj.getDayObj(29).isDisabled).to.equal(false);
|
||||
|
|
@ -1531,15 +1529,13 @@ describe('<lion-calendar>', () => {
|
|||
});
|
||||
|
||||
it('is accessible with disabled dates', async () => {
|
||||
const el = await fixture(
|
||||
html`
|
||||
<lion-calendar
|
||||
.disableDates=${
|
||||
/** @param {Date} date */ date => date.getDay() === 6 || date.getDay() === 0
|
||||
}
|
||||
></lion-calendar>
|
||||
`,
|
||||
);
|
||||
const el = await fixture(html`
|
||||
<lion-calendar
|
||||
.disableDates=${
|
||||
/** @param {Date} date */ date => date.getDay() === 6 || date.getDay() === 0
|
||||
}
|
||||
></lion-calendar>
|
||||
`);
|
||||
await expect(el).to.be.accessible();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -2300,17 +2300,17 @@ describe('lion-combobox', () => {
|
|||
await fixture(html`
|
||||
<${tag} name="foo" autocomplete="both" multiple-choice>
|
||||
<lion-option .label="${'Artichoke as label'}" .choiceValue="${{
|
||||
value: 'Artichoke',
|
||||
}}">Artichoke</lion-option>
|
||||
value: 'Artichoke',
|
||||
}}">Artichoke</lion-option>
|
||||
<lion-option .label="${'Chard as label'}" .choiceValue="${{
|
||||
value: 'Chard',
|
||||
}}">Chard</lion-option>
|
||||
value: 'Chard',
|
||||
}}">Chard</lion-option>
|
||||
<lion-option .label="${'Chicory as label'}" .choiceValue="${{
|
||||
value: 'Chicory',
|
||||
}}">Chicory</lion-option>
|
||||
value: 'Chicory',
|
||||
}}">Chicory</lion-option>
|
||||
<lion-option .label="${'Victoria Plum as label'}" .choiceValue="${{
|
||||
value: 'Victoria Plum',
|
||||
}}">Victoria Plum</lion-option>
|
||||
value: 'Victoria Plum',
|
||||
}}">Victoria Plum</lion-option>
|
||||
</${tag}>
|
||||
`)
|
||||
);
|
||||
|
|
@ -2353,17 +2353,17 @@ describe('lion-combobox', () => {
|
|||
await fixture(html`
|
||||
<${tag} name="foo">
|
||||
<lion-option .label="${'Artichoke as label'}" .choiceValue="${{
|
||||
value: 'Artichoke',
|
||||
}}">Artichoke</lion-option>
|
||||
value: 'Artichoke',
|
||||
}}">Artichoke</lion-option>
|
||||
<lion-option .label="${'Chard as label'}" .choiceValue="${{
|
||||
value: 'Chard',
|
||||
}}" checked>Chard</lion-option>
|
||||
value: 'Chard',
|
||||
}}" checked>Chard</lion-option>
|
||||
<lion-option .label="${'Chicory as label'}" .choiceValue="${{
|
||||
value: 'Chicory',
|
||||
}}">Chicory</lion-option>
|
||||
value: 'Chicory',
|
||||
}}">Chicory</lion-option>
|
||||
<lion-option .label="${'Victoria Plum as label'}" .choiceValue="${{
|
||||
value: 'Victoria Plum',
|
||||
}}">Victoria Plum</lion-option>
|
||||
value: 'Victoria Plum',
|
||||
}}">Victoria Plum</lion-option>
|
||||
</${tag}>
|
||||
`)
|
||||
);
|
||||
|
|
@ -2403,17 +2403,17 @@ describe('lion-combobox', () => {
|
|||
await fixture(html`
|
||||
<${tag} name="foo" .modelValue="${{ value: 'Artichoke' }}">
|
||||
<lion-option .label="${'Artichoke as label'}" .choiceValue="${{
|
||||
value: 'Artichoke',
|
||||
}}">Artichoke</lion-option>
|
||||
value: 'Artichoke',
|
||||
}}">Artichoke</lion-option>
|
||||
<lion-option .label="${'Chard as label'}" .choiceValue="${{
|
||||
value: 'Chard',
|
||||
}}">Chard</lion-option>
|
||||
value: 'Chard',
|
||||
}}">Chard</lion-option>
|
||||
<lion-option .label="${'Chicory as label'}" .choiceValue="${{
|
||||
value: 'Chicory',
|
||||
}}">Chicory</lion-option>
|
||||
value: 'Chicory',
|
||||
}}">Chicory</lion-option>
|
||||
<lion-option .label="${'Victoria Plum as label'}" .choiceValue="${{
|
||||
value: 'Victoria Plum',
|
||||
}}">Victoria Plum</lion-option>
|
||||
value: 'Victoria Plum',
|
||||
}}">Victoria Plum</lion-option>
|
||||
</${tag}>
|
||||
`)
|
||||
);
|
||||
|
|
@ -2450,17 +2450,17 @@ describe('lion-combobox', () => {
|
|||
await fixture(html`
|
||||
<${tag} name="foo">
|
||||
<lion-option .label="${'Artichoke as label'}" .choiceValue="${{
|
||||
value: 'Artichoke',
|
||||
}}">Artichoke</lion-option>
|
||||
value: 'Artichoke',
|
||||
}}">Artichoke</lion-option>
|
||||
<lion-option .label="${'Chard as label'}" .choiceValue="${{
|
||||
value: 'Chard',
|
||||
}}">Chard</lion-option>
|
||||
value: 'Chard',
|
||||
}}">Chard</lion-option>
|
||||
<lion-option .label="${'Chicory as label'}" .choiceValue="${{
|
||||
value: 'Chicory',
|
||||
}}">Chicory</lion-option>
|
||||
value: 'Chicory',
|
||||
}}">Chicory</lion-option>
|
||||
<lion-option .label="${'Victoria Plum as label'}" .choiceValue="${{
|
||||
value: 'Victoria Plum',
|
||||
}}">Victoria Plum</lion-option>
|
||||
value: 'Victoria Plum',
|
||||
}}">Victoria Plum</lion-option>
|
||||
</${tag}>
|
||||
`)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1485,9 +1485,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
|
|||
const el = /** @type {DynamicCWrapper} */ (
|
||||
await fixture(html`
|
||||
<${dynamicChildrenTag} .fields="${['firstName']}" .modelValue="${{
|
||||
firstName: 'foo',
|
||||
lastName: 'bar',
|
||||
}}">
|
||||
firstName: 'foo',
|
||||
lastName: 'bar',
|
||||
}}">
|
||||
</${dynamicChildrenTag}>
|
||||
`)
|
||||
);
|
||||
|
|
@ -1503,9 +1503,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
|
|||
const el2 = /** @type {DynamicCWrapper} */ (
|
||||
await fixture(html`
|
||||
<${dynamicChildrenTag} .fields="${['firstName']}" .serializedValue="${{
|
||||
firstName: 'foo',
|
||||
lastName: 'bar',
|
||||
}}">
|
||||
firstName: 'foo',
|
||||
lastName: 'bar',
|
||||
}}">
|
||||
</${dynamicChildrenTag}>
|
||||
`)
|
||||
);
|
||||
|
|
@ -1530,9 +1530,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
|
|||
const el = /** @type {DynamicCWrapper} */ (
|
||||
await fixture(html`
|
||||
<${dynamicChildrenTag} .fields="${['firstName']}" .modelValue="${{
|
||||
firstName: 'foo',
|
||||
lastName: 'bar',
|
||||
}}">
|
||||
firstName: 'foo',
|
||||
lastName: 'bar',
|
||||
}}">
|
||||
</${dynamicChildrenTag}>
|
||||
`)
|
||||
);
|
||||
|
|
@ -1551,9 +1551,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
|
|||
const el2 = /** @type {DynamicCWrapper} */ (
|
||||
await fixture(html`
|
||||
<${dynamicChildrenTag} .fields="${['firstName']}" .serializedValue="${{
|
||||
firstName: 'foo',
|
||||
lastName: 'bar',
|
||||
}}">
|
||||
firstName: 'foo',
|
||||
lastName: 'bar',
|
||||
}}">
|
||||
</${dynamicChildrenTag}>
|
||||
`)
|
||||
);
|
||||
|
|
@ -1574,9 +1574,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
|
|||
const el = /** @type {DynamicCWrapper} */ (
|
||||
await fixture(html`
|
||||
<${dynamicChildrenTag} .modelValue="${{
|
||||
firstName: 'foo',
|
||||
lastName: 'bar',
|
||||
}}">
|
||||
firstName: 'foo',
|
||||
lastName: 'bar',
|
||||
}}">
|
||||
</${dynamicChildrenTag}>
|
||||
`)
|
||||
);
|
||||
|
|
@ -1595,9 +1595,9 @@ export function runFormGroupMixinSuite(cfg = {}) {
|
|||
const el2 = /** @type {DynamicCWrapper} */ (
|
||||
await fixture(html`
|
||||
<${dynamicChildrenTag} .serializedValue="${{
|
||||
firstName: 'foo',
|
||||
lastName: 'bar',
|
||||
}}">
|
||||
firstName: 'foo',
|
||||
lastName: 'bar',
|
||||
}}">
|
||||
</${dynamicChildrenTag}>
|
||||
`)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -17,10 +17,12 @@ import '@lion/ui/define/lion-radio.js';
|
|||
// Test umbrella form inside dialog
|
||||
describe('Form inside dialog Integrations', () => {
|
||||
it('Successfully registers all form components inside a dialog', async () => {
|
||||
const el = /** @type {LionDialog} */ await fixture(html` <lion-dialog>
|
||||
<button slot="invoker">Open Dialog</button>
|
||||
<umbrella-form slot="content"></umbrella-form>
|
||||
</lion-dialog>`);
|
||||
const el = /** @type {LionDialog} */ await fixture(
|
||||
html` <lion-dialog>
|
||||
<button slot="invoker">Open Dialog</button>
|
||||
<umbrella-form slot="content"></umbrella-form>
|
||||
</lion-dialog>`,
|
||||
);
|
||||
|
||||
// @ts-ignore
|
||||
const formEl = /** @type {LionForm} */ (el._overlayCtrl.contentNode._lionFormNode);
|
||||
|
|
|
|||
|
|
@ -208,8 +208,8 @@ describe('<lion-form>', () => {
|
|||
<lion-form>
|
||||
<form>
|
||||
<${childTag} name="firstName" .modelValue=${'Foo'} .validators=${[
|
||||
new Required(),
|
||||
]}></${childTag}>
|
||||
new Required(),
|
||||
]}></${childTag}>
|
||||
<${childTag} name="lastName" .validators=${[new Required()]}></${childTag}>
|
||||
<button type="submit">submit</button>
|
||||
</form>
|
||||
|
|
@ -229,8 +229,8 @@ describe('<lion-form>', () => {
|
|||
<form>
|
||||
<lion-fieldset name="name">
|
||||
<${childTag} name="firstName" .modelValue=${'Foo'} .validators=${[
|
||||
new Required(),
|
||||
]}></${childTag}>
|
||||
new Required(),
|
||||
]}></${childTag}>
|
||||
<${childTag} name="lastName" .validators=${[new Required()]}></${childTag}>
|
||||
</lion-fieldset>
|
||||
<button type="submit">submit</button>
|
||||
|
|
|
|||
|
|
@ -25,8 +25,17 @@ export class SbActionLogger extends LitElement {
|
|||
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
display: block;
|
||||
font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
|
||||
BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-family:
|
||||
'Nunito Sans',
|
||||
-apple-system,
|
||||
'.SFNSText-Regular',
|
||||
'San Francisco',
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
'Helvetica Neue',
|
||||
Helvetica,
|
||||
Arial,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.header__info {
|
||||
|
|
|
|||
|
|
@ -118,20 +118,18 @@ describe('lion-icon', () => {
|
|||
window.addEventListener('importDone', resolve);
|
||||
});
|
||||
|
||||
const el = await fixture(
|
||||
html`
|
||||
<lion-icon
|
||||
.svg=${until(
|
||||
import('./heart.svg.js').then(e => {
|
||||
dispatchEvent(new CustomEvent('importDone'));
|
||||
return e.default;
|
||||
}),
|
||||
html``,
|
||||
)}
|
||||
aria-label="Love"
|
||||
></lion-icon>
|
||||
`,
|
||||
);
|
||||
const el = await fixture(html`
|
||||
<lion-icon
|
||||
.svg=${until(
|
||||
import('./heart.svg.js').then(e => {
|
||||
dispatchEvent(new CustomEvent('importDone'));
|
||||
return e.default;
|
||||
}),
|
||||
html``,
|
||||
)}
|
||||
aria-label="Love"
|
||||
></lion-icon>
|
||||
`);
|
||||
|
||||
await svgLoading;
|
||||
// We need to await the until directive is resolved and rendered to the dom
|
||||
|
|
|
|||
|
|
@ -36,24 +36,20 @@ describe('<lion-input-amount>', () => {
|
|||
|
||||
it('formatAmount uses locale provided in formatOptions', async () => {
|
||||
let el = /** @type {LionInputAmount} */ (
|
||||
await fixture(
|
||||
html`
|
||||
<lion-input-amount
|
||||
.formatOptions="${{ locale: 'en-GB' }}"
|
||||
.modelValue="${123}"
|
||||
></lion-input-amount>
|
||||
`,
|
||||
)
|
||||
);
|
||||
expect(el.formattedValue).to.equal('123.00');
|
||||
el = await fixture(
|
||||
html`
|
||||
await fixture(html`
|
||||
<lion-input-amount
|
||||
.formatOptions="${{ locale: 'nl-NL' }}"
|
||||
.formatOptions="${{ locale: 'en-GB' }}"
|
||||
.modelValue="${123}"
|
||||
></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');
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -286,10 +286,10 @@ describe('<lion-input-datepicker>', () => {
|
|||
|
||||
it('converts MinDate validator to "minDate" property', async () => {
|
||||
const myMinDate = new Date('2019/06/15');
|
||||
const el = await fixture(html` <lion-input-datepicker
|
||||
.validators="${[new MinDate(myMinDate)]}"
|
||||
>
|
||||
</lion-input-datepicker>`);
|
||||
const el = await fixture(
|
||||
html` <lion-input-datepicker .validators="${[new MinDate(myMinDate)]}">
|
||||
</lion-input-datepicker>`,
|
||||
);
|
||||
const elObj = new DatepickerInputObject(el);
|
||||
await elObj.openCalendar();
|
||||
|
||||
|
|
|
|||
|
|
@ -637,9 +637,9 @@ describe('lion-input-file', () => {
|
|||
})
|
||||
);
|
||||
|
||||
const el = await fixture(
|
||||
html` <lion-input-file multiple max-file-size="3" accept=".txt"></lion-input-file> `,
|
||||
);
|
||||
const el = await fixture(html`
|
||||
<lion-input-file multiple max-file-size="3" accept=".txt"></lion-input-file>
|
||||
`);
|
||||
|
||||
setTimeout(() => {
|
||||
mimicSelectFile(el, [file, fileWrongSize, file2, fileWrongType]);
|
||||
|
|
|
|||
|
|
@ -46,8 +46,9 @@ class WithFormControlInputTelDropdown extends ScopedElementsMixin(LionInputTelDr
|
|||
${repeat(
|
||||
data.regionMetaList,
|
||||
regionMeta => regionMeta.regionCode,
|
||||
regionMeta =>
|
||||
html` <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option> `,
|
||||
regionMeta => html`
|
||||
<lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option>
|
||||
`,
|
||||
)}
|
||||
</lion-select-rich>
|
||||
`;
|
||||
|
|
@ -86,8 +87,9 @@ describe('WithFormControlInputTelDropdown', () => {
|
|||
${repeat(
|
||||
data.regionMetaList,
|
||||
regionMeta => regionMeta.regionCode,
|
||||
regionMeta =>
|
||||
html` <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option> `,
|
||||
regionMeta => html`
|
||||
<lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option>
|
||||
`,
|
||||
)}
|
||||
</lion-select-rich>
|
||||
`;
|
||||
|
|
@ -96,14 +98,12 @@ describe('WithFormControlInputTelDropdown', () => {
|
|||
}
|
||||
customElements.define('input-tel-dropdown-mac', InputTelDropdownMac);
|
||||
const el = /** @type {LionInputTelDropdown} */ (
|
||||
await fixture(
|
||||
html`
|
||||
<input-tel-dropdown-mac
|
||||
.allowedRegions="${['NL', 'BE']}"
|
||||
.modelValue="${'+31612345678'}"
|
||||
></input-tel-dropdown-mac>
|
||||
`,
|
||||
)
|
||||
await fixture(html`
|
||||
<input-tel-dropdown-mac
|
||||
.allowedRegions="${['NL', 'BE']}"
|
||||
.modelValue="${'+31612345678'}"
|
||||
></input-tel-dropdown-mac>
|
||||
`)
|
||||
);
|
||||
const dropdownElement = el.refs.dropdown.value;
|
||||
// @ts-expect-error [allow-protected-in-tests]
|
||||
|
|
@ -140,8 +140,9 @@ describe('WithFormControlInputTelDropdown', () => {
|
|||
${repeat(
|
||||
data.regionMetaList,
|
||||
regionMeta => regionMeta.regionCode,
|
||||
regionMeta =>
|
||||
html` <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option> `,
|
||||
regionMeta => html`
|
||||
<lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option>
|
||||
`,
|
||||
)}
|
||||
</lion-select-rich>
|
||||
`;
|
||||
|
|
@ -150,14 +151,12 @@ describe('WithFormControlInputTelDropdown', () => {
|
|||
}
|
||||
customElements.define('input-tel-dropdown-windows', InputTelDropdownWindows);
|
||||
const el = /** @type {LionInputTelDropdown} */ (
|
||||
await fixture(
|
||||
html`
|
||||
<input-tel-dropdown-windows
|
||||
.allowedRegions="${['NL', 'BE']}"
|
||||
.modelValue="${'+31612345678'}"
|
||||
></input-tel-dropdown-windows>
|
||||
`,
|
||||
)
|
||||
await fixture(html`
|
||||
<input-tel-dropdown-windows
|
||||
.allowedRegions="${['NL', 'BE']}"
|
||||
.modelValue="${'+31612345678'}"
|
||||
></input-tel-dropdown-windows>
|
||||
`)
|
||||
);
|
||||
const dropdownElement = el.refs.dropdown.value;
|
||||
// @ts-expect-error [allow-protected-in-tests]
|
||||
|
|
|
|||
|
|
@ -1639,8 +1639,9 @@ export function runListboxMixinSuite(customConfig = {}) {
|
|||
${repeat(
|
||||
this.options,
|
||||
(/** @type {string} */ option) => option,
|
||||
(/** @type {string} */ option) =>
|
||||
html` <lion-option .choiceValue="${option}">${option}</lion-option> `,
|
||||
(/** @type {string} */ option) => html`
|
||||
<lion-option .choiceValue="${option}">${option}</lion-option>
|
||||
`,
|
||||
)}
|
||||
</${tag}>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -24,9 +24,9 @@ describe('lion-progress-indicator', () => {
|
|||
});
|
||||
|
||||
it('can override a label with "aria-label"', async () => {
|
||||
const el = await fixture(
|
||||
html` <lion-progress-indicator aria-label="foo"></lion-progress-indicator> `,
|
||||
);
|
||||
const el = await fixture(html`
|
||||
<lion-progress-indicator aria-label="foo"></lion-progress-indicator>
|
||||
`);
|
||||
await el.localizeNamespacesLoaded;
|
||||
expect(el.getAttribute('aria-label')).to.equal('foo');
|
||||
el.setAttribute('aria-label', 'bar');
|
||||
|
|
@ -37,9 +37,9 @@ describe('lion-progress-indicator', () => {
|
|||
});
|
||||
|
||||
it('can override a label with "aria-labelledby"', async () => {
|
||||
const el = await fixture(
|
||||
html` <lion-progress-indicator aria-labelledby="foo-id"></lion-progress-indicator> `,
|
||||
);
|
||||
const el = await fixture(html`
|
||||
<lion-progress-indicator aria-labelledby="foo-id"></lion-progress-indicator>
|
||||
`);
|
||||
await el.localizeNamespacesLoaded;
|
||||
expect(el.getAttribute('aria-labelledby')).to.equal('foo-id');
|
||||
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 () => {
|
||||
const el = await fixture(
|
||||
html` <lion-progress-indicator aria-label="foo"></lion-progress-indicator> `,
|
||||
);
|
||||
const el = await fixture(html`
|
||||
<lion-progress-indicator aria-label="foo"></lion-progress-indicator>
|
||||
`);
|
||||
expect(el.getAttribute('aria-label')).to.equal('foo');
|
||||
el.setAttribute('value', '30');
|
||||
await el.updateComplete;
|
||||
|
|
@ -74,16 +74,16 @@ describe('lion-progress-indicator', () => {
|
|||
|
||||
describe('determinate', async () => {
|
||||
it('is determinate when it has a value', async () => {
|
||||
const el = await fixture(
|
||||
html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
|
||||
);
|
||||
const el = await fixture(html`
|
||||
<lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
|
||||
`);
|
||||
expect(el.indeterminate).to.be.false;
|
||||
});
|
||||
|
||||
it('can update value', async () => {
|
||||
const el = await fixture(
|
||||
html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
|
||||
);
|
||||
const el = await fixture(html`
|
||||
<lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
|
||||
`);
|
||||
expect(el.getAttribute('aria-valuenow')).to.equal('25');
|
||||
el.value = 30;
|
||||
await el.updateComplete;
|
||||
|
|
@ -91,9 +91,9 @@ describe('lion-progress-indicator', () => {
|
|||
});
|
||||
|
||||
it('can update min', async () => {
|
||||
const el = await fixture(
|
||||
html` <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator> `,
|
||||
);
|
||||
const el = await fixture(html`
|
||||
<lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator>
|
||||
`);
|
||||
expect(el.getAttribute('aria-valuemin')).to.equal('0');
|
||||
el.min = 30;
|
||||
await el.updateComplete;
|
||||
|
|
@ -101,9 +101,9 @@ describe('lion-progress-indicator', () => {
|
|||
});
|
||||
|
||||
it('can update max', async () => {
|
||||
const el = await fixture(
|
||||
html` <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator> `,
|
||||
);
|
||||
const el = await fixture(html`
|
||||
<lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator>
|
||||
`);
|
||||
expect(el.getAttribute('aria-valuemax')).to.equal('100');
|
||||
el.max = 70;
|
||||
await el.updateComplete;
|
||||
|
|
@ -111,9 +111,9 @@ describe('lion-progress-indicator', () => {
|
|||
});
|
||||
|
||||
it('min & max limits value', async () => {
|
||||
const el = await fixture(
|
||||
html` <lion-progress-indicator value="150" aria-label="foo"></lion-progress-indicator> `,
|
||||
);
|
||||
const el = await fixture(html`
|
||||
<lion-progress-indicator value="150" aria-label="foo"></lion-progress-indicator>
|
||||
`);
|
||||
// sets to default max: 100
|
||||
expect(el.getAttribute('aria-valuenow')).to.equal('100');
|
||||
el.value = -20;
|
||||
|
|
@ -124,14 +124,12 @@ describe('lion-progress-indicator', () => {
|
|||
|
||||
// TODO make this feature available
|
||||
it.skip('supports valuetext', async () => {
|
||||
const el = await fixture(
|
||||
html`
|
||||
<lion-progress-indicator
|
||||
value="8"
|
||||
value-text="{value}% (34 minutes) remaining"
|
||||
></lion-progress-indicator>
|
||||
`,
|
||||
);
|
||||
const el = await fixture(html`
|
||||
<lion-progress-indicator
|
||||
value="8"
|
||||
value-text="{value}% (34 minutes) remaining"
|
||||
></lion-progress-indicator>
|
||||
`);
|
||||
expect(el.getAttribute('aria-valuetext')).to.equal('8% (34 minutes) remaining');
|
||||
});
|
||||
|
||||
|
|
@ -179,11 +177,9 @@ describe('lion-progress-indicator', () => {
|
|||
|
||||
describe('Subclasers', () => {
|
||||
it('can use _progressPercentage getter to get the progress percentage', async () => {
|
||||
const el = await fixture(
|
||||
html`
|
||||
<lion-progress-indicator max="50" value="10" aria-label="foo"></lion-progress-indicator>
|
||||
`,
|
||||
);
|
||||
const el = await fixture(html`
|
||||
<lion-progress-indicator max="50" value="10" aria-label="foo"></lion-progress-indicator>
|
||||
`);
|
||||
expect(el._progressPercentage).to.equal(20);
|
||||
});
|
||||
});
|
||||
|
|
@ -203,23 +199,23 @@ describe('lion-progress-indicator', () => {
|
|||
|
||||
describe('determinate', () => {
|
||||
it('passes a11y test', async () => {
|
||||
const el = await fixture(
|
||||
html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
|
||||
);
|
||||
const el = await fixture(html`
|
||||
<lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
|
||||
`);
|
||||
await expect(el).to.be.accessible();
|
||||
});
|
||||
|
||||
it('once value is set', async () => {
|
||||
const el = await fixture(
|
||||
html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
|
||||
);
|
||||
const el = await fixture(html`
|
||||
<lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
|
||||
`);
|
||||
expect(el.getAttribute('aria-valuenow')).to.equal('25');
|
||||
});
|
||||
|
||||
it('allows to set min & max values', async () => {
|
||||
const el = await fixture(
|
||||
html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
|
||||
);
|
||||
const el = await fixture(html`
|
||||
<lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
|
||||
`);
|
||||
expect(el.getAttribute('aria-valuemin')).to.equal('0');
|
||||
expect(el.getAttribute('aria-valuemax')).to.equal('100');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -444,9 +444,9 @@ describe('lion-select-rich', () => {
|
|||
});
|
||||
|
||||
it('adds focus to element with [role=listbox] when trapsKeyboardFocus is true', async () => {
|
||||
const el = await fixture(
|
||||
html` <lion-select-rich .config=${{ trapsKeyboardFocus: true }}></lion-select-rich> `,
|
||||
);
|
||||
const el = await fixture(html`
|
||||
<lion-select-rich .config=${{ trapsKeyboardFocus: true }}></lion-select-rich>
|
||||
`);
|
||||
const { _listboxNode } = getSelectRichMembers(el);
|
||||
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 () => {
|
||||
const el = await fixture(
|
||||
html`
|
||||
<lion-select-rich opened .config=${{ trapsKeyboardFocus: true }}> </lion-select-rich>
|
||||
`,
|
||||
);
|
||||
const el = await fixture(html`
|
||||
<lion-select-rich opened .config=${{ trapsKeyboardFocus: true }}> </lion-select-rich>
|
||||
`);
|
||||
// tab can only be caught via keydown
|
||||
const { _listboxNode } = getSelectRichMembers(el);
|
||||
_listboxNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
|
||||
|
|
|
|||
|
|
@ -50,13 +50,11 @@ describe('lion-step', () => {
|
|||
});
|
||||
|
||||
it('is hidden when attribute hidden is true', async () => {
|
||||
const el = await fixture(
|
||||
html`
|
||||
<fake-lion-steps>
|
||||
<lion-step hidden>Step 1</lion-step>
|
||||
</fake-lion-steps>
|
||||
`,
|
||||
);
|
||||
const el = await fixture(html`
|
||||
<fake-lion-steps>
|
||||
<lion-step hidden>Step 1</lion-step>
|
||||
</fake-lion-steps>
|
||||
`);
|
||||
expect(el.children[0]).not.to.be.displayed;
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -160,13 +160,11 @@ describe('lion-switch', () => {
|
|||
it('should not propagate the "checked-changed" event further up when caught by switch', async () => {
|
||||
const handlerSpy = sinon.spy();
|
||||
const parentHandlerSpy = sinon.spy();
|
||||
const el = await fixture(
|
||||
html`
|
||||
<div @checked-changed=${parentHandlerSpy}>
|
||||
<lion-switch @checked-changed=${handlerSpy} .choiceValue=${'foo'}></lion-switch>
|
||||
</div>
|
||||
`,
|
||||
);
|
||||
const el = await fixture(html`
|
||||
<div @checked-changed=${parentHandlerSpy}>
|
||||
<lion-switch @checked-changed=${handlerSpy} .choiceValue=${'foo'}></lion-switch>
|
||||
</div>
|
||||
`);
|
||||
const switchEl = /** @type {LionSwitch} */ (el.firstElementChild);
|
||||
switchEl.checked = true;
|
||||
await switchEl.updateComplete;
|
||||
|
|
|
|||
Loading…
Reference in a new issue