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

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 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)
+
+
+### Bug Fixes
+
+* forward ref in clickableIcon ([#92](https://github.com/spaced-out/ui-design-system/issues/92)) ([8037aa4](https://github.com/spaced-out/ui-design-system/commit/8037aa4b4c5ee77076ea6a8dc002e5526e3d9da7))
+* tooltip fixes menu option accepts optionVariant override ([2d23b04](https://github.com/spaced-out/ui-design-system/commit/2d23b040885a5bf380c383e596647e76d988454b))
+
 ## [0.1.0](https://github.com/spaced-out/ui-design-system/compare/v0.0.68...v0.1.0) (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/Icon/ClickableIcon.js

@@ -14,7 +14,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const ClickableIcon = _ref => {
+const ClickableIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     size = 'medium',
     className,
@@ -35,13 +35,14 @@ const ClickableIcon = _ref => {
     className: (0, _classify.default)(_ClickableIconModule.default.button, {
       [_ClickableIconModule.default.small]: size === 'small',
       [_ClickableIconModule.default.medium]: size === 'medium'
-    }, className)
+    }, className),
+    ref: ref
   }), /*#__PURE__*/React.createElement(_.Icon, _extends({
     size: size
   }, props)));
-};
+});
 exports.ClickableIcon = ClickableIcon;
-const CloseIcon = _ref2 => {
+const CloseIcon = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     size = 'medium',
     type = 'regular',
@@ -53,6 +54,8 @@ const CloseIcon = _ref2 => {
     size: size,
     type: type,
     color: color
-  }, props));
-};
+  }, props, {
+    ref: ref
+  }));
+});
 exports.CloseIcon = CloseIcon;

package/lib/components/Icon/ClickableIcon.js.flow

@@ -13,38 +13,41 @@ import {Icon} from './';
 import css from './ClickableIcon.module.css';
 
 
-export const ClickableIcon = ({
-  size = 'medium',
-  className,
-  ariaLabel,
-  onClick,
-  ...props
-}: IconProps): React.Node => {
-  const onKeyDownHandler = (e) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      onClick && onClick(e);
-    }
-  };
-  return (
-    <UnstyledButton
-      {...props}
-      onClick={onClick}
-      onKeyDown={onKeyDownHandler}
-      ariaLabel={ariaLabel}
-      className={classify(
-        css.button,
-        {
-          [css.small]: size === 'small',
-          [css.medium]: size === 'medium',
-        },
-        className,
-      )}
-    >
-      <Icon size={size} {...props} />
-    </UnstyledButton>
-  );
-};
+export const ClickableIcon: React$AbstractComponent<
+  IconProps,
+  HTMLButtonElement,
+> = React.forwardRef<IconProps, HTMLButtonElement>(
+  (
+    {size = 'medium', className, ariaLabel, onClick, ...props}: IconProps,
+    ref,
+  ) => {
+    const onKeyDownHandler = (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        onClick && onClick(e);
+      }
+    };
+    return (
+      <UnstyledButton
+        {...props}
+        onClick={onClick}
+        onKeyDown={onKeyDownHandler}
+        ariaLabel={ariaLabel}
+        className={classify(
+          css.button,
+          {
+            [css.small]: size === 'small',
+            [css.medium]: size === 'medium',
+          },
+          className,
+        )}
+        ref={ref}
+      >
+        <Icon size={size} {...props} />
+      </UnstyledButton>
+    );
+  },
+);
 
 export type CloseIconProps = {
   size?: IconSize,
@@ -55,17 +58,26 @@ export type CloseIconProps = {
   ariaLabel?: string,
 };
 
-export const CloseIcon = ({
-  size = 'medium',
-  type = 'regular',
-  color = TEXT_COLORS.primary,
-  ...props
-}: CloseIconProps): React.Node => (
-  <ClickableIcon
-    name="close"
-    size={size}
-    type={type}
-    color={color}
-    {...props}
-  />
+export const CloseIcon: React$AbstractComponent<
+  CloseIconProps,
+  HTMLButtonElement,
+> = React.forwardRef<CloseIconProps, HTMLButtonElement>(
+  (
+    {
+      size = 'medium',
+      type = 'regular',
+      color = TEXT_COLORS.primary,
+      ...props
+    }: CloseIconProps,
+    ref,
+  ) => (
+    <ClickableIcon
+      name="close"
+      size={size}
+      type={type}
+      color={color}
+      {...props}
+      ref={ref}
+    />
+  ),
 );

package/lib/components/Menu/Menu.js.flow

@@ -26,6 +26,7 @@ export type MenuOption = {
   iconRightType?: IconType,
   disabled?: boolean,
   optionSize?: MenuSizeTypes,
+  optionVariant?: MenuOptionsVariant,
 };
 
 // Render first available option set

package/lib/components/Menu/MenuOptionButton.js

@@ -37,7 +37,8 @@ const MenuOptionButton = props => {
     iconRight,
     iconRightType,
     disabled,
-    optionSize
+    optionSize,
+    optionVariant = optionsVariant
   } = option;
   const [buttonSize, setButtonSize] = React.useState(optionSize || size);
   const isSelected = () => {
@@ -61,11 +62,11 @@ const MenuOptionButton = props => {
     disabled: menuDisabled || disabled,
     onClick: () => onSelect && onSelect(option),
     autoFocus: selectedOption?.key === key
-  }, optionsVariant === 'checkbox' && /*#__PURE__*/React.createElement(_Checkbox.Checkbox, {
+  }, optionVariant === 'checkbox' && /*#__PURE__*/React.createElement(_Checkbox.Checkbox, {
     tabIndex: -1,
     disabled: menuDisabled || disabled,
     checked: isSelected()
-  }), optionsVariant === 'radio' && /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
+  }), optionVariant === 'radio' && /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
     disabled: menuDisabled || disabled,
     value: option.key,
     selectedValue: selectedKeys?.[0],

package/lib/components/Menu/MenuOptionButton.js.flow

@@ -40,6 +40,7 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
     iconRightType,
     disabled,
     optionSize,
+    optionVariant = optionsVariant,
   } = option;
   const [buttonSize, setButtonSize] = React.useState(optionSize || size);
   const isSelected = () => {
@@ -72,14 +73,14 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
       onClick={() => onSelect && onSelect(option)}
       autoFocus={selectedOption?.key === key}
     >
-      {optionsVariant === 'checkbox' && (
+      {optionVariant === 'checkbox' && (
         <Checkbox
           tabIndex={-1}
           disabled={menuDisabled || disabled}
           checked={isSelected()}
         />
       )}
-      {optionsVariant === 'radio' && (
+      {optionVariant === 'radio' && (
         <RadioButton
           disabled={menuDisabled || disabled}
           value={option.key}

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,
@@ -72,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
@@ -88,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,7 +86,9 @@ 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({
     placement,
@@ -126,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.0",
+  "version": "0.1.2",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {