feat(switch): update spectrum css input

adobe · Jan 6, 2021 · 1d2ce17 · 1d2ce17
1 parent d875a0c
commit 1d2ce17
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 6 deletions.
diff --git a/packages/switch/README.md b/packages/switch/README.md
@@ -50,7 +50,7 @@ visual prominence that is optimal for forms, settings, etc. where the switches
 need to be noticed.
 
 ```html
-<sp-switch checked quiet>Web component</sp-switch>
+<sp-switch checked emphasized>Web component</sp-switch>
 ```
 
 ## State

diff --git a/packages/switch/package.json b/packages/switch/package.json
@@ -49,7 +49,7 @@
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/switch": "^1.0.0-beta.2"
+        "@spectrum-css/switch": "^1.0.0-beta.3"
     },
     "dependencies": {
         "@spectrum-web-components/base": "^0.1.3",

diff --git a/packages/switch/src/spectrum-config.js b/packages/switch/src/spectrum-config.js
@@ -47,10 +47,6 @@ const config = {
                     name: 'label',
                 },
             ],
-            exclude: [
-                /* deprecated */
-                /spectrum-Switch--ab/,
-            ],
         },
     ],
 };

diff --git a/packages/switch/src/switch.css b/packages/switch/src/switch.css
@@ -11,3 +11,36 @@ governing permissions and limitations under the License.
 */
 
 @import './spectrum-switch.css';
+
+/**
+ * Work around the realities in https://github.com/adobe/spectrum-css/issues/1089
+ * while full t-shirt sizing is being developed at the Spectrum CSS level.
+ */
+:host {
+    --spectrum-switch-label-margin-top: var(
+        --spectrum-global-dimension-size-65,
+        5px
+    );
+    --spectrum-switch-track-width: var(--spectrum-global-dimension-size-325);
+    --spectrum-switch-handle-border-radius: 50%;
+}
+
+:host([dir='ltr'][checked]) #input + #switch:before {
+    /* [dir=ltr] .spectrum-Switch-input:checked+.spectrum-Switch-switch:before */
+    transform: translateX(
+        calc(
+            var(--spectrum-switch-track-width) -
+                var(--spectrum-switch-handle-size)
+        )
+    );
+}
+
+:host([dir='rtl'][checked]) #input + #switch:before {
+    /* [dir=rtl] .spectrum-Switch-input:checked+.spectrum-Switch-switch:before */
+    transform: translateX(
+        calc(
+            var(--spectrum-switch-handle-size) -
+                var(--spectrum-switch-track-width)
+        )
+    );
+}