spectrum-css

spectrum-css copied to clipboard

Adding t-shirt sizing and migration to core-tokens to the Switch

Adding option to have the static color variants in a pre-defined example container without the in-line CSS

Static background-color
  - id: switch
    name: Static White color
    status: Verified
    description: The static white variant of the Switch.
    markup: |
      <div class="spectrum-CSSExample-example-staticWhite">
        <div class="spectrum-Switch spectrum-Switch-size spectrum-Switch-sizeM spectrum-Switch--staticWhite">
          <input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-0">
          <span class="spectrum-Switch-switch"></span>
          <label class="spectrum-Switch-label" for="switch-onoff-0">Switch Off</label>
        </div>
        <div class="spectrum-Switch spectrum-Switch-sizeM">
          <input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-1" checked>
          <span class="spectrum-Switch-switch"></span>
          <label class="spectrum-Switch-label" for="switch-onoff-1">Switch On</label>
        </div>
      </div>

  - id: switch
    name: Static Black color
    status: Verified
    description: The static black variant of the Switch.
    markup: |
      <div class="spectrum-CSSExample-example-staticBlack">
        <div class="spectrum-Switch spectrum-Switch-size spectrum-Switch-sizeM spectrum-Switch--staticWhite">
          <input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-0">
          <span class="spectrum-Switch-switch"></span>
          <label class="spectrum-Switch-label" for="switch-onoff-0">Switch Off</label>
        </div>
        <div class="spectrum-Switch spectrum-Switch-sizeM">
          <input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-1" checked>
          <span class="spectrum-Switch-switch"></span>
          <label class="spectrum-Switch-label" for="switch-onoff-1">Switch On</label>
        </div>
      </div>

Description

https://jira.corp.adobe.com/browse/CSS-42 Switch - Add size option https://jira.corp.adobe.com/browse/CSS-100 Implement Switch Core Tokens

How and where has this been tested?

• How this was tested: Locally via http://localhost:3000/docs/switch.html#variants and comparing to https://opensource.adobe.com/spectrum-css/switch.html#variants
• Browser(s) and OS(s) this was tested with: Version 106.0.5205.0 (Official Build) canary (arm64)

Screenshots

To-do list

• [ ] If my change impacts other components, I have tested to make sure they don't break.
• [x] If my change impacts documentation, I have updated the documentation accordingly.
• [x] I have read the CONTRIBUTING document.
• [x] I have tested these changes in Windows High Contrast mode.

• [ ] This pull request is ready to merge.

VRT test is: https://spectrum-visual-regression.ci.corp.adobe.com/view/Spectrum%20CSS/job/css-vrt-test/27/

🚀 Deployed on https://pr-1496--spectrum-css.netlify.app

some colors need to be verified just to make sure I followed the correct specs from the XD file Components Batch 1.xd

VRT Results: https://spectrum-visual-regression.ci.corp.adobe.com/view/Spectrum%20CSS/job/css-vrt-test/27/artifact/backstop_data/html_report/index.html

I don't think there are Express versions needed - works out of the box. Main difference is the emphasized variant fill color

Released beta: 2.0.0-beta.0