3.0.0-alpha.11 Alpha

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 and will be addressed in a future release.

Appearance Alignment Color Harmony Native Styles Size

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.

Badge

appearance="" .wa-[appearance]
accent + outlined
accent
filled + outlined
filled
outlined
plain

Button

appearance="" .wa-[appearance]
accent + outlined
accent
filled + outlined
filled
outlined
plain

Callout

appearance="" .wa-[appearance]
accent + outlined
accent
filled + outlined
filled
outlined
plain

Tag

appearance="" .wa-[appearance]
accent + outlined
accent
filled + outlined
filled
outlined
plain

Form Controls

appearance="" .wa-[appearance]
outlined
filled

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