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

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 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)
 
 

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

@@ -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/package.json

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