Visual Tests
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
Appearance Jump to heading
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.
Badge Jump to heading
appearance="" |
.wa-[appearance] |
|
---|---|---|
accent + outlined |
|
|
accent |
|
|
filled + outlined |
|
|
filled |
|
|
outlined |
|
|
plain |
|
|
Button Jump to heading
appearance="" |
.wa-[appearance] |
|
---|---|---|
accent + outlined |
|
|
accent |
|
|
filled + outlined |
|
|
filled |
|
|
outlined |
|
|
plain |
|
|
Callout Jump to heading
appearance="" |
.wa-[appearance] |
|
---|---|---|
accent + outlined |
|
|
accent |
|
|
filled + outlined |
|
|
filled |
|
|
outlined |
|
|
plain |
|
|
Tag Jump to heading
appearance="" |
.wa-[appearance] |
|
---|---|---|
accent + outlined |
|
|
accent |
|
|
filled + outlined |
|
|
filled |
|
|
outlined |
|
|
plain |
|
|
Form Controls Jump to heading
appearance="" |
.wa-[appearance] |
|
---|---|---|
outlined |
|
|
filled |
|
|
Alignment Jump to heading
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.
Code
Keyboard
Inserted
<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>
Color Jump to heading
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.
Badge Jump to heading
variant="" |
.wa-[variant] |
|
---|---|---|
brand |
|
|
neutral |
|
|
success |
|
|
warning |
|
|
danger |
|
|
Button Jump to heading
variant="" |
.wa-[variant] |
|
---|---|---|
brand |
|
|
neutral |
|
|
success |
|
|
warning |
|
|
danger |
|
|
Callout Jump to heading
variant="" |
.wa-[variant] |
|
---|---|---|
brand |
|
|
neutral |
|
|
success |
|
|
warning |
|
|
danger |
|
|
Tag Jump to heading
variant="" |
.wa-[variant] |
|
---|---|---|
brand |
|
|
neutral |
|
|
success |
|
|
warning |
|
|
danger |
|
|
Harmony Jump to heading
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.
Form Controls Jump to heading
<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>
Progress Jump to heading
<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>
Native Styles Jump to heading
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, color, and size utilities as components.
Button Jump to heading
<wa-button> |
<button> |
.wa-button |
|
---|---|---|---|
default |
|
||
.wa-brand |
|
||
.wa-neutral |
|
||
.wa-success |
|
||
.wa-warning |
|
||
.wa-danger |
|
||
.wa-accent |
|
||
.wa-filled |
|
||
.wa-outlined |
|
||
.wa-plain |
|
||
.wa-size-s |
|
||
.wa-size-m |
|
||
.wa-size-l |
|
||
.wa-pill |
|
Callout Jump to heading
<wa-callout> |
.wa-callout |
|
---|---|---|
default |
|
Callout
|
.wa-brand |
|
Brand
|
.wa-neutral |
|
Neutral
|
.wa-success |
|
Success
|
.wa-warning |
|
Warning
|
.wa-danger |
|
Danger
|
.wa-accent |
|
Accent
|
.wa-filled |
|
Filled
|
.wa-outlined |
|
Outlined
|
.wa-plain |
|
Plain
|
.wa-size-s |
|
Small
|
.wa-size-m |
|
Medium
|
.wa-size-l |
|
Large
|
.wa-pill |
|
Pill
|
Checkbox Jump to heading
<wa-checkbox> |
<input type="checkbox"> |
|
---|---|---|
default |
|
|
checked |
|
Color Picker Jump to heading
<wa-color-picker> |
<input type="color"> |
|
---|---|---|
default |
|
Details Jump to heading
<wa-details> |
<details> |
|
---|---|---|
default |
|
SummaryLorem 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. |
dir="rtl" |
|
تبديلنياستخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن |
Input Jump to heading
<wa-input> |
<input> |
|
---|---|---|
default |
|
|
type="password" |
|
|
type="date" |
|
|
type="time" |
|
|
.wa-filled |
|
|
.wa-size-s |
|
|
.wa-size-m |
|
|
.wa-size-l |
|
Progress Bar Jump to heading
<wa-progress-bar> |
<progress> |
|
---|---|---|
default |
|
Radio Jump to heading
<wa-radio> |
<input type="radio"> |
|
---|---|---|
default |
|
|
checked |
|
Select Jump to heading
<wa-select> |
<select> |
|
---|---|---|
default |
|
|
.wa-filled |
|
|
.wa-size-s |
|
|
.wa-size-m |
|
|
.wa-size-l |
|
Slider Jump to heading
<wa-slider> |
<input type="range"> |
|
---|---|---|
default |
|
Textarea Jump to heading
<wa-textarea> |
<textarea> |
|
---|---|---|
default |
|
|
.wa-filled |
|
|
.wa-size-s |
|
|
.wa-size-m |
|
|
.wa-size-l |
|
Size Jump to heading
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.
Button Jump to heading
size="" |
.wa-size-[s|m|l] |
|
---|---|---|
small /s |
|
|
medium /m |
|
|
large /l |
|
|
Button Group Jump to heading
size="" |
.wa-size-[s|m|l] |
|
---|---|---|
small /s |
|
|
medium /m |
|
|
large /l |
|
|
Callout Jump to heading
size="" |
.wa-size-[s|m|l] |
|
---|---|---|
small /s |
|
|
medium /m |
|
|
large /l |
|
|
Card Jump to heading
size="" |
.wa-size-[s|m|l] |
|
---|---|---|
small /s |
|
|
medium /m |
|
|
large /l |
|
|
Checkbox Jump to heading
size="" |
.wa-size-[s|m|l] |
|
---|---|---|
small /s |
|
|
medium /m |
|
|
large /l |
|
|
Color Picker Jump to heading
size="" |
.wa-size-[s|m|l] |
|
---|---|---|
small /s |
|
|
medium /m |
|
|
large /l |
|
|
Dropdown Jump to heading
size="" |
.wa-size-[s|m|l] |
|
---|---|---|
small /s |
|
|
medium /m |
|
|
large /l |
|
|
Menu Jump to heading
size="" |
.wa-size-[s|m|l] |
|
---|---|---|
small /s |
|
|
medium /m |
|
|
large /l |
|
|
Input Jump to heading
size="" |
.wa-size-[s|m|l] |
|
---|---|---|
small /s |
|
|
medium /m |
|
|
large /l |
|
|
Radio Jump to heading
size="" |
.wa-size-[s|m|l] |
|
---|---|---|
small /s |
|
|
medium /m |
|
|
large /l |
|
|
Radio Button Jump to heading
size="" |
.wa-size-[s|m|l] |
|
---|---|---|
small /s |
|
|
medium /m |
|
|
large /l |
|
|
Radio Group Jump to heading
size="" |
.wa-size-[s|m|l] |
|
---|---|---|
small /s |
|
|
medium /m |
|
|
large /l |
|
|
Rating Jump to heading
size="" |
.wa-size-[s|m|l] |
|
---|---|---|
small /s |
|
|
medium /m |
|
|
large /l |
|
|
Select Jump to heading
size="" |
.wa-size-[s|m|l] |
|
---|---|---|
small /s |
|
|
medium /m |
|
|
large /l |
|
|
Switch Jump to heading
size="" |
.wa-size-[s|m|l] |
|
---|---|---|
small /s |
|
|
medium /m |
|
|
large /l |
|
|
Textarea Jump to heading
size="" |
.wa-size-[s|m|l] |
|
---|---|---|
small /s |
|
|
medium /m |
|
|
large /l |
|
|