feat(component): restrict badges to use label props and style fixes (#…

…339)

BREAKING CHANGE:
Convert `<Badge>label</Badge>` to `<Badge label="label" />`.

packages/big-design/src/components/Badge/Badge.tsx

@@ -5,9 +5,12 @@ import { MarginProps } from '../../mixins';
 import { StyledBadge } from './styled';
 
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, MarginProps {
+  label: string;
   variant?: 'danger' | 'secondary' | 'success' | 'warning';
 }
 
-export const Badge: React.FC<BadgeProps> = memo(({ className, style, ...props }) => <StyledBadge {...props} />);
+export const Badge: React.FC<BadgeProps> = memo(({ className, style, label, ...props }) => (
+  <StyledBadge {...props}>{label}</StyledBadge>
+));
 
 Badge.displayName = 'Badge';

packages/big-design/src/components/Badge/__snapshots__/spec.tsx.snap

@@ -7,9 +7,10 @@ exports[`render danger Badge 1`] = `
   display: inline-block;
   font-size: 0.75rem;
   font-weight: 600;
+  line-height: 1.25rem;
   text-align: center;
   text-transform: uppercase;
-  padding: 0.25rem 0.5rem;
+  padding: 0 0.5rem;
   background-color: #DB3643;
 }
 
@@ -27,9 +28,10 @@ exports[`render default Badge 1`] = `
   display: inline-block;
   font-size: 0.75rem;
   font-weight: 600;
+  line-height: 1.25rem;
   text-align: center;
   text-transform: uppercase;
-  padding: 0.25rem 0.5rem;
+  padding: 0 0.5rem;
   background-color: #5E637A;
 }
 
@@ -47,9 +49,10 @@ exports[`render secondary Badge 1`] = `
   display: inline-block;
   font-size: 0.75rem;
   font-weight: 600;
+  line-height: 1.25rem;
   text-align: center;
   text-transform: uppercase;
-  padding: 0.25rem 0.5rem;
+  padding: 0 0.5rem;
   background-color: #5E637A;
 }
 
@@ -67,9 +70,10 @@ exports[`render success Badge 1`] = `
   display: inline-block;
   font-size: 0.75rem;
   font-weight: 600;
+  line-height: 1.25rem;
   text-align: center;
   text-transform: uppercase;
-  padding: 0.25rem 0.5rem;
+  padding: 0 0.5rem;
   background-color: #208831;
 }
 
@@ -87,9 +91,10 @@ exports[`render warning Badge 1`] = `
   display: inline-block;
   font-size: 0.75rem;
   font-weight: 600;
+  line-height: 1.25rem;
   text-align: center;
   text-transform: uppercase;
-  padding: 0.25rem 0.5rem;
+  padding: 0 0.5rem;
   color: #313440;
   background-color: #FFBF00;
 }

packages/big-design/src/components/Badge/spec.tsx

@@ -6,45 +6,45 @@ import React from 'react';
 import { Badge } from './index';
 
 test('has margin props', () => {
-  const { container, rerender } = render(<Badge />);
+  const { container, rerender } = render(<Badge label="Badge" />);
 
   expect(container.firstChild).not.toHaveStyle('margin: 1rem');
 
-  rerender(<Badge margin="medium" />);
+  rerender(<Badge label="Badge" margin="medium" />);
 
   expect(container.firstChild).toHaveStyle('margin: 1rem');
 });
 
 test('render default Badge', () => {
-  const { container } = render(<Badge>Badge</Badge>);
+  const { container } = render(<Badge label="Badge" />);
 
   expect(container.firstChild).toMatchSnapshot();
   expect(container.firstChild).toHaveStyle(`background-color: ${theme.colors.secondary60}`);
 });
 
 test('render success Badge', () => {
-  const { container } = render(<Badge variant="success">Badge</Badge>);
+  const { container } = render(<Badge label="Badge" variant="success" />);
 
   expect(container.firstChild).toMatchSnapshot();
   expect(container.firstChild).toHaveStyle(`background-color: ${theme.colors.success50}`);
 });
 
 test('render danger Badge', () => {
-  const { container } = render(<Badge variant="danger">Badge</Badge>);
+  const { container } = render(<Badge label="Badge" variant="danger" />);
 
   expect(container.firstChild).toMatchSnapshot();
   expect(container.firstChild).toHaveStyle(`background-color: ${theme.colors.danger40}`);
 });
 
 test('render warning Badge', () => {
-  const { container } = render(<Badge variant="warning">Badge</Badge>);
+  const { container } = render(<Badge label="Badge" variant="warning" />);
 
   expect(container.firstChild).toMatchSnapshot();
   expect(container.firstChild).toHaveStyle(`background-color: ${theme.colors.warning40}`);
 });
 
 test('render secondary Badge', () => {
-  const { container } = render(<Badge variant="secondary">Badge</Badge>);
+  const { container } = render(<Badge label="Badge" variant="secondary" />);
 
   expect(container.firstChild).toMatchSnapshot();
   expect(container.firstChild).toHaveStyle(`background-color: ${theme.colors.secondary60}`);

packages/big-design/src/components/Badge/styled.tsx

@@ -5,17 +5,18 @@ import { withMargins } from '../../mixins';
 
 import { BadgeProps } from './Badge';
 
-export const StyledBadge = styled.span<BadgeProps>`
+export const StyledBadge = styled.span<Omit<BadgeProps, 'label'>>`
   ${withMargins()};
 
   color: ${({ theme }) => theme.colors.white};
   border-radius: ${({ theme }) => theme.borderRadius.normal};
   display: inline-block;
   font-size: ${({ theme }) => theme.helpers.remCalc(12)};
   font-weight: ${({ theme }) => theme.typography.fontWeight.semiBold};
+  line-height: ${({ theme }) => theme.lineHeight.small};
   text-align: center;
   text-transform: uppercase;
-  padding: ${({ theme }) => `${theme.spacing.xxSmall} ${theme.spacing.xSmall}`};
+  padding: 0 ${({ theme }) => theme.spacing.xSmall};
 
   ${({ theme, variant }) =>
     variant === 'secondary' &&

packages/docs/PropTables/BadgePropTable.tsx

@@ -3,6 +3,12 @@ import React from 'react';
 import { Prop, PropTable, PropTableWrapper } from '../components';
 
 const badgeProps: Prop[] = [
+  {
+    name: 'label',
+    types: 'string',
+    description: 'The text applied to the component.',
+    required: true,
+  },
   {
     name: 'variant',
     types: ['danger', 'secondary', 'success', 'warning'],

packages/docs/pages/Badge/BadgePage.tsx

@@ -19,7 +19,7 @@ export default () => (
 
     <CodePreview>
       {/* jsx-to-string:start */}
-      <Badge variant="success">active</Badge>
+      <Badge label="active" variant="success" />
       {/* jsx-to-string:end */}
     </CodePreview>
 
@@ -40,10 +40,10 @@ export default () => (
     <CodePreview>
       {/* jsx-to-string:start */}
       <Grid gridColumns="repeat(4, min-content)">
-        <Badge variant="secondary">secondary</Badge>
-        <Badge variant="success">success</Badge>
-        <Badge variant="warning">warning</Badge>
-        <Badge variant="danger">danger</Badge>
+        <Badge variant="secondary" label="secondary" />
+        <Badge variant="success" label="success" />
+        <Badge variant="warning" label="warning" />
+        <Badge variant="danger" label="danger" />
       </Grid>
       {/* jsx-to-string:end */}
     </CodePreview>