Added default disabled styling to checkbox control.

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

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [client] Fixed secret prompt dialog's opaque background so that it is now transparent in PR [1407](https://github.com/Microsoft/BotFramework-Emulator/pull/1407)
 - [build / client] Fixed ipc issue that was breaking the command service in PR [1418](https://github.com/Microsoft/BotFramework-Emulator/pull/1418)
 - [build] Bumped electron version to v4.1.1 and updated .dmg installer background image in PR [1419](https://github.com/Microsoft/BotFramework-Emulator/pull/1419)
+- [ui-react] Added default disabled styling to checkbox control in PR [1424](https://github.com/Microsoft/BotFramework-Emulator/pull/1424)
 
 ## v4.3.3 - 2019 - 03 - 14
 ## Fixed

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}