fix: button group loading (#2544)

* fix: bug and code refactor

* chore: border radius

* chore: ts fixes

* chore: border radius changes

* chore: update snap

* fix: loading single button in buttonGroup

Author: tewarig

.changeset/warm-fireants-nail.md

@@ -0,0 +1,5 @@
+---
+'@razorpay/blade': patch
+---
+
+fix(blade): loading single button in buttonGroup

packages/blade/src/components/Button/BaseButton/BaseButton.tsx

@@ -344,7 +344,9 @@ const _BaseButton: React.ForwardRefRenderFunction<BladeElementRef, BaseButtonPro
   const isChildrenComponent = React.isValidElement(children);
 
   // Button cannot be disabled when its rendered as Link
-  const disabled = buttonGroupProps.isDisabled ?? (isLoading || (isDisabled && !isLink));
+  // button should be allowed to be disabled in any case...
+  // either through button group or we should allow to disable an individual button
+  const disabled = buttonGroupProps.isDisabled || isLoading || (isDisabled && !isLink);
 
   if (__DEV__) {
     if (!Icon && !childrenString?.trim()) {

packages/blade/src/components/ButtonGroup/StyledButtonGroup.tsx

@@ -2,33 +2,38 @@ import styled from 'styled-components';
 import type { StyledButtonGroupProps } from './types';
 import BaseBox from '~components/Box/BaseBox';
 import { makeBorderSize } from '~utils';
-import { getBackgroundColorToken } from '~components/Button/BaseButton/BaseButton';
-import getIn from '~utils/lodashButBetter/get';
 
 const StyledButtonGroup = styled(BaseBox)<StyledButtonGroupProps>(
-  ({ theme, isDisabled, variant = 'primary', color, isFullWidth }) => {
+  ({ theme, variant = 'primary', isFullWidth }) => {
     return {
       display: 'flex',
       width: isFullWidth ? '100%' : 'fit-content',
       borderWidth: makeBorderSize(theme.border.width.thin),
       borderRadius: makeBorderSize(theme.border.radius.medium),
       borderStyle: 'solid',
-      borderColor: getIn(
-        theme.colors,
-        getBackgroundColorToken({
-          // Only secondary variant has border a border, for other variants we use background color so that the border is not visible
-          property: variant === 'secondary' ? 'border' : 'background',
-          variant,
-          color,
-          state: isDisabled ? 'disabled' : 'default',
-        }),
-      ),
-
+      borderColor: 'transparent',
+      overflow: 'hidden',
       'button[role="button"]': {
-        borderRadius: 0,
-        border: 'none',
         flex: isFullWidth ? 1 : 'auto',
+        borderRadius: 0,
       },
+
+      ...(variant === 'secondary' && {
+        'button[role="button"]:first-child': {
+          borderRight: 'none',
+          borderTopLeftRadius: makeBorderSize(theme.border.radius.medium),
+          borderBottomLeftRadius: makeBorderSize(theme.border.radius.medium),
+        },
+        'button[role="button"]:not(:first-child):not(:last-child)': {
+          borderLeft: 'none',
+          borderRight: 'none',
+        },
+        'button[role="button"]:last-child': {
+          borderLeft: 'none',
+          borderTopRightRadius: makeBorderSize(theme.border.radius.medium),
+          borderBottomRightRadius: makeBorderSize(theme.border.radius.medium),
+        },
+      }),
     };
   },
 );

packages/blade/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.ssr.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ButtonGroup /> should render ButtonGroup 1`] = `"<div id="root"><div data-blade-component="button-group" data-testid="button-group-test" role="group" class="BaseBox-bmPWx StyledButtonGroup-gr4xbj-0  jpCXAr"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 iCiokj"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedButtonContentweb__AnimatedButtonContent-sc-1fkx0t6-0  eHcfsa"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO eGcQGV" data-blade-component="base-text">One</div></div></div></button><div data-blade-component="base-box" class="BaseBox-bmPWx ButtonGroupweb__StyledDivider-sc-1lc1evg-0  cbYKkw"></div><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 iCiokj"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedButtonContentweb__AnimatedButtonContent-sc-1fkx0t6-0  eHcfsa"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO eGcQGV" data-blade-component="base-text">Two</div></div></div></button><div data-blade-component="base-box" class="BaseBox-bmPWx ButtonGroupweb__StyledDivider-sc-1lc1evg-0  cbYKkw"></div><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 iCiokj"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedButtonContentweb__AnimatedButtonContent-sc-1fkx0t6-0  eHcfsa"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO eGcQGV" data-blade-component="base-text">Three</div></div></div></button></div></div>"`;
+exports[`<ButtonGroup /> should render ButtonGroup 1`] = `"<div id="root"><div data-blade-component="button-group" data-testid="button-group-test" role="group" class="BaseBox-bmPWx StyledButtonGroup-gr4xbj-0  hxzFGp"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 iCiokj"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedButtonContentweb__AnimatedButtonContent-sc-1fkx0t6-0  eHcfsa"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO eGcQGV" data-blade-component="base-text">One</div></div></div></button><div data-blade-component="base-box" class="BaseBox-bmPWx ButtonGroupweb__StyledDivider-sc-1lc1evg-0  cbYKkw"></div><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 iCiokj"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedButtonContentweb__AnimatedButtonContent-sc-1fkx0t6-0  eHcfsa"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO eGcQGV" data-blade-component="base-text">Two</div></div></div></button><div data-blade-component="base-box" class="BaseBox-bmPWx ButtonGroupweb__StyledDivider-sc-1lc1evg-0  cbYKkw"></div><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 iCiokj"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedButtonContentweb__AnimatedButtonContent-sc-1fkx0t6-0  eHcfsa"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO eGcQGV" data-blade-component="base-text">Three</div></div></div></button></div></div>"`;
 
 exports[`<ButtonGroup /> should render ButtonGroup 2`] = `
 .c3.c3.c3.c3.c3 {
@@ -25,6 +25,28 @@ exports[`<ButtonGroup /> should render ButtonGroup 2`] = `
   z-index: 1;
 }
 
+.c0.c0.c0.c0.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-width: 1px;
+  border-radius: 4px;
+  border-style: solid;
+  border-color: transparent;
+  overflow: hidden;
+}
+
+.c0.c0.c0.c0.c0 button[role="button"] {
+  -webkit-flex: auto;
+  -ms-flex: auto;
+  flex: auto;
+  border-radius: 0;
+}
+
 .c1.c1.c1.c1.c1 {
   min-height: 36px;
   width: auto;
@@ -120,28 +142,6 @@ exports[`<ButtonGroup /> should render ButtonGroup 2`] = `
   opacity: 1;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  border-width: 1px;
-  border-radius: 4px;
-  border-style: solid;
-  border-color: hsla(227,100%,59%,1);
-}
-
-.c0.c0.c0.c0.c0 button[role="button"] {
-  border-radius: 0;
-  border: none;
-  -webkit-flex: auto;
-  -ms-flex: auto;
-  flex: auto;
-}
-
 .c6.c6.c6.c6.c6 {
   border-width: 0;
   border-left-style: solid;