From d976a958ee466a7a04cd253db78229cd84aaabc5 Mon Sep 17 00:00:00 2001
From: Tony Anziano <toanzian@microsoft.com>
Date: Thu, 11 Apr 2019 14:29:57 -0700
Subject: [PATCH] Added default disabled styling to checkbox control.

---
 CHANGELOG.md                                           |  1 +
 .../sdk/ui-react/src/widget/checkbox/checkbox.scss     | 10 +++++-----
 .../ui-react/src/widget/checkbox/checkbox.scss.d.ts    |  1 +
 packages/sdk/ui-react/src/widget/checkbox/checkbox.tsx |  4 +++-
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 414f659a7..492d9270f 100644
--- 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
index 741606723..a6a3e83ba 100644
--- 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
index da1cd0d04..7924ed20f 100644
--- 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
index 87e359eae..08d67dfd0 100644
--- 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}