From 39aa4e6d8d13376a66fa90f5032363c57f941ef6 Mon Sep 17 00:00:00 2001 From: ashit-rath <88306433+ashit-rath@users.noreply.github.com> Date: Wed, 8 Sep 2021 11:45:11 +0530 Subject: [PATCH] feat: Consistent styling for widgets disabled state (#6983) * checkbox and button default styling * rate widget disabled styling * added cursor: not-allowed to disable css --- .../appsmith/CheckboxGroupComponent.tsx | 26 +------ .../blueprint/CheckboxComponent.tsx | 67 ++++++++++++------- .../designSystems/blueprint/RateComponent.tsx | 13 +++- app/client/src/constants/Colors.tsx | 1 + app/client/src/constants/DefaultTheme.tsx | 15 ++++- app/client/src/widgets/CheckboxWidget.tsx | 1 + 6 files changed, 73 insertions(+), 50 deletions(-) diff --git a/app/client/src/components/designSystems/appsmith/CheckboxGroupComponent.tsx b/app/client/src/components/designSystems/appsmith/CheckboxGroupComponent.tsx index 0655dd8a38..2ed587c32f 100644 --- a/app/client/src/components/designSystems/appsmith/CheckboxGroupComponent.tsx +++ b/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)` - 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} /> ))} diff --git a/app/client/src/components/designSystems/blueprint/CheckboxComponent.tsx b/app/client/src/components/designSystems/blueprint/CheckboxComponent.tsx index bcded2fe5a..5550c1b701 100644 --- a/app/client/src/components/designSystems/blueprint/CheckboxComponent.tsx +++ b/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` && { - 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)` + 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 { render() { const checkboxAlignClass = this.props.alignWidget === "RIGHT" ? Alignment.RIGHT : Alignment.LEFT; + return ( - { disabled={this.props.isDisabled} label={this.props.label} onChange={this.onCheckChange} - style={{ borderRadius: 0 }} + rowSpace={this.props.rowSpace} /> ); @@ -60,12 +80,13 @@ class CheckboxComponent extends React.Component { } 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; diff --git a/app/client/src/components/designSystems/blueprint/RateComponent.tsx b/app/client/src/components/designSystems/blueprint/RateComponent.tsx index 207829a063..0a7d4faafd 100644 --- a/app/client/src/components/designSystems/blueprint/RateComponent.tsx +++ b/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` > 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 ( - + * { + 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: { diff --git a/app/client/src/widgets/CheckboxWidget.tsx b/app/client/src/widgets/CheckboxWidget.tsx index 24932a247b..c1b7ff0044 100644 --- a/app/client/src/widgets/CheckboxWidget.tsx +++ b/app/client/src/widgets/CheckboxWidget.tsx @@ -133,6 +133,7 @@ class CheckboxWidget extends BaseWidget { key={this.props.widgetId} label={this.props.label} onCheckChange={this.onCheckChange} + rowSpace={this.props.parentRowSpace} widgetId={this.props.widgetId} /> );