@spaced-out/ui-design-system 0.1.120 → 0.1.122

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.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)
+
+
+### Bug Fixes
+
+* 👻 added ghost buttons for range slider instead of clickable buttons ([ddff85a](https://github.com/spaced-out/ui-design-system/commit/ddff85a2202363132a530f8ed288279d182d1d2b))
+* accessibility fixes for range slider ([67d4f94](https://github.com/spaced-out/ui-design-system/commit/67d4f9450e687a46162c1c3a8fa8c6ee7c8e5115))
+
 ### [0.1.120](https://github.com/spaced-out/ui-design-system/compare/v0.1.119...v0.1.120) (2024-08-19)
 
 

package/lib/components/Button/Button.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UnstyledButton = exports.Button = exports.BUTTON_TYPES = exports.BUTTON_ACTION_TYPE = void 0;
+exports.UnstyledButton = exports.Button = exports.BUTTON_TYPES = exports.BUTTON_SIZE = exports.BUTTON_ACTION_TYPE = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
 var _CircularLoader = require("../CircularLoader");
@@ -38,6 +38,11 @@ const BUTTON_ACTION_TYPE = Object.freeze({
   reset: 'reset'
 });
 exports.BUTTON_ACTION_TYPE = BUTTON_ACTION_TYPE;
+const BUTTON_SIZE = Object.freeze({
+  small: 'small',
+  medium: 'medium'
+});
+exports.BUTTON_SIZE = BUTTON_SIZE;
 const ButtonTypeToIconColorMap = {
   primary: 'inversePrimary',
   secondary: 'clickable',

package/lib/components/Button/Button.js.flow

@@ -37,8 +37,14 @@ export const BUTTON_ACTION_TYPE = Object.freeze({
   reset: 'reset',
 });
 
+export const BUTTON_SIZE = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+});
+
 export type ButtonType = $Values<typeof BUTTON_TYPES>;
 export type ButtonActionType = $Values<typeof BUTTON_ACTION_TYPE>;
+export type ButtonSize = $Keys<typeof BUTTON_SIZE>;
 
 export type BaseButtonProps = {
   children?: React.Node,
@@ -66,7 +72,7 @@ export type ButtonProps = {
   iconRightType?: IconType,
   type?: ButtonType,
   isFluid?: boolean,
-  size?: 'medium' | 'small',
+  size?: ButtonSize,
   ...
 };
 

package/lib/components/Button/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "BUTTON_ACTION_TYPE", {
     return _Button.BUTTON_ACTION_TYPE;
   }
 });
+Object.defineProperty(exports, "BUTTON_SIZE", {
+  enumerable: true,
+  get: function () {
+    return _Button.BUTTON_SIZE;
+  }
+});
 Object.defineProperty(exports, "BUTTON_TYPES", {
   enumerable: true,
   get: function () {

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

@@ -3,12 +3,14 @@
 export type {
   ButtonActionType,
   ButtonProps,
+  ButtonSize,
   ButtonType,
   UnstyledButtonProps,
 } from './Button';
 export {
   Button,
   BUTTON_ACTION_TYPE,
+  BUTTON_SIZE,
   BUTTON_TYPES,
   UnstyledButton,
 } from './Button';

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/RangeSlider/RangeSlider.js

@@ -7,7 +7,9 @@ exports.RangeSlider = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _color = require("../../styles/variables/_color");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
-var _Icon = require("../Icon");
+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); }
@@ -24,27 +26,35 @@ const RangeSlider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onChange,
     showTicks,
     iconLeftName = 'minus',
-    iconLeftSize = _Icon.ICON_SIZE.small,
-    iconLeftType,
+    btnLeftSize = _Button.BUTTON_SIZE.small,
     iconRightName = 'plus',
-    iconRightSize = _Icon.ICON_SIZE.small,
-    iconRightType,
-    hideLeftIcon,
-    hideRightIcon,
+    btnRightSize = _Button.BUTTON_SIZE.small,
+    hideLeftBtn,
+    hideRightBtn,
+    ariaLabel = 'Slider',
+    showRange,
+    hideValueInput,
     ...restInputProps
   } = _ref;
   const progress = (value - min) / (max - min) * 100;
-  const iconLeftDisabled = disabled || value <= min;
-  const iconRightDisabled = disabled || value >= max;
-
-  /**
-   * Note(Nishant): This needs to be done because the Clickable Icon
-   * does not support disable prop currently. This can become a refactor
-   * task once we bake in disable support to Clickable Icon variation
-   */
-  const LeftIconComponent = iconLeftDisabled ? _Icon.Icon : _Icon.ClickableIcon;
-  const RightIconComponent = iconRightDisabled ? _Icon.Icon : _Icon.ClickableIcon;
+  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);
   };
@@ -59,14 +69,17 @@ const RangeSlider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className: (0, _classify.default)(_RangeSliderModule.default.wrapper, {
       [_RangeSliderModule.default.disabled]: disabled
     }, classNames?.wrapper)
-  }, !hideLeftIcon && /*#__PURE__*/React.createElement(LeftIconComponent, _extends({
-    name: iconLeftName,
-    size: iconLeftSize,
-    type: iconLeftType,
-    color: iconLeftDisabled ? 'disabled' : 'primary'
-  }, !(disabled || value <= min) && {
+  }, !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",
@@ -78,6 +91,7 @@ const RangeSlider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className: _RangeSliderModule.default.slider,
     list: showTicks ? 'ticks' : undefined,
     disabled: disabled,
+    "aria-label": ariaLabel,
     style: {
       background: `linear-gradient(to right, ${progressColor} ${progress}%, ${_color.colorGrayLightest} ${progress}%)`
     }
@@ -88,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
-  })))), !hideRightIcon && /*#__PURE__*/React.createElement(RightIconComponent, _extends({
-    name: iconRightName,
-    size: iconRightSize,
-    type: iconRightType,
-    color: iconRightDisabled ? 'disabled' : 'primary'
-  }, !(disabled || value >= max) && {
+    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

@@ -8,8 +8,10 @@ import {
   colorTextDisabled,
 } from '../../styles/variables/_color';
 import classify from '../../utils/classify';
-import type {IconSize, IconType} from '../Icon';
-import {ClickableIcon, Icon, ICON_SIZE} from '../Icon';
+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';
 
@@ -24,15 +26,16 @@ export type RangeSliderProps = {
   onChange?: (value: number) => void, // We don't want to send in the event because the icon buttons also modify the value
   showTicks?: boolean,
   iconLeftName?: string,
-  iconLeftType?: IconType,
-  iconLeftSize?: IconSize,
+  btnLeftSize?: ButtonSize,
   iconRightName?: string,
-  iconRightType?: IconType,
-  iconRightSize?: IconSize,
+  btnRightSize?: ButtonSize,
   disabled?: boolean,
-  hideLeftIcon?: boolean,
-  hideRightIcon?: boolean,
+  hideLeftBtn?: boolean,
+  hideRightBtn?: boolean,
   classNames?: ClassNames,
+  ariaLabel?: string,
+  showRange?: boolean,
+  hideValueInput?: boolean,
   ...
 };
 
@@ -51,32 +54,41 @@ export const RangeSlider: React$AbstractComponent<
       onChange,
       showTicks,
       iconLeftName = 'minus',
-      iconLeftSize = ICON_SIZE.small,
-      iconLeftType,
+      btnLeftSize = BUTTON_SIZE.small,
       iconRightName = 'plus',
-      iconRightSize = ICON_SIZE.small,
-      iconRightType,
-      hideLeftIcon,
-      hideRightIcon,
+      btnRightSize = BUTTON_SIZE.small,
+      hideLeftBtn,
+      hideRightBtn,
+      ariaLabel = 'Slider',
+      showRange,
+      hideValueInput,
       ...restInputProps
     }: RangeSliderProps,
     ref,
   ) => {
     const progress = ((value - min) / (max - min)) * 100;
 
-    const iconLeftDisabled = disabled || value <= min;
-    const iconRightDisabled = disabled || value >= max;
-
-    /**
-     * Note(Nishant): This needs to be done because the Clickable Icon
-     * does not support disable prop currently. This can become a refactor
-     * task once we bake in disable support to Clickable Icon variation
-     */
-    const LeftIconComponent = iconLeftDisabled ? Icon : ClickableIcon;
-    const RightIconComponent = iconRightDisabled ? Icon : ClickableIcon;
+    const btnLeftDisabled = disabled || value <= min;
+    const btnRightDisabled = disabled || value >= max;
 
     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);
     };
@@ -97,18 +109,26 @@ export const RangeSlider: React$AbstractComponent<
           classNames?.wrapper,
         )}
       >
-        {!hideLeftIcon && (
-          <LeftIconComponent
-            name={iconLeftName}
-            size={iconLeftSize}
-            type={iconLeftType}
-            color={iconLeftDisabled ? 'disabled' : 'primary'}
-            {...(!(disabled || value <= min) && {
-              onClick: () => emitRoundedValue(value - step),
-            })}
+        {!hideLeftBtn && !showRange && (
+          <Button
+            type="ghost"
+            iconLeftName={iconLeftName}
+            size={btnLeftSize}
+            ariaLabel="Decrease Value"
+            disabled={btnLeftDisabled}
+            onClick={() => emitRoundedValue(value - step)}
           />
         )}
 
+        {showRange && (
+          <BodySmall
+            className={css.rangeText}
+            color={disabled ? 'disabled' : 'primary'}
+          >
+            {min}
+          </BodySmall>
+        )}
+
         <div className={css.sliderContainer}>
           <input
             {...restInputProps}
@@ -121,6 +141,7 @@ export const RangeSlider: React$AbstractComponent<
             className={css.slider}
             list={showTicks ? 'ticks' : undefined}
             disabled={disabled}
+            aria-label={ariaLabel}
             style={{
               background: `linear-gradient(to right, ${progressColor} ${progress}%, ${colorGrayLightest} ${progress}%)`,
             }}
@@ -133,20 +154,46 @@ 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>
-        {!hideRightIcon && (
-          <RightIconComponent
-            name={iconRightName}
-            size={iconRightSize}
-            type={iconRightType}
-            color={iconRightDisabled ? 'disabled' : 'primary'}
-            {...(!(disabled || value >= max) && {
-              onClick: () => emitRoundedValue(value + step),
-            })}
+
+        {showRange && (
+          <BodySmall
+            className={css.rangeText}
+            color={disabled ? 'disabled' : 'primary'}
+          >
+            {max}
+          </BodySmall>
+        )}
+
+        {!hideRightBtn && !showRange && (
+          <Button
+            type="ghost"
+            iconRightName={iconRightName}
+            size={btnRightSize}
+            ariaLabel="Increase Value"
+            disabled={btnRightDisabled}
+            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/package.json

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