chore(deps): convert Badge to transient props

bigcommerce · Jan 24, 2024 · fb5f9d5 · fb5f9d5
1 parent 8b55ac2
commit fb5f9d5
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 15 deletions.
diff --git a/packages/big-design/src/components/Badge/Badge.tsx b/packages/big-design/src/components/Badge/Badge.tsx
@@ -1,6 +1,7 @@
 import React, { HTMLAttributes, memo } from 'react';
 
 import { MarginProps } from '../../mixins';
+import { withTransients } from '../../utils/withTransients';
 
 import { StyledBadge } from './styled';
 
@@ -10,7 +11,7 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, MarginProps
 }
 
 export const Badge: React.FC<BadgeProps> = memo(({ className, style, label, ...props }) =>
-  typeof label === 'string' ? <StyledBadge {...props}>{label}</StyledBadge> : null,
+  typeof label === 'string' ? <StyledBadge {...withTransients(props)}>{label}</StyledBadge> : null,
 );
 
 Badge.displayName = 'Badge';
diff --git a/packages/big-design/src/components/Badge/styled.tsx b/packages/big-design/src/components/Badge/styled.tsx
@@ -1,11 +1,13 @@
 import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import { css, styled } from 'styled-components';
 
-import { withMargins } from '../../mixins';
+import { WithTransients } from 'src/utils';
+
+import { MarginProps, withMargins } from '../../mixins';
 
 import { BadgeProps } from './Badge';
 
-export const StyledBadge = styled.span<Omit<BadgeProps, 'label'>>`
+export const StyledBadge = styled.span<WithTransients<Omit<BadgeProps, 'label'> & MarginProps>>`
   ${withMargins()};
 
   color: ${({ theme }) => theme.colors.white};
@@ -19,39 +21,39 @@ export const StyledBadge = styled.span<Omit<BadgeProps, 'label'>>`
   vertical-align: middle;
   padding: 0 ${({ theme }) => theme.spacing.xSmall};
 
-  ${({ theme, variant }) =>
-    variant === 'secondary' &&
+  ${({ theme, $variant }) =>
+    $variant === 'secondary' &&
     css`
       background-color: ${theme.colors.secondary60};
     `}
 
-  ${({ theme, variant }) =>
-    variant === 'success' &&
+  ${({ theme, $variant }) =>
+    $variant === 'success' &&
     css`
       background-color: ${theme.colors.success50};
     `}
 
-  ${({ theme, variant }) =>
-    variant === 'warning' &&
+  ${({ theme, $variant }) =>
+    $variant === 'warning' &&
     css`
       color: ${theme.colors.secondary70};
       background-color: ${theme.colors.warning40};
     `}
 
-  ${({ theme, variant }) =>
-    variant === 'danger' &&
+  ${({ theme, $variant }) =>
+    $variant === 'danger' &&
     css`
       background-color: ${theme.colors.danger40};
     `}
 
-  ${({ theme, variant }) =>
-    variant === 'primary' &&
+  ${({ theme, $variant }) =>
+    $variant === 'primary' &&
     css`
       background-color: ${theme.colors.primary40};
     `}
 `;
 
 StyledBadge.defaultProps = {
   theme: defaultTheme,
-  variant: 'secondary',
+  $variant: 'secondary',
 };
diff --git a/packages/big-design/src/mixins/margins/margins.tsx b/packages/big-design/src/mixins/margins/margins.tsx
@@ -1,7 +1,7 @@
 import { Spacing } from '@bigcommerce/big-design-theme';
 import { css } from 'styled-components';
 
-import { WithTransients } from 'src/utils/withTransients';
+import { WithTransients } from 'src/utils';
 
 import { ResponsiveProp } from '../../types';
 import { getSpacingStyles } from '../spacings';