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.

Native Color Size Alignment Harmony

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.

<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-button appearance="plain">
      <wa-icon name="gear" label="Settings"></wa-icon>
    </wa-button>
    <wa-spinner></wa-spinner>
  </div>
</div>

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.

Badge

variant="" .wa-[variant]
brand
neutral
success
warning
danger

Button

variant="" .wa-[variant]
brand
neutral
success
warning
danger

Callout

variant="" .wa-[variant]
brand
neutral
success
warning
danger

Tag

variant="" .wa-[variant]
brand
neutral
success
warning
danger

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.

Form Controls 

<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 

<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

Native style tests ensure that supported native elements and utilities look the same as their Web Awesome component counterparts. Native elements may also support the same appearance, color, and size utilities as components.

Button

<wa-button> <button>
default Button
accent
filled + outlined
filled
outlined
plain
small Small
medium Medium
large Large
pill Pill

Checkbox

<wa-checkbox> <input type="checkbox">
default Checkbox
checked Checkbox

Color Picker

<wa-color-picker> <input type="color">
default

Details

<wa-details> <details>
default 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.
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.
dir="rtl" استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
تبديلني

استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن

Input

<wa-input> <input>
default
type="password"
type="date"
type="time"
filled
small
medium
large

Progress Bar

<wa-progress-bar> <progress>
default

Radio

<wa-radio> <input type="radio">
default Radio
checked Radio

Select

<wa-select> <select>
default Option
filled Option
small Option
medium Option
large Option

Slider

<wa-slider> <input type="range">
default

Textarea

<wa-textarea> <textarea>
default
filled
small
medium
large

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.

Button

size="" .wa-size-[s|m|l]
small/s Button
medium/m Button
large/l Button

Button Group

size="" .wa-size-[s|m|l]
small/s Button L Button R
medium/m Button L Button R
large/l Button L Button R

Callout

size="" .wa-size-[s|m|l]
small/s Callout
medium/m Callout
large/l Callout

Checkbox

size="" .wa-size-[s|m|l]
small/s Checkbox
medium/m Checkbox
large/l Checkbox

Color Picker

size="" .wa-size-[s|m|l]
small/s
medium/m
large/l
size="" .wa-size-[s|m|l]
small/s Dropdown Menu Item 1 Menu Item 2
medium/m Dropdown Menu Item 1 Menu Item 2
large/l Dropdown Menu Item 1 Menu Item 2

Input

size="" .wa-size-[s|m|l]
small/s
medium/m
large/l

Radio

size="" .wa-size-[s|m|l]
small/s Radio
medium/m Radio
large/l Radio

Radio Button

size="" .wa-size-[s|m|l]
small/s Radio Button
medium/m Radio Button
large/l Radio Button

Radio Group

size="" .wa-size-[s|m|l]
small/s
medium/m
large/l

Rating

size="" .wa-size-[s|m|l]
small/s
medium/m
large/l

Select

size="" .wa-size-[s|m|l]
small/s Option
medium/m Option
large/l Option

Switch

size="" .wa-size-[s|m|l]
small/s Switch
medium/m Switch
large/l Switch

Textarea

size="" .wa-size-[s|m|l]
small/s
medium/m
large/l
    No results