@spaced-out/ui-design-system 0.0.17 → 0.0.18-beta.1

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 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.18-beta.1](https://github.com/spaced-out/ui-design-system/compare/v0.0.18-beta.0...v0.0.18-beta.1) (2023-02-02)
+
+
+### Bug Fixes
+
+* buttondropdown doc and fluid fix ([#54](https://github.com/spaced-out/ui-design-system/issues/54)) ([b18aaeb](https://github.com/spaced-out/ui-design-system/commit/b18aaeb64dcc33d420d932960a8270af5b803105))
+
+### [0.0.18-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.0.17...v0.0.18-beta.0) (2023-02-01)
+
 ### [0.0.17](https://github.com/spaced-out/ui-design-system/compare/v0.0.16...v0.0.17) (2023-02-01)
 
 ### [0.0.16](https://github.com/spaced-out/ui-design-system/compare/v0.0.16-beta.1...v0.0.16) (2023-01-26)

package/lib/components/ButtonDropdown/ButtonDropdown.js

@@ -39,6 +39,7 @@ const ButtonDropdown = _ref => {
     children,
     iconRightName,
     iconRightType,
+    isFluid,
     ...restButtonProps
   } = _ref;
   const menuBtnRef = React.useRef();
@@ -68,7 +69,9 @@ const ButtonDropdown = _ref => {
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "ButtonDropdown",
-      className: (0, _classify.classify)(_ButtonDropdownModule.default.buttonDropdownContainer, classNames?.dropdownContainer),
+      className: (0, _classify.classify)(_ButtonDropdownModule.default.buttonDropdownContainer, {
+        [_ButtonDropdownModule.default.isFluid]: isFluid === true
+      }, classNames?.dropdownContainer),
       ref: menuBtnRef
     }, /*#__PURE__*/React.createElement(_Button.Button, _extends({}, restButtonProps, {
       iconRightName: children ? isOpen ? 'caret-up' : 'caret-down' : iconRightName ? iconRightName : isOpen ? 'caret-up' : 'caret-down',
@@ -80,6 +83,7 @@ const ButtonDropdown = _ref => {
         e.stopPropagation();
         onOpen();
       },
+      isFluid: isFluid,
       classNames: {
         wrapper: classNames?.buttonWrapper
       }
@@ -91,7 +95,9 @@ const ButtonDropdown = _ref => {
         position: strategy,
         top: y ?? _space.spaceNone,
         left: x ?? _space.spaceNone,
-        width: _size.sizeFluid
+        ...(isFluid && {
+          width: _size.sizeFluid
+        })
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       onSelect: option => {

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

@@ -64,6 +64,7 @@ export const ButtonDropdown = ({
   children,
   iconRightName,
   iconRightType,
+  isFluid,
   ...restButtonProps
 }: ButtonDropdownProps): React.Node => {
   const menuBtnRef = React.useRef();
@@ -85,6 +86,9 @@ export const ButtonDropdown = ({
           data-testid="ButtonDropdown"
           className={classify(
             css.buttonDropdownContainer,
+            {
+              [css.isFluid]: isFluid === true,
+            },
             classNames?.dropdownContainer,
           )}
           ref={menuBtnRef}
@@ -110,6 +114,7 @@ export const ButtonDropdown = ({
               e.stopPropagation();
               onOpen();
             }}
+            isFluid={isFluid}
             classNames={{wrapper: classNames?.buttonWrapper}}
           >
             {children}
@@ -123,7 +128,7 @@ export const ButtonDropdown = ({
                 position: strategy,
                 top: y ?? spaceNone,
                 left: x ?? spaceNone,
-                width: sizeFluid,
+                ...(isFluid && {width: sizeFluid}),
               }}
             >
               <Menu

package/lib/components/ButtonDropdown/ButtonDropdown.module.css

@@ -3,6 +3,8 @@
 .buttonDropdownContainer {
   display: flex;
   position: relative;
-  height: sizeFluid;
+}
+
+.isFluid {
   width: sizeFluid;
 }

package/lib/components/PageTitle/PageTitle.module.css

@@ -1,5 +1,5 @@
 @value (colorBackgroundTertiary) from '../../styles/variables/_color.css';
-@value (spaceNone, spaceXXSmall, spaceXSmall, spaceSmall, spaceMedium, spaceLarge) from '../../styles/variables/_space.css';
+@value (spaceNone, spaceXSmall, spaceSmall, spaceMedium, spaceLarge) from '../../styles/variables/_space.css';
 
 @value (sizeFluid, size60) from '../../styles/variables/_size.css';
 
@@ -10,7 +10,7 @@
   flex-direction: row;
   justify-content: space-between;
   box-sizing: border-box;
-  padding: spaceSmall spaceLarge spaceNone spaceLarge;
+  padding: spaceSmall spaceLarge spaceXSmall spaceLarge;
   width: sizeFluid;
   min-height: size60;
   gap: spaceMedium;
@@ -21,7 +21,6 @@
   display: flex;
   flex-direction: column;
   gap: spaceXSmall;
-  margin-bottom: calc(spaceXXSmall * -0.75);
 }
 
 .pageTitle {
@@ -36,5 +35,4 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  margin: spaceNone spaceNone spaceSmall spaceNone;
 }

package/lib/components/SideMenuLink/SideMenuLink.module.css

@@ -23,7 +23,6 @@
   border-radius: borderRadiusSmall;
   width: sizeFluid;
   cursor: pointer;
-  margin-right: spaceSmall;
 }
 
 .linkWrapper.closed {

package/lib/components/{Tab → Tabs/Tab}/Tab.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.tabSizeOptions = exports.Tab = exports.TAB_SIZE = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _typography = require("../../types/typography");
-var _classify = require("../../utils/classify");
-var _Button = require("../Button");
-var _Icon = require("../Icon");
-var _Text = require("../Text");
+var _typography = require("../../../types/typography");
+var _classify = require("../../../utils/classify");
+var _Button = require("../../Button");
+var _Icon = require("../../Icon");
+var _Text = require("../../Text");
 var _TabModule = _interopRequireDefault(require("./Tab.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); }
@@ -72,7 +72,7 @@ const Tab = _ref => {
   }, iconName ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconName,
     type: iconType,
-    size: 'medium',
+    size: size,
     className: (0, _classify.classify)(_TabModule.default.icon, {
       [_TabModule.default.disabled]: disabled === true
     })

package/lib/components/{Tab → Tabs/Tab}/Tab.js.flow

@@ -2,12 +2,12 @@
 
 import * as React from 'react';
 
-import {TEXT_COLORS} from '../../types/typography';
-import {classify} from '../../utils/classify';
-import {UnstyledButton} from '../Button';
-import type {IconType} from '../Icon';
-import {Icon} from '../Icon';
-import {ButtonTextMedium, ButtonTextSmall} from '../Text';
+import {TEXT_COLORS} from '../../../types/typography';
+import {classify} from '../../../utils/classify';
+import {UnstyledButton} from '../../Button';
+import type {IconType} from '../../Icon';
+import {Icon} from '../../Icon';
+import {ButtonTextMedium, ButtonTextSmall} from '../../Text';
 
 import css from './Tab.module.css';
 
@@ -94,7 +94,7 @@ export const Tab = ({
           <Icon
             name={iconName}
             type={iconType}
-            size={'medium'}
+            size={size}
             className={classify(css.icon, {
               [css.disabled]: disabled === true,
             })}

package/lib/components/{Tab → Tabs/Tab}/Tab.module.css

@@ -1,10 +1,10 @@
-@value (colorFillPrimary, colorTextSecondary, colorFillNone, colorFocusPrimary, colorTextPrimary, colorTextDisabled) from '../../styles/variables/_color.css';
+@value (colorFillPrimary, colorTextSecondary, colorFillNone, colorFocusPrimary, colorTextPrimary, colorTextDisabled) from '../../../styles/variables/_color.css';
 
-@value (spaceXXSmall) from '../../styles/variables/_space.css';
+@value (spaceXXSmall) from '../../../styles/variables/_space.css';
 
-@value (sizeFluid, size42, size38) from '../../styles/variables/_size.css';
+@value (sizeFluid, size42, size38) from '../../../styles/variables/_size.css';
 
-@value (borderWidthTertiary) from '../../styles/variables/_border.css';
+@value (borderWidthTertiary) from '../../../styles/variables/_border.css';
 
 .button {
   border: borderWidthTertiary solid colorFillNone;

package/lib/components/Tabs/Tab/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Tab = require("./Tab");
+Object.keys(_Tab).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Tab[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Tab[key];
+    }
+  });
+});

package/lib/components/Tabs/Tab/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './Tab';

package/lib/components/{TabList → Tabs/TabList}/TabDropdown.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.TabDropdown = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _reactDom = require("@floating-ui/react-dom");
-var _space = require("../../styles/variables/_space");
-var _classify = require("../../utils/classify");
-var _clickAway = require("../../utils/click-away");
-var _Menu = require("../Menu");
+var _space = require("../../../styles/variables/_space");
+var _classify = require("../../../utils/classify");
+var _clickAway = require("../../../utils/click-away");
+var _Menu = require("../../Menu");
 var _Tab = require("../Tab");
 var _TabDropdownModule = _interopRequireDefault(require("./TabDropdown.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/{TabList → Tabs/TabList}/TabDropdown.js.flow

@@ -14,12 +14,12 @@ import {
   useFloating,
 } from '@floating-ui/react-dom';
 
-import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
-import {classify} from '../../utils/classify';
-import {ClickAway} from '../../utils/click-away';
-import type {AnchorType} from '../ButtonDropdown';
-import type {MenuOption, MenuProps} from '../Menu';
-import {Menu} from '../Menu';
+import {spaceNone, spaceXXSmall} from '../../../styles/variables/_space';
+import {classify} from '../../../utils/classify';
+import {ClickAway} from '../../../utils/click-away';
+import type {AnchorType} from '../../ButtonDropdown';
+import type {MenuOption, MenuProps} from '../../Menu';
+import {Menu} from '../../Menu';
 import type {TabProps} from '../Tab';
 import {Tab} from '../Tab';
 

package/lib/components/{TabList → Tabs/TabList}/TabDropdown.module.css

@@ -1,5 +1,5 @@
-@value ( size36) from '../../styles/variables/_size.css';
-@value ( spaceFluid ) from '../../styles/variables/_space.css';
+@value ( size36) from '../../../styles/variables/_size.css';
+@value ( spaceFluid ) from '../../../styles/variables/_space.css';
 
 .tabDropdownContainer {
   display: flex;

package/lib/components/{TabList → Tabs/TabList}/TabList.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TabList = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _size = require("../../styles/variables/_size");
-var _space = require("../../styles/variables/_space");
-var _classify = require("../../utils/classify");
+var _size = require("../../../styles/variables/_size");
+var _space = require("../../../styles/variables/_space");
+var _classify = require("../../../utils/classify");
 var _TabDropdown = require("./TabDropdown.js");
 var _TabListModule = _interopRequireDefault(require("./TabList.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -92,7 +92,7 @@ const TabList = _ref => {
       onOptionSelect: menuOnSelect,
       props: {
         tab: {
-          label: '...',
+          iconName: 'ellipsis',
           tabId: 'tab-dropdown',
           selectedTab: {
             tabId: isMenuOptionSelected ? 'tab-dropdown' : ''

package/lib/components/{TabList → Tabs/TabList}/TabList.js.flow

@@ -2,9 +2,9 @@
 
 import * as React from 'react';
 
-import {size36, size100} from '../../styles/variables/_size';
-import {spaceMedium} from '../../styles/variables/_space';
-import {classify} from '../../utils/classify';
+import {size36, size100} from '../../../styles/variables/_size';
+import {spaceMedium} from '../../../styles/variables/_space';
+import {classify} from '../../../utils/classify';
 
 import {TabDropdown} from './TabDropdown.js';
 
@@ -13,7 +13,7 @@ import css from './TabList.module.css';
 
 type ClassNames = $ReadOnly<{wrapper?: string}>;
 
-export type TabsProps = {
+export type TabListProps = {
   classNames?: ClassNames,
   onSelect?: ({tabId?: string, label?: string}) => mixed,
   children?: React.Node,
@@ -29,7 +29,7 @@ export const TabList = ({
   onSelect,
   selectedTab,
   menuWidth,
-}: TabsProps): React.Node => {
+}: TabListProps): React.Node => {
   const ref = React.useRef(null);
 
   const [containerWidth, setContainerWidth] = React.useState(0);
@@ -101,7 +101,7 @@ export const TabList = ({
         onOptionSelect={menuOnSelect}
         props={{
           tab: {
-            label: '...',
+            iconName: 'ellipsis',
             tabId: 'tab-dropdown',
             selectedTab: {tabId: isMenuOptionSelected ? 'tab-dropdown' : ''},
           },

package/lib/components/{TabList → Tabs/TabList}/TabList.module.css

@@ -1,6 +1,6 @@
-@value (spaceMedium) from '../../styles/variables/_space.css';
+@value (spaceMedium) from '../../../styles/variables/_space.css';
 
-@value ( size38, size42, sizeFluid) from '../../styles/variables/_size.css';
+@value ( size38, size42, sizeFluid) from '../../../styles/variables/_size.css';
 
 .tabsContainer {
   display: flex;

package/lib/components/{TabList → Tabs/TabList}/index.js.flow

@@ -1,4 +1,3 @@
 // @flow strict
 
-export type {TabsProps} from './TabList';
 export * from './TabList';

package/lib/components/Tabs/index.js

@@ -3,27 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  Tab: true,
-  tabSizeOptions: true
-};
-Object.defineProperty(exports, "Tab", {
-  enumerable: true,
-  get: function () {
-    return _Tab.Tab;
-  }
-});
-Object.defineProperty(exports, "tabSizeOptions", {
-  enumerable: true,
-  get: function () {
-    return _Tab.tabSizeOptions;
-  }
+var _Tab = require("./Tab");
+Object.keys(_Tab).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Tab[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Tab[key];
+    }
+  });
 });
-var _Tab = require("../Tab");
-var _TabList = require("../TabList");
+var _TabList = require("./TabList");
 Object.keys(_TabList).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TabList[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,

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

@@ -1,6 +1,4 @@
 // @flow strict
 
-export type {TabProps} from '../Tab';
-export {Tab, tabSizeOptions} from '../Tab';
-export type {TabsProps} from '../TabList';
-export * from '../TabList';
+export * from './Tab';
+export * from './TabList';

package/package.json

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

package/lib/components/Tab/index.js

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

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

@@ -1,4 +0,0 @@
-// @flow strict
-
-export type {TabProps} from './Tab';
-export {Tab, tabSizeOptions} from './Tab';