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

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

@@ -7,7 +7,7 @@ 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 _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,26 +24,17 @@ 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',
     ...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 handleChange = e => {
     emitRoundedValue(e.currentTarget.value);
@@ -59,14 +50,14 @@ 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 && /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "ghost",
+    iconLeftName: iconLeftName,
+    size: btnLeftSize,
+    ariaLabel: "Decrease Value",
+    disabled: btnLeftDisabled,
     onClick: () => emitRoundedValue(value - step)
-  })), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: _RangeSliderModule.default.sliderContainer
   }, /*#__PURE__*/React.createElement("input", _extends({}, restInputProps, {
     type: "range",
@@ -78,6 +69,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}%)`
     }
@@ -89,13 +81,13 @@ const RangeSlider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, (_, 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) && {
+  })))), !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

@@ -8,8 +8,8 @@ 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 css from './RangeSlider.module.css';
 
@@ -24,15 +24,14 @@ 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,
   ...
 };
 
@@ -51,29 +50,20 @@ 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',
       ...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;
 
@@ -97,15 +87,14 @@ 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 && (
+          <Button
+            type="ghost"
+            iconLeftName={iconLeftName}
+            size={btnLeftSize}
+            ariaLabel="Decrease Value"
+            disabled={btnLeftDisabled}
+            onClick={() => emitRoundedValue(value - step)}
           />
         )}
 
@@ -121,6 +110,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}%)`,
             }}
@@ -138,15 +128,14 @@ export const RangeSlider: React$AbstractComponent<
             </datalist>
           )}
         </div>
-        {!hideRightIcon && (
-          <RightIconComponent
-            name={iconRightName}
-            size={iconRightSize}
-            type={iconRightType}
-            color={iconRightDisabled ? 'disabled' : 'primary'}
-            {...(!(disabled || value >= max) && {
-              onClick: () => emitRoundedValue(value + step),
-            })}
+        {!hideRightBtn && (
+          <Button
+            type="ghost"
+            iconRightName={iconRightName}
+            size={btnRightSize}
+            ariaLabel="Increase Value"
+            disabled={btnRightDisabled}
+            onClick={() => emitRoundedValue(value + step)}
           />
         )}
       </div>

package/package.json

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