New technique -- hide tooltip element when missing

storybookjs · Nov 17, 2020 · b431476 · b431476
1 parent 64b6334
commit b431476
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 13 deletions.
diff --git a/src/components/Input.js b/src/components/Input.js
@@ -225,19 +225,12 @@ const InputContainer = styled.div`
   `}
 `;
 
-const ErrorTooltipMessage = styled(TooltipMessage)`
-  width: 170px;
-`;
-
 const ErrorTooltip = styled(WithTooltip)`
   width: 100%;
-  ${(props) =>
-    !props.tooltip &&
-    `
-    ${ErrorTooltipMessage} {
-      display: none;
-    }
-  `}
+`;
+
+const ErrorTooltipMessage = styled(TooltipMessage)`
+  width: 170px;
 `;
 
 const Action = styled.div`

diff --git a/src/components/tooltip/WithTooltip.js b/src/components/tooltip/WithTooltip.js
@@ -20,6 +20,10 @@ const ButtonContainer = styled.button`
   text-decoration: none;
 `;
 
+const StyledTooltip = styled(Tooltip)`
+  ${(props) => !props.hasTooltipContent && `display: none;`}
+`;
+
 const isDescendantOfAction = (element) => {
   const { parentElement } = element;
 
@@ -132,7 +136,7 @@ function WithTooltip({
         arrowRef,
         placement: tooltipPlacement,
       }) => (
-        <Tooltip
+        <StyledTooltip
           hasChrome={hasChrome}
           placement={tooltipPlacement}
           tooltipRef={tooltipRef}
@@ -142,9 +146,10 @@ function WithTooltip({
           {...getTooltipProps()}
           id={id}
           role="tooltip"
+          hasTooltipContent={!!tooltip}
         >
           {typeof tooltip === 'function' ? tooltip({ onHide: closeTooltip }) : tooltip}
-        </Tooltip>
+        </StyledTooltip>
       )}
     >
       {({ getTriggerProps, triggerRef }) => (