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

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.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)
+
+
+### Features
+
+* 🛝 new range slider component ([#254](https://github.com/spaced-out/ui-design-system/issues/254)) ([5631aa3](https://github.com/spaced-out/ui-design-system/commit/5631aa30bc9794e4400b0b88938dc2700a94939d))
+
 ### [0.1.119](https://github.com/spaced-out/ui-design-system/compare/v0.1.118...v0.1.119) (2024-08-16)
 
 

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

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RangeSlider = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _color = require("../../styles/variables/_color");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
+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); }
+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; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const RangeSlider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    classNames,
+    disabled,
+    min = 0,
+    max = 100,
+    step = 1,
+    value = min,
+    onChange,
+    showTicks,
+    iconLeftName = 'minus',
+    btnLeftSize = _Button.BUTTON_SIZE.small,
+    iconRightName = 'plus',
+    btnRightSize = _Button.BUTTON_SIZE.small,
+    hideLeftBtn,
+    hideRightBtn,
+    ariaLabel = 'Slider',
+    ...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 handleChange = e => {
+    emitRoundedValue(e.currentTarget.value);
+  };
+  const emitRoundedValue = value => {
+    const newValue = parseFloat(value);
+    const roundedValue = Math.round(newValue * 100) / 100; // Rounds to two decimal places
+    onChange?.(roundedValue);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": "RangeSlider",
+    className: (0, _classify.default)(_RangeSliderModule.default.wrapper, {
+      [_RangeSliderModule.default.disabled]: disabled
+    }, classNames?.wrapper)
+  }, !hideLeftBtn && /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "ghost",
+    iconLeftName: iconLeftName,
+    size: btnLeftSize,
+    ariaLabel: "Decrease Value",
+    disabled: btnLeftDisabled,
+    onClick: () => emitRoundedValue(value - step)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _RangeSliderModule.default.sliderContainer
+  }, /*#__PURE__*/React.createElement("input", _extends({}, restInputProps, {
+    type: "range",
+    min: min,
+    max: max,
+    step: step,
+    value: value,
+    onChange: handleChange,
+    className: _RangeSliderModule.default.slider,
+    list: showTicks ? 'ticks' : undefined,
+    disabled: disabled,
+    "aria-label": ariaLabel,
+    style: {
+      background: `linear-gradient(to right, ${progressColor} ${progress}%, ${_color.colorGrayLightest} ${progress}%)`
+    }
+  })), showTicks && step > 0 && /*#__PURE__*/React.createElement("datalist", {
+    id: "ticks",
+    className: _RangeSliderModule.default.sliderTicks
+  }, Array.from({
+    length: (max - min) / step + 1
+  }, (_, index) => /*#__PURE__*/React.createElement("option", {
+    key: index,
+    value: min + index * step
+  })))), !hideRightBtn && /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "ghost",
+    iconRightName: iconRightName,
+    size: btnRightSize,
+    ariaLabel: "Increase Value",
+    disabled: btnRightDisabled,
+    onClick: () => emitRoundedValue(value + step)
+  }));
+});
+exports.RangeSlider = RangeSlider;

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

@@ -0,0 +1,144 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {
+  colorFillPrimary,
+  colorGrayLightest,
+  colorTextDisabled,
+} from '../../styles/variables/_color';
+import classify from '../../utils/classify';
+import type {ButtonSize} from '../Button';
+import {Button, BUTTON_SIZE} from '../Button';
+
+import css from './RangeSlider.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type RangeSliderProps = {
+  min?: number,
+  max?: number,
+  step?: number,
+  value?: number,
+  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,
+  btnLeftSize?: ButtonSize,
+  iconRightName?: string,
+  btnRightSize?: ButtonSize,
+  disabled?: boolean,
+  hideLeftBtn?: boolean,
+  hideRightBtn?: boolean,
+  classNames?: ClassNames,
+  ariaLabel?: string,
+  ...
+};
+
+export const RangeSlider: React$AbstractComponent<
+  RangeSliderProps,
+  HTMLDivElement,
+> = React.forwardRef<RangeSliderProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      disabled,
+      min = 0,
+      max = 100,
+      step = 1,
+      value = min,
+      onChange,
+      showTicks,
+      iconLeftName = 'minus',
+      btnLeftSize = BUTTON_SIZE.small,
+      iconRightName = 'plus',
+      btnRightSize = BUTTON_SIZE.small,
+      hideLeftBtn,
+      hideRightBtn,
+      ariaLabel = 'Slider',
+      ...restInputProps
+    }: RangeSliderProps,
+    ref,
+  ) => {
+    const progress = ((value - min) / (max - min)) * 100;
+
+    const btnLeftDisabled = disabled || value <= min;
+    const btnRightDisabled = disabled || value >= max;
+
+    const progressColor = disabled ? colorTextDisabled : colorFillPrimary;
+
+    const handleChange = (e: SyntheticEvent<HTMLInputElement>) => {
+      emitRoundedValue(e.currentTarget.value);
+    };
+
+    const emitRoundedValue = (value: number | string) => {
+      const newValue = parseFloat(value);
+      const roundedValue = Math.round(newValue * 100) / 100; // Rounds to two decimal places
+      onChange?.(roundedValue);
+    };
+
+    return (
+      <div
+        ref={ref}
+        data-testid="RangeSlider"
+        className={classify(
+          css.wrapper,
+          {[css.disabled]: disabled},
+          classNames?.wrapper,
+        )}
+      >
+        {!hideLeftBtn && (
+          <Button
+            type="ghost"
+            iconLeftName={iconLeftName}
+            size={btnLeftSize}
+            ariaLabel="Decrease Value"
+            disabled={btnLeftDisabled}
+            onClick={() => emitRoundedValue(value - step)}
+          />
+        )}
+
+        <div className={css.sliderContainer}>
+          <input
+            {...restInputProps}
+            type="range"
+            min={min}
+            max={max}
+            step={step}
+            value={value}
+            onChange={handleChange}
+            className={css.slider}
+            list={showTicks ? 'ticks' : undefined}
+            disabled={disabled}
+            aria-label={ariaLabel}
+            style={{
+              background: `linear-gradient(to right, ${progressColor} ${progress}%, ${colorGrayLightest} ${progress}%)`,
+            }}
+          />
+          {showTicks && step > 0 && (
+            <datalist id="ticks" className={css.sliderTicks}>
+              {/*
+                Note(Nishant): Currently, ticks are shown based on the step value.
+                This can be easily extended in the future to support custom tick intervals
+                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} />
+              ))}
+            </datalist>
+          )}
+        </div>
+        {!hideRightBtn && (
+          <Button
+            type="ghost"
+            iconRightName={iconRightName}
+            size={btnRightSize}
+            ariaLabel="Increase Value"
+            disabled={btnRightDisabled}
+            onClick={() => emitRoundedValue(value + step)}
+          />
+        )}
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,121 @@
+@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 (borderRadiusLarge, borderRadiusCircle, borderWidthTertiary, borderWidthNone) from '../../styles/variables/_border.css';
+
+@value thumbSize: size20;
+@value tickSize: size2;
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  width: sizeFluid;
+  gap: calc(spaceXSmall * 2);
+}
+
+.sliderContainer {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  position: relative;
+  width: sizeFluid;
+}
+
+.slider {
+  display: flex;
+  align-items: center;
+  -webkit-appearance: none;
+  appearance: none;
+  width: sizeFluid;
+  height: size4;
+  background-color: colorGrayLightest;
+  border-radius: borderRadiusLarge;
+  outline: none;
+  cursor: pointer;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: thumbSize;
+  height: thumbSize;
+  border-radius: borderRadiusCircle;
+  background: colorFillPrimary;
+  cursor: progress;
+  border: borderWidthTertiary solid colorBackgroundTertiary;
+  cursor: move; /* fallback if grab cursor is unsupported */
+  cursor: grab;
+  cursor: -webkit-grab;
+}
+
+.slider:active::-webkit-slider-thumb {
+  cursor: grabbing;
+  cursor: -webkit-grabbing;
+}
+
+.disabled .slider::-webkit-slider-thumb {
+  background: colorTextDisabled; /* Disabled thumb color */
+  cursor: not-allowed;
+}
+
+.slider::-moz-range-thumb {
+  width: thumbSize;
+  height: thumbSize;
+  border-radius: borderRadiusCircle;
+  background: colorFillPrimary;
+  cursor: progress;
+  border: borderWidthTertiary solid colorBackgroundTertiary;
+  cursor: move; /* fallback if grab cursor is unsupported */
+  cursor: grab;
+  cursor: -moz-grab;
+}
+
+.slider:active::-moz-range-thumb {
+  cursor: grabbing;
+  cursor: -moz-grabbing;
+}
+
+.disabled .slider::-moz-range-thumb {
+  background: colorTextDisabled; /* Disabled thumb color */
+  cursor: not-allowed;
+}
+
+/***** Focus Styles *****/
+/* Removes default focus */
+input[type='range']:focus {
+  outline: none;
+}
+
+input[type='range']:focus::-webkit-slider-thumb {
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
+}
+
+input[type='range']:focus::-moz-range-thumb {
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
+}
+
+.sliderTicks {
+  display: flex;
+  position: absolute;
+  top: calc(spaceXXSmall / 4);
+  width: sizeFluid;
+  justify-content: space-between;
+  pointer-events: none; /* Prevent ticks from interfering with slider interaction */
+  padding: spaceNone calc(thumbSize / 2); /* Half of thumb size */
+}
+
+.sliderTicks option {
+  display: flex;
+  background-color: colorFillPrimary;
+  width: tickSize;
+  height: tickSize;
+  border-radius: borderRadiusLarge;
+  display: flex;
+  padding-block-start: spaceNone;
+  padding-block-end: spaceNone;
+  min-block-size: tickSize;
+  padding-inline: spaceNone;
+  white-space: nowrap;
+}

package/lib/components/RangeSlider/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _RangeSlider = require("./RangeSlider");
+Object.keys(_RangeSlider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _RangeSlider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RangeSlider[key];
+    }
+  });
+});

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

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './RangeSlider';

package/lib/components/index.js

@@ -454,6 +454,17 @@ Object.keys(_RadioButton).forEach(function (key) {
     }
   });
 });
+var _RangeSlider = require("./RangeSlider");
+Object.keys(_RangeSlider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _RangeSlider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RangeSlider[key];
+    }
+  });
+});
 var _SearchInput = require("./SearchInput");
 Object.keys(_SearchInput).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -41,6 +41,7 @@ export * from './Pagination';
 export * from './Panel';
 export * from './ProgressDonut';
 export * from './RadioButton';
+export * from './RangeSlider';
 export * from './SearchInput';
 export * from './Shimmer';
 export * from './SideMenuLink';

package/package.json

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