**Fix:** Add size restriction to Hint (#992)

* Add a11y to Hint * Add extreme example * Add size restriction to Tooltip * Remove paragraph style * Remove stupidity
contiamo · Apr 24, 2019 · f51be18 · f51be18
1 parent af7f769
commit f51be18
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 11 deletions.
diff --git a/src/Hint/Hint.tsx b/src/Hint/Hint.tsx
@@ -50,7 +50,7 @@ const HintTooltip: React.SFC<{ position: HintProps["tooltipPosition"]; textId: H
 }
 
 const Hint: React.SFC<HintProps> = props => (
-  <Container {...props}>
+  <Container aria-label={typeof props.children === "string" ? props.children : undefined} {...props}>
     <Icon name="Question" size={12} />
     <HintTooltip position={props.tooltipPosition!} textId={props.textId}>
       {props.children}

diff --git a/src/Hint/README.md b/src/Hint/README.md
@@ -18,3 +18,30 @@ import { Hint } from "@operational/components"
   <Hint right>Pretty confusing..</Hint>
 </>
 ```
+
+### Extreme Cases
+
+```jsx
+import * as React from "react"
+import { Hint } from "@operational/components"
+;<>
+  <div>
+    <span>I shouldn't look broken</span>
+    <Hint right tooltipPosition="smart">
+      <ul>
+        {Array(1000)
+          .fill(null)
+          .map((_, index) => (
+            <li key={index}>Project {index + 1}</li>
+          ))}
+      </ul>
+    </Hint>
+  </div>
+  <div>
+    <span>I shouldn't either</span>
+    <Hint right tooltipPosition="smart">
+      <img alt="HUGE IMAGE" src="https://placehold.it/1920x1080" />
+    </Hint>
+  </div>
+</>
+```
diff --git a/src/Tooltip/Tooltip.Container.tsx b/src/Tooltip/Tooltip.Container.tsx
@@ -88,13 +88,6 @@ export const Container = styled("div")<{
     zIndex: theme.zIndex.tooltip,
     borderRadius: 2,
     boxShadow: "0 2px 6px rgba(0, 0, 0, .15)",
-    "& > p": {
-      fontSize: 11,
-      lineHeight: 1.3,
-      margin: 0,
-      padding: "2px 6px",
-      textAlign: "center",
-    },
     ...(offScreenWidthTest
       ? {
           width: "fit-content",
@@ -117,7 +110,7 @@ export const Container = styled("div")<{
       top: 0,
       left: -32,
       display: "block",
-      width: -32,
+      width: 32,
       height: "100%",
     },
     // They say behind every great tooltip is a great caret.

diff --git a/src/Tooltip/Tooltip.tsx b/src/Tooltip/Tooltip.tsx
@@ -2,6 +2,7 @@ import * as React from "react"
 
 import { DefaultProps } from "../types"
 import useWindowSize from "../useWindowSize"
+import styled from "../utils/styled"
 import Container, { Position } from "./Tooltip.Container"
 
 /**
@@ -135,6 +136,26 @@ const getDisplayPosition = (windowSize: { width: number; height: number }, state
  */
 export const dangerousTooltipContainerClassName = "operational-ui-tooltip"
 
+const SizeRestriction = styled("div")`
+  max-height: 80vh;
+  max-width: 80vw;
+  overflow: auto;
+  width: fit-content;
+  height: 100%;
+
+  img {
+    max-width: 100%;
+  }
+
+  p {
+    font-size: ${({ theme }) => theme.font.size.tiny}px;
+    line-height: 1.3;
+    margin: 0;
+    padding: 2px 6px;
+    text-align: center;
+  }
+`
+
 const Tooltip: React.SFC<TooltipProps> = props => {
   const containerNode = React.useRef<HTMLDivElement>(null)
   const offScreenWidthTestNode = React.useRef<HTMLDivElement>(null)
@@ -186,8 +207,10 @@ const Tooltip: React.SFC<TooltipProps> = props => {
         position={displayPosition}
         ref={containerNode}
       >
-        {/* Wrapping in a paragraph tag is necessary in order to have Safari read the correct single line width. */}
-        <p id={props.textId}>{props.children}</p>
+        <SizeRestriction>
+          {/* Wrapping in a paragraph tag is necessary in order to have Safari read the correct single line width. */}
+          <p id={props.textId}>{props.children}</p>
+        </SizeRestriction>
       </Container>
     </>
   )