From d8881c0b1e4c50dbe0034ab791b0e4f16fae999c Mon Sep 17 00:00:00 2001 From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com> Date: Tue, 28 Jan 2025 18:45:19 -0500 Subject: [PATCH] Add Visual Test Suite (#617) * Initial progress on visual test suite * Additional tests and descriptions * Add native callout, add dividers between tables * Indicate test failures, improve alignment tests * Split tests into separate files * Add table scrolling * Remove irrelevant icon test cases * Add test failures * Shorten "Inline Code" > "Code" to prevent wrapping * Add horizontal orientation to radio button tests --- docs/_includes/sidebar.njk | 1 + docs/_includes/visual-tests/alignment.njk | 77 ++ docs/_includes/visual-tests/appearance.njk | 799 +++++++++++++++++++++ docs/_includes/visual-tests/color.njk | 698 ++++++++++++++++++ docs/_includes/visual-tests/harmony.njk | 32 + docs/_includes/visual-tests/native.njk | 745 +++++++++++++++++++ docs/_includes/visual-tests/size.njk | 562 +++++++++++++++ docs/docs/experimental/sandbox.md | 352 --------- docs/docs/resources/visual-tests.md | 115 +++ 9 files changed, 3029 insertions(+), 352 deletions(-) create mode 100644 docs/_includes/visual-tests/alignment.njk create mode 100644 docs/_includes/visual-tests/appearance.njk create mode 100644 docs/_includes/visual-tests/color.njk create mode 100644 docs/_includes/visual-tests/harmony.njk create mode 100644 docs/_includes/visual-tests/native.njk create mode 100644 docs/_includes/visual-tests/size.njk delete mode 100644 docs/docs/experimental/sandbox.md create mode 100644 docs/docs/resources/visual-tests.md diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk index bc1e38768..c93dfb6fa 100644 --- a/docs/_includes/sidebar.njk +++ b/docs/_includes/sidebar.njk @@ -16,6 +16,7 @@
  • Accessibility
  • Contributing
  • Changelog
    • +
  • Visual Tests
    • {% for tag, title in { diff --git a/docs/_includes/visual-tests/alignment.njk b/docs/_includes/visual-tests/alignment.njk new file mode 100644 index 000000000..768fa203f --- /dev/null +++ b/docs/_includes/visual-tests/alignment.njk @@ -0,0 +1,77 @@ +```html {.example} + +
    +
    + Switch + Checkbox + Radio +
    +
    + Switch + Checkbox + Radio +
    +
    + Switch + Checkbox + Radio +
    +
    + + + + Option + + + Button +
    +
    + + + + Option + + + Button +
    +
    + + + + Option + + + Button +
    +
    + Badge + Code + Keyboard + Inserted + Deleted + Highlighted +
    +
    + + + + +
    +
    +``` \ No newline at end of file diff --git a/docs/_includes/visual-tests/appearance.njk b/docs/_includes/visual-tests/appearance.njk new file mode 100644 index 000000000..d42c2c935 --- /dev/null +++ b/docs/_includes/visual-tests/appearance.njk @@ -0,0 +1,799 @@ +

    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 + + + +
    +
    \ No newline at end of file diff --git a/docs/_includes/visual-tests/color.njk b/docs/_includes/visual-tests/color.njk new file mode 100644 index 000000000..ca06fcbf5 --- /dev/null +++ b/docs/_includes/visual-tests/color.njk @@ -0,0 +1,698 @@ +

    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 + + + +
    +
    \ No newline at end of file diff --git a/docs/_includes/visual-tests/harmony.njk b/docs/_includes/visual-tests/harmony.njk new file mode 100644 index 000000000..e6c58112f --- /dev/null +++ b/docs/_includes/visual-tests/harmony.njk @@ -0,0 +1,32 @@ +

    Form Controls

    + +```html {.example} +
    + + + Option 1 + Option 2 + Option 3 + + + + Option 1 + Option 2 + Option 3 + + Checkbox + Switch + + Button +
    +``` + +

    Progress

    + +```html {.example} +
    + + + +
    +``` \ No newline at end of file diff --git a/docs/_includes/visual-tests/native.njk b/docs/_includes/visual-tests/native.njk new file mode 100644 index 000000000..789d29337 --- /dev/null +++ b/docs/_includes/visual-tests/native.njk @@ -0,0 +1,745 @@ +

    Button

    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    <wa-button><button>.wa-button
    default + Button + + + + +
    .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

    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    <wa-callout>.wa-callout
    default + Callout + + +
    .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 + + + +
    +
    + + +

    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" + + + +
    .wa-filled + + + +
    .wa-size-s + + + +
    .wa-size-m + + + +
    .wa-size-l + + + +
    +
    + + +

    Progress Bar

    + +
    + + + + + + + + + + + + + +
    <wa-progress-bar><progress>
    default + + + +
    +
    + + +

    Radio

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

    Select

    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    <wa-select><select>
    default + + Option + + + +
    .wa-filled + + + +
    .wa-size-s + + + +
    .wa-size-m + + + +
    .wa-size-l + + + +
    +
    + + +

    Slider

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

    Textarea

    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    <wa-textarea><textarea>
    default + + + +
    .wa-filled + + + +
    .wa-size-s + + + +
    .wa-size-m + + + +
    .wa-size-l + + + +
    +
    \ No newline at end of file diff --git a/docs/_includes/visual-tests/size.njk b/docs/_includes/visual-tests/size.njk new file mode 100644 index 000000000..42ec56d62 --- /dev/null +++ b/docs/_includes/visual-tests/size.njk @@ -0,0 +1,562 @@ +

    Button

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

    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 + + + +
    +
    + + +

    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 + + + +
    +
    + + +

    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 newline at end of file diff --git a/docs/docs/experimental/sandbox.md b/docs/docs/experimental/sandbox.md deleted file mode 100644 index 39617cfc5..000000000 --- a/docs/docs/experimental/sandbox.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -title: Theming Sandbox -description: TODO -layout: page-outline ---- - -## Card - -```html {.example} - - A kitten sits patiently between a terracotta pot and decorative grasses. - - Mittens
    - This kitten is as cute as he is playful. Bring him home today!
    - 6 weeks old - -
    - More Info - -
    -     - - -``` - -## Alerts - -```html {.example} - - - This is super informative
    - You can tell by how pretty the alert is. -     -
    - - - Your changes have been saved
    - You can safely exit the app now. -     -
    - - - Your settings have been updated
    - Settings will take affect on next login. -     -
    - - - Your session has ended
    - Please login again to continue. -     -
    - - - Your account has been deleted
    - We're very sorry to see you go! -     -``` - -## Badges and Tags - -```html {.example} -Brand -Success -Neutral -Warning -Danger -
    -Brand -Success -Neutral -Warning -Danger -``` - -## Buttons - -```html {.example} -Brand -Success -Neutral -Warning -Danger -

    -Brand -Success -Neutral -Warning -Danger -

    -Text -

    - - Option 1 - Option 2 - Option 3 - -``` - -## Form controls - -```html {.example} -Unchecked -
    -Checked -

    - - Option 1 - Option 2 - Option 3 - -
    -Switch off -
    -Switch on -

    - -

    - -
    - - Option 1 - Option 2 - Option 3 - Option 4 - Option 5 - Option 6 - -``` - -## Progress - -```html {.example} - - - -``` - -## Shadows - -```html {.example} - -
    -
    -
    -``` - -## Alignment Tests - -```html {.example} - -
    -
    - OCBS - OCBS - OCBS -
    -
    - OCBS - OCBS - OCBS -
    -
    - OCBS - OCBS - OCBS -
    -
    - - - OCBS - - - OCBS -
    -
    - - - OCBS - - - OCBS -
    -
    - - - OCBS - - - OCBS -
    -
    - OCBS - - - - - - -
    -
    - - - OCBS - - -
    -
    -``` - -## Custom Property Tests - -```html {.example} - -
    - - - - - - - - - - - - - - WA Checkbox - - - WA Checkbox - - - WA Radio - - - WA Radio - - - - Option 1 - Option 2 - Option 3 - Option 4 - -
    - -``` - -## Text Controls Tests - -```html {.example} -
    - - - - - - Option 1 - Option 2 - Option 3 - Option 4 - - - - -
    -``` \ No newline at end of file diff --git a/docs/docs/resources/visual-tests.md b/docs/docs/resources/visual-tests.md new file mode 100644 index 000000000..2be337617 --- /dev/null +++ b/docs/docs/resources/visual-tests.md @@ -0,0 +1,115 @@ +--- +title: Visual Tests +description: TODO +layout: page +wide: true +--- + + + +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. + +{% include 'visual-tests/appearance.njk' %} + + + + + +## 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' %} + + + + + +## 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' %} + + + + + +## 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' %} + + + + + +## 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' %} + + + + + +## 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' %} + + + + \ No newline at end of file