From 89b39e239bfa94049e449005827a437eb137226e Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Fri, 5 Aug 2022 10:16:42 +0530 Subject: [PATCH] fix: Reskinning Radio + Toggle + Checkbox (#15329) * update checkbox * fix margin in checkbox * fix color bug * fix border radius * fixes * remove unused imports * bug fixes * ui fixes * code review feedback fixes * css updates for toggle * fix bg bug in checkbox * fix disabled checkbox style * update styles for radio and switch * update label align * add hover interaction for switch * add wds css variables * add error state * add error state * fix css variable * fix css * fix checkbox group column height * move checkbox icons to assets * fix alignment issue * fix cypress tests * fix snapshot tests --- .../Widgets/Widgets_Labels_spec.js | 6 +- .../inlineDisabled.snap.png | Bin 3692 -> 1997 bytes .../inlineEnabled.snap.png | Bin 5071 -> 4081 bytes .../icons/widget/checkbox/check-icon.svg | 10 ++ .../checkbox/disabled-indeterminate-icon.svg | 3 + .../widget/checkbox/disabledcheck-icon.svg | 10 ++ .../widget/checkbox/indeterminate-icon.svg | 3 + .../src/components/ads/LabelWithTooltip.tsx | 8 +- .../src/components/wds/Checkbox/index.tsx | 168 +++++++++++------- app/client/src/constants/DefaultTheme.tsx | 66 +++++-- app/client/src/index.css | 1 + app/client/src/theme/defaultTheme.css | 2 +- app/client/src/theme/wds.css | 18 ++ .../CheckboxGroupWidget/component/index.tsx | 53 +++--- .../src/widgets/CheckboxGroupWidget/index.ts | 2 +- .../CheckboxGroupWidget/widget/index.tsx | 1 - .../CheckboxWidget/component/index.tsx | 74 +------- .../RadioGroupWidget/component/index.tsx | 10 ++ .../src/widgets/RadioGroupWidget/index.ts | 2 +- .../widgets/RadioGroupWidget/widget/index.tsx | 1 + .../src/widgets/SwitchGroupWidget/index.ts | 2 +- .../widgets/SwitchWidget/component/index.tsx | 8 + 22 files changed, 261 insertions(+), 187 deletions(-) create mode 100644 app/client/src/assets/icons/widget/checkbox/check-icon.svg create mode 100644 app/client/src/assets/icons/widget/checkbox/disabled-indeterminate-icon.svg create mode 100644 app/client/src/assets/icons/widget/checkbox/disabledcheck-icon.svg create mode 100644 app/client/src/assets/icons/widget/checkbox/indeterminate-icon.svg create mode 100644 app/client/src/theme/wds.css diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Widgets_Labels_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Widgets_Labels_spec.js index 8759e01602..1104871406 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Widgets_Labels_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Widgets_Labels_spec.js @@ -10,7 +10,7 @@ describe("Label feature", () => { widgetName: "checkboxgroupwidget", parentColumnSpace: 11.9375, containerSelector: "[data-testid='checkboxgroup-container']", - isCompact: false, + isCompact: true, labelText: "Name", labelWidth: 4, }; @@ -101,7 +101,7 @@ describe("Label feature", () => { widgetName: "radiogroupwidget", parentColumnSpace: 11.9375, containerSelector: "[data-testid='radiogroup-container']", - isCompact: false, + isCompact: true, labelText: "Name", labelWidth: 4, }; @@ -153,7 +153,7 @@ describe("Label feature", () => { widgetName: "switchgroupwidget", parentColumnSpace: 11.9375, containerSelector: "[data-testid='switchgroup-container']", - isCompact: false, + isCompact: true, labelText: "Name", labelWidth: 4, }; diff --git a/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js/inlineDisabled.snap.png b/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js/inlineDisabled.snap.png index cb8bcf1345652896e37cfcc240c2ad339104ad56..4aab42ed59235e50ffd74dab4c58cb02b7ce91d5 100644 GIT binary patch delta 1996 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 PMS=`;Z=kERtwa9{vHS6( diff --git a/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js/inlineEnabled.snap.png b/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js/inlineEnabled.snap.png index 62b2ece76989735cc875c19cc19833d25a16583d..30552ba420603379bce502502b8f3d5fc986c28e 100644 GIT binary patch literal 4081 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 ehh|wn)u^jW + + + + + + + + + diff --git a/app/client/src/assets/icons/widget/checkbox/disabled-indeterminate-icon.svg b/app/client/src/assets/icons/widget/checkbox/disabled-indeterminate-icon.svg new file mode 100644 index 0000000000..65b737f339 --- /dev/null +++ b/app/client/src/assets/icons/widget/checkbox/disabled-indeterminate-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/src/assets/icons/widget/checkbox/disabledcheck-icon.svg b/app/client/src/assets/icons/widget/checkbox/disabledcheck-icon.svg new file mode 100644 index 0000000000..689ccd6346 --- /dev/null +++ b/app/client/src/assets/icons/widget/checkbox/disabledcheck-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/client/src/assets/icons/widget/checkbox/indeterminate-icon.svg b/app/client/src/assets/icons/widget/checkbox/indeterminate-icon.svg new file mode 100644 index 0000000000..077a0648cd --- /dev/null +++ b/app/client/src/assets/icons/widget/checkbox/indeterminate-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/src/components/ads/LabelWithTooltip.tsx b/app/client/src/components/ads/LabelWithTooltip.tsx index 06ea50f458..b3339c66a3 100644 --- a/app/client/src/components/ads/LabelWithTooltip.tsx +++ b/app/client/src/components/ads/LabelWithTooltip.tsx @@ -97,14 +97,10 @@ export const labelLayoutStyles = css<{ align-items: ${({ compactMode, labelPosition }) => { if (labelPosition === LabelPosition.Top) return "flex-start"; - if (compactMode || labelPosition === LabelPosition.Left) return "center"; + if (compactMode) return "center"; return "flex-start"; }}; - justify-content: ${({ compactMode, labelPosition }) => { - if (labelPosition && labelPosition !== LabelPosition.Left && !compactMode) { - return "space-between"; - } - }}; + justify-content: flex-start; `; export const multiSelectInputContainerStyles = css<{ diff --git a/app/client/src/components/wds/Checkbox/index.tsx b/app/client/src/components/wds/Checkbox/index.tsx index 2a6163699e..d6bff8e74c 100644 --- a/app/client/src/components/wds/Checkbox/index.tsx +++ b/app/client/src/components/wds/Checkbox/index.tsx @@ -1,115 +1,147 @@ import styled from "styled-components"; -import { Checkbox as BlueprintCheckbox } from "@blueprintjs/core"; +import { Alignment, Checkbox as BlueprintCheckbox } from "@blueprintjs/core"; +import CheckIcon from "assets/icons/widget/checkbox/check-icon.svg"; +import DisabledCheckIcon from "assets/icons/widget/checkbox/disabledcheck-icon.svg"; +import IndeterminateIcon from "assets/icons/widget/checkbox/indeterminate-icon.svg"; +import DisabledIndeterminate from "assets/icons/widget/checkbox//disabled-indeterminate-icon.svg"; -import { Colors } from "constants/Colors"; -import { lightenColor, darkenColor } from "widgets/WidgetUtils"; +import { darkenColor } from "widgets/WidgetUtils"; type StyledCheckboxProps = { checked?: boolean; disabled?: boolean; - backgroundColor?: string; borderRadius?: string; indeterminate?: boolean; hasError?: boolean; + accentColor?: string; inputRef?: (el: HTMLInputElement | null) => any; }; -const DISABLED_ICON_SVG = - "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 7H5c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1z' fill='white'/%3e%3c/svg%3e"; -const CHECKED_ICON_SVG = - "data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='14' height='14' /%3E%3Cpath d='M10.1039 3.5L11 4.40822L5.48269 10L2.5 6.97705L3.39613 6.06883L5.48269 8.18305L10.1039 3.5Z' fill='white'/%3E%3C/svg%3E%0A"; - const Checkbox = styled(BlueprintCheckbox)` - ${({ backgroundColor, borderRadius, checked, hasError }) => ` + ${({ accentColor, alignIndicator, borderRadius, hasError }) => ` margin: 0; padding: 0; height: auto; display: flex; - align-items: center; + align-items: flex-start; gap: 10px; - color: ${checked ? Colors.GREY_10 : Colors.GREY_9}; + flex-direction: ${ + alignIndicator === Alignment.RIGHT ? "row-reverse" : "row" + }; + // base &.bp3-control.bp3-checkbox .bp3-control-indicator { margin: 0; + margin-top: .2rem; border: none; - box-shadow: 0px 0px 0px 1px ${Colors.GREY_3}; + box-shadow: 0px 0px 0px 1px var(--wds-color-border); outline: none !important; - background: transparent; - border-radius: ${borderRadius}; + background-color: white; + border-radius: ${borderRadius === "0.375rem" ? "0.25rem" : borderRadius}; // ERROR state ( needed when checkbox is required ) - ${hasError && `box-shadow: 0px 0px 0px 1px ${Colors.ERROR_RED};`}; + ${ + hasError + ? `box-shadow: 0px 0px 0px 1px var(--wds-color-bg-danger);` + : "" + }; } + &.bp3-control.bp3-checkbox .bp3-control-indicator::before { + background-repeat: no-repeat; + background-position: center; + } + + // active + &.bp3-control input:not(:disabled):active ~ .bp3-control-indicator { + background: white !important; + box-shadow: 0px 0px 0px 1px var(--wds-color-border-hover); + } + + // hover + &.bp3-control.bp3-checkbox:hover input:not(:checked) ~ .bp3-control-indicator { + box-shadow: 0px 0px 0px 1px ${ + hasError + ? "var(--wds-color-border-danger-hover)" + : "var(--wds-color-border-hover)" + }; + } + + // hover on checked + &.bp3-control.bp3-checkbox:hover input:checked ~ .bp3-control-indicator, &.bp3-control.bp3-checkbox:hover input:indeterminate ~ .bp3-control-indicator { + box-shadow: none; + background: ${darkenColor(accentColor)} !important; + } + + // hover on disabled + &.bp3-control.bp3-checkbox:hover input:disabled:not(:checked):not(:indeterminate) ~ .bp3-control-indicator { + box-shadow: 0px 0px 0px 1px var(--wds-color-border-disabled); + } + + // hover on checked + disabled + &.bp3-control.bp3-checkbox:hover input:checked:disabled ~ .bp3-control-indicator { + box-shadow: 0px 0px 0px 1px var(--wds-color-border-disabled); + background-color: var(--wds-color-disabled) !important; + } + + // checked &.bp3-control.bp3-checkbox input:checked ~ .bp3-control-indicator, &.bp3-control.bp3-checkbox input:indeterminate ~ .bp3-control-indicator { - background: ${backgroundColor} !important; + background-color: ${accentColor} !important; background-image: none; border: none !important; box-shadow: none; } - // ACTIVE - &.bp3-control.bp3-checkbox:active .bp3-control-indicator { - background: ${lightenColor(backgroundColor)} !important; - box-shadow: - 0px 0px 0px 1px ${backgroundColor}, - 0px 0px 0px 3px ${lightenColor(backgroundColor)} !important; + // checked + disabled + &.bp3-control.bp3-checkbox input:checked:disabled ~ .bp3-control-indicator { + box-shadow: 0px 0px 0px 1px var(--wds-color-border-disabled); + background-color: var(--wds-color-bg-disabled) !important; + } + // not checked + disabled + &.bp3-control.bp3-checkbox input:not(:checked):disabled ~ .bp3-control-indicator { + background-color: var(--wds-color-bg-disabled) !important; } - // ACTIVE WHEN DISABLED - &.bp3-control.bp3-checkbox:active input:disabled ~ .bp3-control-indicator { - box-shadow: 0px 0px 0px 1px ${Colors.GREY_3} !important; - } - - // DISABLED - &.bp3-control.bp3-checkbox input:disabled ~ .bp3-control-indicator { - opacity: 0.5; - background: ${Colors.GREY_5} !important; - color: ${Colors.GREY_8}; - - &::before { - background-image: url("${DISABLED_ICON_SVG}") !important; - } - } - - &.bp3-control.bp3-checkbox input:checked ~ .bp3-control-indicator { - &::before { - background-image: url("${CHECKED_ICON_SVG}") !important; - } - } - - // CHECKED - &.bp3-control.bp3-checkbox input:checked ~ .bp3-control-indicator { - background: ${backgroundColor} !important; - } - - // HOVER WHEN CHECKED - &.bp3-control.bp3-checkbox:hover input:checked ~ .bp3-control-indicator { - box-shadow: none; - background: ${darkenColor(backgroundColor)} !important; - } - - // HOVER WHEN UNCHECKED - &.bp3-control.bp3-checkbox:hover :not(input:checked) ~ .bp3-control-indicator { - box-shadow: 0px 0px 0px 1px ${Colors.GREY_5}; - } - - // INDETERMINATE + // indeterminate &.bp3-control.bp3-checkbox input:indeterminate ~ .bp3-control-indicator { box-shadow: none; } - // BLUEPRINT DEFAULT ISSUES + &.bp3-control.bp3-checkbox:hover input:indeterminate ~ .bp3-control-indicator { + box-shadow: none; + } + + &.bp3-control.bp3-checkbox input:indeterminate:disabled ~ .bp3-control-indicator { + background-color: var(--wds-color-bg-disabled) !important; + box-shadow: 0px 0px 0px 1px var(--wds-color-border-disabled); + } + + // blueprint specific issues &.bp3-control:not(.bp3-align-right) { padding-left: 0; } + + // checked + disabled icon + &.bp3-control.bp3-checkbox input:checked:disabled ~ .bp3-control-indicator::before { + background-image: url(${DisabledCheckIcon}); + } + + // indeterminate icon + &.bp3-control.bp3-checkbox input:indeterminate ~ .bp3-control-indicator::before { + background-image: url(${IndeterminateIcon}); + } + + // indeterminate + disabled icon + &.bp3-control.bp3-checkbox input:indeterminate:disabled ~ .bp3-control-indicator::before { + background-image: url(${DisabledIndeterminate}); + } + + // checked icon + &.bp3-control.bp3-checkbox input:checked ~ .bp3-control-indicator::before { + background-image: url(${CheckIcon}) + } `} `; -Checkbox.defaultProps = { - backgroundColor: "#553DE9", - borderRadius: "0.375rem", -}; - export { Checkbox }; diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx index d5ef294aef..30aa1b1f5f 100644 --- a/app/client/src/constants/DefaultTheme.tsx +++ b/app/client/src/constants/DefaultTheme.tsx @@ -82,18 +82,42 @@ export const BlueprintControlTransform = css` box-shadow: none; border: 1px solid ${(props) => props.theme.colors.primaryOld}; } - input:disabled ~ .${Classes.CONTROL_INDICATOR} { - opacity: 0.5; + + & + input:invalid:not(:disabled):not(:checked) + ~ .${Classes.CONTROL_INDICATOR} { + border: 1px solid var(--wds-color-border-danger); } + + &:hover + input:invalid:not(:disabled):not(:checked) + ~ .${Classes.CONTROL_INDICATOR} { + border: 1px solid var(--wds-color-border-danger-hover) !important; + } + & input:disabled:not(:checked) ~ .${Classes.CONTROL_INDICATOR} { - border: 1px solid ${Colors.GREY_5}; + background-color: var(--wds-color-bg-disabled) !important; + border: 1px solid var(--wds-color-border-disabled) !important; + } + + & input:disabled:checked ~ .${Classes.CONTROL_INDICATOR} { + background-color: var(--wds-color-bg-disabled) !important; + border: 1px solid var(--wds-color-border-disabled) !important; + } + + &:hover { + & input:not(:checked):not(:disabled) ~ .bp3-control-indicator { + border: 1px solid ${Colors.GREY_6} !important; + } } } .${Classes.SWITCH} { - & .${Classes.CONTROL_INDICATOR} { + & input ~ .${Classes.CONTROL_INDICATOR} { + transition: none; + &::before { - box-shadow: -2px 2px 5px rgba(67, 86, 100, 0.1); + box-shadow: none; } } input:checked ~ .${Classes.CONTROL_INDICATOR} { @@ -102,8 +126,22 @@ export const BlueprintControlTransform = css` } } input:not(:checked) ~ .${Classes.CONTROL_INDICATOR} { - background: ${Colors.GREY_3}; - border: 1px solid ${Colors.GREY_5}; + background: var(--wds-color-bg-strong); + border: 1px solid var(--wds-color-border); + } + + input:disabled ~ .${Classes.CONTROL_INDICATOR} { + background: var(--wds-color-bg-disabled) !important; + &::before { + background: var(--wds-color-bg-disabled-strong); + } + } + + &:hover { + & input:not(:checked):not(:disabled) ~ .bp3-control-indicator { + background: var(--wds-color-bg-strong-hover); + border: 1px solid var(--wds-color-border-hover) !important; + } } } @@ -342,16 +380,10 @@ export const BlueprintRadioSwitchGroupTransform = css<{ } .bp3-control-indicator { margin-top: 0; - border: 1px solid ${Colors.GREY_3}; - } - input:checked ~ .bp3-control-indicator, - &:hover input:checked ~ .bp3-control-indicator { - background-color: ${Colors.GREEN}; - } - &:hover { - & input:not(:checked) ~ .bp3-control-indicator { - border: 1px solid ${Colors.GREY_5} !important; - } + border: 1px solid ${Colors.GREY_5}; + box-shadow: none; + background-image: none; + background-color: white; } } `; diff --git a/app/client/src/index.css b/app/client/src/index.css index c2d95aea4d..5ea931b73a 100755 --- a/app/client/src/index.css +++ b/app/client/src/index.css @@ -4,6 +4,7 @@ @import "~design-system/build/css/design-system.css"; @import "theme/colors.css"; @import "theme/defaultTheme.css"; +@import "theme/wds.css"; body { margin: 0; diff --git a/app/client/src/theme/defaultTheme.css b/app/client/src/theme/defaultTheme.css index efe41fc9f3..f52317ac74 100644 --- a/app/client/src/theme/defaultTheme.css +++ b/app/client/src/theme/defaultTheme.css @@ -8,6 +8,6 @@ /* search input */ --appsmith-search-input-focus-mobile-border-color: var(--appsmith-color-black-900); - --appsmith-search-input-mobile-border-color: var(--appsmith-color-black-400); + --appsmith-search-input-mobile-border-color: var(--appsmith-color-black-400); } diff --git a/app/client/src/theme/wds.css b/app/client/src/theme/wds.css new file mode 100644 index 0000000000..a460f0750a --- /dev/null +++ b/app/client/src/theme/wds.css @@ -0,0 +1,18 @@ +:root { + --wds-color-border: #E0DEDE; + --wds-color-border-hover: #B3B3B3; + + --wds-color-border-danger: #D91921; + --wds-color-border-danger-hover: #B90707; + + --wds-color-border-disabled: #E0DEDE; + + --wds-color-bg-strong: #E0DEDE; + --wds-color-bg-strong-hover: #B3B3B3; + + --wds-color-bg-disabled: #F3F3F3; + --wds-color-bg-disabled-strong: #A9A7A7; + + --wds-color-bg-danger: #D91921; + --wds-color-bg-danger-hover: #B90707; +} diff --git a/app/client/src/widgets/CheckboxGroupWidget/component/index.tsx b/app/client/src/widgets/CheckboxGroupWidget/component/index.tsx index 2830f891b3..8354de8fa3 100644 --- a/app/client/src/widgets/CheckboxGroupWidget/component/index.tsx +++ b/app/client/src/widgets/CheckboxGroupWidget/component/index.tsx @@ -12,7 +12,10 @@ import { TextSize } from "constants/WidgetConstants"; // TODO(abstraction-issue): this needs to be a common import from somewhere in the platform // Alternatively, they need to be replicated. -import { StyledCheckbox } from "widgets/CheckboxWidget/component"; +import { + CheckboxLabel, + StyledCheckbox, +} from "widgets/CheckboxWidget/component"; import { OptionProps, SelectAllState, SelectAllStates } from "../constants"; import LabelWithTooltip, { labelLayoutStyles, @@ -30,7 +33,7 @@ const InputContainer = styled.div` display: ${({ inline }) => (inline ? "inline-flex" : "flex")}; ${({ inline }) => ` flex-direction: ${inline ? "row" : "column"}; - align-items: ${inline ? "center" : "flex-start"}; + align-items: "flex-start"; ${inline && "flex-wrap: wrap"}; `} justify-content: ${({ inline, optionAlignment, optionCount }) => @@ -43,12 +46,9 @@ const InputContainer = styled.div` : `center`}; width: 100%; height: ${({ inline }) => (inline ? "32px" : "100%")}; + flex-grow: 1; + height: 100%; border: 1px solid transparent; - ${({ theme, valid }) => - !valid && - ` - border: 1px solid ${theme.colors.error}; - `} .${Classes.CONTROL} { display: flex; @@ -57,7 +57,7 @@ const InputContainer = styled.div` min-height: 30px; .bp3-control-indicator { - margin-top: 0; + margin-top: 0 !important; } } `; @@ -75,7 +75,6 @@ export const CheckboxGroupContainer = styled.div` } & .select-all { white-space: nowrap; - color: ${Colors.GREY_9} !important; } `; @@ -85,32 +84,42 @@ export interface SelectAllProps { indeterminate?: boolean; inline?: boolean; onChange: React.FormEventHandler; - rowSpace: number; accentColor: string; borderRadius: string; + isDisabled?: boolean; } function SelectAll(props: SelectAllProps) { const { accentColor, + borderRadius, checked, disabled, indeterminate, inline, + isDisabled, onChange, - rowSpace, } = props; return ( + Select all + + } onChange={onChange} - rowSpace={rowSpace} /> ); } @@ -126,7 +135,7 @@ export interface CheckboxGroupComponentProps extends ComponentProps { state: SelectAllState, ) => React.FormEventHandler; options: OptionProps[]; - rowSpace: number; + selectedValues: string[]; optionAlignment?: string; compactMode: boolean; @@ -160,7 +169,6 @@ function CheckboxGroupComponent(props: CheckboxGroupComponentProps) { onSelectAllChange, optionAlignment, options, - rowSpace, selectedValues, } = props; @@ -205,7 +213,6 @@ function CheckboxGroupComponent(props: CheckboxGroupComponentProps) { inline={isInline} optionAlignment={optionAlignment} optionCount={options.length} - valid={isValid} > {isSelectAll && ( )} {options && @@ -227,12 +233,19 @@ function CheckboxGroupComponent(props: CheckboxGroupComponentProps) { borderRadius={borderRadius} checked={(selectedValues || []).includes(option.value)} disabled={isDisabled} - indeterminate={isDisabled ? true : undefined} + hasError={!isValid} inline={isInline} key={generateReactKey()} - label={option.label} + labelElement={ + + {option.label} + + } onChange={onChange(option.value)} - rowSpace={rowSpace} /> ))} diff --git a/app/client/src/widgets/CheckboxGroupWidget/index.ts b/app/client/src/widgets/CheckboxGroupWidget/index.ts index ce99c124e2..482e3321df 100644 --- a/app/client/src/widgets/CheckboxGroupWidget/index.ts +++ b/app/client/src/widgets/CheckboxGroupWidget/index.ts @@ -9,7 +9,7 @@ export const CONFIG = { iconSVG: IconSVG, needsMeta: true, defaults: { - rows: 6, + rows: 4, columns: 23, animateLoading: true, labelTextSize: "0.875rem", diff --git a/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx b/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx index 4451cb6b8c..d78fa85e33 100644 --- a/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx +++ b/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx @@ -518,7 +518,6 @@ class CheckboxGroupWidget extends BaseWidget< onSelectAllChange={this.handleSelectAllChange} optionAlignment={this.props.optionAlignment} options={compact(this.props.options)} - rowSpace={this.props.parentRowSpace} selectedValues={this.props.selectedValues || []} widgetId={this.props.widgetId} /> diff --git a/app/client/src/widgets/CheckboxWidget/component/index.tsx b/app/client/src/widgets/CheckboxWidget/component/index.tsx index 9f7ce3e0d9..6e070b171f 100644 --- a/app/client/src/widgets/CheckboxWidget/component/index.tsx +++ b/app/client/src/widgets/CheckboxWidget/component/index.tsx @@ -1,20 +1,12 @@ import React from "react"; import styled from "styled-components"; import { ComponentProps } from "widgets/BaseComponent"; -import { Alignment, Checkbox, Classes } from "@blueprintjs/core"; +import { Alignment, Classes } from "@blueprintjs/core"; import { AlignWidgetTypes } from "widgets/constants"; import { Colors } from "constants/Colors"; import { LabelPosition } from "components/constants"; import { FontStyleTypes } from "constants/WidgetConstants"; - -type StyledCheckboxProps = { - checked?: boolean; - disabled?: boolean; - indeterminate?: boolean; - rowSpace: number; - borderRadius?: string; - accentColor?: string; -}; +import { Checkbox } from "components/wds/Checkbox"; type StyledCheckboxContainerProps = { isValid: boolean; @@ -26,24 +18,15 @@ const DEFAULT_BACKGROUND_COLOR = Colors.GREEN_SOLID; const CheckboxContainer = styled.div` && { - padding: ${({ noContainerPadding }) => - noContainerPadding ? 0 : "9px 12px"}; align-items: center; display: flex; height: 100%; - justify-content: flex-start; + justify-content: start; width: 100%; - .${Classes.CHECKBOX} { - width: 100%; - } - & .bp3-control-indicator { - border: ${(props) => - !props.isValid && `1px solid ${props.theme.colors.error} !important`}; - } } `; -const CheckboxLabel = styled.div<{ +export const CheckboxLabel = styled.div<{ disabled?: boolean; labelPosition: LabelPosition; labelTextColor?: string; @@ -64,52 +47,7 @@ const CheckboxLabel = styled.div<{ `} `; -export const StyledCheckbox = styled(Checkbox)` - height: ${({ rowSpace }) => rowSpace}px; - color: ${({ checked }) => (checked ? Colors.GREY_10 : Colors.GREY_9)}; - &.bp3-control.bp3-checkbox .bp3-control-indicator { - border-radius: ${({ borderRadius }) => borderRadius}; - border: 1px solid ${Colors.GREY_3}; - box-shadow: none !important; - outline: none !important; - background: transparent; - ${({ accentColor, checked, indeterminate }) => - checked || indeterminate - ? ` - background-color: ${accentColor} !important; - background-image: none; - border: none !important; - ` - : ``} - ${({ checked }) => - checked && - ` - &::before { - background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='14' height='14' /%3E%3Cpath d='M10.1039 3.5L11 4.40822L5.48269 10L2.5 6.97705L3.39613 6.06883L5.48269 8.18305L10.1039 3.5Z' fill='white'/%3E%3C/svg%3E%0A") !important; - } - `} - ${({ disabled }) => (disabled ? `opacity: 0.5;` : ``)} - } - &:hover { - &.bp3-control.bp3-checkbox .bp3-control-indicator { - ${({ disabled }) => - disabled ? "" : `border: 1px solid ${Colors.GREY_5}`}; - ${({ checked, indeterminate }) => - checked || indeterminate - ? ` - background-image: linear-gradient( - 0deg, - rgba(0, 0, 0, 0.2), - rgba(0, 0, 0, 0.2) - ); - ` - : ""}; - } - } - &.${Classes.CONTROL}.${Classes.DISABLED} { - color: ${Colors.GREY_8}; - } -`; +export const StyledCheckbox = Checkbox; class CheckboxComponent extends React.Component { render() { @@ -142,6 +80,7 @@ class CheckboxComponent extends React.Component { this.props.isLoading ? Classes.SKELETON : Classes.RUNNING_TEXT } disabled={this.props.isDisabled} + hasError={!isValid} inputRef={this.props.inputRef} labelElement={ { } onChange={this.onCheckChange} - rowSpace={this.props.rowSpace} /> ); diff --git a/app/client/src/widgets/RadioGroupWidget/component/index.tsx b/app/client/src/widgets/RadioGroupWidget/component/index.tsx index d199c3618c..b919b0f05e 100644 --- a/app/client/src/widgets/RadioGroupWidget/component/index.tsx +++ b/app/client/src/widgets/RadioGroupWidget/component/index.tsx @@ -43,6 +43,13 @@ const StyledRadioGroup = styled(RadioGroup)` background: ${({ accentColor }) => `${accentColor}`} !important; border: 1px solid ${({ accentColor }) => `${accentColor}`} !important; } + + & input:disabled:checked ~ .${Classes.CONTROL_INDICATOR} { + &:before { + opacity: 1; + background-image: radial-gradient(var( --wds-color-bg-disabled-strong), var( --wds-color-bg-disabled-strong) 28%, transparent 32%) + } + } } .${Classes.SWITCH} { @@ -70,6 +77,7 @@ function RadioGroupComponent(props: RadioGroupComponentProps) { loading, onRadioSelectionChange, options, + required, selectedOptionValue, } = props; @@ -125,6 +133,7 @@ function RadioGroupComponent(props: RadioGroupComponentProps) { inline={inline} key={optInd} label={option.label} + required={required} value={option.value} /> ); @@ -153,6 +162,7 @@ export interface RadioGroupComponentProps extends ComponentProps { widgetId: string; height?: number; accentColor: string; + required?: boolean; } export default RadioGroupComponent; diff --git a/app/client/src/widgets/RadioGroupWidget/index.ts b/app/client/src/widgets/RadioGroupWidget/index.ts index cf64e9f869..14985f1a80 100644 --- a/app/client/src/widgets/RadioGroupWidget/index.ts +++ b/app/client/src/widgets/RadioGroupWidget/index.ts @@ -10,7 +10,7 @@ export const CONFIG = { needsMeta: true, searchTags: ["choice"], defaults: { - rows: 8, + rows: 4, columns: 20, animateLoading: true, label: "Label", diff --git a/app/client/src/widgets/RadioGroupWidget/widget/index.tsx b/app/client/src/widgets/RadioGroupWidget/widget/index.tsx index 969d2e4b0f..fc6138be7a 100644 --- a/app/client/src/widgets/RadioGroupWidget/widget/index.tsx +++ b/app/client/src/widgets/RadioGroupWidget/widget/index.tsx @@ -515,6 +515,7 @@ class RadioGroupWidget extends BaseWidget { loading={isLoading} onRadioSelectionChange={this.onRadioSelectionChange} options={isArray(options) ? compact(options) : []} + required={this.props.isRequired} selectedOptionValue={selectedOptionValue} widgetId={widgetId} /> diff --git a/app/client/src/widgets/SwitchGroupWidget/index.ts b/app/client/src/widgets/SwitchGroupWidget/index.ts index 743b0003ce..8cb25ec907 100644 --- a/app/client/src/widgets/SwitchGroupWidget/index.ts +++ b/app/client/src/widgets/SwitchGroupWidget/index.ts @@ -11,7 +11,7 @@ export const CONFIG = { isCanvas: false, // Defines if this widget has a canvas within in which we can drop other widgets defaults: { widgetName: "SwitchGroup", - rows: 6, + rows: 4, columns: 26, options: [ { label: "Blue", value: "BLUE" }, diff --git a/app/client/src/widgets/SwitchWidget/component/index.tsx b/app/client/src/widgets/SwitchWidget/component/index.tsx index dd8f15b560..e5961ebb05 100644 --- a/app/client/src/widgets/SwitchWidget/component/index.tsx +++ b/app/client/src/widgets/SwitchWidget/component/index.tsx @@ -7,6 +7,7 @@ import { ComponentProps } from "widgets/BaseComponent"; import { AlignWidgetTypes } from "widgets/constants"; import { Colors } from "constants/Colors"; import { FontStyleTypes } from "constants/WidgetConstants"; +import { darkenColor } from "widgets/WidgetUtils"; export interface SwitchComponentProps extends ComponentProps { label: string; @@ -66,6 +67,13 @@ export const StyledSwitch = styled(Switch)<{ background: ${({ accentColor }) => `${accentColor}`} !important; border: 1px solid ${({ accentColor }) => `${accentColor}`} !important; } + + &:hover input:checked:not(:disabled) ~ .bp3-control-indicator { + background: ${({ accentColor }) => + `${darkenColor(accentColor)}`} !important; + border: 1px solid ${({ accentColor }) => + `${darkenColor(accentColor)}`} !important; + } } &.${Classes.SWITCH} {