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 cb8bcf1345..4aab42ed59 100644 Binary files a/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js/inlineDisabled.snap.png and b/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js/inlineDisabled.snap.png differ 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 62b2ece769..30552ba420 100644 Binary files a/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js/inlineEnabled.snap.png and b/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js/inlineEnabled.snap.png differ diff --git a/app/client/src/assets/icons/widget/checkbox/check-icon.svg b/app/client/src/assets/icons/widget/checkbox/check-icon.svg new file mode 100644 index 0000000000..c958322ab2 --- /dev/null +++ b/app/client/src/assets/icons/widget/checkbox/check-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + 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} {