feat: Add xsmall badge size

Royal-Navy · Mar 9, 2020 · f8b3eaf · f8b3eaf
1 parent a3d1f1f
commit f8b3eaf
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 1 deletion.
diff --git a/packages/css-framework/src/components/_badge.scss b/packages/css-framework/src/components/_badge.scss
@@ -9,6 +9,13 @@ $badge: (
 );
 
 $badge-sizes: (
+  xsmall: (
+    font-size: f.font-size("xs"),
+    font-weight: 700,
+    line-height: 1.4,
+    padding: f.spacing("px") f.spacing("2"),
+    padding-pill: f.spacing("px") f.spacing("2")
+  ),
   small: (
     font-size: f.font-size("s"),
     font-weight: 700,

diff --git a/packages/react-component-library/src/components/Badge/Badge.stories.tsx b/packages/react-component-library/src/components/Badge/Badge.stories.tsx
@@ -35,6 +35,7 @@ const badgeColorTextMap = {
 }
 
 const badgeSizeTextMap = {
+  [BADGE_SIZE.XSMALL]: 'XSmall',
   [BADGE_SIZE.SMALL]: 'Small',
   [BADGE_SIZE.REGULAR]: 'Regular',
   [BADGE_SIZE.LARGE]: 'Large',

diff --git a/packages/react-component-library/src/components/Badge/Badge.tsx b/packages/react-component-library/src/components/Badge/Badge.tsx
@@ -16,6 +16,7 @@ export type BadgeColorType =
   | typeof BADGE_COLOR.WARNING
 
 export type BadgeSizeType =
+  | typeof BADGE_SIZE.XSMALL
   | typeof BADGE_SIZE.SMALL
   | typeof BADGE_SIZE.REGULAR
   | typeof BADGE_SIZE.LARGE

diff --git a/packages/react-component-library/src/components/Badge/constants.ts b/packages/react-component-library/src/components/Badge/constants.ts
@@ -18,9 +18,10 @@ const BADGE_COLOR_VARIANT = {
 } as const
 
 const BADGE_SIZE = {
-  LARGE: 'large',
+  XSMALL: 'xsmall',
   SMALL: 'small',
   REGULAR: 'regular',
+  LARGE: 'large',
   XLARGE: 'xlarge',
 } as const