feat(checkbox): update spectrum css input

adobe · Jan 6, 2021 · e894cb4 · e894cb4
1 parent 75dcf52
commit e894cb4
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 11 deletions.
diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json
@@ -49,7 +49,7 @@
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/checkbox": "^3.0.0-beta.5",
+        "@spectrum-css/checkbox": "^3.0.0-beta.6",
         "@spectrum-web-components/field-group": "^0.0.1"
     },
     "dependencies": {

diff --git a/packages/checkbox/src/Checkbox.ts b/packages/checkbox/src/Checkbox.ts
@@ -19,13 +19,10 @@ import {
 } from '@spectrum-web-components/base';
 import { CheckboxBase } from './CheckboxBase.js';
 import '@spectrum-web-components/icon/sp-icon.js';
-import {
-    CheckmarkSmallIcon,
-    DashSmallIcon,
-} from '@spectrum-web-components/icons-ui';
+import { Checkmark75Icon, Dash75Icon } from '@spectrum-web-components/icons-ui';
 import checkboxStyles from './checkbox.css.js';
-import checkmarkSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark-small.css.js';
-import dashSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash-small.css.js';
+import checkmarkSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';
+import dashSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js';
 
 export class Checkbox extends CheckboxBase {
     @property({ type: Boolean, reflect: true })
@@ -45,11 +42,19 @@ export class Checkbox extends CheckboxBase {
         return html`
             ${super.render()}
             <span id="box">
-                <sp-icon id="checkmark" size="s" class="checkmark-small">
-                    ${CheckmarkSmallIcon({ hidden: true })}
+                <sp-icon
+                    id="checkmark"
+                    size="s"
+                    class="spectrum-UIIcon-Checkmark75"
+                >
+                    ${Checkmark75Icon()}
                 </sp-icon>
-                <sp-icon id="partialCheckmark" size="s" class="dash-small">
-                    ${DashSmallIcon({ hidden: true })}
+                <sp-icon
+                    id="partialCheckmark"
+                    size="s"
+                    class="spectrum-UIIcon-Dash75"
+                >
+                    ${Dash75Icon()}
                 </sp-icon>
             </span>
             <label id="label"><slot></slot></label>

diff --git a/packages/checkbox/src/checkbox.css b/packages/checkbox/src/checkbox.css
@@ -15,7 +15,46 @@ governing permissions and limitations under the License.
 :host {
     display: inline-flex;
     vertical-align: top;
+
+    /**
+    * 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.
+    */
+    --spectrum-checkbox-label-margin-top: var(
+        --spectrum-global-dimension-size-75,
+        6px
+    );
+}
+
+#checkmark {
+    /* .spectrum-Checkbox-checkmark */
+    margin-top: calc(var(--spectrum-global-dimension-size-125, 10px) / -2);
+}
+#partialCheckmark {
+    /* .spectrum-Checkbox-partialCheckmark */
+    margin-top: calc(var(--spectrum-global-dimension-size-100, 8px) / -2);
+    display: none;
 }
+:host([dir='ltr']) #checkmark {
+    /* [dir=ltr] .spectrum-Checkbox-checkmark */
+    margin-left: calc(var(--spectrum-global-dimension-size-125, 10px) / -2);
+}
+:host([dir='rtl']) #checkmark {
+    /* [dir=rtl] .spectrum-Checkbox-checkmark */
+    margin-right: calc(var(--spectrum-global-dimension-size-125, 10px) / -2);
+}
+:host([dir='ltr']) #partialCheckmark {
+    /* [dir=ltr] .spectrum-Checkbox-partialCheckmark */
+    margin-left: calc(var(--spectrum-global-dimension-size-100, 8px) / -2);
+}
+:host([dir='rtl']) #partialCheckmark {
+    /* [dir=rtl] .spectrum-Checkbox-partialCheckmark */
+    margin-right: calc(var(--spectrum-global-dimension-size-100, 8px) / -2);
+}
+
+/**
+ * End workaround for https://github.com/adobe/spectrum-css/issues/1089
+ **/
 
 :host(:empty) label {
     display: none;