@spaced-out/ui-design-system 0.1.121 → 0.1.123

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.123](https://github.com/spaced-out/ui-design-system/compare/v0.1.122...v0.1.123) (2024-08-26)
+
+
+### Features
+
+* [GDS-429] side menu link accordion and href inclusion  ([#251](https://github.com/spaced-out/ui-design-system/issues/251)) ([e54f712](https://github.com/spaced-out/ui-design-system/commit/e54f712b6e450c80ca70aad3565fe1be8820bbb9))
+
+### [0.1.122](https://github.com/spaced-out/ui-design-system/compare/v0.1.121...v0.1.122) (2024-08-22)
+
+
+### Bug Fixes
+
+* ↕️ added option to hide spinner for number input, exposes wrapper classname for input ([05267ee](https://github.com/spaced-out/ui-design-system/commit/05267eeef9dd984d5e6d6030f778ed197d518cf0))
+* 🛝 slider enhancements to add value input in the right slot, min max range indicators as config ([eecd31a](https://github.com/spaced-out/ui-design-system/commit/eecd31ae53dd460f08d7c31ea648d0aa20d3ca1d))
+
 ### [0.1.121](https://github.com/spaced-out/ui-design-system/compare/v0.1.120...v0.1.121) (2024-08-20)
 
 

package/lib/components/Input/Input.js

@@ -59,6 +59,7 @@ const Input_ = (props, ref) => {
     boxRef,
     onKeyDown,
     disallowExponents,
+    hideNumberSpinner,
     ...inputProps
   } = props;
   const [showPassword, setShowPassword] = React.useState(false);
@@ -84,7 +85,7 @@ const Input_ = (props, ref) => {
     className: (0, _classify.classify)(_InputModule.default.wrapper, {
       [_InputModule.default.filled]: controlledInputFilled ?? false,
       [_InputModule.default.withError]: error ?? false
-    })
+    }, classNames?.wrapper)
   }, Boolean(label) && /*#__PURE__*/React.createElement("div", {
     className: _InputModule.default.info
   }, /*#__PURE__*/React.createElement("div", {
@@ -99,7 +100,8 @@ const Input_ = (props, ref) => {
       [_InputModule.default.medium]: size === 'medium',
       [_InputModule.default.small]: size === 'small',
       [_InputModule.default.locked]: locked,
-      [_InputModule.default.color]: type === 'color'
+      [_InputModule.default.color]: type === 'color',
+      [_InputModule.default.hideNumberSpinner]: hideNumberSpinner
     }, classNames?.box),
     onClick: !(disabled || locked) ? onContainerClick : null,
     ref: boxRef

package/lib/components/Input/Input.js.flow

@@ -13,6 +13,7 @@ type ClassNames = $ReadOnly<{
   box?: string,
   iconLeft?: string,
   iconRight?: string,
+  wrapper?: string,
 }>;
 
 export const EXPONENT_CHARACTER_LIST = ['E', 'e'];
@@ -80,6 +81,7 @@ export type InputProps = {
    * Only values which are equal to the basis for stepping (min if specified, value otherwise, and an
    * appropriate default value if neither of those is provided) are valid. */
   step?: string,
+  hideNumberSpinner?: boolean,
   ...
 };
 
@@ -111,6 +113,7 @@ const Input_ = (props: InputProps, ref): React.Node => {
     boxRef,
     onKeyDown,
     disallowExponents,
+    hideNumberSpinner,
     ...inputProps
   } = props;
 
@@ -142,10 +145,14 @@ const Input_ = (props: InputProps, ref): React.Node => {
 
   return (
     <div
-      className={classify(css.wrapper, {
-        [css.filled]: controlledInputFilled ?? false,
-        [css.withError]: error ?? false,
-      })}
+      className={classify(
+        css.wrapper,
+        {
+          [css.filled]: controlledInputFilled ?? false,
+          [css.withError]: error ?? false,
+        },
+        classNames?.wrapper,
+      )}
     >
       {Boolean(label) && (
         <div className={css.info}>
@@ -165,6 +172,7 @@ const Input_ = (props: InputProps, ref): React.Node => {
             [css.small]: size === 'small',
             [css.locked]: locked,
             [css.color]: type === 'color',
+            [css.hideNumberSpinner]: hideNumberSpinner,
           },
           classNames?.box,
         )}

package/lib/components/Input/Input.module.css

@@ -172,3 +172,15 @@ input::placeholder {
   min-height: size18;
   border-radius: borderRadiusXSmall;
 }
+
+.hideNumberSpinner input[type='number']::-webkit-outer-spin-button,
+.hideNumberSpinner input[type='number']::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Hide spinner in Firefox */
+.hideNumberSpinner input[type='number'] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}

package/lib/components/PageTitle/PageTitle.js

@@ -218,7 +218,9 @@ const PageTitle = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   }, /*#__PURE__*/React.createElement("div", {
     className: _PageTitleModule.default.headerWithBackBtn
   }, showBackButton && /*#__PURE__*/React.createElement(_Tooltip.Tooltip, {
-    title: "Navigate Back"
+    title: "Navigate Back",
+    delayMotionDuration: "slow",
+    placement: "top-start"
   }, /*#__PURE__*/React.createElement(_Button.Button, {
     onClick: handleBack,
     type: "tertiary",

package/lib/components/PageTitle/PageTitle.js.flow

@@ -239,7 +239,11 @@ export const PageTitle: React$AbstractComponent<
         <div className={classify(css.leftSlot, classNames?.leftSlot)}>
           <div className={css.headerWithBackBtn}>
             {showBackButton && (
-              <Tooltip title="Navigate Back">
+              <Tooltip
+                title="Navigate Back"
+                delayMotionDuration="slow"
+                placement="top-start"
+              >
                 <Button
                   onClick={handleBack}
                   type="tertiary"

package/lib/components/RangeSlider/RangeSlider.js

@@ -8,6 +8,8 @@ var React = _interopRequireWildcard(require("react"));
 var _color = require("../../styles/variables/_color");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Button = require("../Button");
+var _Input = require("../Input");
+var _Text = require("../Text");
 var _RangeSliderModule = _interopRequireDefault(require("./RangeSlider.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); }
@@ -30,12 +32,29 @@ const RangeSlider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     hideLeftBtn,
     hideRightBtn,
     ariaLabel = 'Slider',
+    showRange,
+    hideValueInput,
     ...restInputProps
   } = _ref;
   const progress = (value - min) / (max - min) * 100;
   const btnLeftDisabled = disabled || value <= min;
   const btnRightDisabled = disabled || value >= max;
   const progressColor = disabled ? _color.colorTextDisabled : _color.colorFillPrimary;
+  const handleInputChange = e => {
+    let inputValue = parseFloat(e.currentTarget.value);
+
+    // Validate and adjust the value
+    if (isNaN(inputValue) || inputValue < min) {
+      inputValue = min;
+    } else if (inputValue > max) {
+      inputValue = max;
+    } else if (step > 0) {
+      const nearestStep = Math.round(inputValue / step) * step;
+      inputValue = Math.round(nearestStep * 100) / 100; // Adjust to nearest valid step
+    }
+
+    onChange?.(inputValue);
+  };
   const handleChange = e => {
     emitRoundedValue(e.currentTarget.value);
   };
@@ -50,14 +69,17 @@ const RangeSlider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className: (0, _classify.default)(_RangeSliderModule.default.wrapper, {
       [_RangeSliderModule.default.disabled]: disabled
     }, classNames?.wrapper)
-  }, !hideLeftBtn && /*#__PURE__*/React.createElement(_Button.Button, {
+  }, !hideLeftBtn && !showRange && /*#__PURE__*/React.createElement(_Button.Button, {
     type: "ghost",
     iconLeftName: iconLeftName,
     size: btnLeftSize,
     ariaLabel: "Decrease Value",
     disabled: btnLeftDisabled,
     onClick: () => emitRoundedValue(value - step)
-  }), /*#__PURE__*/React.createElement("div", {
+  }), showRange && /*#__PURE__*/React.createElement(_Text.BodySmall, {
+    className: _RangeSliderModule.default.rangeText,
+    color: disabled ? 'disabled' : 'primary'
+  }, min), /*#__PURE__*/React.createElement("div", {
     className: _RangeSliderModule.default.sliderContainer
   }, /*#__PURE__*/React.createElement("input", _extends({}, restInputProps, {
     type: "range",
@@ -80,14 +102,31 @@ const RangeSlider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     length: (max - min) / step + 1
   }, (_, index) => /*#__PURE__*/React.createElement("option", {
     key: index,
-    value: min + index * step
-  })))), !hideRightBtn && /*#__PURE__*/React.createElement(_Button.Button, {
+    value: min + index * step,
+    className: (0, _classify.default)({
+      [_RangeSliderModule.default.disabled]: disabled
+    })
+  })))), showRange && /*#__PURE__*/React.createElement(_Text.BodySmall, {
+    className: _RangeSliderModule.default.rangeText,
+    color: disabled ? 'disabled' : 'primary'
+  }, max), !hideRightBtn && !showRange && /*#__PURE__*/React.createElement(_Button.Button, {
     type: "ghost",
     iconRightName: iconRightName,
     size: btnRightSize,
     ariaLabel: "Increase Value",
     disabled: btnRightDisabled,
     onClick: () => emitRoundedValue(value + step)
+  }), !hideValueInput && /*#__PURE__*/React.createElement(_Input.Input, {
+    size: "small",
+    type: "number",
+    value: String(value),
+    classNames: {
+      wrapper: _RangeSliderModule.default.valueInputWrapper
+    },
+    disabled: disabled,
+    onChange: handleInputChange,
+    disallowExponents: true,
+    hideNumberSpinner: true
   }));
 });
 exports.RangeSlider = RangeSlider;

package/lib/components/RangeSlider/RangeSlider.js.flow

@@ -10,6 +10,8 @@ import {
 import classify from '../../utils/classify';
 import type {ButtonSize} from '../Button';
 import {Button, BUTTON_SIZE} from '../Button';
+import {Input} from '../Input';
+import {BodySmall} from '../Text';
 
 import css from './RangeSlider.module.css';
 
@@ -32,6 +34,8 @@ export type RangeSliderProps = {
   hideRightBtn?: boolean,
   classNames?: ClassNames,
   ariaLabel?: string,
+  showRange?: boolean,
+  hideValueInput?: boolean,
   ...
 };
 
@@ -56,6 +60,8 @@ export const RangeSlider: React$AbstractComponent<
       hideLeftBtn,
       hideRightBtn,
       ariaLabel = 'Slider',
+      showRange,
+      hideValueInput,
       ...restInputProps
     }: RangeSliderProps,
     ref,
@@ -67,6 +73,22 @@ export const RangeSlider: React$AbstractComponent<
 
     const progressColor = disabled ? colorTextDisabled : colorFillPrimary;
 
+    const handleInputChange = (e: SyntheticEvent<HTMLInputElement>) => {
+      let inputValue = parseFloat(e.currentTarget.value);
+
+      // Validate and adjust the value
+      if (isNaN(inputValue) || inputValue < min) {
+        inputValue = min;
+      } else if (inputValue > max) {
+        inputValue = max;
+      } else if (step > 0) {
+        const nearestStep = Math.round(inputValue / step) * step;
+        inputValue = Math.round(nearestStep * 100) / 100; // Adjust to nearest valid step
+      }
+
+      onChange?.(inputValue);
+    };
+
     const handleChange = (e: SyntheticEvent<HTMLInputElement>) => {
       emitRoundedValue(e.currentTarget.value);
     };
@@ -87,7 +109,7 @@ export const RangeSlider: React$AbstractComponent<
           classNames?.wrapper,
         )}
       >
-        {!hideLeftBtn && (
+        {!hideLeftBtn && !showRange && (
           <Button
             type="ghost"
             iconLeftName={iconLeftName}
@@ -98,6 +120,15 @@ export const RangeSlider: React$AbstractComponent<
           />
         )}
 
+        {showRange && (
+          <BodySmall
+            className={css.rangeText}
+            color={disabled ? 'disabled' : 'primary'}
+          >
+            {min}
+          </BodySmall>
+        )}
+
         <div className={css.sliderContainer}>
           <input
             {...restInputProps}
@@ -123,12 +154,26 @@ export const RangeSlider: React$AbstractComponent<
                 by allowing user-defined brackets or ranges for tick marks.
               */}
               {Array.from({length: (max - min) / step + 1}, (_, index) => (
-                <option key={index} value={min + index * step} />
+                <option
+                  key={index}
+                  value={min + index * step}
+                  className={classify({[css.disabled]: disabled})}
+                />
               ))}
             </datalist>
           )}
         </div>
-        {!hideRightBtn && (
+
+        {showRange && (
+          <BodySmall
+            className={css.rangeText}
+            color={disabled ? 'disabled' : 'primary'}
+          >
+            {max}
+          </BodySmall>
+        )}
+
+        {!hideRightBtn && !showRange && (
           <Button
             type="ghost"
             iconRightName={iconRightName}
@@ -138,6 +183,19 @@ export const RangeSlider: React$AbstractComponent<
             onClick={() => emitRoundedValue(value + step)}
           />
         )}
+
+        {!hideValueInput && (
+          <Input
+            size="small"
+            type="number"
+            value={String(value)}
+            classNames={{wrapper: css.valueInputWrapper}}
+            disabled={disabled}
+            onChange={handleInputChange}
+            disallowExponents
+            hideNumberSpinner
+          />
+        )}
       </div>
     );
   },

package/lib/components/RangeSlider/RangeSlider.module.css

@@ -1,6 +1,6 @@
 @value (colorFillPrimary, colorGrayLightest, colorBackgroundTertiary, colorFocusPrimary, colorTextDisabled) from '../../styles/variables/_color.css';
-@value (sizeFluid, size4, size20, size2) from '../../styles/variables/_size.css';
-@value (spaceXSmall, spaceXXSmall, spaceNone) from '../../styles/variables/_space.css';
+@value (sizeFluid, size4, size20, size2, size34) from '../../styles/variables/_size.css';
+@value (spaceXXSmall, spaceNone) from '../../styles/variables/_space.css';
 @value (borderRadiusLarge, borderRadiusCircle, borderWidthTertiary, borderWidthNone) from '../../styles/variables/_border.css';
 
 @value thumbSize: size20;
@@ -10,7 +10,7 @@
   display: flex;
   align-items: center;
   width: sizeFluid;
-  gap: calc(spaceXSmall * 2);
+  gap: spaceXXSmall;
 }
 
 .sliderContainer {
@@ -119,3 +119,19 @@ input[type='range']:focus::-moz-range-thumb {
   padding-inline: spaceNone;
   white-space: nowrap;
 }
+
+.sliderTicks option.disabled {
+  background-color: colorTextDisabled;
+}
+
+.rangeText {
+  display: flex;
+  min-width: size34;
+  min-height: size34;
+  justify-content: center;
+  align-items: center;
+}
+
+.valueInputWrapper {
+  max-width: 58px;
+}

package/lib/components/SideMenuLink/SideMenuLink.js

@@ -9,6 +9,7 @@ var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Button = require("../Button");
 var _ConditionalWrapper = require("../ConditionalWrapper");
 var _Icon = require("../Icon");
+var _Link = require("../Link");
 var _Text = require("../Text");
 var _Tooltip = require("../Tooltip");
 var _SideMenuLinkModule = _interopRequireDefault(require("./SideMenuLink.module.css"));
@@ -189,6 +190,10 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onChange,
     tabIndex = 0,
     tooltip,
+    isGroupMenuLink = false,
+    linkComponent: LinkComponent,
+    rightSlot,
+    to,
     ...restButtonProps
   } = _ref;
   const selected = selectedValue === pageNameKey;
@@ -197,6 +202,15 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onChange && onChange(e, pageNameKey);
   };
   return /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
+    condition: to !== undefined,
+    wrapper: children => /*#__PURE__*/React.createElement(_Link.Link, {
+      to: to,
+      tabIndex: -1,
+      linkComponent: LinkComponent,
+      onClick: e => e.preventDefault(),
+      className: _SideMenuLinkModule.default.linkComponent
+    }, children)
+  }, /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
     condition: Boolean(!opened && !inActive),
     wrapper: children => /*#__PURE__*/React.createElement(_Tooltip.Tooltip, _extends({
       body: MENU_NAME_LIST[pageNameKey].title
@@ -219,10 +233,13 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     size: "medium",
     color: _Text.TEXT_COLORS.inverseSecondary,
     className: _SideMenuLinkModule.default.menuIcon
-  }) : null, pageNameKey && MENU_NAME_LIST[pageNameKey] && opened ? /*#__PURE__*/React.createElement(_Text.SubTitleSmall, {
-    color: _Text.TEXT_COLORS.inverseSecondary,
-    className: _SideMenuLinkModule.default.menuText
-  }, MENU_NAME_LIST[pageNameKey].title) : null));
+  }) : null, opened ? /*#__PURE__*/React.createElement("div", {
+    className: _SideMenuLinkModule.default.menuLabelContainer
+  }, pageNameKey && MENU_NAME_LIST[pageNameKey] ? isGroupMenuLink ? /*#__PURE__*/React.createElement(_Text.SubTitleSmall, {
+    className: _SideMenuLinkModule.default.groupMenuLinkText
+  }, MENU_NAME_LIST[pageNameKey].title) : /*#__PURE__*/React.createElement(_Text.BodyMedium, {
+    className: _SideMenuLinkModule.default.menuLinkText
+  }, MENU_NAME_LIST[pageNameKey].title) : null, rightSlot ? rightSlot : null) : null)));
 });
 exports.SideMenuLink = SideMenuLink;
 SideMenuLink.displayName = 'SideMenuLink';

package/lib/components/SideMenuLink/SideMenuLink.js.flow

@@ -6,7 +6,9 @@ import classify from '../../utils/classify';
 import {UnstyledButton} from '../Button';
 import {ConditionalWrapper} from '../ConditionalWrapper';
 import {Icon} from '../Icon';
-import {SubTitleSmall, TEXT_COLORS} from '../Text';
+import type {BaseLinkProps} from '../Link';
+import {Link} from '../Link';
+import {BodyMedium, SubTitleSmall, TEXT_COLORS} from '../Text';
 import type {BaseTooltipProps} from '../Tooltip';
 import {Tooltip} from '../Tooltip';
 
@@ -189,6 +191,10 @@ export type SideMenuLinkProps = {
   onChange?: (e: SyntheticEvent<HTMLElement>, newValue: string) => mixed,
   tabIndex?: number,
   tooltip?: BaseTooltipProps,
+  isGroupMenuLink?: boolean,
+  to?: string,
+  rightSlot?: React.Node,
+  linkComponent?: React.AbstractComponent<BaseLinkProps, ?HTMLAnchorElement>,
   ...
 };
 
@@ -206,6 +212,10 @@ export const SideMenuLink: React$AbstractComponent<
       onChange,
       tabIndex = 0,
       tooltip,
+      isGroupMenuLink = false,
+      linkComponent: LinkComponent,
+      rightSlot,
+      to,
       ...restButtonProps
     }: SideMenuLinkProps,
     ref,
@@ -218,49 +228,73 @@ export const SideMenuLink: React$AbstractComponent<
 
     return (
       <ConditionalWrapper
-        condition={Boolean(!opened && !inActive)}
+        condition={to !== undefined}
         wrapper={(children) => (
-          <Tooltip body={MENU_NAME_LIST[pageNameKey].title} {...tooltip}>
+          <Link
+            to={to}
+            tabIndex={-1}
+            linkComponent={LinkComponent}
+            onClick={(e) => e.preventDefault()}
+            className={css.linkComponent}
+          >
             {children}
-          </Tooltip>
+          </Link>
         )}
       >
-        <UnstyledButton
-          {...restButtonProps}
-          className={classify(
-            css.linkWrapper,
-            {
-              [css.selected]: selected,
-              [css.disabled]: disabled,
-              [css.inActive]: inActive,
-              [css.closed]: !opened,
-            },
-            classNames?.wrapper,
+        <ConditionalWrapper
+          condition={Boolean(!opened && !inActive)}
+          wrapper={(children) => (
+            <Tooltip body={MENU_NAME_LIST[pageNameKey].title} {...tooltip}>
+              {children}
+            </Tooltip>
           )}
-          onClick={onChangeHandler}
-          ref={ref}
-          tabIndex={disabled ? -1 : tabIndex}
-          disabled={disabled}
-          key={pageNameKey}
         >
-          {pageNameKey && MENU_NAME_LIST[pageNameKey] ? (
-            <Icon
-              type={MENU_NAME_LIST[pageNameKey].iconType}
-              name={MENU_NAME_LIST[pageNameKey].iconName}
-              size="medium"
-              color={TEXT_COLORS.inverseSecondary}
-              className={css.menuIcon}
-            />
-          ) : null}
-          {pageNameKey && MENU_NAME_LIST[pageNameKey] && opened ? (
-            <SubTitleSmall
-              color={TEXT_COLORS.inverseSecondary}
-              className={css.menuText}
-            >
-              {MENU_NAME_LIST[pageNameKey].title}
-            </SubTitleSmall>
-          ) : null}
-        </UnstyledButton>
+          <UnstyledButton
+            {...restButtonProps}
+            className={classify(
+              css.linkWrapper,
+              {
+                [css.selected]: selected,
+                [css.disabled]: disabled,
+                [css.inActive]: inActive,
+                [css.closed]: !opened,
+              },
+              classNames?.wrapper,
+            )}
+            onClick={onChangeHandler}
+            ref={ref}
+            tabIndex={disabled ? -1 : tabIndex}
+            disabled={disabled}
+            key={pageNameKey}
+          >
+            {pageNameKey && MENU_NAME_LIST[pageNameKey] ? (
+              <Icon
+                type={MENU_NAME_LIST[pageNameKey].iconType}
+                name={MENU_NAME_LIST[pageNameKey].iconName}
+                size="medium"
+                color={TEXT_COLORS.inverseSecondary}
+                className={css.menuIcon}
+              />
+            ) : null}
+            {opened ? (
+              <div className={css.menuLabelContainer}>
+                {pageNameKey && MENU_NAME_LIST[pageNameKey] ? (
+                  isGroupMenuLink ? (
+                    <SubTitleSmall className={css.groupMenuLinkText}>
+                      {MENU_NAME_LIST[pageNameKey].title}
+                    </SubTitleSmall>
+                  ) : (
+                    <BodyMedium className={css.menuLinkText}>
+                      {MENU_NAME_LIST[pageNameKey].title}
+                    </BodyMedium>
+                  )
+                ) : null}
+
+                {rightSlot ? rightSlot : null}
+              </div>
+            ) : null}
+          </UnstyledButton>
+        </ConditionalWrapper>
       </ConditionalWrapper>
     );
   },

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

@@ -8,6 +8,7 @@
   colorSideMenuBackgroundDefault,
   colorSideMenuBackgroundHovered,
   colorSideMenuBackgroundSelected,
+  colorGroupMenuTextDefault,
   colorFocusPrimary
   ) from '../../styles/variables/_color.css';
 @value ( spaceNone, spaceXXSmall, spaceXSmall, spaceSmall ) from '../../styles/variables/_space.css';
@@ -62,22 +63,47 @@
   color: colorSideMenuIconDefault;
 }
 
+.linkComponent {
+  width: sizeFluid;
+  text-decoration: none;
+}
+
 .linkWrapper.selected {
   background: colorSideMenuBackgroundSelected;
   color: colorTextInversePrimary;
 }
 
-.linkWrapper.selected .menuIcon {
+.linkWrapper.selected .menuIcon,
+.linkWrapper.selected .menuLinkText {
   color: colorSideMenuIconActive;
 }
 
-.linkWrapper:not(.inActive):hover .menuIcon {
+.linkWrapper:hover .menuIcon {
   color: colorSideMenuIconActive;
 }
 
-.menuText {
+.groupMenuLinkText {
   color: inherit;
   margin-right: spaceSmall;
   white-space: nowrap;
   padding-right: spaceXXSmall;
 }
+
+.menuLinkText {
+  color: colorGroupMenuTextDefault;
+  margin-right: spaceSmall;
+  white-space: nowrap;
+  padding-right: spaceXXSmall;
+}
+
+.linkWrapper:hover .menuLinkText {
+  color: colorSideMenuIconActive;
+}
+
+.menuLabelContainer {
+  color: inherit;
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+  padding-right: spaceXSmall;
+}

package/package.json

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