@spaced-out/ui-design-system 0.2.5 → 0.2.6

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.2.6](https://github.com/spaced-out/ui-design-system/compare/v0.2.6-beta.0...v0.2.6) (2024-10-22)
+
+
+### Bug Fixes
+
+* disabled button tab styling ([#281](https://github.com/spaced-out/ui-design-system/issues/281)) ([f99fdf9](https://github.com/spaced-out/ui-design-system/commit/f99fdf9115836ed99df6d72c2ed6068af16ec720))
+
+### [0.2.6-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.2.5...v0.2.6-beta.0) (2024-10-21)
+
+
+### Features
+
+* adding custom staticLabels prop in menu ([#282](https://github.com/spaced-out/ui-design-system/issues/282)) ([696a433](https://github.com/spaced-out/ui-design-system/commit/696a433a6d2b2c15ac1f4946c7018e17116dc612))
+
 ### [0.2.5](https://github.com/spaced-out/ui-design-system/compare/v0.2.4...v0.2.5) (2024-10-18)
 
 

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

@@ -30,7 +30,7 @@ const ButtonTab = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   return /*#__PURE__*/React.createElement(_Button.Button, _extends({}, props, {
     disabled: disabled,
     size: size,
-    type: id === selectedButtonTabId ? 'tertiary' : 'ghost',
+    type: "tertiary",
     ref: ref,
     classNames: {
       wrapper: (0, _classify.default)(_ButtonTabModule.default.buttonTabWrapper, {
@@ -38,7 +38,6 @@ const ButtonTab = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         [_ButtonTabModule.default.smallButtonTab]: size === 'small',
         [_ButtonTabModule.default.onlyIcon]: iconName && !children,
         [_ButtonTabModule.default.isSelected]: id === selectedButtonTabId,
-        [_ButtonTabModule.default.isUnSelected]: id !== selectedButtonTabId,
         [_ButtonTabModule.default.disabled]: disabled,
         [_ButtonTabModule.default.leftCurved]: isLeftCurved,
         [_ButtonTabModule.default.rightCurved]: isRightCurved

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

@@ -54,7 +54,7 @@ export const ButtonTab: React$AbstractComponent<
       {...props}
       disabled={disabled}
       size={size}
-      type={id === selectedButtonTabId ? 'tertiary' : 'ghost'}
+      type="tertiary"
       ref={ref}
       classNames={{
         wrapper: classify(
@@ -64,7 +64,6 @@ export const ButtonTab: React$AbstractComponent<
             [css.smallButtonTab]: size === 'small',
             [css.onlyIcon]: iconName && !children,
             [css.isSelected]: id === selectedButtonTabId,
-            [css.isUnSelected]: id !== selectedButtonTabId,
             [css.disabled]: disabled,
             [css.leftCurved]: isLeftCurved,
             [css.rightCurved]: isRightCurved,

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

@@ -10,7 +10,9 @@
   size34
 ) from '../../../styles/variables/_size.css';
 @value (
-  spaceSmall
+  spaceNone,
+  spaceSmall,
+  spaceMedium
 ) from '../../../styles/variables/_space.css';
 @value (
   borderWidthPrimary,
@@ -18,72 +20,68 @@
   borderRadiusNone,
   borderRadiusMedium
 ) from '../../../styles/variables/_border.css';
+@value (elevationCard) from '../../../styles/variables/_elevation.css';
 
 .buttonTabWrapper {
-  padding-left: spaceSmall;
-  padding-right: spaceSmall;
+  border: borderWidthPrimary solid colorBorderPrimary;
+  border-radius: borderRadiusNone;
+  border-right-width: borderWidthNone;
+  text-align: left;
+  min-width: initial;
+  padding: spaceNone spaceMedium;
   height: size42;
   color: colorTextSecondary;
-  min-width: initial;
-  text-align: left;
-}
 
-.buttonTabWrapper .icon {
-  color: colorTextSecondary;
-}
+  &.mediumButtonTab {
+    height: size42;
+  }
 
-.buttonTabWrapper:hover {
-  color: colorTextPrimary;
-  background-color: initial;
-}
+  &.smallButtonTab {
+    height: size34;
+  }
 
-.buttonTabWrapper:hover .icon {
-  color: colorTextPrimary;
-}
+  &.rightCurved {
+    border-right-width: borderWidthPrimary;
+    border-top-right-radius: borderRadiusMedium;
+    border-bottom-right-radius: borderRadiusMedium;
+  }
 
-.buttonTabWrapper.mediumButtonTab {
-  height: size42;
-}
+  &.leftCurved {
+    border-top-left-radius: borderRadiusMedium;
+    border-bottom-left-radius: borderRadiusMedium;
+  }
 
-.buttonTabWrapper.smallButtonTab {
-  height: size34;
-}
+  &.disabled {
+    color: colorTextDisabled;
+    border: borderWidthPrimary solid colorBorderPrimary;
+    border-right-width: borderWidthNone;
+  }
 
-.onlyIcon {
-  color: colorTextSecondary;
-  padding-left: initial;
-  padding-right: initial;
-}
+  &:hover {
+    color: colorTextPrimary;
+    background-color: initial;
+  }
 
-.mediumButtonTab.onlyIcon {
-  max-width: size42;
-}
+  &:focus {
+    z-index: elevationCard;
+  }
 
-.smallButtonTab.onlyIcon {
-  max-width: size34;
+  &.icon {
+    color: colorTextSecondary;
+  }
 }
 
-.buttonTabWrapper.isSelected {
-  background-color: colorFillSecondary;
+.buttonTabWrapper:hover .icon {
   color: colorTextPrimary;
-  border-top-width: borderWidthPrimary;
-  border-right-width: borderWidthPrimary;
-  border-bottom-width: borderWidthPrimary;
-  border-style: solid;
-  border-color: colorBorderPrimary;
-}
-
-.buttonTabWrapper.leftCurved {
-  border-radius: borderRadiusMedium borderRadiusNone borderRadiusNone
-    borderRadiusMedium;
 }
 
-.buttonTabWrapper.rightCurved {
-  border-radius: borderRadiusNone borderRadiusMedium borderRadiusMedium
-    borderRadiusNone;
+.onlyIcon {
+  color: colorTextSecondary;
+  padding: spaceNone spaceSmall;
 }
 
-.buttonTabWrapper.isSelected:hover {
+.buttonTabWrapper.isSelected {
+  color: colorTextPrimary;
   background-color: colorFillSecondary;
 }
 
@@ -91,15 +89,6 @@
   color: colorTextPrimary;
 }
 
-.buttonTabWrapper.disabled {
-  color: colorTextDisabled;
-}
-
 .buttonTabWrapper.disabled .icon {
   color: colorTextDisabled;
 }
-
-.buttonTabWrapper.isUnSelected {
-  padding-left: spaceSmall;
-  padding-right: spaceSmall;
-}

package/lib/components/ButtonTabs/ButtonTabs.js

@@ -49,23 +49,17 @@ const ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       } = child.props;
       const isFirst = index === 0;
       const isLast = index === unwrappedNodes.length - 1;
-      const isSingleChild = unwrappedNodes.length === 1;
       return /*#__PURE__*/React.cloneElement(child, {
         ...child.props,
         isFluid,
         size,
-        isLeftCurved: isFirst && !isSingleChild,
-        isRightCurved: isLast && !isSingleChild,
+        isLeftCurved: isFirst,
+        isRightCurved: isLast,
         disabled: disabledChild || disabled,
         selectedButtonTabId,
         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)
+          wrapper: classNamesChild?.wrapper
         }
       });
     }

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

@@ -77,28 +77,18 @@ export const ButtonTabs: React$AbstractComponent<
           child.props;
         const isFirst = index === 0;
         const isLast = index === unwrappedNodes.length - 1;
-        const isSingleChild = unwrappedNodes.length === 1;
 
         return React.cloneElement(child, {
           ...child.props,
           isFluid,
           size,
-          isLeftCurved: isFirst && !isSingleChild,
-          isRightCurved: isLast && !isSingleChild,
+          isLeftCurved: isFirst,
+          isRightCurved: isLast,
           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,
-            ),
+            wrapper: classNamesChild?.wrapper,
           },
         });
       }

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

@@ -1,6 +1,5 @@
 @value (
-  colorBackgroundTertiary,
-  colorBorderPrimary
+  colorBackgroundTertiary
 ) from '../../styles/variables/_color.css';
 @value (
   size42, 
@@ -8,10 +7,7 @@
   sizeFluid
 ) from '../../styles/variables/_size.css';
 @value (
-  borderWidthNone,
-  borderWidthPrimary,
-  borderRadiusMedium,
-  borderRadiusNone
+  borderRadiusMedium
 ) from '../../styles/variables/_border.css';
 
 .buttonTabsWrapper {
@@ -19,8 +15,6 @@
   background-color: colorBackgroundTertiary;
   align-items: center;
   width: fit-content;
-  composes: borderTopPrimary from '../../styles/border.module.css';
-  composes: borderBottomPrimary from '../../styles/border.module.css';
   border-radius: borderRadiusMedium;
 }
 
@@ -35,19 +29,3 @@
 .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/Menu/Menu.js

@@ -28,6 +28,11 @@ const RenderOption = _ref => {
     classNames,
     searchText = '',
     showResultText = true,
+    staticLabels = {
+      RESULT: 'result',
+      RESULTS: 'results',
+      SEARCH_PLACEHOLDER: 'Search...'
+    },
     ...restProps
   } = _ref;
   const {
@@ -41,7 +46,7 @@ const RenderOption = _ref => {
   } = restProps;
   if (options && Array.isArray(options) && options.length) {
     const optionsFiltered = !allowSearch ? options : (0, _menu.getFilteredOptionsFromSearchText)(options, searchText);
-    const resultText = !allowSearch ? '' : (0, _menu.getFilteredOptionsResultText)(optionsFiltered);
+    const finalResultText = !allowSearch ? '' : (0, _menu.getFilteredOptionsResultText)(optionsFiltered, staticLabels);
     const {
       enable: isVirtualizationEnabled,
       menuHeight,
@@ -50,7 +55,7 @@ const RenderOption = _ref => {
     return /*#__PURE__*/React.createElement(React.Fragment, null, allowSearch && showResultText && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
       className: _MenuModule.default.filterOptionsResultText,
       color: "tertiary"
-    }, resultText), virtualization && isVirtualizationEnabled ? /*#__PURE__*/React.createElement(_reactWindow.FixedSizeList, {
+    }, finalResultText), virtualization && isVirtualizationEnabled ? /*#__PURE__*/React.createElement(_reactWindow.FixedSizeList, {
       height: menuHeight || (size === 'medium' ? menuSizeMedium : menuSizeSmall),
       itemSize: itemHeight || (size === 'medium' ? buttonSizeMedium : buttonSizeSmall),
       itemCount: optionsFiltered.length
@@ -80,11 +85,11 @@ const RenderOption = _ref => {
   }
   if (composeOptions && Array.isArray(composeOptions) && composeOptions.length) {
     const optionsFiltered = !allowSearch ? composeOptions : (0, _menu.getFilteredComposeOptionsFromSearchText)(composeOptions, searchText);
-    const resultText = !allowSearch ? '' : (0, _menu.getFilteredComposeOptionsResultText)(optionsFiltered);
+    const finalResultText = !allowSearch ? '' : (0, _menu.getFilteredComposeOptionsResultText)(optionsFiltered, staticLabels);
     return /*#__PURE__*/React.createElement(React.Fragment, null, allowSearch && showResultText && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
       className: _MenuModule.default.filterOptionsResultText,
       color: "tertiary"
-    }, resultText), optionsFiltered.map((composeMenuOptions, index) =>
+    }, finalResultText), optionsFiltered.map((composeMenuOptions, index) =>
     /*#__PURE__*/
     // eslint-disable-next-line react/no-array-index-key
     React.createElement("span", {
@@ -101,11 +106,11 @@ const RenderOption = _ref => {
   }
   if (groupTitleOptions && Array.isArray(groupTitleOptions) && groupTitleOptions.length) {
     const optionsFiltered = !allowSearch ? groupTitleOptions : (0, _menu.getFilteredGroupTitleOptionsFromSearchText)(groupTitleOptions, searchText);
-    const resultText = !allowSearch ? '' : (0, _menu.getFilteredGroupTitleOptionsResultText)(optionsFiltered);
+    const finalResultText = !allowSearch ? '' : (0, _menu.getFilteredGroupTitleOptionsResultText)(optionsFiltered, staticLabels);
     return /*#__PURE__*/React.createElement(React.Fragment, null, allowSearch && showResultText && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
       className: _MenuModule.default.filterOptionsResultText,
       color: "tertiary"
-    }, resultText), optionsFiltered.map((optionsGroup, index) =>
+    }, finalResultText), optionsFiltered.map((optionsGroup, index) =>
     /*#__PURE__*/
     // eslint-disable-next-line react/no-array-index-key
     React.createElement(React.Fragment, {
@@ -136,7 +141,8 @@ const Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
       itemHeight: null
     },
     header,
-    footer
+    footer,
+    staticLabels
   } = props;
   const [searchText, setSearchText] = React.useState('');
   const {
@@ -169,7 +175,8 @@ const Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
     value: searchText,
     onChange: e => setSearchText(e.target.value),
     onClear: () => setSearchText(''),
-    size: size
+    size: size,
+    placeholder: staticLabels?.SEARCH_PLACEHOLDER ?? 'Search...'
   }), /*#__PURE__*/React.createElement(RenderOption, _extends({}, props, {
     searchText: searchText
   })), hasFooter && /*#__PURE__*/React.createElement("div", {

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

@@ -76,6 +76,11 @@ export type BaseMenuProps = {
   header?: React.Node,
   footer?: React.Node,
   showResultText?: boolean,
+  staticLabels?: {
+    RESULT?: string,
+    RESULTS?: string,
+    SEARCH_PLACEHOLDER?: string,
+  },
 };
 
 export type MenuOptionTypes = {
@@ -116,6 +121,11 @@ const RenderOption = ({
   classNames,
   searchText = '',
   showResultText = true,
+  staticLabels = {
+    RESULT: 'result',
+    RESULTS: 'results',
+    SEARCH_PLACEHOLDER: 'Search...',
+  },
   ...restProps
 }: RenderOptionProps): React.Node => {
   const {
@@ -131,9 +141,9 @@ const RenderOption = ({
     const optionsFiltered = !allowSearch
       ? options
       : getFilteredOptionsFromSearchText(options, searchText);
-    const resultText = !allowSearch
+    const finalResultText = !allowSearch
       ? ''
-      : getFilteredOptionsResultText(optionsFiltered);
+      : getFilteredOptionsResultText(optionsFiltered, staticLabels);
 
     const {
       enable: isVirtualizationEnabled,
@@ -148,7 +158,7 @@ const RenderOption = ({
             className={css.filterOptionsResultText}
             color="tertiary"
           >
-            {resultText}
+            {finalResultText}
           </FormLabelSmall>
         )}
         {virtualization && isVirtualizationEnabled ? (
@@ -200,9 +210,9 @@ const RenderOption = ({
     const optionsFiltered = !allowSearch
       ? composeOptions
       : getFilteredComposeOptionsFromSearchText(composeOptions, searchText);
-    const resultText = !allowSearch
+    const finalResultText = !allowSearch
       ? ''
-      : getFilteredComposeOptionsResultText(optionsFiltered);
+      : getFilteredComposeOptionsResultText(optionsFiltered, staticLabels);
 
     return (
       <>
@@ -211,7 +221,7 @@ const RenderOption = ({
             className={css.filterOptionsResultText}
             color="tertiary"
           >
-            {resultText}
+            {finalResultText}
           </FormLabelSmall>
         )}
         {optionsFiltered.map((composeMenuOptions, index) => (
@@ -246,9 +256,9 @@ const RenderOption = ({
         groupTitleOptions,
         searchText,
       );
-    const resultText = !allowSearch
+    const finalResultText = !allowSearch
       ? ''
-      : getFilteredGroupTitleOptionsResultText(optionsFiltered);
+      : getFilteredGroupTitleOptionsResultText(optionsFiltered, staticLabels);
 
     return (
       <>
@@ -257,7 +267,7 @@ const RenderOption = ({
             className={css.filterOptionsResultText}
             color="tertiary"
           >
-            {resultText}
+            {finalResultText}
           </FormLabelSmall>
         )}
         {optionsFiltered.map((optionsGroup, index) => (
@@ -312,6 +322,7 @@ export const Menu: React$AbstractComponent<MenuProps, HTMLDivElement> =
         },
         header,
         footer,
+        staticLabels,
       } = props;
       const [searchText, setSearchText] = React.useState('');
       const {menuHeight} = virtualization;
@@ -361,6 +372,7 @@ export const Menu: React$AbstractComponent<MenuProps, HTMLDivElement> =
               onChange={(e) => setSearchText(e.target.value)}
               onClear={() => setSearchText('')}
               size={size}
+              placeholder={staticLabels?.SEARCH_PLACEHOLDER ?? 'Search...'}
             />
           )}
           <RenderOption {...props} searchText={searchText} />

package/lib/utils/menu/menu.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getTextLabelFromSelectedKeys = exports.getSelectedKeysFromSelectedOption = exports.getOptionsFromKeys = exports.getOptionFromKey = exports.getFilteredOptionsResultText = exports.getFilteredOptionsFromSearchText = exports.getFilteredGroupTitleOptionsResultText = exports.getFilteredGroupTitleOptionsFromSearchText = exports.getFilteredComposeOptionsResultText = exports.getFilteredComposeOptionsFromSearchText = exports.getButtonLabelFromSelectedKeys = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _string = require("../string");
 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; }
 
@@ -58,11 +57,12 @@ const getFilteredOptionsFromSearchText = (options, searchText) => {
   return options.filter(option => option.label?.toLowerCase().includes(searchText.toLowerCase()));
 };
 exports.getFilteredOptionsFromSearchText = getFilteredOptionsFromSearchText;
-const getFilteredOptionsResultText = function (options) {
-  let resultText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'result';
+const getFilteredOptionsResultText = (options, staticLabels) => {
   let resultCount = 0;
   resultCount += options.length;
-  const generatedResultText = `${resultCount} ${(0, _string.formatWord)(resultText, resultCount)}`;
+  const singleResultMessage = staticLabels.RESULT ?? 'result';
+  const multipleResultsMessage = staticLabels.RESULTS ?? 'results';
+  const generatedResultText = `${resultCount} ${resultCount > 1 ? multipleResultsMessage : singleResultMessage}`;
   return generatedResultText;
 };
 exports.getFilteredOptionsResultText = getFilteredOptionsResultText;
@@ -73,13 +73,14 @@ const getFilteredComposeOptionsFromSearchText = (composeOptions, searchText) =>
   return composeOptions.map(optionGroup => optionGroup.filter(option => option.label?.toLowerCase().includes(searchText.toLowerCase()))).filter(group => group.length > 0);
 };
 exports.getFilteredComposeOptionsFromSearchText = getFilteredComposeOptionsFromSearchText;
-const getFilteredComposeOptionsResultText = function (composeOptions) {
-  let resultText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'result';
+const getFilteredComposeOptionsResultText = (composeOptions, staticLabels) => {
   let resultCount = 0;
   composeOptions.forEach(optionGroup => {
     resultCount += optionGroup.length;
   });
-  const generatedResultText = `${resultCount} ${(0, _string.formatWord)(resultText, resultCount)}`;
+  const singleResultMessage = staticLabels.RESULT ?? 'result';
+  const multipleResultsMessage = staticLabels.RESULTS ?? 'results';
+  const generatedResultText = `${resultCount} ${resultCount > 1 ? multipleResultsMessage : singleResultMessage}`;
   return generatedResultText;
 };
 exports.getFilteredComposeOptionsResultText = getFilteredComposeOptionsResultText;
@@ -93,15 +94,16 @@ const getFilteredGroupTitleOptionsFromSearchText = (groupTitleOptions, searchTex
   })).filter(group => group.options && group.options.length > 0);
 };
 exports.getFilteredGroupTitleOptionsFromSearchText = getFilteredGroupTitleOptionsFromSearchText;
-const getFilteredGroupTitleOptionsResultText = function (groupTitleOptions) {
-  let resultText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'result';
+const getFilteredGroupTitleOptionsResultText = (groupTitleOptions, staticLabels) => {
   let resultCount = 0;
   groupTitleOptions.forEach(group => {
     if (group.options) {
       resultCount += group.options.length;
     }
   });
-  const generatedResultText = `${resultCount} ${(0, _string.formatWord)(resultText, resultCount)}`;
+  const singleResultMessage = staticLabels.RESULT ?? 'result';
+  const multipleResultsMessage = staticLabels.RESULTS ?? 'results';
+  const generatedResultText = `${resultCount} ${resultCount > 1 ? multipleResultsMessage : singleResultMessage}`;
   return generatedResultText;
 };
 exports.getFilteredGroupTitleOptionsResultText = getFilteredGroupTitleOptionsResultText;

package/lib/utils/menu/menu.js.flow

@@ -2,7 +2,6 @@
 import * as React from 'react';
 
 import type {MenuGroupTitleOption, MenuOption} from '../../components/Menu';
-import {formatWord} from '../string';
 
 
 export const getSelectedKeysFromSelectedOption = (
@@ -96,16 +95,18 @@ export const getFilteredOptionsFromSearchText = (
 
 export const getFilteredOptionsResultText = (
   options: MenuOption[],
-  resultText: string = 'result',
+  staticLabels: {[key: string]: string},
 ): string => {
   let resultCount = 0;
 
   resultCount += options.length;
 
-  const generatedResultText = `${resultCount} ${formatWord(
-    resultText,
-    resultCount,
-  )}`;
+  const singleResultMessage = staticLabels.RESULT ?? 'result';
+  const multipleResultsMessage = staticLabels.RESULTS ?? 'results';
+
+  const generatedResultText = `${resultCount} ${
+    resultCount > 1 ? multipleResultsMessage : singleResultMessage
+  }`;
 
   return generatedResultText;
 };
@@ -129,7 +130,7 @@ export const getFilteredComposeOptionsFromSearchText = (
 
 export const getFilteredComposeOptionsResultText = (
   composeOptions: Array<Array<MenuOption>>,
-  resultText: string = 'result',
+  staticLabels: {[key: string]: string},
 ): string => {
   let resultCount = 0;
 
@@ -137,10 +138,12 @@ export const getFilteredComposeOptionsResultText = (
     resultCount += optionGroup.length;
   });
 
-  const generatedResultText = `${resultCount} ${formatWord(
-    resultText,
-    resultCount,
-  )}`;
+  const singleResultMessage = staticLabels.RESULT ?? 'result';
+  const multipleResultsMessage = staticLabels.RESULTS ?? 'results';
+
+  const generatedResultText = `${resultCount} ${
+    resultCount > 1 ? multipleResultsMessage : singleResultMessage
+  }`;
 
   return generatedResultText;
 };
@@ -169,7 +172,7 @@ export const getFilteredGroupTitleOptionsFromSearchText = (
 
 export const getFilteredGroupTitleOptionsResultText = (
   groupTitleOptions: Array<MenuGroupTitleOption>,
-  resultText: string = 'result',
+  staticLabels: {[key: string]: string},
 ): string => {
   let resultCount = 0;
 
@@ -179,10 +182,12 @@ export const getFilteredGroupTitleOptionsResultText = (
     }
   });
 
-  const generatedResultText = `${resultCount} ${formatWord(
-    resultText,
-    resultCount,
-  )}`;
+  const singleResultMessage = staticLabels.RESULT ?? 'result';
+  const multipleResultsMessage = staticLabels.RESULTS ?? 'results';
+
+  const generatedResultText = `${resultCount} ${
+    resultCount > 1 ? multipleResultsMessage : singleResultMessage
+  }`;
 
   return generatedResultText;
 };

package/package.json

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