fix(checkbox): work around specificity changes when processing Spectr…

…um CSS and cover with tests
adobe · Oct 12, 2020 · d53a871 · d53a871
1 parent 80c6934
commit d53a871
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 29 deletions.
diff --git a/packages/checkbox/README.md b/packages/checkbox/README.md
@@ -29,8 +29,6 @@ import { Checkbox } from '@spectrum-web-components/checkbox';
 
 ### Example
 
-<sp-icons-medium></sp-icons-medium>
-
 ```html
 <sp-checkbox>Web component</sp-checkbox>
 ```
@@ -41,8 +39,29 @@ Standard checkboxes are the default style for checkboxes. The blue color
 provides a visual prominence that is optimal for forms, settings, lists or grids
 of assets, etc. where the checkboxes need to be noticed.
 
-```html
-<sp-checkbox checked>Web component</sp-checkbox>
+```html-live
+<div style="display: flex; justify-content: space-between;">
+    <div style="display: flex; flex-direction: column;">
+        <h4 class="spectrum-Heading--subtitle1">Default</h4>
+        <sp-checkbox>Web component</sp-checkbox>
+        <sp-checkbox checked>Web component</sp-checkbox>
+        <sp-checkbox indeterminate>Web component</sp-checkbox>
+    </div>
+
+    <div style="display: flex; flex-direction: column;">
+        <h4 class="spectrum-Heading--subtitle1">Invalid</h4>
+        <sp-checkbox invalid>Web component</sp-checkbox>
+        <sp-checkbox checked invalid>Web component</sp-checkbox>
+        <sp-checkbox indeterminate invalid>Web component</sp-checkbox>
+    </div>
+
+    <div style="display: flex; flex-direction: column;">
+        <h4 class="spectrum-Heading--subtitle1">Disabled</h4>
+        <sp-checkbox disabled>Web component</sp-checkbox>
+        <sp-checkbox checked disabled>Web component</sp-checkbox>
+        <sp-checkbox indeterminate disabled>Web component</sp-checkbox>
+    </div>
+</div>
 ```
 
 ### Quiet checkboxes
@@ -52,29 +71,29 @@ less prominent style than the standard checkboxes. They are optimal for
 application panels where all visual elements are monochrome in order to direct
 focus to the content.
 
-```html
-<sp-checkbox quiet>Web component</sp-checkbox>
-```
-
-### States
-
-In addition to the variant, sp-checkboxes have a number of attributes for
-controlling their visual state. All checkbox variants support the `disabled`,
-`indeterminate`, `invalid` attributes, which applies a disabled style to the
-checkbox, and also prevents clicks from activating it.
-
-```html
-<div>checked:</div>
-<sp-checkbox checked>Web component</sp-checkbox>
-
-<div>indeterminate:</div>
-<sp-checkbox indeterminate>Web component</sp-checkbox>
-
-<div>invalid:</div>
-<sp-checkbox invalid>Web component</sp-checkbox>
-
-<div>disabled:</div>
-<sp-checkbox disabled>Web component</sp-checkbox>
+```html-live
+<div style="display: flex; justify-content: space-between;">
+    <div style="display: flex; flex-direction: column; justify-content: space-between;">
+        <h4 class="spectrum-Heading--subtitle1">Default</h4>
+        <sp-checkbox quiet>Web component</sp-checkbox>
+        <sp-checkbox quiet checked>Web component</sp-checkbox>
+        <sp-checkbox quiet indeterminate>Web component</sp-checkbox>
+    </div>
+
+    <div style="display: flex; flex-direction: column;">
+        <h4 class="spectrum-Heading--subtitle1">Invalid</h4>
+        <sp-checkbox quiet invalid>Web component</sp-checkbox>
+        <sp-checkbox quiet checked invalid>Web component</sp-checkbox>
+        <sp-checkbox quiet indeterminate invalid>Web component</sp-checkbox>
+    </div>
+
+    <div style="display: flex; flex-direction: column;">
+        <h4 class="spectrum-Heading--subtitle1">Disabled</h4>
+        <sp-checkbox quiet disabled>Web component</sp-checkbox>
+        <sp-checkbox quiet checked disabled>Web component</sp-checkbox>
+        <sp-checkbox quiet indeterminate disabled>Web component</sp-checkbox>
+    </div>
+</div>
 ```
 
 ### Handling events

diff --git a/packages/checkbox/src/checkbox.css b/packages/checkbox/src/checkbox.css
@@ -20,3 +20,30 @@ governing permissions and limitations under the License.
 :host(:empty) label {
     display: none;
 }
+
+/* Work around specificity changes in the selector processing from Spectrum CSS */
+/* stylelint-disable no-descending-specificity */
+:host([disabled][checked]) #input + #box:before,
+:host([disabled][checked]) #input:checked + #box:before {
+    /* .spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled+.spectrum-Checkbox-box:before,
+   * .spectrum-Checkbox .spectrum-Checkbox-input:disabled+.spectrum-Checkbox-box:before */
+    border-color: var(
+        --spectrum-checkbox-emphasized-box-border-color-disabled,
+        var(--spectrum-global-color-gray-400)
+    );
+    background-color: var(
+        --spectrum-checkbox-emphasized-box-background-color-disabled,
+        var(--spectrum-global-color-gray-75)
+    );
+}
+
+:host([invalid][indeterminate]) #box:before,
+:host([invalid][indeterminate]) #input:checked + #box:before {
+    /* .spectrum-Checkbox.is-invalid .spectrum-Checkbox-box:before,
+   * .spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:checked+.spectrum-Checkbox-box:before */
+    border-color: var(
+        --spectrum-checkbox-box-border-color-error,
+        var(--spectrum-global-color-red-500)
+    );
+}
+/* stylelint-enable no-descending-specificity */
diff --git a/packages/checkbox/stories/checkbox.stories.ts b/packages/checkbox/stories/checkbox.stories.ts
@@ -119,8 +119,40 @@ export const disabledIndeterminate = (): TemplateResult => {
     `;
 };
 
-disabledIndeterminate.story = {
-    name: 'Disabled indeterminate',
+export const quietInvalid = (): TemplateResult => {
+    return html`
+        <sp-checkbox quiet invalid>Checkbox</sp-checkbox>
+    `;
+};
+
+export const quietInvalidChecked = (): TemplateResult => {
+    return html`
+        <sp-checkbox quiet invalid checked>Checkbox</sp-checkbox>
+    `;
+};
+
+export const quietInvalidIndeterminate = (): TemplateResult => {
+    return html`
+        <sp-checkbox quiet invalid indeterminate>Checkbox</sp-checkbox>
+    `;
+};
+
+export const quietDisabled = (): TemplateResult => {
+    return html`
+        <sp-checkbox quiet disabled>Checkbox</sp-checkbox>
+    `;
+};
+
+export const quietDisabledChecked = (): TemplateResult => {
+    return html`
+        <sp-checkbox disabled checked>Checkbox</sp-checkbox>
+    `;
+};
+
+export const quietDisabledIndeterminate = (): TemplateResult => {
+    return html`
+        <sp-checkbox quiet disabled indeterminate>Checkbox</sp-checkbox>
+    `;
 };
 
 export const tabIndexExample = (): TemplateResult => {

diff --git a/test/visual/stories.js b/test/visual/stories.js
@@ -97,6 +97,12 @@ module.exports = [
     'checkbox--disabled',
     'checkbox--disabled-checked',
     'checkbox--disabled-indeterminate',
+    'checkbox--quiet-invalid',
+    'checkbox--quiet-invalid-checked',
+    'checkbox--quiet-invalid-indeterminate',
+    'checkbox--quiet-disabled',
+    'checkbox--quiet-disabled-checked',
+    'checkbox--quiet-disabled-indeterminate',
     'checkbox--tab-index-example',
     'circle-loader--default',
     'circle-loader--over-background',