mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-13 20:49:15 +00:00
Compare commits
85 Commits
styling-at
...
copy-butto
| Author | SHA1 | Date | |
|---|---|---|---|
|
8a41c31851 | ||
|
|
6080a85035 | ||
|
|
f7e088c8df | ||
|
|
80e1c05b37 | ||
|
|
99f0273783 | ||
|
|
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 | ||
|
|
e3560dcf98 | ||
|
|
f2bb2c84a0 | ||
|
|
13b3342017 | ||
|
|
d1c1d689ce | ||
|
|
44e5e37a2b | ||
|
|
566aae927d | ||
|
|
7258c001a7 | ||
|
|
7a70940c6a | ||
|
|
45f4edc426 | ||
|
|
da32015f27 | ||
|
|
03d8238edb | ||
|
|
34f8744493 | ||
|
|
fa3fe5f753 | ||
|
|
fc6c7de1fd | ||
|
|
0037712549 | ||
|
|
5301945bfa | ||
|
|
1298651dd8 | ||
|
|
5f9695fde1 | ||
|
|
2eb2597efe | ||
|
|
431e82261b | ||
|
|
df51149d0a | ||
|
|
fba0b11343 | ||
|
|
3618e93490 | ||
|
|
cfa95307d1 | ||
|
|
15344c2a2a | ||
|
|
3974aa5130 | ||
|
|
a6702ad6d2 | ||
|
|
ecf21adddc | ||
|
|
52c24fc3b7 | ||
|
|
d464714d7b | ||
|
|
7d089bbe2f | ||
|
|
71914afc91 | ||
|
|
9d139e3fa0 | ||
|
|
db3039e9fe | ||
|
|
9494b9bb67 | ||
|
|
7e1f4f0351 | ||
|
|
5ebe4f4d3e | ||
|
|
dfb9d53a25 | ||
|
|
c2c1a2ff5b | ||
|
|
ac86c037a1 | ||
|
|
6b07c9a040 | ||
|
|
24a76f6a7c | ||
|
|
89c0667e9c | ||
|
|
434084ea4e | ||
|
|
1738c6345b | ||
|
|
0ac7916a1b | ||
|
|
e7979991e3 | ||
|
|
07f70098f8 | ||
|
|
17146698db | ||
|
|
bf852b1296 | ||
|
|
e367c0ef29 | ||
|
|
01210ef364 | ||
|
|
40648e15fb | ||
|
|
ab67ecfad3 |
1
docs/_data/hues.json
Normal file
1
docs/_data/hues.json
Normal file
@@ -0,0 +1 @@
|
||||
["red", "yellow", "green", "cyan", "blue", "indigo", "purple", "gray"]
|
||||
1
docs/_data/palettes.js
Normal file
1
docs/_data/palettes.js
Normal file
@@ -0,0 +1 @@
|
||||
export { default as default } from '../../src/styles/color/palettes.js';
|
||||
@@ -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">
|
||||
@@ -83,8 +83,6 @@
|
||||
</details>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
{% block header %}
|
||||
{% include 'breadcrumbs.njk' %}
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
|
||||
40
docs/_includes/contrast-table.njk
Normal file
40
docs/_includes/contrast-table.njk
Normal file
@@ -0,0 +1,40 @@
|
||||
<table class="colors wa-palette-{{ paletteId }}">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
{% for tint_bg in tints -%}
|
||||
{% for tint_fg in tints | reverse -%}
|
||||
{% if (tint_fg - tint_bg) | abs == difference %}
|
||||
<th>{{ tint_fg }} on {{ tint_bg }}</th>
|
||||
{% endif %}
|
||||
{%- endfor -%}
|
||||
{%- endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% for hue in hues -%}
|
||||
<tr>
|
||||
<th>{{ hue | capitalize }}</th>
|
||||
{% for tint_bg in tints -%}
|
||||
{% set color_bg = palettes[paletteId][hue][tint_bg] %}
|
||||
{% for tint_fg in tints | reverse -%}
|
||||
{% set color_fg = palettes[paletteId][hue][tint_fg] %}
|
||||
{% if (tint_fg - tint_bg) | abs == difference %}
|
||||
<td>
|
||||
<div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint_bg }}); color: var(--wa-color-{{ hue }}-{{ tint_fg }})">
|
||||
{% set contrast_wcag = '' %}
|
||||
{% if color_fg and color_bg %}
|
||||
{% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
|
||||
{% endif %}
|
||||
{% if contrast_wcag %}
|
||||
{{ contrast_wcag | number({maximumSignificantDigits: 2}) }}
|
||||
{% else %}
|
||||
{{ tint_fg }} on {{ tint_bg }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
{% endif %}
|
||||
{%- endfor -%}
|
||||
{%- endfor -%}
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
</table>
|
||||
@@ -30,19 +30,15 @@
|
||||
|
||||
<script type="module" src="/assets/scripts/theme-picker.js"></script>
|
||||
{# Preset Theme #}
|
||||
<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/{{ forceTheme or 'default' }}.css" render="blocking" fetchpriority="high" />
|
||||
{% if not forceTheme %}
|
||||
{% if forceTheme %}
|
||||
<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/{{ forceTheme }}.css" render="blocking" fetchpriority="high" />
|
||||
{% else %}
|
||||
<noscript><link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" render="blocking" fetchpriority="high" /></noscript>
|
||||
<script>
|
||||
if (localStorage.presetTheme) {
|
||||
let preset = localStorage.presetTheme;
|
||||
{
|
||||
let preset = localStorage.presetTheme ?? 'default';
|
||||
let script = document.currentScript;
|
||||
let link = script.previousElementSibling;
|
||||
let newLink = link.cloneNode();
|
||||
newLink.href = link.href.replace("/default.css", `/${preset}.css`);
|
||||
newLink.addEventListener('load', () => {
|
||||
link.remove();
|
||||
});
|
||||
link.after(newLink);
|
||||
script.insertAdjacentHTML('beforebegin', `<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/${ preset }.css" render="blocking" fetchpriority="high" />`);
|
||||
}
|
||||
</script>
|
||||
<script type="module" src="/assets/scripts/preset-theme-picker.js"></script>
|
||||
|
||||
18
docs/_includes/import-stylesheet-code.md.njk
Normal file
18
docs/_includes/import-stylesheet-code.md.njk
Normal file
@@ -0,0 +1,18 @@
|
||||
<wa-tab-group>
|
||||
<wa-tab panel="html">In HTML</wa-tab>
|
||||
<wa-tab panel="css">In CSS</wa-tab>
|
||||
<wa-tab-panel name="html">
|
||||
|
||||
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">
|
||||
|
||||
Add the following code at the top of your CSS file:
|
||||
```css
|
||||
@import url('{% cdnUrl stylesheet %}');
|
||||
```
|
||||
</wa-tab-panel>
|
||||
</wa-tab-group>
|
||||
@@ -1,8 +1,8 @@
|
||||
{# Some collections (like "patterns") will not have any items in the alpha build for example. So this checks to make sure the collection exists. #}
|
||||
{% if collections[tag] -%}
|
||||
<wa-details {{ (tag in (tags or [])) | attr('open') }}>
|
||||
{% set groupUrl %}/docs/{{ tag }}/{% endset %}
|
||||
<wa-details {{ ((tag in (tags or [])) or (groupUrl in page.url)) | attr('open') }}>
|
||||
<h2 slot="summary">
|
||||
{% set groupUrl %}/docs/{{ tag }}/{% endset %}
|
||||
{% if groupUrl | getCollectionItemFromUrl %}
|
||||
<a href="{{ groupUrl }}" title="Overview">{{ title or (tag | capitalize) }}
|
||||
<wa-icon name="grid-2"></wa-icon>
|
||||
|
||||
@@ -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 {
|
||||
@@ -25,7 +26,8 @@
|
||||
'utilities': 'Style Utilities',
|
||||
'layout': 'Layout',
|
||||
'patterns': 'Patterns',
|
||||
'theming': 'Theming'
|
||||
'palettes': 'Color Palettes',
|
||||
'tokens': 'Design Tokens'
|
||||
} %}
|
||||
{% include 'sidebar-group.njk' %}
|
||||
{% endfor %}
|
||||
|
||||
24
docs/_includes/svgs/palette.njk
Normal file
24
docs/_includes/svgs/palette.njk
Normal file
@@ -0,0 +1,24 @@
|
||||
{% set paletteId = page.fileSlug %}
|
||||
{% set tints = [80, 60, 40, 20] %}
|
||||
{% set width = 20 %}
|
||||
{% set height = 13 %}
|
||||
{% set gap_x = 3 %}
|
||||
{% set gap_y = 3 %}
|
||||
|
||||
<svg viewBox="0 0 {{ (width + gap_x) * hues|length }} {{ (height + gap_y) * tints|length }}" fill="none" xmlns="http://www.w3.org/2000/svg" class="wa-palette-{{ paletteId }} palette-icon">
|
||||
<style>
|
||||
@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});
|
||||
.palette-icon {
|
||||
height: 8ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% for hue in hues -%}
|
||||
{% set hueIndex = loop.index0 %}
|
||||
{% for tint in tints -%}
|
||||
<rect x="{{ hueIndex * (width + gap_x) }}" y="{{ loop.index0 * (height + gap_y) }}"
|
||||
width="{{ width }}" height="{{ height }}"
|
||||
fill="var(--wa-color-{{ hue }}-{{ tint }})" rx="4" />
|
||||
{%- endfor %}
|
||||
{% endfor %}
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 596 B After Width: | Height: | Size: 596 B |
@@ -2,7 +2,7 @@
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M48.8665 59.1993L33.7329 33H64C63.8352 38.2705 62.3694 43.4244 59.7264 48C57.0833 52.5756 53.3507 56.4213 48.8665 59.1993Z" fill="var(--wa-color-green-70)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M32 64C26.714 64 21.5155 62.6919 16.8665 60.1993L32 34L47.1336 60.1993C42.4845 62.6919 37.286 64 32 64Z" fill="var(--wa-color-blue-60)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 48C1.63063 43.4244 0.164839 38.2706 0 33L30.2671 33L15.1336 59.1993C10.6493 56.4213 6.91666 52.5756 4.27365 48Z" fill="var(--wa-color-indigo-60)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 16C6.91667 11.4244 10.6493 7.57868 15.1336 4.80072L30.2671 31L0 31C0.16484 25.7295 1.63063 20.5756 4.27365 16Z" fill="var(--wa-color-violet-60)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 16C6.91667 11.4244 10.6493 7.57868 15.1336 4.80072L30.2671 31L0 31C0.16484 25.7295 1.63063 20.5756 4.27365 16Z" fill="var(--wa-color-purple-60)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M32 30L16.8665 3.80072C21.5155 1.30813 26.714 0 32 0C37.286 0 42.4845 1.30813 47.1336 3.80072L32 30Z" fill="var(--wa-color-red-60)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M33.7329 31L48.8665 4.80072C53.3507 7.57868 57.0833 11.4244 59.7264 16C62.3694 20.5756 63.8352 25.7294 64 31L33.7329 31Z" fill="var(--wa-color-yellow-80)"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 502 B After Width: | Height: | Size: 502 B |
|
Before Width: | Height: | Size: 790 B After Width: | Height: | Size: 790 B |
|
Before Width: | Height: | Size: 697 B After Width: | Height: | Size: 697 B |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
@@ -23,7 +23,7 @@
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-teal-60); --text-color: var(--wa-color-teal-95);">
|
||||
<wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-cyan-60); --text-color: var(--wa-color-cyan-95);">
|
||||
<wa-icon slot="icon" name="robot-astromech" family="duotone" style="font-size: 1.5em;"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
|
||||
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 %}
|
||||
|
||||
119
docs/_layouts/palette.njk
Normal file
119
docs/_layouts/palette.njk
Normal file
@@ -0,0 +1,119 @@
|
||||
{% set hasSidebar = true %}
|
||||
{% set hasOutline = true %}
|
||||
{# {% set forceTheme = page.fileSlug %} #}
|
||||
|
||||
{% extends '../_layouts/block.njk' %}
|
||||
|
||||
{% set paletteId = page.fileSlug %}
|
||||
|
||||
{% block afterContent %}
|
||||
<style>@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});</style>
|
||||
|
||||
{% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %}
|
||||
|
||||
<table class="colors wa-palette-{{ paletteId }}">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
{% for tint in tints -%}
|
||||
<th>{{ tint }}</th>
|
||||
{%- endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% for hue in hues -%}
|
||||
<tr>
|
||||
<th>{{ hue | capitalize }}</th>
|
||||
{% for tint in tints -%}
|
||||
<td>
|
||||
<div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
|
||||
<wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
|
||||
</div>
|
||||
</td>
|
||||
{%- endfor -%}
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
</table>
|
||||
|
||||
<h2>Used By</h2>
|
||||
|
||||
<section class="index-grid">
|
||||
{% for page in collections.theme %}
|
||||
{%- if page.data.palette == paletteId -%}
|
||||
{% include "page-card.njk" %}
|
||||
{%- endif -%}
|
||||
{% endfor %}
|
||||
</section>
|
||||
|
||||
{% markdown %}
|
||||
## Color Contrast
|
||||
|
||||
Web Awesome color scales are designed to guarantee certain contrast ratios,
|
||||
both per [WCAG 2.1 success criteria](https://www.w3.org/TR/WCAG21/#contrast-minimum)
|
||||
as well as the emergent APCA specification _(planned)_,
|
||||
so you can ensure that text is both legible to all users, and legally conformant.
|
||||
|
||||
### Level 1
|
||||
|
||||
A difference of `40` ensures a minimum **3:1** contrast ratio, suitable for large text and icons (AA).
|
||||
{% endmarkdown %}
|
||||
|
||||
{% set difference = 40 %}
|
||||
{% include "contrast-table.njk" %}
|
||||
|
||||
{% markdown %}
|
||||
|
||||
This also goes for a difference of `45`:
|
||||
|
||||
{% endmarkdown %}
|
||||
|
||||
{% set difference = 45 %}
|
||||
{% include "contrast-table.njk" %}
|
||||
|
||||
{% markdown %}
|
||||
|
||||
### Level 2
|
||||
|
||||
A difference of `50` ensures a minimum **4.5:1** contrast ratio, suitable for normal text (AA) and large text (AAA)
|
||||
{% endmarkdown %}
|
||||
|
||||
{% set difference = 50 %}
|
||||
{% include "contrast-table.njk" %}
|
||||
|
||||
{% markdown %}
|
||||
|
||||
This also goes for a difference of `55`:
|
||||
|
||||
{% endmarkdown %}
|
||||
|
||||
{% set difference = 55 %}
|
||||
{% include "contrast-table.njk" %}
|
||||
|
||||
{% markdown %}
|
||||
### Level 3
|
||||
|
||||
A difference of `60` ensures a minimum **7:1** contrast ratio, suitable for all text (AAA)
|
||||
{% endmarkdown %}
|
||||
|
||||
{% set difference = 60 %}
|
||||
{% include "contrast-table.njk" %}
|
||||
|
||||
{% markdown %}
|
||||
|
||||
This also goes for a difference of `65`:
|
||||
|
||||
{% endmarkdown %}
|
||||
|
||||
{% set difference = 65 %}
|
||||
{% include "contrast-table.njk" %}
|
||||
|
||||
{% markdown %}
|
||||
## How to use this palette
|
||||
|
||||
If you are using a Web Awesome theme that uses this palette, it will already be included.
|
||||
To use a different palette than a theme default, or to use it in a custom theme, you can import this palette directly from the Web Awesome CDN.
|
||||
|
||||
{% set stylesheet = 'styles/color/' + page.fileSlug + '.css' %}
|
||||
{% include 'import-stylesheet-code.md.njk' %}
|
||||
|
||||
{% endmarkdown %}
|
||||
{% endblock %}
|
||||
@@ -5,7 +5,71 @@
|
||||
{% extends '../_includes/base.njk' %}
|
||||
|
||||
{% block header %}
|
||||
<iframe src='{{ page.url }}demo.html'></iframe>
|
||||
<iframe src='{{ page.url }}demo.html' id="demo"></iframe>
|
||||
|
||||
<p id="mix_and_match" class="wa-gap-m">
|
||||
<strong>
|
||||
<wa-icon name="merge" slot="prefix"></wa-icon>
|
||||
Remix
|
||||
<wa-icon-button href="#remixing" name="circle-question" slot="suffix" variant="regular" label="How to use?"></wa-icon-button>
|
||||
</strong>
|
||||
<wa-select name="colors" label="Colors from…" size="small">
|
||||
<wa-icon name="palette" slot="prefix" variant="regular"></wa-icon>
|
||||
<wa-option value="">(Theme default)</wa-option>
|
||||
<wa-divider></wa-divider>
|
||||
{% for theme in collections.theme | sort %}
|
||||
{% if theme.fileSlug !== page.fileSlug %}
|
||||
<wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</wa-select>
|
||||
|
||||
<wa-select name="palette" label="Palette" size="small">
|
||||
<wa-icon name="swatchbook" slot="prefix" variant="regular"></wa-icon>
|
||||
<wa-option value="">(Theme default)</wa-option>
|
||||
<wa-divider></wa-divider>
|
||||
{% for p in collections.palette | sort %}
|
||||
{% if p.fileSlug !== palette %}
|
||||
<wa-option value="{{ p.fileSlug }}">{{ p.data.title }}</wa-option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</wa-select>
|
||||
|
||||
<wa-select name="typography" label="Typography from…" size="small">
|
||||
<wa-icon name="font-case" slot="prefix"></wa-icon>
|
||||
<wa-option value="">(Theme default)</wa-option>
|
||||
<wa-divider></wa-divider>
|
||||
{% for theme in collections.theme | sort %}
|
||||
{% if theme.fileSlug !== page.fileSlug %}
|
||||
<wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</wa-select>
|
||||
|
||||
|
||||
</p>
|
||||
<script>
|
||||
document.querySelector('#mix_and_match').addEventListener('change', function(event) {
|
||||
let selects = document.querySelectorAll('#mix_and_match wa-select');
|
||||
let url = new URL(demo.src);
|
||||
|
||||
for (let select of selects) {
|
||||
url.searchParams.set(select.name, select.value);
|
||||
}
|
||||
|
||||
demo.src = url;
|
||||
});
|
||||
</script>
|
||||
|
||||
<h2>Default Color Palette</h2>
|
||||
{% set paletteURL = '/docs/palettes/' + palette + '/' %}
|
||||
{% set themePage = page %}
|
||||
{% set page = paletteURL | getCollectionItemFromUrl %}
|
||||
<div class="index-grid">
|
||||
{% include 'page-card.njk' %}
|
||||
</div>
|
||||
{% set page = themePage %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block afterContent %}
|
||||
@@ -14,24 +78,25 @@
|
||||
|
||||
You can import this theme from the Web Awesome CDN.
|
||||
|
||||
<wa-tab-group>
|
||||
<wa-tab panel="html">In HTML</wa-tab>
|
||||
<wa-tab panel="css">In CSS</wa-tab>
|
||||
<wa-tab-panel name="html">
|
||||
{% set stylesheet = 'styles/themes/' + page.fileSlug + '.css' %}
|
||||
{% include 'import-stylesheet-code.md.njk' %}
|
||||
|
||||
Simply add the following code to the `<head>` of your page:
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/' + page.fileSlug + '.css' %}" />
|
||||
```
|
||||
</wa-tab-panel>
|
||||
<wa-tab-panel name="css">
|
||||
### Remixing { #remixing }
|
||||
|
||||
Simply add the following code at the top of your CSS file:
|
||||
```css
|
||||
@import url('{% cdnUrl 'styles/themes/' + page.fileSlug + '.css' %}');
|
||||
```
|
||||
</wa-tab-panel>
|
||||
</wa-tab-group>
|
||||
If you want to combine the **colors** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
|
||||
|
||||
{% set stylesheet = 'styles/themes/' + page.fileSlug + '/color.css' %}
|
||||
{% include 'import-stylesheet-code.md.njk' %}
|
||||
|
||||
To use the **typography** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
|
||||
|
||||
{% set stylesheet = 'styles/themes/' + page.fileSlug + '/typography.css' %}
|
||||
{% include 'import-stylesheet-code.md.njk' %}
|
||||
|
||||
<wa-callout variant="warning">
|
||||
<wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
|
||||
Please note that not all combinations will look good — once you’re mixing and matching, you’re on your own!
|
||||
</wa-callout>
|
||||
|
||||
## Dark mode
|
||||
|
||||
@@ -73,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
|
||||
@@ -81,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 %}
|
||||
@@ -105,6 +105,23 @@ export function deepValue(obj, key) {
|
||||
return key.reduce((subObj, property) => subObj?.[property], obj);
|
||||
}
|
||||
|
||||
export function number(value, options) {
|
||||
if (typeof value !== 'number' && isNaN(value)) {
|
||||
return value;
|
||||
}
|
||||
|
||||
let lang = options?.lang ?? 'en';
|
||||
if (options?.lang) {
|
||||
delete options.lang;
|
||||
}
|
||||
|
||||
if (!options || Object.keys(options).length === 0) {
|
||||
options = { maximumSignificantDigits: 3 };
|
||||
}
|
||||
|
||||
return Number(value).toLocaleString(lang, options);
|
||||
}
|
||||
|
||||
export function isNumeric(value) {
|
||||
return typeof value === 'number' || (typeof value === 'string' && !isNaN(value));
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ const presetTheme = new ThemeAspect({
|
||||
key: 'presetTheme',
|
||||
picker: 'wa-select.preset-theme-selector',
|
||||
|
||||
applyChange() {
|
||||
applyChange(options = {}) {
|
||||
const oldStylesheets = [...document.querySelectorAll('#theme-stylesheet')];
|
||||
const oldStylesheet = oldStylesheets.pop();
|
||||
|
||||
@@ -38,7 +38,7 @@ const presetTheme = new ThemeAspect({
|
||||
|
||||
oldStylesheet.remove();
|
||||
},
|
||||
{ behavior: 'smooth' },
|
||||
{ behavior: 'smooth', ...options },
|
||||
);
|
||||
},
|
||||
{ once: true },
|
||||
@@ -47,18 +47,6 @@ const presetTheme = new ThemeAspect({
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Without this, there's a flash of the incorrect preset theme.
|
||||
*/
|
||||
function updateSelectionBeforeTurboLoad(e) {
|
||||
const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream;
|
||||
if (newElement) {
|
||||
presetTheme.syncUI(newElement);
|
||||
}
|
||||
}
|
||||
|
||||
['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
|
||||
document.addEventListener(eventName, updateSelectionBeforeTurboLoad);
|
||||
window.addEventListener('turbo:render', e => {
|
||||
presetTheme.applyChange({ behavior: 'instant' });
|
||||
});
|
||||
|
||||
window.presetTheme = presetTheme;
|
||||
|
||||
@@ -9,6 +9,7 @@ const icons = {
|
||||
component: 'puzzle-piece',
|
||||
document: 'file',
|
||||
home: 'house',
|
||||
native: 'code',
|
||||
theme: 'palette',
|
||||
};
|
||||
let searchTimeout;
|
||||
@@ -166,6 +167,7 @@ async function updateResults(query = '') {
|
||||
li.setAttribute('data-selected', index === 0 ? 'true' : 'false');
|
||||
|
||||
if (page.url === '/') icon = icons.home;
|
||||
if (page.url.startsWith('/docs/native')) icon = icons.native;
|
||||
if (page.url.startsWith('/docs/components')) icon = icons.component;
|
||||
if (page.url.startsWith('/docs/theme') || page.url.startsWith('/docs/restyle')) icon = icons.theme;
|
||||
|
||||
|
||||
@@ -28,12 +28,21 @@ 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);
|
||||
}
|
||||
});
|
||||
|
||||
['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
|
||||
document.addEventListener(eventName, e => {
|
||||
const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream;
|
||||
if (newElement) {
|
||||
this.syncUI(newElement);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
get() {
|
||||
@@ -91,11 +100,6 @@ const colorScheme = new ThemeAspect({
|
||||
domChange(() => {
|
||||
let dark = this.computedValue === 'dark';
|
||||
document.documentElement.classList.toggle(`wa-dark`, dark);
|
||||
|
||||
for (let el of document.querySelectorAll('.wa-invert')) {
|
||||
el.classList.toggle('wa-dark', !dark);
|
||||
el.classList.toggle('wa-light', dark);
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
pre {
|
||||
background-color: var(--wa-color-gray-20);
|
||||
color: white;
|
||||
|
||||
/* Ensures a discernible background color in dark mode
|
||||
* Useful for themes that use gray-20 as --wa-color-surface-default */
|
||||
.wa-dark & {
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
}
|
||||
.code-comment,
|
||||
.code-prolog,
|
||||
|
||||
@@ -333,6 +333,7 @@ wa-page > main:has(> .index-grid) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(22ch, 100%), 1fr));
|
||||
gap: var(--wa-space-2xl);
|
||||
margin-block-end: var(--wa-space-3xl);
|
||||
|
||||
a {
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
@@ -382,15 +383,79 @@ wa-page > main:has(> .index-grid) {
|
||||
|
||||
/* Swatches */
|
||||
.swatch {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
border-color: var(--wa-color-neutral-border-normal);
|
||||
border-style: var(--wa-border-style);
|
||||
border-width: var(--wa-border-width-s);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
box-sizing: border-box;
|
||||
line-height: 2.5;
|
||||
height: 2.5em;
|
||||
padding-inline: var(--wa-space-xs);
|
||||
min-height: 2.5em;
|
||||
padding: var(--wa-space-xs);
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
line-height: var(--wa-line-height-condensed);
|
||||
|
||||
&.color {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
wa-copy-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
--background-color-hover: transparent;
|
||||
font-family: var(--wa-font-family-code);
|
||||
|
||||
&::part(button) {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&::part(button):hover {
|
||||
cursor: copy;
|
||||
}
|
||||
|
||||
&::part(copy-icon),
|
||||
&::part(success-icon),
|
||||
&::part(error-icon) {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table.colors {
|
||||
thead {
|
||||
th {
|
||||
text-align: center;
|
||||
padding-block: 0;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
border: none;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
width: 0;
|
||||
vertical-align: middle;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
td {
|
||||
padding-inline: var(--wa-space-3xs);
|
||||
padding-block: var(--wa-space-s);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Layout Examples */
|
||||
@@ -456,7 +521,7 @@ wa-page > main:has(> .index-grid) {
|
||||
}
|
||||
}
|
||||
|
||||
.layout-theme {
|
||||
.page-wide {
|
||||
wa-page > main {
|
||||
max-width: 140ch;
|
||||
|
||||
@@ -464,11 +529,32 @@ wa-page > main:has(> .index-grid) {
|
||||
max-width: 80ch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-theme {
|
||||
iframe {
|
||||
width: 100%;
|
||||
min-height: 16lh;
|
||||
height: 65vh;
|
||||
max-height: 21lh;
|
||||
}
|
||||
|
||||
#mix_and_match {
|
||||
strong {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--wa-space-2xs);
|
||||
margin-top: 1.2em;
|
||||
}
|
||||
|
||||
wa-select::part(label) {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
wa-select[value='']::part(display-input),
|
||||
wa-option[value=''] {
|
||||
font-style: italic;
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -3,6 +3,7 @@ title: Callout
|
||||
description: Callouts are used to display important messages inline.
|
||||
tags: [feedback, content]
|
||||
icon: callout
|
||||
native: callout
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -9,6 +9,10 @@ icon: copy-button
|
||||
<wa-copy-button value="Web Awesome rocks!"></wa-copy-button>
|
||||
```
|
||||
|
||||
:::info
|
||||
Copy buttons use the browser's [`clipboard.writeText()`](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) method, which requires a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts) (HTTPS) in most browsers.
|
||||
:::
|
||||
|
||||
## Examples
|
||||
|
||||
### Custom Labels
|
||||
|
||||
@@ -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>
|
||||
```
|
||||
|
||||
|
||||
@@ -52,8 +52,8 @@ wa-page {
|
||||
}
|
||||
|
||||
&[slot^='navigation'] {
|
||||
background: var(--wa-color-violet-80);
|
||||
color: var(--wa-color-violet-20);
|
||||
background: var(--wa-color-purple-80);
|
||||
color: var(--wa-color-purple-20);
|
||||
}
|
||||
|
||||
strong {
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -420,5 +420,7 @@ This can be hard to conceptualize, so heres a fairly large example showing how l
|
||||
//
|
||||
// TODO - remove once we switch to the Popover API
|
||||
//
|
||||
document.querySelectorAll('wa-code-demo [slot="preview"] wa-select').forEach(select => select.hoist = true);
|
||||
customElements.whenDefined('wa-select').then(() => {
|
||||
document.querySelectorAll('wa-code-demo [slot="preview"] wa-select').forEach(select => select.hoist = true);
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -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,41 +1,49 @@
|
||||
---
|
||||
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/theming/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 purple in light mode:
|
||||
|
||||
```css
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-default {
|
||||
/* Changes the brand color to violet across the library */
|
||||
--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);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-violet-90);
|
||||
--wa-color-brand-border-normal: var(--wa-color-violet-80);
|
||||
--wa-color-brand-border-loud: var(--wa-color-violet-60);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-violet-40);
|
||||
--wa-color-brand-on-normal: var(--wa-color-violet-30);
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-purple-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-purple-90);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-purple-50);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-purple-90);
|
||||
--wa-color-brand-border-normal: var(--wa-color-purple-80);
|
||||
--wa-color-brand-border-loud: var(--wa-color-purple-60);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-purple-40);
|
||||
--wa-color-brand-on-normal: var(--wa-color-purple-30);
|
||||
--wa-color-brand-on-loud: white;
|
||||
}
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
@@ -91,8 +99,8 @@ Parts allow you to style *any* standard CSS property, not just those exposed thr
|
||||
|
||||
<style>
|
||||
.gradient-button::part(base) {
|
||||
background: linear-gradient(217deg, var(--wa-color-indigo-50), var(--wa-color-violet-50), var(--wa-color-red-50));
|
||||
border: solid 1px var(--wa-color-violet-50);
|
||||
background: linear-gradient(217deg, var(--wa-color-indigo-50), var(--wa-color-purple-50), var(--wa-color-red-50));
|
||||
border: solid 1px var(--wa-color-purple-50);
|
||||
transition: transform 100ms, box-shadow 100ms;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
```
|
||||
@@ -506,7 +506,7 @@ hasOutline: false
|
||||
<wa-option data-alpha="remove" value="playful">Playful</wa-option>
|
||||
<wa-option data-alpha="remove" value="brutalist">Brutalist</wa-option>
|
||||
<wa-option data-alpha="remove" value="tailspin">Tailspin</wa-option>
|
||||
<wa-option data-alpha="remove" value="glassy">Glassy</wa-option>
|
||||
<wa-option data-alpha="remove" value="glossy">Glossy</wa-option>
|
||||
<wa-option data-alpha="remove" value="active">Active</wa-option>
|
||||
<wa-option value="classic">Classic</wa-option>
|
||||
</wa-select>
|
||||
@@ -576,10 +576,10 @@ hasOutline: false
|
||||
<wa-radio value="yellow"><span style="background-color:var(--wa-color-yellow-60);"></span></wa-radio>
|
||||
<wa-radio value="lime"><span style="background-color:var(--wa-color-lime-60);"></span></wa-radio>
|
||||
<wa-radio value="green"><span style="background-color:var(--wa-color-green-60);"></span></wa-radio>
|
||||
<wa-radio value="teal"><span style="background-color:var(--wa-color-teal-60);"></span></wa-radio>
|
||||
<wa-radio value="cyan"><span style="background-color:var(--wa-color-cyan-60);"></span></wa-radio>
|
||||
<wa-radio value="blue"><span style="background-color:var(--wa-color-blue-60);"></span></wa-radio>
|
||||
<wa-radio value="indigo"><span style="background-color:var(--wa-color-indigo-60);"></span></wa-radio>
|
||||
<wa-radio value="violet"><span style="background-color:var(--wa-color-violet-60);"></span></wa-radio>
|
||||
<wa-radio value="purple"><span style="background-color:var(--wa-color-purple-60);"></span></wa-radio>
|
||||
<wa-radio value="gray"><span style="background-color:var(--wa-color-gray-60);"></span></wa-radio>
|
||||
</wa-radio-group>
|
||||
</wa-details>
|
||||
@@ -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 => {
|
||||
@@ -886,7 +886,7 @@ hasOutline: false
|
||||
case 'active':
|
||||
colorPalette = 'rudimentary';
|
||||
break;
|
||||
case 'glassy':
|
||||
case 'glossy':
|
||||
colorPalette = 'elegant';
|
||||
break;
|
||||
case 'premium':
|
||||
@@ -1049,7 +1049,7 @@ hasOutline: false
|
||||
case 'brutalist':
|
||||
case 'classic':
|
||||
case 'awesome':
|
||||
case 'glassy':
|
||||
case 'glossy':
|
||||
case 'active':
|
||||
assetFolder = themeSelect.value;
|
||||
break;
|
||||
@@ -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");
|
||||
@@ -1259,7 +1259,7 @@ hasOutline: false
|
||||
case 'tailspin':
|
||||
presetLogoIcons = ['wind', 'feather', 'lemon', 'wind-turbine'];
|
||||
break;
|
||||
case 'glassy':
|
||||
case 'glossy':
|
||||
presetLogoIcons = ['raindrops', 'citrus-slice', 'lighthouse', 'kiwi-bird'];
|
||||
break;
|
||||
case 'active':
|
||||
@@ -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}
|
||||
@@ -20,7 +21,7 @@ snippets:
|
||||
|
||||
### Variants
|
||||
|
||||
Use the variant utility classes to set the button's semantic variant.
|
||||
Use the [variant utility classes](../utilities/color.md) to set the button's semantic variant.
|
||||
|
||||
```html {.example}
|
||||
<button class="wa-neutral">Neutral</button>
|
||||
@@ -32,44 +33,54 @@ Use the variant utility classes to set the button's semantic variant.
|
||||
|
||||
### Appearance
|
||||
|
||||
Use the appearance utility classes to change the button's visual appearance:
|
||||
Use the [appearance utility classes](../utilities/appearance.md) to change the button's visual appearance:
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
Use `wa-size-*` classes to change a button's size.
|
||||
Use the [size utility classes](../utilities/size.md) to change a button's size.
|
||||
|
||||
```html {.example}
|
||||
<button class="wa-size-s">Small</button>
|
||||
|
||||
118
docs/docs/native/callout.md
Normal file
118
docs/docs/native/callout.md
Normal file
@@ -0,0 +1,118 @@
|
||||
---
|
||||
title: Callout
|
||||
description: Callouts are used to display important messages inline.
|
||||
component: callout
|
||||
icon: callout
|
||||
snippets: '.wa-callout'
|
||||
noAlpha: true
|
||||
file: styles/native/callout.css
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<article class="wa-callout">
|
||||
This is a callout style, applied to a standard article element.
|
||||
</article>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Variants
|
||||
|
||||
Use the [variant utility classes](../utilities/color.md) to set the callout's color variant.
|
||||
|
||||
```html {.example}
|
||||
<article class="wa-callout wa-brand">
|
||||
<strong>This is super informative</strong><br />
|
||||
You can tell by how pretty the callout is.
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-success">
|
||||
<strong>Your changes have been saved</strong><br />
|
||||
You can safely exit the app now.
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-neutral">
|
||||
<strong>Your settings have been updated</strong><br />
|
||||
Settings will take effect on next login.
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-warning">
|
||||
<strong>Your session has ended</strong><br />
|
||||
Please login again to continue.
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-danger">
|
||||
<strong>Your account has been deleted</strong><br />
|
||||
We're very sorry to see you go!
|
||||
</article>
|
||||
```
|
||||
|
||||
### Appearance
|
||||
|
||||
Use the [appearance utility classes](../utilities/appearance.md) to change the callout's visual appearance (the default is `outlined filled`).
|
||||
|
||||
```html {.example}
|
||||
<article class="wa-callout wa-brand wa-outlined wa-accent">
|
||||
This <strong>accent</strong> callout is also <strong>outlined</strong>
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-brand wa-accent">
|
||||
This <strong>accent</strong> callout draws attention without an outline
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-brand wa-outlined wa-filled">
|
||||
This callout is both <strong>filled</strong> and <strong>outlined</strong>
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-brand wa-filled">
|
||||
This callout is only <strong>filled</strong>
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-brand wa-outlined">
|
||||
Here's an <strong>outlined</strong> callout
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-brand wa-plain">
|
||||
No bells and whistles on this <strong>plain</strong> callout
|
||||
</article>
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the [size utility classes](../utilities/size.md) to change a callout's size.
|
||||
|
||||
```html {.example}
|
||||
<article class="wa-callout wa-brand wa-outlined wa-accent wa-size-l">
|
||||
This is meant to be very emphasized.
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout">
|
||||
Normal-sized callout.
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-plain wa-plain wa-size-s">
|
||||
Just a small tip!
|
||||
</article>
|
||||
```
|
||||
@@ -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}
|
||||
@@ -33,3 +34,39 @@ Use the [appearance utilities](/docs/utilities/appearance/) to change the select
|
||||
</select>
|
||||
</label>
|
||||
```
|
||||
|
||||
### Grouping options
|
||||
|
||||
In [modern browsers](https://caniuse.com/mdn-html_elements_select_hr_in_select), you can use the `<hr>` element as a divider:
|
||||
|
||||
```html {.example}
|
||||
<select>
|
||||
<small>Section 1</small>
|
||||
<option value="option-1">Option 1</option>
|
||||
<option value="option-2">Option 2</option>
|
||||
<option value="option-3">Option 3</option>
|
||||
<hr />
|
||||
<small>Section 2</small>
|
||||
<option value="option-4">Option 4</option>
|
||||
<option value="option-5">Option 5</option>
|
||||
<option value="option-6">Option 6</option>
|
||||
</select>
|
||||
```
|
||||
|
||||
To provide labels, you can use the `<optgroup>` element (with or without dividers):
|
||||
|
||||
```html {.example}
|
||||
<select>
|
||||
<optgroup label="Section 1">
|
||||
<option value="option-1">Option 1</option>
|
||||
<option value="option-2">Option 2</option>
|
||||
<option value="option-3">Option 3</option>
|
||||
</optgroup>
|
||||
<optgroup label="Section 2">
|
||||
<option value="option-4">Option 4</option>
|
||||
<option value="option-5">Option 5</option>
|
||||
<hr />
|
||||
<option value="option-6">Option 6</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
```
|
||||
|
||||
@@ -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}
|
||||
|
||||
5
docs/docs/palettes/anodized.md
Normal file
5
docs/docs/palettes/anodized.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
title: Anodized
|
||||
isPro: true
|
||||
tags: pro
|
||||
---
|
||||
3
docs/docs/palettes/bright.md
Normal file
3
docs/docs/palettes/bright.md
Normal file
@@ -0,0 +1,3 @@
|
||||
---
|
||||
title: Bright
|
||||
---
|
||||
4
docs/docs/palettes/classic.md
Normal file
4
docs/docs/palettes/classic.md
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: Classic
|
||||
description: The original Shoelace color palette.
|
||||
---
|
||||
4
docs/docs/palettes/default.md
Normal file
4
docs/docs/palettes/default.md
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: Default
|
||||
description: This is the palette used in the default theme.
|
||||
---
|
||||
5
docs/docs/palettes/elegant.md
Normal file
5
docs/docs/palettes/elegant.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
title: Elegant
|
||||
isPro: true
|
||||
tags: pro
|
||||
---
|
||||
10
docs/docs/palettes/index.njk
Normal file
10
docs/docs/palettes/index.njk
Normal file
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Color Palettes
|
||||
description: Palettes define [literal colors](/docs/tokens/colors) that are used in the design system.
|
||||
layout: overview
|
||||
override:tags: []
|
||||
forTag: palette
|
||||
categories:
|
||||
other: Free
|
||||
pro: Pro
|
||||
---
|
||||
5
docs/docs/palettes/mild.md
Normal file
5
docs/docs/palettes/mild.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
title: Mild
|
||||
isPro: true
|
||||
tags: pro
|
||||
---
|
||||
5
docs/docs/palettes/natural.md
Normal file
5
docs/docs/palettes/natural.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
title: Natural
|
||||
isPro: true
|
||||
tags: pro
|
||||
---
|
||||
8
docs/docs/palettes/palettes.json
Normal file
8
docs/docs/palettes/palettes.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"layout": "palette.njk",
|
||||
"tags": ["palettes", "palette"],
|
||||
"eleventyComputed": {
|
||||
"snippet": ".wa-palette-{{ page.fileSlug }}",
|
||||
"icon": "palette"
|
||||
}
|
||||
}
|
||||
5
docs/docs/palettes/rudimentary.md
Normal file
5
docs/docs/palettes/rudimentary.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
title: Rudimentary
|
||||
isPro: true
|
||||
tags: pro
|
||||
---
|
||||
5
docs/docs/palettes/vogue.md
Normal file
5
docs/docs/palettes/vogue.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
title: Vogue
|
||||
isPro: true
|
||||
tags: pro
|
||||
---
|
||||
@@ -1,5 +1,6 @@
|
||||
{
|
||||
"layout": "block.njk",
|
||||
"tags": ["patterns"],
|
||||
"wide": true,
|
||||
"noAlpha": true
|
||||
}
|
||||
|
||||
@@ -12,6 +12,48 @@ Components with the <wa-badge variant="warning" pill>Experimental</wa-badge> bad
|
||||
During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience!
|
||||
:::
|
||||
|
||||
## 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
|
||||
|
||||
- Added new themes:
|
||||
- Glossy
|
||||
- Matter
|
||||
- Premium
|
||||
- Playful
|
||||
- Added docs on themes and palettes
|
||||
- Separated colors and typography out from themes so they can be used independently
|
||||
- Added test suite to ensure all color palettes provide the color contrast they are supposed to
|
||||
- Added `.wa-invert` utility class to invert the current color scheme
|
||||
- Added `:state(blank)` to `<wa-input>`, `<wa-textarea>`, and `<wa-select>` to style form inputs differently when empty.
|
||||
|
||||
## 3.0.0-alpha.8
|
||||
|
||||
- Simplified the internal structure and CSS properties of `<wa-card>`, removed `base` part.
|
||||
@@ -30,7 +72,6 @@ During the alpha period, things might break! We take breaking changes very serio
|
||||
- Brutalist
|
||||
- Mellow
|
||||
- Tailspin
|
||||
- Playful
|
||||
- Renamed `--wa-form-control-resting-color` to `--wa-form-control-border-color` for familiarity and accuracy
|
||||
- Removed size-based `--wa-form-control-height-*` tokens in favor of `--wa-form-control-height` (see [size utilities](/docs/utilities/size/))
|
||||
- Updated the `--wa-border-width-*` and `--wa-border-radius-*` scale for better DX
|
||||
|
||||
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>
|
||||
1
docs/docs/themes/active.md
vendored
1
docs/docs/themes/active.md
vendored
@@ -3,4 +3,5 @@ title: Active
|
||||
description: Energetic and tactile, always in motion.
|
||||
isPro: true
|
||||
tags: pro
|
||||
palette: rudimentary
|
||||
---
|
||||
|
||||
1
docs/docs/themes/awesome.md
vendored
1
docs/docs/themes/awesome.md
vendored
@@ -2,4 +2,5 @@
|
||||
title: Awesome
|
||||
description: Punchy and vibrant, the rockstar of themes.
|
||||
order: 0.2
|
||||
palette: bright
|
||||
---
|
||||
|
||||
1
docs/docs/themes/brutalist.md
vendored
1
docs/docs/themes/brutalist.md
vendored
@@ -3,4 +3,5 @@ title: Brutalist
|
||||
description: Sharp, square, and unapologetically bold.
|
||||
isPro: true
|
||||
tags: pro
|
||||
palette: default
|
||||
---
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user