mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-14 04:59:15 +00:00
Compare commits
27 Commits
inheritanc
...
select-pla
| Author | SHA1 | Date | |
|---|---|---|---|
|
7cf787fd75 | ||
|
|
8e13683a30 | ||
|
|
fd73542d2c | ||
|
|
bde0ed7403 | ||
|
|
8dc49f7119 | ||
|
|
25cb96aa30 | ||
|
|
360273ac27 | ||
|
|
404d59d9d6 | ||
|
|
ce1ce6caca | ||
|
|
74ecc52a15 | ||
|
|
a64cc60ad5 | ||
|
|
c5f91ec2f7 | ||
|
|
4f9af1e871 | ||
|
|
aeb25f3a7d | ||
|
|
b89ee673e6 | ||
|
|
3c70c44b8a | ||
|
|
d8881c0b1e | ||
|
|
88b6fe2fbe | ||
|
|
6a0725cf00 | ||
|
|
3ff8745910 | ||
|
|
0cb72adb28 | ||
|
|
3d35f5d4e0 | ||
|
|
815cc4220b | ||
|
|
a7caf19b34 | ||
|
|
71c054d6e4 | ||
|
|
e1bf5471bf | ||
|
|
099edc5186 |
@@ -16,7 +16,7 @@
|
||||
{# Docs styles #}
|
||||
<link rel="stylesheet" href="/assets/styles/docs.css" />
|
||||
</head>
|
||||
<body class="layout-{{ layout | stripExtension }}">
|
||||
<body class="layout-{{ layout | stripExtension }}{{ ' page-wide' if wide }}">
|
||||
<!-- use view="desktop" as default to reduce layout jank on desktop site. -->
|
||||
<wa-page view="desktop" disable-navigation-toggle="">
|
||||
<header slot="header" class="wa-split">
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
<wa-tab panel="css">In CSS</wa-tab>
|
||||
<wa-tab-panel name="html">
|
||||
|
||||
Simply add the following code to the `<head>` of your page:
|
||||
Add the following code to the `<head>` of your page:
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl stylesheet %}" />
|
||||
```
|
||||
</wa-tab-panel>
|
||||
<wa-tab-panel name="css">
|
||||
|
||||
Simply add the following code at the top of your CSS file:
|
||||
Add the following code at the top of your CSS file:
|
||||
```css
|
||||
@import url('{% cdnUrl stylesheet %}');
|
||||
```
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
<li><a href="/docs/resources/accessibility">Accessibility</a></li>
|
||||
<li><a href="/docs/resources/contributing">Contributing</a></li>
|
||||
<li><a href="/docs/resources/changelog">Changelog</a></li>
|
||||
<li><a href="/docs/resources/visual-tests">Visual Tests</a></li>
|
||||
</ul>
|
||||
|
||||
{% for tag, title in {
|
||||
|
||||
77
docs/_includes/visual-tests/alignment.njk
Normal file
77
docs/_includes/visual-tests/alignment.njk
Normal file
@@ -0,0 +1,77 @@
|
||||
```html {.example}
|
||||
<style>
|
||||
div.alignment {
|
||||
background: linear-gradient(to bottom, lightblue, lightblue 1px, transparent 1px, transparent), linear-gradient(to top, lightblue, lightblue 1px, transparent 1px, transparent);
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
div.alignment::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: calc(50% - 0.5px);
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
<div class="wa-stack wa-gap-xl">
|
||||
<div class="alignment">
|
||||
<wa-switch size="small">Switch</wa-switch>
|
||||
<wa-checkbox size="small">Checkbox</wa-checkbox>
|
||||
<wa-radio value="1" size="small">Radio</wa-radio>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-switch>Switch</wa-switch>
|
||||
<wa-checkbox>Checkbox</wa-checkbox>
|
||||
<wa-radio value="1">Radio</wa-radio>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-switch size="large">Switch</wa-switch>
|
||||
<wa-checkbox size="large">Checkbox</wa-checkbox>
|
||||
<wa-radio value="1" size="large">Radio</wa-radio>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-textarea placeholder="textarea" size="small" rows="1"></wa-textarea>
|
||||
<wa-input placeholder="input" size="small"></wa-input>
|
||||
<wa-select size="small" value="1" multiple>
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
<wa-color-picker size="small"></wa-color-picker>
|
||||
<wa-button size="small">Button</wa-button>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-textarea placeholder="textarea" size="medium" rows="1"></wa-textarea>
|
||||
<wa-input placeholder="input" size="medium"></wa-input>
|
||||
<wa-select size="medium" value="1" multiple>
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
<wa-color-picker size="medium"></wa-color-picker>
|
||||
<wa-button size="medium">Button</wa-button>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-textarea placeholder="textarea" size="large" rows="1"></wa-textarea>
|
||||
<wa-input placeholder="input" size="large"></wa-input>
|
||||
<wa-select size="large" value="1" multiple>
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
<wa-color-picker size="large"></wa-color-picker>
|
||||
<wa-button size="large">Button</wa-button>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-badge>Badge</wa-badge>
|
||||
<code>Code</code>
|
||||
<kbd>Keyboard</kbd>
|
||||
<ins>Inserted</ins>
|
||||
<del>Deleted</del>
|
||||
<mark>Highlighted</mark>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-avatar></wa-avatar>
|
||||
<wa-rating></wa-rating>
|
||||
<wa-icon-button name="gear" label="Settings"></wa-icon-button>
|
||||
<wa-spinner></wa-spinner>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
799
docs/_includes/visual-tests/appearance.njk
Normal file
799
docs/_includes/visual-tests/appearance.njk
Normal file
@@ -0,0 +1,799 @@
|
||||
<h3>Badge</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>appearance=""</code></th>
|
||||
<th><code>.wa-[appearance]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>accent</code> + <code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" appearance="accent outlined">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="accent outlined">Neutral</wa-badge>
|
||||
<wa-badge variant="success" appearance="accent outlined">Success</wa-badge>
|
||||
<wa-badge variant="warning" appearance="accent outlined">Warning</wa-badge>
|
||||
<wa-badge variant="danger" appearance="accent outlined">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" class="wa-accent wa-outlined">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" class="wa-accent wa-outlined">Neutral</wa-badge>
|
||||
<wa-badge variant="success" class="wa-accent wa-outlined">Success</wa-badge>
|
||||
<wa-badge variant="warning" class="wa-accent wa-outlined">Warning</wa-badge>
|
||||
<wa-badge variant="danger" class="wa-accent wa-outlined">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>accent</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" appearance="accent">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="accent">Neutral</wa-badge>
|
||||
<wa-badge variant="success" appearance="accent">Success</wa-badge>
|
||||
<wa-badge variant="warning" appearance="accent">Warning</wa-badge>
|
||||
<wa-badge variant="danger" appearance="accent">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" class="wa-accent">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" class="wa-accent">Neutral</wa-badge>
|
||||
<wa-badge variant="success" class="wa-accent">Success</wa-badge>
|
||||
<wa-badge variant="warning" class="wa-accent">Warning</wa-badge>
|
||||
<wa-badge variant="danger" class="wa-accent">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>filled</code> + <code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" appearance="filled outlined">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="filled outlined">Neutral</wa-badge>
|
||||
<wa-badge variant="success" appearance="filled outlined">Success</wa-badge>
|
||||
<wa-badge variant="warning" appearance="filled outlined">Warning</wa-badge>
|
||||
<wa-badge variant="danger" appearance="filled outlined">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" class="wa-filled wa-outlined">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" class="wa-filled wa-outlined">Neutral</wa-badge>
|
||||
<wa-badge variant="success" class="wa-filled wa-outlined">Success</wa-badge>
|
||||
<wa-badge variant="warning" class="wa-filled wa-outlined">Warning</wa-badge>
|
||||
<wa-badge variant="danger" class="wa-filled wa-outlined">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>filled</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" appearance="filled">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="filled">Neutral</wa-badge>
|
||||
<wa-badge variant="success" appearance="filled">Success</wa-badge>
|
||||
<wa-badge variant="warning" appearance="filled">Warning</wa-badge>
|
||||
<wa-badge variant="danger" appearance="filled">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" class="wa-filled">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" class="wa-filled">Neutral</wa-badge>
|
||||
<wa-badge variant="success" class="wa-filled">Success</wa-badge>
|
||||
<wa-badge variant="warning" class="wa-filled">Warning</wa-badge>
|
||||
<wa-badge variant="danger" class="wa-filled">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="test-failure"><code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" appearance="outlined">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="outlined">Neutral</wa-badge>
|
||||
<wa-badge variant="success" appearance="outlined">Success</wa-badge>
|
||||
<wa-badge variant="warning" appearance="outlined">Warning</wa-badge>
|
||||
<wa-badge variant="danger" appearance="outlined">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" class="wa-outlined">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" class="wa-outlined">Neutral</wa-badge>
|
||||
<wa-badge variant="success" class="wa-outlined">Success</wa-badge>
|
||||
<wa-badge variant="warning" class="wa-outlined">Warning</wa-badge>
|
||||
<wa-badge variant="danger" class="wa-outlined">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>plain</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" appearance="plain">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="plain">Neutral</wa-badge>
|
||||
<wa-badge variant="success" appearance="plain">Success</wa-badge>
|
||||
<wa-badge variant="warning" appearance="plain">Warning</wa-badge>
|
||||
<wa-badge variant="danger" appearance="plain">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" class="wa-plain">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" class="wa-plain">Neutral</wa-badge>
|
||||
<wa-badge variant="success" class="wa-plain">Success</wa-badge>
|
||||
<wa-badge variant="warning" class="wa-plain">Warning</wa-badge>
|
||||
<wa-badge variant="danger" class="wa-plain">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Button</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>appearance=""</code></th>
|
||||
<th><code>.wa-[appearance]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>accent</code> + <code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" appearance="accent outlined">Brand</wa-button>
|
||||
<wa-button variant="neutral" appearance="accent outlined">Neutral</wa-button>
|
||||
<wa-button variant="success" appearance="accent outlined">Success</wa-button>
|
||||
<wa-button variant="warning" appearance="accent outlined">Warning</wa-button>
|
||||
<wa-button variant="danger" appearance="accent outlined">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" class="wa-accent wa-outlined">Brand</wa-button>
|
||||
<wa-button variant="neutral" class="wa-accent wa-outlined">Neutral</wa-button>
|
||||
<wa-button variant="success" class="wa-accent wa-outlined">Success</wa-button>
|
||||
<wa-button variant="warning" class="wa-accent wa-outlined">Warning</wa-button>
|
||||
<wa-button variant="danger" class="wa-accent wa-outlined">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>accent</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" appearance="accent">Brand</wa-button>
|
||||
<wa-button variant="neutral" appearance="accent">Neutral</wa-button>
|
||||
<wa-button variant="success" appearance="accent">Success</wa-button>
|
||||
<wa-button variant="warning" appearance="accent">Warning</wa-button>
|
||||
<wa-button variant="danger" appearance="accent">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" class="wa-accent">Brand</wa-button>
|
||||
<wa-button variant="neutral" class="wa-accent">Neutral</wa-button>
|
||||
<wa-button variant="success" class="wa-accent">Success</wa-button>
|
||||
<wa-button variant="warning" class="wa-accent">Warning</wa-button>
|
||||
<wa-button variant="danger" class="wa-accent">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>filled</code> + <code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" appearance="filled outlined">Brand</wa-button>
|
||||
<wa-button variant="neutral" appearance="filled outlined">Neutral</wa-button>
|
||||
<wa-button variant="success" appearance="filled outlined">Success</wa-button>
|
||||
<wa-button variant="warning" appearance="filled outlined">Warning</wa-button>
|
||||
<wa-button variant="danger" appearance="filled outlined">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" class="wa-filled wa-outlined">Brand</wa-button>
|
||||
<wa-button variant="neutral" class="wa-filled wa-outlined">Neutral</wa-button>
|
||||
<wa-button variant="success" class="wa-filled wa-outlined">Success</wa-button>
|
||||
<wa-button variant="warning" class="wa-filled wa-outlined">Warning</wa-button>
|
||||
<wa-button variant="danger" class="wa-filled wa-outlined">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>filled</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" appearance="filled">Brand</wa-button>
|
||||
<wa-button variant="neutral" appearance="filled">Neutral</wa-button>
|
||||
<wa-button variant="success" appearance="filled">Success</wa-button>
|
||||
<wa-button variant="warning" appearance="filled">Warning</wa-button>
|
||||
<wa-button variant="danger" appearance="filled">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" class="wa-filled">Brand</wa-button>
|
||||
<wa-button variant="neutral" class="wa-filled">Neutral</wa-button>
|
||||
<wa-button variant="success" class="wa-filled">Success</wa-button>
|
||||
<wa-button variant="warning" class="wa-filled">Warning</wa-button>
|
||||
<wa-button variant="danger" class="wa-filled">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" appearance="outlined">Brand</wa-button>
|
||||
<wa-button variant="neutral" appearance="outlined">Neutral</wa-button>
|
||||
<wa-button variant="success" appearance="outlined">Success</wa-button>
|
||||
<wa-button variant="warning" appearance="outlined">Warning</wa-button>
|
||||
<wa-button variant="danger" appearance="outlined">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" class="wa-outlined">Brand</wa-button>
|
||||
<wa-button variant="neutral" class="wa-outlined">Neutral</wa-button>
|
||||
<wa-button variant="success" class="wa-outlined">Success</wa-button>
|
||||
<wa-button variant="warning" class="wa-outlined">Warning</wa-button>
|
||||
<wa-button variant="danger" class="wa-outlined">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>plain</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" appearance="plain">Brand</wa-button>
|
||||
<wa-button variant="neutral" appearance="plain">Neutral</wa-button>
|
||||
<wa-button variant="success" appearance="plain">Success</wa-button>
|
||||
<wa-button variant="warning" appearance="plain">Warning</wa-button>
|
||||
<wa-button variant="danger" appearance="plain">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" class="wa-plain">Brand</wa-button>
|
||||
<wa-button variant="neutral" class="wa-plain">Neutral</wa-button>
|
||||
<wa-button variant="success" class="wa-plain">Success</wa-button>
|
||||
<wa-button variant="warning" class="wa-plain">Warning</wa-button>
|
||||
<wa-button variant="danger" class="wa-plain">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Callout</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>appearance=""</code></th>
|
||||
<th><code>.wa-[appearance]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>accent</code> + <code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" class="wa-accent wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" class="wa-accent wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" class="wa-accent wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" class="wa-accent wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" class="wa-accent wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>accent</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" class="wa-accent">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" class="wa-accent">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" class="wa-accent">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" class="wa-accent">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" class="wa-accent">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>filled</code> + <code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" class="wa-filled wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" class="wa-filled wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" class="wa-filled wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" class="wa-filled wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" class="wa-filled wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>filled</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" class="wa-filled">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" class="wa-filled">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" class="wa-filled">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" class="wa-filled">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" class="wa-filled">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="test-failure"><code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" class="wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" class="wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" class="wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" class="wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" class="wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>plain</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" class="wa-plain">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" class="wa-plain">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" class="wa-plain">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" class="wa-plain">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" class="wa-plain">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Tag</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>appearance=""</code></th>
|
||||
<th><code>.wa-[appearance]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>accent</code> + <code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" appearance="accent outlined">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="accent outlined">Neutral</wa-tag>
|
||||
<wa-tag variant="success" appearance="accent outlined">Success</wa-tag>
|
||||
<wa-tag variant="warning" appearance="accent outlined">Warning</wa-tag>
|
||||
<wa-tag variant="danger" appearance="accent outlined">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" class="wa-accent wa-outlined">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" class="wa-accent wa-outlined">Neutral</wa-tag>
|
||||
<wa-tag variant="success" class="wa-accent wa-outlined">Success</wa-tag>
|
||||
<wa-tag variant="warning" class="wa-accent wa-outlined">Warning</wa-tag>
|
||||
<wa-tag variant="danger" class="wa-accent wa-outlined">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>accent</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" appearance="accent">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="accent">Neutral</wa-tag>
|
||||
<wa-tag variant="success" appearance="accent">Success</wa-tag>
|
||||
<wa-tag variant="warning" appearance="accent">Warning</wa-tag>
|
||||
<wa-tag variant="danger" appearance="accent">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" class="wa-accent">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" class="wa-accent">Neutral</wa-tag>
|
||||
<wa-tag variant="success" class="wa-accent">Success</wa-tag>
|
||||
<wa-tag variant="warning" class="wa-accent">Warning</wa-tag>
|
||||
<wa-tag variant="danger" class="wa-accent">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>filled</code> + <code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" appearance="filled outlined">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="filled outlined">Neutral</wa-tag>
|
||||
<wa-tag variant="success" appearance="filled outlined">Success</wa-tag>
|
||||
<wa-tag variant="warning" appearance="filled outlined">Warning</wa-tag>
|
||||
<wa-tag variant="danger" appearance="filled outlined">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" class="wa-filled wa-outlined">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" class="wa-filled wa-outlined">Neutral</wa-tag>
|
||||
<wa-tag variant="success" class="wa-filled wa-outlined">Success</wa-tag>
|
||||
<wa-tag variant="warning" class="wa-filled wa-outlined">Warning</wa-tag>
|
||||
<wa-tag variant="danger" class="wa-filled wa-outlined">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>filled</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" appearance="filled">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="filled">Neutral</wa-tag>
|
||||
<wa-tag variant="success" appearance="filled">Success</wa-tag>
|
||||
<wa-tag variant="warning" appearance="filled">Warning</wa-tag>
|
||||
<wa-tag variant="danger" appearance="filled">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" class="wa-filled">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" class="wa-filled">Neutral</wa-tag>
|
||||
<wa-tag variant="success" class="wa-filled">Success</wa-tag>
|
||||
<wa-tag variant="warning" class="wa-filled">Warning</wa-tag>
|
||||
<wa-tag variant="danger" class="wa-filled">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="test-failure"><code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" appearance="outlined">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="outlined">Neutral</wa-tag>
|
||||
<wa-tag variant="success" appearance="outlined">Success</wa-tag>
|
||||
<wa-tag variant="warning" appearance="outlined">Warning</wa-tag>
|
||||
<wa-tag variant="danger" appearance="outlined">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" class="wa-outlined">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" class="wa-outlined">Neutral</wa-tag>
|
||||
<wa-tag variant="success" class="wa-outlined">Success</wa-tag>
|
||||
<wa-tag variant="warning" class="wa-outlined">Warning</wa-tag>
|
||||
<wa-tag variant="danger" class="wa-outlined">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>plain</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" appearance="plain">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="plain">Neutral</wa-tag>
|
||||
<wa-tag variant="success" appearance="plain">Success</wa-tag>
|
||||
<wa-tag variant="warning" appearance="plain">Warning</wa-tag>
|
||||
<wa-tag variant="danger" appearance="plain">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" class="wa-plain">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" class="wa-plain">Neutral</wa-tag>
|
||||
<wa-tag variant="success" class="wa-plain">Success</wa-tag>
|
||||
<wa-tag variant="warning" class="wa-plain">Warning</wa-tag>
|
||||
<wa-tag variant="danger" class="wa-plain">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Form Controls</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>appearance=""</code></th>
|
||||
<th><code>.wa-[appearance]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-stack">
|
||||
<wa-input appearance="outlined" placeholder="Input"></wa-input>
|
||||
<wa-select appearance="outlined" placeholder="Select">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
<wa-textarea appearance="outlined" placeholder="Textarea"></wa-textarea>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-stack">
|
||||
<wa-input class="wa-outlined" placeholder="Input"></wa-input>
|
||||
<wa-select class="wa-outlined" placeholder="Select">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
<wa-textarea class="wa-outlined" placeholder="Textarea"></wa-textarea>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>filled</code></th>
|
||||
<td>
|
||||
<div class="wa-stack">
|
||||
<wa-input appearance="filled" placeholder="Input"></wa-input>
|
||||
<wa-select appearance="filled" placeholder="Select">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
<wa-textarea appearance="filled" placeholder="Textarea"></wa-textarea>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-stack">
|
||||
<wa-input class="wa-filled" placeholder="Input"></wa-input>
|
||||
<wa-select class="wa-filled" placeholder="Select">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
<wa-textarea class="wa-filled" placeholder="Textarea"></wa-textarea>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
698
docs/_includes/visual-tests/color.njk
Normal file
698
docs/_includes/visual-tests/color.njk
Normal file
@@ -0,0 +1,698 @@
|
||||
<h3>Badge</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>variant=""</code></th>
|
||||
<th><code>.wa-[variant]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>brand</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge variant="brand" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge variant="brand" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge variant="brand" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge variant="brand" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge variant="brand" appearance="plain">Plain</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge class="wa-brand" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge class="wa-brand" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge class="wa-brand" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge class="wa-brand" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge class="wa-brand" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge class="wa-brand" appearance="plain">Plain</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>neutral</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="neutral" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="plain">Plain</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge class="wa-neutral" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge class="wa-neutral" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge class="wa-neutral" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge class="wa-neutral" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge class="wa-neutral" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge class="wa-neutral" appearance="plain">Plain</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>success</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="success" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge variant="success" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge variant="success" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge variant="success" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge variant="success" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge variant="success" appearance="plain">Plain</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge class="wa-success" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge class="wa-success" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge class="wa-success" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge class="wa-success" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge class="wa-success" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge class="wa-success" appearance="plain">Plain</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>warning</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="warning" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge variant="warning" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge variant="warning" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge variant="warning" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge variant="warning" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge variant="warning" appearance="plain">Plain</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge class="wa-warning" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge class="wa-warning" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge class="wa-warning" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge class="wa-warning" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge class="wa-warning" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge class="wa-warning" appearance="plain">Plain</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>danger</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="danger" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge variant="danger" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge variant="danger" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge variant="danger" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge variant="danger" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge variant="danger" appearance="plain">Plain</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge class="wa-danger" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge class="wa-danger" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge class="wa-danger" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge class="wa-danger" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge class="wa-danger" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge class="wa-danger" appearance="plain">Plain</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Button</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>variant=""</code></th>
|
||||
<th><code>.wa-[variant]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>brand</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button variant="brand" appearance="accent">Accent</wa-button>
|
||||
<wa-button variant="brand" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button variant="brand" appearance="filled">Filled</wa-button>
|
||||
<wa-button variant="brand" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button variant="brand" appearance="plain">Plain</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button class="wa-brand" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button class="wa-brand" appearance="accent">Accent</wa-button>
|
||||
<wa-button class="wa-brand" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button class="wa-brand" appearance="filled">Filled</wa-button>
|
||||
<wa-button class="wa-brand" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button class="wa-brand" appearance="plain">Plain</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>neutral</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="neutral" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button variant="neutral" appearance="accent">Accent</wa-button>
|
||||
<wa-button variant="neutral" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button variant="neutral" appearance="filled">Filled</wa-button>
|
||||
<wa-button variant="neutral" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button variant="neutral" appearance="plain">Plain</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button class="wa-neutral" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button class="wa-neutral" appearance="accent">Accent</wa-button>
|
||||
<wa-button class="wa-neutral" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button class="wa-neutral" appearance="filled">Filled</wa-button>
|
||||
<wa-button class="wa-neutral" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button class="wa-neutral" appearance="plain">Plain</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>success</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="success" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button variant="success" appearance="accent">Accent</wa-button>
|
||||
<wa-button variant="success" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button variant="success" appearance="filled">Filled</wa-button>
|
||||
<wa-button variant="success" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button variant="success" appearance="plain">Plain</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button class="wa-success" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button class="wa-success" appearance="accent">Accent</wa-button>
|
||||
<wa-button class="wa-success" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button class="wa-success" appearance="filled">Filled</wa-button>
|
||||
<wa-button class="wa-success" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button class="wa-success" appearance="plain">Plain</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>warning</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="warning" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button variant="warning" appearance="accent">Accent</wa-button>
|
||||
<wa-button variant="warning" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button variant="warning" appearance="filled">Filled</wa-button>
|
||||
<wa-button variant="warning" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button variant="warning" appearance="plain">Plain</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button class="wa-warning" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button class="wa-warning" appearance="accent">Accent</wa-button>
|
||||
<wa-button class="wa-warning" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button class="wa-warning" appearance="filled">Filled</wa-button>
|
||||
<wa-button class="wa-warning" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button class="wa-warning" appearance="plain">Plain</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>danger</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="danger" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button variant="danger" appearance="accent">Accent</wa-button>
|
||||
<wa-button variant="danger" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button variant="danger" appearance="filled">Filled</wa-button>
|
||||
<wa-button variant="danger" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button variant="danger" appearance="plain">Plain</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button class="wa-danger" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button class="wa-danger" appearance="accent">Accent</wa-button>
|
||||
<wa-button class="wa-danger" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button class="wa-danger" appearance="filled">Filled</wa-button>
|
||||
<wa-button class="wa-danger" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button class="wa-danger" appearance="plain">Plain</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Callout</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>variant=""</code></th>
|
||||
<th><code>.wa-[variant]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>brand</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="brand" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout variant="brand" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="brand" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Filled
|
||||
</wa-callout>
|
||||
<wa-callout variant="brand" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Outlined
|
||||
</wa-callout>
|
||||
<wa-callout variant="brand" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Plain
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout class="wa-brand" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-brand" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-brand" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-brand" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Filled
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-brand" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Outlined
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-brand" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Plain
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>neutral</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="neutral" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Filled
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Outlined
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Plain
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout class="wa-neutral" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-neutral" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-neutral" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-neutral" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Filled
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-neutral" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Outlined
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-neutral" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Plain
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>success</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="success" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Filled
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Outlined
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Plain
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout class="wa-success" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-success" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-success" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-success" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Filled
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-success" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Outlined
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-success" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Plain
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>warning</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="warning" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Filled
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Outlined
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Plain
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout class="wa-warning" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-warning" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-warning" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-warning" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Filled
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-warning" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Outlined
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-warning" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Plain
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>danger</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="danger" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Filled
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Outlined
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Plain
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout class="wa-danger" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-danger" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-danger" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-danger" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Filled
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-danger" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Outlined
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-danger" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Plain
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Tag</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>variant=""</code></th>
|
||||
<th><code>.wa-[variant]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>brand</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag variant="brand" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag variant="brand" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag variant="brand" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag variant="brand" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag variant="brand" appearance="plain">Plain</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag class="wa-brand" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag class="wa-brand" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag class="wa-brand" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag class="wa-brand" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag class="wa-brand" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag class="wa-brand" appearance="plain">Plain</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>neutral</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="neutral" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="plain">Plain</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag class="wa-neutral" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag class="wa-neutral" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag class="wa-neutral" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag class="wa-neutral" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag class="wa-neutral" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag class="wa-neutral" appearance="plain">Plain</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>success</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="success" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag variant="success" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag variant="success" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag variant="success" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag variant="success" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag variant="success" appearance="plain">Plain</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag class="wa-success" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag class="wa-success" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag class="wa-success" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag class="wa-success" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag class="wa-success" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag class="wa-success" appearance="plain">Plain</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>warning</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="warning" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag variant="warning" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag variant="warning" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag variant="warning" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag variant="warning" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag variant="warning" appearance="plain">Plain</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag class="wa-warning" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag class="wa-warning" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag class="wa-warning" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag class="wa-warning" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag class="wa-warning" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag class="wa-warning" appearance="plain">Plain</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>danger</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="danger" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag variant="danger" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag variant="danger" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag variant="danger" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag variant="danger" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag variant="danger" appearance="plain">Plain</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag class="wa-danger" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag class="wa-danger" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag class="wa-danger" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag class="wa-danger" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag class="wa-danger" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag class="wa-danger" appearance="plain">Plain</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
32
docs/_includes/visual-tests/harmony.njk
Normal file
32
docs/_includes/visual-tests/harmony.njk
Normal file
@@ -0,0 +1,32 @@
|
||||
<h3>Form Controls</h3>
|
||||
|
||||
```html {.example}
|
||||
<form class="wa-stack">
|
||||
<wa-input label="Input" placeholder="Placeholder"></wa-input>
|
||||
<wa-select label="Select" value="option-1">
|
||||
<wa-option value="option-1">Option 1</wa-option>
|
||||
<wa-option value="option-2">Option 2</wa-option>
|
||||
<wa-option value="option-3">Option 3</wa-option>
|
||||
</wa-select>
|
||||
<wa-textarea label="Textarea" placeholder="Placeholder"></wa-textarea>
|
||||
<wa-radio-group label="Radio group" name="a" value="1">
|
||||
<wa-radio value="1">Option 1</wa-radio>
|
||||
<wa-radio value="2">Option 2</wa-radio>
|
||||
<wa-radio value="3">Option 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
<wa-checkbox>Checkbox</wa-checkbox>
|
||||
<wa-switch>Switch</wa-switch>
|
||||
<wa-slider label="Range"></wa-slider>
|
||||
<wa-button>Button</wa-button>
|
||||
</form>
|
||||
```
|
||||
|
||||
<h3>Progress</h3>
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<wa-progress-bar value="50" max="100"></wa-progress-bar>
|
||||
<wa-progress-ring value="50" max="100"></wa-progress-ring>
|
||||
<wa-spinner></wa-spinner>
|
||||
</div>
|
||||
```
|
||||
745
docs/_includes/visual-tests/native.njk
Normal file
745
docs/_includes/visual-tests/native.njk
Normal file
@@ -0,0 +1,745 @@
|
||||
<h3>Button</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code><wa-button></code></th>
|
||||
<th><code><button></code></th>
|
||||
<th><code>.wa-button</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><em>default</em></th>
|
||||
<td>
|
||||
<wa-button>Button</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button>Button</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button">Button</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-brand</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-brand">Brand</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-brand">Brand</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-brand">Brand</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-neutral</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-neutral">Neutral</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-neutral">Neutral</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-neutral">Neutral</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-success</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-success">Success</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-success">Success</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-success">Success</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-warning</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-warning">Warning</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-warning">Warning</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-warning">Warning</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-danger</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-danger">Danger</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-danger">Danger</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-danger">Danger</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-accent</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-accent">Accent</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-accent">Accent</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-accent">Accent</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-filled</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-filled">Filled</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-filled">Filled</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-filled">Filled</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-outlined</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-outlined">Outlined</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-outlined">Outlined</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-outlined">Outlined</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-plain</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-plain">Plain</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-plain">Plain</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-plain">Plain</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-s</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-size-s">Small</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-size-s">Small</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-size-s">Small</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-m</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-size-m">Medium</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-size-m">Medium</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-size-m">Medium</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-l</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-size-l">Large</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-size-l">Large</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-size-l">Large</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-pill</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-pill">Pill</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-pill">Pill</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-pill">Pill</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Callout</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code><wa-callout></code></th>
|
||||
<th><code>.wa-callout</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="test-failure"><em>default</em></th>
|
||||
<td>
|
||||
<wa-callout>Callout</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout">Callout</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-brand</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-brand">Brand</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-brand">Brand</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-neutral</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-neutral">Neutral</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-neutral">Neutral</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-success</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-success">Success</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-success">Success</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-warning</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-warning">Warning</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-warning">Warning</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-danger</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-danger">Danger</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-danger">Danger</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-accent</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-accent">Accent</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-accent">Accent</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-filled</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-filled">Filled</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-filled">Filled</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-outlined</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-outlined">Outlined</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-outlined">Outlined</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-plain</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-plain">Plain</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-plain">Plain</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-s</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-size-s">Small</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-size-s">Small</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-m</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-size-m">Medium</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-size-m">Medium</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-l</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-size-l">Large</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-size-l">Large</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-pill</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-pill">Pill</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-pill">Pill</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Checkbox</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code><wa-checkbox></code></th>
|
||||
<th><code><input type="checkbox"></code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><em>default</em></th>
|
||||
<td>
|
||||
<wa-checkbox>Checkbox</wa-checkbox>
|
||||
</td>
|
||||
<td>
|
||||
<label><input type="checkbox"></input> Checkbox</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>checked</code></th>
|
||||
<td>
|
||||
<wa-checkbox checked>Checkbox</wa-checkbox>
|
||||
</td>
|
||||
<td>
|
||||
<label><input type="checkbox" checked></input> Checkbox</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Color Picker</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code><wa-color-picker></code></th>
|
||||
<th><code><input type="color"></code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><em>default</em></th>
|
||||
<td>
|
||||
<wa-color-picker label="Color Picker" value="#ffa07a"></wa-color-picker>
|
||||
</td>
|
||||
<td>
|
||||
<label>Color Picker <input type="color" value="#ffa07a"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Details</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code><wa-details></code></th>
|
||||
<th><code><details></code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><em>default</em></th>
|
||||
<td>
|
||||
<wa-details summary="Summary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</wa-details>
|
||||
</td>
|
||||
<td>
|
||||
<details>
|
||||
<summary>Summary</summary>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||||
</details>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>dir="rtl"</code></th>
|
||||
<td>
|
||||
<wa-details summary="تبديلني" lang="ar" dir="rtl">
|
||||
استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
|
||||
</wa-details>
|
||||
</td>
|
||||
<td>
|
||||
<details lang="ar" dir="rtl">
|
||||
<summary>تبديلني</summary>
|
||||
<p>استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن</p>
|
||||
</details>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3 class="test-failure">Input</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code><wa-input></code></th>
|
||||
<th><code><input></code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><em>default</em></th>
|
||||
<td>
|
||||
<wa-input label="Input" placeholder="Placeholder"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label>Input <input type="text" placeholder="Placeholder"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>type="password"</code></th>
|
||||
<td>
|
||||
<wa-input label="Input (password)" type="password"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label>Input (password) <input type="password"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>type="date"</code></th>
|
||||
<td>
|
||||
<wa-input label="Input (date)" type="date"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label>Input (date) <input type="date"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>type="time"</code></th>
|
||||
<td>
|
||||
<wa-input label="Input (time)" type="time"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label>Input (time) <input type="time"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-filled</code></th>
|
||||
<td>
|
||||
<wa-input label="Input (filled)" placeholder="Placeholder" class="wa-filled"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label>Input (filled) <input type="text" placeholder="Placeholder" class="wa-filled"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-s</code></th>
|
||||
<td>
|
||||
<wa-input label="Input (small)" placeholder="Placeholder" class="wa-size-s"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-s">Input (small) <input type="text" placeholder="Placeholder"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-m</code></th>
|
||||
<td>
|
||||
<wa-input label="Input (medium)" placeholder="Placeholder" class="wa-size-m"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-m">Input (medium) <input type="text" placeholder="Placeholder"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-l</code></th>
|
||||
<td>
|
||||
<wa-input label="Input (large)" placeholder="Placeholder" class="wa-size-l"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-l">Input (large) <input type="text" placeholder="Placeholder"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Progress Bar</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code><wa-progress-bar></code></th>
|
||||
<th><code><progress></code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><em>default</em></th>
|
||||
<td>
|
||||
<wa-progress-bar value="50" max="100"></wa-progress-bar>
|
||||
</td>
|
||||
<td>
|
||||
<progress value="50" max="100"></progress>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Radio</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code><wa-radio></code></th>
|
||||
<th><code><input type="radio"></code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><em>default</em></th>
|
||||
<td>
|
||||
<wa-radio>Radio</wa-radio>
|
||||
</td>
|
||||
<td>
|
||||
<label><input type="radio"></input> Radio</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>checked</code></th>
|
||||
<td>
|
||||
<wa-radio-group value="1">
|
||||
<wa-radio value="1">Radio</wa-radio>
|
||||
</wa-radio-group>
|
||||
</td>
|
||||
<td>
|
||||
<label><input type="radio" checked></input> Radio</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Select</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code><wa-select></code></th>
|
||||
<th><code><select></code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><em>default</em></th>
|
||||
<td>
|
||||
<wa-select label="Select" value="1">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
<td>
|
||||
<label>Select
|
||||
<select value="1">
|
||||
<option value="1">Option</option>
|
||||
</select>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-filled</code></th>
|
||||
<td>
|
||||
<wa-select label="Select (filled)" value="1" class="wa-filled">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-filled">Select (filled)
|
||||
<select value="1">
|
||||
<option value="1">Option</option>
|
||||
</select>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-s</code></th>
|
||||
<td>
|
||||
<wa-select label="Select (small)" value="1" class="wa-size-s">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-s">Select (small)
|
||||
<select value="1">
|
||||
<option value="1">Option</option>
|
||||
</select>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-m</code></th>
|
||||
<td>
|
||||
<wa-select label="Select (medium)" value="1" class="wa-size-m">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-m">Select (medium)
|
||||
<select value="1">
|
||||
<option value="1">Option</option>
|
||||
</select>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-l</code></th>
|
||||
<td>
|
||||
<wa-select label="Select (large)" value="1" class="wa-size-l">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-l">Select (large)
|
||||
<select value="1">
|
||||
<option value="1">Option</option>
|
||||
</select>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3 class="test-failure">Slider</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code><wa-slider></code></th>
|
||||
<th><code><input type="range"></code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><em>default</em></th>
|
||||
<td>
|
||||
<wa-slider label="Slider"></wa-slider>
|
||||
</td>
|
||||
<td>
|
||||
<label>Slider <input type="range"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3 class="test-failure">Textarea</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code><wa-textarea></code></th>
|
||||
<th><code><textarea></code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><em>default</em></th>
|
||||
<td>
|
||||
<wa-textarea label="Textarea" placeholder="Placeholder" rows="2"></wa-textarea>
|
||||
</td>
|
||||
<td>
|
||||
<label>Textarea <textarea placeholder="Placeholder" rows="2"></textarea></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-filled</code></th>
|
||||
<td>
|
||||
<wa-textarea label="Textarea (filled)" placeholder="Placeholder" class="wa-filled" rows="2"></wa-textarea>
|
||||
</td>
|
||||
<td>
|
||||
<label>Textarea (filled) <textarea placeholder="Placeholder" class="wa-filled" rows="2"></textarea></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-s</code></th>
|
||||
<td>
|
||||
<wa-textarea label="Textarea (small)" placeholder="Placeholder" class="wa-size-s" rows="2"></wa-textarea>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-s">Textarea (small) <textarea placeholder="Placeholder" rows="2"></textarea></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-m</code></th>
|
||||
<td>
|
||||
<wa-textarea label="Textarea (medium)" placeholder="Placeholder" class="wa-size-m" rows="2"></wa-textarea>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-m">Textarea (medium) <textarea placeholder="Placeholder" rows="2"></textarea></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-l</code></th>
|
||||
<td>
|
||||
<wa-textarea label="Textarea (large)" placeholder="Placeholder" class="wa-size-l" rows="2"></wa-textarea>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-l">Textarea (large) <textarea placeholder="Placeholder" rows="2"></textarea></label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
856
docs/_includes/visual-tests/size.njk
Normal file
856
docs/_includes/visual-tests/size.njk
Normal file
@@ -0,0 +1,856 @@
|
||||
<h3>Button</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-button size="small">Button</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<wa-button class="wa-size-s">Button</wa-button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-button size="medium">Button</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<wa-button class="wa-size-m">Button</wa-button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-button size="large">Button</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<wa-button class="wa-size-l">Button</wa-button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Button Group</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-button-group orientation="horizontal" size="small">
|
||||
<wa-button value="1">Button L</wa-button>
|
||||
<wa-button value="2">Button R</wa-button>
|
||||
</wa-button-group>
|
||||
</td>
|
||||
<td>
|
||||
<wa-button-group orientation="horizontal" class="wa-size-s">
|
||||
<wa-button value="1">Button L</wa-button>
|
||||
<wa-button value="2">Button R</wa-button>
|
||||
</wa-button-group>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-button-group orientation="horizontal" size="medium">
|
||||
<wa-button value="1">Button L</wa-button>
|
||||
<wa-button value="2">Button R</wa-button>
|
||||
</wa-button-group>
|
||||
</td>
|
||||
<td>
|
||||
<wa-button-group orientation="horizontal" class="wa-size-m">
|
||||
<wa-button value="1">Button L</wa-button>
|
||||
<wa-button value="2">Button R</wa-button>
|
||||
</wa-button-group>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-button-group orientation="horizontal" size="large">
|
||||
<wa-button value="1">Button L</wa-button>
|
||||
<wa-button value="2">Button R</wa-button>
|
||||
</wa-button-group>
|
||||
</td>
|
||||
<td>
|
||||
<wa-button-group orientation="horizontal" class="wa-size-l">
|
||||
<wa-button value="1">Button L</wa-button>
|
||||
<wa-button value="2">Button R</wa-button>
|
||||
</wa-button-group>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Callout</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-callout size="small">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Callout
|
||||
</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<wa-callout class="wa-size-s">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Callout
|
||||
</wa-callout>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-callout size="medium">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Callout
|
||||
</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<wa-callout class="wa-size-m">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Callout
|
||||
</wa-callout>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-callout size="large">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Callout
|
||||
</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<wa-callout class="wa-size-l">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Callout
|
||||
</wa-callout>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Card</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-card size="small">
|
||||
Card
|
||||
</wa-card>
|
||||
</td>
|
||||
<td>
|
||||
<wa-card class="wa-size-s">
|
||||
Card
|
||||
</wa-card>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-card size="medium">
|
||||
Card
|
||||
</wa-card>
|
||||
</td>
|
||||
<td>
|
||||
<wa-card class="wa-size-m">
|
||||
Card
|
||||
</wa-card>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-card size="large">
|
||||
Card
|
||||
</wa-card>
|
||||
</td>
|
||||
<td>
|
||||
<wa-card class="wa-size-l">
|
||||
Card
|
||||
</wa-card>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Checkbox</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-checkbox hint="Hint" size="small">Checkbox</wa-checkbox>
|
||||
</td>
|
||||
<td>
|
||||
<wa-checkbox hint="Hint" class="wa-size-s">Checkbox</wa-checkbox>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-checkbox hint="Hint" size="medium">Checkbox</wa-checkbox>
|
||||
</td>
|
||||
<td>
|
||||
<wa-checkbox hint="Hint" class="wa-size-m">Checkbox</wa-checkbox>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-checkbox hint="Hint" size="large">Checkbox</wa-checkbox>
|
||||
</td>
|
||||
<td>
|
||||
<wa-checkbox hint="Hint" class="wa-size-l">Checkbox</wa-checkbox>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Color Picker</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-color-picker size="small" label="Color Picker" hint="Hint"></wa-color-picker>
|
||||
</td>
|
||||
<td>
|
||||
<wa-color-picker class="wa-size-s" label="Color Picker" hint="Hint"></wa-color-picker>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-color-picker size="medium" label="Color Picker" hint="Hint"></wa-color-picker>
|
||||
</td>
|
||||
<td>
|
||||
<wa-color-picker class="wa-size-m" label="Color Picker" hint="Hint"></wa-color-picker>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-color-picker size="large" label="Color Picker" hint="Hint"></wa-color-picker>
|
||||
</td>
|
||||
<td>
|
||||
<wa-color-picker class="wa-size-l" label="Color Picker" hint="Hint"></wa-color-picker>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Dropdown</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-dropdown size="small">
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
</td>
|
||||
<td>
|
||||
<wa-dropdown class="wa-size-s">
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-dropdown size="medium">
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
</td>
|
||||
<td>
|
||||
<wa-dropdown class="wa-size-m">
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-dropdown size="large">
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
</td>
|
||||
<td>
|
||||
<wa-dropdown class="wa-size-l">
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Menu</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-menu size="small">
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</td>
|
||||
<td>
|
||||
<wa-menu class="wa-size-s">
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-menu size="medium">
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</td>
|
||||
<td>
|
||||
<wa-menu class="wa-size-m">
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-menu size="large">
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</td>
|
||||
<td>
|
||||
<wa-menu class="wa-size-l">
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Input</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-input size="small" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<wa-input class="wa-size-s" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-input size="medium" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<wa-input class="wa-size-m" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-input size="large" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<wa-input class="wa-size-l" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Radio</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-radio size="small">Radio</wa-radio>
|
||||
</td>
|
||||
<td>
|
||||
<wa-radio class="wa-size-s">Radio</wa-radio>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-radio size="medium">Radio</wa-radio>
|
||||
</td>
|
||||
<td>
|
||||
<wa-radio class="wa-size-m">Radio</wa-radio>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-radio size="large">Radio</wa-radio>
|
||||
</td>
|
||||
<td>
|
||||
<wa-radio class="wa-size-l">Radio</wa-radio>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Radio Button</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-radio-group orientation="horizontal">
|
||||
<wa-radio-button size="small" value="1">Radio</wa-radio-button>
|
||||
<wa-radio-button size="small" value="2">Button</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</td>
|
||||
<td>
|
||||
<wa-radio-group orientation="horizontal">
|
||||
<wa-radio-button class="wa-size-s" value="1">Radio</wa-radio-button>
|
||||
<wa-radio-button class="wa-size-s" value="2">Button</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-radio-group orientation="horizontal">
|
||||
<wa-radio-button size="medium" value="1">Radio</wa-radio-button>
|
||||
<wa-radio-button size="medium" value="2">Button</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</td>
|
||||
<td>
|
||||
<wa-radio-group orientation="horizontal">
|
||||
<wa-radio-button class="wa-size-m" value="1">Radio</wa-radio-button>
|
||||
<wa-radio-button class="wa-size-m" value="2">Button</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-radio-group orientation="horizontal">
|
||||
<wa-radio-button size="large" value="1">Radio</wa-radio-button>
|
||||
<wa-radio-button size="large" value="2">Button</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</td>
|
||||
<td>
|
||||
<wa-radio-group orientation="horizontal">
|
||||
<wa-radio-button class="wa-size-l" value="1">Radio</wa-radio-button>
|
||||
<wa-radio-button class="wa-size-l" value="2">Button</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Radio Group</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<div class="wa-stack">
|
||||
<wa-radio-group label="Radio Group" hint="Hint" size="small">
|
||||
<wa-radio value="1">Radio 1</wa-radio>
|
||||
<wa-radio value="2">Radio 2</wa-radio>
|
||||
</wa-radio-group>
|
||||
<wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" size="small">
|
||||
<wa-radio-button value="1">Radio 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Radio 2</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-stack">
|
||||
<wa-radio-group label="Radio Group" hint="Hint" class="wa-size-s">
|
||||
<wa-radio value="1">Radio 1</wa-radio>
|
||||
<wa-radio value="2">Radio 2</wa-radio>
|
||||
</wa-radio-group>
|
||||
<wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" class="wa-size-s">
|
||||
<wa-radio-button value="1">Radio 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Radio 2</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<div class="wa-stack">
|
||||
<wa-radio-group label="Radio Group" hint="Hint" size="medium">
|
||||
<wa-radio value="1">Radio 1</wa-radio>
|
||||
<wa-radio value="2">Radio 2</wa-radio>
|
||||
</wa-radio-group>
|
||||
<wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" size="medium">
|
||||
<wa-radio-button value="1">Radio 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Radio 2</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-stack">
|
||||
<wa-radio-group label="Radio Group" hint="Hint" class="wa-size-m">
|
||||
<wa-radio value="1">Radio 1</wa-radio>
|
||||
<wa-radio value="2">Radio 2</wa-radio>
|
||||
</wa-radio-group>
|
||||
<wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" class="wa-size-m">
|
||||
<wa-radio-button value="1">Radio 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Radio 2</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<div class="wa-stack">
|
||||
<wa-radio-group label="Radio Group" hint="Hint" size="large">
|
||||
<wa-radio value="1">Radio 1</wa-radio>
|
||||
<wa-radio value="2">Radio 2</wa-radio>
|
||||
</wa-radio-group>
|
||||
<wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" size="large">
|
||||
<wa-radio-button value="1">Radio 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Radio 2</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-stack">
|
||||
<wa-radio-group label="Radio Group" hint="Hint" class="wa-size-l">
|
||||
<wa-radio value="1">Radio 1</wa-radio>
|
||||
<wa-radio value="2">Radio 2</wa-radio>
|
||||
</wa-radio-group>
|
||||
<wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" class="wa-size-l">
|
||||
<wa-radio-button value="1">Radio 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Radio 2</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Rating</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-rating size="small"></wa-rating>
|
||||
</td>
|
||||
<td>
|
||||
<wa-rating class="wa-size-s"></wa-rating>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-rating size="medium"></wa-rating>
|
||||
</td>
|
||||
<td>
|
||||
<wa-rating class="wa-size-m"></wa-rating>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-rating size="large"></wa-rating>
|
||||
</td>
|
||||
<td>
|
||||
<wa-rating class="wa-size-l"></wa-rating>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Select</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-select size="small" label="Select" placeholder="Placeholder" hint="Hint">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
<td>
|
||||
<wa-select class="wa-size-s" label="Select" placeholder="Placeholder" hint="Hint">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-select size="medium" label="Select" placeholder="Placeholder" hint="Hint">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
<td>
|
||||
<wa-select class="wa-size-m" label="Select" placeholder="Placeholder" hint="Hint">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-select size="large" label="Select" placeholder="Placeholder" hint="Hint">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
<td>
|
||||
<wa-select class="wa-size-l" label="Select" placeholder="Placeholder" hint="Hint">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Switch</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-switch hint="Hint" size="small">Switch</wa-switch>
|
||||
</td>
|
||||
<td>
|
||||
<wa-switch hint="Hint" class="wa-size-s">Switch</wa-switch>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-switch hint="Hint" size="medium">Switch</wa-switch>
|
||||
</td>
|
||||
<td>
|
||||
<wa-switch hint="Hint" class="wa-size-m">Switch</wa-switch>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-switch hint="Hint" size="large">Switch</wa-switch>
|
||||
</td>
|
||||
<td>
|
||||
<wa-switch hint="Hint" class="wa-size-l">Switch</wa-switch>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Textarea</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-textarea size="small" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
|
||||
</td>
|
||||
<td>
|
||||
<wa-textarea class="wa-size-s" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-textarea size="medium" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
|
||||
</td>
|
||||
<td>
|
||||
<wa-textarea class="wa-size-m" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-textarea size="large" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
|
||||
</td>
|
||||
<td>
|
||||
<wa-textarea class="wa-size-l" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -255,7 +255,7 @@
|
||||
{# Importing #}
|
||||
<h2>Importing</h2>
|
||||
<p>
|
||||
The <a href="/docs/#autoloading">autoloader</a> is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
|
||||
The <a href="/docs/installation/#quick-start-autoloading-via-cdn">autoloader</a> is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
|
||||
</p>
|
||||
|
||||
<wa-tab-group label="How would you like to import this component?">
|
||||
|
||||
@@ -14,11 +14,19 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block afterContent %}
|
||||
{# Slots #}
|
||||
{% if css_file %}
|
||||
<h2>Using these styles</h2>
|
||||
<p>If you want to use these styles without using the entirety of Web Awesome Native Styles, you can include the following CSS files:</p>
|
||||
{% if file %}
|
||||
{% markdown %}
|
||||
## Opting In to Native {{ title }} Styles
|
||||
|
||||
If you want to use the Native {{ title }} styles **without including the entirety of Web Awesome Native Styles**,
|
||||
you can include the following CSS files from the Web Awesome CDN.
|
||||
|
||||
{% set stylesheet = file %}
|
||||
{% include 'import-stylesheet-code.md.njk' %}
|
||||
|
||||
To use all of Web Awesome Native styles, follow the [instructions on the Native Styles overview page](../).
|
||||
|
||||
{% endmarkdown %}
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -20,6 +20,6 @@ tags: ["overview"]
|
||||
<script type="module" src="/assets/scripts/filter.js"></script>
|
||||
|
||||
{% if content | trim %}
|
||||
<br> {# Temp fix for spacing issue #}
|
||||
<wa-divider style="--spacing: var(--wa-space-3xl)"></wa-divider> {# Temp fix for spacing issue #}
|
||||
{{ content | safe }}
|
||||
{% endif %}
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
|
||||
</p>
|
||||
<script>
|
||||
document.querySelector('#mix_and_match').addEventListener('wa-change', function(event) {
|
||||
document.querySelector('#mix_and_match').addEventListener('change', function(event) {
|
||||
let selects = document.querySelectorAll('#mix_and_match wa-select');
|
||||
let url = new URL(demo.src);
|
||||
|
||||
@@ -138,6 +138,7 @@ You can apply the class to the `<html>` element on your page to activate the dar
|
||||
Web Awesome's themes have both light and dark styles built in.
|
||||
However, Web Awesome doesn't try to auto-detect the user's light/dark mode preference.
|
||||
This should be done at the application level.
|
||||
|
||||
As a best practice, to provide a dark theme in your app, you should:
|
||||
|
||||
- Check for [`prefers-color-scheme`](https://stackoverflow.com/a/57795495/567486) and use its value by default
|
||||
@@ -146,5 +147,18 @@ As a best practice, to provide a dark theme in your app, you should:
|
||||
|
||||
Web Awesome avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
|
||||
|
||||
Assuming the user's preference is in a variable called `colorScheme` (values: `auto`, `light`, `dark`),
|
||||
you can use the following JS snippet to apply the `wa-dark` class to the `<html>` element accordingly:
|
||||
|
||||
```js
|
||||
const systemDark = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
const applyDark = function (event = systemDark) {
|
||||
const isDark = colorScheme === 'auto' ? event.matches : colorScheme === 'dark';
|
||||
document.documentElement.classList.toggle('wa-dark', isDark);
|
||||
};
|
||||
systemDark.addEventListener('change', applyDark);
|
||||
applyDark();
|
||||
```
|
||||
|
||||
{% endmarkdown %}
|
||||
{% endblock %}
|
||||
|
||||
19
docs/_layouts/utility.njk
Normal file
19
docs/_layouts/utility.njk
Normal file
@@ -0,0 +1,19 @@
|
||||
{% extends '../_layouts/block.njk' %}
|
||||
|
||||
{% block afterContent %}
|
||||
{% if file %}
|
||||
{% markdown %}
|
||||
## Opting In
|
||||
|
||||
If you want to use this utility **only** without [all others](../), you can include the following CSS file from the Web Awesome CDN.
|
||||
|
||||
{% set stylesheet = file %}
|
||||
{% include 'import-stylesheet-code.md.njk' %}
|
||||
|
||||
Want them all?
|
||||
Follow the [instructions on the Utilities overview page](../) to get all Web Awesome utilities.
|
||||
|
||||
{% endmarkdown %}
|
||||
{% endif %}
|
||||
|
||||
{% endblock %}
|
||||
@@ -18,7 +18,7 @@ function updateResults(input) {
|
||||
}
|
||||
}
|
||||
|
||||
document.documentElement.addEventListener('wa-input', e => {
|
||||
document.documentElement.addEventListener('input', e => {
|
||||
if (e.target?.matches('#block-filter wa-input')) {
|
||||
updateResults(e.target);
|
||||
}
|
||||
|
||||
@@ -28,7 +28,7 @@ export class ThemeAspect {
|
||||
});
|
||||
|
||||
// Listen for selections
|
||||
document.addEventListener('wa-change', event => {
|
||||
document.addEventListener('change', event => {
|
||||
const picker = event.target.closest(this.picker);
|
||||
if (picker) {
|
||||
this.set(picker.value);
|
||||
|
||||
@@ -521,7 +521,7 @@ table.colors {
|
||||
}
|
||||
}
|
||||
|
||||
.layout-theme {
|
||||
.page-wide {
|
||||
wa-page > main {
|
||||
max-width: 140ch;
|
||||
|
||||
@@ -529,7 +529,9 @@ table.colors {
|
||||
max-width: 80ch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-theme {
|
||||
iframe {
|
||||
width: 100%;
|
||||
min-height: 16lh;
|
||||
|
||||
@@ -77,9 +77,9 @@ This example demonstrates all of the baked-in animations and easings. Animations
|
||||
easingName.appendChild(option);
|
||||
});
|
||||
|
||||
animationName.addEventListener('wa-change', () => (animation.name = animationName.value));
|
||||
easingName.addEventListener('wa-change', () => (animation.easing = easingName.value));
|
||||
playbackRate.addEventListener('wa-input', () => (animation.playbackRate = playbackRate.value));
|
||||
animationName.addEventListener('change', () => (animation.name = animationName.value));
|
||||
easingName.addEventListener('change', () => (animation.easing = easingName.value));
|
||||
playbackRate.addEventListener('input', () => (animation.playbackRate = playbackRate.value));
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -17,32 +17,39 @@ icon: button-group
|
||||
|
||||
### Button Sizes
|
||||
|
||||
All button sizes are supported, but avoid mixing sizes within the same button group.
|
||||
Unless otherwise specified,
|
||||
the size of [buttons](/docs/components/button) will be determined by the Button Group's `size` attribute.
|
||||
|
||||
```html {.example}
|
||||
<wa-button-group label="Alignment">
|
||||
<wa-button size="small">Left</wa-button>
|
||||
<wa-button size="small">Center</wa-button>
|
||||
<wa-button size="small">Right</wa-button>
|
||||
<wa-button-group size="small" label="Alignment">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<wa-button-group label="Alignment">
|
||||
<wa-button size="medium">Left</wa-button>
|
||||
<wa-button size="medium">Center</wa-button>
|
||||
<wa-button size="medium">Right</wa-button>
|
||||
<wa-button-group size="medium" label="Alignment">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<wa-button-group label="Alignment">
|
||||
<wa-button size="large">Left</wa-button>
|
||||
<wa-button size="large">Center</wa-button>
|
||||
<wa-button size="large">Right</wa-button>
|
||||
<wa-button-group size="large" label="Alignment">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
</wa-button-group>
|
||||
```
|
||||
|
||||
:::info
|
||||
While you can still set the size of [buttons](/docs/components/button) individually,
|
||||
and it will override the inherited size,
|
||||
it is rarely a good idea to mix sizes within the same button group.
|
||||
:::
|
||||
|
||||
### Vertical button groups
|
||||
|
||||
Set the `orientation` attribute to `vertical` to make a vertical button group.
|
||||
@@ -70,21 +77,21 @@ Set the `orientation` attribute to `vertical` to make a vertical button group.
|
||||
|
||||
### Theme Buttons
|
||||
|
||||
Theme buttons are supported through the button's `variant` attribute.
|
||||
Theme buttons are supported through the button group's `variant` attribute.
|
||||
|
||||
```html {.example}
|
||||
<wa-button-group label="Alignment">
|
||||
<wa-button variant="brand">Left</wa-button>
|
||||
<wa-button variant="brand">Center</wa-button>
|
||||
<wa-button variant="brand">Right</wa-button>
|
||||
<wa-button-group label="Alignment" variant="brand">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<wa-button-group label="Alignment">
|
||||
<wa-button variant="success">Left</wa-button>
|
||||
<wa-button variant="success">Center</wa-button>
|
||||
<wa-button variant="success">Right</wa-button>
|
||||
<wa-button-group label="Alignment" variant="success">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<br /><br />
|
||||
@@ -97,18 +104,28 @@ Theme buttons are supported through the button's `variant` attribute.
|
||||
|
||||
<br /><br />
|
||||
|
||||
<wa-button-group label="Alignment">
|
||||
<wa-button variant="warning">Left</wa-button>
|
||||
<wa-button variant="warning">Center</wa-button>
|
||||
<wa-button variant="warning">Right</wa-button>
|
||||
<wa-button-group label="Alignment" variant="warning">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<wa-button-group label="Alignment">
|
||||
<wa-button variant="danger">Left</wa-button>
|
||||
<wa-button variant="danger">Center</wa-button>
|
||||
<wa-button variant="danger">Right</wa-button>
|
||||
<wa-button-group label="Alignment" variant="danger">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
</wa-button-group>
|
||||
```
|
||||
|
||||
You can still use the buttons’ own `variant` attribute to override the inherited variant.
|
||||
|
||||
```html {.example}
|
||||
<wa-button-group label="Alignment" variant="brand">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button variant="neutral">Right</wa-button>
|
||||
</wa-button-group>
|
||||
```
|
||||
|
||||
|
||||
@@ -30,33 +30,43 @@ Use the `appearance` attribute to change the button's visual appearance.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<div class="wa-gap-m">
|
||||
<div class="wa-gap-2xs">
|
||||
<wa-button appearance="accent outlined" variant="neutral">A + O</wa-button>
|
||||
<wa-button appearance="accent" variant="neutral">Accent</wa-button>
|
||||
<wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
|
||||
<wa-button appearance="filled outlined" variant="neutral">F + O</wa-button>
|
||||
<wa-button appearance="filled" variant="neutral">Filled</wa-button>
|
||||
<wa-button appearance="plain" variant="neutral">Plain</wa-button>
|
||||
</div>
|
||||
<div class="wa-gap-m">
|
||||
<div class="wa-gap-2xs">
|
||||
<wa-button appearance="accent outlined" variant="brand">A + O</wa-button>
|
||||
<wa-button appearance="accent" variant="brand">Accent</wa-button>
|
||||
<wa-button appearance="outlined" variant="brand">Outlined</wa-button>
|
||||
<wa-button appearance="filled outlined" variant="brand">F + O</wa-button>
|
||||
<wa-button appearance="filled" variant="brand">Filled</wa-button>
|
||||
<wa-button appearance="plain" variant="brand">Plain</wa-button>
|
||||
</div>
|
||||
<div class="wa-gap-m">
|
||||
<div class="wa-gap-2xs">
|
||||
<wa-button appearance="accent outlined" variant="success">A + O</wa-button>
|
||||
<wa-button appearance="accent" variant="success">Accent</wa-button>
|
||||
<wa-button appearance="outlined" variant="success">Outlined</wa-button>
|
||||
<wa-button appearance="filled outlined" variant="success">F + O</wa-button>
|
||||
<wa-button appearance="filled" variant="success">Filled</wa-button>
|
||||
<wa-button appearance="plain" variant="success">Plain</wa-button>
|
||||
</div>
|
||||
<div class="wa-gap-m">
|
||||
<div class="wa-gap-2xs">
|
||||
<wa-button appearance="accent outlined" variant="warning">A + O</wa-button>
|
||||
<wa-button appearance="accent" variant="warning">Accent</wa-button>
|
||||
<wa-button appearance="outlined" variant="warning">Outlined</wa-button>
|
||||
<wa-button appearance="filled outlined" variant="warning">F + O</wa-button>
|
||||
<wa-button appearance="filled" variant="warning">Filled</wa-button>
|
||||
<wa-button appearance="plain" variant="warning">Plain</wa-button>
|
||||
</div>
|
||||
<div class="wa-gap-m">
|
||||
<div class="wa-gap-2xs">
|
||||
<wa-button appearance="accent outlined" variant="danger">A + O</wa-button>
|
||||
<wa-button appearance="accent" variant="danger">Accent</wa-button>
|
||||
<wa-button appearance="outlined" variant="danger">Outlined</wa-button>
|
||||
<wa-button appearance="filled outlined" variant="danger">F + O</wa-button>
|
||||
<wa-button appearance="filled" variant="danger">Filled</wa-button>
|
||||
<wa-button appearance="plain" variant="danger">Plain</wa-button>
|
||||
</div>
|
||||
|
||||
@@ -143,3 +143,42 @@ If using SSR, you need to also use the `with-image` attribute to add an image to
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Sizing
|
||||
|
||||
Use the `size` attribute to change a card's size.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<wa-card with-footer size="small">
|
||||
This is a small card.
|
||||
|
||||
<footer slot="footer" class="wa-flank">
|
||||
<wa-button variant="brand" pill>More Info</wa-button>
|
||||
<wa-rating></wa-rating>
|
||||
</footer>
|
||||
</wa-card>
|
||||
|
||||
<wa-card with-footer size="medium">
|
||||
This is a medium card (default).
|
||||
|
||||
<footer slot="footer" class="wa-flank">
|
||||
<wa-button variant="brand" pill>More Info</wa-button>
|
||||
<wa-rating></wa-rating>
|
||||
</footer>
|
||||
</wa-card>
|
||||
|
||||
<wa-card with-footer size="large">
|
||||
This is a large card.
|
||||
|
||||
<footer slot="footer" class="wa-flank">
|
||||
<wa-button variant="brand" pill>More Info</wa-button>
|
||||
<wa-rating></wa-rating>
|
||||
</footer>
|
||||
</wa-card>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
@@ -249,7 +249,7 @@ This example is best demonstrated using a mouse. Try clicking and dragging the s
|
||||
const carousel = container.querySelector('wa-carousel');
|
||||
const toggle = container.querySelector('wa-switch');
|
||||
|
||||
toggle.addEventListener('wa-change', () => {
|
||||
toggle.addEventListener('change', () => {
|
||||
carousel.toggleAttribute('mouse-dragging', toggle.checked);
|
||||
});
|
||||
</script>
|
||||
@@ -450,7 +450,7 @@ Use the `--aspect-ratio` custom property to customize the size of the carousel's
|
||||
const carousel = document.querySelector('wa-carousel.aspect-ratio');
|
||||
const aspectRatio = document.querySelector('wa-select[name="aspect"]');
|
||||
|
||||
aspectRatio.addEventListener('wa-change', () => {
|
||||
aspectRatio.addEventListener('change', () => {
|
||||
carousel.style.setProperty('--aspect-ratio', aspectRatio.value);
|
||||
});
|
||||
})();
|
||||
|
||||
@@ -73,4 +73,4 @@ if (name_search.value) {
|
||||
filterByName(name_search.value);
|
||||
}
|
||||
|
||||
name_search_group.addEventListener('wa-input', e => filterByName(name_search.value));
|
||||
name_search_group.addEventListener('input', e => filterByName(name_search.value));
|
||||
|
||||
@@ -82,7 +82,7 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
|
||||
});
|
||||
|
||||
// Update validity on change
|
||||
checkbox.addEventListener('wa-change', () => {
|
||||
checkbox.addEventListener('change', () => {
|
||||
checkbox.setCustomValidity(checkbox.checked ? '' : errorMessage);
|
||||
});
|
||||
|
||||
|
||||
@@ -66,9 +66,11 @@ Use the `swatches` attribute to add convenient presets to the color picker. Any
|
||||
Use the `size` attribute to change the color picker's trigger size.
|
||||
|
||||
```html {.example}
|
||||
<wa-color-picker size="small" label="Select a color"></wa-color-picker>
|
||||
<wa-color-picker size="medium" label="Select a color"></wa-color-picker>
|
||||
<wa-color-picker size="large" label="Select a color"></wa-color-picker>
|
||||
<div class="wa-gap-m wa-align-items-baseline">
|
||||
<wa-color-picker size="small" label="Select a color"></wa-color-picker>
|
||||
<wa-color-picker size="medium" label="Select a color"></wa-color-picker>
|
||||
<wa-color-picker size="large" label="Select a color"></wa-color-picker>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
@@ -16,7 +16,7 @@ icon: format-bytes
|
||||
const formatter = container.querySelector('wa-format-bytes');
|
||||
const input = container.querySelector('wa-input');
|
||||
|
||||
input.addEventListener('wa-input', () => (formatter.value = input.value || 0));
|
||||
input.addEventListener('input', () => (formatter.value = input.value || 0));
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@ Localization is handled by the browser's [`Intl.NumberFormat` API](https://devel
|
||||
const formatter = container.querySelector('wa-format-number');
|
||||
const input = container.querySelector('wa-input');
|
||||
|
||||
input.addEventListener('wa-input', () => (formatter.value = input.value || 0));
|
||||
input.addEventListener('input', () => (formatter.value = input.value || 0));
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
@@ -54,11 +54,11 @@ Popup is a low-level utility built specifically for positioning elements. Do not
|
||||
const active = container.querySelector('wa-switch[name="active"]');
|
||||
const arrow = container.querySelector('wa-switch[name="arrow"]');
|
||||
|
||||
select.addEventListener('wa-change', () => (popup.placement = select.value));
|
||||
distance.addEventListener('wa-input', () => (popup.distance = distance.value));
|
||||
skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
|
||||
active.addEventListener('wa-change', () => (popup.active = active.checked));
|
||||
arrow.addEventListener('wa-change', () => (popup.arrow = arrow.checked));
|
||||
select.addEventListener('change', () => (popup.placement = select.value));
|
||||
distance.addEventListener('input', () => (popup.distance = distance.value));
|
||||
skidding.addEventListener('input', () => (popup.skidding = skidding.value));
|
||||
active.addEventListener('change', () => (popup.active = active.checked));
|
||||
arrow.addEventListener('change', () => (popup.arrow = arrow.checked));
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@@ -145,7 +145,7 @@ Popups are inactive and hidden until the `active` attribute is applied. Removing
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const active = container.querySelector('wa-switch');
|
||||
|
||||
active.addEventListener('wa-change', () => (popup.active = active.checked));
|
||||
active.addEventListener('change', () => (popup.active = active.checked));
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -233,7 +233,7 @@ Since placement is preferred when using `flip`, you can observe the popup's curr
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const select = container.querySelector('wa-select');
|
||||
|
||||
select.addEventListener('wa-change', () => (popup.placement = select.value));
|
||||
select.addEventListener('change', () => (popup.placement = select.value));
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -277,7 +277,7 @@ Use the `distance` attribute to change the distance between the popup and its an
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const distance = container.querySelector('wa-slider');
|
||||
|
||||
distance.addEventListener('wa-input', () => (popup.distance = distance.value));
|
||||
distance.addEventListener('input', () => (popup.distance = distance.value));
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -321,7 +321,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const skidding = container.querySelector('wa-slider');
|
||||
|
||||
skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
|
||||
skidding.addEventListener('input', () => (popup.skidding = skidding.value));
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -409,9 +409,9 @@ By default, the arrow will be aligned as close to the center of the _anchor_ as
|
||||
const arrowPlacement = container.querySelector('[name="arrow-placement"]');
|
||||
const arrow = container.querySelector('[name="arrow"]');
|
||||
|
||||
placement.addEventListener('wa-change', () => (popup.placement = placement.value));
|
||||
arrowPlacement.addEventListener('wa-change', () => (popup.arrowPlacement = arrowPlacement.value));
|
||||
arrow.addEventListener('wa-change', () => (popup.arrow = arrow.checked));
|
||||
placement.addEventListener('change', () => (popup.placement = placement.value));
|
||||
arrowPlacement.addEventListener('change', () => (popup.arrowPlacement = arrowPlacement.value));
|
||||
arrow.addEventListener('change', () => (popup.arrow = arrow.checked));
|
||||
</script>
|
||||
</div>
|
||||
```
|
||||
@@ -464,7 +464,7 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
|
||||
const fixed = container.querySelector('wa-switch');
|
||||
const sync = container.querySelector('wa-select');
|
||||
|
||||
sync.addEventListener('wa-change', () => (popup.sync = sync.value));
|
||||
sync.addEventListener('change', () => (popup.sync = sync.value));
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -523,7 +523,7 @@ Toggle the switch and scroll the container to see the difference.
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const fixed = container.querySelector('wa-switch');
|
||||
|
||||
fixed.addEventListener('wa-change', () => (popup.strategy = fixed.checked ? 'fixed' : 'absolute'));
|
||||
fixed.addEventListener('change', () => (popup.strategy = fixed.checked ? 'fixed' : 'absolute'));
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -575,7 +575,7 @@ Scroll the container to see how the popup flips to prevent clipping.
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const flip = container.querySelector('wa-switch');
|
||||
|
||||
flip.addEventListener('wa-change', () => (popup.flip = flip.checked));
|
||||
flip.addEventListener('change', () => (popup.flip = flip.checked));
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -670,7 +670,7 @@ Toggle the switch to see the difference.
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const shift = container.querySelector('wa-switch');
|
||||
|
||||
shift.addEventListener('wa-change', () => (popup.shift = shift.checked));
|
||||
shift.addEventListener('change', () => (popup.shift = shift.checked));
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -731,7 +731,7 @@ Scroll the container to see the popup resize as its available space changes.
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const autoSize = container.querySelector('wa-switch');
|
||||
|
||||
autoSize.addEventListener('wa-change', () => (popup.autoSize = autoSize.checked ? 'both' : ''));
|
||||
autoSize.addEventListener('change', () => (popup.autoSize = autoSize.checked ? 'both' : ''));
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -782,9 +782,9 @@ When a gap exists between the anchor and the popup element, this option will add
|
||||
const hoverBridge = container.querySelector('wa-switch');
|
||||
const distance = container.querySelector('wa-slider[label="Distance"]');
|
||||
const skidding = container.querySelector('wa-slider[label="Skidding"]');
|
||||
distance.addEventListener('wa-input', () => (popup.distance = distance.value));
|
||||
skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
|
||||
hoverBridge.addEventListener('wa-change', () => (popup.hoverBridge = hoverBridge.checked));
|
||||
distance.addEventListener('input', () => (popup.distance = distance.value));
|
||||
skidding.addEventListener('input', () => (popup.skidding = skidding.value));
|
||||
hoverBridge.addEventListener('change', () => (popup.hoverBridge = hoverBridge.checked));
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -837,7 +837,7 @@ This example anchors a popup to the mouse cursor using a virtual element. As suc
|
||||
};
|
||||
|
||||
// Only activate the popup when the switch is checked
|
||||
enabled.addEventListener('wa-change', () => {
|
||||
enabled.addEventListener('change', () => {
|
||||
popup.active = enabled.checked;
|
||||
});
|
||||
|
||||
|
||||
@@ -24,7 +24,7 @@ QR codes are useful for providing small pieces of information to users who can q
|
||||
|
||||
customElements.whenDefined('wa-qr-code').then(() => {
|
||||
input.value = qrCode.value;
|
||||
input.addEventListener('wa-input', () => (qrCode.value = input.value));
|
||||
input.addEventListener('input', () => (qrCode.value = input.value));
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ icon: radio-group
|
||||
Radio buttons are designed to be used with [radio groups](/docs/components/radio-group). When a radio button has focus, the arrow keys can be used to change the selected option just like standard radio controls.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" name="a" value="1">
|
||||
<wa-radio-group label="Select an option" orientation="horizontal" name="a" value="1">
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
@@ -23,7 +23,7 @@ Radio buttons are designed to be used with [radio groups](/docs/components/radio
|
||||
To set the initial value and checked state, use the `value` attribute on the containing radio group.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" name="a" value="1">
|
||||
<wa-radio-group label="Select an option" orientation="horizontal" name="a" value="1">
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
@@ -35,7 +35,7 @@ To set the initial value and checked state, use the `value` attribute on the con
|
||||
Use the `disabled` attribute to disable a radio button.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" name="a" value="1">
|
||||
<wa-radio-group label="Select an option" orientation="horizontal" name="a" value="1">
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2" disabled>Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
@@ -47,7 +47,7 @@ Use the `disabled` attribute to disable a radio button.
|
||||
Use the `size` attribute to change a radio button's size.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group size="small" label="Select an option" name="a" value="1">
|
||||
<wa-radio-group size="small" label="Select an option" orientation="horizontal" name="a" value="1">
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
@@ -55,7 +55,7 @@ Use the `size` attribute to change a radio button's size.
|
||||
|
||||
<br />
|
||||
|
||||
<wa-radio-group size="medium" label="Select an option" name="a" value="1">
|
||||
<wa-radio-group size="medium" label="Select an option" orientation="horizontal" name="a" value="1">
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
@@ -63,7 +63,7 @@ Use the `size` attribute to change a radio button's size.
|
||||
|
||||
<br />
|
||||
|
||||
<wa-radio-group size="large" label="Select an option" name="a" value="1">
|
||||
<wa-radio-group size="large" label="Select an option" orientation="horizontal" name="a" value="1">
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
@@ -75,7 +75,7 @@ Use the `size` attribute to change a radio button's size.
|
||||
Use the `pill` attribute to give radio buttons rounded edges.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group size="small" label="Select an option" name="a" value="1">
|
||||
<wa-radio-group size="small" label="Select an option" orientation="horizontal" name="a" value="1">
|
||||
<wa-radio-button pill value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button pill value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button pill value="3">Option 3</wa-radio-button>
|
||||
@@ -83,7 +83,7 @@ Use the `pill` attribute to give radio buttons rounded edges.
|
||||
|
||||
<br />
|
||||
|
||||
<wa-radio-group size="medium" label="Select an option" name="a" value="1">
|
||||
<wa-radio-group size="medium" label="Select an option" orientation="horizontal" name="a" value="1">
|
||||
<wa-radio-button pill value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button pill value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button pill value="3">Option 3</wa-radio-button>
|
||||
@@ -91,7 +91,7 @@ Use the `pill` attribute to give radio buttons rounded edges.
|
||||
|
||||
<br />
|
||||
|
||||
<wa-radio-group size="large" label="Select an option" name="a" value="1">
|
||||
<wa-radio-group size="large" label="Select an option" orientation="horizontal" name="a" value="1">
|
||||
<wa-radio-button pill value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button pill value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button pill value="3">Option 3</wa-radio-button>
|
||||
@@ -103,7 +103,7 @@ Use the `pill` attribute to give radio buttons rounded edges.
|
||||
Use the `prefix` and `suffix` slots to add icons.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" name="a" value="1">
|
||||
<wa-radio-group label="Select an option" orientation="horizontal" name="a" value="1">
|
||||
<wa-radio-button value="1">
|
||||
<wa-icon slot="prefix" name="archive" variant="solid"></wa-icon>
|
||||
Option 1
|
||||
@@ -127,7 +127,7 @@ Use the `prefix` and `suffix` slots to add icons.
|
||||
You can omit button labels and use icons instead. Make sure to set a `label` attribute on each icon so screen readers will announce each option correctly.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" name="a" value="neutral">
|
||||
<wa-radio-group label="Select an option" orientation="horizontal" name="a" value="neutral">
|
||||
<wa-radio-button value="angry">
|
||||
<wa-icon name="face-angry" variant="solid" label="Angry"></wa-icon>
|
||||
</wa-radio-button>
|
||||
|
||||
@@ -32,7 +32,28 @@ Add descriptive hint to a radio group with the `hint` attribute. For hints that
|
||||
[Radio buttons](/docs/components/radio-button) offer an alternate way to display radio controls. In this case, an internal [button group](/docs/components/button-group) is used to group the buttons into a single, cohesive control.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
|
||||
<wa-radio-group
|
||||
label="Horizontal options"
|
||||
hint="Select an option that makes you proud."
|
||||
orientation="horizontal"
|
||||
name="a"
|
||||
value="1"
|
||||
>
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
|
||||
<br>
|
||||
|
||||
<wa-radio-group
|
||||
label="Vertical options"
|
||||
hint="Select an option that makes you proud."
|
||||
orientation="vertical"
|
||||
name="a"
|
||||
value="1"
|
||||
style="max-width: 300px;"
|
||||
>
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
@@ -51,28 +72,39 @@ Radios and radio buttons can be disabled by adding the `disabled` attribute to t
|
||||
</wa-radio-group>
|
||||
```
|
||||
|
||||
### Orientation
|
||||
|
||||
The default orientation for radio items is `vertical`. Set the `orientation` to `horizontal` to items on the same row.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group
|
||||
label="Select an option"
|
||||
hint="Choose the most appropriate option."
|
||||
orientation="horizontal"
|
||||
name="a"
|
||||
value="1"
|
||||
>
|
||||
<wa-radio value="1">Option 1</wa-radio>
|
||||
<wa-radio value="2">Option 2</wa-radio>
|
||||
<wa-radio value="3">Option 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
```
|
||||
|
||||
### Sizing Options
|
||||
|
||||
The size of [Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-buttons) will be determined by the Radio Group's `size` attribute.
|
||||
The size of [Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-button) will be determined by the Radio Group's `size` attribute.
|
||||
|
||||
```html preview
|
||||
<wa-radio-group label="Select an option" size="medium" value="medium" class="radio-group-size">
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" size="medium" value="medium" onchange="this.size = this.value">
|
||||
<wa-radio value="small">Small</wa-radio>
|
||||
<wa-radio value="medium">Medium</wa-radio>
|
||||
<wa-radio value="large">Large</wa-radio>
|
||||
</wa-radio-group>
|
||||
|
||||
<script>
|
||||
const radioGroup = document.querySelector('.radio-group-size');
|
||||
|
||||
radioGroup.addEventListener('wa-change', () => {
|
||||
radioGroup.size = radioGroup.value;
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
:::info
|
||||
[Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-button) also have a `size` attribute. This can be useful in certain compositions, but it will be ignored when used inside of a Radio Group.
|
||||
[Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-button) also have a `size` attribute,
|
||||
which will override the inherited size when used.
|
||||
:::
|
||||
|
||||
### Validation
|
||||
@@ -127,7 +159,7 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
|
||||
});
|
||||
|
||||
// Update validity when a selection is made
|
||||
form.addEventListener('wa-change', () => {
|
||||
form.addEventListener('change', () => {
|
||||
const isValid = radioGroup.value === '3';
|
||||
radioGroup.setCustomValidity(isValid ? '' : errorMessage);
|
||||
});
|
||||
|
||||
@@ -11,8 +11,8 @@ Radios are designed to be used with [radio groups](/docs/components/radio-group)
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" name="a" value="1">
|
||||
<wa-radio value="1">Option 1</wa-radio><br>
|
||||
<wa-radio value="2">Option 2</wa-radio><br>
|
||||
<wa-radio value="1">Option 1</wa-radio>
|
||||
<wa-radio value="2">Option 2</wa-radio>
|
||||
<wa-radio value="3">Option 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
```
|
||||
@@ -29,8 +29,8 @@ To set the initial value and checked state, use the `value` attribute on the con
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" name="a" value="3">
|
||||
<wa-radio value="1">Option 1</wa-radio><br>
|
||||
<wa-radio value="2">Option 2</wa-radio><br>
|
||||
<wa-radio value="1">Option 1</wa-radio>
|
||||
<wa-radio value="2">Option 2</wa-radio>
|
||||
<wa-radio value="3">Option 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
```
|
||||
@@ -41,8 +41,8 @@ Use the `disabled` attribute to disable a radio.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" name="a" value="1">
|
||||
<wa-radio value="1">Option 1</wa-radio><br>
|
||||
<wa-radio value="2" disabled>Option 2</wa-radio><br>
|
||||
<wa-radio value="1">Option 1</wa-radio>
|
||||
<wa-radio value="2" disabled>Option 2</wa-radio>
|
||||
<wa-radio value="3">Option 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
```
|
||||
@@ -53,24 +53,24 @@ Add the `size` attribute to the [Radio Group](/docs/components/radio-group) to c
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group size="small" value="1">
|
||||
<wa-radio value="1">Small 1</wa-radio><br>
|
||||
<wa-radio value="2">Small 2</wa-radio><br>
|
||||
<wa-radio value="1">Small 1</wa-radio>
|
||||
<wa-radio value="2">Small 2</wa-radio>
|
||||
<wa-radio value="3">Small 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
|
||||
<br />
|
||||
|
||||
<wa-radio-group size="medium" value="1">
|
||||
<wa-radio value="1">Medium 1</wa-radio><br>
|
||||
<wa-radio value="2">Medium 2</wa-radio><br>
|
||||
<wa-radio value="1">Medium 1</wa-radio>
|
||||
<wa-radio value="2">Medium 2</wa-radio>
|
||||
<wa-radio value="3">Medium 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
|
||||
<br />
|
||||
|
||||
<wa-radio-group size="large" value="1">
|
||||
<wa-radio value="1">Large 1</wa-radio><br>
|
||||
<wa-radio value="2">Large 2</wa-radio><br>
|
||||
<wa-radio value="1">Large 1</wa-radio>
|
||||
<wa-radio value="2">Large 2</wa-radio>
|
||||
<wa-radio value="3">Large 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
```
|
||||
|
||||
@@ -35,12 +35,20 @@ Use the `precision` attribute to let users select fractional ratings.
|
||||
<wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
|
||||
```
|
||||
|
||||
### Symbol Sizes
|
||||
### Sizing
|
||||
|
||||
Set the `--symbol-size` custom property to adjust the size.
|
||||
Use the `size` attribute to adjust the size of the rating.
|
||||
|
||||
```html {.example}
|
||||
<wa-rating label="Rating" style="--symbol-size: 2rem;"></wa-rating>
|
||||
<wa-rating label="Rating" size="small"></wa-rating><br>
|
||||
<wa-rating label="Rating" size="medium"></wa-rating><br>
|
||||
<wa-rating label="Rating" size="large"></wa-rating>
|
||||
```
|
||||
|
||||
For more granular sizing, you can use the `font-size` property.
|
||||
|
||||
```html {.example}
|
||||
<wa-rating label="Rating" style="font-size: 2rem;"></wa-rating>
|
||||
```
|
||||
|
||||
### Readonly
|
||||
|
||||
@@ -208,7 +208,7 @@ Try resizing the example below with each option and notice how the panels respon
|
||||
const splitPanel = container.querySelector('wa-split-panel');
|
||||
const select = container.querySelector('wa-select');
|
||||
|
||||
select.addEventListener('wa-change', () => (splitPanel.primary = select.value));
|
||||
select.addEventListener('change', () => (splitPanel.primary = select.value));
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
@@ -7,7 +7,11 @@ native: input
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<wa-textarea></wa-textarea>
|
||||
<form action="about:blank" target="_blank">
|
||||
<wa-textarea label="Type something', will ya" name="a" value="no"></wa-textarea>
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
:::info
|
||||
|
||||
@@ -88,7 +88,7 @@ The `selection` attribute lets you change the selection behavior of the tree.
|
||||
const selectionMode = document.querySelector('#selection-mode');
|
||||
const tree = document.querySelector('.tree-selectable');
|
||||
|
||||
selectionMode.addEventListener('wa-change', () => {
|
||||
selectionMode.addEventListener('change', () => {
|
||||
tree.querySelectorAll('wa-tree-item').forEach(item => (item.selected = false));
|
||||
tree.selection = selectionMode.value;
|
||||
});
|
||||
|
||||
@@ -1,24 +1,28 @@
|
||||
---
|
||||
title: Customizing
|
||||
description: Learn how to customize Web Awesome through parts and custom properties.
|
||||
description: Learn how to customize Web Awesome through themes, parts, and custom properties.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
Web Awesome components can be customized at a high level through a theming API. This gives you control over theme colors and general styling. For more advanced customizations, you can make use of CSS parts and custom properties to target individual components.
|
||||
You can customize the look and feel of Web Awesome at a high level with themes. For more advanced customizations, you can make use of CSS parts and custom properties to target individual components.
|
||||
|
||||
## Themes
|
||||
|
||||
Web Awesome uses numerous CSS custom properties that make up a high-level theming API and provide a consistent look and feel across the entire library. You can customize them and use them in your own application just with CSS — no preprocessor required.
|
||||
Web Awesome uses [themes](/docs/themes) to apply a cohesive look and feel across the entire library. Themes are built with a collection of predefined CSS custom properties, which we call [design tokens](/docs/tokens), and there are many premade themes you can choose from.
|
||||
|
||||
Because these custom properties live at the page level, they're prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties.
|
||||
To use a theme, simply add a link to the theme's stylesheet to the `<head>` of your page. For example, you can replace the link to `default.css` in the [installation code](/docs/installation/#quick-start-autoloading-via-cdn) with this snippet to use the *Awesome* theme:
|
||||
|
||||
To customize a theme, simply override any of these custom properties in your own stylesheet by scoping your styles to `:root`, `:host`, and, if needed, the class for the specific theme you want to override. Here's an example that changes the default brand color (blue) to violet in the light theme using existing [literal colors](/docs/tokens/color/#literal-colors).
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/awesome.css' %}" />
|
||||
```
|
||||
|
||||
You can [customize any theme](/docs/themes/creating) just with CSS — no preprocessor required. All design tokens are prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties. Simply override any design token in your own stylesheet by scoping your styles to `:where(:root)`, `:host`, the class for the specific theme you want to override (if needed), and the class for the relevant color scheme (if needed). Here's an example that changes the default brand color to violet in light mode:
|
||||
|
||||
```css
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-default {
|
||||
/* Changes the brand color to violet across the library */
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-violet-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-violet-90);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-violet-50);
|
||||
@@ -31,11 +35,15 @@ To customize a theme, simply override any of these custom properties in your own
|
||||
}
|
||||
```
|
||||
|
||||
For more examples and further guidance, refer to [Themes](/docs/themes) and the Theming section of this documentation. For a complete list of all custom properties used for theming, refer to `src/styles/themes/default.css` in the project's source code.
|
||||
:::info
|
||||
Wrapping the `:root` selector in `:where()` gives this selector 0 specificity. This allows us to define our design tokens' default values while ensuring they can be cleanly overridden as needed.
|
||||
:::
|
||||
|
||||
For a complete list of all custom properties used for theming, refer to `src/styles/themes/default.css` in the project's source code.
|
||||
|
||||
## Components
|
||||
|
||||
Whereas a theme offers a high-level way to customize the library, components offer different hooks as a low-level way to customize them individually.
|
||||
While themes offer a high-level way to customize the library, components offer different hooks as a low-level way to customize them individually.
|
||||
|
||||
Web Awesome components use a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate their styles and behaviors. As a result, you can't simply target their internals with the usual CSS selectors. Instead, components expose a set of custom properties and CSS parts that can be targeted to customize their appearance.
|
||||
|
||||
@@ -122,3 +130,77 @@ CSS parts have a few important advantages:
|
||||
- It encourages us to think more about how components are designed and how customizations should be allowed before users can take advantage of them. Once we opt a part into the component's API, it's guaranteed to be supported and can't be removed until a major version of the library is released.
|
||||
|
||||
Most (but not all) components expose parts. You can find them in each component's API documentation under the "CSS Parts" section.
|
||||
|
||||
## Native Elements
|
||||
|
||||
If you're using [native styles](/docs/native), any custom styles added for a component should also target the corresponding native element. In general, the same styles you declare for components will work just the same to style their native counterparts.
|
||||
|
||||
For example, we can give `<input type="checkbox">` the same custom styles as `<wa-checkbox>` by using the custom properties required to style the component:
|
||||
```html {.example}
|
||||
<wa-checkbox class="pinkify">Web Awesome checkbox</wa-checkbox>
|
||||
<br />
|
||||
<label>
|
||||
<input type="checkbox" class="pinkify" />
|
||||
HTML checkbox
|
||||
</label>
|
||||
|
||||
<style>
|
||||
wa-checkbox.pinkify,
|
||||
input[type="checkbox"].pinkify {
|
||||
--background-color-checked: hotpink;
|
||||
--border-color-checked: hotpink;
|
||||
--border-width: 3px;
|
||||
--checked-icon-color: lavenderblush;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Or, if using CSS parts, we can give both checkboxes the same custom styles using standard CSS properties:
|
||||
```html {.example}
|
||||
<wa-checkbox class="purpleify">Web Awesome checkbox</wa-checkbox>
|
||||
<br />
|
||||
<label>
|
||||
<input type="checkbox" class="purpleify" />
|
||||
HTML checkbox
|
||||
</label>
|
||||
|
||||
<style>
|
||||
wa-checkbox.purpleify::part(control),
|
||||
input[type="checkbox"].purpleify {
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
wa-checkbox.purpleify:state(checked)::part(control),
|
||||
input[type="checkbox"].purpleify:checked {
|
||||
background-color: darkorchid;
|
||||
border-color: darkorchid;
|
||||
color: lavender;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
## Style Utilities
|
||||
|
||||
Similarly, if you're using [style utilities](/docs/utilities), any custom styles added for a specific attribute variation of a component — such as `appearance`, `variant`, or `size` — should also target the corresponding style utility class. This ensures that the attribute and its utility class counterpart work interchangeably.
|
||||
|
||||
For example, we can give all outlined callouts a thick left border, regardless of whether they are styled with `appearance="outlined"` or `class="wa-outlined"`:
|
||||
```html {.example}
|
||||
<wa-callout appearance="outlined filled">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Here's a callout with <code>appearance="outlined"</code>
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-outlined wa-filled">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Here's a callout with <code>class="wa-outlined"</code>
|
||||
</wa-callout>
|
||||
|
||||
<style>
|
||||
wa-callout:is(
|
||||
[appearance~="outlined"],
|
||||
.wa-outlined
|
||||
) {
|
||||
border-left-width: var(--wa-panel-border-radius);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
84
docs/docs/experimental/inherit.md
Normal file
84
docs/docs/experimental/inherit.md
Normal file
@@ -0,0 +1,84 @@
|
||||
---
|
||||
title: Inheritance & Default value tests
|
||||
wide: true
|
||||
---
|
||||
|
||||
## Variant
|
||||
|
||||
{%- set variantDefaults = {
|
||||
button: 'neutral',
|
||||
tag: 'neutral',
|
||||
badge: 'brand',
|
||||
callout: 'brand'
|
||||
} %}
|
||||
{%- set variants = ['', 'neutral', 'brand'] %}
|
||||
|
||||
### Defaults
|
||||
|
||||
```html {.example}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Element</th>
|
||||
<th>Default</th>
|
||||
<th>Neutral</th>
|
||||
<th>Brand</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{% for element, default in variantDefaults %}
|
||||
<tr>
|
||||
<th>{{ element | capitalize }}</th>
|
||||
<td><wa-{{ element }}>{{ default | capitalize }}</wa-{{ element }}></td>
|
||||
<td><wa-{{ element }} variant="neutral">Neutral</wa-{{ element }}></td>
|
||||
<td><wa-{{ element }} variant="brand">Brand</wa-{{ element }}></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
```
|
||||
|
||||
### Nested elements
|
||||
|
||||
{% set containers = [
|
||||
{parent: 'callout', child: 'button'},
|
||||
{parent: 'callout', child: 'callout'},
|
||||
{parent: 'button', child: 'badge'}
|
||||
] %}
|
||||
|
||||
{% for container in containers %}
|
||||
{% set parent = container.parent %}
|
||||
{% set child = container.child %}
|
||||
|
||||
#### {{ child | capitalize }} in {{ parent | capitalize }}
|
||||
|
||||
```html {.example}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
{% if parent == child -%}
|
||||
<th>👇 Parent / Child 👉</th>
|
||||
{% else %}
|
||||
<th>👇 {{ parent | capitalize }} / {{ child | capitalize }} 👉</th>
|
||||
{%- endif %}
|
||||
<th>Default</th>
|
||||
<th>Neutral</th>
|
||||
<th>Brand</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{% for parentVariant in variants %}
|
||||
{% set parentContent = (parentVariant | capitalize or 'Default') if parent == 'button' %}
|
||||
|
||||
<tr>
|
||||
<th>{{ parentVariant | capitalize or 'Default' }}</th>
|
||||
{% for childVariant in variants -%}
|
||||
{% set childContent = (childVariant or parentVariant or variantDefaults[child]) | capitalize %}
|
||||
{% set childContent = childContent[0] if child == 'badge' else childContent %}
|
||||
<td><wa-{{ parent }}{{ parentVariant | attr('variant') }}>
|
||||
{{ parentContent }}
|
||||
<wa-{{ child }}{{ childVariant | attr('variant') }}>{{ childContent }}</wa-{{ child }}>
|
||||
</wa-{{ parent }}></td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
```
|
||||
{% endfor %}
|
||||
@@ -1,352 +0,0 @@
|
||||
---
|
||||
title: Theming Sandbox
|
||||
description: TODO
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
## Card
|
||||
|
||||
```html {.example}
|
||||
<wa-card with-image with-footer class="card-overview">
|
||||
<img
|
||||
slot="image"
|
||||
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
|
||||
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
|
||||
/>
|
||||
|
||||
<strong>Mittens</strong><br />
|
||||
This kitten is as cute as he is playful. Bring him home today!<br />
|
||||
<small>6 weeks old</small>
|
||||
|
||||
<div slot="footer">
|
||||
<wa-button variant="brand" pill>More Info</wa-button>
|
||||
<wa-rating></wa-rating>
|
||||
</div>
|
||||
</wa-card>
|
||||
|
||||
<style>
|
||||
.card-overview {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card-overview small {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
.card-overview [slot='footer'] {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Alerts
|
||||
|
||||
```html {.example}
|
||||
<wa-callout variant="brand">
|
||||
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
|
||||
<strong>This is super informative</strong><br />
|
||||
You can tell by how pretty the alert is.
|
||||
</wa-callout>
|
||||
<br />
|
||||
<wa-callout variant="success">
|
||||
<wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
|
||||
<strong>Your changes have been saved</strong><br />
|
||||
You can safely exit the app now.
|
||||
</wa-callout>
|
||||
<br />
|
||||
<wa-callout variant="neutral">
|
||||
<wa-icon slot="icon" name="gear" variant="regular"></wa-icon>
|
||||
<strong>Your settings have been updated</strong><br />
|
||||
Settings will take affect on next login.
|
||||
</wa-callout>
|
||||
<br />
|
||||
<wa-callout variant="warning">
|
||||
<wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
|
||||
<strong>Your session has ended</strong><br />
|
||||
Please login again to continue.
|
||||
</wa-callout>
|
||||
<br />
|
||||
<wa-callout variant="danger">
|
||||
<wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
|
||||
<strong>Your account has been deleted</strong><br />
|
||||
We're very sorry to see you go!
|
||||
</wa-callout>
|
||||
```
|
||||
|
||||
## Badges and Tags
|
||||
|
||||
```html {.example}
|
||||
<wa-badge variant="brand">Brand</wa-badge>
|
||||
<wa-badge variant="success">Success</wa-badge>
|
||||
<wa-badge variant="neutral">Neutral</wa-badge>
|
||||
<wa-badge variant="warning">Warning</wa-badge>
|
||||
<wa-badge variant="danger">Danger</wa-badge>
|
||||
<br />
|
||||
<wa-tag variant="brand">Brand</wa-tag>
|
||||
<wa-tag variant="success">Success</wa-tag>
|
||||
<wa-tag variant="neutral">Neutral</wa-tag>
|
||||
<wa-tag variant="warning">Warning</wa-tag>
|
||||
<wa-tag variant="danger">Danger</wa-tag>
|
||||
```
|
||||
|
||||
## Buttons
|
||||
|
||||
```html {.example}
|
||||
<wa-button variant="brand">Brand</wa-button>
|
||||
<wa-button variant="success">Success</wa-button>
|
||||
<wa-button variant="neutral">Neutral</wa-button>
|
||||
<wa-button variant="warning">Warning</wa-button>
|
||||
<wa-button variant="danger">Danger</wa-button>
|
||||
<br /><br />
|
||||
<wa-button variant="brand" appearance="outlined">Brand</wa-button>
|
||||
<wa-button variant="success" appearance="outlined">Success</wa-button>
|
||||
<wa-button variant="neutral" appearance="outlined">Neutral</wa-button>
|
||||
<wa-button variant="warning" appearance="outlined">Warning</wa-button>
|
||||
<wa-button variant="danger" appearance="outlined">Danger</wa-button>
|
||||
<br /><br />
|
||||
<wa-button appearance="plain">Text</wa-button>
|
||||
<br /><br />
|
||||
<wa-radio-group label="Radio button group" name="a" value="1">
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
```
|
||||
|
||||
## Form controls
|
||||
|
||||
```html {.example}
|
||||
<wa-checkbox>Unchecked</wa-checkbox>
|
||||
<br />
|
||||
<wa-checkbox checked>Checked</wa-checkbox>
|
||||
<br /><br />
|
||||
<wa-radio-group label="Radio" name="a" value="1">
|
||||
<wa-radio value="1">Option 1</wa-radio>
|
||||
<wa-radio value="2">Option 2</wa-radio>
|
||||
<wa-radio value="3">Option 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
<br />
|
||||
<wa-switch>Switch off</wa-switch>
|
||||
<br />
|
||||
<wa-switch checked>Switch on</wa-switch>
|
||||
<br /><br />
|
||||
<wa-slider label="Range" hint="Here's a bit of handy content." min="0" max="100"></wa-slider>
|
||||
<br /><br />
|
||||
<wa-input label="Label" hint="Super helpful and/or contextual content" placeholder="Placeholder"></wa-input>
|
||||
<br />
|
||||
<wa-select label="Select" multiple value="option-1 option-2">
|
||||
<wa-option value="option-1">Option 1</wa-option>
|
||||
<wa-option value="option-2">Option 2</wa-option>
|
||||
<wa-option value="option-3">Option 3</wa-option>
|
||||
<wa-option value="option-4">Option 4</wa-option>
|
||||
<wa-option value="option-5">Option 5</wa-option>
|
||||
<wa-option value="option-6">Option 6</wa-option>
|
||||
</wa-select>
|
||||
```
|
||||
|
||||
## Progress
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-ring value="25" style="--indicator-width: 4px;"></wa-progress-ring>
|
||||
<wa-progress-bar value="60"></wa-progress-bar>
|
||||
<wa-spinner></wa-spinner>
|
||||
```
|
||||
|
||||
## Shadows
|
||||
|
||||
```html {.example}
|
||||
<style>
|
||||
div.shadow {
|
||||
border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
display: inline-block;
|
||||
height: 4rem;
|
||||
margin-right: 2rem;
|
||||
width: 4rem;
|
||||
}
|
||||
</style>
|
||||
<div class="shadow" style="box-shadow: var(--wa-shadow-s);"></div>
|
||||
<div class="shadow" style="box-shadow: var(--wa-shadow-m);"></div>
|
||||
<div class="shadow" style="box-shadow: var(--wa-shadow-l);"></div>
|
||||
```
|
||||
|
||||
## Alignment Tests
|
||||
|
||||
```html {.example}
|
||||
<style>
|
||||
div.test-cases > * + * {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
div.alignment {
|
||||
background: linear-gradient(to bottom, lightblue, lightblue 1px, transparent 1px, transparent), linear-gradient(to top, lightblue, lightblue 1px, transparent 1px, transparent);
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
div.alignment::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: calc(50% - 0.5px);
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
<div class="test-cases">
|
||||
<div class="alignment">
|
||||
<wa-switch size="small">OCBS</wa-switch>
|
||||
<wa-checkbox size="small">OCBS</wa-checkbox>
|
||||
<wa-radio value="1" size="small">OCBS</wa-radio>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-switch>OCBS</wa-switch>
|
||||
<wa-checkbox>OCBS</wa-checkbox>
|
||||
<wa-radio value="1">OCBS</wa-radio>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-switch size="large">OCBS</wa-switch>
|
||||
<wa-checkbox size="large">OCBS</wa-checkbox>
|
||||
<wa-radio value="1" size="large">OCBS</wa-radio>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-input size="small"></wa-input>
|
||||
<wa-select size="small" value="ocbs" multiple>
|
||||
<wa-option value="ocbs">OCBS</wa-option>
|
||||
</wa-select>
|
||||
<wa-color-picker size="small"></wa-color-picker>
|
||||
<wa-button size="small">OCBS</wa-button>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-input size="medium"></wa-input>
|
||||
<wa-select size="medium" value="ocbs" multiple>
|
||||
<wa-option value="ocbs">OCBS</wa-option>
|
||||
</wa-select>
|
||||
<wa-color-picker size="medium"></wa-color-picker>
|
||||
<wa-button size="medium">OCBS</wa-button>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-input size="large"></wa-input>
|
||||
<wa-select size="large" value="ocbs" multiple>
|
||||
<wa-option value="ocbs">OCBS</wa-option>
|
||||
</wa-select>
|
||||
<wa-color-picker size="large"></wa-color-picker>
|
||||
<wa-button size="large">OCBS</wa-button>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-badge>OCBS</wa-badge>
|
||||
<wa-avatar></wa-avatar>
|
||||
<wa-rating></wa-rating>
|
||||
<wa-slider></wa-slider>
|
||||
<wa-icon-button name="gear" label="Settings"></wa-icon-button>
|
||||
<wa-progress-bar value="50" style="width: 8rem;"></wa-progress-bar>
|
||||
<wa-spinner></wa-spinner>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-input label="AaBbCc" hint="Ipsum"></wa-input>
|
||||
<wa-select label="AaBbCc" value="ocbs" multiple hint="Ipsum">
|
||||
<wa-option value="ocbs">OCBS</wa-option>
|
||||
</wa-select>
|
||||
<wa-color-picker label="AaBbCc" hint="Ipsum"></wa-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Custom Property Tests
|
||||
|
||||
```html {.example}
|
||||
<style>
|
||||
.wa-theme-test {
|
||||
--wa-form-control-background-color: mistyrose;
|
||||
|
||||
--wa-form-control-border-style: dotted;
|
||||
--wa-form-control-border-width: 3px;
|
||||
--wa-form-control-border-radius: 12px;
|
||||
|
||||
--wa-form-control-activated-color: mediumvioletred;
|
||||
--wa-form-control-border-color: palevioletred;
|
||||
|
||||
--wa-form-control-label-color: rosybrown;
|
||||
--wa-form-control-label-font-weight: 900;
|
||||
--wa-form-control-label-line-height: 1;
|
||||
|
||||
--wa-form-control-value-color: brown;
|
||||
--wa-form-control-value-font-weight: 900;
|
||||
--wa-form-control-value-line-height: 2;
|
||||
|
||||
--wa-form-control-placeholder-color: lightpink;
|
||||
}
|
||||
</style>
|
||||
<div class="wa-theme-test" style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
|
||||
<label>Native Input <input type="text" placeholder="placeholder"></label>
|
||||
<wa-input label="WA Input" type="text" placeholder="placeholder"></wa-input>
|
||||
|
||||
<label>Native Input <input type="text" value="value"></label>
|
||||
<wa-input label="WA Input" type="text" value="value"></wa-input>
|
||||
|
||||
<label>Native Textarea <textarea placeholder="placeholder"></textarea></label>
|
||||
<wa-textarea label="WA Textarea" placeholder="placeholder"></wa-textarea>
|
||||
|
||||
<label>Native Textarea <textarea>value</textarea></label>
|
||||
<wa-textarea label="WA Textarea" value="value"></wa-textarea>
|
||||
|
||||
<label><input type="checkbox" checked> Native Checkbox</label>
|
||||
<wa-checkbox checked>WA Checkbox</wa-checkbox>
|
||||
|
||||
<label><input type="checkbox"> Native Checkbox</label>
|
||||
<wa-checkbox>WA Checkbox</wa-checkbox>
|
||||
|
||||
<label><input type="radio" checked> Native Radio</label>
|
||||
<wa-radio checked>WA Radio</wa-radio>
|
||||
|
||||
<label><input type="radio"> Native Radio</label>
|
||||
<wa-radio>WA Radio</wa-radio>
|
||||
|
||||
<label>
|
||||
Native Select
|
||||
<select value="option-1">
|
||||
<option value="option-1">Option 1</option>
|
||||
<option value="option-2">Option 2</option>
|
||||
<option value="option-3">Option 3</option>
|
||||
<option value="option-4">Option 4</option>
|
||||
</select>
|
||||
</label>
|
||||
<wa-select label="WA Select" value="option-1">
|
||||
<wa-option value="option-1">Option 1</wa-option>
|
||||
<wa-option value="option-2">Option 2</wa-option>
|
||||
<wa-option value="option-3">Option 3</wa-option>
|
||||
<wa-option value="option-4">Option 4</wa-option>
|
||||
</wa-select>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
## Text Controls Tests
|
||||
|
||||
```html {.example}
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
|
||||
<label>Native Input <input type="text" value="value"></label>
|
||||
<wa-input label="WA Input" type="text" value="value"></wa-input>
|
||||
|
||||
<label>
|
||||
Native Select
|
||||
<select value="option-1">
|
||||
<option value="option-1">Option 1</option>
|
||||
<option value="option-2">Option 2</option>
|
||||
<option value="option-3">Option 3</option>
|
||||
<option value="option-4">Option 4</option>
|
||||
</select>
|
||||
</label>
|
||||
<wa-select label="WA Select" value="option-1">
|
||||
<wa-option value="option-1">Option 1</wa-option>
|
||||
<wa-option value="option-2">Option 2</wa-option>
|
||||
<wa-option value="option-3">Option 3</wa-option>
|
||||
<wa-option value="option-4">Option 4</wa-option>
|
||||
</wa-select>
|
||||
|
||||
<label>Native Textarea <textarea>value</textarea></label>
|
||||
<wa-textarea label="WA Textarea" value="value"></wa-textarea>
|
||||
</div>
|
||||
```
|
||||
75
docs/docs/experimental/size.md
Normal file
75
docs/docs/experimental/size.md
Normal file
@@ -0,0 +1,75 @@
|
||||
---
|
||||
title: Size tests
|
||||
---
|
||||
|
||||
Button size should default to `medium`:
|
||||
|
||||
```html {.example}
|
||||
<wa-button size=small>Small</wa-button>
|
||||
<wa-button>Medium</wa-button>
|
||||
<wa-button size=medium>Medium</wa-button>
|
||||
<wa-button size=large>Large</wa-button>
|
||||
```
|
||||
|
||||
If no button size is specified, it should default to that of its ancestor:
|
||||
|
||||
```html {.example}
|
||||
<wa-button-group size="small">
|
||||
<wa-button>Small 1</wa-button>
|
||||
<wa-button>Small 2</wa-button>
|
||||
<wa-button>Small 3</wa-button>
|
||||
</wa-button-group>
|
||||
<br><br>
|
||||
<wa-button-group>
|
||||
<wa-button>Medium 1</wa-button>
|
||||
<wa-button>Medium 2</wa-button>
|
||||
<wa-button>Medium 3</wa-button>
|
||||
</wa-button-group>
|
||||
<br><br>
|
||||
<wa-button-group size="large">
|
||||
<wa-button>Large 1</wa-button>
|
||||
<wa-button>Large 2</wa-button>
|
||||
<wa-button>Large 3</wa-button>
|
||||
</wa-button-group>
|
||||
```
|
||||
|
||||
Dropdown:
|
||||
|
||||
```html {.example}
|
||||
<p>Small dropdown:
|
||||
<wa-dropdown size="small">
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Dropdown Item 1</wa-menu-item>
|
||||
<wa-menu-item>Dropdown Item 2</wa-menu-item>
|
||||
<wa-menu-item>Dropdown Item 3</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
<p>Small menu:
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-menu size="small">
|
||||
<wa-menu-item>Dropdown Item 1</wa-menu-item>
|
||||
<wa-menu-item>Dropdown Item 2</wa-menu-item>
|
||||
<wa-menu-item>Dropdown Item 3</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
<p>Small menu item:
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item size="small">Dropdown Item 1</wa-menu-item>
|
||||
<wa-menu-item size="small">Dropdown Item 2</wa-menu-item>
|
||||
<wa-menu-item size="small">Dropdown Item 3</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
<p>No size:
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Dropdown Item 1</wa-menu-item>
|
||||
<wa-menu-item>Dropdown Item 2</wa-menu-item>
|
||||
<wa-menu-item>Dropdown Item 3</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
```
|
||||
@@ -803,7 +803,7 @@ hasOutline: false
|
||||
const queue = [];
|
||||
let inputTimeout;
|
||||
|
||||
variantInput.addEventListener('wa-change', () => {
|
||||
variantInput.addEventListener('change', () => {
|
||||
iconList.dataset.variant = variantInput.value;
|
||||
});
|
||||
|
||||
@@ -823,7 +823,7 @@ hasOutline: false
|
||||
});
|
||||
|
||||
// Filter as the user types
|
||||
input.addEventListener('wa-input', () => {
|
||||
input.addEventListener('input', () => {
|
||||
clearTimeout(inputTimeout);
|
||||
inputTimeout = setTimeout(() => {
|
||||
[...iconList.children].map(item => {
|
||||
@@ -1084,10 +1084,10 @@ hasOutline: false
|
||||
el.classList.add(`wa-theme-${theme}-${colorMode}`);
|
||||
}
|
||||
|
||||
colorModeSelect.addEventListener('wa-change', setColorMode);
|
||||
colorModeSelect.addEventListener('change', setColorMode);
|
||||
|
||||
// Theme Switcher
|
||||
themeSelect.addEventListener('wa-change', event => {
|
||||
themeSelect.addEventListener('change', event => {
|
||||
const theme = event.target.value
|
||||
const newStylesheet = Object.assign(document.createElement("link"), {
|
||||
// This media: "print" allows us to lazy load the stylesheet then hot swap it on load.
|
||||
@@ -1132,14 +1132,14 @@ hasOutline: false
|
||||
});
|
||||
|
||||
// Color Palette
|
||||
colorSelect.addEventListener('wa-change', event => {
|
||||
colorSelect.addEventListener('change', event => {
|
||||
const colorPalette = event.target.value;
|
||||
|
||||
colorStylesheet.href = `/dist/styles/themes/color/${colorPalette}.css`;
|
||||
});
|
||||
|
||||
// Brand Color
|
||||
brandColor.addEventListener('wa-change', event => {
|
||||
brandColor.addEventListener('change', event => {
|
||||
const documentStyles = document.documentElement.style
|
||||
documentStyles.setProperty('--wa-color-primary-95', `var(--wa-color-${event.target.value}-95)`);
|
||||
documentStyles.setProperty('--wa-color-primary-90', `var(--wa-color-${event.target.value}-90)`);
|
||||
@@ -1223,7 +1223,7 @@ hasOutline: false
|
||||
})
|
||||
|
||||
// Pre-generated logos
|
||||
logoSelector.addEventListener('wa-change', event => {
|
||||
logoSelector.addEventListener('change', event => {
|
||||
const value = event.currentTarget.value
|
||||
|
||||
const projectLogo = previewContainer.querySelector("#project-logo");
|
||||
@@ -1279,21 +1279,21 @@ hasOutline: false
|
||||
})
|
||||
}
|
||||
|
||||
themeSelect.addEventListener('wa-change', setLogoIcons);
|
||||
themeSelect.addEventListener('change', setLogoIcons);
|
||||
|
||||
// Project Name
|
||||
container.querySelector('[name="project-name"]').addEventListener('wa-input', event => {
|
||||
container.querySelector('[name="project-name"]').addEventListener('input', event => {
|
||||
previewContainer.querySelector("#project-name").innerText = event.target.value || event.target.getAttribute("placeholder")
|
||||
})
|
||||
|
||||
// Heading font weight
|
||||
resetHeadingFontWeightValue()
|
||||
fontWeightHeading.addEventListener('wa-input', event => {
|
||||
fontWeightHeading.addEventListener('input', event => {
|
||||
document.documentElement.style.setProperty('--wa-font-weight-heading', event.target.value);
|
||||
});
|
||||
|
||||
// Heading text
|
||||
fontFamilyHeading.addEventListener('wa-change', event => {
|
||||
fontFamilyHeading.addEventListener('change', event => {
|
||||
let fontFamily;
|
||||
switch (event.target.value) {
|
||||
case 'assistant':
|
||||
@@ -1351,7 +1351,7 @@ hasOutline: false
|
||||
})
|
||||
|
||||
// Body text
|
||||
fontFamilyBody.addEventListener('wa-change', event => {
|
||||
fontFamilyBody.addEventListener('change', event => {
|
||||
let fontFamily;
|
||||
switch (event.target.value) {
|
||||
case 'assistant':
|
||||
@@ -1404,7 +1404,7 @@ hasOutline: false
|
||||
|
||||
// Body font weight
|
||||
resetBodyFontWeightValue()
|
||||
fontWeightBody.addEventListener('wa-input', event => {
|
||||
fontWeightBody.addEventListener('input', event => {
|
||||
document.documentElement.style.setProperty('--wa-font-weight-body', event.target.value);
|
||||
});
|
||||
|
||||
@@ -1580,7 +1580,7 @@ hasOutline: false
|
||||
}
|
||||
|
||||
// Swaps icons to the preferred set for the selected theme
|
||||
themeSelect.addEventListener('wa-change', event => {
|
||||
themeSelect.addEventListener('change', event => {
|
||||
setPreferredIcons();
|
||||
showIconStyleOptions();
|
||||
syncLogoIcon();
|
||||
@@ -1599,32 +1599,32 @@ hasOutline: false
|
||||
});
|
||||
|
||||
// Changes available Icon Styles and swaps icons based on the selected Icon Family
|
||||
iconFamily.addEventListener('wa-change', event => {
|
||||
iconFamily.addEventListener('change', event => {
|
||||
useFaIcons();
|
||||
showIconStyleOptions();
|
||||
});
|
||||
|
||||
// Swaps icons based on the selected Icon Style
|
||||
iconStyle.addEventListener('wa-change', useFaIcons);
|
||||
iconStyle.addEventListener('change', useFaIcons);
|
||||
|
||||
|
||||
// Corners
|
||||
container.querySelector('[name="corners"]').addEventListener('wa-input', event => {
|
||||
container.querySelector('[name="corners"]').addEventListener('input', event => {
|
||||
document.documentElement.style.setProperty('--wa-border-radius-scale', `${event.target.value}`);
|
||||
});
|
||||
|
||||
// Border width
|
||||
container.querySelector('[name="border-width"]').addEventListener('wa-input', event => {
|
||||
container.querySelector('[name="border-width"]').addEventListener('input', event => {
|
||||
document.documentElement.style.setProperty('--wa-border-width-scale', `${event.target.value / 16}`);
|
||||
});
|
||||
|
||||
// Border style
|
||||
borderStyle.addEventListener('wa-input', event => {
|
||||
borderStyle.addEventListener('input', event => {
|
||||
document.documentElement.style.setProperty('--wa-border-style', event.target.value);
|
||||
});
|
||||
|
||||
// Spacing style
|
||||
spacing.addEventListener('wa-input', event => {
|
||||
spacing.addEventListener('input', event => {
|
||||
document.documentElement.style.setProperty('--wa-space-scale', `${event.target.value}`);
|
||||
});
|
||||
|
||||
|
||||
@@ -146,7 +146,7 @@ To create a custom validation error, pass a non-empty string to the `setCustomVa
|
||||
alert('All fields are valid!');
|
||||
});
|
||||
|
||||
input.addEventListener('wa-input', () => {
|
||||
input.addEventListener('input', () => {
|
||||
if (input.value === 'webawesome') {
|
||||
input.setCustomValidity('');
|
||||
} else {
|
||||
|
||||
@@ -6,7 +6,7 @@ layout: page-outline
|
||||
|
||||
Welcome to the Web Awesome alpha release for early backers! 👋
|
||||
|
||||
==This is a very early alpha release!== For this preview, we're only offering access to the free components through a temporary CDN. Please be aware: Things can change. Things can break. You probably shouldn't be using this software in production yet! But fear not, we're working hard to polish up the free stuff you see here _plus_ all the great stuff we have planned for Web Awesome Pro!
|
||||
==This is a very early alpha release!== For this preview, we're offering access to Web Awesome through a temporary CDN. Please be aware: Things can change. Things can break. You probably shouldn't be using this software in production yet! But fear not, we're working hard to polish up everything you see here _plus_ all the great stuff we have planned for Web Awesome Pro!
|
||||
|
||||
Thank you so much for backing us!
|
||||
|
||||
@@ -20,22 +20,78 @@ As a Web Awesome backer, this early alpha release is _just for you_. Please refr
|
||||
|
||||
---
|
||||
|
||||
## Autoloading via CDN (Easiest)
|
||||
## Quick Start (Autoloading via CDN)
|
||||
|
||||
The autoloader is the easiest way to use Web Awesome. A lightweight script watches the DOM for unregistered Web Awesome elements and lazy loads them for you — even if they're added dynamically.
|
||||
To get everything included in Web Awesome, add the following code to the `<head>` of your site:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/default.css' %}" />
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
|
||||
<script type="module" src="{% cdnUrl 'webawesome.loader.js' %}"></script>
|
||||
```
|
||||
|
||||
This snippet includes three parts:
|
||||
1. **The default theme**, a stylesheet that gives a cohesive look to Web Awesome components with both light and dark modes
|
||||
2. **Web Awesome styles**, an optional stylesheet that [styles native HTML elements](/docs/native) and includes [utility classes](/docs/utilities) you can use in your project
|
||||
3. **The autoloader**, a lightweight script watches the DOM for unregistered Web Awesome elements and lazy loads them for you — even if they're added dynamically
|
||||
|
||||
Now you can [start using Web Awesome!](/docs/usage)
|
||||
|
||||
:::info
|
||||
While convenient, autoloading may lead to a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/). The linked article describes some ways to alleviate it.
|
||||
:::
|
||||
|
||||
## Setting the Base Path
|
||||
---
|
||||
|
||||
## Using Font Awesome Kit Codes
|
||||
|
||||
Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You can provide it by adding the `data-fa-kit-code` attribute to any element on the page, or by calling the `setKitCode()` method.
|
||||
|
||||
```html
|
||||
<!-- Option 1: the data-fa-kit-code attribute -->
|
||||
<script src="bundle.js" data-fa-kit-code="abc123"></script>
|
||||
|
||||
<!-- Option 2: the setKitCode() method -->
|
||||
<script type="module">
|
||||
import { setKitCode } from '{% cdnUrl 'webawesome.loader.js' %}';
|
||||
setKitCode('YOUR_KIT_CODE_HERE');
|
||||
</script>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Advanced Setup
|
||||
|
||||
The autoloader is the easiest way to use Web Awesome, but different projects (or your own preferences!) may require different installation methods.
|
||||
|
||||
### Installing via npm
|
||||
|
||||
An npm package isn't available in the early backer alpha release, but we'll have one soon! For now, please enjoy [Web Awesome from the CDN](#quick-start-autoloading-via-cdn).
|
||||
|
||||
### Cherry Picking
|
||||
|
||||
Cherry picking will only load the components you need up front, while limiting the number of files the browser has to download. The disadvantage is that you need to import each individual component on each page it's used. You'll still need to include the default theme (`styles/themes/default.css`) or another theme to style any imported components.
|
||||
|
||||
Here's an example that loads only the button component.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/default.css' %}" />
|
||||
|
||||
<script type="module">
|
||||
import '{% cdnUrl 'components/button/button.js' %}';
|
||||
|
||||
// <wa-button> is ready to use!
|
||||
</script>
|
||||
```
|
||||
|
||||
You can copy and paste the code to import a component from the "Importing" section of the component's documentation. Note that some components have dependencies that are automatically imported when you cherry pick. If a component has dependencies, they will be listed in the "Dependencies" section of its docs.
|
||||
|
||||
:::warning
|
||||
You will see files named `chunk.[hash].js` in the `chunks` directory. Never import these files directly, as they are generated and change from version to version.
|
||||
:::
|
||||
|
||||
|
||||
### Setting the Base Path
|
||||
|
||||
Some components rely on assets (icons, images, etc.) and Web Awesome needs to know where they're located. For convenience, Web Awesome will try to auto-detect the correct location based on the script you've loaded it from. This assumes assets are colocated with `webawesome.loader.js` and will "just work" for most users.
|
||||
|
||||
@@ -70,45 +126,4 @@ Most of the magic behind assets is handled internally by Web Awesome, but if you
|
||||
// Get the path to an asset, e.g. /path/to/assets/file.ext
|
||||
const assetPath = getBasePath('file.ext');
|
||||
</script>
|
||||
```
|
||||
|
||||
## Using Font Awesome Kit Codes
|
||||
|
||||
Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You can provide it by adding the `data-fa-kit-code` attribute to any element on the page, or by calling the `setKitCode()` method.
|
||||
|
||||
```html
|
||||
<!-- Option 1: the data-fa-kit-code attribute -->
|
||||
<script src="bundle.js" data-fa-kit-code="abc123"></script>
|
||||
|
||||
<!-- Option 2: the setKitCode() method -->
|
||||
<script type="module">
|
||||
import { setKitCode } from '/path/to/web-awesome/dist/webawesome.js';
|
||||
setKitCode('YOUR_KIT_CODE_HERE');
|
||||
</script>
|
||||
```
|
||||
|
||||
## Cherry Picking
|
||||
|
||||
Cherry picking will only load the components you need up front, while limiting the number of files the browser has to download. The disadvantage is that you need to import each individual component on each page it's used.
|
||||
|
||||
Here's an example that loads only the button component.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="/path/to/web-awesome/dist/styles/themes/default.css" />
|
||||
|
||||
<script type="module" data-webawesome="/path/to/web-awesome/dist">
|
||||
import '/path/to/web-awesome/dist/components/button/button.js';
|
||||
|
||||
// <wa-button> is ready to use!
|
||||
</script>
|
||||
```
|
||||
|
||||
You can copy and paste the code to import a component from the "Importing" section of the component's documentation. Note that some components have dependencies that are automatically imported when you cherry pick. If a component has dependencies, they will be listed in the "Dependencies" section of its docs.
|
||||
|
||||
:::warning
|
||||
You will see files named `chunk.[hash].js` in the `chunks` directory. Never import these files directly, as they are generated and change from version to version.
|
||||
:::
|
||||
|
||||
## Using Web Awesome with npm
|
||||
|
||||
An npm package isn't available in the early backer alpha release, but we'll have one soon! For now, please enjoy Web Awesome from the CDN as shown above.
|
||||
```
|
||||
@@ -1,7 +1,25 @@
|
||||
---
|
||||
title: Layout
|
||||
description: Layout components and utility classes help you organize content that can adapt to any device or screen size. Browse the collection of responsive layout tools included in Web Awesome Pro.
|
||||
description: Layout components and utility classes help you organize content that can adapt to any device or screen size. See the [installation instructions](#installation) to use Web Awesome's layout tools in your project.
|
||||
layout: overview
|
||||
categories: ["components", "utilities"]
|
||||
override:tags: []
|
||||
---
|
||||
|
||||
{% markdown %}
|
||||
## Installation
|
||||
|
||||
Layout components are included in Web Awesome's [autoloader](/docs/installation/#quick-start-autoloading-via-cdn). You can also import them individually via [cherry picking](/docs/installation/#cherry-picking).
|
||||
|
||||
Layout utilities are bundled with all [style utilities](/docs/utilities). You can import all Web Awesome page styles (including [native styles](/docs/native/)) by including the following stylesheet in your project:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
|
||||
```
|
||||
|
||||
Or, you can choose to import _only_ the utilities:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
|
||||
```
|
||||
{% endmarkdown %}
|
||||
@@ -7,6 +7,7 @@ icon: button
|
||||
snippets:
|
||||
'<button>': https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
|
||||
'.wa-button': false
|
||||
file: styles/native/button.css
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -36,34 +37,44 @@ Use the [appearance utility classes](../utilities/appearance.md) to change the b
|
||||
|
||||
```html {.example}
|
||||
<div style="margin-block-end: 1rem;">
|
||||
<button class="wa-accent wa-outlined wa-neutral">A + O</button>
|
||||
<button class="wa-accent wa-neutral">Accent</button>
|
||||
<button class="wa-filled wa-neutral">Filled</button>
|
||||
<button class="wa-outlined wa-neutral">Outlined</button>
|
||||
<button class="wa-plain wa-neutral">Text</button>
|
||||
<button class="wa-filled wa-outlined wa-neutral">F + O</button>
|
||||
<button class="wa-filled wa-neutral">Filled</button>
|
||||
<button class="wa-plain wa-neutral">Plain</button>
|
||||
</div>
|
||||
<div style="margin-block-end: 1rem;">
|
||||
<button class="wa-accent wa-outlined wa-brand">A + O</button>
|
||||
<button class="wa-accent wa-brand">Accent</button>
|
||||
<button class="wa-filled wa-brand">Filled</button>
|
||||
<button class="wa-outlined wa-brand">Outlined</button>
|
||||
<button class="wa-plain wa-brand">Text</button>
|
||||
<button class="wa-filled wa-outlined wa-brand">F + O</button>
|
||||
<button class="wa-filled wa-brand">Filled</button>
|
||||
<button class="wa-plain wa-brand">Plain</button>
|
||||
</div>
|
||||
<div style="margin-block-end: 1rem;">
|
||||
<button class="wa-accent wa-outlined wa-success">A + O</button>
|
||||
<button class="wa-accent wa-success">Accent</button>
|
||||
<button class="wa-filled wa-success">Filled</button>
|
||||
<button class="wa-outlined wa-success">Outlined</button>
|
||||
<button class="wa-plain wa-success">Text</button>
|
||||
<button class="wa-filled wa-outlined wa-success">F + O</button>
|
||||
<button class="wa-filled wa-success">Filled</button>
|
||||
<button class="wa-plain wa-success">Plain</button>
|
||||
</div>
|
||||
<div style="margin-block-end: 1rem;">
|
||||
<button class="wa-accent wa-outlined wa-warning">A + O</button>
|
||||
<button class="wa-accent wa-warning">Accent</button>
|
||||
<button class="wa-filled wa-warning">Filled</button>
|
||||
<button class="wa-outlined wa-warning">Outlined</button>
|
||||
<button class="wa-plain wa-warning">Text</button>
|
||||
<button class="wa-filled wa-outlined wa-warning">F + O</button>
|
||||
<button class="wa-filled wa-warning">Filled</button>
|
||||
<button class="wa-plain wa-warning">Plain</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="wa-accent wa-outlined wa-danger">A + O</button>
|
||||
<button class="wa-accent wa-danger">Accent</button>
|
||||
<button class="wa-filled wa-danger">Filled</button>
|
||||
<button class="wa-outlined wa-danger">Outlined</button>
|
||||
<button class="wa-plain wa-danger">Text</button>
|
||||
<button class="wa-filled wa-outlined wa-danger">F + O</button>
|
||||
<button class="wa-filled wa-danger">Filled</button>
|
||||
<button class="wa-plain wa-danger">Plain</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@ component: callout
|
||||
icon: callout
|
||||
snippets: '.wa-callout'
|
||||
noAlpha: true
|
||||
file: styles/native/callout.css
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -6,6 +6,7 @@ component: checkbox
|
||||
icon: checkbox
|
||||
elements:
|
||||
"<input type=checkbox>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
|
||||
file: styles/native/checkbox.css
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -4,6 +4,25 @@ description: 'Content styles apply your Web Awesome theme to HTML text content,
|
||||
tags: content
|
||||
layout: element
|
||||
icon: skeleton
|
||||
elements:
|
||||
"<h1>-<h6>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
|
||||
"<blockquote>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
|
||||
"<strong>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong
|
||||
"<em>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em
|
||||
"<u>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u
|
||||
"<del>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del
|
||||
"<ins>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins
|
||||
"<s>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s
|
||||
"<small>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small
|
||||
"<sub>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub
|
||||
"<sup>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup
|
||||
"<abbr>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr
|
||||
"<kbd>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd
|
||||
"<mark>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark
|
||||
"<a>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
|
||||
"<code>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code
|
||||
"<img>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
|
||||
file: styles/native/content.css
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -7,6 +7,7 @@ component: details
|
||||
icon: details
|
||||
elements:
|
||||
"<details>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
|
||||
file: styles/native/details.css
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -6,6 +6,7 @@ icon: dialog
|
||||
elements:
|
||||
"<dialog>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
|
||||
component: dialog
|
||||
file: styles/native/dialog.css
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Native Styles
|
||||
description: Native Styles use your theme to style native HTML elements to match the look and feel of Web Awesome components.
|
||||
description: Native styles apply your theme to native HTML elements so they match the look and feel of Web Awesome components.
|
||||
See the [installation instructions](#installation) to use native styles in your project.
|
||||
layout: overview
|
||||
categories: ['forms', 'apps', 'content']
|
||||
override:tags: []
|
||||
@@ -19,7 +20,7 @@ To use all Web Awesome page styles (including [utilities](/docs/utilities/)), in
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
|
||||
```
|
||||
|
||||
Or, to _only_ include styles for built-in elements:
|
||||
Or, to _only_ include styles for native elements:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/native.css' %}" />
|
||||
|
||||
@@ -6,6 +6,7 @@ icon: input
|
||||
component: input
|
||||
elements:
|
||||
"<input>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
|
||||
file: styles/native/input.css
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -7,6 +7,7 @@ elements:
|
||||
"<ul>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
|
||||
"<ol>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol
|
||||
"<dl>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl
|
||||
file: styles/native/lists.css
|
||||
---
|
||||
|
||||
## Unordered Lists
|
||||
|
||||
@@ -7,6 +7,7 @@ status: experimental
|
||||
component: progress-bar
|
||||
elements:
|
||||
"<progress>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
|
||||
file: styles/native/progress.css
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -6,21 +6,14 @@ icon: radio-group
|
||||
component: radio
|
||||
elements:
|
||||
"<input type=radio>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
|
||||
file: styles/native/radio.css
|
||||
---
|
||||
|
||||
<style>
|
||||
label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
label + label {
|
||||
margin-inline-start: var(--wa-space);
|
||||
}
|
||||
</style>
|
||||
|
||||
```html {.example}
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
<div class="wa-cluster">
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Examples
|
||||
@@ -30,9 +23,11 @@ elements:
|
||||
To set the initial value and checked state, use the `checked` attribute on the corresponding radio.
|
||||
|
||||
```html {.example}
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3" checked> Option 3</label>
|
||||
<div class="wa-cluster">
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3" checked> Option 3</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Disabled
|
||||
@@ -40,9 +35,11 @@ To set the initial value and checked state, use the `checked` attribute on the c
|
||||
Use the `disabled` attribute to disable a radio.
|
||||
|
||||
```html {.example}
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2" disabled> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3"> Option 3</label>
|
||||
<div class="wa-cluster">
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2" disabled> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3"> Option 3</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Sizes
|
||||
@@ -50,27 +47,47 @@ Use the `disabled` attribute to disable a radio.
|
||||
Use the [size utilities](/docs/utilities/size) to change the radios' size.
|
||||
|
||||
```html {.example}
|
||||
<fieldset class="wa-size-s">
|
||||
<legend>Small</legend>
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3"> Option 3</label>
|
||||
<fieldset class="wa-size-s wa-cluster">
|
||||
<legend>Small</legend>
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3"> Option 3</label>
|
||||
</fieldset>
|
||||
|
||||
<br />
|
||||
<fieldset class="wa-size-m">
|
||||
<legend>Medium</legend>
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3"> Option 3</label>
|
||||
<fieldset class="wa-size-m wa-cluster">
|
||||
<legend>Medium</legend>
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3"> Option 3</label>
|
||||
</fieldset>
|
||||
|
||||
<br />
|
||||
|
||||
<fieldset class="wa-size-l">
|
||||
<legend>Large</legend>
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3"> Option 3</label>
|
||||
<fieldset class="wa-size-l wa-cluster">
|
||||
<legend>Large</legend>
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3"> Option 3</label>
|
||||
</fieldset>
|
||||
```
|
||||
|
||||
### Orientation
|
||||
|
||||
You can wrap native radios in a flex container to give them a horizontal or vertical orientation with even spacing. The convenience [`wa-cluster`](/docs/utilities/cluster) and [`wa-stack`](/docs/utilities/stack) utilities make this easy.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-cluster">
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3" checked> Option 3</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3" checked> Option 3</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
@@ -6,6 +6,7 @@ icon: select
|
||||
component: select
|
||||
elements:
|
||||
"<select>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
|
||||
file: styles/native/select.css
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -7,6 +7,7 @@ icon: slider
|
||||
component: slider
|
||||
elements:
|
||||
"<input type=range>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
|
||||
file: styles/native/slider.css
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -4,6 +4,7 @@ description: 'Table styles apply your Web Awesome theme to the HTML table conten
|
||||
tags: content
|
||||
elements:
|
||||
"<table>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
|
||||
file: styles/native/tables.css
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -6,6 +6,7 @@ icon: textarea
|
||||
component: textarea
|
||||
elements:
|
||||
"<textarea>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
|
||||
file: styles/native/input.css
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
{
|
||||
"layout": "block.njk",
|
||||
"tags": ["patterns"],
|
||||
"wide": true,
|
||||
"noAlpha": true
|
||||
}
|
||||
|
||||
@@ -14,9 +14,32 @@ During the alpha period, things might break! We take breaking changes very serio
|
||||
|
||||
## Next
|
||||
|
||||
- Added an orientation example to the native radio docs
|
||||
- Added the `tag` part (and associated exported parts) to `<wa-select>` to allow targeting the tag that shows when more than the max number of visible items have been selected
|
||||
- Fixed a number of broken event listeners throughout the docs
|
||||
- Fixed a bug in `<wa-card>` that prevented slots from showing automatically without `with-` attributes
|
||||
- Fixed a bug in `<wa-select>` that prevented the placeholder color from being customized with the `--wa-form-control-placeholder-color` token
|
||||
|
||||
## 3.0.0-alpha.10
|
||||
|
||||
- 🚨 BREAKING: updated all components to use native events instead of `wa-` prefixed events. This will allow components to work more like native elements in your code, frameworks, third-party plugins, etc. To update your code, simply remove the prefix from your event listeners for the following events.
|
||||
- `wa-input` => `input`
|
||||
- `wa-change` => `change`
|
||||
- `wa-blur` => `blur` (this event will no longer bubble, use `focusout` for a bubbling version)
|
||||
- `wa-focus` => `focus` (this event will no longer bubble, use `focusin` for a bubbling version)
|
||||
- Added `.wa-callout` utility class
|
||||
- Added the `orientation` attribute to `<wa-radio-group>` to support vertical and horizontal radio items
|
||||
- Added docs for visual tests
|
||||
- Added docs on how to cherry-pick native styles
|
||||
- Changed the behavior of the `variant` and `size` attributes so that nested components that support these attributes but do not have them set inherit the values set on their ancestors. Additionally:
|
||||
- Added `size` attribute to `<wa-dropdown>`, `<wa-button-group>`, `<wa-menu>`, `<wa-rating>`, `<wa-card>`
|
||||
- Added `variant` attribute to `<wa-button-group>`
|
||||
- Fixed a bug in `<wa-tab-group>` that prevented nested tab groups from working properly
|
||||
- Fixed slot names for `show-password-icon` and `hide-password-icon` in `<wa-input>` to more intuitively represent their functions
|
||||
- Fixed a bug in `<wa-textarea>` that caused empty controls to submit a value if the initial value was deleted a certain way
|
||||
- Fixed a bug in `<input>`, `<textarea>`, and `<select>` styles that prevented full-width controls from using 100% width when wrapped in a `<label>`
|
||||
- Fixed a bug in `<select>` styles that caused the caret to block interactions and prevented the caret from rendering unless wrapped in a `<label>`
|
||||
- Fixed a bug in `<wa-checkbox>` that caused hints to render inline with the label
|
||||
|
||||
## 3.0.0-alpha.9
|
||||
|
||||
|
||||
115
docs/docs/resources/visual-tests.md
Normal file
115
docs/docs/resources/visual-tests.md
Normal file
@@ -0,0 +1,115 @@
|
||||
---
|
||||
title: Visual Tests
|
||||
description: TODO
|
||||
layout: page
|
||||
wide: true
|
||||
---
|
||||
|
||||
<style>
|
||||
p {
|
||||
max-width: 90ch;
|
||||
}
|
||||
tbody {
|
||||
& .wa-grid {
|
||||
--min-column-size: 5ch;
|
||||
}
|
||||
& tr th:first-of-type {
|
||||
width: 20ch;
|
||||
}
|
||||
& th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
& tr:hover {
|
||||
background-color: color-mix(in oklch, var(--wa-color-fill-quiet), transparent 60%)
|
||||
}
|
||||
}
|
||||
wa-divider {
|
||||
--width: var(--wa-border-width-m);
|
||||
--spacing: var(--wa-space-3xl);
|
||||
}
|
||||
.test-failure::before {
|
||||
content: '\f071';
|
||||
color: red;
|
||||
font-family: 'Font Awesome 6 Duotone', 'Font Awesome 6 Free';
|
||||
font-size: 1em;
|
||||
font-weight: 900;
|
||||
margin-inline-end: 0.5rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
With so many ways to build with and use Web Awesome components, visual tests help ensure consistency and prevent broken styles from leaking into production.
|
||||
|
||||
These tests can come in handy when creating or customizing your own theme. Look through each test case to make sure that custom styles in your theme cover all of the attributes, utilities, and built-in styles Web Awesome offers.
|
||||
|
||||
Known test failures that affect the entire library, regardless of theme, are indicated by <wa-icon name="triangle-exclamation" family="duotone" style="color: red;" label="alert icon"></wa-icon> and will be addressed in a future release.
|
||||
|
||||
<wa-tab-group>
|
||||
<wa-tab panel="appearance">Appearance</wa-tab>
|
||||
<wa-tab panel="alignment">Alignment</wa-tab>
|
||||
<wa-tab panel="color">Color</wa-tab>
|
||||
<wa-tab panel="harmony">Harmony</wa-tab>
|
||||
<wa-tab panel="native">Native Styles</wa-tab>
|
||||
<wa-tab panel="size">Size</wa-tab>
|
||||
|
||||
<wa-tab-panel name="appearance">
|
||||
|
||||
## Appearance
|
||||
|
||||
Appearance tests ensure that both the `appearance` attribute and `.wa-[appearance]` classes have identical results for components that support them. Developers should be able to use both of these interchangeably on components to get the intended look and feel.
|
||||
|
||||
{% include 'visual-tests/appearance.njk' %}
|
||||
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="alignment">
|
||||
|
||||
## Alignment
|
||||
|
||||
Alignment tests reveal the top boundary, vertical center, and bottom boundary of components. These help to evaluate how well components align with one another when arranged horizontally.
|
||||
|
||||
{% include 'visual-tests/alignment.njk' %}
|
||||
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="color">
|
||||
|
||||
## Color
|
||||
|
||||
Color tests ensure that both the `variant` attribute and `.wa-[variant]` classes have identical results for components that support them. Developers should be able to use both of these interchangeably to give the component the intended semantic color.
|
||||
|
||||
{% include 'visual-tests/color.njk' %}
|
||||
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="harmony">
|
||||
|
||||
## Harmony
|
||||
|
||||
Harmony tests show how related components look together. These can help validate design choices or reveal where design intervention is needed to get a consistent, harmonious look and feel.
|
||||
|
||||
{% include 'visual-tests/harmony.njk' %}
|
||||
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="native">
|
||||
|
||||
## Native Styles
|
||||
|
||||
Native styles tests ensure that supported native elements and component utilities look the same as their Web Awesome component counterparts. Native elements and component utilities may also support the same [appearance](/docs/utilities/appearance/), [color](/docs/utilities/color/), and [size](/docs/utilities/size/) utilities as components.
|
||||
|
||||
{% include 'visual-tests/native.njk' %}
|
||||
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="size">
|
||||
|
||||
## Size
|
||||
|
||||
Size tests ensure that both the `size` attribute and `.wa-size-[s|m|l]` classes have identical results for components that support them. Developers should be able to use both of these interchangeably on components to get the intended size.
|
||||
|
||||
{% include 'visual-tests/size.njk' %}
|
||||
|
||||
</wa-tab-panel>
|
||||
|
||||
</wa-tab-group>
|
||||
5
docs/docs/themes/index.njk
vendored
5
docs/docs/themes/index.njk
vendored
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Themes
|
||||
description: Themes are collections of predefined CSS custom properties that thread through every Web Awesome component and pattern.
|
||||
description: Themes are collections of design tokens that thread through every Web Awesome component and pattern.
|
||||
Themes play a crucial role in [customizing Web Awesome](/docs/customizing).
|
||||
layout: overview
|
||||
override:tags: []
|
||||
forTag: theme
|
||||
@@ -14,7 +15,7 @@ categories:
|
||||
|
||||
## What's a Theme?
|
||||
|
||||
A theme is a collection of standardized [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), also called "design tokens," that cover a range of styles from colors to transitions. We use these tokens throughout Web Awesome components for a cohesive look and feel. Our [Design Tokens pages](/docs/tokens/) document these styles so that you can use them freely throughout your project and customize them as needed.
|
||||
A theme is a collection of standardized [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), also called "design tokens," that cover a range of styles from colors to transitions. We use these tokens throughout Web Awesome components for a cohesive look and feel. Our [Design Tokens section](/docs/tokens/) document these styles so that you can use them freely throughout your project and customize them as needed.
|
||||
|
||||
Themes are scoped to unique classes, such as `wa-theme-default` or `wa-theme-classic`.
|
||||
Scoping to unique classes allows you to import multiple themes and use them interchangeably without collisions.
|
||||
|
||||
1
docs/docs/themes/themes.json
vendored
1
docs/docs/themes/themes.json
vendored
@@ -1,4 +1,5 @@
|
||||
{
|
||||
"layout": "theme.njk",
|
||||
"wide": true,
|
||||
"tags": ["themes", "theme"]
|
||||
}
|
||||
|
||||
@@ -24,22 +24,9 @@ Some properties are boolean, so they only have true/false values. To activate a
|
||||
|
||||
## Events
|
||||
|
||||
You can listen for standard events such as `click`, `mouseover`, etc. as you normally would. However, it's important to note that many events emitted within a component's shadow root will be [retargeted](https://dom.spec.whatwg.org/#retarget) to the host element. This may result in, for example, multiple `click` handlers executing even if the user clicks just once. Furthermore, `event.target` will point to the host element, making things even more confusing.
|
||||
You can listen for standard events such as `click`, `mouseover`, etc. as you normally would. In addition, some components have their own custom events. For example, you might listen to `wa-after-show` to determine when a dialog has been shown.
|
||||
|
||||
As a result, you should almost always listen for Web Awesome events instead. For example, instead of listening to `click` to determine when an `<wa-checkbox>` gets toggled, listen to `wa-change`.
|
||||
|
||||
```html
|
||||
<wa-checkbox>Check me</wa-checkbox>
|
||||
|
||||
<script>
|
||||
const checkbox = document.querySelector('wa-checkbox');
|
||||
checkbox.addEventListener('wa-change', event => {
|
||||
console.log(event.target.checked ? 'checked' : 'not checked');
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
All Web Awesome events are prefixed with `wa-` to prevent collisions with standard events and other libraries. Refer to a component's documentation for a complete list of its events.
|
||||
Custom Web Awesome events are prefixed with `wa-` to prevent collisions with standard events and other libraries. Refer to a component's documentation for a complete list of its events.
|
||||
|
||||
## Methods
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@ snippets:
|
||||
- .wa-outlined
|
||||
- .wa-filled
|
||||
- .wa-plain
|
||||
file: styles/utilities/appearance.css
|
||||
---
|
||||
|
||||
Some Web Awesome components, like `<wa-button>`, allow you to change their overall style by using an `appearance` attribute:
|
||||
|
||||
@@ -8,6 +8,7 @@ snippets:
|
||||
- .wa-success
|
||||
- .wa-warning
|
||||
- .wa-danger
|
||||
file: styles/utilities/variants.css
|
||||
---
|
||||
|
||||
Some Web Awesome components, like `<wa-button>`, allow you to change the color by using a `variant` attribute:
|
||||
|
||||
131
docs/docs/utilities/fouce.njk
Normal file
131
docs/docs/utilities/fouce.njk
Normal file
@@ -0,0 +1,131 @@
|
||||
---
|
||||
title: Reduce FOUCE
|
||||
description: Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered.
|
||||
file: styles/utilities/fouce.css
|
||||
icon: spinner
|
||||
---
|
||||
{% markdown %}
|
||||
No class is needed to use this utility, it will be applied automatically as long as it its CSS is included.
|
||||
|
||||
Here is a comparison of the loading experience with and without this utility,
|
||||
with a simulated slow loading time:
|
||||
|
||||
{% endmarkdown %}
|
||||
|
||||
|
||||
<div class="wa-split wa-align-items-end">
|
||||
<strong>Normal loading</strong>
|
||||
<wa-button onclick="document.querySelectorAll('iframe').forEach(iframe => iframe.srcdoc = iframe.srcdoc)">
|
||||
<wa-icon name="refresh"></wa-icon>
|
||||
Refresh
|
||||
</wa-button>
|
||||
<strong>With FOUCE reduction</strong>
|
||||
</div>
|
||||
|
||||
|
||||
{% set sample_card %}
|
||||
<link id="theme-stylesheet" rel="stylesheet" href="/dist/styles/themes/default.css" render="blocking" fetchpriority="high">
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css">
|
||||
<link rel="stylesheet" href="/dist/styles/forms.css">
|
||||
<script type=module>
|
||||
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
|
||||
const loadScript = src => new Promise((resolve, reject) => {
|
||||
const script = document.createElement("script");
|
||||
script.src = src;
|
||||
script.type = "module";
|
||||
script.onload = resolve;
|
||||
script.onerror = reject;
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
|
||||
await delay(500);
|
||||
await loadScript("/dist/components/button/button.js");
|
||||
await delay(500);
|
||||
await loadScript("/dist/components/card/card.js");
|
||||
await delay(500);
|
||||
await loadScript("/dist/components/rating/rating.js");
|
||||
</script>
|
||||
|
||||
<wa-card with-footer with-image class="card-overview">
|
||||
<img
|
||||
slot="image"
|
||||
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
|
||||
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
|
||||
/>
|
||||
|
||||
<strong>Mittens</strong><br />
|
||||
This kitten is as cute as he is playful. Bring him home today!<br />
|
||||
<small>6 weeks old</small>
|
||||
|
||||
<div slot="footer">
|
||||
<wa-button variant="brand" pill>More Info</wa-button>
|
||||
<wa-rating></wa-rating>
|
||||
</div>
|
||||
</wa-card>
|
||||
|
||||
<style>
|
||||
.card-overview small {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
.card-overview [slot=footer] {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
{% endset %}
|
||||
|
||||
|
||||
<div class="iframes">
|
||||
<iframe srcdoc='<body class="wa-fouce-off">{{ sample_card }}</body>'></iframe>
|
||||
<iframe srcdoc='{{ sample_card }}'></iframe>
|
||||
</div>
|
||||
<style>
|
||||
.iframes {
|
||||
display: flex;
|
||||
gap: var(--wa-space-m);
|
||||
margin-top: var(--wa-space-l);
|
||||
|
||||
iframe {
|
||||
flex: 1;
|
||||
height: 60ch;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{% markdown %}
|
||||
## How does it work?
|
||||
|
||||
The utility consists of a timeout (`2s` by default) and a fade duration (`200ms` by default).
|
||||
- If the element is _ready_ before the timeout, it will appear immediately.
|
||||
- If it takes longer than _timeout_ + _fade_, it will fade in over the fade duration.
|
||||
- If it takes somewhere between _timeout_ and _timeout_ + _fade_, you will get an interrupted fade.
|
||||
|
||||
An element is considered ready when both of these are true:
|
||||
1. Either It has been registered or has a `did-ssr` attribute (indicating it was pre-rendered)
|
||||
2. If it’s a Web Awesome component, its contents are also ready
|
||||
|
||||
## Customization
|
||||
|
||||
You can use the following CSS variables to customize the behavior:
|
||||
|
||||
| Variable | Description | Default |
|
||||
| --- | --- | --- |
|
||||
| `--wa-fouce-fade` | The transition duration for the fade effect. | `200ms` |
|
||||
| `--wa-fouce-timeout` | The timeout after which elements will appear even if not registered | `2s` |
|
||||
|
||||
The fade duration cannot be longer than the timeout.
|
||||
This means that you can disable FOUCE reduction on an element by setting `--wa-fouce-timeout: 0s`.
|
||||
|
||||
For example, if instead of `did-ssr` you used an `ssr` attribute to mark elements that were pre-rendered, you can do this to get them to appear immediately:
|
||||
|
||||
```css
|
||||
[ssr] {
|
||||
--wa-fouce-timeout: 0s;
|
||||
}
|
||||
```
|
||||
|
||||
You can also opt-out from FOUCE reduction for an element and its contents by adding the `.wa-fouce-off` class to it.
|
||||
Applying this class to the root element will disable the utility for the entire page.
|
||||
{% endmarkdown %}
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Gap
|
||||
description: Gap utilities set the gap property of flex and grid containers, like other Web Awesome layout utilities.
|
||||
tags: ["utilities", "layout"]
|
||||
file: styles/utilities/gap.css
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Style Utilities
|
||||
description: Web Awesome provides a few style utilities to customize styles in ways that cannot necessarily be described by semantic HTML.
|
||||
Some of these correspond to component attributes, but we also expose utility classes so you can apply these styles to native elements too.
|
||||
description: Style utilities are preset rules that let you efficiently customize styles for components and native elements alike.
|
||||
See the [installation instructions](#installation) to use style utilities in your project.
|
||||
layout: overview
|
||||
categories: ["layout"]
|
||||
override:tags: []
|
||||
@@ -21,6 +21,4 @@ Or, to _only_ include utilities:
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
|
||||
```
|
||||
|
||||
You can also include individual utilities following the instructions in their pages.
|
||||
{% endmarkdown %}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{
|
||||
"layout": "block",
|
||||
"layout": "utility",
|
||||
"tags": ["utilities"]
|
||||
}
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"version": "3.0.0-alpha.9",
|
||||
"version": "3.0.0-alpha.10",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"version": "3.0.0-alpha.9",
|
||||
"version": "3.0.0-alpha.10",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^4.1.0",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"description": "A forward-thinking library of web components.",
|
||||
"version": "3.0.0-alpha.9",
|
||||
"version": "3.0.0-alpha.10",
|
||||
"homepage": "https://webawesome.com/",
|
||||
"author": "Web Awesome",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -24,14 +24,16 @@ for await (const component of components) {
|
||||
const componentDir = path.join(reactDir, tagWithoutPrefix);
|
||||
const componentFile = path.join(componentDir, 'index.ts');
|
||||
const importPath = component.path.replace(/\.js$/, '.js');
|
||||
const eventImports = (component.events || [])
|
||||
// We only want to wrap wa- prefixed events, because the others are native
|
||||
const eventsToWrap = component.events?.filter(event => event.name.startsWith('wa-')) || [];
|
||||
const eventImports = eventsToWrap
|
||||
.map(event => `import type { ${event.eventName} } from '../../events/events.js';`)
|
||||
.join('\n');
|
||||
const eventExports = (component.events || [])
|
||||
const eventExports = eventsToWrap
|
||||
.map(event => `export type { ${event.eventName} } from '../../events/events.js';`)
|
||||
.join('\n');
|
||||
const eventNameImport = (component.events || []).length > 0 ? `import { type EventName } from '@lit/react';` : ``;
|
||||
const events = (component.events || [])
|
||||
const eventNameImport = eventsToWrap.length > 0 ? `import { type EventName } from '@lit/react';` : ``;
|
||||
const events = eventsToWrap
|
||||
.map(event => `${event.reactName}: '${event.name}' as EventName<${event.eventName}>`)
|
||||
.join(',\n');
|
||||
|
||||
|
||||
@@ -23,7 +23,8 @@ describe('<wa-badge>', () => {
|
||||
|
||||
it('should default to square styling, with the brand color', async () => {
|
||||
const el = await fixture<WaBadge>(html` <wa-badge>Badge</wa-badge> `);
|
||||
expect(el.getAttribute('variant')).to.eq('brand');
|
||||
expect(el.getAttribute('variant')).to.eq(null);
|
||||
expect(el.variant).to.eq('inherit');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -26,8 +26,14 @@ import styles from './badge.css';
|
||||
export default class WaBadge extends WebAwesomeElement {
|
||||
static shadowStyle = [variantStyles, appearanceStyles, styles];
|
||||
|
||||
/** The badge's theme variant. */
|
||||
@property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' = 'brand';
|
||||
/** The badge's theme variant. Defaults to `brand` if not within another element with a variant. */
|
||||
@property({ reflect: true, initial: 'brand' }) variant:
|
||||
| 'brand'
|
||||
| 'neutral'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'danger'
|
||||
| 'inherit' = 'inherit';
|
||||
|
||||
/** The badge's visual appearance. */
|
||||
@property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' = 'accent';
|
||||
|
||||
@@ -3,6 +3,8 @@ import { html } from 'lit';
|
||||
import { customElement, property, query, state } from 'lit/decorators.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import buttonGroupStyles from '../../styles/utilities/button-group.css';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
import variantStyles from '../../styles/utilities/variants.css';
|
||||
import styles from './button-group.css';
|
||||
|
||||
/**
|
||||
@@ -17,7 +19,7 @@ import styles from './button-group.css';
|
||||
*/
|
||||
@customElement('wa-button-group')
|
||||
export default class WaButtonGroup extends WebAwesomeElement {
|
||||
static shadowStyle = [buttonGroupStyles, styles];
|
||||
static shadowStyle = [sizeStyles, variantStyles, buttonGroupStyles, styles];
|
||||
|
||||
@query('slot') defaultSlot: HTMLSlotElement;
|
||||
|
||||
@@ -33,6 +35,13 @@ export default class WaButtonGroup extends WebAwesomeElement {
|
||||
/** The button group's orientation. */
|
||||
@property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';
|
||||
|
||||
/** The component's size. */
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
|
||||
/** The button group's theme variant. Defaults to `neutral` if not within another element with a variant. */
|
||||
@property({ reflect: true, initial: 'neutral' })
|
||||
variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'inherit' = 'inherit';
|
||||
|
||||
updated(changedProperties: PropertyValues<this>) {
|
||||
super.updated(changedProperties);
|
||||
|
||||
|
||||
@@ -45,20 +45,20 @@ describe('<wa-button>', () => {
|
||||
});
|
||||
|
||||
describe('when an attribute is removed', () => {
|
||||
it("should return to 'neutral' when attribute removed with no initial attribute", async () => {
|
||||
it("should return to 'inherit' when attribute removed with no initial attribute", async () => {
|
||||
const el = await fixture<WaButton>(html`<wa-button>Button label</wa-button>`);
|
||||
|
||||
expect(el.variant).to.equal('neutral');
|
||||
expect(el.getAttribute('variant')).to.equal('neutral');
|
||||
expect(el.variant).to.equal('inherit');
|
||||
expect(el.getAttribute('variant')).to.equal(null);
|
||||
|
||||
el.removeAttribute('variant');
|
||||
await el.updateComplete;
|
||||
|
||||
expect(el.variant).to.equal('neutral');
|
||||
expect(el.getAttribute('variant')).to.equal('neutral');
|
||||
expect(el.variant).to.equal('inherit');
|
||||
expect(el.getAttribute('variant')).to.equal(null);
|
||||
});
|
||||
|
||||
it("should return to 'neutral' when attribute removed with an initial attribute", async () => {
|
||||
it("should return to 'inherit' when attribute removed with an initial attribute", async () => {
|
||||
const el = await fixture<WaButton>(html`<wa-button variant="primary">Button label</wa-button>`);
|
||||
|
||||
expect(el.variant).to.equal('primary');
|
||||
@@ -67,8 +67,8 @@ describe('<wa-button>', () => {
|
||||
el.removeAttribute('variant');
|
||||
await el.updateComplete;
|
||||
|
||||
expect(el.variant).to.equal('neutral');
|
||||
expect(el.getAttribute('variant')).to.equal('neutral');
|
||||
expect(el.variant).to.equal('inherit');
|
||||
expect(el.getAttribute('variant')).to.equal(null);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -76,15 +76,15 @@ describe('<wa-button>', () => {
|
||||
it("should return to 'default' when property set to null with no initial attribute", async () => {
|
||||
const el = await fixture<WaButton>(html`<wa-button>Button label</wa-button>`);
|
||||
|
||||
expect(el.variant).to.equal('neutral');
|
||||
expect(el.getAttribute('variant')).to.equal('neutral');
|
||||
expect(el.variant).to.equal('inherit');
|
||||
expect(el.getAttribute('variant')).to.equal(null);
|
||||
|
||||
// @ts-expect-error Its a test. Stop.
|
||||
el.variant = null;
|
||||
await el.updateComplete;
|
||||
|
||||
expect(el.variant).to.equal('neutral');
|
||||
expect(el.getAttribute('variant')).to.equal('neutral');
|
||||
expect(el.variant).to.equal('inherit');
|
||||
expect(el.getAttribute('variant')).to.equal(null);
|
||||
});
|
||||
|
||||
it("should return to 'default' when property set to null with an initial attribute", async () => {
|
||||
@@ -97,8 +97,8 @@ describe('<wa-button>', () => {
|
||||
el.variant = null;
|
||||
await el.updateComplete;
|
||||
|
||||
expect(el.variant).to.equal('neutral');
|
||||
expect(el.getAttribute('variant')).to.equal('neutral');
|
||||
expect(el.variant).to.equal('inherit');
|
||||
expect(el.getAttribute('variant')).to.equal(null);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -112,9 +112,9 @@ describe('<wa-button>', () => {
|
||||
const el = await fixture<WaButton>(html` <wa-button>Button Label</wa-button> `);
|
||||
|
||||
expect(el.title).to.equal('');
|
||||
expect(el.variant).to.equal('neutral');
|
||||
expect(el.variant).to.equal('inherit');
|
||||
expect(el.appearance).to.equal('accent');
|
||||
expect(el.size).to.equal('medium');
|
||||
expect(el.size).to.equal('inherit');
|
||||
expect(el.disabled).to.equal(false);
|
||||
expect(el.caret).to.equal(false);
|
||||
expect(el.loading).to.equal(false);
|
||||
@@ -318,13 +318,13 @@ describe('<wa-button>', () => {
|
||||
});
|
||||
|
||||
describe('when using methods', () => {
|
||||
it('should emit wa-focus and wa-blur when the button is focused and blurred', async () => {
|
||||
it('should emit focus and blur when the button is focused and blurred', async () => {
|
||||
const el = await fixture<WaButton>(html` <wa-button>Button</wa-button> `);
|
||||
const focusHandler = sinon.spy();
|
||||
const blurHandler = sinon.spy();
|
||||
|
||||
el.addEventListener('wa-focus', focusHandler);
|
||||
el.addEventListener('wa-blur', blurHandler);
|
||||
el.addEventListener('focus', focusHandler);
|
||||
el.addEventListener('blur', blurHandler);
|
||||
|
||||
el.focus();
|
||||
await waitUntil(() => focusHandler.calledOnce);
|
||||
|
||||
@@ -2,12 +2,10 @@ import { customElement, property, query, state } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
import { html, literal } from 'lit/static-html.js';
|
||||
import { WaBlurEvent } from '../../events/blur.js';
|
||||
import { WaFocusEvent } from '../../events/focus.js';
|
||||
import { WaInvalidEvent } from '../../events/invalid.js';
|
||||
import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
|
||||
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
|
||||
import nativeStyles from '../../styles/native/button.css';
|
||||
import appearanceStyles from '../../styles/utilities/appearance.css';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
@@ -26,8 +24,8 @@ import styles from './button.css';
|
||||
* @dependency wa-icon
|
||||
* @dependency wa-spinner
|
||||
*
|
||||
* @event wa-blur - Emitted when the button loses focus.
|
||||
* @event wa-focus - Emitted when the button gains focus.
|
||||
* @event blur - Emitted when the button loses focus.
|
||||
* @event focus - Emitted when the button gains focus.
|
||||
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
||||
*
|
||||
* @slot - The button's label.
|
||||
@@ -68,15 +66,16 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
|
||||
@state() invalid = false;
|
||||
@property() title = ''; // make reactive to pass through
|
||||
|
||||
/** The button's theme variant. */
|
||||
@property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
|
||||
/** The button's theme variant. Defaults to `neutral` if not within another element with a variant. */
|
||||
@property({ reflect: true, initial: 'neutral' })
|
||||
variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'inherit' = 'inherit';
|
||||
|
||||
/** The button's visual appearance. */
|
||||
@property({ reflect: true, default: 'accent' })
|
||||
appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'accent';
|
||||
|
||||
/** The button's size. */
|
||||
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
|
||||
/** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */
|
||||
@property({ type: Boolean, reflect: true }) caret = false;
|
||||
@@ -142,14 +141,6 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
|
||||
/** Used to override the form owner's `target` attribute. */
|
||||
@property({ attribute: 'formtarget' }) formTarget: '_self' | '_blank' | '_parent' | '_top' | string;
|
||||
|
||||
private handleBlur() {
|
||||
this.dispatchEvent(new WaBlurEvent());
|
||||
}
|
||||
|
||||
private handleFocus() {
|
||||
this.dispatchEvent(new WaFocusEvent());
|
||||
}
|
||||
|
||||
private handleClick() {
|
||||
const form = this.getForm();
|
||||
|
||||
@@ -274,8 +265,6 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
|
||||
role=${ifDefined(isLink ? undefined : 'button')}
|
||||
aria-disabled=${this.disabled ? 'true' : 'false'}
|
||||
tabindex=${this.disabled ? '-1' : '0'}
|
||||
@blur=${this.handleBlur}
|
||||
@focus=${this.handleFocus}
|
||||
@invalid=${this.isButton() ? this.handleInvalid : null}
|
||||
@click=${this.handleClick}
|
||||
>
|
||||
|
||||
@@ -27,8 +27,14 @@ import styles from './callout.css';
|
||||
export default class WaCallout extends WebAwesomeElement {
|
||||
static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, styles];
|
||||
|
||||
/** The callout's theme variant. */
|
||||
@property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' = 'brand';
|
||||
/** The callout's theme variant. Defaults to `brand` if not within another element with a variant. */
|
||||
@property({ reflect: true, initial: 'brand' }) variant:
|
||||
| 'brand'
|
||||
| 'neutral'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'danger'
|
||||
| 'inherit' = 'inherit';
|
||||
|
||||
/** The callout's visual appearance. */
|
||||
@property({ reflect: true }) appearance:
|
||||
@@ -40,7 +46,7 @@ export default class WaCallout extends WebAwesomeElement {
|
||||
| 'outlined accent' = 'outlined filled';
|
||||
|
||||
/** The callout's size. */
|
||||
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
|
||||
render() {
|
||||
return html`
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
:host {
|
||||
--spacing: var(--wa-space-xl);
|
||||
--space-s: var(--wa-space-l);
|
||||
--space-m: var(--wa-space-xl);
|
||||
--space-l: var(--wa-space-2xl);
|
||||
|
||||
--spacing: var(--wa-space);
|
||||
--border-width: var(--wa-panel-border-width);
|
||||
--border-radius: var(--wa-panel-border-radius);
|
||||
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import { html } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { HasSlotController } from '../../internal/slot.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
import styles from './card.css';
|
||||
|
||||
/**
|
||||
@@ -21,20 +23,32 @@ import styles from './card.css';
|
||||
*
|
||||
* @cssproperty --border-radius - The radius for the card's corners. Expects a single value. Defaults to `var(--wa-panel-border-radius)`.
|
||||
* @cssproperty --border-width - The width of the card's borders. Expects a single value. Defaults to `var(--wa-panel-border-width)`.
|
||||
* @cssproperty --spacing - The amount of space around and between sections of the card. Expects a single value.
|
||||
* @cssproperty --spacing - The amount of space around and between sections of the card. Expects a single value. Defaults to `var(--wa-space)`.
|
||||
*/
|
||||
@customElement('wa-card')
|
||||
export default class WaCard extends WebAwesomeElement {
|
||||
static shadowStyle = styles;
|
||||
static shadowStyle = [sizeStyles, styles];
|
||||
|
||||
private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'image');
|
||||
|
||||
/** The component's size. Will be inherited by any descendants with a `size` attribute. */
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
|
||||
/** Renders the card with a header. Only needed for SSR, otherwise is automatically added. */
|
||||
@property({ attribute: 'with-header', type: Boolean }) withHeader = false;
|
||||
@property({ attribute: 'with-header', type: Boolean, reflect: true }) withHeader = false;
|
||||
|
||||
/** Renders the card with an image. Only needed for SSR, otherwise is automatically added. */
|
||||
@property({ attribute: 'with-image', type: Boolean }) withImage = false;
|
||||
@property({ attribute: 'with-image', type: Boolean, reflect: true }) withImage = false;
|
||||
|
||||
/** Renders the card with a footer. Only needed for SSR, otherwise is automatically added. */
|
||||
@property({ attribute: 'with-footer', type: Boolean }) withFooter = false;
|
||||
@property({ attribute: 'with-footer', type: Boolean, reflect: true }) withFooter = false;
|
||||
|
||||
updated() {
|
||||
// Enable the respective slots when detected
|
||||
if (!this.withHeader && this.hasSlotController.test('header')) this.withHeader = true;
|
||||
if (!this.withImage && this.hasSlotController.test('image')) this.withImage = true;
|
||||
if (!this.withFooter && this.hasSlotController.test('footer')) this.withFooter = true;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
|
||||
@@ -60,13 +60,13 @@ describe('<wa-checkbox>', () => {
|
||||
expect(el.checkValidity()).to.be.true;
|
||||
});
|
||||
|
||||
it('should emit wa-change and wa-input when clicked', async () => {
|
||||
it('should emit change and input when clicked', async () => {
|
||||
const el = await fixture<WaCheckbox>(html` <wa-checkbox></wa-checkbox> `);
|
||||
const changeHandler = sinon.spy();
|
||||
const inputHandler = sinon.spy();
|
||||
|
||||
el.addEventListener('wa-change', changeHandler);
|
||||
el.addEventListener('wa-input', inputHandler);
|
||||
el.addEventListener('change', changeHandler);
|
||||
el.addEventListener('input', inputHandler);
|
||||
el.click();
|
||||
await aTimeout(0);
|
||||
await el.updateComplete;
|
||||
@@ -76,13 +76,13 @@ describe('<wa-checkbox>', () => {
|
||||
expect(el.checked).to.be.true;
|
||||
});
|
||||
|
||||
it('should emit wa-change and wa-input when toggled with spacebar', async () => {
|
||||
it('should emit change and input when toggled with spacebar', async () => {
|
||||
const el = await fixture<WaCheckbox>(html` <wa-checkbox></wa-checkbox> `);
|
||||
const changeHandler = sinon.spy();
|
||||
const inputHandler = sinon.spy();
|
||||
|
||||
el.addEventListener('wa-change', changeHandler);
|
||||
el.addEventListener('wa-input', inputHandler);
|
||||
el.addEventListener('change', changeHandler);
|
||||
el.addEventListener('input', inputHandler);
|
||||
el.focus();
|
||||
await el.updateComplete;
|
||||
await sendKeys({ press: ' ' });
|
||||
@@ -92,11 +92,11 @@ describe('<wa-checkbox>', () => {
|
||||
expect(el.checked).to.be.true;
|
||||
});
|
||||
|
||||
it('should not emit wa-change or wa-input when checked programmatically', async () => {
|
||||
it('should not emit change or input when checked programmatically', async () => {
|
||||
const el = await fixture<WaCheckbox>(html` <wa-checkbox></wa-checkbox> `);
|
||||
|
||||
el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
|
||||
el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
|
||||
el.addEventListener('change', () => expect.fail('change should not be emitted'));
|
||||
el.addEventListener('input', () => expect.fail('input should not be emitted'));
|
||||
el.checked = true;
|
||||
await el.updateComplete;
|
||||
await aTimeout(0);
|
||||
|
||||
@@ -4,14 +4,10 @@ import { customElement, property, query } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
import { live } from 'lit/directives/live.js';
|
||||
import { WaBlurEvent } from '../../events/blur.js';
|
||||
import { WaChangeEvent } from '../../events/change.js';
|
||||
import { WaFocusEvent } from '../../events/focus.js';
|
||||
import { WaInputEvent } from '../../events/input.js';
|
||||
import { HasSlotController } from '../../internal/slot.js';
|
||||
import { RequiredValidator } from '../../internal/validators/required-validator.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
|
||||
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
|
||||
import nativeStyles from '../../styles/native/checkbox.css';
|
||||
import formControlStyles from '../../styles/shadow/form-control.css';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
@@ -29,10 +25,10 @@ import styles from './checkbox.css';
|
||||
* @slot - The checkbox's label.
|
||||
* @slot hint - Text that describes how to use the checkbox. Alternatively, you can use the `hint` attribute.
|
||||
*
|
||||
* @event wa-blur - Emitted when the checkbox loses focus.
|
||||
* @event wa-change - Emitted when the checked state changes.
|
||||
* @event wa-focus - Emitted when the checkbox gains focus.
|
||||
* @event wa-input - Emitted when the checkbox receives input.
|
||||
* @event blur - Emitted when the checkbox loses focus.
|
||||
* @event change - Emitted when the checked state changes.
|
||||
* @event focus - Emitted when the checkbox gains focus.
|
||||
* @event input - Emitted when the checkbox receives input.
|
||||
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
||||
*
|
||||
* @csspart base - The component's label .
|
||||
@@ -102,7 +98,7 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
|
||||
/** The checkbox's size. */
|
||||
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
|
||||
/** Disables the checkbox. */
|
||||
@property({ type: Boolean }) disabled = false;
|
||||
@@ -137,19 +133,7 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
|
||||
this.hasInteracted = true;
|
||||
this.checked = !this.checked;
|
||||
this.indeterminate = false;
|
||||
this.dispatchEvent(new WaChangeEvent());
|
||||
}
|
||||
|
||||
private handleBlur() {
|
||||
this.dispatchEvent(new WaBlurEvent());
|
||||
}
|
||||
|
||||
private handleInput() {
|
||||
this.dispatchEvent(new WaInputEvent());
|
||||
}
|
||||
|
||||
private handleFocus() {
|
||||
this.dispatchEvent(new WaFocusEvent());
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
}
|
||||
|
||||
@watch('defaultChecked')
|
||||
@@ -248,9 +232,6 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
|
||||
aria-checked=${this.checked ? 'true' : 'false'}
|
||||
aria-describedby="hint"
|
||||
@click=${this.handleClick}
|
||||
@input=${this.handleInput}
|
||||
@blur=${this.handleBlur}
|
||||
@focus=${this.handleFocus}
|
||||
/>
|
||||
|
||||
<wa-icon part="${iconState}-icon icon" library="system" name=${iconName}></wa-icon>
|
||||
|
||||
@@ -15,8 +15,6 @@
|
||||
--swatch-border-radius: var(--wa-border-radius-m);
|
||||
--swatch-size: 1.5rem;
|
||||
--trigger-border-radius: var(--wa-border-radius-circle);
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.color-picker {
|
||||
|
||||
@@ -14,31 +14,31 @@ describe('<wa-color-picker>', () => {
|
||||
for (const fixture of fixtures) {
|
||||
describe(`with "${fixture.type}" rendering`, () => {
|
||||
describe('when the value changes', () => {
|
||||
it('should not emit wa-change or wa-input when the value is changed programmatically', async () => {
|
||||
it('should not emit change or input when the value is changed programmatically', async () => {
|
||||
const el = await fixture<WaColorPicker>(html` <wa-color-picker></wa-color-picker> `);
|
||||
const color = 'rgb(255, 204, 0)';
|
||||
|
||||
el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
|
||||
el.addEventListener('wa-input', () => expect.fail('wa-change should not be emitted'));
|
||||
el.addEventListener('change', () => expect.fail('change should not be emitted'));
|
||||
el.addEventListener('input', () => expect.fail('change should not be emitted'));
|
||||
el.value = color;
|
||||
await el.updateComplete;
|
||||
});
|
||||
|
||||
it('should emit wa-change and wa-input when the color grid selector is moved', async () => {
|
||||
it('should emit change and input when the color grid selector is moved', async () => {
|
||||
const el = await fixture<WaColorPicker>(html` <wa-color-picker></wa-color-picker> `);
|
||||
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
|
||||
const grid = el.shadowRoot!.querySelector<HTMLElement>('[part~="grid"]')!;
|
||||
const changeHandler = sinon.spy();
|
||||
const inputHandler = sinon.spy();
|
||||
|
||||
el.addEventListener('wa-change', changeHandler);
|
||||
el.addEventListener('wa-input', inputHandler);
|
||||
el.addEventListener('change', changeHandler);
|
||||
el.addEventListener('input', inputHandler);
|
||||
|
||||
await clickOnElement(trigger); // open the dropdown
|
||||
await aTimeout(200); // wait for the dropdown to open
|
||||
await el.updateComplete;
|
||||
|
||||
// Simulate a drag event. "wa-change" should not fire until we stop dragging.
|
||||
// Simulate a drag event. "change" should not fire until we stop dragging.
|
||||
await dragElement(grid, 2, 0, {
|
||||
afterMouseDown: () => {
|
||||
expect(changeHandler).to.have.not.been.called;
|
||||
@@ -53,20 +53,20 @@ describe('<wa-color-picker>', () => {
|
||||
expect(inputHandler).to.have.been.calledTwice;
|
||||
});
|
||||
|
||||
it('should emit wa-change and wa-input when the hue slider is moved', async () => {
|
||||
it('should emit change and input when the hue slider is moved', async () => {
|
||||
const el = await fixture<WaColorPicker>(html` <wa-color-picker></wa-color-picker> `);
|
||||
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
|
||||
const slider = el.shadowRoot!.querySelector<HTMLElement>('[part~="hue-slider"]')!;
|
||||
const changeHandler = sinon.spy();
|
||||
const inputHandler = sinon.spy();
|
||||
|
||||
el.addEventListener('wa-change', changeHandler);
|
||||
el.addEventListener('wa-input', inputHandler);
|
||||
el.addEventListener('change', changeHandler);
|
||||
el.addEventListener('input', inputHandler);
|
||||
|
||||
await clickOnElement(trigger); // open the dropdown
|
||||
await aTimeout(200); // wait for the dropdown to open
|
||||
|
||||
// Simulate a drag event. "wa-change" should not fire until we stop dragging.
|
||||
// Simulate a drag event. "change" should not fire until we stop dragging.
|
||||
await dragElement(slider, 20, 0, {
|
||||
afterMouseDown: () => {
|
||||
expect(changeHandler).to.have.not.been.called;
|
||||
@@ -85,20 +85,20 @@ describe('<wa-color-picker>', () => {
|
||||
expect(inputHandler).to.have.been.calledOnce;
|
||||
});
|
||||
|
||||
it('should emit wa-change and wa-input when the opacity slider is moved', async () => {
|
||||
it('should emit change and input when the opacity slider is moved', async () => {
|
||||
const el = await fixture<WaColorPicker>(html` <wa-color-picker opacity></wa-color-picker> `);
|
||||
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
|
||||
const slider = el.shadowRoot!.querySelector<HTMLElement>('[part~="opacity-slider"]')!;
|
||||
const changeHandler = sinon.spy();
|
||||
const inputHandler = sinon.spy();
|
||||
|
||||
el.addEventListener('wa-change', changeHandler);
|
||||
el.addEventListener('wa-input', inputHandler);
|
||||
el.addEventListener('change', changeHandler);
|
||||
el.addEventListener('input', inputHandler);
|
||||
|
||||
await clickOnElement(trigger); // open the dropdown
|
||||
await aTimeout(200); // wait for the dropdown to open
|
||||
|
||||
// Simulate a drag event. "wa-change" should not fire until we stop dragging.
|
||||
// Simulate a drag event. "change" should not fire until we stop dragging.
|
||||
await dragElement(slider, 2, 0, {
|
||||
afterMouseDown: () => {
|
||||
expect(changeHandler).to.have.not.been.called;
|
||||
@@ -115,15 +115,15 @@ describe('<wa-color-picker>', () => {
|
||||
expect(inputHandler).to.have.been.calledTwice;
|
||||
});
|
||||
|
||||
it('should emit wa-change and wa-input when toggling the format', async () => {
|
||||
it('should emit change and input when toggling the format', async () => {
|
||||
const el = await fixture<WaColorPicker>(html` <wa-color-picker value="#fff"></wa-color-picker> `);
|
||||
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
|
||||
const formatButton = el.shadowRoot!.querySelector<HTMLElement>('[part~="format-button"]')!;
|
||||
const changeHandler = sinon.spy();
|
||||
const inputHandler = sinon.spy();
|
||||
|
||||
el.addEventListener('wa-change', changeHandler);
|
||||
el.addEventListener('wa-input', inputHandler);
|
||||
el.addEventListener('change', changeHandler);
|
||||
el.addEventListener('input', inputHandler);
|
||||
|
||||
await clickOnElement(trigger); // open the dropdown
|
||||
await aTimeout(200); // wait for the dropdown to open
|
||||
@@ -160,7 +160,7 @@ describe('<wa-color-picker>', () => {
|
||||
expect(getComputedStyle(swatches[2]).backgroundColor).to.equal('rgb(0, 0, 255)');
|
||||
});
|
||||
|
||||
it('should emit wa-change and wa-input when clicking on a swatch', async () => {
|
||||
it('should emit change and input when clicking on a swatch', async () => {
|
||||
const el = await fixture<WaColorPicker>(html`
|
||||
<wa-color-picker swatches="red; green; blue;"></wa-color-picker>
|
||||
`);
|
||||
@@ -169,8 +169,8 @@ describe('<wa-color-picker>', () => {
|
||||
const changeHandler = sinon.spy();
|
||||
const inputHandler = sinon.spy();
|
||||
|
||||
el.addEventListener('wa-change', changeHandler);
|
||||
el.addEventListener('wa-input', inputHandler);
|
||||
el.addEventListener('change', changeHandler);
|
||||
el.addEventListener('input', inputHandler);
|
||||
|
||||
await clickOnElement(trigger); // open the dropdown
|
||||
await aTimeout(200); // wait for the dropdown to open
|
||||
@@ -181,15 +181,15 @@ describe('<wa-color-picker>', () => {
|
||||
expect(inputHandler).to.have.been.calledOnce;
|
||||
});
|
||||
|
||||
it('should emit wa-change and wa-input when selecting a color with the keyboard', async () => {
|
||||
it('should emit change and input when selecting a color with the keyboard', async () => {
|
||||
const el = await fixture<WaColorPicker>(html` <wa-color-picker></wa-color-picker> `);
|
||||
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
|
||||
const gridHandle = el.shadowRoot!.querySelector<HTMLElement>('[part~="grid-handle"]')!;
|
||||
const changeHandler = sinon.spy();
|
||||
const inputHandler = sinon.spy();
|
||||
|
||||
el.addEventListener('wa-change', changeHandler);
|
||||
el.addEventListener('wa-input', inputHandler);
|
||||
el.addEventListener('change', changeHandler);
|
||||
el.addEventListener('input', inputHandler);
|
||||
|
||||
await clickOnElement(trigger); // open the dropdown
|
||||
await aTimeout(200); // wait for the dropdown to open
|
||||
@@ -201,15 +201,15 @@ describe('<wa-color-picker>', () => {
|
||||
expect(inputHandler).to.have.been.calledOnce;
|
||||
});
|
||||
|
||||
it('should emit wa-change and wa-input when selecting a color with the keyboard', async () => {
|
||||
it('should emit change and input when selecting a color with the keyboard', async () => {
|
||||
const el = await fixture<WaColorPicker>(html` <wa-color-picker></wa-color-picker> `);
|
||||
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
|
||||
const handle = el.shadowRoot!.querySelector<HTMLElement>('[part~="grid-handle"]')!;
|
||||
const changeHandler = sinon.spy();
|
||||
const inputHandler = sinon.spy();
|
||||
|
||||
el.addEventListener('wa-change', changeHandler);
|
||||
el.addEventListener('wa-input', inputHandler);
|
||||
el.addEventListener('change', changeHandler);
|
||||
el.addEventListener('input', inputHandler);
|
||||
|
||||
await clickOnElement(trigger); // open the dropdown
|
||||
await aTimeout(200); // wait for the dropdown to open
|
||||
@@ -221,15 +221,15 @@ describe('<wa-color-picker>', () => {
|
||||
expect(inputHandler).to.have.been.calledOnce;
|
||||
});
|
||||
|
||||
it('should emit wa-change and wa-input when selecting hue with the keyboard', async () => {
|
||||
it('should emit change and input when selecting hue with the keyboard', async () => {
|
||||
const el = await fixture<WaColorPicker>(html` <wa-color-picker></wa-color-picker> `);
|
||||
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
|
||||
const handle = el.shadowRoot!.querySelector<HTMLElement>('[part~="hue-slider"] > span')!;
|
||||
const changeHandler = sinon.spy();
|
||||
const inputHandler = sinon.spy();
|
||||
|
||||
el.addEventListener('wa-change', changeHandler);
|
||||
el.addEventListener('wa-input', inputHandler);
|
||||
el.addEventListener('change', changeHandler);
|
||||
el.addEventListener('input', inputHandler);
|
||||
|
||||
await clickOnElement(trigger); // open the dropdown
|
||||
await aTimeout(200); // wait for the dropdown to open
|
||||
@@ -241,15 +241,15 @@ describe('<wa-color-picker>', () => {
|
||||
expect(inputHandler).to.have.been.calledOnce;
|
||||
});
|
||||
|
||||
it('should emit wa-change and wa-input when selecting opacity with the keyboard', async () => {
|
||||
it('should emit change and input when selecting opacity with the keyboard', async () => {
|
||||
const el = await fixture<WaColorPicker>(html` <wa-color-picker opacity></wa-color-picker> `);
|
||||
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
|
||||
const handle = el.shadowRoot!.querySelector<HTMLElement>('[part~="opacity-slider"] > span')!;
|
||||
const changeHandler = sinon.spy();
|
||||
const inputHandler = sinon.spy();
|
||||
|
||||
el.addEventListener('wa-change', changeHandler);
|
||||
el.addEventListener('wa-input', inputHandler);
|
||||
el.addEventListener('change', changeHandler);
|
||||
el.addEventListener('input', inputHandler);
|
||||
|
||||
await clickOnElement(trigger); // open the dropdown
|
||||
await aTimeout(200); // wait for the dropdown to open
|
||||
@@ -261,15 +261,15 @@ describe('<wa-color-picker>', () => {
|
||||
expect(inputHandler).to.have.been.calledOnce;
|
||||
});
|
||||
|
||||
it('should emit wa-change and wa-input when entering a value in the color input and pressing enter', async () => {
|
||||
it('should emit change and input when entering a value in the color input and pressing enter', async () => {
|
||||
const el = await fixture<WaColorPicker>(html` <wa-color-picker opacity></wa-color-picker> `);
|
||||
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
|
||||
const input = el.shadowRoot!.querySelector<HTMLElement>('[part~="input"]')!;
|
||||
const changeHandler = sinon.spy();
|
||||
const inputHandler = sinon.spy();
|
||||
|
||||
el.addEventListener('wa-change', changeHandler);
|
||||
el.addEventListener('wa-input', inputHandler);
|
||||
el.addEventListener('change', changeHandler);
|
||||
el.addEventListener('input', inputHandler);
|
||||
|
||||
await clickOnElement(trigger); // open the dropdown
|
||||
await aTimeout(200); // wait for the dropdown to open
|
||||
@@ -283,15 +283,15 @@ describe('<wa-color-picker>', () => {
|
||||
expect(inputHandler).to.have.been.calledOnce;
|
||||
});
|
||||
|
||||
it('should emit wa-change and wa-input when entering a value in the color input and blurring the field', async () => {
|
||||
it('should emit change and input when entering a value in the color input and blurring the field', async () => {
|
||||
const el = await fixture<WaColorPicker>(html` <wa-color-picker opacity></wa-color-picker> `);
|
||||
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
|
||||
const input = el.shadowRoot!.querySelector<HTMLElement>('[part~="input"]')!;
|
||||
const changeHandler = sinon.spy();
|
||||
const inputHandler = sinon.spy();
|
||||
|
||||
el.addEventListener('wa-change', changeHandler);
|
||||
el.addEventListener('wa-input', inputHandler);
|
||||
el.addEventListener('change', changeHandler);
|
||||
el.addEventListener('input', inputHandler);
|
||||
|
||||
await clickOnElement(trigger); // open the dropdown
|
||||
await aTimeout(200); // wait for the dropdown to open
|
||||
@@ -311,8 +311,8 @@ describe('<wa-color-picker>', () => {
|
||||
const changeHandler = sinon.spy();
|
||||
const inputHandler = sinon.spy();
|
||||
|
||||
el.addEventListener('wa-change', changeHandler);
|
||||
el.addEventListener('wa-input', inputHandler);
|
||||
el.addEventListener('change', changeHandler);
|
||||
el.addEventListener('input', inputHandler);
|
||||
|
||||
el.swatches = ['#fff'];
|
||||
await el.updateComplete;
|
||||
@@ -354,14 +354,14 @@ describe('<wa-color-picker>', () => {
|
||||
it.skip('should display a color with opacity when an initial value with opacity is provided', async () => {
|
||||
const el = await fixture<WaColorPicker>(html` <wa-color-picker opacity value="#ff000050"></wa-color-picker> `);
|
||||
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
|
||||
const previewButton = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="preview"]');
|
||||
const previewButton = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="preview"]')!;
|
||||
const previewColor = getComputedStyle(previewButton).getPropertyValue('--preview-color');
|
||||
|
||||
expect(trigger.style.color).to.equal('rgba(255, 0, 0, 0.314)');
|
||||
expect(previewColor).to.equal('#ff000050');
|
||||
});
|
||||
|
||||
it.skip('should emit wa-focus when rendered as a dropdown and focused', async () => {
|
||||
it.skip('should emit focus when rendered as a dropdown and focused', async () => {
|
||||
const el = await fixture<WaColorPicker>(html`
|
||||
<div>
|
||||
<wa-color-picker></wa-color-picker>
|
||||
@@ -374,8 +374,8 @@ describe('<wa-color-picker>', () => {
|
||||
const focusHandler = sinon.spy();
|
||||
const blurHandler = sinon.spy();
|
||||
|
||||
colorPicker.addEventListener('wa-focus', focusHandler);
|
||||
colorPicker.addEventListener('wa-blur', blurHandler);
|
||||
colorPicker.addEventListener('focus', focusHandler);
|
||||
colorPicker.addEventListener('blur', blurHandler);
|
||||
|
||||
await clickOnElement(trigger);
|
||||
await colorPicker.updateComplete;
|
||||
@@ -391,8 +391,8 @@ describe('<wa-color-picker>', () => {
|
||||
const focusHandler = sinon.spy();
|
||||
const blurHandler = sinon.spy();
|
||||
|
||||
colorPicker.addEventListener('wa-focus', focusHandler);
|
||||
colorPicker.addEventListener('wa-blur', blurHandler);
|
||||
colorPicker.addEventListener('focus', focusHandler);
|
||||
colorPicker.addEventListener('blur', blurHandler);
|
||||
|
||||
// Focus
|
||||
colorPicker.focus();
|
||||
|
||||
@@ -5,17 +5,13 @@ import { customElement, eventOptions, property, query, state } from 'lit/decorat
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
import { styleMap } from 'lit/directives/style-map.js';
|
||||
import { WaBlurEvent } from '../../events/blur.js';
|
||||
import { WaChangeEvent } from '../../events/change.js';
|
||||
import { WaFocusEvent } from '../../events/focus.js';
|
||||
import { WaInputEvent } from '../../events/input.js';
|
||||
import { WaInvalidEvent } from '../../events/invalid.js';
|
||||
import { drag } from '../../internal/drag.js';
|
||||
import { clamp } from '../../internal/math.js';
|
||||
import { HasSlotController } from '../../internal/slot.js';
|
||||
import { RequiredValidator } from '../../internal/validators/required-validator.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
|
||||
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
|
||||
import formControlStyles from '../../styles/shadow/form-control.css';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
import visuallyHidden from '../../styles/utilities/visually-hidden.css';
|
||||
@@ -54,10 +50,10 @@ declare const EyeDropper: EyeDropperConstructor;
|
||||
* @slot label - The color picker's form label. Alternatively, you can use the `label` attribute.
|
||||
* @slot hint - The color picker's form hint. Alternatively, you can use the `hint` attribute.
|
||||
*
|
||||
* @event wa-blur - Emitted when the color picker loses focus.
|
||||
* @event wa-change - Emitted when the color picker's value changes.
|
||||
* @event wa-focus - Emitted when the color picker receives focus.
|
||||
* @event wa-input - Emitted when the color picker receives input.
|
||||
* @event blur - Emitted when the color picker loses focus.
|
||||
* @event change - Emitted when the color picker's value changes.
|
||||
* @event focus - Emitted when the color picker receives focus.
|
||||
* @event input - Emitted when the color picker receives input.
|
||||
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
@@ -203,7 +199,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
@property() format: 'hex' | 'rgb' | 'hsl' | 'hsv' = 'hex';
|
||||
|
||||
/** Determines the size of the color picker's trigger */
|
||||
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
|
||||
/** Removes the button that lets users toggle between format. */
|
||||
@property({ attribute: 'no-format-toggle', type: Boolean }) noFormatToggle = false;
|
||||
@@ -266,12 +262,10 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
private handleFocusIn = () => {
|
||||
this.hasFocus = true;
|
||||
this.dispatchEvent(new WaFocusEvent());
|
||||
};
|
||||
|
||||
private handleFocusOut = () => {
|
||||
this.hasFocus = false;
|
||||
this.dispatchEvent(new WaBlurEvent());
|
||||
};
|
||||
|
||||
private handleFormatToggle() {
|
||||
@@ -279,8 +273,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
const nextIndex = (formats.indexOf(this.format) + 1) % formats.length;
|
||||
this.format = formats[nextIndex] as 'hex' | 'rgb' | 'hsl' | 'hsv';
|
||||
this.setColor(this.value || '');
|
||||
this.dispatchEvent(new WaChangeEvent());
|
||||
this.dispatchEvent(new WaInputEvent());
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
}
|
||||
|
||||
private handleAlphaDrag(event: PointerEvent) {
|
||||
@@ -300,13 +294,13 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
if (this.value !== currentValue) {
|
||||
currentValue = this.value;
|
||||
this.dispatchEvent(new WaInputEvent());
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
}
|
||||
},
|
||||
onStop: () => {
|
||||
if (this.value !== initialValue) {
|
||||
initialValue = this.value;
|
||||
this.dispatchEvent(new WaChangeEvent());
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
}
|
||||
},
|
||||
initialEvent: event,
|
||||
@@ -330,13 +324,13 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
if (this.value !== currentValue) {
|
||||
currentValue = this.value;
|
||||
this.dispatchEvent(new WaInputEvent());
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
}
|
||||
},
|
||||
onStop: () => {
|
||||
if (this.value !== initialValue) {
|
||||
initialValue = this.value;
|
||||
this.dispatchEvent(new WaChangeEvent());
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
}
|
||||
},
|
||||
initialEvent: event,
|
||||
@@ -363,14 +357,14 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
if (this.value !== currentValue) {
|
||||
currentValue = this.value;
|
||||
this.dispatchEvent(new WaInputEvent());
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
}
|
||||
},
|
||||
onStop: () => {
|
||||
this.isDraggingGridHandle = false;
|
||||
if (this.value !== initialValue) {
|
||||
initialValue = this.value;
|
||||
this.dispatchEvent(new WaChangeEvent());
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
}
|
||||
},
|
||||
initialEvent: event,
|
||||
@@ -406,8 +400,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new WaChangeEvent());
|
||||
this.dispatchEvent(new WaInputEvent());
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -440,8 +434,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new WaChangeEvent());
|
||||
this.dispatchEvent(new WaInputEvent());
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -474,12 +468,12 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new WaChangeEvent());
|
||||
this.dispatchEvent(new WaInputEvent());
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
}
|
||||
}
|
||||
|
||||
private handleInputChange(event: WaChangeEvent) {
|
||||
private handleInputChange(event: Event) {
|
||||
const target = event.target as HTMLInputElement;
|
||||
const oldValue = this.value;
|
||||
|
||||
@@ -494,15 +488,15 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new WaChangeEvent());
|
||||
this.dispatchEvent(new WaInputEvent());
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
}
|
||||
}
|
||||
|
||||
private handleInputInput(event: WaInputEvent) {
|
||||
private handleInputInput(event: InputEvent) {
|
||||
this.updateValidity();
|
||||
|
||||
// Prevent the `<wa-input>` element's `wa-input` event from bubbling up
|
||||
// Prevent the `<wa-input>` element's `input` event from bubbling up
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
@@ -515,8 +509,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
this.input.value = this.value;
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new WaChangeEvent());
|
||||
this.dispatchEvent(new WaInputEvent());
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
}
|
||||
|
||||
setTimeout(() => this.input.select());
|
||||
@@ -691,8 +685,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
this.setColor(colorSelectionResult.sRGBHex);
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new WaChangeEvent());
|
||||
this.dispatchEvent(new WaInputEvent());
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
@@ -707,8 +701,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
this.setColor(color);
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new WaChangeEvent());
|
||||
this.dispatchEvent(new WaInputEvent());
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1008,10 +1002,10 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
?disabled=${this.disabled}
|
||||
aria-label=${this.localize.term('currentValue')}
|
||||
@keydown=${this.handleInputKeyDown}
|
||||
@wa-change=${this.handleInputChange}
|
||||
@wa-input=${this.handleInputInput}
|
||||
@wa-blur=${this.stopNestedEventPropagation}
|
||||
@wa-focus=${this.stopNestedEventPropagation}
|
||||
@change=${this.handleInputChange}
|
||||
@input=${this.handleInputInput}
|
||||
@blur=${this.stopNestedEventPropagation}
|
||||
@focus=${this.stopNestedEventPropagation}
|
||||
></wa-input>
|
||||
|
||||
<wa-button-group>
|
||||
@@ -1029,8 +1023,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
caret:format-button__caret
|
||||
"
|
||||
@click=${this.handleFormatToggle}
|
||||
@wa-blur=${this.stopNestedEventPropagation}
|
||||
@wa-focus=${this.stopNestedEventPropagation}
|
||||
@blur=${this.stopNestedEventPropagation}
|
||||
@focus=${this.stopNestedEventPropagation}
|
||||
>
|
||||
${this.setLetterCase(this.format)}
|
||||
</wa-button>
|
||||
@@ -1049,8 +1043,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
caret:eye-dropper-button__caret
|
||||
"
|
||||
@click=${this.handleEyeDropper}
|
||||
@wa-blur=${this.stopNestedEventPropagation}
|
||||
@wa-focus=${this.stopNestedEventPropagation}
|
||||
@blur=${this.stopNestedEventPropagation}
|
||||
@focus=${this.stopNestedEventPropagation}
|
||||
>
|
||||
<wa-icon
|
||||
library="system"
|
||||
|
||||
@@ -11,6 +11,7 @@ import { animateWithClass } from '../../internal/animate.js';
|
||||
import { waitForEvent } from '../../internal/event.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
import type WaButton from '../button/button.js';
|
||||
import type WaIconButton from '../icon-button/icon-button.js';
|
||||
import type WaMenu from '../menu/menu.js';
|
||||
@@ -43,7 +44,7 @@ import styles from './dropdown.css';
|
||||
*/
|
||||
@customElement('wa-dropdown')
|
||||
export default class WaDropdown extends WebAwesomeElement {
|
||||
static shadowStyle = styles;
|
||||
static shadowStyle = [sizeStyles, styles];
|
||||
|
||||
@query('.dropdown') popup: WaPopup;
|
||||
@query('#trigger') trigger: HTMLSlotElement;
|
||||
|
||||
@@ -146,13 +146,13 @@ describe('<wa-icon-button>', () => {
|
||||
});
|
||||
|
||||
describe('when using methods', () => {
|
||||
it('should emit wa-focus and wa-blur when the button is focused and blurred', async () => {
|
||||
it('should emit focus and blur when the button is focused and blurred', async () => {
|
||||
const el = await fixture<WaIconButton>(html` <wa-icon-button></wa-icon-button> `);
|
||||
const focusHandler = sinon.spy();
|
||||
const blurHandler = sinon.spy();
|
||||
|
||||
el.addEventListener('wa-focus', focusHandler);
|
||||
el.addEventListener('wa-blur', blurHandler);
|
||||
el.addEventListener('focus', focusHandler);
|
||||
el.addEventListener('blur', blurHandler);
|
||||
|
||||
el.focus();
|
||||
await waitUntil(() => focusHandler.calledOnce);
|
||||
|
||||
@@ -2,9 +2,7 @@ import { customElement, property, query } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
import { html, literal } from 'lit/static-html.js';
|
||||
import { WaBlurEvent } from '../../events/blur.js';
|
||||
import { WaFocusEvent } from '../../events/focus.js';
|
||||
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
|
||||
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
|
||||
import '../icon/icon.js';
|
||||
import styles from './icon-button.css';
|
||||
|
||||
@@ -16,8 +14,8 @@ import styles from './icon-button.css';
|
||||
*
|
||||
* @dependency wa-icon
|
||||
*
|
||||
* @event wa-blur - Emitted when the icon button loses focus.
|
||||
* @event wa-focus - Emitted when the icon button gains focus.
|
||||
* @event blur - Emitted when the icon button loses focus.
|
||||
* @event focus - Emitted when the icon button gains focus.
|
||||
*
|
||||
* @cssproperty --background-color-hover - The color of the button's background on hover.
|
||||
*
|
||||
@@ -71,14 +69,6 @@ export default class WaIconButton extends WebAwesomeFormAssociatedElement {
|
||||
/** Disables the button. */
|
||||
@property({ type: Boolean }) disabled = false;
|
||||
|
||||
private handleBlur() {
|
||||
this.dispatchEvent(new WaBlurEvent());
|
||||
}
|
||||
|
||||
private handleFocus() {
|
||||
this.dispatchEvent(new WaFocusEvent());
|
||||
}
|
||||
|
||||
private handleClick(event: MouseEvent) {
|
||||
if (this.disabled) {
|
||||
event.preventDefault();
|
||||
@@ -122,8 +112,6 @@ export default class WaIconButton extends WebAwesomeFormAssociatedElement {
|
||||
aria-disabled=${this.disabled ? 'true' : 'false'}
|
||||
aria-label="${this.label}"
|
||||
tabindex=${this.disabled ? '-1' : '0'}
|
||||
@blur=${this.handleBlur}
|
||||
@focus=${this.handleFocus}
|
||||
@click=${this.handleClick}
|
||||
>
|
||||
<wa-icon
|
||||
|
||||
@@ -37,7 +37,7 @@ describe('<wa-image-comparer>', () => {
|
||||
`);
|
||||
const handler = sinon.spy();
|
||||
|
||||
el.addEventListener('wa-change', handler, { once: true });
|
||||
el.addEventListener('change', handler, { once: true });
|
||||
|
||||
el.position = 40;
|
||||
await el.updateComplete;
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { html } from 'lit';
|
||||
import { customElement, property, query } from 'lit/decorators.js';
|
||||
import { styleMap } from 'lit/directives/style-map.js';
|
||||
import { WaChangeEvent } from '../../events/change.js';
|
||||
import { drag } from '../../internal/drag.js';
|
||||
import { clamp } from '../../internal/math.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
@@ -22,7 +21,7 @@ import styles from './image-comparer.css';
|
||||
* @slot after - The after image, an `<img>` or `<svg>` element.
|
||||
* @slot handle - The icon used inside the handle.
|
||||
*
|
||||
* @event wa-change - Emitted when the position changes.
|
||||
* @event change - Emitted when the position changes.
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
* @csspart before - The container that wraps the before image.
|
||||
@@ -92,7 +91,7 @@ export default class WaImageComparer extends WebAwesomeElement {
|
||||
|
||||
@watch('position', { waitUntilFirstUpdate: true })
|
||||
handlePositionChange() {
|
||||
this.dispatchEvent(new WaChangeEvent());
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ describe('<wa-input>', () => {
|
||||
const el = await fixture<WaInput>(html` <wa-input></wa-input> `);
|
||||
|
||||
expect(el.type).to.equal('text');
|
||||
expect(el.size).to.equal('medium');
|
||||
expect(el.size).to.equal('inherit');
|
||||
expect(el.name).to.equal(null);
|
||||
expect(el.value).to.equal(null);
|
||||
expect(el.defaultValue).to.equal(null);
|
||||
@@ -60,7 +60,7 @@ describe('<wa-input>', () => {
|
||||
const label = el.shadowRoot!.querySelector('[part~="form-control-label"]')!;
|
||||
const focusHandler = sinon.spy();
|
||||
|
||||
el.addEventListener('wa-focus', focusHandler);
|
||||
el.addEventListener('focus', focusHandler);
|
||||
(label as HTMLLabelElement).click();
|
||||
await waitUntil(() => focusHandler.calledOnce);
|
||||
|
||||
@@ -312,13 +312,13 @@ describe('<wa-input>', () => {
|
||||
});
|
||||
|
||||
describe('when the value changes', () => {
|
||||
it('should emit wa-change and wa-input when the user types in the input', async () => {
|
||||
it('should emit change and input when the user types in the input', async () => {
|
||||
const el = await fixture<WaInput>(html` <wa-input></wa-input> `);
|
||||
const inputHandler = sinon.spy();
|
||||
const changeHandler = sinon.spy();
|
||||
|
||||
el.addEventListener('wa-input', inputHandler);
|
||||
el.addEventListener('wa-change', changeHandler);
|
||||
el.addEventListener('input', inputHandler);
|
||||
el.addEventListener('change', changeHandler);
|
||||
el.focus();
|
||||
await sendKeys({ type: 'abc' });
|
||||
el.blur();
|
||||
@@ -328,21 +328,21 @@ describe('<wa-input>', () => {
|
||||
expect(inputHandler).to.have.been.calledThrice;
|
||||
});
|
||||
|
||||
it('should not emit wa-change or wa-input when the value is set programmatically', async () => {
|
||||
it('should not emit change or input when the value is set programmatically', async () => {
|
||||
const el = await fixture<WaInput>(html` <wa-input></wa-input> `);
|
||||
|
||||
el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
|
||||
el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
|
||||
el.addEventListener('change', () => expect.fail('change should not be emitted'));
|
||||
el.addEventListener('input', () => expect.fail('input should not be emitted'));
|
||||
el.value = 'abc';
|
||||
|
||||
await el.updateComplete;
|
||||
});
|
||||
|
||||
it('should not emit wa-change or wa-input when calling setRangeText()', async () => {
|
||||
it('should not emit change or input when calling setRangeText()', async () => {
|
||||
const el = await fixture<WaInput>(html` <wa-input value="hi there"></wa-input> `);
|
||||
|
||||
el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
|
||||
el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
|
||||
el.addEventListener('change', () => expect.fail('change should not be emitted'));
|
||||
el.addEventListener('input', () => expect.fail('input should not be emitted'));
|
||||
el.focus();
|
||||
el.setSelectionRange(0, 2);
|
||||
el.setRangeText('hello');
|
||||
@@ -399,21 +399,21 @@ describe('<wa-input>', () => {
|
||||
expect(el.value).to.equal('0');
|
||||
});
|
||||
|
||||
it('should not emit wa-input or wa-change when stepUp() is called programmatically', async () => {
|
||||
it('should not emit input or change when stepUp() is called programmatically', async () => {
|
||||
const el = await fixture<WaInput>(html` <wa-input type="number" step="2" value="2"></wa-input> `);
|
||||
|
||||
el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
|
||||
el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
|
||||
el.addEventListener('change', () => expect.fail('change should not be emitted'));
|
||||
el.addEventListener('input', () => expect.fail('input should not be emitted'));
|
||||
el.stepUp();
|
||||
|
||||
await el.updateComplete;
|
||||
});
|
||||
|
||||
it('should not emit wa-input and wa-change when stepDown() is called programmatically', async () => {
|
||||
it('should not emit input and change when stepDown() is called programmatically', async () => {
|
||||
const el = await fixture<WaInput>(html` <wa-input type="number" step="2" value="2"></wa-input> `);
|
||||
|
||||
el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
|
||||
el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
|
||||
el.addEventListener('change', () => expect.fail('change should not be emitted'));
|
||||
el.addEventListener('input', () => expect.fail('input should not be emitted'));
|
||||
el.stepDown();
|
||||
|
||||
await el.updateComplete;
|
||||
|
||||
@@ -3,15 +3,11 @@ import { customElement, property, query, state } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
import { live } from 'lit/directives/live.js';
|
||||
import { WaBlurEvent } from '../../events/blur.js';
|
||||
import { WaChangeEvent } from '../../events/change.js';
|
||||
import { WaClearEvent } from '../../events/clear.js';
|
||||
import { WaFocusEvent } from '../../events/focus.js';
|
||||
import { WaInputEvent } from '../../events/input.js';
|
||||
import { HasSlotController } from '../../internal/slot.js';
|
||||
import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
|
||||
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
|
||||
import nativeStyles from '../../styles/native/input.css';
|
||||
import formControlStyles from '../../styles/shadow/form-control.css';
|
||||
import appearanceStyles from '../../styles/utilities/appearance.css';
|
||||
@@ -37,11 +33,11 @@ import styles from './input.css';
|
||||
* @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
|
||||
* @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
|
||||
*
|
||||
* @event wa-blur - Emitted when the control loses focus.
|
||||
* @event wa-change - Emitted when an alteration to the control's value is committed by the user.
|
||||
* @event blur - Emitted when the control loses focus.
|
||||
* @event change - Emitted when an alteration to the control's value is committed by the user.
|
||||
* @event focus - Emitted when the control gains focus.
|
||||
* @event input - Emitted when the control receives input.
|
||||
* @event wa-clear - Emitted when the clear button is activated.
|
||||
* @event wa-focus - Emitted when the control gains focus.
|
||||
* @event wa-input - Emitted when the control receives input.
|
||||
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
||||
*
|
||||
* @csspart label - The label
|
||||
@@ -70,7 +66,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
|
||||
return [...super.validators, MirrorValidator()];
|
||||
}
|
||||
|
||||
assumeInteractionOn = ['wa-blur', 'wa-input'];
|
||||
assumeInteractionOn = ['blur', 'input'];
|
||||
private readonly hasSlotController = new HasSlotController(this, 'hint', 'label');
|
||||
private readonly localize = new LocalizeController(this);
|
||||
|
||||
@@ -119,7 +115,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
|
||||
@property({ attribute: 'value', reflect: true }) defaultValue: string | null = this.getAttribute('value') || null;
|
||||
|
||||
/** The input's size. */
|
||||
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
|
||||
/** The input's visual appearance. */
|
||||
@property({ reflect: true }) appearance: 'filled' | 'outlined' = 'outlined';
|
||||
@@ -227,13 +223,9 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
|
||||
*/
|
||||
@property({ attribute: 'with-hint', type: Boolean }) withHint = false;
|
||||
|
||||
private handleBlur() {
|
||||
this.dispatchEvent(new WaBlurEvent());
|
||||
}
|
||||
|
||||
private handleChange() {
|
||||
private handleChange(event: Event) {
|
||||
this.relayNativeEvent(event, { bubbles: true, composed: true });
|
||||
this.value = this.input.value;
|
||||
this.dispatchEvent(new WaChangeEvent());
|
||||
}
|
||||
|
||||
private handleClearClick(event: MouseEvent) {
|
||||
@@ -242,20 +234,15 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
|
||||
if (this.value !== '') {
|
||||
this.value = '';
|
||||
this.dispatchEvent(new WaClearEvent());
|
||||
this.dispatchEvent(new WaInputEvent());
|
||||
this.dispatchEvent(new WaChangeEvent());
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
}
|
||||
|
||||
this.input.focus();
|
||||
}
|
||||
|
||||
private handleFocus() {
|
||||
this.dispatchEvent(new WaFocusEvent());
|
||||
}
|
||||
|
||||
private handleInput() {
|
||||
this.value = this.input.value;
|
||||
this.dispatchEvent(new WaInputEvent());
|
||||
}
|
||||
|
||||
private handleKeyDown(event: KeyboardEvent) {
|
||||
@@ -445,8 +432,6 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
|
||||
@change=${this.handleChange}
|
||||
@input=${this.handleInput}
|
||||
@keydown=${this.handleKeyDown}
|
||||
@focus=${this.handleFocus}
|
||||
@blur=${this.handleBlur}
|
||||
/>
|
||||
|
||||
${isClearIconVisible
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { html } from 'lit';
|
||||
import { customElement, query } from 'lit/decorators.js';
|
||||
import { customElement, property, query } from 'lit/decorators.js';
|
||||
import { WaSelectEvent } from '../../events/select.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
import '../menu-item/menu-item.js';
|
||||
import type WaMenuItem from '../menu-item/menu-item.js';
|
||||
import styles from './menu.css';
|
||||
@@ -24,7 +25,10 @@ export interface MenuSelectEventDetail {
|
||||
*/
|
||||
@customElement('wa-menu')
|
||||
export default class WaMenu extends WebAwesomeElement {
|
||||
static shadowStyle = styles;
|
||||
static shadowStyle = [sizeStyles, styles];
|
||||
|
||||
/** The component's size. */
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
|
||||
@query('slot') defaultSlot: HTMLSlotElement;
|
||||
|
||||
|
||||
@@ -2,11 +2,9 @@ import { customElement, property, query } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
import { html } from 'lit/static-html.js';
|
||||
import { WaBlurEvent } from '../../events/blur.js';
|
||||
import { WaFocusEvent } from '../../events/focus.js';
|
||||
import { HasSlotController } from '../../internal/slot.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
|
||||
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
|
||||
import nativeStyles from '../../styles/native/button.css';
|
||||
import appearanceStyles from '../../styles/utilities/appearance.css';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
@@ -24,8 +22,8 @@ import styles from './radio-button.css';
|
||||
* @slot prefix - A presentational prefix icon or similar element.
|
||||
* @slot suffix - A presentational suffix icon or similar element.
|
||||
*
|
||||
* @event wa-blur - Emitted when the button loses focus.
|
||||
* @event wa-focus - Emitted when the button gains focus.
|
||||
* @event blur - Emitted when the button loses focus.
|
||||
* @event focus - Emitted when the button gains focus.
|
||||
*
|
||||
* @cssproperty --background-color - The button's background color.
|
||||
* @cssproperty --background-color-active - The button's background color when active.
|
||||
@@ -74,7 +72,7 @@ export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
|
||||
* The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
|
||||
* this attribute can typically be omitted.
|
||||
*/
|
||||
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
|
||||
/** Draws a pill-style radio button with rounded edges. */
|
||||
@property({ type: Boolean, reflect: true }) pill = false;
|
||||
@@ -107,10 +105,6 @@ export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
|
||||
this.setAttribute('role', 'presentation');
|
||||
}
|
||||
|
||||
private handleBlur() {
|
||||
this.dispatchEvent(new WaBlurEvent());
|
||||
}
|
||||
|
||||
private handleClick(e: MouseEvent) {
|
||||
if (this.disabled) {
|
||||
e.preventDefault();
|
||||
@@ -121,10 +115,6 @@ export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
|
||||
this.checked = true;
|
||||
}
|
||||
|
||||
private handleFocus() {
|
||||
this.dispatchEvent(new WaFocusEvent());
|
||||
}
|
||||
|
||||
@watch('disabled', { waitUntilFirstUpdate: true })
|
||||
handleDisabledChange() {
|
||||
this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
|
||||
@@ -164,8 +154,6 @@ export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
|
||||
aria-disabled=${this.disabled}
|
||||
type="button"
|
||||
value=${ifDefined(this.value)}
|
||||
@blur=${this.handleBlur}
|
||||
@focus=${this.handleFocus}
|
||||
@click=${this.handleClick}
|
||||
>
|
||||
<slot name="prefix" part="prefix" class="prefix"></slot>
|
||||
|
||||
@@ -22,6 +22,26 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[part~='form-control-input'] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--wa-space-s);
|
||||
margin-block-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
/* Horizontal */
|
||||
:host([orientation='horizontal']) [part~='form-control-input'] {
|
||||
flex-direction: row;
|
||||
gap: var(--wa-space-m);
|
||||
}
|
||||
|
||||
/* When radio buttons are slotted */
|
||||
:host([orientation]) .form-control--has-radio-buttons [part~='form-control-input'] {
|
||||
gap: 0;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
/* Help text */
|
||||
[part~='hint'] {
|
||||
margin-block-start: var(--wa-space-2xs);
|
||||
|
||||
@@ -2,7 +2,6 @@ import { aTimeout, expect, oneEvent } from '@open-wc/testing';
|
||||
import { sendKeys } from '@web/test-runner-commands';
|
||||
import { html } from 'lit';
|
||||
import sinon from 'sinon';
|
||||
import type { WaChangeEvent } from '../../events/change.js';
|
||||
import { clickOnElement } from '../../internal/test.js';
|
||||
import { fixtures } from '../../internal/test/fixture.js';
|
||||
import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
|
||||
@@ -260,8 +259,10 @@ describe('<wa-radio-group>', () => {
|
||||
`);
|
||||
const [radio1, radio2] = radioGroup.querySelectorAll('wa-radio');
|
||||
|
||||
expect(radio1.size).to.equal('large');
|
||||
expect(radio2.size).to.equal('large');
|
||||
expect(radio1.size).to.equal('inherit');
|
||||
expect(radio1.getComputed('size')).to.equal('large');
|
||||
expect(radio2.size).to.equal('inherit');
|
||||
expect(radio2.getComputed('size')).to.equal('large');
|
||||
});
|
||||
|
||||
it('should apply the same size to all radio buttons', async () => {
|
||||
@@ -273,11 +274,13 @@ describe('<wa-radio-group>', () => {
|
||||
`);
|
||||
const [radio1, radio2] = radioGroup.querySelectorAll('wa-radio-button');
|
||||
|
||||
expect(radio1.size).to.equal('large');
|
||||
expect(radio2.size).to.equal('large');
|
||||
expect(radio1.size).to.equal('inherit');
|
||||
expect(radio1.getComputed('size')).to.equal('large');
|
||||
expect(radio2.size).to.equal('inherit');
|
||||
expect(radio2.getComputed('size')).to.equal('large');
|
||||
});
|
||||
|
||||
it('should update the size of all radio buttons when size changes', async () => {
|
||||
it('should update the computed size of all radio buttons when size changes', async () => {
|
||||
const radioGroup = await fixture<WaRadioGroup>(html`
|
||||
<wa-radio-group size="small">
|
||||
<wa-radio-button id="radio-1" value="1"></wa-radio-button>
|
||||
@@ -286,14 +289,18 @@ describe('<wa-radio-group>', () => {
|
||||
`);
|
||||
const [radio1, radio2] = radioGroup.querySelectorAll('wa-radio-button');
|
||||
|
||||
expect(radio1.size).to.equal('small');
|
||||
expect(radio2.size).to.equal('small');
|
||||
expect(radio1.size).to.equal('inherit');
|
||||
expect(radio1.getComputed('size')).to.equal('small');
|
||||
expect(radio2.size).to.equal('inherit');
|
||||
expect(radio2.getComputed('size')).to.equal('small');
|
||||
|
||||
radioGroup.size = 'large';
|
||||
await radioGroup.updateComplete;
|
||||
|
||||
expect(radio1.size).to.equal('large');
|
||||
expect(radio2.size).to.equal('large');
|
||||
expect(radio1.size).to.equal('inherit');
|
||||
expect(radio1.getComputed('size')).to.equal('large');
|
||||
expect(radio2.size).to.equal('inherit');
|
||||
expect(radio2.getComputed('size')).to.equal('large');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -326,7 +333,7 @@ describe('<wa-radio-group>', () => {
|
||||
const validFocusHandler = sinon.spy();
|
||||
|
||||
Array.from(el.querySelectorAll<WaRadio>('wa-radio')).forEach(radio =>
|
||||
radio.addEventListener('wa-focus', validFocusHandler),
|
||||
radio.addEventListener('focus', validFocusHandler),
|
||||
);
|
||||
|
||||
expect(validFocusHandler).to.not.have.been.called;
|
||||
@@ -350,8 +357,8 @@ describe('<wa-radio-group>', () => {
|
||||
const disabledRadio = el.querySelector('#radio-0')!;
|
||||
const validRadio = el.querySelector('#radio-1')!;
|
||||
|
||||
disabledRadio.addEventListener('wa-focus', invalidFocusHandler);
|
||||
validRadio.addEventListener('wa-focus', validFocusHandler);
|
||||
disabledRadio.addEventListener('focus', invalidFocusHandler);
|
||||
validRadio.addEventListener('focus', validFocusHandler);
|
||||
|
||||
expect(invalidFocusHandler).to.not.have.been.called;
|
||||
expect(validFocusHandler).to.not.have.been.called;
|
||||
@@ -378,8 +385,8 @@ describe('<wa-radio-group>', () => {
|
||||
const disabledRadio = el.querySelector('#radio-0')!;
|
||||
const validRadio = el.querySelector('#radio-2')!;
|
||||
|
||||
disabledRadio.addEventListener('wa-focus', invalidFocusHandler);
|
||||
validRadio.addEventListener('wa-focus', validFocusHandler);
|
||||
disabledRadio.addEventListener('focus', invalidFocusHandler);
|
||||
validRadio.addEventListener('focus', validFocusHandler);
|
||||
|
||||
expect(invalidFocusHandler).to.not.have.been.called;
|
||||
expect(validFocusHandler).to.not.have.been.called;
|
||||
@@ -394,7 +401,7 @@ describe('<wa-radio-group>', () => {
|
||||
});
|
||||
|
||||
describe('when the value changes', () => {
|
||||
it('should emit wa-change when toggled with the arrow keys', async () => {
|
||||
it('should emit change when toggled with the arrow keys', async () => {
|
||||
const radioGroup = await fixture<WaRadioGroup>(html`
|
||||
<wa-radio-group>
|
||||
<wa-radio id="radio-1" value="1"></wa-radio>
|
||||
@@ -405,8 +412,8 @@ describe('<wa-radio-group>', () => {
|
||||
const changeHandler = sinon.spy();
|
||||
const inputHandler = sinon.spy();
|
||||
|
||||
radioGroup.addEventListener('wa-change', changeHandler);
|
||||
radioGroup.addEventListener('wa-input', inputHandler);
|
||||
radioGroup.addEventListener('change', changeHandler);
|
||||
radioGroup.addEventListener('input', inputHandler);
|
||||
firstRadio.focus();
|
||||
await sendKeys({ press: 'ArrowRight' });
|
||||
await radioGroup.updateComplete;
|
||||
@@ -416,7 +423,7 @@ describe('<wa-radio-group>', () => {
|
||||
expect(radioGroup.value).to.equal('2');
|
||||
});
|
||||
|
||||
it('should emit wa-change and wa-input when clicked', async () => {
|
||||
it('should emit change and input when clicked', async () => {
|
||||
const radioGroup = await fixture<WaRadioGroup>(html`
|
||||
<wa-radio-group>
|
||||
<wa-radio id="radio-1" value="1"></wa-radio>
|
||||
@@ -425,12 +432,12 @@ describe('<wa-radio-group>', () => {
|
||||
`);
|
||||
const radio = radioGroup.querySelector<WaRadio>('#radio-1')!;
|
||||
setTimeout(() => radio.click());
|
||||
const event = (await oneEvent(radioGroup, 'wa-change')) as WaChangeEvent;
|
||||
const event = await oneEvent(radioGroup, 'change');
|
||||
expect(event.target).to.equal(radioGroup);
|
||||
expect(radioGroup.value).to.equal('1');
|
||||
});
|
||||
|
||||
it('should emit wa-change and wa-input when toggled with spacebar', async () => {
|
||||
it('should emit change and input when toggled with spacebar', async () => {
|
||||
const radioGroup = await fixture<WaRadioGroup>(html`
|
||||
<wa-radio-group>
|
||||
<wa-radio id="radio-1" value="1"></wa-radio>
|
||||
@@ -440,12 +447,12 @@ describe('<wa-radio-group>', () => {
|
||||
const radio = radioGroup.querySelector<WaRadio>('#radio-1')!;
|
||||
radio.focus();
|
||||
setTimeout(() => sendKeys({ press: ' ' }));
|
||||
const event = (await oneEvent(radioGroup, 'wa-change')) as WaChangeEvent;
|
||||
const event = await oneEvent(radioGroup, 'change');
|
||||
expect(event.target).to.equal(radioGroup);
|
||||
expect(radioGroup.value).to.equal('1');
|
||||
});
|
||||
|
||||
it('should not emit wa-change or wa-input when the value is changed programmatically', async () => {
|
||||
it('should not emit change or input when the value is changed programmatically', async () => {
|
||||
const radioGroup = await fixture<WaRadioGroup>(html`
|
||||
<wa-radio-group value="1">
|
||||
<wa-radio id="radio-1" value="1"></wa-radio>
|
||||
@@ -453,8 +460,8 @@ describe('<wa-radio-group>', () => {
|
||||
</wa-radio-group>
|
||||
`);
|
||||
|
||||
radioGroup.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
|
||||
radioGroup.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
|
||||
radioGroup.addEventListener('change', () => expect.fail('change should not be emitted'));
|
||||
radioGroup.addEventListener('input', () => expect.fail('input should not be emitted'));
|
||||
radioGroup.value = '2';
|
||||
await radioGroup.updateComplete;
|
||||
});
|
||||
|
||||
@@ -1,16 +1,15 @@
|
||||
import { html, isServer } from 'lit';
|
||||
import { customElement, property, query, state } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { WaChangeEvent } from '../../events/change.js';
|
||||
import { WaInputEvent } from '../../events/input.js';
|
||||
import { uniqueId } from '../../internal/math.js';
|
||||
import { HasSlotController } from '../../internal/slot.js';
|
||||
import { RequiredValidator } from '../../internal/validators/required-validator.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
|
||||
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
|
||||
import formControlStyles from '../../styles/shadow/form-control.css';
|
||||
import buttonGroupStyles from '../../styles/utilities/button-group.css';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
import '../radio-button/radio-button.js';
|
||||
import type WaRadioButton from '../radio-button/radio-button.js';
|
||||
import '../radio/radio.js';
|
||||
import type WaRadio from '../radio/radio.js';
|
||||
@@ -22,20 +21,22 @@ import styles from './radio-group.css';
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-button-group
|
||||
* @dependency wa-radio
|
||||
* @dependency wa-radio-button
|
||||
*
|
||||
* @slot - The default slot where `<wa-radio>` or `<wa-radio-button>` elements are placed.
|
||||
* @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
|
||||
* attribute.
|
||||
* @slot hint - Text that describes how to use the radio group. Alternatively, you can use the `hint` attribute.
|
||||
*
|
||||
* @event wa-change - Emitted when the radio group's selected value changes.
|
||||
* @event wa-input - Emitted when the radio group receives user input.
|
||||
* @event change - Emitted when the radio group's selected value changes.
|
||||
* @event input - Emitted when the radio group receives user input.
|
||||
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
||||
*
|
||||
* @csspart form-control - The form control that wraps the label, input, and hint.
|
||||
* @csspart form-control-label - The label's wrapper.
|
||||
* @csspart form-control-input - The input's wrapper.
|
||||
* @csspart radios - The wrapper than surrounds radio items, styled as a flex container by default.
|
||||
* @csspart hint - The hint's wrapper.
|
||||
* @csspart button-group - The button group that wraps radio buttons.
|
||||
* @csspart button-group__base - The button group's `base` part.
|
||||
@@ -65,6 +66,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
|
||||
@query('slot:not([name])') defaultSlot: HTMLSlotElement;
|
||||
|
||||
@state() private hasButtonGroup = false;
|
||||
@state() private hasRadioButtons = false;
|
||||
|
||||
/**
|
||||
* The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
|
||||
@@ -78,6 +80,9 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
|
||||
/** The name of the radio group, submitted as a name/value pair with form data. */
|
||||
@property({ reflect: true }) name: string | null = null;
|
||||
|
||||
/** The orientation in which to show radio items. */
|
||||
@property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'vertical';
|
||||
|
||||
private _value: string | null = null;
|
||||
|
||||
get value() {
|
||||
@@ -102,8 +107,8 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
|
||||
/** The default value of the form control. Primarily used for resetting the form control. */
|
||||
@property({ attribute: 'value', reflect: true }) defaultValue: string | null = this.getAttribute('value') || null;
|
||||
|
||||
/** The radio group's size. This size will be applied to all child radios and radio buttons. */
|
||||
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
|
||||
/** The radio group's size. This size will be applied to all child radios and radio buttons, except when explicitly overridden. */
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
|
||||
/** Ensures a child radio is checked before allowing the containing form to submit. */
|
||||
@property({ type: Boolean, reflect: true }) required = false;
|
||||
@@ -159,8 +164,8 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new WaChangeEvent());
|
||||
this.dispatchEvent(new WaInputEvent());
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
}
|
||||
};
|
||||
|
||||
@@ -175,11 +180,13 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
|
||||
private async syncRadioElements() {
|
||||
const radios = this.getAllRadios();
|
||||
|
||||
// Detect the presence of radio buttons
|
||||
this.hasRadioButtons = radios.some(radio => radio.localName === 'wa-radio-button');
|
||||
|
||||
await Promise.all(
|
||||
// Sync the checked state and size
|
||||
radios.map(async radio => {
|
||||
await radio.updateComplete;
|
||||
radio.size = this.size;
|
||||
|
||||
if (!radio.disabled && radio.value === this.value) {
|
||||
radio.checked = true;
|
||||
@@ -290,8 +297,8 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new WaChangeEvent());
|
||||
this.dispatchEvent(new WaInputEvent());
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
@@ -321,16 +328,15 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
|
||||
part="form-control"
|
||||
class=${classMap({
|
||||
'form-control': true,
|
||||
'form-control--small': this.size === 'small',
|
||||
'form-control--medium': this.size === 'medium',
|
||||
'form-control--large': this.size === 'large',
|
||||
'form-control--radio-group': true,
|
||||
'form-control--has-label': hasLabel,
|
||||
'form-control--has-radio-buttons': this.hasRadioButtons,
|
||||
})}
|
||||
role="radiogroup"
|
||||
aria-labelledby="label"
|
||||
aria-describedby="hint"
|
||||
aria-errormessage="error-message"
|
||||
aria-orientation=${this.orientation}
|
||||
>
|
||||
<label
|
||||
part="form-control-label"
|
||||
@@ -344,7 +350,10 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
<slot
|
||||
part="form-control-input"
|
||||
class=${classMap({ 'wa-button-group': this.hasButtonGroup })}
|
||||
class=${classMap({
|
||||
'wa-button-group': this.hasButtonGroup,
|
||||
'wa-button-group-vertical': this.orientation === 'vertical',
|
||||
})}
|
||||
@slotchange=${this.syncRadioElements}
|
||||
></slot>
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user