diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Button/ButtonGroup_MenuButton_Width_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Button/ButtonGroup_MenuButton_Width_spec.js index 34cbbd371b..4b06b075b9 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Button/ButtonGroup_MenuButton_Width_spec.js +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Button/ButtonGroup_MenuButton_Width_spec.js @@ -8,8 +8,6 @@ describe("In a button group widget, menu button width", function () { it("1. If target width is smaller than min-width, The menu button popover width should be set to minimum width", () => { cy.get(commonlocators.layoutControls).eq(3).click(); - - const minWidth = 12 * 12.3125; const widgetId = "yxjq5sck7d"; // Get the default menu button cy.get(`.appsmith_widget_${widgetId} div.t--buttongroup-widget`) @@ -18,16 +16,21 @@ describe("In a button group widget, menu button width", function () { .as("target"); // Open popover cy.get("@target").click(); - // Get the target width - agHelper.GetWidth("@target"); - cy.get("@eleWidth").then((targetWidth) => { - expect(targetWidth).to.be.lessThan(minWidth); - // Check if popover width is set to its target width - cy.get(`.bp3-popover2.button-group-${widgetId}`).should( - "have.css", - "width", - `${minWidth}px`, - ); + + agHelper.GetWidth(commonlocators.canvas); + cy.get("@eleWidth").then((mainCanvasWidth) => { + const minWidth = (12 / 64) * mainCanvasWidth; + // Get the target width + agHelper.GetWidth("@target"); + cy.get("@eleWidth").then((targetWidth) => { + expect(targetWidth).to.be.lessThan(minWidth); + // Check if popover width is set to its target width + cy.get(`.bp3-popover2.button-group-${widgetId}`).should( + "have.css", + "width", + `${minWidth}px`, + ); + }); }); }); diff --git a/app/client/src/WidgetProvider/constants.ts b/app/client/src/WidgetProvider/constants.ts index 20758b47ef..6b9db27f2c 100644 --- a/app/client/src/WidgetProvider/constants.ts +++ b/app/client/src/WidgetProvider/constants.ts @@ -132,6 +132,8 @@ export type GetCanvasHeightOffset = (widgetProps: WidgetProps) => number; export const GRID_DENSITY_MIGRATION_V1 = 4; +export const COMPACT_MODE_MIN_ROWS = 4; + export enum BlueprintOperationTypes { MODIFY_PROPS = "MODIFY_PROPS", ADD_ACTION = "ADD_ACTION", @@ -198,8 +200,8 @@ export enum AlignWidgetTypes { RIGHT = "RIGHT", } -// Minimum Rows for Widget Popups -export const MinimumPopupRows = 12; +// Minimum width for Widget Popups +export const MinimumPopupWidthInPercentage = 18.75; // Default boxShadowColor used in theming migration export const rgbaMigrationConstantV56 = "rgba(0, 0, 0, 0.25)"; diff --git a/app/client/src/layoutSystems/fixedlayout/index.ts b/app/client/src/layoutSystems/fixedlayout/index.ts index 27bd0a9102..0c354bfa77 100644 --- a/app/client/src/layoutSystems/fixedlayout/index.ts +++ b/app/client/src/layoutSystems/fixedlayout/index.ts @@ -9,7 +9,6 @@ import type { BaseWidgetProps } from "widgets/BaseWidgetHOC/withBaseWidgetHOC"; * utiltiy function to compute a widgets dimensions in Fixed layout system * */ - const getFixedLayoutComponentDimensions = ({ bottomRow, leftColumn, @@ -24,20 +23,31 @@ const getFixedLayoutComponentDimensions = ({ }; }; +/** + * getLabelWidth + * utiltiy function to compute a widgets label width in Fixed layout system + * + */ +const getLabelWidth = (props: BaseWidgetProps) => { + return (Number(props.labelWidth) || 0) * props.parentColumnSpace; +}; + /** * getFixedLayoutSystemPropsEnhancer * * utiltiy function to enhance BaseWidgetProps with Fixed Layout system specific props * */ - const getFixedLayoutSystemPropsEnhancer = (props: BaseWidgetProps) => { const { componentHeight, componentWidth } = getFixedLayoutComponentDimensions(props); + const labelComponentWidth = getLabelWidth(props); + return { ...props, componentHeight, componentWidth, + labelComponentWidth, }; }; diff --git a/app/client/src/widgets/AudioRecorderWidget/widget/index.tsx b/app/client/src/widgets/AudioRecorderWidget/widget/index.tsx index d1b9548880..4260086530 100644 --- a/app/client/src/widgets/AudioRecorderWidget/widget/index.tsx +++ b/app/client/src/widgets/AudioRecorderWidget/widget/index.tsx @@ -302,17 +302,8 @@ class AudioRecorderWidget extends BaseWidget< } getWidgetView() { - const { - blobURL, - bottomRow, - iconColor, - isDisabled, - leftColumn, - parentColumnSpace, - parentRowSpace, - rightColumn, - topRow, - } = this.props; + const { blobURL, componentHeight, componentWidth, iconColor, isDisabled } = + this.props; return ( ); } diff --git a/app/client/src/widgets/BaseInputWidget/widget/index.tsx b/app/client/src/widgets/BaseInputWidget/widget/index.tsx index 4f16db7b6b..fb4b5eedc1 100644 --- a/app/client/src/widgets/BaseInputWidget/widget/index.tsx +++ b/app/client/src/widgets/BaseInputWidget/widget/index.tsx @@ -620,7 +620,7 @@ class BaseInputWidget< labelStyle={this.props.labelStyle} labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} - labelWidth={this.getLabelWidth()} + labelWidth={this.props.labelComponentWidth} maxChars={this.props.maxChars} multiline={this.props.multiline} onFocusChange={this.props.onFocusChange} @@ -668,6 +668,7 @@ export interface BaseInputWidgetProps extends WidgetProps { iconName?: IconName; iconAlign?: Omit; onSubmit?: string; + labelComponentWidth?: number; } export default BaseInputWidget; diff --git a/app/client/src/widgets/BaseWidget.tsx b/app/client/src/widgets/BaseWidget.tsx index 9a90100ade..3fe20baa00 100644 --- a/app/client/src/widgets/BaseWidget.tsx +++ b/app/client/src/widgets/BaseWidget.tsx @@ -319,10 +319,6 @@ abstract class BaseWidget< return this.props.referencedWidgetId || this.props.widgetId; }; - getLabelWidth = () => { - return (Number(this.props.labelWidth) || 0) * this.props.parentColumnSpace; - }; - render() { return this.getWidgetView(); } diff --git a/app/client/src/widgets/ButtonGroupWidget/widget/index.tsx b/app/client/src/widgets/ButtonGroupWidget/widget/index.tsx index 677b05315f..33f40b0e7f 100644 --- a/app/client/src/widgets/ButtonGroupWidget/widget/index.tsx +++ b/app/client/src/widgets/ButtonGroupWidget/widget/index.tsx @@ -9,7 +9,7 @@ import { get } from "lodash"; import React from "react"; import type { WidgetProps, WidgetState } from "widgets/BaseWidget"; import BaseWidget from "widgets/BaseWidget"; -import { MinimumPopupRows } from "WidgetProvider/constants"; +import { MinimumPopupWidthInPercentage } from "WidgetProvider/constants"; import ButtonGroupComponent from "../component"; import { getStylesheetValue } from "./helpers"; import { DefaultAutocompleteDefinitions } from "widgets/WidgetUtils"; @@ -19,7 +19,7 @@ import { klona as clone } from "klona/full"; import { ResponsiveBehavior } from "layoutSystems/autolayout/utils/constants"; import { BlueprintOperationTypes } from "WidgetProvider/constants"; import IconSVG from "../icon.svg"; -import { WIDGET_TAGS } from "constants/WidgetConstants"; +import { WIDGET_TAGS, layoutConfigurations } from "constants/WidgetConstants"; class ButtonGroupWidget extends BaseWidget< ButtonGroupWidgetProps, @@ -771,7 +771,9 @@ class ButtonGroupWidget extends BaseWidget< getWidgetView() { const { componentWidth } = this.props; - const minPopoverWidth = MinimumPopupRows * this.props.parentColumnSpace; + const minPopoverWidth = + (MinimumPopupWidthInPercentage / 100) * + (this.props.mainCanvasWidth ?? layoutConfigurations.MOBILE.maxWidth); return ( { getWidgetView() { const { - bottomRow, + componentHeight, + componentWidth, defaultCamera, isDisabled, isMirrored, - leftColumn, mode, - parentColumnSpace, - parentRowSpace, - rightColumn, - topRow, videoBlobURL, } = this.props; - const height = (bottomRow - topRow) * parentRowSpace - WIDGET_PADDING * 2; - const width = - (rightColumn - leftColumn) * parentColumnSpace - WIDGET_PADDING * 2; + const height = componentHeight - WIDGET_PADDING * 2; + const width = componentWidth - WIDGET_PADDING * 2; return ( { { isVisible={this.props.isVisible} key={this.props.widgetId} labelOrientation={this.props.labelOrientation} - leftColumn={this.props.leftColumn} onDataPointClick={this.onDataPointClick} primaryColor={this.props.accentColor ?? Colors.ROYAL_BLUE_2} - rightColumn={this.props.rightColumn} setAdaptiveYMin={this.props.setAdaptiveYMin} showDataPointLabel={this.props.showDataPointLabel} - topRow={this.props.topRow} widgetId={this.props.widgetId} xAxisName={this.props.xAxisName} yAxisName={this.props.yAxisName} diff --git a/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx b/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx index ffbf88b799..b3636d6c0c 100644 --- a/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx +++ b/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx @@ -15,10 +15,10 @@ import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType"; import type { DerivedPropertiesMap } from "WidgetProvider/factory"; import type { WidgetProps, WidgetState } from "widgets/BaseWidget"; import BaseWidget from "widgets/BaseWidget"; -import { GRID_DENSITY_MIGRATION_V1 } from "WidgetProvider/constants"; import { isAutoHeightEnabledForWidget, DefaultAutocompleteDefinitions, + isCompactMode, } from "widgets/WidgetUtils"; import CheckboxGroupComponent from "../component"; import type { OptionProps, SelectAllState } from "../constants"; @@ -630,17 +630,13 @@ class CheckboxGroupWidget extends BaseWidget< } getWidgetView() { + const { componentHeight } = this.props; + return ( - 1 - ) - } + compactMode={isCompactMode(componentHeight)} isDisabled={this.props.isDisabled} isDynamicHeightEnabled={isAutoHeightEnabledForWidget(this.props)} isInline={this.props.isInline} @@ -655,7 +651,7 @@ class CheckboxGroupWidget extends BaseWidget< labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} labelTooltip={this.props.labelTooltip} - labelWidth={this.getLabelWidth()} + labelWidth={this.props.labelComponentWidth} minWidth={this.props.minWidth} onChange={this.handleCheckboxChange} onSelectAllChange={this.handleSelectAllChange} @@ -741,6 +737,7 @@ export interface CheckboxGroupWidgetProps extends WidgetProps { labelStyle?: string; accentColor: string; borderRadius: string; + labelComponentWidth?: number; } export default CheckboxGroupWidget; diff --git a/app/client/src/widgets/CurrencyInputWidget/widget/index.tsx b/app/client/src/widgets/CurrencyInputWidget/widget/index.tsx index 831ffc1420..05a1d4c239 100644 --- a/app/client/src/widgets/CurrencyInputWidget/widget/index.tsx +++ b/app/client/src/widgets/CurrencyInputWidget/widget/index.tsx @@ -26,12 +26,12 @@ import { limitDecimalValue, } from "../component/utilities"; import { getLocale, mergeWidgetConfig } from "utils/helpers"; -import { GRID_DENSITY_MIGRATION_V1 } from "WidgetProvider/constants"; import { getLocaleDecimalSeperator, getLocaleThousandSeparator, isAutoHeightEnabledForWidget, DefaultAutocompleteDefinitions, + isCompactMode, } from "widgets/WidgetUtils"; import type { SetterConfig, Stylesheet } from "entities/AppTheming"; import { NumberInputStepButtonPosition } from "widgets/BaseInputWidget/constants"; @@ -578,6 +578,7 @@ class CurrencyInputWidget extends BaseInputWidget< if (this.props.isRequired && value.length === 0) { conditionalProps.errorMessage = createMessage(FIELD_REQUIRED_ERROR); } + const { componentHeight } = this.props; if (this.props.showStepArrows) { conditionalProps.buttonPosition = NumberInputStepButtonPosition.RIGHT; @@ -592,13 +593,7 @@ class CurrencyInputWidget extends BaseInputWidget< autoFocus={this.props.autoFocus} borderRadius={this.props.borderRadius} boxShadow={this.props.boxShadow} - compactMode={ - !( - (this.props.bottomRow - this.props.topRow) / - GRID_DENSITY_MIGRATION_V1 > - 1 - ) - } + compactMode={isCompactMode(componentHeight)} currencyCode={currencyCode} decimals={this.props.decimals} defaultValue={this.props.defaultText} @@ -616,7 +611,7 @@ class CurrencyInputWidget extends BaseInputWidget< labelStyle={this.props.labelStyle} labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} - labelWidth={this.getLabelWidth()} + labelWidth={this.props.labelComponentWidth} onCurrencyTypeChange={this.onCurrencyTypeChange} onFocusChange={this.handleFocusChange} onKeyDown={this.handleKeyDown} diff --git a/app/client/src/widgets/DatePickerWidget2/widget/index.tsx b/app/client/src/widgets/DatePickerWidget2/widget/index.tsx index 6d0abfee42..a9f9562b83 100644 --- a/app/client/src/widgets/DatePickerWidget2/widget/index.tsx +++ b/app/client/src/widgets/DatePickerWidget2/widget/index.tsx @@ -12,10 +12,10 @@ import type { DerivedPropertiesMap } from "WidgetProvider/factory"; import { Alignment } from "@blueprintjs/core"; import { LabelPosition } from "components/constants"; import type { SetterConfig, Stylesheet } from "entities/AppTheming"; -import { GRID_DENSITY_MIGRATION_V1 } from "WidgetProvider/constants"; import { isAutoHeightEnabledForWidget, DefaultAutocompleteDefinitions, + isCompactMode, } from "widgets/WidgetUtils"; import type { DatePickerType } from "../constants"; import { TimePrecision } from "../constants"; @@ -649,6 +649,8 @@ class DatePickerWidget extends BaseWidget { } getWidgetView() { + const { componentHeight } = this.props; + return ( { borderRadius={this.props.borderRadius} boxShadow={this.props.boxShadow} closeOnSelection={this.props.closeOnSelection} - compactMode={ - !( - (this.props.bottomRow - this.props.topRow) / - GRID_DENSITY_MIGRATION_V1 > - 1 - ) - } + compactMode={isCompactMode(componentHeight)} dateFormat={this.props.dateFormat} datePickerType="DATE_PICKER" firstDayOfWeek={this.props.firstDayOfWeek} @@ -677,7 +673,7 @@ class DatePickerWidget extends BaseWidget { labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} labelTooltip={this.props.labelTooltip} - labelWidth={this.getLabelWidth()} + labelWidth={this.props.labelComponentWidth} maxDate={this.props.maxDate} minDate={this.props.minDate} onBlur={this.onBlur} @@ -757,6 +753,7 @@ export interface DatePickerWidget2Props extends WidgetProps { timePrecision: TimePrecision; onFocus?: string; onBlur?: string; + labelComponentWidth?: number; } export default DatePickerWidget; diff --git a/app/client/src/widgets/DropdownWidget/widget/index.tsx b/app/client/src/widgets/DropdownWidget/widget/index.tsx index a23abcef0f..87aa2094c0 100644 --- a/app/client/src/widgets/DropdownWidget/widget/index.tsx +++ b/app/client/src/widgets/DropdownWidget/widget/index.tsx @@ -9,20 +9,21 @@ import type { ValidationResponse } from "constants/WidgetValidation"; import { ValidationTypes } from "constants/WidgetValidation"; import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory"; import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType"; -import { - MinimumPopupRows, - GRID_DENSITY_MIGRATION_V1, -} from "WidgetProvider/constants"; +import { MinimumPopupWidthInPercentage } from "WidgetProvider/constants"; import { LabelPosition } from "components/constants"; import { Alignment } from "@blueprintjs/core"; import type { Stylesheet } from "entities/AppTheming"; -import { DefaultAutocompleteDefinitions } from "widgets/WidgetUtils"; +import { + DefaultAutocompleteDefinitions, + isCompactMode, +} from "widgets/WidgetUtils"; import type { AutocompletionDefinitions, PropertyUpdates, SnipingModeProperty, } from "WidgetProvider/constants"; import IconSVG from "../icon.svg"; +import { layoutConfigurations } from "constants/WidgetConstants"; function defaultOptionValueValidation(value: unknown): ValidationResponse { if (typeof value === "string") return { isValid: true, parsed: value.trim() }; @@ -484,7 +485,9 @@ class DropdownWidget extends BaseWidget { const options = _.isArray(this.props.options) ? this.props.options : []; const isInvalid = "isValid" in this.props && !this.props.isValid && !!this.props.isDirty; - const dropDownWidth = MinimumPopupRows * this.props.parentColumnSpace; + const dropDownWidth = + (MinimumPopupWidthInPercentage / 100) * + (this.props.mainCanvasWidth ?? layoutConfigurations.MOBILE.maxWidth); const selectedIndex = _.findIndex(this.props.options, { value: this.props.selectedOptionValue, @@ -497,13 +500,7 @@ class DropdownWidget extends BaseWidget { backgroundColor={this.props.backgroundColor} borderRadius={this.props.borderRadius} boxShadow={this.props.boxShadow} - compactMode={ - !( - (this.props.bottomRow - this.props.topRow) / - GRID_DENSITY_MIGRATION_V1 > - 1 - ) - } + compactMode={isCompactMode(componentHeight)} disabled={this.props.isDisabled} dropDownWidth={dropDownWidth} hasError={isInvalid} @@ -517,7 +514,7 @@ class DropdownWidget extends BaseWidget { labelText={this.props.labelText} labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} - labelWidth={this.getLabelWidth()} + labelWidth={this.props.labelComponentWidth} onFilterChange={this.onFilterChange} onOptionSelected={this.onOptionSelected} options={options} @@ -597,6 +594,7 @@ export interface DropdownWidgetProps extends WidgetProps { accentColor: string; fontFamily?: string; isDirty?: boolean; + labelComponentWidth?: number; } export default DropdownWidget; diff --git a/app/client/src/widgets/IconButtonWidget/widget/index.tsx b/app/client/src/widgets/IconButtonWidget/widget/index.tsx index d0f0c557ca..d39cf99a70 100644 --- a/app/client/src/widgets/IconButtonWidget/widget/index.tsx +++ b/app/client/src/widgets/IconButtonWidget/widget/index.tsx @@ -19,6 +19,8 @@ import IconSVG from "../icon.svg"; import { WIDGET_TAGS } from "constants/WidgetConstants"; +const ICON_BUTTON_SIZE_IN_AUTOLAYOUT = 32; + const ICON_NAMES = Object.keys(IconNames).map( (name: string) => IconNames[name as keyof typeof IconNames], ); @@ -299,6 +301,7 @@ class IconButtonWidget extends BaseWidget { tooltip, widgetId, } = this.props; + const { componentHeight, componentWidth } = this.props; return ( { hasOnClickAction={!!this.props.onClick} height={ this.isAutoLayoutMode - ? 32 - : (this.props.bottomRow - this.props.topRow) * - this.props.parentRowSpace + ? ICON_BUTTON_SIZE_IN_AUTOLAYOUT + : componentHeight } iconName={iconName} isDisabled={isDisabled} @@ -324,9 +326,8 @@ class IconButtonWidget extends BaseWidget { widgetId={widgetId} width={ this.isAutoLayoutMode - ? 32 - : (this.props.rightColumn - this.props.leftColumn) * - this.props.parentColumnSpace + ? ICON_BUTTON_SIZE_IN_AUTOLAYOUT + : componentWidth } /> ); diff --git a/app/client/src/widgets/InputWidget/widget/index.tsx b/app/client/src/widgets/InputWidget/widget/index.tsx index b0c57c8de5..e2c9b415c0 100644 --- a/app/client/src/widgets/InputWidget/widget/index.tsx +++ b/app/client/src/widgets/InputWidget/widget/index.tsx @@ -4,7 +4,7 @@ import BaseWidget from "widgets/BaseWidget"; import { Alignment } from "@blueprintjs/core"; import type { IconName } from "@blueprintjs/icons"; import type { TextSize } from "constants/WidgetConstants"; -import { RenderModes } from "constants/WidgetConstants"; +import { GridDefaults, RenderModes } from "constants/WidgetConstants"; import type { InputComponentProps } from "../component"; import InputComponent from "../component"; import type { ExecutionResult } from "constants/AppsmithActionConstants/ActionConstants"; @@ -19,7 +19,7 @@ import { import type { DerivedPropertiesMap } from "WidgetProvider/factory"; import type { InputType } from "../constants"; import { InputTypes } from "../constants"; -import { GRID_DENSITY_MIGRATION_V1 } from "WidgetProvider/constants"; +import { COMPACT_MODE_MIN_ROWS } from "WidgetProvider/constants"; import { ISDCodeDropdownOptions } from "../component/ISDCodeDropdown"; import { CurrencyDropdownOptions } from "../component/CurrencyCodeDropdown"; import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType"; @@ -31,7 +31,10 @@ import { import { LabelPosition } from "components/constants"; import type { SetterConfig, Stylesheet } from "entities/AppTheming"; import { checkInputTypeTextByProps } from "widgets/BaseInputWidget/utils"; -import { DefaultAutocompleteDefinitions } from "widgets/WidgetUtils"; +import { + DefaultAutocompleteDefinitions, + isCompactMode, +} from "widgets/WidgetUtils"; import type { AutocompletionDefinitions, PropertyUpdates, @@ -977,12 +980,13 @@ class InputWidget extends BaseWidget { } if (this.props.maxNum) conditionalProps.maxNum = this.props.maxNum; if (this.props.minNum) conditionalProps.minNum = this.props.minNum; + const { componentHeight } = this.props; const minInputSingleLineHeight = this.props.label || this.props.tooltip ? // adjust height for label | tooltip extra div - GRID_DENSITY_MIGRATION_V1 + 4 + COMPACT_MODE_MIN_ROWS + 4 : // GRID_DENSITY_MIGRATION_V1 used to adjust code as per new scaled canvas. - GRID_DENSITY_MIGRATION_V1; + COMPACT_MODE_MIN_ROWS; return ( { borderRadius={this.props.borderRadius} boxShadow={this.props.boxShadow} // show label and Input side by side if true - compactMode={ - !( - (this.props.bottomRow - this.props.topRow) / - GRID_DENSITY_MIGRATION_V1 > - 1 - ) - } + compactMode={isCompactMode(componentHeight)} currencyCountryCode={currencyCountryCode} decimalsInCurrency={this.props.decimalsInCurrency} defaultValue={this.props.defaultText} @@ -1016,11 +1014,11 @@ class InputWidget extends BaseWidget { labelStyle={this.props.labelStyle} labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} - labelWidth={(this.props.labelWidth || 0) * this.props.parentColumnSpace} + labelWidth={this.props.labelComponentWidth} multiline={ - (this.props.bottomRow - this.props.topRow) / - minInputSingleLineHeight > - 1 && this.props.inputType === "TEXT" + componentHeight > + minInputSingleLineHeight * GridDefaults.DEFAULT_GRID_ROW_HEIGHT && + this.props.inputType === "TEXT" } onCurrencyTypeChange={this.onCurrencyTypeChange} onFocusChange={this.handleFocusChange} @@ -1086,6 +1084,7 @@ export interface InputWidgetProps extends WidgetProps { borderRadius: string; boxShadow?: string; primaryColor: string; + labelComponentWidth?: number; } export default InputWidget; diff --git a/app/client/src/widgets/InputWidgetV2/widget/index.tsx b/app/client/src/widgets/InputWidgetV2/widget/index.tsx index f812914118..ae7419e4ae 100644 --- a/app/client/src/widgets/InputWidgetV2/widget/index.tsx +++ b/app/client/src/widgets/InputWidgetV2/widget/index.tsx @@ -14,10 +14,7 @@ import { INPUT_TEXT_MAX_CHAR_ERROR, } from "@appsmith/constants/messages"; import type { DerivedPropertiesMap } from "WidgetProvider/factory"; -import { - GRID_DENSITY_MIGRATION_V1, - ICON_NAMES, -} from "WidgetProvider/constants"; +import { ICON_NAMES } from "WidgetProvider/constants"; import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType"; import BaseInputWidget from "widgets/BaseInputWidget"; import { isNil, isNumber, merge, toString } from "lodash"; @@ -33,6 +30,7 @@ import { getParsedText, isInputTypeEmailOrPassword } from "./Utilities"; import { isAutoHeightEnabledForWidget, DefaultAutocompleteDefinitions, + isCompactMode, } from "widgets/WidgetUtils"; import { checkInputTypeTextByProps } from "widgets/BaseInputWidget/utils"; import type { AutocompletionDefinitions } from "WidgetProvider/constants"; @@ -798,11 +796,15 @@ class InputWidget extends BaseInputWidget { } else { conditionalProps.buttonPosition = NumberInputStepButtonPosition.NONE; } + + const { componentHeight } = this.props; + const autoFillProps = !this.props.shouldAllowAutofill && isInputTypeEmailOrPassword(this.props.inputType) ? { autoComplete: "off" } : {}; + return ( { autoFocus={this.props.autoFocus} borderRadius={this.props.borderRadius} boxShadow={this.props.boxShadow} - compactMode={ - !( - (this.props.bottomRow - this.props.topRow) / - GRID_DENSITY_MIGRATION_V1 > - 1 - ) - } + compactMode={isCompactMode(componentHeight)} defaultValue={this.props.defaultText} disableNewLineOnPressEnterKey={!!this.props.onSubmit} disabled={this.props.isDisabled} @@ -833,7 +829,7 @@ class InputWidget extends BaseInputWidget { labelStyle={this.props.labelStyle} labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} - labelWidth={this.getLabelWidth()} + labelWidth={this.props.labelComponentWidth} multiline={this.props.inputType === InputTypes.MULTI_LINE_TEXT} onFocusChange={this.handleFocusChange} onKeyDown={this.handleKeyDown} diff --git a/app/client/src/widgets/MenuButtonWidget/widget/index.tsx b/app/client/src/widgets/MenuButtonWidget/widget/index.tsx index d79b60c194..c90583ddaf 100644 --- a/app/client/src/widgets/MenuButtonWidget/widget/index.tsx +++ b/app/client/src/widgets/MenuButtonWidget/widget/index.tsx @@ -5,7 +5,7 @@ import { isArray, orderBy } from "lodash"; import { default as React } from "react"; import type { WidgetState } from "widgets/BaseWidget"; import BaseWidget from "widgets/BaseWidget"; -import { MinimumPopupRows } from "WidgetProvider/constants"; +import { MinimumPopupWidthInPercentage } from "WidgetProvider/constants"; import MenuButtonComponent from "../component"; import type { MenuButtonWidgetProps, MenuItem } from "../constants"; import { MenuItemsSource } from "../constants"; @@ -15,7 +15,7 @@ import { DefaultAutocompleteDefinitions } from "widgets/WidgetUtils"; import type { AutocompletionDefinitions } from "WidgetProvider/constants"; import IconSVG from "../icon.svg"; import { ButtonPlacementTypes, ButtonVariantTypes } from "components/constants"; -import { WIDGET_TAGS } from "constants/WidgetConstants"; +import { WIDGET_TAGS, layoutConfigurations } from "constants/WidgetConstants"; class MenuButtonWidget extends BaseWidget { static type = "MENU_BUTTON_WIDGET"; @@ -215,7 +215,9 @@ class MenuButtonWidget extends BaseWidget { getWidgetView() { const { componentWidth } = this.props; - const menuDropDownWidth = MinimumPopupRows * this.props.parentColumnSpace; + const menuDropDownWidth = + (MinimumPopupWidthInPercentage / 100) * + (this.props.mainCanvasWidth ?? layoutConfigurations.MOBILE.maxWidth); return ( - 1 - ) - } + compactMode={isCompactMode(componentHeight)} disabled={this.props.isDisabled ?? false} dropDownWidth={dropDownWidth} dropdownStyle={{ @@ -717,7 +712,7 @@ class MultiSelectTreeWidget extends BaseWidget< labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} labelTooltip={this.props.labelTooltip} - labelWidth={this.getLabelWidth()} + labelWidth={this.props.labelComponentWidth} loading={this.props.isLoading} mode={this.props.mode} onChange={this.onOptionChange} @@ -810,6 +805,7 @@ export interface MultiSelectTreeWidgetProps extends WidgetProps { boxShadow?: string; accentColor: string; isDirty: boolean; + labelComponentWidth?: number; } export default MultiSelectTreeWidget; diff --git a/app/client/src/widgets/MultiSelectWidget/widget/index.tsx b/app/client/src/widgets/MultiSelectWidget/widget/index.tsx index 8304bc0d98..25d2d191c0 100644 --- a/app/client/src/widgets/MultiSelectWidget/widget/index.tsx +++ b/app/client/src/widgets/MultiSelectWidget/widget/index.tsx @@ -13,16 +13,17 @@ import type { SetterConfig, Stylesheet } from "entities/AppTheming"; import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory"; import type { DraftValueType } from "rc-select/lib/Select"; import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType"; -import { - GRID_DENSITY_MIGRATION_V1, - MinimumPopupRows, -} from "WidgetProvider/constants"; +import { MinimumPopupWidthInPercentage } from "WidgetProvider/constants"; import MultiSelectComponent from "../component"; -import { DefaultAutocompleteDefinitions } from "widgets/WidgetUtils"; +import { + DefaultAutocompleteDefinitions, + isCompactMode, +} from "widgets/WidgetUtils"; import type { AutocompletionDefinitions } from "WidgetProvider/constants"; import { ResponsiveBehavior } from "layoutSystems/autolayout/utils/constants"; import IconSVG from "../icon.svg"; import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants"; +import { layoutConfigurations } from "constants/WidgetConstants"; function defaultOptionValueValidation(value: unknown): ValidationResponse { let values: string[] = []; @@ -520,8 +521,10 @@ class MultiSelectWidget extends BaseWidget< const values: string[] = isArray(this.props.selectedOptionValues) ? this.props.selectedOptionValues : []; - const dropDownWidth = MinimumPopupRows * this.props.parentColumnSpace; - const { componentWidth } = this.props; + const dropDownWidth = + (MinimumPopupWidthInPercentage / 100) * + (this.props.mainCanvasWidth ?? layoutConfigurations.MOBILE.maxWidth); + const { componentHeight, componentWidth } = this.props; return ( - 1 - ) - } + compactMode={isCompactMode(componentHeight)} disabled={this.props.isDisabled ?? false} dropDownWidth={dropDownWidth} dropdownStyle={{ @@ -548,7 +545,7 @@ class MultiSelectWidget extends BaseWidget< labelText={this.props.labelText} labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} - labelWidth={this.getLabelWidth()} + labelWidth={this.props.labelComponentWidth} loading={this.props.isLoading} onChange={this.onOptionChange} onFilterChange={this.onFilterChange} @@ -622,6 +619,7 @@ export interface MultiSelectWidgetProps extends WidgetProps { labelPosition?: LabelPosition; labelAlignment?: Alignment; labelWidth?: number; + labelComponentWidth?: number; } export default MultiSelectWidget; diff --git a/app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx b/app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx index 62e042a1b6..98be9d23fb 100644 --- a/app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx +++ b/app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx @@ -13,13 +13,11 @@ import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType"; import { isAutoLayout } from "layoutSystems/autolayout/utils/flexWidgetUtils"; import type { WidgetProps, WidgetState } from "widgets/BaseWidget"; import BaseWidget from "widgets/BaseWidget"; -import { - GRID_DENSITY_MIGRATION_V1, - MinimumPopupRows, -} from "WidgetProvider/constants"; +import { MinimumPopupWidthInPercentage } from "WidgetProvider/constants"; import { isAutoHeightEnabledForWidget, DefaultAutocompleteDefinitions, + isCompactMode, } from "widgets/WidgetUtils"; import MultiSelectComponent from "../component"; import derivedProperties from "./parseDerivedProperties"; @@ -45,7 +43,7 @@ import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants"; import { ResponsiveBehavior } from "layoutSystems/autolayout/utils/constants"; import { DynamicHeight } from "utils/WidgetFeatures"; import IconSVG from "../icon.svg"; -import { WIDGET_TAGS } from "constants/WidgetConstants"; +import { WIDGET_TAGS, layoutConfigurations } from "constants/WidgetConstants"; class MultiSelectWidget extends BaseWidget< MultiSelectWidgetProps, @@ -781,24 +779,21 @@ class MultiSelectWidget extends BaseWidget< getWidgetView() { const options = isArray(this.props.options) ? this.props.options : []; - const minDropDownWidth = MinimumPopupRows * this.props.parentColumnSpace; - const { componentWidth } = this.props; + const minDropDownWidth = + (MinimumPopupWidthInPercentage / 100) * + (this.props.mainCanvasWidth ?? layoutConfigurations.MOBILE.maxWidth); + const { componentHeight, componentWidth } = this.props; const values = this.mergeLabelAndValue(); const isInvalid = "isValid" in this.props && !this.props.isValid && !!this.props.isDirty; + return ( - 1 - ) - } + compactMode={isCompactMode(componentHeight)} disabled={this.props.isDisabled ?? false} dropDownWidth={minDropDownWidth} dropdownStyle={{ @@ -815,7 +810,7 @@ class MultiSelectWidget extends BaseWidget< labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} labelTooltip={this.props.labelTooltip} - labelWidth={this.getLabelWidth()} + labelWidth={this.props.labelComponentWidth} loading={this.props.isLoading} onChange={this.onOptionChange} onDropdownClose={this.onDropdownClose} @@ -930,6 +925,7 @@ export interface MultiSelectWidgetProps extends WidgetProps { labelAlignment?: Alignment; labelWidth?: number; isDirty?: boolean; + labelComponentWidth?: number; } export default MultiSelectWidget; diff --git a/app/client/src/widgets/NumberSliderWidget/component/Slider.tsx b/app/client/src/widgets/NumberSliderWidget/component/Slider.tsx index bba6a68dfb..76279b76b9 100644 --- a/app/client/src/widgets/NumberSliderWidget/component/Slider.tsx +++ b/app/client/src/widgets/NumberSliderWidget/component/Slider.tsx @@ -82,6 +82,9 @@ export interface SliderComponentProps /** determines whether to display mark labels or only marks */ showMarksLabel: boolean; + + /** Width of the Label in pixels, used only when Position is Left */ + labelComponentWidth?: number; } const SliderComponent = (props: SliderComponentProps) => { diff --git a/app/client/src/widgets/NumberSliderWidget/widget/index.tsx b/app/client/src/widgets/NumberSliderWidget/widget/index.tsx index 0586e3f001..3f8147249b 100644 --- a/app/client/src/widgets/NumberSliderWidget/widget/index.tsx +++ b/app/client/src/widgets/NumberSliderWidget/widget/index.tsx @@ -221,7 +221,7 @@ class NumberSliderWidget extends BaseWidget< labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} labelTooltip={this.props.labelTooltip} - labelWidth={this.getLabelWidth()} + labelWidth={this.props.labelComponentWidth} loading={this.props.isLoading} // If showMarks is off don't show marks at all marks={this.props.showMarksLabel ? this.props.marks : []} diff --git a/app/client/src/widgets/PhoneInputWidget/widget/index.tsx b/app/client/src/widgets/PhoneInputWidget/widget/index.tsx index bd9e019e53..b10d346190 100644 --- a/app/client/src/widgets/PhoneInputWidget/widget/index.tsx +++ b/app/client/src/widgets/PhoneInputWidget/widget/index.tsx @@ -24,11 +24,11 @@ import type { CountryCode } from "libphonenumber-js"; import { AsYouType, parseIncompletePhoneNumber } from "libphonenumber-js"; import * as Sentry from "@sentry/react"; import log from "loglevel"; -import { GRID_DENSITY_MIGRATION_V1 } from "WidgetProvider/constants"; import type { SetterConfig, Stylesheet } from "entities/AppTheming"; import { isAutoHeightEnabledForWidget, DefaultAutocompleteDefinitions, + isCompactMode, } from "widgets/WidgetUtils"; import type { AutocompletionDefinitions } from "WidgetProvider/constants"; import { LabelPosition } from "components/constants"; @@ -462,6 +462,7 @@ class PhoneInputWidget extends BaseInputWidget< if (this.props.isRequired && value.length === 0) { conditionalProps.errorMessage = createMessage(FIELD_REQUIRED_ERROR); } + const { componentHeight } = this.props; return ( - 1 - ) - } + compactMode={isCompactMode(componentHeight)} countryCode={countryCode} defaultValue={this.props.defaultText} dialCode={this.props.dialCode} @@ -494,7 +489,7 @@ class PhoneInputWidget extends BaseInputWidget< labelStyle={this.props.labelStyle} labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} - labelWidth={this.getLabelWidth()} + labelWidth={this.props.labelComponentWidth} onFocusChange={this.handleFocusChange} onISDCodeChange={this.onISDCodeChange} onKeyDown={this.handleKeyDown} diff --git a/app/client/src/widgets/QRGeneratorWidget/component/index.tsx b/app/client/src/widgets/QRGeneratorWidget/component/index.tsx index 71ad09cde8..5db43f745e 100644 --- a/app/client/src/widgets/QRGeneratorWidget/component/index.tsx +++ b/app/client/src/widgets/QRGeneratorWidget/component/index.tsx @@ -25,11 +25,6 @@ export interface TextComponentProps extends ComponentProps { borderColor?: Color; borderWidth?: number; overflow: OverflowTypes; - // helpers to detect and re-calculate content width - bottomRow?: number; - leftColumn?: number; - rightColumn?: number; - topRow?: number; } type State = { diff --git a/app/client/src/widgets/QRGeneratorWidget/widget/index.tsx b/app/client/src/widgets/QRGeneratorWidget/widget/index.tsx index 2895e42da4..c4a760369f 100644 --- a/app/client/src/widgets/QRGeneratorWidget/widget/index.tsx +++ b/app/client/src/widgets/QRGeneratorWidget/widget/index.tsx @@ -659,20 +659,16 @@ class TextWidget extends BaseWidget { > diff --git a/app/client/src/widgets/RadioGroupWidget/widget/index.tsx b/app/client/src/widgets/RadioGroupWidget/widget/index.tsx index a2679975ee..1992432625 100644 --- a/app/client/src/widgets/RadioGroupWidget/widget/index.tsx +++ b/app/client/src/widgets/RadioGroupWidget/widget/index.tsx @@ -10,10 +10,10 @@ import { ValidationTypes } from "constants/WidgetValidation"; import type { SetterConfig, Stylesheet } from "entities/AppTheming"; import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory"; import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType"; -import { GRID_DENSITY_MIGRATION_V1 } from "WidgetProvider/constants"; import { isAutoHeightEnabledForWidget, DefaultAutocompleteDefinitions, + isCompactMode, } from "widgets/WidgetUtils"; import type { WidgetProps, WidgetState } from "../../BaseWidget"; import BaseWidget from "../../BaseWidget"; @@ -690,7 +690,6 @@ class RadioGroupWidget extends BaseWidget { getWidgetView() { const { alignment, - bottomRow, isDisabled, isInline, isLoading, @@ -702,7 +701,6 @@ class RadioGroupWidget extends BaseWidget { labelTextSize, options, selectedOptionValue, - topRow, widgetId, } = this.props; @@ -712,7 +710,7 @@ class RadioGroupWidget extends BaseWidget { 1)} + compactMode={isCompactMode(componentHeight)} disabled={isDisabled} height={componentHeight} inline={Boolean(isInline)} @@ -725,7 +723,7 @@ class RadioGroupWidget extends BaseWidget { labelTextColor={labelTextColor} labelTextSize={labelTextSize} labelTooltip={this.props.labelTooltip} - labelWidth={this.getLabelWidth()} + labelWidth={this.props.labelComponentWidth} loading={isLoading} onRadioSelectionChange={this.onRadioSelectionChange} options={isArray(options) ? compact(options) : []} @@ -776,6 +774,7 @@ export interface RadioGroupWidgetProps extends WidgetProps { labelStyle?: string; isDirty: boolean; accentColor: string; + labelComponentWidth?: number; } export default RadioGroupWidget; diff --git a/app/client/src/widgets/RangeSliderWidget/component/RangeSlider.tsx b/app/client/src/widgets/RangeSliderWidget/component/RangeSlider.tsx index e84134ac65..1191c50882 100644 --- a/app/client/src/widgets/RangeSliderWidget/component/RangeSlider.tsx +++ b/app/client/src/widgets/RangeSliderWidget/component/RangeSlider.tsx @@ -96,6 +96,9 @@ export interface RangeSliderComponentProps /** Loading property internal to every widget */ loading: boolean; + + /** Width of the Label in pixels, used only when Position is Left */ + labelComponentWidth?: number; } const RangeSliderComponent = (props: RangeSliderComponentProps) => { diff --git a/app/client/src/widgets/RangeSliderWidget/widget/index.tsx b/app/client/src/widgets/RangeSliderWidget/widget/index.tsx index c1fddaff72..d5c9ab5b3b 100644 --- a/app/client/src/widgets/RangeSliderWidget/widget/index.tsx +++ b/app/client/src/widgets/RangeSliderWidget/widget/index.tsx @@ -248,7 +248,7 @@ class RangeSliderWidget extends BaseWidget< labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} labelTooltip={this.props.labelTooltip} - labelWidth={this.getLabelWidth()} + labelWidth={this.props.labelComponentWidth} // If showMarks is off don't show marks at all loading={this.props.isLoading} marks={this.props.showMarksLabel ? this.props.marks : []} diff --git a/app/client/src/widgets/RateWidget/component/index.tsx b/app/client/src/widgets/RateWidget/component/index.tsx index 3e32dfd473..465216750c 100644 --- a/app/client/src/widgets/RateWidget/component/index.tsx +++ b/app/client/src/widgets/RateWidget/component/index.tsx @@ -81,10 +81,6 @@ export interface RateComponentProps extends ComponentProps { inactiveColor?: string; isAllowHalf?: boolean; readonly?: boolean; - leftColumn?: number; - rightColumn?: number; - topRow?: number; - bottomRow?: number; minHeight?: number; } diff --git a/app/client/src/widgets/RateWidget/widget/index.tsx b/app/client/src/widgets/RateWidget/widget/index.tsx index 186484cbf0..4bb824dca7 100644 --- a/app/client/src/widgets/RateWidget/widget/index.tsx +++ b/app/client/src/widgets/RateWidget/widget/index.tsx @@ -445,21 +445,17 @@ class RateWidget extends BaseWidget { (this.props.rate || this.props.rate === 0) && ( diff --git a/app/client/src/widgets/RichTextEditorWidget/widget/index.tsx b/app/client/src/widgets/RichTextEditorWidget/widget/index.tsx index 65d7424ac2..a84e693024 100644 --- a/app/client/src/widgets/RichTextEditorWidget/widget/index.tsx +++ b/app/client/src/widgets/RichTextEditorWidget/widget/index.tsx @@ -8,10 +8,10 @@ import React, { lazy, Suspense } from "react"; import showdown from "showdown"; import { retryPromise } from "utils/AppsmithUtils"; import type { DerivedPropertiesMap } from "WidgetProvider/factory"; -import { GRID_DENSITY_MIGRATION_V1 } from "WidgetProvider/constants"; import { isAutoHeightEnabledForWidget, DefaultAutocompleteDefinitions, + isCompactMode, } from "widgets/WidgetUtils"; import type { WidgetProps, WidgetState } from "../../BaseWidget"; import BaseWidget from "../../BaseWidget"; @@ -510,19 +510,14 @@ class RichTextEditorWidget extends BaseWidget< if (this.props.inputType === RTEFormats.MARKDOWN) { value = converter.makeHtml(value); } + const { componentHeight } = this.props; return ( }> - 1 - ) - } + compactMode={isCompactMode(componentHeight)} isDisabled={this.props.isDisabled} isDynamicHeightEnabled={isAutoHeightEnabledForWidget(this.props)} isMarkdown={this.props.inputType === RTEFormats.MARKDOWN} @@ -537,7 +532,7 @@ class RichTextEditorWidget extends BaseWidget< labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} labelTooltip={this.props.labelTooltip} - labelWidth={this.getLabelWidth()} + labelWidth={this.props.labelComponentWidth} onValueChange={this.onValueChange} placeholder={this.props.placeholder} value={value} @@ -568,6 +563,7 @@ export interface RichTextEditorWidgetProps extends WidgetProps { labelTextSize?: TextSize; labelStyle?: string; isDirty: boolean; + labelComponentWidth?: number; } export default RichTextEditorWidget; diff --git a/app/client/src/widgets/SelectWidget/widget/index.tsx b/app/client/src/widgets/SelectWidget/widget/index.tsx index aac32d2371..2c30ad6267 100644 --- a/app/client/src/widgets/SelectWidget/widget/index.tsx +++ b/app/client/src/widgets/SelectWidget/widget/index.tsx @@ -9,13 +9,11 @@ import { findIndex, isArray, isNil, isNumber, isString } from "lodash"; import React from "react"; import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType"; import { isAutoLayout } from "layoutSystems/autolayout/utils/flexWidgetUtils"; -import { - GRID_DENSITY_MIGRATION_V1, - MinimumPopupRows, -} from "WidgetProvider/constants"; +import { MinimumPopupWidthInPercentage } from "WidgetProvider/constants"; import { isAutoHeightEnabledForWidget, DefaultAutocompleteDefinitions, + isCompactMode, } from "widgets/WidgetUtils"; import type { WidgetProps, WidgetState } from "../../BaseWidget"; import BaseWidget from "../../BaseWidget"; @@ -43,7 +41,7 @@ import type { WidgetQueryGenerationFormConfig, } from "WidgetQueryGenerators/types"; import { DynamicHeight } from "utils/WidgetFeatures"; -import { WIDGET_TAGS } from "constants/WidgetConstants"; +import { WIDGET_TAGS, layoutConfigurations } from "constants/WidgetConstants"; import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants"; import { ResponsiveBehavior } from "layoutSystems/autolayout/utils/constants"; import type { @@ -772,7 +770,9 @@ class SelectWidget extends BaseWidget { const options = isArray(this.props.options) ? this.props.options : []; const isInvalid = "isValid" in this.props && !this.props.isValid && !!this.props.isDirty; - const dropDownWidth = MinimumPopupRows * this.props.parentColumnSpace; + const dropDownWidth = + (MinimumPopupWidthInPercentage / 100) * + (this.props.mainCanvasWidth ?? layoutConfigurations.MOBILE.maxWidth); const selectedIndex = findIndex(this.props.options, { value: this.props.selectedOptionValue, @@ -783,13 +783,7 @@ class SelectWidget extends BaseWidget { accentColor={this.props.accentColor} borderRadius={this.props.borderRadius} boxShadow={this.props.boxShadow} - compactMode={ - !( - (this.props.bottomRow - this.props.topRow) / - GRID_DENSITY_MIGRATION_V1 > - 1 - ) - } + compactMode={isCompactMode(componentHeight)} disabled={this.props.isDisabled} dropDownWidth={dropDownWidth} filterText={this.props.filterText} @@ -807,7 +801,7 @@ class SelectWidget extends BaseWidget { labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} labelTooltip={this.props.labelTooltip} - labelWidth={this.getLabelWidth()} + labelWidth={this.props.labelComponentWidth} onDropdownClose={this.onDropdownClose} onDropdownOpen={this.onDropdownOpen} onFilterChange={this.onFilterChange} @@ -914,6 +908,7 @@ export interface SelectWidgetProps extends WidgetProps { onFilterUpdate: string; isDirty?: boolean; filterText: string; + labelComponentWidth?: number; } export default SelectWidget; diff --git a/app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx b/app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx index 5949c6d329..9660ad543d 100644 --- a/app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx +++ b/app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx @@ -15,13 +15,11 @@ import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType"; import type { WidgetProps, WidgetState } from "widgets/BaseWidget"; import BaseWidget from "widgets/BaseWidget"; import { isAutoLayout } from "layoutSystems/autolayout/utils/flexWidgetUtils"; -import { - GRID_DENSITY_MIGRATION_V1, - MinimumPopupRows, -} from "WidgetProvider/constants"; +import { MinimumPopupWidthInPercentage } from "WidgetProvider/constants"; import { isAutoHeightEnabledForWidget, DefaultAutocompleteDefinitions, + isCompactMode, } from "widgets/WidgetUtils"; import SingleSelectTreeComponent from "../component"; import derivedProperties from "./parseDerivedProperties"; @@ -31,7 +29,7 @@ import { ResponsiveBehavior } from "layoutSystems/autolayout/utils/constants"; import { DynamicHeight } from "utils/WidgetFeatures"; import IconSVG from "../icon.svg"; -import { WIDGET_TAGS } from "constants/WidgetConstants"; +import { WIDGET_TAGS, layoutConfigurations } from "constants/WidgetConstants"; function defaultOptionValueValidation(value: unknown): ValidationResponse { if (typeof value === "string") return { isValid: true, parsed: value.trim() }; @@ -647,21 +645,18 @@ class SingleSelectTreeWidget extends BaseWidget< const options = isArray(this.props.options) ? this.props.options : []; const isInvalid = "isValid" in this.props && !this.props.isValid && !!this.props.isDirty; - const dropDownWidth = MinimumPopupRows * this.props.parentColumnSpace; - const { componentWidth } = this.props; + const dropDownWidth = + (MinimumPopupWidthInPercentage / 100) * + (this.props.mainCanvasWidth ?? layoutConfigurations.MOBILE.maxWidth); + const { componentHeight, componentWidth } = this.props; + return ( - 1 - ) - } + compactMode={isCompactMode(componentHeight)} disabled={this.props.isDisabled ?? false} dropDownWidth={dropDownWidth} dropdownStyle={{ @@ -678,7 +673,7 @@ class SingleSelectTreeWidget extends BaseWidget< labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} labelTooltip={this.props.labelTooltip} - labelWidth={this.getLabelWidth()} + labelWidth={this.props.labelComponentWidth} loading={this.props.isLoading} onChange={this.onOptionChange} onDropdownClose={this.onDropdownClose} @@ -773,6 +768,7 @@ export interface SingleSelectTreeWidgetProps extends WidgetProps { boxShadow?: string; accentColor: string; isDirty?: boolean; + labelComponentWidth?: number; } export default SingleSelectTreeWidget; diff --git a/app/client/src/widgets/SwitchGroupWidget/widget/index.tsx b/app/client/src/widgets/SwitchGroupWidget/widget/index.tsx index c6515682d0..4372e14392 100644 --- a/app/client/src/widgets/SwitchGroupWidget/widget/index.tsx +++ b/app/client/src/widgets/SwitchGroupWidget/widget/index.tsx @@ -11,8 +11,10 @@ import BaseWidget from "widgets/BaseWidget"; import { LabelPosition } from "components/constants"; import type { TextSize } from "constants/WidgetConstants"; import type { SetterConfig, Stylesheet } from "entities/AppTheming"; -import { GRID_DENSITY_MIGRATION_V1 } from "WidgetProvider/constants"; -import { isAutoHeightEnabledForWidget } from "widgets/WidgetUtils"; +import { + isAutoHeightEnabledForWidget, + isCompactMode, +} from "widgets/WidgetUtils"; import type { OptionProps } from "../component"; import SwitchGroupComponent from "../component"; import { isAutoLayout } from "layoutSystems/autolayout/utils/flexWidgetUtils"; @@ -533,7 +535,6 @@ class SwitchGroupWidget extends BaseWidget< const { accentColor, alignment, - bottomRow, isDisabled, isInline, isRequired, @@ -547,7 +548,6 @@ class SwitchGroupWidget extends BaseWidget< labelTooltip, options, selectedValues, - topRow, widgetId, } = this.props; @@ -566,7 +566,7 @@ class SwitchGroupWidget extends BaseWidget< 1)} + compactMode={isCompactMode(componentHeight)} disabled={isDisabled} height={componentHeight} inline={isInline} @@ -578,7 +578,7 @@ class SwitchGroupWidget extends BaseWidget< labelTextColor={labelTextColor} labelTextSize={labelTextSize} labelTooltip={labelTooltip} - labelWidth={this.getLabelWidth()} + labelWidth={this.props.labelComponentWidth} onChange={this.handleSwitchStateChange} options={_options} required={isRequired} @@ -638,6 +638,7 @@ export interface SwitchGroupWidgetProps extends WidgetProps { labelStyle?: string; onSelectionChange?: string; accentColor: string; + labelComponentWidth?: number; } export default SwitchGroupWidget; diff --git a/app/client/src/widgets/TabsWidget/widget/index.tsx b/app/client/src/widgets/TabsWidget/widget/index.tsx index e5024996c9..40c128b61a 100644 --- a/app/client/src/widgets/TabsWidget/widget/index.tsx +++ b/app/client/src/widgets/TabsWidget/widget/index.tsx @@ -521,17 +521,16 @@ class TabsWidget extends BaseWidget< } getWidgetView() { - const { leftColumn, parentColumnSpace, rightColumn } = this.props; - + const { componentWidth } = this.props; const tabsComponentProps = { ...this.props, tabs: this.getVisibleTabs(), - width: - (rightColumn - leftColumn) * parentColumnSpace - WIDGET_PADDING * 2, + width: componentWidth - WIDGET_PADDING * 2, }; const isAutoHeightEnabled: boolean = isAutoHeightEnabledForWidget(this.props) && !isAutoHeightEnabledForWidgetWithLimits(this.props); + return ( { { return null; }; +export function isCompactMode(componentHeight: number) { + return ( + componentHeight < + COMPACT_MODE_MIN_ROWS * GridDefaults.DEFAULT_GRID_ROW_HEIGHT + ); +} + export const checkForOnClick = (e: React.MouseEvent) => { let target = e.target as HTMLElement | null; const currentTarget = e.currentTarget as HTMLElement; diff --git a/app/client/src/widgets/withWidgetProps.tsx b/app/client/src/widgets/withWidgetProps.tsx index 392a113dc8..5b6fe9e4e5 100644 --- a/app/client/src/widgets/withWidgetProps.tsx +++ b/app/client/src/widgets/withWidgetProps.tsx @@ -244,7 +244,7 @@ function withWidgetProps(WrappedWidget: typeof BaseWidget) { renderMode === RenderModes.CANVAS && !isPreviewMode; - widgetProps.maincanvasWidth = mainCanvasWidth; + widgetProps.mainCanvasWidth = mainCanvasWidth; // We don't render invisible widgets in view mode if (shouldCollapseWidgetInViewOrPreviewMode) {