Merge pull request #109 from appsmithorg/fix/prop-destructring-btn-bt…

…n-tab fix: Button and ButtonTab component issue with onclick
appsmithorg · Aug 16, 2022 · 8eb7426 · 8eb7426
2 parents 982a38a + 8fc60ea
commit 8eb7426
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 27 deletions.
diff --git a/.changeset/gorgeous-weeks-learn.md b/.changeset/gorgeous-weeks-learn.md
diff --git a/.changeset/large-beans-brush.md b/.changeset/large-beans-brush.md
@@ -0,0 +1,5 @@
+---
+"@appsmithorg/design-system": patch
+---
+
+fix: Button and ButtonTab component issue in onclick functions
diff --git a/.changeset/yellow-wasps-work.md b/.changeset/yellow-wasps-work.md
diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @appsmithorg/design-system
 
+## 1.0.12
+
+### Patch Changes
+
+- [#105](https://github.com/appsmithorg/design-system/pull/105) [`444cee2`](https://github.com/appsmithorg/design-system/commit/444cee2ace642335988ebab974f02ff17a775f9c) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - update DropdownOption to TableDropdownOption and export for typechecking ease
+
+## 1.0.11
+
+### Patch Changes
+
+- [#100](https://github.com/appsmithorg/design-system/pull/100) [`cedb54d`](https://github.com/appsmithorg/design-system/commit/cedb54d0f357389f5db571fdb5a20ad3c675885d) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: Added button test
+
 ## 1.0.10
 
 ### Patch Changes

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appsmithorg/design-system",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "This is the package for the Appsmith design system components",
   "module": "build/index.js",
   "types": "build/index.d.ts",

diff --git a/packages/design-system/src/Button/index.tsx b/packages/design-system/src/Button/index.tsx
@@ -557,14 +557,15 @@ const getButtonContent = (props: ButtonProps) => {
 };
 
 function ButtonComponent(props: ButtonProps) {
+  const { className, cypressSelector, isLoading, onClick } = props;
   const omitProps = ["fill"];
   return (
     <StyledButton
-      className={props.className}
-      data-cy={props.cypressSelector}
+      className={className}
+      data-cy={cypressSelector}
       {..._.omit(props, omitProps)}
       onClick={(e: React.MouseEvent<HTMLElement>) =>
-        props.onClick && !props.isLoading && props.onClick(e)
+        onClick && !isLoading && onClick(e)
       }
     >
       {getButtonContent(props)}
@@ -573,15 +574,14 @@ function ButtonComponent(props: ButtonProps) {
 }
 
 function LinkButtonComponent(props: ButtonProps) {
+  const { className, cypressSelector, href, onClick } = props;
   return (
     <StyledLinkButton
-      className={props.className}
-      data-cy={props.cypressSelector}
-      href={props.href}
+      className={className}
+      data-cy={cypressSelector}
+      href={href}
       {...props}
-      onClick={(e: React.MouseEvent<HTMLElement>) =>
-        props.onClick && props.onClick(e)
-      }
+      onClick={(e: React.MouseEvent<HTMLElement>) => onClick && onClick(e)}
     >
       {getButtonContent(props)}
     </StyledLinkButton>

diff --git a/packages/design-system/src/ButtonTab/index.tsx b/packages/design-system/src/ButtonTab/index.tsx
@@ -58,9 +58,10 @@ interface ButtonTabComponentProps {
 // eslint-disable-next-line react/display-name
 const ButtonTabComponent = React.forwardRef(
   (props: ButtonTabComponentProps, ref: any) => {
-    const valueSet = new Set(props.values);
+    const { options, selectButton, values } = props;
+    const valueSet = new Set(values);
     let firstValueIndex = 0;
-    for (const [i, x] of props.options.entries()) {
+    for (const [i, x] of options.entries()) {
       if (valueSet.has(x.value)) {
         firstValueIndex = i;
         break;
@@ -93,20 +94,20 @@ const ButtonTabComponent = React.forwardRef(
         case "Right":
           emitKeyPressEvent(e.key);
           setFocusedIndex((prev) =>
-            prev === props.options.length - 1 ? 0 : prev + 1,
+            prev === options.length - 1 ? 0 : prev + 1,
           );
           break;
         case "ArrowLeft":
         case "Left":
           emitKeyPressEvent(e.key);
           setFocusedIndex((prev) =>
-            prev === 0 ? props.options.length - 1 : prev - 1,
+            prev === 0 ? options.length - 1 : prev - 1,
           );
           break;
         case "Enter":
         case " ":
           emitKeyPressEvent(e.key);
-          props.selectButton(props.options[focusedIndex].value, true);
+          selectButton(options[focusedIndex].value, true);
           e.preventDefault();
           break;
         case "Tab":
@@ -124,7 +125,7 @@ const ButtonTabComponent = React.forwardRef(
         role="tablist"
         tabIndex={0}
       >
-        {props.options.map(
+        {options.map(
           ({ icon, value, width = 24 }: ButtonTabOption, index: number) => {
             let ControlIcon;
             if (_.isString(icon)) {
@@ -142,7 +143,7 @@ const ButtonTabComponent = React.forwardRef(
                 }`}
                 key={index}
                 onClick={() => {
-                  props.selectButton(value, false);
+                  selectButton(value, false);
                   setFocusedIndex(index);
                 }}
                 role="tab"