add top padding to tag

mapbox · Aug 8, 2023 · 409ffd6 · 409ffd6
1 parent d6e79f9
commit 409ffd6
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 19 deletions.
diff --git a/...components/navigation-accordion/__tests__/__snapshots__/navigation-accordion.test.js.snap b/...components/navigation-accordion/__tests__/__snapshots__/navigation-accordion.test.js.snap
@@ -232,6 +232,7 @@ exports[`navigation-accordion Titles with tags renders as expected 1`] = `
               style={
                 Object {
                   "backgroundColor": "#CBE4FF",
+                  "paddingTop": 1,
                 }
               }
             >

diff --git a/src/components/overview-header/__tests__/__snapshots__/overview-header.test.js.snap b/src/components/overview-header/__tests__/__snapshots__/overview-header.test.js.snap
@@ -759,6 +759,7 @@ exports[`overview-header Beta product renders as expected 1`] = `
             style={
               Object {
                 "backgroundColor": "#CBE4FF",
+                "paddingTop": 1,
               }
             }
           >

diff --git a/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap b/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap
@@ -25,7 +25,7 @@ Array [
           id="dr-ui--page-layout-sidebar"
           style={
             Object {
-              "top": "84px",
+              "top": 88,
             }
           }
         >
@@ -883,7 +883,7 @@ Array [
           id="dr-ui--page-layout-sidebar"
           style={
             Object {
-              "top": "84px",
+              "top": 88,
             }
           }
         >
@@ -1919,7 +1919,7 @@ Array [
           id="dr-ui--page-layout-sidebar"
           style={
             Object {
-              "top": "84px",
+              "top": 88,
             }
           }
         >
@@ -2804,7 +2804,7 @@ Array [
           id="dr-ui--page-layout-sidebar"
           style={
             Object {
-              "top": "84px",
+              "top": 88,
             }
           }
         >
@@ -3623,7 +3623,7 @@ Array [
           id="dr-ui--page-layout-sidebar"
           style={
             Object {
-              "top": "84px",
+              "top": 88,
             }
           }
         >
@@ -3651,6 +3651,7 @@ Array [
                     style={
                       Object {
                         "backgroundColor": "#CBE4FF",
+                        "paddingTop": 1,
                       }
                     }
                   >

diff --git a/src/components/product-menu/__tests__/__snapshots__/product-menu.test.js.snap b/src/components/product-menu/__tests__/__snapshots__/product-menu.test.js.snap
@@ -32,6 +32,7 @@ exports[`product-menu Beta product renders as expected 1`] = `
       style={
         Object {
           "backgroundColor": "#CBE4FF",
+          "paddingTop": 1,
         }
       }
     >
@@ -66,6 +67,7 @@ exports[`product-menu Beta product renders as expected 2`] = `
       style={
         Object {
           "backgroundColor": "#CBE4FF",
+          "paddingTop": 1,
         }
       }
     >

diff --git a/src/components/tag/__tests__/__snapshots__/tag.test.js.snap b/src/components/tag/__tests__/__snapshots__/tag.test.js.snap
@@ -13,6 +13,7 @@ exports[`tag Beta tag renders as expected 1`] = `
   style={
     Object {
       "backgroundColor": "#CBE4FF",
+      "paddingTop": 1,
     }
   }
 >
@@ -30,7 +31,11 @@ exports[`tag Custom tag renders as expected 1`] = `
   onPointerDown={[Function]}
   onPointerLeave={[Function]}
   onPointerMove={[Function]}
-  style={Object {}}
+  style={
+    Object {
+      "paddingTop": 1,
+    }
+  }
 >
   LIMITED ACCESS
 </div>
@@ -49,6 +54,7 @@ exports[`tag small variant renders as expected 1`] = `
   style={
     Object {
       "backgroundColor": "#CBE4FF",
+      "paddingTop": 1,
     }
   }
 >

diff --git a/src/components/tag/tag.js b/src/components/tag/tag.js
@@ -19,7 +19,8 @@ export default class Tag extends React.PureComponent {
       <Tooltip content={theme.tooltipText} maxWidth="small" placement="top">
         <div
           style={{
-            ...theme.styles
+            ...theme.styles,
+            paddingTop: 1
           }}
           className={classnames(
             `round inline-block cursor-default txt-fancy-medium color-gray-dark`,

diff --git a/src/components/themes/__tests__/__snapshots__/themes.test.js.snap b/src/components/themes/__tests__/__snapshots__/themes.test.js.snap
@@ -11,7 +11,11 @@ exports[`themes Custom tag renders as expected 1`] = `
     onPointerDown={[Function]}
     onPointerLeave={[Function]}
     onPointerMove={[Function]}
-    style={Object {}}
+    style={
+      Object {
+        "paddingTop": 1,
+      }
+    }
   >
     Limited access
   </div>
@@ -24,7 +28,11 @@ exports[`themes Custom tag renders as expected 1`] = `
     onPointerDown={[Function]}
     onPointerLeave={[Function]}
     onPointerMove={[Function]}
-    style={Object {}}
+    style={
+      Object {
+        "paddingTop": 1,
+      }
+    }
   >
     Limited access
   </div>
@@ -37,7 +45,11 @@ exports[`themes Custom tag renders as expected 1`] = `
     onPointerDown={[Function]}
     onPointerLeave={[Function]}
     onPointerMove={[Function]}
-    style={Object {}}
+    style={
+      Object {
+        "paddingTop": 1,
+      }
+    }
   >
     <svg
       aria-hidden="true"
@@ -84,7 +96,11 @@ exports[`themes Custom tag renders as expected 1`] = `
     onPointerDown={[Function]}
     onPointerLeave={[Function]}
     onPointerMove={[Function]}
-    style={Object {}}
+    style={
+      Object {
+        "paddingTop": 1,
+      }
+    }
   >
     <svg
       aria-hidden="true"
@@ -268,6 +284,7 @@ exports[`themes beta renders as expected 1`] = `
     style={
       Object {
         "backgroundColor": "#CBE4FF",
+        "paddingTop": 1,
       }
     }
   >
@@ -285,6 +302,7 @@ exports[`themes beta renders as expected 1`] = `
     style={
       Object {
         "backgroundColor": "#CBE4FF",
+        "paddingTop": 1,
       }
     }
   >
@@ -302,6 +320,7 @@ exports[`themes beta renders as expected 1`] = `
     style={
       Object {
         "backgroundColor": "#CBE4FF",
+        "paddingTop": 1,
       }
     }
   >
@@ -353,6 +372,7 @@ exports[`themes beta renders as expected 1`] = `
     style={
       Object {
         "backgroundColor": "#CBE4FF",
+        "paddingTop": 1,
       }
     }
   >
@@ -538,7 +558,11 @@ exports[`themes fundamentals renders as expected 1`] = `
     onPointerDown={[Function]}
     onPointerLeave={[Function]}
     onPointerMove={[Function]}
-    style={Object {}}
+    style={
+      Object {
+        "paddingTop": 1,
+      }
+    }
   >
     FUNDAMENTALS
   </div>
@@ -551,7 +575,11 @@ exports[`themes fundamentals renders as expected 1`] = `
     onPointerDown={[Function]}
     onPointerLeave={[Function]}
     onPointerMove={[Function]}
-    style={Object {}}
+    style={
+      Object {
+        "paddingTop": 1,
+      }
+    }
   >
     FUNDAMENTALS
   </div>
@@ -564,7 +592,11 @@ exports[`themes fundamentals renders as expected 1`] = `
     onPointerDown={[Function]}
     onPointerLeave={[Function]}
     onPointerMove={[Function]}
-    style={Object {}}
+    style={
+      Object {
+        "paddingTop": 1,
+      }
+    }
   >
     <svg
       aria-hidden="true"
@@ -611,7 +643,11 @@ exports[`themes fundamentals renders as expected 1`] = `
     onPointerDown={[Function]}
     onPointerLeave={[Function]}
     onPointerMove={[Function]}
-    style={Object {}}
+    style={
+      Object {
+        "paddingTop": 1,
+      }
+    }
   >
     <svg
       aria-hidden="true"
@@ -726,7 +762,11 @@ exports[`themes legacy or warning renders as expected 1`] = `
     onPointerDown={[Function]}
     onPointerLeave={[Function]}
     onPointerMove={[Function]}
-    style={Object {}}
+    style={
+      Object {
+        "paddingTop": 1,
+      }
+    }
   >
     LEGACY
   </div>
@@ -739,7 +779,11 @@ exports[`themes legacy or warning renders as expected 1`] = `
     onPointerDown={[Function]}
     onPointerLeave={[Function]}
     onPointerMove={[Function]}
-    style={Object {}}
+    style={
+      Object {
+        "paddingTop": 1,
+      }
+    }
   >
     LEGACY
   </div>
@@ -752,7 +796,11 @@ exports[`themes legacy or warning renders as expected 1`] = `
     onPointerDown={[Function]}
     onPointerLeave={[Function]}
     onPointerMove={[Function]}
-    style={Object {}}
+    style={
+      Object {
+        "paddingTop": 1,
+      }
+    }
   >
     <svg
       aria-hidden="true"
@@ -799,7 +847,11 @@ exports[`themes legacy or warning renders as expected 1`] = `
     onPointerDown={[Function]}
     onPointerLeave={[Function]}
     onPointerMove={[Function]}
-    style={Object {}}
+    style={
+      Object {
+        "paddingTop": 1,
+      }
+    }
   >
     <svg
       aria-hidden="true"