Merge pull request #352 from simenko/fix/582503-styled-tooltip

Fix/582503 styled tooltip
ZEISS · Oct 15, 2021 · 8a9fa8a · 8a9fa8a
2 parents 5ce2b09 + 4c4b4a8
commit 8a9fa8a
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Precise UI Changelog
 
+## 2.1.2
+
+- Fix Flyout container styles, add an example
+- Improve arrow rendering on some displays
+
 ## 2.1.1
 
 - Fix Flyout styling when extended with styled components

diff --git a/integration/__image_snapshots__/Flyout_3-snap.png b/integration/__image_snapshots__/Flyout_3-snap.png
diff --git a/integration/__image_snapshots__/Tooltip_3-snap.png b/integration/__image_snapshots__/Tooltip_3-snap.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "precise-ui",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Precise UI React component library powered by Styled Components.",
   "keywords": [
     "react",

diff --git a/src/components/Flyout/index.tsx b/src/components/Flyout/index.tsx
@@ -30,7 +30,7 @@ const FlyoutBody = styled.div(
       ${getFontStyle({ size: 'medium' })}
       z-index: 100;
       position: absolute;
-      box-shadow: 0 2qpx 6px 0 rgba(75, 78, 82, 0.2);
+      box-shadow: 0 2px 6px 0 rgba(75, 78, 82, 0.2);
       border: 1px solid ${theme.ui4};
       overflow: visible;
       &[data-popper-reference-hidden='true'] {
@@ -53,7 +53,7 @@ const FlyoutArrow = styled.div(
       :before {
         content: ' ';
         position: absolute;
-        top: ${theme.flyout.arrowSize}px;
+        top: ${theme.flyout.arrowSize + 0.5}px;
         left: 0;
         border-style: solid;
         border-width: ${theme.flyout.arrowSize / 2}px;
@@ -63,11 +63,10 @@ const FlyoutArrow = styled.div(
       :after {
         content: ' ';
         position: absolute;
-        top: ${theme.flyout.arrowSize}px;
-        left: 0;
+        top: ${theme.flyout.arrowSize - 0.5}px;
+        left: 0.5px;
         border-style: solid;
-        border-width: ${theme.flyout.arrowSize / 2 - 1}px;
-        margin-left: 1px;
+        border-width: ${theme.flyout.arrowSize / 2 - 0.5}px;
         border-color: ${theme.flyout.background} transparent transparent transparent;
       }
     `,
@@ -156,7 +155,9 @@ const FlyoutInt: React.FC<FlyoutProps & WithClickOutsideFCProps> = props => {
         <FlyoutBody ref={setPopperElement} style={styles.popper} {...attributes.popper} {...restProps}>
           {/* Normally a styled component gets the theme from context. But some other component
           may pass a customized theme as a prop. See example at Tooltip component */}
-          <FlyoutContent theme={theme}>{content}</FlyoutContent>
+          <FlyoutContent theme={theme} {...restProps}>
+            {content}
+          </FlyoutContent>
           <FlyoutArrow
             theme={theme}
             ref={setArrowElement}

diff --git a/src/components/Tooltip/Example.md b/src/components/Tooltip/Example.md
@@ -11,3 +11,21 @@ const { Tooltip, Avatar } = require('precise-ui');
 ```
 
 The tooltip needs to wrap the content for which it needs to present some content. This pattern ensures the autoplacement and managed mode (on hover) is applied correctly.
+
+**Styled**
+
+We can use `styled()` wrapper to customize Tooltip appearance
+
+```jsx
+const { styled, Tooltip, Avatar } = require('precise-ui');
+
+const StyledTooltip = styled(Tooltip)`
+  min-width: 350px;
+  display: flex;
+  justify-content: center;
+}`;
+
+<StyledTooltip content="Tooltip content" position="right">
+  <Avatar initials="R" description="Sample" size="x-small" />
+</StyledTooltip>
+```