From b41606e2b79e5caa5896e844acb41069526261d2 Mon Sep 17 00:00:00 2001 From: Arsalan Yaldram Date: Sat, 3 Dec 2022 17:28:02 +0530 Subject: [PATCH] fix: center align select widgets and RTE widget labels. (#18378) * fix: center align select and RTE labels. * feat: added label tooltips to select widgets. * fix: added center label alignment to datepicker. --- .../BaseInputWidget/component/index.tsx | 2 +- .../DatePickerWidget2/component/index.tsx | 22 +++++++++++++++---- .../component/index.styled.tsx | 15 +++++++++++++ .../MultiSelectTreeWidget/component/index.tsx | 3 +++ .../MultiSelectTreeWidget/widget/index.tsx | 11 ++++++++++ .../component/index.styled.tsx | 15 +++++++++++++ .../MultiSelectWidgetV2/component/index.tsx | 3 +++ .../MultiSelectWidgetV2/widget/index.tsx | 11 ++++++++++ .../RichTextEditorWidget/component/index.tsx | 14 +++++++++--- .../RichTextEditorWidget/widget/index.tsx | 11 ++++++++++ .../SelectWidget/component/index.styled.tsx | 15 +++++++++++++ .../widgets/SelectWidget/component/index.tsx | 3 +++ .../src/widgets/SelectWidget/widget/index.tsx | 11 ++++++++++ .../component/index.styled.tsx | 15 +++++++++++++ .../component/index.tsx | 3 +++ .../SingleSelectTreeWidget/widget/index.tsx | 11 ++++++++++ 16 files changed, 157 insertions(+), 8 deletions(-) diff --git a/app/client/src/widgets/BaseInputWidget/component/index.tsx b/app/client/src/widgets/BaseInputWidget/component/index.tsx index 39bf4fa996..c3e2599d9e 100644 --- a/app/client/src/widgets/BaseInputWidget/component/index.tsx +++ b/app/client/src/widgets/BaseInputWidget/component/index.tsx @@ -116,7 +116,7 @@ const InputComponentWrapper = styled((props) => ( return "flex: 1; margin-right: 5px; label { margin-right: 5px; margin-bottom: 0;}"; } }} - align-items: centert; + align-items: center; ${({ compactMode, labelPosition }) => { if (!labelPosition && !compactMode) { return "max-height: 20px; .bp3-popover-wrapper {max-height: 20px}"; diff --git a/app/client/src/widgets/DatePickerWidget2/component/index.tsx b/app/client/src/widgets/DatePickerWidget2/component/index.tsx index 3e2d8c192f..f1b2f64485 100644 --- a/app/client/src/widgets/DatePickerWidget2/component/index.tsx +++ b/app/client/src/widgets/DatePickerWidget2/component/index.tsx @@ -34,6 +34,20 @@ const StyledControlGroup = styled(ControlGroup)<{ }>` ${labelLayoutStyles} + /** + When the label is on the left it is not center aligned + here set height to auto and not 100% because the input + has fixed height and stretch the container. + */ + ${({ labelPosition }) => { + if (labelPosition === LabelPosition.Left) { + return ` + height: auto !important; + align-items: stretch; + `; + } + }} + &&& { .${Classes.INPUT} { color: var(--wds-color-text); @@ -44,7 +58,7 @@ const StyledControlGroup = styled(ControlGroup)<{ border-color: ${({ isValid }) => !isValid ? `var(--wds-color-border-danger);` - : `var(--wds-color-border);`} + : `var(--wds-color-border);`}; width: 100%; height: 100%; min-height: 32px; @@ -75,17 +89,17 @@ const StyledControlGroup = styled(ControlGroup)<{ isValid ? lightenColor(accentColor) : "var(--wds-color-border-danger-focus-light)" - } !important;`} + } !important;`}; } } .${Classes.INPUT}:disabled { background: var(--wds-color-bg-disabled); - color: var(--wds-color-text-disabled) + color: var(--wds-color-text-disabled); } .${Classes.INPUT}:not(:disabled)::placeholder { - color:var(--wds-color-text-light); + color: var(--wds-color-text-light); } .${Classes.INPUT}::placeholder { diff --git a/app/client/src/widgets/MultiSelectTreeWidget/component/index.styled.tsx b/app/client/src/widgets/MultiSelectTreeWidget/component/index.styled.tsx index af778b2d10..05f15c0f81 100644 --- a/app/client/src/widgets/MultiSelectTreeWidget/component/index.styled.tsx +++ b/app/client/src/widgets/MultiSelectTreeWidget/component/index.styled.tsx @@ -609,6 +609,21 @@ export const TreeSelectContainer = styled.div<{ accentColor: string; }>` ${labelLayoutStyles} + + /** + When the label is on the left it is not center aligned + here set height to auto and not 100% because the input + has fixed height and stretch the container. + */ + ${({ labelPosition }) => { + if (labelPosition === LabelPosition.Left) { + return ` + height: auto !important; + align-items: stretch; + `; + } + }} + & .${LABEL_CONTAINER_CLASS} { label { ${({ labelPosition }) => { diff --git a/app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx b/app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx index 08d7b84102..2308be4602 100644 --- a/app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx +++ b/app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx @@ -47,6 +47,7 @@ export interface TreeSelectProps labelTextColor?: string; labelTextSize?: TextSize; labelStyle?: string; + labelTooltip?: string; compactMode: boolean; dropDownWidth: number; width: number; @@ -121,6 +122,7 @@ function MultiTreeSelectComponent({ labelText, labelTextColor, labelTextSize, + labelTooltip, labelWidth, loading, mode, @@ -245,6 +247,7 @@ function MultiTreeSelectComponent({ disabled={disabled} fontSize={labelTextSize} fontStyle={labelStyle} + helpText={labelTooltip} isDynamicHeightEnabled={isDynamicHeightEnabled} loading={loading} position={labelPosition} diff --git a/app/client/src/widgets/MultiSelectTreeWidget/widget/index.tsx b/app/client/src/widgets/MultiSelectTreeWidget/widget/index.tsx index 917029362d..02db3ab67d 100644 --- a/app/client/src/widgets/MultiSelectTreeWidget/widget/index.tsx +++ b/app/client/src/widgets/MultiSelectTreeWidget/widget/index.tsx @@ -259,6 +259,16 @@ class MultiSelectTreeWidget extends BaseWidget< isBindProperty: false, isTriggerProperty: false, }, + { + helpText: "Show help text or details about current input", + propertyName: "labelTooltip", + label: "Tooltip", + controlType: "INPUT_TEXT", + placeholderText: "Value must be atleast 6 chars", + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, + }, { helpText: "Sets a Placeholder Text", propertyName: "placeholderText", @@ -537,6 +547,7 @@ class MultiSelectTreeWidget extends BaseWidget< labelText={this.props.labelText} labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} + labelTooltip={this.props.labelTooltip} labelWidth={this.getLabelWidth()} loading={this.props.isLoading} mode={this.props.mode} diff --git a/app/client/src/widgets/MultiSelectWidgetV2/component/index.styled.tsx b/app/client/src/widgets/MultiSelectWidgetV2/component/index.styled.tsx index 86f2e708f5..552e7b10e1 100644 --- a/app/client/src/widgets/MultiSelectWidgetV2/component/index.styled.tsx +++ b/app/client/src/widgets/MultiSelectWidgetV2/component/index.styled.tsx @@ -392,6 +392,21 @@ export const MultiSelectContainer = styled.div<{ accentColor?: string; }>` ${labelLayoutStyles} + + /** + When the label is on the left it is not center aligned + here set height to auto and not 100% because the input + has fixed height and stretch the container. + */ + ${({ labelPosition }) => { + if (labelPosition === LabelPosition.Left) { + return ` + height: auto !important; + align-items: stretch; + `; + } + }} + & .${LABEL_CONTAINER_CLASS} { label { ${({ labelPosition }) => { diff --git a/app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx b/app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx index 5ede1c7d31..3682b3cbc7 100644 --- a/app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx +++ b/app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx @@ -51,6 +51,7 @@ export interface MultiSelectProps labelTextSize?: TextSize; labelStyle?: string; compactMode: boolean; + labelTooltip?: string; isValid: boolean; allowSelectAll?: boolean; filterText?: string; @@ -86,6 +87,7 @@ function MultiSelectComponent({ labelText, labelTextColor, labelTextSize, + labelTooltip, labelWidth, loading, onBlur, @@ -307,6 +309,7 @@ function MultiSelectComponent({ disabled={disabled} fontSize={labelTextSize} fontStyle={labelStyle} + helpText={labelTooltip} isDynamicHeightEnabled={isDynamicHeightEnabled} loading={loading} position={labelPosition} diff --git a/app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx b/app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx index 80a1be2e21..052b80d7c5 100644 --- a/app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx +++ b/app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx @@ -382,6 +382,16 @@ class MultiSelectWidget extends BaseWidget< { sectionName: "General", children: [ + { + helpText: "Show help text or details about current input", + propertyName: "labelTooltip", + label: "Tooltip", + controlType: "INPUT_TEXT", + placeholderText: "Value must be atleast 6 chars", + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, + }, { helpText: "Sets a Placeholder Text", propertyName: "placeholderText", @@ -670,6 +680,7 @@ class MultiSelectWidget extends BaseWidget< labelText={this.props.labelText} labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} + labelTooltip={this.props.labelTooltip} labelWidth={this.getLabelWidth()} loading={this.props.isLoading} onChange={this.onOptionChange} diff --git a/app/client/src/widgets/RichTextEditorWidget/component/index.tsx b/app/client/src/widgets/RichTextEditorWidget/component/index.tsx index 2f10a1934c..cc0dbe459e 100644 --- a/app/client/src/widgets/RichTextEditorWidget/component/index.tsx +++ b/app/client/src/widgets/RichTextEditorWidget/component/index.tsx @@ -7,10 +7,11 @@ import { TextSize } from "constants/WidgetConstants"; // @ts-expect-error: loader types not available import cssVariables from "!!raw-loader!theme/wds.css"; - -import { labelLayoutStyles } from "design-system"; import { isMacOs } from "utils/AppsmithUtils"; -import LabelWithTooltip from "widgets/components/LabelWithTooltip"; +import LabelWithTooltip, { + labelLayoutStyles, + LABEL_CONTAINER_CLASS, +} from "widgets/components/LabelWithTooltip"; const StyledRTEditor = styled.div<{ borderRadius: string; @@ -208,6 +209,10 @@ const StyledRTEditor = styled.div<{ } ${labelLayoutStyles} + + & .${LABEL_CONTAINER_CLASS} { + align-self: center; + } `; export const RichTextEditorInputWrapper = styled.div<{ @@ -243,6 +248,7 @@ export interface RichtextEditorComponentProps { labelWidth?: number; labelTextColor?: string; labelTextSize?: TextSize; + labelTooltip?: string; labelStyle?: string; isValid?: boolean; onValueChange: (valueAsString: string) => void; @@ -259,6 +265,7 @@ function RichtextEditorComponent(props: RichtextEditorComponentProps) { labelText, labelTextColor, labelTextSize, + labelTooltip, labelWidth, } = props; @@ -320,6 +327,7 @@ function RichtextEditorComponent(props: RichtextEditorComponentProps) { disabled={isDisabled} fontSize={labelTextSize} fontStyle={labelStyle} + helpText={labelTooltip} isDynamicHeightEnabled={isDynamicHeightEnabled} position={labelPosition} text={labelText} diff --git a/app/client/src/widgets/RichTextEditorWidget/widget/index.tsx b/app/client/src/widgets/RichTextEditorWidget/widget/index.tsx index ae9e304f4e..1a693b992b 100644 --- a/app/client/src/widgets/RichTextEditorWidget/widget/index.tsx +++ b/app/client/src/widgets/RichTextEditorWidget/widget/index.tsx @@ -158,6 +158,16 @@ class RichTextEditorWidget extends BaseWidget< { sectionName: "General", children: [ + { + helpText: "Show help text or details about current input", + propertyName: "labelTooltip", + label: "Tooltip", + controlType: "INPUT_TEXT", + placeholderText: "Value must be atleast 6 chars", + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, + }, { propertyName: "isVisible", label: "Visible", @@ -407,6 +417,7 @@ class RichTextEditorWidget extends BaseWidget< labelText={this.props.labelText} labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} + labelTooltip={this.props.labelTooltip} labelWidth={this.getLabelWidth()} onValueChange={this.onValueChange} placeholder={this.props.placeholder} diff --git a/app/client/src/widgets/SelectWidget/component/index.styled.tsx b/app/client/src/widgets/SelectWidget/component/index.styled.tsx index 9a25c6af7c..82b7715494 100644 --- a/app/client/src/widgets/SelectWidget/component/index.styled.tsx +++ b/app/client/src/widgets/SelectWidget/component/index.styled.tsx @@ -217,6 +217,21 @@ export const DropdownContainer = styled.div<{ }>` ${BlueprintCSSTransform} ${labelLayoutStyles} + + /** + When the label is on the left it is not center aligned + here set height to auto and not 100% because the input + has fixed height and stretch the container. + */ + ${({ labelPosition }) => { + if (labelPosition === LabelPosition.Left) { + return ` + height: auto !important; + align-items: stretch; + `; + } + }} + & .${LABEL_CONTAINER_CLASS} { label { ${({ labelPosition }) => { diff --git a/app/client/src/widgets/SelectWidget/component/index.tsx b/app/client/src/widgets/SelectWidget/component/index.tsx index 56d13d430e..ffaf99bf38 100644 --- a/app/client/src/widgets/SelectWidget/component/index.tsx +++ b/app/client/src/widgets/SelectWidget/component/index.tsx @@ -267,6 +267,7 @@ class SelectComponent extends React.Component< labelText, labelTextColor, labelTextSize, + labelTooltip, labelWidth, widgetId, } = this.props; @@ -325,6 +326,7 @@ class SelectComponent extends React.Component< disabled={disabled} fontSize={labelTextSize} fontStyle={labelStyle} + helpText={labelTooltip} isDynamicHeightEnabled={isDynamicHeightEnabled} loading={isLoading} position={labelPosition} @@ -419,6 +421,7 @@ export interface SelectComponentProps extends ComponentProps { labelTextSize?: TextSize; labelStyle?: string; labelWidth?: number; + labelTooltip?: string; compactMode: boolean; selectedIndex?: number; options: DropdownOption[]; diff --git a/app/client/src/widgets/SelectWidget/widget/index.tsx b/app/client/src/widgets/SelectWidget/widget/index.tsx index f2aafadd8d..73bbdc1479 100644 --- a/app/client/src/widgets/SelectWidget/widget/index.tsx +++ b/app/client/src/widgets/SelectWidget/widget/index.tsx @@ -318,6 +318,16 @@ class SelectWidget extends BaseWidget { { sectionName: "General", children: [ + { + helpText: "Show help text or details about current input", + propertyName: "labelTooltip", + label: "Tooltip", + controlType: "INPUT_TEXT", + placeholderText: "Value must be atleast 6 chars", + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, + }, { helpText: "Sets a Placeholder Text", propertyName: "placeholderText", @@ -593,6 +603,7 @@ class SelectWidget extends BaseWidget { labelText={this.props.labelText} labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} + labelTooltip={this.props.labelTooltip} labelWidth={this.getLabelWidth()} onFilterChange={this.onFilterChange} onOptionSelected={this.onOptionSelected} diff --git a/app/client/src/widgets/SingleSelectTreeWidget/component/index.styled.tsx b/app/client/src/widgets/SingleSelectTreeWidget/component/index.styled.tsx index fa6f169ba8..e9632d99c4 100644 --- a/app/client/src/widgets/SingleSelectTreeWidget/component/index.styled.tsx +++ b/app/client/src/widgets/SingleSelectTreeWidget/component/index.styled.tsx @@ -621,6 +621,21 @@ export const TreeSelectContainer = styled.div<{ accentColor: string; }>` ${labelLayoutStyles} + + /** + When the label is on the left it is not center aligned + here set height to auto and not 100% because the input + has fixed height and stretch the container. + */ + ${({ labelPosition }) => { + if (labelPosition === LabelPosition.Left) { + return ` + height: auto !important; + align-items: stretch; + `; + } + }} + & .${LABEL_CONTAINER_CLASS} { label { ${({ labelPosition }) => { diff --git a/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx b/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx index c66408fd07..1422e1cb67 100644 --- a/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx +++ b/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx @@ -46,6 +46,7 @@ export interface TreeSelectProps labelTextColor?: string; labelTextSize?: TextSize; labelStyle?: string; + labelTooltip?: string; compactMode: boolean; dropDownWidth: number; width: number; @@ -120,6 +121,7 @@ function SingleSelectTreeComponent({ labelText, labelTextColor, labelTextSize, + labelTooltip, labelWidth, loading, onChange, @@ -257,6 +259,7 @@ function SingleSelectTreeComponent({ disabled={disabled} fontSize={labelTextSize} fontStyle={labelStyle} + helpText={labelTooltip} isDynamicHeightEnabled={isDynamicHeightEnabled} loading={loading} position={labelPosition} diff --git a/app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx b/app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx index 05a80d5f3b..7aeccded92 100644 --- a/app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx +++ b/app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx @@ -222,6 +222,16 @@ class SingleSelectTreeWidget extends BaseWidget< { sectionName: "General", children: [ + { + helpText: "Show help text or details about current input", + propertyName: "labelTooltip", + label: "Tooltip", + controlType: "INPUT_TEXT", + placeholderText: "Value must be atleast 6 chars", + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, + }, { helpText: "Sets a Placeholder Text", propertyName: "placeholderText", @@ -499,6 +509,7 @@ class SingleSelectTreeWidget extends BaseWidget< labelText={this.props.labelText} labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} + labelTooltip={this.props.labelTooltip} labelWidth={this.getLabelWidth()} loading={this.props.isLoading} onChange={this.onOptionChange}