fix: bug and code refactor

razorpay · Feb 13, 2025 · 0922da1 · 0922da1
1 parent 6b622db
commit 0922da1
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 19 deletions.
diff --git a/packages/blade/src/components/Button/BaseButton/BaseButton.tsx b/packages/blade/src/components/Button/BaseButton/BaseButton.tsx
@@ -184,6 +184,7 @@ const getProps = ({
   variant,
   color,
   hasIcon,
+  borderRadius,
 }: {
   buttonTypographyTokens: ButtonTypography;
   childrenString?: string;
@@ -193,6 +194,7 @@ const getProps = ({
   size: NonNullable<BaseButtonProps['size']>;
   variant: NonNullable<BaseButtonProps['variant']>;
   color: BaseButtonProps['color'];
+  borderRadius: BaseButtonProps['borderRadius'];
 }): BaseButtonStyleProps => {
   if (variant === 'tertiary' && color !== 'primary' && color !== 'white') {
     throwBladeError({
@@ -261,7 +263,9 @@ const getProps = ({
     ),
     focusRingColor: getIn(theme.colors, 'surface.border.primary.muted'),
     borderWidth: variant == 'secondary' ? makeBorderSize(theme.border.width.thin) : '0px',
-    borderRadius: makeBorderSize(theme.border.radius.medium),
+    borderRadius: borderRadius
+      ? makeBorderSize(borderRadius)
+      : makeBorderSize(theme.border.radius.medium),
     motionDuration: 'duration.xquick',
     motionEasing: 'easing.standard',
   };
@@ -344,7 +348,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()) {
@@ -399,6 +405,7 @@ const _BaseButton: React.ForwardRefRenderFunction<BladeElementRef, BaseButtonPro
     theme,
     color: buttonGroupProps.color ?? color,
     hasIcon: Boolean(Icon),
+    borderRadius: buttonGroupProps.borderRadius,
   });
 
   const renderElement = React.useMemo(() => getRenderElement(href), [href]);

diff --git a/packages/blade/src/components/ButtonGroup/ButtonGroup.web.tsx b/packages/blade/src/components/ButtonGroup/ButtonGroup.web.tsx
@@ -70,6 +70,8 @@ const _ButtonGroup = (
     color,
     variant,
     isFullWidth,
+    // In case of buttonGroup we don't need borderRadius in internal buttons
+    borderRadius: 'theme.border.radius.none',
   };
 
   useVerifyAllowedChildren({

diff --git a/packages/blade/src/components/ButtonGroup/StyledButtonGroup.tsx b/packages/blade/src/components/ButtonGroup/StyledButtonGroup.tsx
@@ -2,33 +2,37 @@ 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',
       },
+
+      ...(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),
+        },
+      }),
     };
   },
 );

diff --git a/packages/blade/src/components/ButtonGroup/docs/ButtonGroup.stories.tsx b/packages/blade/src/components/ButtonGroup/docs/ButtonGroup.stories.tsx
@@ -120,6 +120,29 @@ const ButtonGroupVariantsTemplate: StoryFn<typeof ButtonGroupComponent> = (args)
 export const AllVariants = ButtonGroupVariantsTemplate.bind({});
 AllVariants.storyName = 'All Variants';
 
+const ButtonGroupVariantsTemplateWithLoading: StoryFn<typeof ButtonGroupComponent> = (args) => {
+  const variants: ButtonGroupProps['variant'][] = ['primary', 'secondary', 'tertiary'];
+  return (
+    <>
+      {variants.map((variant) => (
+        <Box key={variant} marginBottom="spacing.8">
+          <Heading marginBottom="spacing.3">{variant}</Heading>
+          <ButtonGroupComponent {...args} variant={variant}>
+            <Button icon={RefreshIcon} isLoading>
+              Sync
+            </Button>
+            <Button icon={ShareIcon}>Share</Button>
+            <Button icon={DownloadIcon}>Download</Button>
+          </ButtonGroupComponent>
+        </Box>
+      ))}
+    </>
+  );
+};
+
+export const AllVariantsWithLoading = ButtonGroupVariantsTemplateWithLoading.bind({});
+AllVariantsWithLoading.storyName = 'All Variants With Loading';
+
 const ButtonGroupSizesTemplate: StoryFn<typeof ButtonGroupComponent> = (args) => {
   const sizes: ButtonGroupProps['size'][] = ['xsmall', 'small', 'medium', 'large'];
   return (
@@ -129,7 +152,9 @@ const ButtonGroupSizesTemplate: StoryFn<typeof ButtonGroupComponent> = (args) =>
           <Heading marginBottom="spacing.3">{size}</Heading>
           <ButtonGroupComponent {...args} size={size}>
             <Button icon={RefreshIcon}>Sync</Button>
-            <Button icon={ShareIcon}>Share</Button>
+            <Button isLoading icon={ShareIcon}>
+              Share
+            </Button>
             <Button icon={DownloadIcon}>Download</Button>
           </ButtonGroupComponent>
         </Box>