@spaced-out/ui-design-system 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.2](https://github.com/spaced-out/ui-design-system/compare/v0.1.1...v0.1.2) (2023-03-31)
+
+
+### Bug Fixes
+
+* tooltip elevation fixes ([09fd443](https://github.com/spaced-out/ui-design-system/commit/09fd44388a30d4a5753c5cb30bcc8f8e8b564d46))
+
 ### [0.1.1](https://github.com/spaced-out/ui-design-system/compare/v0.1.0...v0.1.1) (2023-03-31)
 
 

package/design-tokens/elevation/app-elevation.json

@@ -17,6 +17,9 @@
     },
     "toast": {
       "value": "{baseElevation.60.value}"
+    },
+    "tooltip": {
+      "value": "{baseElevation.4.value}"
     }
   }
 }

package/lib/components/Tooltip/Tooltip.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Tooltip = exports.DELAY_MOTION_DURATION_TYPES = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
 var _reactDomInteractions = require("@floating-ui/react-dom-interactions");
+var ELEVATION = _interopRequireWildcard(require("../../styles/variables/_elevation"));
 var MOTION = _interopRequireWildcard(require("../../styles/variables/_motion"));
 var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
@@ -36,8 +38,10 @@ const Tooltip = _ref => {
     placement = 'top',
     bodyMaxLines = 2,
     titleMaxLines = 1,
-    delayMotionDuration = 'none'
+    delayMotionDuration = 'none',
+    elevation = ELEVATION['elevationTooltip']
   } = _ref;
+  const bodyRef = React.useRef(document.querySelector('body'));
   const [open, setOpen] = React.useState(false);
   const {
     x,
@@ -47,7 +51,6 @@ const Tooltip = _ref => {
     strategy,
     context
   } = (0, _reactDomInteractions.useFloating)({
-    strategy: 'fixed',
     placement,
     open,
     onOpenChange: setOpen,
@@ -73,13 +76,14 @@ const Tooltip = _ref => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(children, getReferenceProps({
     ref,
     ...children.props
-  })), open && /*#__PURE__*/React.createElement("div", _extends({
+  })), open && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/React.createElement("div", _extends({
     ref: floating,
     className: (0, _classify.classify)(_TooltipModule.default.tooltip, classNames?.tooltip),
     style: {
       position: strategy,
       top: y ?? _space.spaceNone,
-      left: x ?? _space.spaceNone
+      left: x ?? _space.spaceNone,
+      '--tooltip-elevation': elevation
     }
   }, getFloatingProps()), !!title && /*#__PURE__*/React.createElement(_Truncate.Truncate, {
     line: titleMaxLines
@@ -89,6 +93,6 @@ const Tooltip = _ref => {
     line: bodyMaxLines
   }, /*#__PURE__*/React.createElement(_Text.BodyMedium, {
     color: !title ? 'inversePrimary' : 'inverseSecondary'
-  }, body))));
+  }, body))), bodyRef.current));
 };
 exports.Tooltip = Tooltip;

package/lib/components/Tooltip/Tooltip.js.flow

@@ -1,6 +1,8 @@
 // @flow strict
 
 import * as React from 'react';
+// $FlowFixMe[untyped-import]
+import {createPortal} from 'react-dom';
 import {
   // $FlowFixMe[untyped-import]
   autoUpdate,
@@ -24,6 +26,7 @@ import {
   useRole,
 } from '@floating-ui/react-dom-interactions';
 
+import * as ELEVATION from '../../styles/variables/_elevation';
 import * as MOTION from '../../styles/variables/_motion';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
@@ -71,6 +74,7 @@ export type TooltipProps = {
   // TODO(Nishant): Decide on a type to use
   // $FlowFixMe
   children: any,
+  elevation?: string,
 };
 
 export const Tooltip = ({
@@ -82,10 +86,11 @@ export const Tooltip = ({
   bodyMaxLines = 2,
   titleMaxLines = 1,
   delayMotionDuration = 'none',
+  elevation = ELEVATION['elevationTooltip'],
 }: TooltipProps): React.Node => {
+  const bodyRef = React.useRef(document.querySelector('body'));
   const [open, setOpen] = React.useState(false);
   const {x, y, reference, floating, strategy, context} = useFloating({
-    strategy: 'fixed',
     placement,
     open,
     onOpenChange: setOpen,
@@ -127,36 +132,39 @@ export const Tooltip = ({
           ...children.props,
         }),
       )}
-      {open && (
-        <div
-          ref={floating}
-          className={classify(css.tooltip, classNames?.tooltip)}
-          style={{
-            position: strategy,
-            top: y ?? spaceNone,
-            left: x ?? spaceNone,
-          }}
-          {...getFloatingProps()}
-        >
-          {!!title && (
-            <Truncate line={titleMaxLines}>
-              <SubTitleExtraSmall color="inversePrimary">
-                {title}
-              </SubTitleExtraSmall>
-            </Truncate>
-          )}
+      {open &&
+        createPortal(
+          <div
+            ref={floating}
+            className={classify(css.tooltip, classNames?.tooltip)}
+            style={{
+              position: strategy,
+              top: y ?? spaceNone,
+              left: x ?? spaceNone,
+              '--tooltip-elevation': elevation,
+            }}
+            {...getFloatingProps()}
+          >
+            {!!title && (
+              <Truncate line={titleMaxLines}>
+                <SubTitleExtraSmall color="inversePrimary">
+                  {title}
+                </SubTitleExtraSmall>
+              </Truncate>
+            )}
 
-          {!!body && (
-            <Truncate line={bodyMaxLines}>
-              <BodyMedium
-                color={!title ? 'inversePrimary' : 'inverseSecondary'}
-              >
-                {body}
-              </BodyMedium>
-            </Truncate>
-          )}
-        </div>
-      )}
+            {!!body && (
+              <Truncate line={bodyMaxLines}>
+                <BodyMedium
+                  color={!title ? 'inversePrimary' : 'inverseSecondary'}
+                >
+                  {body}
+                </BodyMedium>
+              </Truncate>
+            )}
+          </div>,
+          bodyRef.current,
+        )}
     </>
   );
 };

package/lib/components/Tooltip/Tooltip.module.css

@@ -2,8 +2,10 @@
 @value (size300) from '../../styles/variables/_size.css';
 @value (spaceXSmall, spaceSmall, spaceXXSmall) from '../../styles/variables/_space.css';
 @value (borderRadiusSmall) from '../../styles/variables/_border.css';
+@value (elevationTooltip) from '../../styles/variables/_elevation.css';
 
 .tooltip {
+  --tooltip-elevation: elevationTooltip;
   display: flex;
   flex-flow: column;
   max-width: size300;
@@ -13,4 +15,5 @@
   pointer-events: none;
   border-radius: borderRadiusSmall;
   word-wrap: break-word;
+  z-index: var(--tooltip-elevation);
 }

package/lib/styles/variables/_elevation.css

@@ -9,3 +9,5 @@
 @value elevationModal: 40;
 
 @value elevationToast: 60;
+
+@value elevationTooltip: 4;

package/lib/styles/variables/_elevation.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = exports.elevationBackdrop = void 0;
+exports.elevationTooltip = exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = exports.elevationBackdrop = void 0;
 
 const elevationNone = '0';
 exports.elevationNone = elevationNone;
@@ -16,4 +16,6 @@ exports.elevationBackdrop = elevationBackdrop;
 const elevationModal = '40';
 exports.elevationModal = elevationModal;
 const elevationToast = '60';
-exports.elevationToast = elevationToast;
+exports.elevationToast = elevationToast;
+const elevationTooltip = '4';
+exports.elevationTooltip = elevationTooltip;

package/lib/styles/variables/_elevation.js.flow

@@ -11,3 +11,5 @@ export const elevationBackdrop = '40';
 export const elevationModal = '40';
 
 export const elevationToast = '60';
+
+export const elevationTooltip = '4';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {