Feat: Style customisation in the button widget (#6052)

Added multiple style props to the button widget:
- Button styles
- The background colour can change with a hex code
- elevation (box-shadow & colour)
- There are button variant contained (solid button), outlined (only borders), text (text buttons)
- Button can have an end icon or start icon

Author: wmdev0808

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Button_spec.js

@@ -19,12 +19,20 @@ describe("Button Widget Functionality", function() {
 
   it("Button-Style Validation", function() {
     //Changing the style of the button from the property pane and verify it's color.
+    // Change to Warning button sytle
+    cy.changeButtonStyle(2, "rgb(254, 184, 17)", "rgba(0, 0, 0, 0)");
+    cy.get(publishPage.backToEditor).click({ force: true });
+    cy.openPropertyPane("buttonwidget");
+    // Change to Info button sytle
+    cy.changeButtonStyle(4, "rgb(102, 152, 255)", "rgba(0, 0, 0, 0)");
+    cy.get(publishPage.backToEditor).click({ force: true });
+    cy.openPropertyPane("buttonwidget");
     // Change to Secondary button sytle
-    cy.changeButtonStyle(2, "rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0)");
+    cy.changeButtonStyle(5, "rgb(133, 130, 130)", "rgba(0, 0, 0, 0)");
     cy.get(publishPage.backToEditor).click({ force: true });
     // Change to Danger button sytle
     cy.openPropertyPane("buttonwidget");
-    cy.changeButtonStyle(3, "rgb(179, 3, 56)", "rgb(139, 2, 43)");
+    cy.changeButtonStyle(3, "rgb(242, 43, 43)", "rgb(139, 2, 43)");
     cy.get(publishPage.backToEditor).click({ force: true });
     // Change to Primary button sytle
     cy.openPropertyPane("buttonwidget");

app/client/package.json

@@ -146,7 +146,7 @@
     "styled-components": "^5.2.0",
     "styled-system": "^5.1.5",
     "tern": "^0.21.0",
-    "tinycolor2": "^1.4.1",
+    "tinycolor2": "^1.4.2",
     "toposort": "^2.0.2",
     "ts-loader": "^6.0.4",
     "tslib": "^2.1.0",

app/client/src/components/designSystems/appsmith/FilePickerComponent.tsx

@@ -29,9 +29,8 @@ class FilePickerComponent extends React.Component<
     }
     return (
       <BaseButton
-        accent="primary"
+        buttonStyle="PRIMARY"
         disabled={this.props.isDisabled}
-        filled
         loading={this.props.isLoading}
         onClick={this.openModal}
         text={label}

app/client/src/components/designSystems/appsmith/IconButtonComponent.tsx

@@ -7,6 +7,14 @@ import { IconName } from "@blueprintjs/icons";
 import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
 import { ThemeProp } from "components/ads/common";
 import { WIDGET_PADDING } from "constants/WidgetConstants";
+import {
+  ButtonBorderRadius,
+  ButtonBorderRadiusTypes,
+} from "components/propertyControls/BorderRadiusOptionsControl";
+import {
+  ButtonBoxShadow,
+  ButtonBoxShadowTypes,
+} from "components/propertyControls/BoxShadowOptionsControl";
 
 const IconButtonContainer = styled.div`
   display: flex;
@@ -176,23 +184,6 @@ export enum ButtonVariantTypes {
 }
 export type ButtonVariant = keyof typeof ButtonVariantTypes;
 
-export enum ButtonBorderRadiusTypes {
-  SHARP = "SHARP",
-  ROUNDED = "ROUNDED",
-  CIRCLE = "CIRCLE",
-}
-export type ButtonBorderRadius = keyof typeof ButtonBorderRadiusTypes;
-
-export enum ButtonBoxShadowTypes {
-  NONE = "NONE",
-  VARIANT1 = "VARIANT1",
-  VARIANT2 = "VARIANT2",
-  VARIANT3 = "VARIANT3",
-  VARIANT4 = "VARIANT4",
-  VARIANT5 = "VARIANT5",
-}
-export type ButtonBoxShadow = keyof typeof ButtonBoxShadowTypes;
-
 export interface IconButtonComponentProps extends ComponentProps {
   iconName?: IconName;
   buttonStyle: ButtonStyle;