chore: exclude button from tab order (#34099)

## Description
Removed the option to select the tab button in edit mode. 

This is the first PR. There will be separate PRs for each widget. 

## Automation

/ok-to-test tags="@tag.Anvil"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9445961677>
> Commit: ccba28bd2b17a7afdc27fb59371f7e72bd370169
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9445961677&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->






## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced `isEditMode` getter in widgets to enhance edit mode
detection.
  
- **Improvements**
- Updated button component properties for better consistency and
usability.
- Enhanced widget interaction logic for more accurate behavior in
different modes.

- **Removed**
- Eliminated unnecessary `minWidth`, `maxWidth`, and `minHeight`
properties from button components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/src/layoutSystems/anvil/index.ts

@@ -15,8 +15,8 @@ import { AnvilViewerCanvas } from "./viewer/canvas/AnvilViewerCanvas";
 const getAnvilSystemPropsEnhancer = (props: BaseWidgetProps) => {
   return {
     ...props,
-    allowWidgetInteraction:
-      props.renderMode === RenderModes.PAGE || props.isPreviewMode,
+    disableWidgetInteraction:
+      props.renderMode === RenderModes.CANVAS && !props.isPreviewMode,
   };
 };
 

app/client/src/widgets/wds/WDSButtonWidget/component/Container.tsx

@@ -16,9 +16,6 @@ interface ContainerProps {
   children?: React.ReactNode;
   renderMode?: RenderMode;
   showInAllModes?: boolean;
-  minWidth?: number;
-  maxWidth?: number;
-  minHeight?: number;
 }
 
 export function Container(props: ContainerProps) {

app/client/src/widgets/wds/WDSButtonWidget/component/index.tsx

@@ -4,36 +4,25 @@ import { Container } from "./Container";
 import { useRecaptcha } from "./useRecaptcha";
 import type { UseRecaptchaProps } from "./useRecaptcha";
 import { Button, Tooltip } from "@design-system/widgets";
-import type { ButtonProps, IconProps } from "@design-system/widgets";
+import type { ButtonProps } from "@design-system/widgets";
 
-export interface ButtonComponentProps {
+export interface ButtonComponentProps extends ButtonProps {
   text?: string;
   tooltip?: string;
-  minWidth?: number;
-  maxWidth?: number;
-  minHeight?: number;
   isVisible?: boolean;
   isLoading: boolean;
-  iconName?: IconProps["name"];
   isDisabled?: boolean;
-  variant?: ButtonProps["variant"];
-  color?: ButtonProps["color"];
-  type: ButtonProps["type"];
-  onPress?: ButtonProps["onPress"];
-  iconPosition?: ButtonProps["iconPosition"];
 }
 
 function ButtonComponent(props: ButtonComponentProps & UseRecaptchaProps) {
-  const { iconName, maxWidth, minHeight, minWidth, text, tooltip, ...rest } =
-    props;
-  const containerProps = { maxWidth, minHeight, minWidth };
+  const { icon, text, tooltip, ...rest } = props;
 
   const { onClick, recpatcha } = useRecaptcha(props);
 
   return (
-    <Container {...containerProps}>
+    <Container>
       <Tooltip tooltip={tooltip}>
-        <Button icon={iconName} {...rest} onPress={onClick}>
+        <Button icon={icon} {...rest} onPress={onClick}>
           {text}
         </Button>
       </Tooltip>

app/client/src/widgets/wds/WDSButtonWidget/widget/index.tsx

@@ -153,15 +153,13 @@ class WDSButtonWidget extends BaseWidget<ButtonWidgetProps, ButtonWidgetState> {
     return (
       <ButtonComponent
         color={this.props.buttonColor}
+        excludeFromTabOrder={this.props.disableWidgetInteraction}
         handleRecaptchaV2Loading={this.handleRecaptchaV2Loading}
-        iconName={this.props.iconName}
+        icon={this.props.iconName}
         iconPosition={this.props.iconAlign}
         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}
         onPress={onPress}
         onRecaptchaSubmitError={this.onRecaptchaSubmitError}
         onRecaptchaSubmitSuccess={this.onRecaptchaSubmitSuccess}
@@ -169,7 +167,6 @@ class WDSButtonWidget extends BaseWidget<ButtonWidgetProps, ButtonWidgetState> {
         recaptchaType={this.props.recaptchaType}
         text={this.props.text}
         tooltip={this.props.tooltip}
-        type={this.props.buttonType || "button"}
         variant={this.props.buttonVariant}
       />
     );

app/client/src/widgets/wds/WDSButtonWidget/widget/types.ts

@@ -7,7 +7,9 @@ export interface ButtonWidgetState extends WidgetState {
   isLoading: boolean;
 }
 
-export interface ButtonWidgetProps extends WidgetProps {
+export interface ButtonWidgetProps
+  extends WidgetProps,
+    Omit<ButtonComponentProps, "type"> {
   text?: string;
   isVisible?: boolean;
   isDisabled?: boolean;
@@ -15,9 +17,4 @@ export interface ButtonWidgetProps extends WidgetProps {
   googleRecaptchaKey?: string;
   recaptchaType?: RecaptchaType;
   disabledWhenInvalid?: boolean;
-  buttonType?: ButtonComponentProps["type"];
-  iconName?: ButtonComponentProps["iconName"];
-  buttonVariant?: ButtonComponentProps["variant"];
-  iconAlign?: ButtonComponentProps["iconPosition"];
-  buttonColor?: ButtonComponentProps["color"];
 }

app/client/src/widgets/wds/WDSModalWidget/widget/index.tsx

@@ -128,7 +128,7 @@ class WDSModalWidget extends BaseWidget<ModalWidgetProps, WidgetState> {
       ? this.props.submitButtonText || "Submit"
       : undefined;
     const contentClassName = `${this.props.className} ${
-      this.props.allowWidgetInteraction ? "" : styles.disableModalInteraction
+      this.props.disableWidgetInteraction ? styles.disableModalInteraction : ""
     }`;
     return (
       <Modal
@@ -141,7 +141,7 @@ class WDSModalWidget extends BaseWidget<ModalWidgetProps, WidgetState> {
           <ModalContent className={contentClassName.trim()}>
             {this.props.showHeader && (
               <ModalHeader
-                excludeFromTabOrder={!this.props.allowWidgetInteraction}
+                excludeFromTabOrder={this.props.disableWidgetInteraction}
                 title={this.props.title}
               />
             )}
@@ -152,7 +152,7 @@ class WDSModalWidget extends BaseWidget<ModalWidgetProps, WidgetState> {
               <ModalFooter
                 closeOnSubmit={this.props.closeOnSubmit}
                 closeText={closeText}
-                excludeFromTabOrder={!this.props.allowWidgetInteraction}
+                excludeFromTabOrder={this.props.disableWidgetInteraction}
                 onSubmit={submitText ? this.onSubmitClick : undefined}
                 submitText={submitText}
               />