@spaced-out/ui-design-system 0.1.94 → 0.1.95

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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.95](https://github.com/spaced-out/ui-design-system/compare/v0.1.94...v0.1.95) (2024-05-23)
+
+
+### Features
+
+* button tabs update ([#217](https://github.com/spaced-out/ui-design-system/issues/217)) ([b670334](https://github.com/spaced-out/ui-design-system/commit/b67033454127b0ca7de9f7a1ec95f7d0aa64a311))
+
+
+### Bug Fixes
+
+* [GDS-349] dropdown doesn't close on keypress and truncateString utility ([#214](https://github.com/spaced-out/ui-design-system/issues/214)) ([d852102](https://github.com/spaced-out/ui-design-system/commit/d852102c4e9f2404b33b1c6c81b6bf5a08c1382a))
+
 ### [0.1.94](https://github.com/spaced-out/ui-design-system/compare/v0.1.94-beta.8...v0.1.94) (2024-05-22)
 
 ### [0.1.94-beta.8](https://github.com/spaced-out/ui-design-system/compare/v0.1.94-beta.7...v0.1.94-beta.8) (2024-05-22)

package/lib/components/ButtonTabs/ButtonTab/ButtonTab.js

@@ -23,6 +23,8 @@ const ButtonTab = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     id,
     selectedButtonTabId,
     disabled,
+    isLeftCurved,
+    isRightCurved,
     ...props
   } = _ref;
   return /*#__PURE__*/React.createElement(_Button.Button, _extends({}, props, {
@@ -37,7 +39,9 @@ const ButtonTab = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         [_ButtonTabModule.default.onlyIcon]: iconName && !children,
         [_ButtonTabModule.default.isSelected]: id === selectedButtonTabId,
         [_ButtonTabModule.default.isUnSelected]: id !== selectedButtonTabId,
-        [_ButtonTabModule.default.disabled]: disabled
+        [_ButtonTabModule.default.disabled]: disabled,
+        [_ButtonTabModule.default.leftCurved]: isLeftCurved,
+        [_ButtonTabModule.default.rightCurved]: isRightCurved
       }, classNames?.wrapper),
       icon: _ButtonTabModule.default.icon
     },

package/lib/components/ButtonTabs/ButtonTab/ButtonTab.js.flow

@@ -24,6 +24,8 @@ export type ButtonTabProps = {
   id: string,
   selectedButtonTabId?: string,
   isLoading?: boolean,
+  isLeftCurved?: boolean,
+  isRightCurved?: boolean,
   ...
 };
 
@@ -42,6 +44,8 @@ export const ButtonTab: React$AbstractComponent<
       id,
       selectedButtonTabId,
       disabled,
+      isLeftCurved,
+      isRightCurved,
       ...props
     }: ButtonTabProps,
     ref,
@@ -62,6 +66,8 @@ export const ButtonTab: React$AbstractComponent<
             [css.isSelected]: id === selectedButtonTabId,
             [css.isUnSelected]: id !== selectedButtonTabId,
             [css.disabled]: disabled,
+            [css.leftCurved]: isLeftCurved,
+            [css.rightCurved]: isRightCurved,
           },
           classNames?.wrapper,
         ),

package/lib/components/ButtonTabs/ButtonTab/ButtonTab.module.css

@@ -1,12 +1,28 @@
-@value (colorTextDisabled, colorTextPrimary, colorTextSecondary, colorBackgroundTertiary, colorButtonFillTertiaryEnabled) from '../../../styles/variables/_color.css';
-@value (size38, size30) from '../../../styles/variables/_size.css';
-@value (spaceSmall) from '../../../styles/variables/_space.css';
-@value (borderWidthPrimary) from '../../../styles/variables/_border.css';
+@value (
+  colorTextDisabled, 
+  colorBorderPrimary, 
+  colorTextPrimary, 
+  colorTextSecondary, 
+  colorFillSecondary
+) from '../../../styles/variables/_color.css';
+@value (
+  size42, 
+  size34
+) from '../../../styles/variables/_size.css';
+@value (
+  spaceSmall
+) from '../../../styles/variables/_space.css';
+@value (
+  borderWidthPrimary,
+  borderWidthNone,
+  borderRadiusNone,
+  borderRadiusMedium
+) from '../../../styles/variables/_border.css';
 
-button.buttonTabWrapper {
+.buttonTabWrapper {
   padding-left: spaceSmall;
   padding-right: spaceSmall;
-  height: size38;
+  height: size42;
   color: colorTextSecondary;
   min-width: initial;
   text-align: left;
@@ -16,21 +32,21 @@ button.buttonTabWrapper {
   color: colorTextSecondary;
 }
 
-button.buttonTabWrapper:hover {
+.buttonTabWrapper:hover {
   color: colorTextPrimary;
   background-color: initial;
 }
 
-button.buttonTabWrapper:hover .icon {
+.buttonTabWrapper:hover .icon {
   color: colorTextPrimary;
 }
 
 .buttonTabWrapper.mediumButtonTab {
-  height: size38;
+  height: size42;
 }
 
 .buttonTabWrapper.smallButtonTab {
-  height: size30;
+  height: size34;
 }
 
 .onlyIcon {
@@ -40,20 +56,34 @@ button.buttonTabWrapper:hover .icon {
 }
 
 .mediumButtonTab.onlyIcon {
-  max-width: size38;
+  max-width: size42;
 }
 
 .smallButtonTab.onlyIcon {
-  max-width: size30;
+  max-width: size34;
 }
 
 .buttonTabWrapper.isSelected {
-  background-color: colorBackgroundTertiary;
+  background-color: colorFillSecondary;
   color: colorTextPrimary;
+  border-width: borderWidthPrimary borderWidthPrimary borderWidthPrimary
+    borderWidthNone;
+  border-style: solid;
+  border-color: colorBorderPrimary;
+}
+
+.buttonTabWrapper.leftCurved {
+  border-radius: borderRadiusMedium borderRadiusNone borderRadiusNone
+    borderRadiusMedium;
+}
+
+.buttonTabWrapper.rightCurved {
+  border-radius: borderRadiusNone borderRadiusMedium borderRadiusMedium
+    borderRadiusNone;
 }
 
 .buttonTabWrapper.isSelected:hover {
-  background-color: colorBackgroundTertiary;
+  background-color: colorFillSecondary;
 }
 
 .buttonTabWrapper.isSelected .icon {
@@ -71,5 +101,4 @@ button.buttonTabWrapper:hover .icon {
 .buttonTabWrapper.isUnSelected {
   padding-left: spaceSmall;
   padding-right: spaceSmall;
-  border: borderWidthPrimary solid colorButtonFillTertiaryEnabled;
 }

package/lib/components/ButtonTabs/ButtonTabs.js

@@ -21,18 +21,33 @@ const ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     selectedButtonTabId,
     onButtonTabSelect
   } = _ref;
-  const childrenWithProps = React.Children.map(children, child => {
+  const childrenArray = React.Children.toArray(children);
+  const childrenWithProps = childrenArray.map((child, index) => {
     if ( /*#__PURE__*/React.isValidElement(child)) {
       const {
-        disabled: disabledChild
+        disabled: disabledChild,
+        classNames: classNamesChild
       } = child.props;
+      const isFirst = index === 0;
+      const isLast = index === childrenArray.length - 1;
+      const isSingleChild = childrenArray.length === 1;
       return /*#__PURE__*/React.cloneElement(child, {
         ...child.props,
         isFluid,
         size,
+        isLeftCurved: isFirst && !isSingleChild,
+        isRightCurved: isLast && !isSingleChild,
         disabled: disabledChild || disabled,
         selectedButtonTabId,
-        onButtonTabSelect
+        onButtonTabSelect,
+        classNames: {
+          wrapper: (0, _classify.default)(_ButtonTabsModule.default.buttonTab, {
+            [_ButtonTabsModule.default.firstChild]: isFirst && !isSingleChild,
+            [_ButtonTabsModule.default.lastChild]: isLast && !isSingleChild,
+            [_ButtonTabsModule.default.children]: !isFirst && !isLast,
+            [_ButtonTabsModule.default.singleChild]: isSingleChild
+          }, classNamesChild?.wrapper)
+        }
       });
     }
     return child;

package/lib/components/ButtonTabs/ButtonTabs.js.flow

@@ -35,16 +35,37 @@ export const ButtonTabs: React$AbstractComponent<
     }: ButtonTabsProps,
     ref,
   ): React.Node => {
-    const childrenWithProps = React.Children.map(children, (child) => {
+    const childrenArray = React.Children.toArray(children);
+
+    const childrenWithProps = childrenArray.map((child, index) => {
       if (React.isValidElement(child)) {
-        const {disabled: disabledChild} = child.props;
+        const {disabled: disabledChild, classNames: classNamesChild} =
+          child.props;
+        const isFirst = index === 0;
+        const isLast = index === childrenArray.length - 1;
+        const isSingleChild = childrenArray.length === 1;
+
         return React.cloneElement(child, {
           ...child.props,
           isFluid,
           size,
+          isLeftCurved: isFirst && !isSingleChild,
+          isRightCurved: isLast && !isSingleChild,
           disabled: disabledChild || disabled,
           selectedButtonTabId,
           onButtonTabSelect,
+          classNames: {
+            wrapper: classify(
+              css.buttonTab,
+              {
+                [css.firstChild]: isFirst && !isSingleChild,
+                [css.lastChild]: isLast && !isSingleChild,
+                [css.children]: !isFirst && !isLast,
+                [css.singleChild]: isSingleChild,
+              },
+              classNamesChild?.wrapper,
+            ),
+          },
         });
       }
       return child;

package/lib/components/ButtonTabs/ButtonTabs.module.css

@@ -1,16 +1,26 @@
-@value (colorBackgroundSecondary) from '../../styles/variables/_color.css';
-@value (size42, size34, sizeFluid) from '../../styles/variables/_size.css';
-@value (spaceXXSmall) from '../../styles/variables/_space.css';
-@value (borderRadiusMedium) from '../../styles/variables/_border.css';
+@value (
+  colorBackgroundTertiary,
+  colorBorderPrimary
+) from '../../styles/variables/_color.css';
+@value (
+  size42, 
+  size34, 
+  sizeFluid
+) from '../../styles/variables/_size.css';
+@value (
+  borderWidthNone,
+  borderWidthPrimary,
+  borderRadiusMedium,
+  borderRadiusNone
+) from '../../styles/variables/_border.css';
 
 .buttonTabsWrapper {
   display: flex;
-  gap: spaceXXSmall;
-  background-color: colorBackgroundSecondary;
+  background-color: colorBackgroundTertiary;
   align-items: center;
-  padding-left: calc(spaceXXSmall / 2);
-  padding-right: calc(spaceXXSmall / 2);
   width: fit-content;
+  composes: borderTopPrimary from '../../styles/border.module.css';
+  composes: borderBottomPrimary from '../../styles/border.module.css';
   border-radius: borderRadiusMedium;
 }
 
@@ -25,3 +35,19 @@
 .buttonTabsWrapper.isFluid {
   width: sizeFluid;
 }
+
+.buttonTab {
+  border-color: colorBorderPrimary;
+  border-width: borderWidthNone borderWidthPrimary;
+  border-style: none solid;
+  border-radius: borderRadiusNone;
+}
+
+.children,
+.lastChild {
+  border-left-width: borderWidthNone;
+}
+
+.singleChild {
+  border-radius: borderRadiusMedium;
+}

package/lib/components/Dropdown/Dropdown.js

@@ -69,7 +69,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       onKeyDown: e => {
         if (e.keyCode === 32) {
           e.preventDefault();
-          onOpen();
+          isOpen ? clickAway() : onOpen();
         }
       },
       boxRef: refs.setReference,
@@ -100,6 +100,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         onChange && onChange(option, e);
         if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
           clickAway();
+          refs.reference.current.querySelector('input').focus();
         }
       },
       size: menu.size || size,

package/lib/components/Dropdown/Dropdown.js.flow

@@ -89,7 +89,7 @@ export const Dropdown: React$AbstractComponent<
               onKeyDown={(e) => {
                 if (e.keyCode === 32) {
                   e.preventDefault();
-                  onOpen();
+                  isOpen ? clickAway() : onOpen();
                 }
               }}
               boxRef={refs.setReference}
@@ -126,6 +126,7 @@ export const Dropdown: React$AbstractComponent<
                       menu.optionsVariant === 'normal'
                     ) {
                       clickAway();
+                      refs.reference.current.querySelector('input').focus();
                     }
                   }}
                   size={menu.size || size}

package/lib/utils/string/string.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.formatWord = exports.escapeRegExp = exports.capitalize = void 0;
+exports.truncateString = exports.formatWord = exports.escapeRegExp = exports.capitalize = void 0;
 
 const capitalize = word => {
   if (!word) {
@@ -15,4 +15,11 @@ exports.capitalize = capitalize;
 const escapeRegExp = str => str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
 exports.escapeRegExp = escapeRegExp;
 const formatWord = (word, count) => count === 1 ? word : word + 's';
-exports.formatWord = formatWord;
+exports.formatWord = formatWord;
+const truncateString = (inputString, maxLength) => {
+  if (inputString.length > maxLength) {
+    return inputString.substring(0, maxLength - 3) + '...';
+  }
+  return inputString;
+};
+exports.truncateString = truncateString;

package/lib/utils/string/string.js.flow

@@ -14,3 +14,13 @@ export const escapeRegExp = (str: string): string =>
 
 export const formatWord = (word: string, count: number): string =>
   count === 1 ? word : word + 's';
+
+export const truncateString = (
+  inputString: string,
+  maxLength: number,
+): string => {
+  if (inputString.length > maxLength) {
+    return inputString.substring(0, maxLength - 3) + '...';
+  }
+  return inputString;
+};

package/package.json

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