Added default disabled styling to checkbox control.

microsoft · Apr 11, 2019 · 66e5ea3 · 66e5ea3
1 parent 731978d
commit 66e5ea3
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/packages/sdk/ui-react/src/widget/checkbox/checkbox.scss b/packages/sdk/ui-react/src/widget/checkbox/checkbox.scss
@@ -9,8 +9,12 @@
   flex-flow: row nowrap;
   color: var(--input-label-color);
 
-  &[disabled], &[aria-disabled] {
+  &.disabled, &[aria-disabled] {
     color: var(--input-label-color-disabled);
+
+    .check-mark {
+      border: var(--checkbox-border-disabled);
+    }
   }
 }
 
@@ -22,10 +26,6 @@
   background: transparent;
   transition: background 75ms ease-in, border 75ms ease-in;
 
-  &[disabled], &[aria-disabled] {
-    border: var(--checkbox-border-disabled);
-  }
-
   &::before {
     content: '';
     position: absolute;

diff --git a/packages/sdk/ui-react/src/widget/checkbox/checkbox.scss.d.ts b/packages/sdk/ui-react/src/widget/checkbox/checkbox.scss.d.ts
@@ -1,6 +1,7 @@
 // This is a generated file. Changes are likely to result in being overwritten
 export const checkbox: string;
 export const label: string;
+export const disabled: string;
 export const checkMark: string;
 export const checked: string;
 export const indeterminate: string;

diff --git a/packages/sdk/ui-react/src/widget/checkbox/checkbox.tsx b/packages/sdk/ui-react/src/widget/checkbox/checkbox.tsx
@@ -76,6 +76,8 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
     // Trim off what we don't want to send to the input tag
     const { className, label = '', ...inputProps } = this.props;
     const { checked = false, indeterminate = false, focused } = this.state;
+    const { disabled } = inputProps;
+    const disabledClass = disabled ? styles.disabled : '';
     let checkMarkStyles = '';
     if (indeterminate) {
       checkMarkStyles = styles.indeterminate;
@@ -86,7 +88,7 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       checkMarkStyles += ` ${styles.focused}`;
     }
     return (
-      <label id={this.checkboxId} className={`${styles.label} ${className}`} data-checked={checked}>
+      <label id={this.checkboxId} className={`${styles.label} ${disabledClass} ${className}`} data-checked={checked}>
         <span className={`${styles.checkMark} ${checkMarkStyles}`} />
         <input type="checkbox" {...inputProps} className={styles.checkbox} ref={this.checkboxRef} readOnly={true} />
         {label}