fix: pill: ensure pill heights match latest design specification (#626)

* fix: pill: ensure pill heights match latest design specification

* chore: pill: address pr feedback and move pill border radius to global css var

src/components/Pills/Pill.tsx

@@ -63,6 +63,7 @@ export const Pill: FC<PillProps> = React.forwardRef(
 
     const labelClassNames: string = mergeClasses([
       styles.label,
+      { [styles.large]: size === PillSize.Large },
       { [styles.medium]: size === PillSize.Medium },
       { [styles.small]: size === PillSize.Small },
       { [styles.xsmall]: size === PillSize.XSmall },
@@ -73,6 +74,9 @@ export const Pill: FC<PillProps> = React.forwardRef(
       styles.tagPills,
       classNames,
       (styles as any)[theme],
+      { [styles.large]: size === PillSize.Large },
+      { [styles.medium]: size === PillSize.Medium },
+      { [styles.small]: size === PillSize.Small },
       { [styles.xsmall]: size === PillSize.XSmall },
       { [styles.tagPillsDisabled]: mergedDisabled },
       { [styles.tagPillsRtl]: htmlDir === 'rtl' },

src/components/Pills/__snapshots__/Pill.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Pill Pill should render as closable 1`] = `
 <div>
   <div
-    class="tag-pills blue"
+    class="tag-pills blue medium"
   >
     <span
       class="label medium"
@@ -38,7 +38,7 @@ exports[`Pill Pill should render as closable 1`] = `
 exports[`Pill Pill should render normally 1`] = `
 <div>
   <div
-    class="tag-pills blue read-only"
+    class="tag-pills blue medium read-only"
   >
     <span
       class="label medium"
@@ -52,7 +52,7 @@ exports[`Pill Pill should render normally 1`] = `
 exports[`Pill Pill should render with a theme 1`] = `
 <div>
   <div
-    class="tag-pills white read-only"
+    class="tag-pills white medium read-only"
   >
     <span
       class="label medium"
@@ -66,7 +66,7 @@ exports[`Pill Pill should render with a theme 1`] = `
 exports[`Pill Pill should render with button 1`] = `
 <div>
   <div
-    class="tag-pills blue"
+    class="tag-pills blue medium"
   >
     <span
       class="label medium"
@@ -109,7 +109,7 @@ exports[`Pill Pill should render with button 1`] = `
 exports[`Pill Pill should render with icon 1`] = `
 <div>
   <div
-    class="tag-pills blue read-only"
+    class="tag-pills blue medium read-only"
   >
     <span
       aria-hidden="false"
@@ -139,7 +139,7 @@ exports[`Pill Pill should render with icon 1`] = `
 exports[`Pill Pill should render with icon to the end of its label 1`] = `
 <div>
   <div
-    class="tag-pills blue read-only"
+    class="tag-pills blue medium read-only"
   >
     <span
       class="label medium"

src/components/Pills/pills.module.scss

@@ -3,8 +3,8 @@
   --label: var(--blue-color);
   --hover-bg: var(--blue-background3-color);
   --hover-label: var(--text-primary-color);
-  padding: $space-xxs $space-s;
-  border-radius: $border-radius-m;
+  padding: 5px $space-xs;
+  border-radius: var(--pill-medium-size-border-radius);
   transition: all $motion-duration-extra-fast $motion-easing-easeinout 0s;
   background: var(--bg);
   color: var(--label);
@@ -13,17 +13,23 @@
   align-items: center;
 
   .label {
-    font-family: $octuple-font-family;
-    font-size: $text-font-size-5;
+    font-family: var(--font-stack-full);
     font-weight: $text-font-weight-semibold;
 
+    &.large {
+      font-size: $text-font-size-5;
+      line-height: $text-line-height-3;
+    }
+
     &.medium {
       font-size: $text-font-size-3;
+      line-height: $text-line-height-2;
     }
 
     &.small,
     &.xsmall {
       font-size: $text-font-size-2;
+      line-height: $text-line-height-1;
     }
 
     &.line-clamp {
@@ -120,7 +126,35 @@
     --bg: var(--white-color);
     --label: var(--grey-tertiary-color);
     --hover-bg: var(--grey-background1-color);
-    border: 1px solid var(--grey-tertiary-color);
+
+    &:not(.xsmall) {
+      border: 1px solid var(--grey-tertiary-color);
+    }
+  }
+
+  &.large {
+    border-radius: var(--pill-large-size-border-radius);
+    padding: 10px $space-xs;
+  }
+
+  &.medium {
+    border-radius: var(--pill-medium-size-border-radius);
+    padding: 5px $space-xs;
+  }
+
+  &.small {
+    border-radius: var(--pill-small-size-border-radius);
+    padding: $space-xxs $space-xxs;
+  }
+
+  &.xsmall {
+    border-radius: var(--pill-xsmall-size-border-radius);
+    padding: $space-xxs $space-xxs;
+  }
+
+  &.small,
+  &.xsmall {
+    padding: $space-xxs $space-xxs;
   }
 
   &:hover:not(.tag-pills-disabled) {

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

@@ -82,7 +82,7 @@ exports[`Select Renders with default values when multiple 1`] = `
       class="multi-select-pills"
     >
       <div
-        class="tag-pills multi-select-pill blue-green"
+        class="tag-pills multi-select-pill blue-green medium"
         id="selectPillOption 2-1"
         style="visibility: hidden;"
       >
@@ -114,7 +114,7 @@ exports[`Select Renders with default values when multiple 1`] = `
         </button>
       </div>
       <div
-        class="tag-pills multi-select-pill blue-green"
+        class="tag-pills multi-select-pill blue-green medium"
         id="selectPillOption 3-2"
         style="visibility: hidden;"
       >

src/styles/themes/_default-theme.scss

@@ -1040,4 +1040,11 @@
   --message-bar-text-color: var(--text-primary-color);
   --message-bar-warning-color: var(--orange-color-70);
   // ------ Message Bar theme ------
+
+  // ------ Pill theme ------
+  --pill-large-size-border-radius: var(--border-radius-m);
+  --pill-medium-size-border-radius: 6px;
+  --pill-small-size-border-radius: var(--border-radius-s);
+  --pill-xsmall-size-border-radius: var(--border-radius-s);
+  // ------ Pill theme ------
 }