Skip to content

Commit

Permalink
feat(switch): s2 migration (#2651)
Browse files Browse the repository at this point in the history 
* feat(switch): s2 migration

* chore: remove themes

* fix: animation

* fix: whcm light mode unchecked handle shows

* docs(storybook): align chromatic setup with new standard

* fix: checked corners for non-retina display

* fix: whcm handle selected color

* fix: namespace mods, use semantic tokens instead of global

* fix: handle state colors
  • Loading branch information
@mdt2 @pfulton
mdt2 authored and pfulton committed Apr 15, 2024
1 parent 1f462ac commit b3b3aa5
Show file tree
Hide file tree
Showing 7 changed files with 490 additions and 415 deletions.
515 changes: 232 additions & 283 deletions components/switch/index.css
View file

Large diffs are not rendered by default.

88 changes: 49 additions & 39 deletions components/switch/metadata/mods.md
View file
@@ -1,39 +1,49 @@
| Modifiable custom properties |
| --------------------------------------------------- |
| `--mod-animation-duration-100` |
| `--mod-animation-duration-200` |
| `--mod-border-width-200` |
| `--mod-focus-indicator-gap` |
| `--mod-focus-indicator-thickness` |
| `--mod-line-height-100` |
| `--mod-switch-background-color` |
| `--mod-switch-background-color-disabled` |
| `--mod-switch-background-color-selected-default` |
| `--mod-switch-background-color-selected-disabled` |
| `--mod-switch-background-color-selected-down` |
| `--mod-switch-background-color-selected-focus` |
| `--mod-switch-background-color-selected-hover` |
| `--mod-switch-control-height` |
| `--mod-switch-control-label-spacing` |
| `--mod-switch-control-width` |
| `--mod-switch-focus-indicator-color` |
| `--mod-switch-focus-indicator-thickness` |
| `--mod-switch-font-size` |
| `--mod-switch-handle-background-color` |
| `--mod-switch-handle-border-color-default` |
| `--mod-switch-handle-border-color-disabled` |
| `--mod-switch-handle-border-color-down` |
| `--mod-switch-handle-border-color-focus` |
| `--mod-switch-handle-border-color-hover` |
| `--mod-switch-handle-border-color-selected-default` |
| `--mod-switch-handle-border-color-selected-down` |
| `--mod-switch-handle-border-color-selected-focus` |
| `--mod-switch-handle-border-color-selected-hover` |
| `--mod-switch-height` |
| `--mod-switch-label-color-default` |
| `--mod-switch-label-color-disabled` |
| `--mod-switch-label-color-down` |
| `--mod-switch-label-color-focus` |
| `--mod-switch-label-color-hover` |
| `--mod-switch-spacing-top-to-control` |
| `--mod-switch-spacing-top-to-label` |
| Modifiable custom properties |
| -------------------------------------------------------- |
| `--mod-switch-animation-duration-100` |
| `--mod-switch-animation-duration-200` |
| `--mod-switch-background-color` |
| `--mod-switch-background-color-disabled` |
| `--mod-switch-background-color-selected-default` |
| `--mod-switch-background-color-selected-disabled` |
| `--mod-switch-background-color-selected-down` |
| `--mod-switch-background-color-selected-focus` |
| `--mod-switch-background-color-selected-hover` |
| `--mod-switch-border-color-default` |
| `--mod-switch-border-color-disabled` |
| `--mod-switch-border-color-down` |
| `--mod-switch-border-color-focus` |
| `--mod-switch-border-color-hover` |
| `--mod-switch-border-color-selected-default` |
| `--mod-switch-border-color-selected-down` |
| `--mod-switch-border-color-selected-focus` |
| `--mod-switch-border-color-selected-hover` |
| `--mod-switch-border-radius` |
| `--mod-switch-border-width` |
| `--mod-switch-cjk-line-height` |
| `--mod-switch-control-height` |
| `--mod-switch-control-label-spacing` |
| `--mod-switch-control-width` |
| `--mod-switch-focus-indicator-color` |
| `--mod-switch-focus-indicator-gap` |
| `--mod-switch-focus-indicator-thickness` |
| `--mod-switch-font-size` |
| `--mod-switch-handle-background-color-default` |
| `--mod-switch-handle-background-color-disabled` |
| `--mod-switch-handle-background-color-down` |
| `--mod-switch-handle-background-color-focus` |
| `--mod-switch-handle-background-color-hover` |
| `--mod-switch-handle-background-color-selected` |
| `--mod-switch-handle-background-color-selected-disabled` |
| `--mod-switch-handle-selected-size` |
| `--mod-switch-handle-size` |
| `--mod-switch-height` |
| `--mod-switch-label-color-default` |
| `--mod-switch-label-color-disabled` |
| `--mod-switch-label-color-down` |
| `--mod-switch-label-color-focus` |
| `--mod-switch-label-color-hover` |
| `--mod-switch-line-height` |
| `--mod-switch-spacing-bottom-to-label` |
| `--mod-switch-spacing-top-to-control` |
| `--mod-switch-spacing-top-to-label` |
59 changes: 47 additions & 12 deletions components/switch/metadata/switch.yml
View file
Expand Up @@ -6,20 +6,55 @@ sections:
This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/switch/metadata/mods.md">here</a>.
- name: Migration Guide
description: |
### Component renamed
Toggle is now known as Switch. Replace all `.spectrum-ToggleSwitch*` classnames with `.spectrum-Switch*`.
### T-shirt sizing
Switch now supports t-shirt sizing and requires that you specify the size by adding a .spectrum-Switch--size* class. The default size is "medium".
### Quiet and emphasized
Spectrum has chosen the variant previously known as `quiet` to be the default and has added an `emphasized` variant with the same styles as the previous default.
If you were using the `quiet` variant, the `.spectrum-Switch--quiet` class is no longer required and can be removed.
If you need a switch to look like it did before this change, add `.spectrum-Switch--emphasized`.
### Version 5.0.0
#### S2 Migration
Switch now uses Spectrum 2 tokens and specifications. The following properties have been adjusted:
### A/B toggle variant removed
It's been deprecated and removed. A similar use case could be served by using Radio buttons.
- Medium is now the default size and `.spectrum-Switch--sizeM` has been removed
- Switch includes the Spectrum 2 down state transform
- Due to design changes (addition of a track border, handle color change, removal of border on handle, etc.), many mods required updates:
- Renamed mods:
- `--mod-animation-duration-100` renamed to `--mod-switch-animation-duration-100`
- `--mod-animation-duration-200` renamed to `--mod-switch-animation-duration-200`
- `--mod-border-width-200` renamed to `--mod-switch-border-width`
- `--mod-cjk-line-height-100` renamed to `--mod-switch-cjk-line-height`
- `--mod-focus-indicator-gap` renamed to `--mod-switch-focus-indicator-gap`
- `--mod-focus-indicator-thickness` renamed to `--mod-switch-focus-indicator-thickness`
- `--mod-line-height-100` renamed to `--mod-switch-line-height`
- `--mod-switch-handle-background-color` renamed to `--mod-switch-handle-background-color-default`
- New mods:
- `--mod-cjk-line-height-100`
- `--mod-switch-border-color-default`
- `--mod-switch-border-color-disabled`
- `--mod-switch-border-color-down`
- `--mod-switch-border-color-focus`
- `--mod-switch-border-color-hover`
- `--mod-switch-border-color-selected-default`
- `--mod-switch-border-color-selected-down`
- `--mod-switch-border-color-selected-focus`
- `--mod-switch-border-color-selected-hover`
- `--mod-switch-border-radius`
- `--mod-switch-handle-background-color-down`
- `--mod-switch-handle-background-color-focus`
- `--mod-switch-handle-background-color-hover`
- `--mod-switch-handle-background-color-disabled`
- `--mod-switch-handle-background-color-selected-disabled`
- `--mod-switch-handle-selected-background-color`
- `--mod-switch-handle-selected-size`
- `--mod-switch-handle-size`
- `--mod-switch-spacing-bottom-to-label`
- Removed mods:
- `--mod-switch-handle-border-color-default`
- `--mod-switch-handle-border-color-disabled`
- `--mod-switch-handle-border-color-down`
- `--mod-switch-handle-border-color-focus`
- `--mod-switch-handle-border-color-hover`
- `--mod-switch-handle-border-color-selected-default`
- `--mod-switch-handle-border-color-selected-down`
- `--mod-switch-handle-border-color-selected-focus`
- `--mod-switch-handle-border-color-selected-hover`
- Rework of forced-colors to only need custom prop reassignment to work (no more custom CSS for Windows High Contrast Mode)
### Remove focus-ring class
We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
examples:
- id: switch
name: Standard
Expand Down
178 changes: 161 additions & 17 deletions components/switch/stories/switch.stories.js
View file
@@ -1,4 +1,6 @@
// Import the component markup template
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
import { html } from "lit";
import { styleMap } from "lit/directives/style-map.js";
import { Template } from "./template";

export default {
Expand Down Expand Up @@ -70,24 +72,166 @@ export default {
type: "migrated",
},
},
decorators: [
(Story, context) => html`
<style>
.spectrum-Detail { display: inline-block; }
.spectrum-Typography > div {
border: 1px solid var(--spectrum-gray-200);
border-radius: 4px;
padding: 0 1em 1em;
/* Why seafoam? Because it separates it from the component styles. */
--mod-detail-font-color: var(--spectrum-seafoam-900);
}
</style>
<div
style=${styleMap({
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
gap: "1rem",
"--mod-detail-margin-end": ".3rem",
})}
>
${Story(context)}
</div>
`,
],
};

export const Default = Template.bind({});
Default.args = {};
const States = (args) => html`
${Typography({
semantics: "detail",
size: "s",
content: ["Default"],
})}
${Template(args)}
${Typography({
semantics: "detail",
size: "s",
content: ["Checked"],
})}
${Template({
...args,
isChecked: true,
})}
${Typography({
semantics: "detail",
size: "s",
content: ["Disabled"],
})}
${Template({
...args,
customStyles: {"max-width": "250px"},
isDisabled: true,
label: "Switch unchecked and disabled and so long it wraps to the next line",
})}
${Typography({
semantics: "detail",
size: "s",
content: ["Disabled + checked"],
})}
${Template({
...args,
isChecked: true,
isDisabled: true,
})}`;

export const Emphasized = Template.bind({});
Emphasized.args = {
isEmphasized: true,
label: "Switch label that is so long it wraps to the next line",
customStyles: {"max-width": "250px"}
};
const Sizes = (args) =>
html` ${["s", "m", "l", "xl"].map((size) => {
return html`
${Typography({
semantics: "detail",
size: "s",
content: [
{
s: "Small",
m: "Medium",
l: "Large",
xl: "Extra-large",
}[size],
],
})}
${Template({
...args,
size,
})}
`;
})}`;

export const Checked = Template.bind({});
Checked.args = {
isChecked: true
};
const Variants = (args) =>
html` ${window.isChromatic()
? html` <div class="spectrum-Typography">
${Typography({
semantics: "detail",
size: "l",
content: ["Default"],
})}
<div
style=${styleMap({
display: "flex",
flexDirection: "column",
gap: ".3rem",
})}
>
${States(args)}
</div>
</div>
<div class="spectrum-Typography">
${Typography({
semantics: "detail",
size: "l",
content: ["Emphasized"],
})}
<div
style=${styleMap({
display: "flex",
flexDirection: "column",
gap: ".3rem",
})}
>
${States({
...args,
isEmphasized: true,
})}
</div>
</div>
<div class="spectrum-Typography">
${Typography({
semantics: "detail",
size: "l",
content: ["Sizing - Unchecked"],
})}
<div
style=${styleMap({
display: "flex",
flexDirection: "column",
gap: ".3rem",
})}
>
${Sizes(args)}
</div>
</div>
<div class="spectrum-Typography">
${Typography({
semantics: "detail",
size: "l",
content: ["Sizing - Checked"],
})}
<div
style=${styleMap({
display: "flex",
flexDirection: "column",
gap: ".3rem",
})}
>
${Sizes({
...args,
isChecked: true,
})}
</div>
</div>`
: Template(args)}`;

export const Disabled = Template.bind({});
Disabled.args = {
isDisabled: true
};
export const Default = Variants.bind({});
Default.args = {};
13 changes: 1 addition & 12 deletions components/switch/stories/template.js
View file
Expand Up @@ -14,19 +14,8 @@ export const Template = ({
isEmphasized,
customClasses = [],
customStyles = {},
id,
...globals
id
}) => {
const { express } = globals;

try {
if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
else import(/* webpackPrefetch: true */ "../themes/express.css");
}
catch (e) {
console.warn(e);
}

// ID attribute value for the input element.
const inputId = id ? `${id}-input` : "switch-onoff-0";

Expand Down
27 changes: 0 additions & 27 deletions components/switch/themes/express.css
View file

This file was deleted.

0 comments on commit b3b3aa5

Please sign in to comment.