refactor: Refactor Auto Layout min/max dimension for widgets (appsmit…

…horg#24627) AutoLayout specific widget logic such as setting min/max dimension is set by making use of a global class .auto-layout that is set in the main canvas. This leaks the idea of platform specific construct "auto-layout" into widget component. This PR resolves that by making use of necessary props to the widget component
xethanx · Jul 4, 2023 · 6b8e61d · 6b8e61d
1 parent 40543ca
commit 6b8e61d
Show file tree

Hide file tree

Showing 32 changed files with 228 additions and 50 deletions.
diff --git a/app/client/src/widgets/BaseWidget.tsx b/app/client/src/widgets/BaseWidget.tsx
@@ -39,7 +39,7 @@ import type {
   ModifyMetaWidgetPayload,
   UpdateMetaWidgetPropertyPayload,
 } from "reducers/entityReducers/metaWidgetsReducer";
-import type { AppPositioningTypes } from "reducers/entityReducers/pageListReducer";
+import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer";
 import type { SelectionRequestType } from "sagas/WidgetSelectUtils";
 import shallowequal from "shallowequal";
 import type { CSSProperties } from "styled-components";
@@ -508,6 +508,10 @@ abstract class BaseWidget<
     );
   }
 
+  get isAutoLayoutMode() {
+    return this.props.appPositioningType === AppPositioningTypes.AUTO;
+  }
+
   addErrorBoundary(content: ReactNode) {
     return <ErrorBoundary>{content}</ErrorBoundary>;
   }

diff --git a/app/client/src/widgets/ButtonGroupWidget/component/index.tsx b/app/client/src/widgets/ButtonGroupWidget/component/index.tsx
@@ -155,6 +155,8 @@ interface ButtonStyleProps {
   iconAlign?: string;
   placement?: ButtonPlacement;
   isLabel: boolean;
+  minWidth?: number;
+  minHeight?: number;
 }
 
 /*
@@ -183,10 +185,10 @@ const StyledButton = styled.button<ThemeProp & ButtonStyleProps>`
   align-items: center;
   padding: 0px 10px;
 
-  .auto-layout & {
-    min-height: 32px;
-    min-width: 120px;
-  }
+  ${({ minHeight, minWidth }) => `
+    ${minWidth ? `min-width: ${minWidth}px;` : ""}
+    ${minHeight ? `min-height: ${minHeight}px;` : ""}
+  `};
 
   &:hover,
   &:active,
@@ -611,6 +613,8 @@ class ButtonGroupComponent extends React.Component<
                       isHorizontal={isHorizontal}
                       isLabel={!!button.label}
                       key={button.id}
+                      minHeight={this.props.minHeight}
+                      minWidth={this.props.buttonMinWidth}
                       ref={this.state.itemRefs[button.id]}
                     >
                       <StyledButtonContent
@@ -655,6 +659,8 @@ class ButtonGroupComponent extends React.Component<
                 iconAlign={button.iconAlign}
                 isHorizontal={isHorizontal}
                 isLabel={!!button.label}
+                minHeight={this.props.minHeight}
+                minWidth={this.props.buttonMinWidth}
                 onClick={getOnClick(button)}
               >
                 <StyledButtonContent
@@ -730,6 +736,8 @@ export interface ButtonGroupComponentProps {
   width: number;
   minPopoverWidth: number;
   widgetId: string;
+  buttonMinWidth?: number;
+  minHeight?: number;
 }
 
 export interface ButtonGroupComponentState {

diff --git a/app/client/src/widgets/ButtonGroupWidget/index.ts b/app/client/src/widgets/ButtonGroupWidget/index.ts
@@ -159,6 +159,7 @@ export const CONFIG = {
           }
           return {
             minWidth: `${minWidth}px`,
+            minHeight: "40px",
           };
         },
       },

diff --git a/app/client/src/widgets/ButtonGroupWidget/widget/index.tsx b/app/client/src/widgets/ButtonGroupWidget/widget/index.tsx
@@ -586,9 +586,11 @@ class ButtonGroupWidget extends BaseWidget<
         borderRadius={this.props.borderRadius}
         boxShadow={this.props.boxShadow}
         buttonClickHandler={this.handleClick}
+        buttonMinWidth={this.isAutoLayoutMode ? 120 : undefined}
         buttonVariant={this.props.buttonVariant}
         groupButtons={this.props.groupButtons}
         isDisabled={this.props.isDisabled}
+        minHeight={this.isAutoLayoutMode ? this.props.minHeight : undefined}
         minPopoverWidth={minPopoverWidth}
         orientation={this.props.orientation}
         renderMode={this.props.renderMode}

diff --git a/app/client/src/widgets/ButtonWidget/component/DragContainer.tsx b/app/client/src/widgets/ButtonWidget/component/DragContainer.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import type { ButtonVariant } from "components/constants";
 import type { RenderMode } from "constants/WidgetConstants";
 import { RenderModes } from "constants/WidgetConstants";
@@ -33,6 +33,10 @@ export type ButtonContainerProps = {
   buttonColor?: string;
   buttonVariant?: ButtonVariant;
   disabled?: boolean;
+  shouldFitContent?: boolean;
+  maxWidth?: number;
+  minWidth?: number;
+  minHeight?: number;
   loading?: boolean;
   style?: React.CSSProperties;
 };
@@ -46,13 +50,17 @@ const ButtonContainer = styled.div<ButtonContainerProps>`
     height: 100%;
   }
 
-  .auto-layout & > .bp3-button.bp3-fill {
-    display: flex;
-    width: auto;
-    max-width: 352px;
-    min-width: 112px;
-    min-height: 32px;
-  }
+  ${({ maxWidth, minHeight, minWidth, shouldFitContent }) =>
+    shouldFitContent &&
+    css`
+      .bp3-button.bp3-fill {
+        display: flex;
+        width: auto;
+        ${minWidth ? `min-width: ${minWidth}px;` : ""}
+        ${minHeight ? `min-height: ${minHeight}px;` : ""}
+        ${maxWidth ? `max-width: ${maxWidth}px;` : ""}
+      }
+    `}
 
   position: relative;
   &:after {
@@ -88,7 +96,11 @@ export function DragContainer(props: DragContainerProps) {
         buttonVariant={props.buttonVariant}
         disabled={props.disabled}
         loading={props.loading}
+        maxWidth={props.maxWidth}
+        minHeight={props.minHeight}
+        minWidth={props.minWidth}
         onClick={hasOnClick ? props.onClick : undefined}
+        shouldFitContent={props.shouldFitContent}
         style={props.style}
       >
         {props.children}

diff --git a/app/client/src/widgets/ButtonWidget/component/index.tsx b/app/client/src/widgets/ButtonWidget/component/index.tsx
@@ -168,7 +168,11 @@ export type ButtonStyleProps = {
   borderRadius?: string;
   iconName?: IconName;
   iconAlign?: Alignment;
+  shouldFitContent?: boolean;
   placement?: ButtonPlacement;
+  maxWidth?: number;
+  minWidth?: number;
+  minHeight?: number;
 };
 
 // To be used in any other part of the app
@@ -185,6 +189,9 @@ export function BaseButton(props: IButtonProps & ButtonStyleProps) {
     iconAlign,
     iconName,
     loading,
+    maxWidth,
+    minHeight,
+    minWidth,
     onClick,
     placement,
     rightIcon,
@@ -199,7 +206,11 @@ export function BaseButton(props: IButtonProps & ButtonStyleProps) {
       buttonVariant={buttonVariant}
       disabled={disabled}
       loading={loading}
+      maxWidth={maxWidth}
+      minHeight={minHeight}
+      minWidth={minWidth}
       onClick={onClick}
+      shouldFitContent={props.shouldFitContent}
       showInAllModes
     >
       <StyledButton
@@ -252,6 +263,7 @@ interface ButtonComponentProps extends ComponentProps {
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
   isDisabled?: boolean;
   isLoading: boolean;
+  shouldFitContent: boolean;
   rightIcon?: IconName | MaybeElement;
   type: ButtonType;
   buttonColor?: string;
@@ -263,6 +275,9 @@ interface ButtonComponentProps extends ComponentProps {
   iconAlign?: Alignment;
   placement?: ButtonPlacement;
   className?: string;
+  minWidth?: number;
+  minHeight?: number;
+  maxWidth?: number;
 }
 
 type RecaptchaV2ComponentPropType = {
@@ -450,8 +465,12 @@ function ButtonComponent(props: ButtonComponentProps & RecaptchaProps) {
         iconAlign={props.iconAlign}
         iconName={props.iconName}
         loading={props.isLoading}
+        maxWidth={props.maxWidth}
+        minHeight={props.minHeight}
+        minWidth={props.minWidth}
         placement={props.placement}
         rightIcon={props.rightIcon}
+        shouldFitContent={props.shouldFitContent}
         text={props.text}
         type={props.type}
       />

diff --git a/app/client/src/widgets/ButtonWidget/index.ts b/app/client/src/widgets/ButtonWidget/index.ts
@@ -58,6 +58,7 @@ export const CONFIG = {
           return {
             minWidth: "120px",
             maxWidth: "360px",
+            minHeight: "40px",
           };
         },
       },

diff --git a/app/client/src/widgets/ButtonWidget/widget/index.tsx b/app/client/src/widgets/ButtonWidget/widget/index.tsx
@@ -464,9 +464,13 @@ class ButtonWidget extends BaseWidget<ButtonWidgetProps, ButtonWidgetState> {
         isDisabled={isDisabled}
         isLoading={this.props.isLoading || this.state.isLoading}
         key={this.props.widgetId}
+        maxWidth={this.props.maxWidth}
+        minHeight={this.props.minHeight}
+        minWidth={this.props.minWidth}
         onClick={this.hasOnClickAction() ? this.onButtonClickBound : undefined}
         placement={this.props.placement}
         recaptchaType={this.props.recaptchaType}
+        shouldFitContent={this.isAutoLayoutMode}
         text={this.props.text}
         tooltip={this.props.tooltip}
         type={this.props.buttonType || ButtonType.BUTTON}

diff --git a/app/client/src/widgets/CheckboxGroupWidget/component/index.tsx b/app/client/src/widgets/CheckboxGroupWidget/component/index.tsx
@@ -28,6 +28,7 @@ export interface InputContainerProps {
   valid?: boolean;
   optionAlignment?: string;
   isDynamicHeightEnabled?: boolean;
+  minWidth?: number;
 }
 
 const InputContainer = styled.div<ThemeProp & InputContainerProps>`
@@ -50,9 +51,8 @@ const InputContainer = styled.div<ThemeProp & InputContainerProps>`
   height: 100%;
   border: 1px solid transparent;
 
-  .auto-layout & {
-    min-width: 232px;
-  }
+  ${({ minWidth }) => `
+    ${minWidth ? `min-width: ${minWidth}px;` : ""}`};
 
   .${Classes.CONTROL} {
     display: flex;
@@ -149,6 +149,7 @@ export interface CheckboxGroupComponentProps extends ComponentProps {
   labelTooltip?: string;
   accentColor: string;
   borderRadius: string;
+  minWidth?: number;
 }
 function CheckboxGroupComponent(props: CheckboxGroupComponentProps) {
   const {
@@ -218,6 +219,7 @@ function CheckboxGroupComponent(props: CheckboxGroupComponentProps) {
         data-testid="checkbox-group-container"
         inline={isInline}
         isDynamicHeightEnabled={isDynamicHeightEnabled}
+        minWidth={props.minWidth}
         optionAlignment={optionAlignment}
         optionCount={options.length}
       >

diff --git a/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx b/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx
@@ -556,6 +556,7 @@ class CheckboxGroupWidget extends BaseWidget<
         labelTextSize={this.props.labelTextSize}
         labelTooltip={this.props.labelTooltip}
         labelWidth={this.getLabelWidth()}
+        minWidth={this.props.minWidth}
         onChange={this.handleCheckboxChange}
         onSelectAllChange={this.handleSelectAllChange}
         optionAlignment={this.props.optionAlignment}

diff --git a/app/client/src/widgets/CheckboxWidget/component/index.tsx b/app/client/src/widgets/CheckboxWidget/component/index.tsx
@@ -12,6 +12,7 @@ type StyledCheckboxContainerProps = {
   isValid: boolean;
   noContainerPadding?: boolean;
   labelPosition?: LabelPosition;
+  minHeight?: number;
 };
 
 const DEFAULT_BORDER_RADIUS = "0";
@@ -25,9 +26,8 @@ const CheckboxContainer = styled.div<StyledCheckboxContainerProps>`
     justify-content: start;
     width: 100%;
 
-    .auto-layout & {
-      min-height: 32px;
-    }
+    ${({ minHeight }) => `
+    ${minHeight ? `min-height: ${minHeight}px;` : ""}`};
 
     .${Classes.CHECKBOX} {
       width: 100%;
@@ -42,6 +42,7 @@ export const CheckboxLabel = styled.div<{
   labelTextSize?: string;
   labelStyle?: string;
   isDynamicHeightEnabled?: boolean;
+  isLabelInline?: boolean;
 }>`
   width: 100%;
   display: inline-block;
@@ -61,12 +62,14 @@ export const CheckboxLabel = styled.div<{
   ${({ isDynamicHeightEnabled }) =>
     isDynamicHeightEnabled ? "&& { word-break: break-all; }" : ""};
 
-  .auto-layout & {
+  ${({ isLabelInline }) =>
+    isLabelInline &&
+    `
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     word-wrap: normal;
-  }
+  `}
 `;
 
 export const StyledCheckbox = styled(Checkbox)`
@@ -97,6 +100,7 @@ class CheckboxComponent extends React.Component<CheckboxComponentProps> {
     return (
       <CheckboxContainer
         isValid={isValid}
+        minHeight={this.props.minHeight}
         noContainerPadding={this.props.noContainerPadding}
       >
         <StyledCheckbox
@@ -116,6 +120,7 @@ class CheckboxComponent extends React.Component<CheckboxComponentProps> {
               className="t--checkbox-widget-label"
               disabled={this.props.isDisabled}
               isDynamicHeightEnabled={this.props.isDynamicHeightEnabled}
+              isLabelInline={this.props.isLabelInline}
               labelStyle={this.props.labelStyle}
               labelTextColor={this.props.labelTextColor}
               labelTextSize={this.props.labelTextSize}
@@ -151,6 +156,8 @@ export interface CheckboxComponentProps extends ComponentProps {
   labelTextColor?: string;
   labelTextSize?: string;
   labelStyle?: string;
+  isLabelInline?: boolean;
+  minHeight?: number;
 }
 
 export default CheckboxComponent;
diff --git a/app/client/src/widgets/CheckboxWidget/widget/index.tsx b/app/client/src/widgets/CheckboxWidget/widget/index.tsx
@@ -323,6 +323,7 @@ class CheckboxWidget extends BaseWidget<CheckboxWidgetProps, WidgetState> {
         isChecked={!!this.props.isChecked}
         isDisabled={this.props.isDisabled}
         isDynamicHeightEnabled={isAutoHeightEnabledForWidget(this.props)}
+        isLabelInline={this.isAutoLayoutMode}
         isLoading={this.props.isLoading}
         isRequired={this.props.isRequired}
         key={this.props.widgetId}
@@ -331,6 +332,7 @@ class CheckboxWidget extends BaseWidget<CheckboxWidgetProps, WidgetState> {
         labelStyle={this.props.labelStyle}
         labelTextColor={this.props.labelTextColor}
         labelTextSize={this.props.labelTextSize}
+        minHeight={this.props.minHeight}
         onCheckChange={this.onCheckChange}
         widgetId={this.props.widgetId}
       />

diff --git a/app/client/src/widgets/CodeScannerWidget/component/index.tsx b/app/client/src/widgets/CodeScannerWidget/component/index.tsx
@@ -586,6 +586,7 @@ function CodeScannerComponent(props: CodeScannerComponentProps) {
       iconName={props.iconName}
       onClick={openModal}
       placement={props.placement}
+      shouldFitContent={props.shouldButtonFitContent}
       text={props.label}
     />
   );
@@ -627,6 +628,7 @@ export interface CodeScannerComponentProps extends ComponentProps {
   placement?: ButtonPlacement;
   onCodeDetected: (value: string) => void;
   scannerLayout: ScannerLayout;
+  shouldButtonFitContent: boolean;
 }
 
 export default CodeScannerComponent;
diff --git a/app/client/src/widgets/CodeScannerWidget/widget/index.tsx b/app/client/src/widgets/CodeScannerWidget/widget/index.tsx
@@ -70,6 +70,7 @@ class CodeScannerWidget extends BaseWidget<
         onCodeDetected={this.onCodeDetected}
         placement={this.props.placement}
         scannerLayout={this.props.scannerLayout}
+        shouldButtonFitContent={this.isAutoLayoutMode}
         tooltip={this.props.tooltip}
         widgetId={this.props.widgetId}
       />
-Original file line number
+Diff line change
@@ Expand Up / @@ -159,6 +159,7 @@ export const CONFIG = { @@
               }
               return {
                 minWidth: `${minWidth}px`,
+                minHeight: "40px",
               };
             },
           },
@@ Expand Down @@