@spaced-out/ui-design-system 0.0.11 → 0.0.13

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 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.0.13](https://github.com/spaced-out/ui-design-system/compare/v0.0.12...v0.0.13) (2023-01-04)
+
+
+### Bug Fixes
+
+* button dropdown carat standalone fix ([507e1e4](https://github.com/spaced-out/ui-design-system/commit/507e1e4dbd834dfff36e96a569211aea4d84eeb2))
+* button dropdown props change ([542d6e1](https://github.com/spaced-out/ui-design-system/commit/542d6e1bb299d95c29a793e32bd384037572ae00))
+* emit more events from button dropdown ([faa9bf1](https://github.com/spaced-out/ui-design-system/commit/faa9bf15ce9f7fa5a7be4e2b1c24784f4654cb9e))
+
+### [0.0.12](https://github.com/spaced-out/ui-design-system/compare/v0.0.11...v0.0.12) (2022-12-28)
+
+
+### Bug Fixes
+
+* **tabs:** [GDS-121] tabs issues fix ([#43](https://github.com/spaced-out/ui-design-system/issues/43)) ([b5ee7fd](https://github.com/spaced-out/ui-design-system/commit/b5ee7fd9dd77b2cbeee6f28db997342694d8a03a))
+
 ### [0.0.11](https://github.com/spaced-out/ui-design-system/compare/v0.0.10...v0.0.11) (2022-12-21)
 
 

package/lib/components/ButtonDropdown/ButtonDropdown.js

@@ -22,9 +22,15 @@ const ButtonDropdown = _ref => {
     anchorPosition = 'bottom-start',
     size,
     onOptionSelect,
-    props,
+    menu,
     classNames,
-    disabled
+    disabled,
+    onMenuOpen,
+    onMenuClose,
+    children,
+    iconRightName,
+    iconRightType,
+    ...restButtonProps
   } = _ref;
   const menuBtnRef = React.useRef();
   const {
@@ -39,7 +45,12 @@ const ButtonDropdown = _ref => {
     whileElementsMounted: _reactDom.autoUpdate,
     middleware: [(0, _reactDom.shift)(), (0, _reactDom.flip)(), (0, _reactDom.offset)(parseInt(_space.spaceXXSmall))]
   });
-  return /*#__PURE__*/React.createElement(_clickAway.ClickAway, null, _ref2 => {
+  const onMenuToggle = isOpen => {
+    isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+  };
+  return /*#__PURE__*/React.createElement(_clickAway.ClickAway, {
+    onChange: onMenuToggle
+  }, _ref2 => {
     let {
       isOpen,
       onOpen,
@@ -50,9 +61,9 @@ const ButtonDropdown = _ref => {
       "data-testid": "ButtonDropdown",
       className: (0, _classify.classify)(_ButtonDropdownModule.default.buttonDropdownContainer, classNames?.wrapper),
       ref: menuBtnRef
-    }, /*#__PURE__*/React.createElement(_Button.Button, _extends({}, props?.button, {
-      iconRightName: props?.button.children ? isOpen ? 'caret-up' : 'caret-down' : props?.button.iconRightName,
-      iconRightType: props?.button.children ? 'solid' : props?.button.iconRightType,
+    }, /*#__PURE__*/React.createElement(_Button.Button, _extends({}, restButtonProps, {
+      iconRightName: children ? isOpen ? 'caret-up' : 'caret-down' : iconRightName ? iconRightName : isOpen ? 'caret-up' : 'caret-down',
+      iconRightType: children ? 'solid' : iconRightType,
       disabled: disabled,
       size: size,
       ref: reference,
@@ -60,7 +71,7 @@ const ButtonDropdown = _ref => {
         e.stopPropagation();
         onOpen();
       }
-    })), isOpen && props?.menu && /*#__PURE__*/React.createElement("div", {
+    }), children), isOpen && menu && /*#__PURE__*/React.createElement("div", {
       onClickCapture: cancelNext,
       ref: floating,
       style: {
@@ -70,7 +81,7 @@ const ButtonDropdown = _ref => {
         left: x ?? _space.spaceNone,
         width: _size.sizeFluid
       }
-    }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, props.menu, {
+    }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       onSelect: option => {
         onOptionSelect && onOptionSelect(option);
         clickAway();

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

@@ -26,9 +26,9 @@ import {Menu} from '../Menu';
 import css from './ButtonDropdown.module.css';
 
 
-type ClassNames = $ReadOnly<{wrapper?: string}>;
-
 export type ButtonDropdownProps = {
+  ...ButtonProps,
+  menu: MenuProps,
   anchorPosition?:
     | 'top'
     | 'top-start'
@@ -36,23 +36,25 @@ export type ButtonDropdownProps = {
     | 'bottom'
     | 'bottom-start'
     | 'bottom-end',
-  size?: 'medium' | 'small',
-  props?: {
-    button: ButtonProps,
-    menu: MenuProps,
-  },
   onOptionSelect?: (option: MenuOption) => mixed,
-  classNames?: ClassNames,
-  disabled?: boolean,
+  onMenuOpen?: () => mixed,
+  onMenuClose?: () => mixed,
+  ...
 };
 
 export const ButtonDropdown = ({
   anchorPosition = 'bottom-start',
   size,
   onOptionSelect,
-  props,
+  menu,
   classNames,
   disabled,
+  onMenuOpen,
+  onMenuClose,
+  children,
+  iconRightName,
+  iconRightType,
+  ...restButtonProps
 }: ButtonDropdownProps): React.Node => {
   const menuBtnRef = React.useRef();
   const {x, y, reference, floating, strategy} = useFloating({
@@ -62,8 +64,12 @@ export const ButtonDropdown = ({
     middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
   });
 
+  const onMenuToggle = (isOpen: boolean) => {
+    isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+  };
+
   return (
-    <ClickAway>
+    <ClickAway onChange={onMenuToggle}>
       {({isOpen, onOpen, cancelNext, clickAway}) => (
         <div
           data-testid="ButtonDropdown"
@@ -71,17 +77,19 @@ export const ButtonDropdown = ({
           ref={menuBtnRef}
         >
           <Button
-            {...props?.button}
+            {...restButtonProps}
             iconRightName={
-              props?.button.children
+              children
                 ? isOpen
                   ? 'caret-up'
                   : 'caret-down'
-                : props?.button.iconRightName
-            }
-            iconRightType={
-              props?.button.children ? 'solid' : props?.button.iconRightType
+                : iconRightName
+                  ? iconRightName
+                  : isOpen
+                    ? 'caret-up'
+                    : 'caret-down'
             }
+            iconRightType={children ? 'solid' : iconRightType}
             disabled={disabled}
             size={size}
             ref={reference}
@@ -89,8 +97,10 @@ export const ButtonDropdown = ({
               e.stopPropagation();
               onOpen();
             }}
-          />
-          {isOpen && props?.menu && (
+          >
+            {children}
+          </Button>
+          {isOpen && menu && (
             <div
               onClickCapture={cancelNext}
               ref={floating}
@@ -103,7 +113,7 @@ export const ButtonDropdown = ({
               }}
             >
               <Menu
-                {...props.menu}
+                {...menu}
                 onSelect={(option) => {
                   onOptionSelect && onOptionSelect(option);
                   clickAway();

package/lib/components/Tab/Tab.module.css

@@ -10,6 +10,7 @@
   border: borderWidthTertiary solid colorFillNone;
   box-sizing: border-box;
   display: flex;
+  cursor: pointer;
 }
 
 .button.mediumSize {
@@ -37,6 +38,7 @@
   flex-direction: row;
   gap: spaceXXSmall;
   align-items: center;
+  justify-content: center;
   color: colorTextSecondary;
   border-bottom: borderWidthTertiary solid colorFillNone;
   height: sizeFluid;

package/lib/components/TabList/TabDropdown.module.css

@@ -1,8 +1,10 @@
 @value ( size36) from '../../styles/variables/_size.css';
-@value ( spaceXSmall, spaceNone) from '../../styles/variables/_size.css';
+@value ( spaceFluid ) from '../../styles/variables/_space.css';
 
 .tabDropdownContainer {
   display: flex;
+  align-items: center;
+  justify-content: center;
   position: relative;
 }
 
@@ -16,5 +18,5 @@
 }
 
 .dotTextWrap {
-  padding: spaceNone spaceXSmall;
+  width: spaceFluid;
 }

package/lib/components/TabList/TabList.module.css

@@ -1,7 +1,6 @@
-@value (colorFillPrimary) from '../../styles/variables/_color.css';
 @value (spaceMedium) from '../../styles/variables/_space.css';
 
-@value ( sizeFluid) from '../../styles/variables/_size.css';
+@value ( size38, size42, sizeFluid) from '../../styles/variables/_size.css';
 
 .tabsContainer {
   display: flex;
@@ -9,3 +8,11 @@
   gap: spaceMedium;
   width: sizeFluid;
 }
+
+.tabsContainer.mediumSize {
+  height: size42;
+}
+
+.tabsContainer.smallSize {
+  height: size38;
+}

package/package.json

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