@spaced-out/ui-design-system 0.1.20 → 0.1.22

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.22](https://github.com/spaced-out/ui-design-system/compare/v0.1.21...v0.1.22) (2023-04-25)
+
+
+### Bug Fixes
+
+* add tooltip for option button ([#106](https://github.com/spaced-out/ui-design-system/issues/106)) ([aa9a91f](https://github.com/spaced-out/ui-design-system/commit/aa9a91f7fd9e65336d4f617790fe26077884b8d8))
+* hidden prop support in tooltip ([49b7c21](https://github.com/spaced-out/ui-design-system/commit/49b7c2123b367d1e2e50253380700688ab7d01cd))
+
+### [0.1.21](https://github.com/spaced-out/ui-design-system/compare/v0.1.20...v0.1.21) (2023-04-24)
+
+
+### Features
+
+* style-dictionary build process changes and global style variable export from styles/index.css ([9a7f418](https://github.com/spaced-out/ui-design-system/commit/9a7f418fa6da4d1266034ee56bd5e052361c809e))
+
 ### [0.1.20](https://github.com/spaced-out/ui-design-system/compare/v0.1.19...v0.1.20) (2023-04-24)
 
 

package/config.js

@@ -40,7 +40,18 @@ module.exports = {
         },
       })),
     },
-    js: {
+    'css/global': {
+      transforms: ['attribute/cti', 'name/cti/camel'],
+      buildPath: `src/styles/`,
+      files: [
+        {
+          destination: `index.css`,
+          format: `customCssFormat`,
+          filter: ({attributes}) => !attributes.category.includes('base'),
+        },
+      ],
+    },
+    'js/category': {
       transforms: ['attribute/cti', 'name/cti/camel'],
       transformGroup: 'js',
       buildPath: `src/styles/variables/`,
@@ -54,5 +65,17 @@ module.exports = {
         },
       })),
     },
+    'js/global': {
+      transforms: ['attribute/cti', 'name/cti/camel'],
+      transformGroup: 'js',
+      buildPath: `src/styles/`,
+      files: [
+        {
+          destination: `index.js`,
+          format: `customJsFormat`,
+          filter: ({attributes}) => !attributes.category.includes('base'),
+        },
+      ],
+    },
   },
 };

package/lib/components/ButtonDropdown/ButtonDropdown.js

@@ -11,7 +11,9 @@ var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
 var _clickAway = require("../../utils/click-away");
 var _Button = require("../Button");
+var _ConditionalWrapper = require("../ConditionalWrapper");
 var _Menu = require("../Menu");
+var _Tooltip = require("../Tooltip");
 var _ButtonDropdownModule = _interopRequireDefault(require("./ButtonDropdown.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -40,9 +42,11 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
     iconRightName,
     iconRightType = 'solid',
     isFluid,
+    tooltip,
     ...restButtonProps
   } = _ref;
   const menuBtnRef = React.useRef(null);
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
   React.useImperativeHandle(forwardRef, () => menuBtnRef.current);
   const {
     x,
@@ -57,7 +61,13 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
     middleware: [(0, _reactDom.shift)(), (0, _reactDom.flip)(), (0, _reactDom.offset)(parseInt(_space.spaceXXSmall))]
   });
   const onMenuToggle = isOpen => {
-    isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+    if (isOpen) {
+      onMenuOpen?.();
+      setIsMenuOpen(true);
+    } else {
+      onMenuClose?.();
+      setIsMenuOpen(false);
+    }
   };
   return /*#__PURE__*/React.createElement(_clickAway.ClickAway, {
     onChange: onMenuToggle
@@ -74,6 +84,11 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
         [_ButtonDropdownModule.default.isFluid]: isFluid === true
       }, classNames?.dropdownContainer),
       ref: menuBtnRef
+    }, /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
+      condition: Boolean(tooltip),
+      wrapper: children => /*#__PURE__*/React.createElement(_Tooltip.Tooltip, _extends({}, tooltip, {
+        hidden: isMenuOpen ? true : tooltip?.hidden
+      }), children)
     }, /*#__PURE__*/React.createElement(_Button.Button, _extends({}, restButtonProps, {
       iconRightName: children ? iconRightName || (isOpen ? 'caret-up' : 'caret-down') : iconRightName,
       iconRightType: iconRightType,
@@ -89,7 +104,7 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
         wrapper: classNames?.buttonWrapper,
         icon: classNames?.buttonIcon
       }
-    }), children), isOpen && menu && /*#__PURE__*/React.createElement("div", {
+    }), children)), isOpen && menu && /*#__PURE__*/React.createElement("div", {
       onClickCapture: cancelNext,
       ref: floating,
       style: {

package/lib/components/ButtonDropdown/ButtonDropdown.js.flow

@@ -20,8 +20,11 @@ import {classify} from '../../utils/classify';
 import {ClickAway} from '../../utils/click-away';
 import type {ButtonProps} from '../Button';
 import {Button} from '../Button';
+import {ConditionalWrapper} from '../ConditionalWrapper';
 import type {MenuOption, MenuProps} from '../Menu';
 import {Menu} from '../Menu';
+import type {BaseTooltipProps} from '../Tooltip';
+import {Tooltip} from '../Tooltip';
 
 import css from './ButtonDropdown.module.css';
 
@@ -50,6 +53,7 @@ export type ButtonDropdownProps = {
   onOptionSelect?: (option: MenuOption) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
+  tooltip?: BaseTooltipProps,
   ...
 };
 
@@ -71,11 +75,13 @@ export const ButtonDropdown: React$AbstractComponent<
       iconRightName,
       iconRightType = 'solid',
       isFluid,
+      tooltip,
       ...restButtonProps
     }: ButtonDropdownProps,
     forwardRef,
   ) => {
     const menuBtnRef = React.useRef(null);
+    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
     React.useImperativeHandle(forwardRef, () => menuBtnRef.current);
     const {x, y, reference, floating, strategy} = useFloating({
       strategy: 'absolute',
@@ -85,7 +91,13 @@ export const ButtonDropdown: React$AbstractComponent<
     });
 
     const onMenuToggle = (isOpen: boolean) => {
-      isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+      if (isOpen) {
+        onMenuOpen?.();
+        setIsMenuOpen(true);
+      } else {
+        onMenuClose?.();
+        setIsMenuOpen(false);
+      }
     };
 
     return (
@@ -102,29 +114,41 @@ export const ButtonDropdown: React$AbstractComponent<
             )}
             ref={menuBtnRef}
           >
-            <Button
-              {...restButtonProps}
-              iconRightName={
-                children
-                  ? iconRightName || (isOpen ? 'caret-up' : 'caret-down')
-                  : iconRightName
-              }
-              iconRightType={iconRightType}
-              disabled={disabled}
-              size={size}
-              ref={reference}
-              onClick={(e) => {
-                e.stopPropagation();
-                onOpen();
-              }}
-              isFluid={isFluid}
-              classNames={{
-                wrapper: classNames?.buttonWrapper,
-                icon: classNames?.buttonIcon,
-              }}
+            <ConditionalWrapper
+              condition={Boolean(tooltip)}
+              wrapper={(children) => (
+                <Tooltip
+                  {...tooltip}
+                  hidden={isMenuOpen ? true : tooltip?.hidden}
+                >
+                  {children}
+                </Tooltip>
+              )}
             >
-              {children}
-            </Button>
+              <Button
+                {...restButtonProps}
+                iconRightName={
+                  children
+                    ? iconRightName || (isOpen ? 'caret-up' : 'caret-down')
+                    : iconRightName
+                }
+                iconRightType={iconRightType}
+                disabled={disabled}
+                size={size}
+                ref={reference}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onOpen();
+                }}
+                isFluid={isFluid}
+                classNames={{
+                  wrapper: classNames?.buttonWrapper,
+                  icon: classNames?.buttonIcon,
+                }}
+              >
+                {children}
+              </Button>
+            </ConditionalWrapper>
 
             {isOpen && menu && (
               <div

package/lib/components/ConditionalWrapper/ConditionalWrapper.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ConditionalWrapper = void 0;
+var React = _interopRequireWildcard(require("react"));
+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; }
+
+const ConditionalWrapper = _ref => {
+  let {
+    condition,
+    wrapper,
+    children
+  } = _ref;
+  return condition ? wrapper?.(children) : children;
+};
+exports.ConditionalWrapper = ConditionalWrapper;

package/lib/components/ConditionalWrapper/ConditionalWrapper.js.flow

@@ -0,0 +1,16 @@
+// @flow strict
+import * as React from 'react';
+
+
+export type ConditionalWrapperProps = {
+  condition?: boolean,
+  wrapper?: (children: React.Node) => React.Node,
+  children?: React.Node,
+};
+
+export const ConditionalWrapper = ({
+  condition,
+  wrapper,
+  children,
+}: ConditionalWrapperProps): React.Node =>
+  condition ? wrapper?.(children) : children;

package/lib/components/ConditionalWrapper/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ConditionalWrapper", {
+  enumerable: true,
+  get: function () {
+    return _ConditionalWrapper.ConditionalWrapper;
+  }
+});
+var _ConditionalWrapper = require("./ConditionalWrapper");

package/lib/components/ConditionalWrapper/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export {ConditionalWrapper} from './ConditionalWrapper';

package/lib/components/OptionButton/OptionButton.js

@@ -5,13 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.OptionButton = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Button = require("../Button");
 var _ButtonDropdown = require("../ButtonDropdown");
+var _ConditionalWrapper = require("../ConditionalWrapper");
+var _Tooltip = require("../Tooltip");
 var _OptionButtonModule = _interopRequireDefault(require("./OptionButton.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 OptionButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
@@ -29,43 +32,58 @@ const OptionButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onMenuOpen,
     onMenuClose,
     ariaLabel,
-    actionType
+    actionType,
+    tooltip,
+    classNames
   } = _ref;
   const [iconName, setIconName] = React.useState('chevron-down');
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
   return /*#__PURE__*/React.createElement("div", {
-    className: _OptionButtonModule.default.container,
+    className: (0, _classify.default)(_OptionButtonModule.default.container, {
+      [_OptionButtonModule.default.isFluid]: isFluid
+    }, classNames?.wrapper),
     ref: ref
+  }, /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
+    condition: Boolean(tooltip?.baseButton),
+    wrapper: children => /*#__PURE__*/React.createElement(_Tooltip.Tooltip, _extends({}, tooltip?.baseButton, {
+      hidden: isMenuOpen ? true : tooltip?.optionsButton?.hidden
+    }), children)
   }, /*#__PURE__*/React.createElement(_Button.Button, {
     iconLeftName: iconLeftName,
     iconLeftType: iconLeftType,
     onClick: onButtonClick,
     size: size,
     type: type,
-    classNames: {
-      wrapper: _OptionButtonModule.default.leftButton
-    },
     disabled: disabled,
     isFluid: isFluid,
     ariaLabel: ariaLabel,
     actionType: actionType,
-    isLoading: isLoading
-  }, children), /*#__PURE__*/React.createElement(_ButtonDropdown.ButtonDropdown, {
+    isLoading: isLoading,
+    classNames: {
+      wrapper: (0, _classify.default)(_OptionButtonModule.default.leftButton, classNames?.baseButtonWrapper),
+      icon: classNames?.baseButtonIcon
+    }
+  }, children)), /*#__PURE__*/React.createElement(_ButtonDropdown.ButtonDropdown, {
     anchorPosition: anchorPosition,
     ariaLabel: ariaLabel,
     iconLeftName: iconName,
+    tooltip: tooltip?.optionsButton,
     classNames: {
-      buttonWrapper: _OptionButtonModule.default.rightButton,
-      dropdownContainer: _OptionButtonModule.default.dropDownContainer
+      buttonWrapper: (0, _classify.default)(_OptionButtonModule.default.rightButton, classNames?.optionsButtonWrapper),
+      dropdownContainer: (0, _classify.default)(_OptionButtonModule.default.dropDownContainer, classNames?.dropdownContainer),
+      buttonIcon: classNames?.optionsButtonIcon
     },
     type: type,
     disabled: disabled,
     menu: menu,
     onMenuClose: () => {
       setIconName('chevron-down');
+      setIsMenuOpen(false);
       onMenuOpen && onMenuOpen();
     },
     onMenuOpen: () => {
       setIconName('chevron-up');
+      setIsMenuOpen(true);
       onMenuClose && onMenuClose();
     },
     onOptionSelect: onOptionSelect,

package/lib/components/OptionButton/OptionButton.js.flow

@@ -2,15 +2,33 @@
 
 import * as React from 'react';
 
+import classify from '../../utils/classify';
 import type {ButtonProps} from '../Button';
 import {Button} from '../Button';
 import type {AnchorType} from '../ButtonDropdown';
 import {ButtonDropdown} from '../ButtonDropdown';
+import {ConditionalWrapper} from '../ConditionalWrapper';
 import type {MenuOption, MenuProps} from '../Menu';
+import type {BaseTooltipProps} from '../Tooltip';
+import {Tooltip} from '../Tooltip';
 
 import css from './OptionButton.module.css';
 
 
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  baseButtonWrapper?: string,
+  baseButtonIcon?: string,
+  optionsButtonWrapper?: string,
+  optionsButtonIcon?: string,
+  dropdownContainer?: string,
+}>;
+
+export type OptionButtonTooltipProps = {
+  baseButton?: BaseTooltipProps,
+  optionsButton?: BaseTooltipProps,
+};
+
 export type OptionButtonProps = {
   ...ButtonProps,
   menu?: MenuProps,
@@ -19,6 +37,8 @@ export type OptionButtonProps = {
   onButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
+  tooltip?: OptionButtonTooltipProps,
+  classNames?: ClassNames,
   ...
 };
 
@@ -44,45 +64,80 @@ export const OptionButton: React$AbstractComponent<
       onMenuClose,
       ariaLabel,
       actionType,
+      tooltip,
+      classNames,
     }: OptionButtonProps,
     ref,
   ): React.Node => {
     const [iconName, setIconName] = React.useState('chevron-down');
+    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
 
     return (
-      <div className={css.container} ref={ref}>
-        <Button
-          iconLeftName={iconLeftName}
-          iconLeftType={iconLeftType}
-          onClick={onButtonClick}
-          size={size}
-          type={type}
-          classNames={{wrapper: css.leftButton}}
-          disabled={disabled}
-          isFluid={isFluid}
-          ariaLabel={ariaLabel}
-          actionType={actionType}
-          isLoading={isLoading}
+      <div
+        className={classify(
+          css.container,
+          {[css.isFluid]: isFluid},
+          classNames?.wrapper,
+        )}
+        ref={ref}
+      >
+        <ConditionalWrapper
+          condition={Boolean(tooltip?.baseButton)}
+          wrapper={(children) => (
+            <Tooltip
+              {...tooltip?.baseButton}
+              hidden={isMenuOpen ? true : tooltip?.optionsButton?.hidden}
+            >
+              {children}
+            </Tooltip>
+          )}
         >
-          {children}
-        </Button>
+          <Button
+            iconLeftName={iconLeftName}
+            iconLeftType={iconLeftType}
+            onClick={onButtonClick}
+            size={size}
+            type={type}
+            disabled={disabled}
+            isFluid={isFluid}
+            ariaLabel={ariaLabel}
+            actionType={actionType}
+            isLoading={isLoading}
+            classNames={{
+              wrapper: classify(css.leftButton, classNames?.baseButtonWrapper),
+              icon: classNames?.baseButtonIcon,
+            }}
+          >
+            {children}
+          </Button>
+        </ConditionalWrapper>
         <ButtonDropdown
           anchorPosition={anchorPosition}
           ariaLabel={ariaLabel}
           iconLeftName={iconName}
+          tooltip={tooltip?.optionsButton}
           classNames={{
-            buttonWrapper: css.rightButton,
-            dropdownContainer: css.dropDownContainer,
+            buttonWrapper: classify(
+              css.rightButton,
+              classNames?.optionsButtonWrapper,
+            ),
+            dropdownContainer: classify(
+              css.dropDownContainer,
+              classNames?.dropdownContainer,
+            ),
+            buttonIcon: classNames?.optionsButtonIcon,
           }}
           type={type}
           disabled={disabled}
           menu={menu}
           onMenuClose={() => {
             setIconName('chevron-down');
+            setIsMenuOpen(false);
             onMenuOpen && onMenuOpen();
           }}
           onMenuOpen={() => {
             setIconName('chevron-up');
+            setIsMenuOpen(true);
             onMenuClose && onMenuClose();
           }}
           onOptionSelect={onOptionSelect}

package/lib/components/OptionButton/OptionButton.module.css

@@ -4,11 +4,13 @@
 
 @value (spaceXXSmall) from '../../styles/variables/_space.css';
 
-@value ( sizeFluid, size60) from '../../styles/variables/_size.css';
+@value (sizeFluid) from '../../styles/variables/_size.css';
 
 .container {
   display: flex;
-  height: sizeFluid;
+}
+
+.isFluid {
   width: sizeFluid;
 }
 

package/lib/components/OptionButton/index.js.flow

@@ -1,3 +1,3 @@
 //@flow strict
-export type {OptionButtonProps} from './OptionButton';
+export type {OptionButtonProps, OptionButtonTooltipProps} from './OptionButton';
 export {OptionButton} from './OptionButton';

package/lib/components/Tooltip/Tooltip.js

@@ -38,7 +38,8 @@ const Tooltip = _ref => {
     bodyMaxLines = 2,
     titleMaxLines = 1,
     delayMotionDuration = 'none',
-    elevation = ELEVATION['elevationTooltip']
+    elevation = ELEVATION['elevationTooltip'],
+    hidden
   } = _ref;
   const bodyRef = React.useRef(document.querySelector('body'));
   const [open, setOpen] = React.useState(false);
@@ -75,7 +76,7 @@ const Tooltip = _ref => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(children, getReferenceProps({
     ref,
     ...children.props
-  })), open && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/React.createElement("div", _extends({
+  })), open && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/React.createElement(React.Fragment, null, !hidden && /*#__PURE__*/React.createElement("div", _extends({
     ref: floating,
     className: (0, _classify.classify)(_TooltipModule.default.tooltip, classNames?.tooltip),
     style: {
@@ -94,6 +95,6 @@ const Tooltip = _ref => {
     className: (0, _classify.classify)(_TooltipModule.default.body, {
       [_TooltipModule.default.hasTitle]: !!title
     }, classNames?.body)
-  }, body))), bodyRef.current));
+  }, body)))), bodyRef.current));
 };
 exports.Tooltip = Tooltip;