fix(PillDropdown): add z-index so that it always appears on top (#184)

Author: Eszter

src/components/Pill/PillDropdown/PillDropdown.js

@@ -18,8 +18,8 @@ const PillDropdown = React.forwardRef((props, ref) => {
     };
 
     return (
-        <div ref={ref} role="presentation">
-            <div role="dialog" {...rest} {...block(props)}>
+        <div ref={ref} role="presentation" {...rest} {...block(props)}>
+            <div role="dialog" {...elem('dialog', props)}>
                 <div {...elem('content', props)}>{children({ close })}</div>
                 <div {...elem('footer', props)}>
                     <Button context="primary" size="small" onClick={handleDoneClick}>

src/components/Pill/PillDropdown/PillDropdown.scss

@@ -14,14 +14,18 @@
 }
 
 .PillDropdown {
-    background: var(--color-background);
-    margin: var(--spacing-2x) 0;
-    border-radius: var(--border-radius);
-    border: 1px solid var(--color-neutral);
-    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
-    transform-origin: top left;
-    animation: dropdownAppear var(--transition-duration-quick) forwards;
-    animation-timing-function: linear;
+    z-index: 500;
+
+    &__dialog {
+        background: var(--color-background);
+        margin: var(--spacing-2x) 0;
+        border-radius: var(--border-radius);
+        border: 1px solid var(--color-neutral);
+        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+        transform-origin: top left;
+        animation: dropdownAppear var(--transition-duration-quick) forwards;
+        animation-timing-function: linear;
+    }
 
     &__content {
         padding: var(--pill-dropdown-padding);

src/components/Pill/PillDropdown/__tests__/__snapshots__/PillDropdown.spec.js.snap

@@ -7,10 +7,11 @@ exports[`<PillDropdown> component should render correctly 1`] = `
   noPadding={false}
 >
   <div
+    className="PillDropdown"
     role="presentation"
   >
     <div
-      className="PillDropdown"
+      className="PillDropdown__dialog"
       role="dialog"
     >
       <div

src/components/Pill/__tests__/__snapshots__/Pill.spec.js.snap

@@ -59,11 +59,12 @@ exports[`<Pill> component should open dropdown when button is clicked 1`] = `
     popupRef={
       Object {
         "current": <div
+          class="PillDropdown"
+          data-popup="true"
           role="presentation"
         >
           <div
-            class="PillDropdown"
-            data-popup="true"
+            class="PillDropdown__dialog"
             role="dialog"
           >
             <div
@@ -160,11 +161,12 @@ exports[`<Pill> component should open dropdown when button is clicked 1`] = `
       noPadding={false}
     >
       <div
+        className="PillDropdown"
+        data-popup="true"
         role="presentation"
       >
         <div
-          className="PillDropdown"
-          data-popup="true"
+          className="PillDropdown__dialog"
           role="dialog"
         >
           <div