From a961c66ec376f7b85fa019f12d2b01718d149773 Mon Sep 17 00:00:00 2001
From: Bhavin K <58818598+techbhavin@users.noreply.github.com>
Date: Fri, 26 Nov 2021 10:29:56 +0530
Subject: [PATCH] fix: updated button group widget properties and GROUP_BUTTONS
 controls style (#9304)

---
 .../propertyControls/ButtonListControl.tsx    | 23 +--------
 .../ButtonGroupWidget/widget/index.tsx        | 49 ++++++++++---------
 2 files changed, 26 insertions(+), 46 deletions(-)

diff --git a/app/client/src/components/propertyControls/ButtonListControl.tsx b/app/client/src/components/propertyControls/ButtonListControl.tsx
index c6f1f8a30c..496e30e5ef 100644
--- a/app/client/src/components/propertyControls/ButtonListControl.tsx
+++ b/app/client/src/components/propertyControls/ButtonListControl.tsx
@@ -1,11 +1,11 @@
 import React, { useCallback, useEffect, useState } from "react";
 import BaseControl, { ControlProps } from "./BaseControl";
 import {
-  StyledInputGroup,
   StyledPropertyPaneButton,
   StyledDragIcon,
   StyledDeleteIcon,
   StyledEditIcon,
+  StyledOptionControlInputGroup,
 } from "./StyledControls";
 import styled from "constants/DefaultTheme";
 import { generateReactKey } from "utils/generators";
@@ -34,27 +34,6 @@ const ButtonListWrapper = styled.div`
   flex-direction: column;
 `;
 
-const StyledOptionControlInputGroup = styled(StyledInputGroup)`
-  margin-right: 2px;
-  margin-bottom: 2px;
-  width: 100%;
-  padding-left: 30px;
-  padding-right: 60px;
-  text-overflow: ellipsis;
-  &&& {
-    input {
-      border: none;
-      color: ${(props) => props.theme.colors.propertyPane.radioGroupText};
-      background: ${(props) => props.theme.colors.propertyPane.radioGroupBg};
-      &:focus {
-        border: none;
-        color: ${(props) => props.theme.colors.textOnDarkBG};
-        background: ${(props) => props.theme.colors.paneInputBG};
-      }
-    }
-  }
-`;
-
 const AddNewButton = styled(StyledPropertyPaneButton)`
   justify-content: center;
   flex-grow: 1;
diff --git a/app/client/src/widgets/ButtonGroupWidget/widget/index.tsx b/app/client/src/widgets/ButtonGroupWidget/widget/index.tsx
index 6a91b33989..4837396c6a 100644
--- a/app/client/src/widgets/ButtonGroupWidget/widget/index.tsx
+++ b/app/client/src/widgets/ButtonGroupWidget/widget/index.tsx
@@ -9,6 +9,7 @@ import {
   ButtonBoxShadow,
   ButtonVariant,
   ButtonBorderRadiusTypes,
+  ButtonVariantTypes,
 } from "components/constants";
 import ButtonGroupComponent from "../component";
 
@@ -40,30 +41,6 @@ class ButtonGroupWidget extends BaseWidget<
             isTriggerProperty: false,
             validation: { type: ValidationTypes.TEXT },
           },
-          {
-            propertyName: "buttonVariant",
-            label: "Button Variant",
-            controlType: "DROP_DOWN",
-            helpText: "Sets the variant of the icon button",
-            options: [
-              {
-                label: "Primary",
-                value: "PRIMARY",
-              },
-              {
-                label: "Secondary",
-                value: "SECONDARY",
-              },
-              {
-                label: "Tertiary",
-                value: "TERTIARY",
-              },
-            ],
-            isJSConvertible: true,
-            isBindProperty: false,
-            isTriggerProperty: false,
-            validation: { type: ValidationTypes.TEXT },
-          },
           {
             helpText: "Controls the visibility of the widget",
             propertyName: "isVisible",
@@ -376,6 +353,30 @@ class ButtonGroupWidget extends BaseWidget<
       {
         sectionName: "Styles",
         children: [
+          {
+            propertyName: "buttonVariant",
+            label: "Button Variant",
+            controlType: "DROP_DOWN",
+            helpText: "Sets the variant of the button",
+            options: [
+              {
+                label: "Primary",
+                value: ButtonVariantTypes.PRIMARY,
+              },
+              {
+                label: "Secondary",
+                value: ButtonVariantTypes.SECONDARY,
+              },
+              {
+                label: "Tertiary",
+                value: ButtonVariantTypes.TERTIARY,
+              },
+            ],
+            isJSConvertible: true,
+            isBindProperty: false,
+            isTriggerProperty: false,
+            validation: { type: ValidationTypes.TEXT },
+          },
           {
             propertyName: "borderRadius",
             label: "Border Radius",