feat: badge: add badge size and update button and tab custom css

src/components/Accordion/__snapshots__/Accordion.test.tsx.snap

@@ -39,7 +39,7 @@ exports[`Accordion Accordion is large 1`] = `
           Accordion Header
         </span>
         <span
-          class="badge"
+          class="badge badge-medium"
         >
           2
         </span>
@@ -120,7 +120,7 @@ exports[`Accordion Accordion is medium 1`] = `
           Accordion Header
         </span>
         <span
-          class="badge"
+          class="badge badge-medium"
         >
           2
         </span>
@@ -282,7 +282,7 @@ exports[`Accordion Accordion is pill shaped 1`] = `
           Accordion Header
         </span>
         <span
-          class="badge"
+          class="badge badge-medium"
         >
           2
         </span>
@@ -363,7 +363,7 @@ exports[`Accordion Accordion is rectangle shaped 1`] = `
           Accordion Header
         </span>
         <span
-          class="badge"
+          class="badge badge-medium"
         >
           2
         </span>
@@ -444,7 +444,7 @@ exports[`Accordion Renders without crashing 1`] = `
           Accordion Header
         </span>
         <span
-          class="badge"
+          class="badge badge-medium"
         >
           2
         </span>

src/components/Badge/Badge.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Stories } from '@storybook/addon-docs';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Badge } from './';
+import { Badge, BadgeSize } from './';
 
 export default {
   title: 'Badge',
@@ -26,6 +26,12 @@ export default {
       ),
     },
   },
+  argTypes: {
+    size: {
+      options: [BadgeSize.Large, BadgeSize.Medium, BadgeSize.Small],
+      control: { type: 'radio' },
+    },
+  },
 } as ComponentMeta<typeof Badge>;
 
 const Badge_Story: ComponentStory<typeof Badge> = (args) => <Badge {...args} />;
@@ -46,6 +52,7 @@ export const __namedExportsOrder = [
 const badgeArgs: Object = {
   active: false,
   classNames: 'my-badge-class',
+  size: BadgeSize.Medium,
   style: {},
   children: '8',
   disruptive: false,

src/components/Badge/Badge.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Enzyme from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import MatchMediaMock from 'jest-matchmedia-mock';
-import { Badge, BadgeProps } from './';
+import { Badge, BadgeProps, BadgeSize } from './';
 import { render } from '@testing-library/react';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -35,6 +35,21 @@ describe('Badge', () => {
     expect(container).toMatchSnapshot();
   });
 
+  test('Badge accepts custom style', () => {
+    const { container, getByTestId } = render(
+      <Badge {...badgeProps} style={{ color: '#000000' }} />
+    );
+    const badge = getByTestId('test-badge');
+    expect(badge.style.color).toBe('rgb(0, 0, 0)');
+    expect(container).toMatchSnapshot();
+  });
+
+  test('Badge accepts custom class', () => {
+    const { container, getByTestId } = render(<Badge {...badgeProps} />);
+    const badge = getByTestId('test-badge');
+    expect(badge.classList.contains('my-badge-class')).toBe(true);
+  });
+
   test('Badge is disruptive', () => {
     const { container } = render(<Badge {...badgeProps} disruptive />);
     expect(container.querySelector('.disruptive')).toBeTruthy();
@@ -46,4 +61,28 @@ describe('Badge', () => {
     expect(container.querySelector('.active')).toBeTruthy();
     expect(container).toMatchSnapshot();
   });
+
+  test('Badge is large', () => {
+    const { container } = render(
+      <Badge {...badgeProps} size={BadgeSize.Large} />
+    );
+    expect(container.querySelector('.badge-large')).toBeTruthy();
+    expect(container).toMatchSnapshot();
+  });
+
+  test('Badge is medium', () => {
+    const { container } = render(
+      <Badge {...badgeProps} size={BadgeSize.Medium} />
+    );
+    expect(container.querySelector('.badge-medium')).toBeTruthy();
+    expect(container).toMatchSnapshot();
+  });
+
+  test('Badge is small', () => {
+    const { container } = render(
+      <Badge {...badgeProps} size={BadgeSize.Small} />
+    );
+    expect(container.querySelector('.badge-small')).toBeTruthy();
+    expect(container).toMatchSnapshot();
+  });
 });

src/components/Badge/Badge.tsx

@@ -1,25 +1,29 @@
 import React, { FC } from 'react';
-import { BadgeProps } from './Badge.types';
+import { BadgeProps, BadgeSize } from './Badge.types';
 import { mergeClasses } from '../../shared/utilities';
 
 import styles from './badge.module.scss';
 
 export const Badge: FC<BadgeProps> = ({
   active,
   classNames,
+  size = BadgeSize.Medium,
   style,
   children,
   disruptive,
   ...rest
 }) => {
-  const badgeClasses: string = mergeClasses([
+  const badgeClassNames: string = mergeClasses([
     styles.badge,
     { [styles.disruptive]: disruptive },
+    { [styles.badgeLarge]: size === BadgeSize.Large },
+    { [styles.badgeMedium]: size === BadgeSize.Medium },
+    { [styles.badgeSmall]: size === BadgeSize.Small },
     classNames,
     { [styles.active]: active },
   ]);
   return (
-    <span className={badgeClasses} style={style} {...rest}>
+    <span className={badgeClassNames} style={style} {...rest}>
       {children}
     </span>
   );

src/components/Badge/Badge.types.tsx

@@ -1,13 +1,23 @@
-import React from 'react';
 import { OcBaseProps } from '../OcBase';
 
+export enum BadgeSize {
+  Large = 'large',
+  Medium = 'medium',
+  Small = 'small',
+}
+
 export interface BadgeProps extends OcBaseProps<HTMLSpanElement> {
   /**
-   * Badge is in an active state or not
+   * Badge is in an active state or not.
    */
   active?: boolean;
   /**
-   * If badge is disruptive or not
+   * If Badge is disruptive or not.
    */
   disruptive?: boolean;
+  /**
+   * The Badge size.
+   * @default BadgeSize.Medium
+   */
+  size?: BadgeSize;
 }

src/components/Badge/__snapshots__/Badge.test.tsx.snap

@@ -1,9 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Badge Badge accepts custom style 1`] = `
+<div>
+  <span
+    class="badge badge-medium my-badge-class"
+    data-testid="test-badge"
+    style="color: rgb(0, 0, 0);"
+  >
+    8
+  </span>
+</div>
+`;
+
 exports[`Badge Badge is active 1`] = `
 <div>
   <span
-    class="badge my-badge-class active"
+    class="badge badge-medium my-badge-class active"
     data-testid="test-badge"
   >
     8
@@ -14,7 +26,40 @@ exports[`Badge Badge is active 1`] = `
 exports[`Badge Badge is disruptive 1`] = `
 <div>
   <span
-    class="badge disruptive my-badge-class"
+    class="badge disruptive badge-medium my-badge-class"
+    data-testid="test-badge"
+  >
+    8
+  </span>
+</div>
+`;
+
+exports[`Badge Badge is large 1`] = `
+<div>
+  <span
+    class="badge badge-large my-badge-class"
+    data-testid="test-badge"
+  >
+    8
+  </span>
+</div>
+`;
+
+exports[`Badge Badge is medium 1`] = `
+<div>
+  <span
+    class="badge badge-medium my-badge-class"
+    data-testid="test-badge"
+  >
+    8
+  </span>
+</div>
+`;
+
+exports[`Badge Badge is small 1`] = `
+<div>
+  <span
+    class="badge badge-small my-badge-class"
     data-testid="test-badge"
   >
     8
@@ -25,7 +70,7 @@ exports[`Badge Badge is disruptive 1`] = `
 exports[`Badge Renders without crashing 1`] = `
 <div>
   <span
-    class="badge my-badge-class"
+    class="badge badge-medium my-badge-class"
     data-testid="test-badge"
   >
     8

src/components/Badge/badge.module.scss

@@ -1,13 +1,39 @@
 .badge {
-  @include octuple-h6();
   background-color: var(--badge-background-color);
   border-radius: var(--badge-border-radius);
   color: var(--badge-text-color);
   font-family: var(--badge-font-family);
+  font-size: $text-font-size-2;
+  font-weight: $text-font-weight-regular;
+  line-height: $text-line-height-2;
   padding: 0 $space-xxs;
   width: fit-content;
   height: fit-content;
 
+  &-large {
+    border-radius: calc(var(--badge-border-radius) + 2px);
+    font-size: $text-font-size-3;
+    font-weight: $text-font-weight-regular;
+    line-height: $text-line-height-3;
+    padding: $space-xxxs 5px;
+  }
+
+  &-medium {
+    border-radius: var(--badge-border-radius);
+    font-size: $text-font-size-2;
+    font-weight: $text-font-weight-regular;
+    line-height: $text-line-height-2;
+    padding: 0 $space-xxs;
+  }
+
+  &-small {
+    border-radius: calc(var(--badge-border-radius) - 2px);
+    font-size: $text-font-size-1;
+    font-weight: $text-font-weight-regular;
+    line-height: $text-line-height-1;
+    padding: 0 3px;
+  }
+
   &.active {
     background-color: var(--badge-active-background-color);
     color: var(--badge-active-text-color);

src/components/Button/button.module.scss

@@ -450,10 +450,12 @@
   line-height: $text-line-height-3;
 
   &.counter {
+    border-radius: $space-xs;
     font-size: $text-font-size-4;
     height: 24px;
     line-height: 24px;
     margin-left: $space-xs;
+    padding: 0 5px;
   }
 }
 
@@ -476,10 +478,12 @@
   line-height: $text-line-height-1;
 
   &.counter {
+    border-radius: $space-xxs;
     font-size: $text-font-size-1;
     height: 16px;
     line-height: 16px;
     margin-left: $space-xxs;
+    padding: 0 3px;
   }
 }
 

src/components/Tabs/tabs.module.scss

@@ -157,10 +157,12 @@
         padding: $button-padding-vertical-large $button-padding-horizontal-large;
 
         .badge {
+          border-radius: $space-xs;
           font-size: $text-font-size-3;
           height: $text-line-height-3;
           line-height: $text-line-height-3;
           margin-left: $space-xs;
+          padding: 0 5px;
         }
 
         .label {
@@ -202,10 +204,12 @@
         padding: $button-padding-vertical-small $button-padding-horizontal-small;
 
         .badge {
+          border-radius: $space-xxs;
           font-size: $text-font-size-1;
           height: $text-line-height-1;
           line-height: $text-line-height-1;
           margin-left: $space-xxs;
+          padding: 0 3px;
         }
 
         .label {

src/octuple.ts

@@ -14,7 +14,7 @@ import {
   StatusItemsPosition,
 } from './components/Avatar';
 
-import { Badge } from './components/Badge';
+import { Badge, BadgeSize } from './components/Badge';
 
 import { Breadcrumb } from './components/Breadcrumb';
 
@@ -252,6 +252,7 @@ export {
   AvatarGroupVariant,
   AvatarPopupProps,
   Badge,
+  BadgeSize,
   Breadcrumb,
   Breakpoints,
   Button,