feat: Consistent styling for widgets disabled state (#6983)

* checkbox and button default styling

* rate widget disabled styling

* added cursor: not-allowed to disable css

app/client/src/components/designSystems/appsmith/CheckboxGroupComponent.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
 import styled from "styled-components";
-import { Checkbox } from "@blueprintjs/core";
 
 import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
-import { ThemeProp } from "components/ads/common";
 import { generateReactKey } from "utils/generators";
+import { StyledCheckbox } from "components/designSystems/blueprint/CheckboxComponent";
+import { ThemeProp } from "components/ads/common";
 
 export interface CheckboxGroupContainerProps {
   inline?: boolean;
@@ -33,25 +33,6 @@ const CheckboxGroupContainer = styled.div<
   padding: 2px 4px;
 `;
 
-export interface StyledCheckboxProps {
-  disabled?: boolean;
-  rowspace: number;
-}
-
-const StyledCheckbox = styled(Checkbox)<ThemeProp & StyledCheckboxProps>`
-  height: ${({ rowspace }) => rowspace}px;
-
-  &.bp3-control input:checked ~ .bp3-control-indicator {
-    box-shadow: none;
-    background-image: none;
-    background-color: #03b365;
-  }
-
-  &.bp3-control.bp3-checkbox .bp3-control-indicator {
-    border-radius: 0;
-  }
-`;
-
 export interface OptionProps {
   /** Label text for this option. If omitted, `value` is used as the label. */
   label?: string;
@@ -70,7 +51,6 @@ export interface CheckboxGroupComponentProps extends ComponentProps {
   rowSpace: number;
   selectedValues: string[];
 }
-
 function CheckboxGroupComponent(props: CheckboxGroupComponentProps) {
   const {
     isDisabled,
@@ -94,7 +74,7 @@ function CheckboxGroupComponent(props: CheckboxGroupComponentProps) {
             key={generateReactKey()}
             label={option.label}
             onChange={onChange(option.value)}
-            rowspace={rowSpace}
+            rowSpace={rowSpace}
           />
         ))}
     </CheckboxGroupContainer>

app/client/src/components/designSystems/blueprint/CheckboxComponent.tsx

@@ -1,45 +1,65 @@
 import React from "react";
 import styled from "styled-components";
-import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
 import { Alignment, Checkbox, Classes } from "@blueprintjs/core";
-import { BlueprintControlTransform } from "constants/DefaultTheme";
+
+import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
 import { AlignWidget } from "widgets/SwitchWidget";
 
-const CheckboxContainer = styled.div<{ isValid: boolean }>`
+type StyledCheckboxProps = {
+  rowSpace: number;
+};
+
+type StyledCheckboxContainerProps = {
+  isValid: boolean;
+};
+
+const CheckboxContainer = styled.div<StyledCheckboxContainerProps>`
   && {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: flex-start;
     align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: flex-start;
+    width: 100%;
     &.${Alignment.RIGHT} {
       justify-content: flex-end;
     }
-    .bp3-control-indicator {
-      border: ${(props) =>
-        !props.isValid
-          ? `1px solid ${props.theme.colors.error} !important`
-          : `1px solid transparent`};
-    }
 
-    label {
-      margin: 0;
-      color: ${(props) =>
-        !props.isValid ? `${props.theme.colors.error}` : `inherit`};
+    & .bp3-control-indicator {
+      border: ${(props) =>
+        !props.isValid && `1px solid ${props.theme.colors.error} !important`};
     }
   }
-  ${BlueprintControlTransform}
 `;
+
+export const StyledCheckbox = styled(Checkbox)<StyledCheckboxProps>`
+  height: ${({ rowSpace }) => rowSpace}px;
+
+  &.bp3-control input:checked ~ .bp3-control-indicator {
+    background-color: #03b365;
+    background-image: none;
+    box-shadow: none;
+  }
+
+  &.bp3-control input:disabled ~ .bp3-control-indicator {
+    opacity: 0.5;
+  }
+
+  &.bp3-control.bp3-checkbox .bp3-control-indicator {
+    border-radius: 0;
+  }
+`;
+
 class CheckboxComponent extends React.Component<CheckboxComponentProps> {
   render() {
     const checkboxAlignClass =
       this.props.alignWidget === "RIGHT" ? Alignment.RIGHT : Alignment.LEFT;
+
     return (
       <CheckboxContainer
         className={checkboxAlignClass}
         isValid={!(this.props.isRequired && !this.props.isChecked)}
       >
-        <Checkbox
+        <StyledCheckbox
           alignIndicator={checkboxAlignClass}
           checked={this.props.isChecked}
           className={
@@ -48,7 +68,7 @@ class CheckboxComponent extends React.Component<CheckboxComponentProps> {
           disabled={this.props.isDisabled}
           label={this.props.label}
           onChange={this.onCheckChange}
-          style={{ borderRadius: 0 }}
+          rowSpace={this.props.rowSpace}
         />
       </CheckboxContainer>
     );
@@ -60,12 +80,13 @@ class CheckboxComponent extends React.Component<CheckboxComponentProps> {
 }
 
 export interface CheckboxComponentProps extends ComponentProps {
-  label: string;
+  alignWidget?: AlignWidget;
   isChecked: boolean;
-  onCheckChange: (isChecked: boolean) => void;
   isLoading: boolean;
   isRequired?: boolean;
-  alignWidget?: AlignWidget;
+  label: string;
+  onCheckChange: (isChecked: boolean) => void;
+  rowSpace: number;
 }
 
 export default CheckboxComponent;

app/client/src/components/designSystems/blueprint/RateComponent.tsx

@@ -5,9 +5,10 @@ import styled from "styled-components";
 import Rating from "react-rating";
 import _ from "lodash";
 
+import TooltipComponent from "components/ads/Tooltip";
+import { disable } from "constants/DefaultTheme";
 import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
 import { RateSize, RATE_SIZES } from "constants/WidgetConstants";
-import TooltipComponent from "components/ads/Tooltip";
 
 /*
   Note:
@@ -18,6 +19,7 @@ import TooltipComponent from "components/ads/Tooltip";
 */
 
 interface RateContainerProps {
+  isDisabled: boolean;
   scrollable: boolean;
 }
 
@@ -32,6 +34,8 @@ export const RateContainer = styled.div<RateContainerProps>`
   > span {
     align-self: ${(props) => (props.scrollable ? "flex-start" : "center")};
   }
+
+  ${({ isDisabled }) => isDisabled && disable}
 `;
 
 export const Star = styled(Icon)`
@@ -97,6 +101,7 @@ function RateComponent(props: RateComponentProps) {
     bottomRow,
     inactiveColor,
     isAllowHalf,
+    isDisabled,
     leftColumn,
     maxCount,
     onValueChanged,
@@ -122,7 +127,11 @@ function RateComponent(props: RateComponentProps) {
   }, [leftColumn, rightColumn, topRow, bottomRow, maxCount, size]);
 
   return (
-    <RateContainer ref={rateContainerRef} scrollable={scrollable}>
+    <RateContainer
+      isDisabled={Boolean(isDisabled)}
+      ref={rateContainerRef}
+      scrollable={scrollable}
+    >
       <Rating
         emptySymbol={
           <Star

app/client/src/constants/Colors.tsx

@@ -121,6 +121,7 @@ export const Colors = {
   BOX_SHADOW_DEFAULT_VARIANT5: "rgba(0, 0, 0, 0.25)",
 
   BUTTON_CUSTOM_SOLID_DARK_TEXT_COLOR: "#333",
+  BUTTON_DISABLED: "#c2c5c7",
 
   SELECT_DISABLED: "#ced9e080",
   SELECT_PLACEHOLDER: "#bfbfbf",

app/client/src/constants/DefaultTheme.tsx

@@ -166,6 +166,17 @@ export const invisible = css`
   }
 `;
 
+export const disable = css`
+  & {
+    cursor: not-allowed;
+
+    & > * {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+`;
+
 export const BlueprintCSSTransform = css`
   &&&& {
     .${Classes.BUTTON} {
@@ -1460,7 +1471,7 @@ export const dark: ColorType = {
       },
     },
     disabled: {
-      bgColor: Colors.DARK_GRAY,
+      bgColor: Colors.BUTTON_DISABLED,
       textColor: Colors.WHITE,
     },
     primary: {
@@ -2045,7 +2056,7 @@ export const light: ColorType = {
       },
     },
     disabled: {
-      bgColor: Colors.DARK_GRAY,
+      bgColor: Colors.BUTTON_DISABLED,
       textColor: Colors.WHITE,
     },
     primary: {

app/client/src/widgets/CheckboxWidget.tsx

@@ -133,6 +133,7 @@ class CheckboxWidget extends BaseWidget<CheckboxWidgetProps, WidgetState> {
         key={this.props.widgetId}
         label={this.props.label}
         onCheckChange={this.onCheckChange}
+        rowSpace={this.props.parentRowSpace}
         widgetId={this.props.widgetId}
       />
     );