From 7cb790bd386da6f1847292d53b799d776bc20ac2 Mon Sep 17 00:00:00 2001
From: Osmose <osmose@glitch.com>
Date: Sat, 11 Jul 2020 11:38:46 -0700
Subject: [PATCH 1/2] Add clock and info icons.

---
 lib/icon.js | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/lib/icon.js b/lib/icon.js
index 76d468c..79f2d3c 100644
--- a/lib/icon.js
+++ b/lib/icon.js
@@ -63,6 +63,12 @@ const svgs = {
   chevronLeft: (props) => <Chevron rotate="180" {...props} />,
   chevronRight: (props) => <Chevron rotate="0" {...props} />,
   chevronUp: (props) => <Chevron rotate="-90" {...props} />,
+  clock: (props) => (
+    <SVGBase viewBox="0 0 19 20" {...props}>
+      <path d="M9.68121 0.833252C4.76352 0.833252 0.78125 4.93992 0.78125 9.99992C0.78125 15.0599 4.76352 19.1666 9.68121 19.1666C14.6078 19.1666 18.599 15.0599 18.599 9.99992C18.599 4.93992 14.6078 0.833252 9.68121 0.833252ZM9.69012 17.3333C5.7524 17.3333 2.56302 14.0516 2.56302 9.99992C2.56302 5.94825 5.7524 2.66659 9.69012 2.66659C13.6278 2.66659 16.8172 5.94825 16.8172 9.99992C16.8172 14.0516 13.6278 17.3333 9.69012 17.3333Z" fill="currentColor"/>
+      <path d="M10.1361 5.41675H8.7998V10.9167L13.477 13.8042L14.1451 12.6767L10.1361 10.2292V5.41675Z" fill="currentColor"/>
+    </SVGBase>
+  ),
   collapse: (props) => (
     <SVGBase viewBox="0 0 14 12" {...props}>
       <rect x="0.5" y="0.5" width="13" height="11" rx="3" stroke="currentColor" strokeWidth="1" fill="none" />
@@ -103,6 +109,11 @@ const svgs = {
       />
     </SVGBase>
   ),
+  info: (props) => (
+    <SVGBase viewBox="0 0 14 14" {...props}>
+      <path d="M6.99902 0C3.13502 0 -0.000976562 3.136 -0.000976562 7C-0.000976562 10.864 3.13502 14 6.99902 14C10.863 14 13.999 10.864 13.999 7C13.999 3.136 10.863 0 6.99902 0ZM7.69902 10.5H6.29902V6.3H7.69902V10.5ZM7.69902 4.9H6.29902V3.5H7.69902V4.9Z" fill="currentColor" />
+    </SVGBase>
+  ),
   octocat: (props) => (
     <SVGBase viewBox="-194 298 16 15" {...props}>
       <path
@@ -182,16 +193,16 @@ const svgs = {
       />
     </SVGBase>
   ),
-  x: (props) => (
-    <SVGBase viewBox="0 0 64 64" {...props}>
-      <path d="M8,8 L56,56 M8,56 L56,8" stroke="currentColor" fill="none" strokeWidth="12" />
-    </SVGBase>
-  ),
   textLightningBolt: (props) => (
     <SVGBase viewBox="0 0 11 15" {...props}>
       <path d="M0 8.44221L8.30935 0L4.7482 6.03015L11 5.80402L0.316547 15L5.46043 8.1407L0 8.44221Z" fill="currentColor"/>
     </SVGBase>
   ),
+  x: (props) => (
+    <SVGBase viewBox="0 0 64 64" {...props}>
+      <path d="M8,8 L56,56 M8,56 L56,8" stroke="currentColor" fill="none" strokeWidth="12" />
+    </SVGBase>
+  ),
 };
 /* eslint-enable react/display-name */
 

From fe7f9c9643f48efad3de9d9135d7074f3799c609 Mon Sep 17 00:00:00 2001
From: Osmose <osmose@glitch.com>
Date: Sat, 11 Jul 2020 08:57:47 -0700
Subject: [PATCH 2/2] Position tooltip arrow correctly for multi-line tooltips
 on top.

When the height of the tooltip is larger than one line of text, the top-based
positioning of the tooltip arrow doesn't reach the bottom of the tooltip box
anymore. By positioning the arrow using `bottom`, it can be locked to the
bottom of the box regardless of its height.
---
 lib/tooltip.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/lib/tooltip.js b/lib/tooltip.js
index 9aa8320..909d9af 100644
--- a/lib/tooltip.js
+++ b/lib/tooltip.js
@@ -83,7 +83,7 @@ const TooltipBase = styled.div`
         border-bottom-color: transparent;
         margin-top: -6px;
         transform: translateX(-50%) translateY(100%);
-        top: 85%;
+        bottom: 0;
       }
     `}
   ${({ left }) =>
@@ -397,7 +397,7 @@ export const StoryTooltipContainer = () => {
       />
 
       <TooltipContainer align={['top', 'right']} target={<button>Top right persistent tooltip</button>} tooltip="Click me" type="info" />
-      
+
       `}</CodeExample>
       <PropsDefinition>
         <Prop name="type" required>
@@ -432,6 +432,7 @@ export const StoryTooltipContainer = () => {
       <TooltipContainer target={<button>Default aligned tooltip</button>} tooltip="Such center!" type="info" />
       <TooltipContainer align={['right']} target={<button>Right tooltip</button>} tooltip="Important info!" type="info" />
       <TooltipContainer align={['top']} persistent target={<button>Top tooltip</button>} tooltip="Click me" type="info" />
+      <TooltipContainer align={['top']} persistent target={<button>Multi-line tooltip</button>} tooltip={'Multi\nline\ntooltip'} type="info" />
       <TooltipContainer align={['top', 'right']} persistent target={<button>Top right persistent tooltip</button>} tooltip="Click me" type="info" />
     </>
   );