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 { // 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 { checkMarkStyles += ` ${styles.focused}`; } return ( -