@instructure/ui-number-input 10.8.1-snapshot-0 → 10.8.1-snapshot-3

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.8.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.8.0...v10.8.1-snapshot-0) (2024-12-10)
+## [10.8.1-snapshot-3](https://github.com/instructure/instructure-ui/compare/v10.8.0...v10.8.1-snapshot-3) (2024-12-11)
 
-**Note:** Version bump only for package @instructure/ui-number-input
+
+### Features
+
+* **ui-number-input:** add customizable icons for increment and decrement buttons ([7be2226](https://github.com/instructure/instructure-ui/commit/7be222651902524f6c166e39f09878542a646d7c))
 
 
 

package/es/NumberInput/__new-tests__/NumberInput.test.js

@@ -1,4 +1,4 @@
-var _NumberInput, _NumberInput2, _NumberInput3, _NumberInput4;
+var _NumberInput, _NumberInput2, _NumberInput3, _NumberInput4, _IconZoomInLine, _IconZoomOutLine;
 /*
  * The MIT License (MIT)
  *
@@ -33,6 +33,7 @@ import { NumberInput } from '../index';
 import NumberInputExamples from '../__examples__/NumberInput.examples';
 // eslint-disable-next-line no-restricted-imports
 import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11yTests';
+import { IconZoomInLine, IconZoomOutLine } from '@instructure/ui-icons';
 describe('<NumberInput />', () => {
   let consoleWarningMock;
   let consoleErrorMock;
@@ -253,4 +254,31 @@ describe('<NumberInput />', () => {
       });
     }
   });
+  it('renders custom interactive icons', async () => {
+    const onDecrement = vi.fn();
+    const onIncrement = vi.fn();
+    const _render11 = render(/*#__PURE__*/React.createElement(NumberInput, {
+        renderLabel: "Label",
+        onIncrement: onIncrement,
+        onDecrement: onDecrement,
+        renderIcons: {
+          increase: _IconZoomInLine || (_IconZoomInLine = /*#__PURE__*/React.createElement(IconZoomInLine, null)),
+          decrease: _IconZoomOutLine || (_IconZoomOutLine = /*#__PURE__*/React.createElement(IconZoomOutLine, null))
+        }
+      })),
+      container = _render11.container;
+    const zoomInIcon = container.querySelector('svg[name="IconZoomIn"]');
+    const zoomOutIcon = container.querySelector('svg[name="IconZoomOut"]');
+    expect(zoomInIcon).toBeInTheDocument();
+    expect(zoomOutIcon).toBeInTheDocument();
+    const buttons = container.querySelectorAll('button[class$="-numberInput_arrow');
+    userEvent.click(buttons[0]);
+    await waitFor(() => {
+      expect(onIncrement).toHaveBeenCalledTimes(1);
+    });
+    userEvent.click(buttons[1]);
+    await waitFor(() => {
+      expect(onDecrement).toHaveBeenCalledTimes(1);
+    });
+  });
 });

package/es/NumberInput/index.js

@@ -150,7 +150,7 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
       }
     }
   }
-  renderArrows() {
+  renderArrows(customIcons) {
     var _this$props$styles, _this$props$styles2, _this$props$styles3;
     return jsx("span", {
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.arrowContainer
@@ -160,13 +160,13 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
       onMouseDown: this.handleClickUpArrow,
       tabIndex: -1,
       type: "button"
-    }, _IconArrowOpenUpLine || (_IconArrowOpenUpLine = jsx(IconArrowOpenUpLine, null))), jsx("button", {
+    }, customIcons !== null && customIcons !== void 0 && customIcons.increase ? callRenderProp(customIcons.increase) : _IconArrowOpenUpLine || (_IconArrowOpenUpLine = jsx(IconArrowOpenUpLine, null))), jsx("button", {
       "aria-hidden": true,
       css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.arrow,
       onMouseDown: this.handleClickDownArrow,
       tabIndex: -1,
       type: "button"
-    }, _IconArrowOpenDownLin || (_IconArrowOpenDownLin = jsx(IconArrowOpenDownLine, null))));
+    }, customIcons !== null && customIcons !== void 0 && customIcons.decrease ? callRenderProp(customIcons.decrease) : _IconArrowOpenDownLin || (_IconArrowOpenDownLin = jsx(IconArrowOpenDownLine, null))));
   }
   render() {
     var _this$props$styles4, _this$props$styles5, _this$props$styles6;
@@ -179,7 +179,8 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
       value = _this$props4.value,
       width = _this$props4.width,
       styles = _this$props4.styles,
-      allowStringValue = _this$props4.allowStringValue;
+      allowStringValue = _this$props4.allowStringValue,
+      renderIcons = _this$props4.renderIcons;
     const interaction = this.interaction;
     const rawLabel = callRenderProp(renderLabel);
     const label = hasVisibleChildren(rawLabel) ? jsx(React.Fragment, null, rawLabel, isRequired && jsx("span", {
@@ -214,7 +215,7 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
       onBlur: this.handleBlur,
       onChange: this.handleChange,
       onKeyDown: this.handleKeyDown
-    })), showArrows ? this.renderArrows() : null)));
+    })), showArrows ? this.renderArrows(renderIcons) : null)));
   }
 }, _NumberInput.displayName = "NumberInput", _NumberInput.componentId = 'NumberInput', _NumberInput.allowedProps = allowedProps, _NumberInput.propTypes = propTypes, _NumberInput.defaultProps = {
   // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied

package/es/NumberInput/props.js

@@ -45,7 +45,11 @@ const propTypes = {
   onKeyDown: PropTypes.func,
   inputMode: PropTypes.oneOf(['numeric', 'decimal', 'tel']),
   textAlign: PropTypes.oneOf(['start', 'center']),
-  allowStringValue: PropTypes.bool
+  allowStringValue: PropTypes.bool,
+  renderIcons: PropTypes.shape({
+    increase: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+    decrease: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired
+  })
 };
-const allowedProps = ['renderLabel', 'id', 'interaction', 'messages', 'placeholder', 'isRequired', 'showArrows', 'size', 'value', 'width', 'display', 'inputRef', 'onFocus', 'onBlur', 'onChange', 'onDecrement', 'onIncrement', 'onKeyDown', 'inputMode', 'textAlign', 'allowStringValue'];
+const allowedProps = ['renderLabel', 'id', 'interaction', 'messages', 'placeholder', 'isRequired', 'showArrows', 'size', 'value', 'width', 'display', 'inputRef', 'onFocus', 'onBlur', 'onChange', 'onDecrement', 'onIncrement', 'onKeyDown', 'inputMode', 'textAlign', 'allowStringValue', 'renderIcons'];
 export { propTypes, allowedProps };

package/lib/NumberInput/__new-tests__/NumberInput.test.js

@@ -10,7 +10,9 @@ require("@testing-library/jest-dom");
 var _index = require("../index");
 var _NumberInput5 = _interopRequireDefault(require("../__examples__/NumberInput.examples"));
 var _generateA11yTests = require("@instructure/ui-scripts/lib/test/generateA11yTests");
-var _NumberInput, _NumberInput2, _NumberInput3, _NumberInput4;
+var _IconZoomInLine2 = require("@instructure/ui-icons/lib/IconZoomInLine.js");
+var _IconZoomOutLine2 = require("@instructure/ui-icons/lib/IconZoomOutLine.js");
+var _NumberInput, _NumberInput2, _NumberInput3, _NumberInput4, _IconZoomInLine, _IconZoomOutLine;
 /*
  * The MIT License (MIT)
  *
@@ -255,4 +257,31 @@ describe('<NumberInput />', () => {
       });
     }
   });
+  it('renders custom interactive icons', async () => {
+    const onDecrement = _vitest.vi.fn();
+    const onIncrement = _vitest.vi.fn();
+    const _render11 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.NumberInput, {
+        renderLabel: "Label",
+        onIncrement: onIncrement,
+        onDecrement: onDecrement,
+        renderIcons: {
+          increase: _IconZoomInLine || (_IconZoomInLine = /*#__PURE__*/_react.default.createElement(_IconZoomInLine2.IconZoomInLine, null)),
+          decrease: _IconZoomOutLine || (_IconZoomOutLine = /*#__PURE__*/_react.default.createElement(_IconZoomOutLine2.IconZoomOutLine, null))
+        }
+      })),
+      container = _render11.container;
+    const zoomInIcon = container.querySelector('svg[name="IconZoomIn"]');
+    const zoomOutIcon = container.querySelector('svg[name="IconZoomOut"]');
+    expect(zoomInIcon).toBeInTheDocument();
+    expect(zoomOutIcon).toBeInTheDocument();
+    const buttons = container.querySelectorAll('button[class$="-numberInput_arrow');
+    _userEvent.default.click(buttons[0]);
+    await (0, _react2.waitFor)(() => {
+      expect(onIncrement).toHaveBeenCalledTimes(1);
+    });
+    _userEvent.default.click(buttons[1]);
+    await (0, _react2.waitFor)(() => {
+      expect(onDecrement).toHaveBeenCalledTimes(1);
+    });
+  });
 });

package/lib/NumberInput/index.js

@@ -162,7 +162,7 @@ let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDet
       }
     }
   }
-  renderArrows() {
+  renderArrows(customIcons) {
     var _this$props$styles, _this$props$styles2, _this$props$styles3;
     return (0, _emotion.jsx)("span", {
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.arrowContainer
@@ -172,13 +172,13 @@ let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDet
       onMouseDown: this.handleClickUpArrow,
       tabIndex: -1,
       type: "button"
-    }, _IconArrowOpenUpLine || (_IconArrowOpenUpLine = (0, _emotion.jsx)(_IconArrowOpenUpLine2.IconArrowOpenUpLine, null))), (0, _emotion.jsx)("button", {
+    }, customIcons !== null && customIcons !== void 0 && customIcons.increase ? (0, _callRenderProp.callRenderProp)(customIcons.increase) : _IconArrowOpenUpLine || (_IconArrowOpenUpLine = (0, _emotion.jsx)(_IconArrowOpenUpLine2.IconArrowOpenUpLine, null))), (0, _emotion.jsx)("button", {
       "aria-hidden": true,
       css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.arrow,
       onMouseDown: this.handleClickDownArrow,
       tabIndex: -1,
       type: "button"
-    }, _IconArrowOpenDownLin || (_IconArrowOpenDownLin = (0, _emotion.jsx)(_IconArrowOpenDownLine.IconArrowOpenDownLine, null))));
+    }, customIcons !== null && customIcons !== void 0 && customIcons.decrease ? (0, _callRenderProp.callRenderProp)(customIcons.decrease) : _IconArrowOpenDownLin || (_IconArrowOpenDownLin = (0, _emotion.jsx)(_IconArrowOpenDownLine.IconArrowOpenDownLine, null))));
   }
   render() {
     var _this$props$styles4, _this$props$styles5, _this$props$styles6;
@@ -191,7 +191,8 @@ let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDet
       value = _this$props4.value,
       width = _this$props4.width,
       styles = _this$props4.styles,
-      allowStringValue = _this$props4.allowStringValue;
+      allowStringValue = _this$props4.allowStringValue,
+      renderIcons = _this$props4.renderIcons;
     const interaction = this.interaction;
     const rawLabel = (0, _callRenderProp.callRenderProp)(renderLabel);
     const label = (0, _hasVisibleChildren.hasVisibleChildren)(rawLabel) ? (0, _emotion.jsx)(_react.default.Fragment, null, rawLabel, isRequired && (0, _emotion.jsx)("span", {
@@ -226,7 +227,7 @@ let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDet
       onBlur: this.handleBlur,
       onChange: this.handleChange,
       onKeyDown: this.handleKeyDown
-    })), showArrows ? this.renderArrows() : null)));
+    })), showArrows ? this.renderArrows(renderIcons) : null)));
   }
 }, _NumberInput.displayName = "NumberInput", _NumberInput.componentId = 'NumberInput', _NumberInput.allowedProps = _props.allowedProps, _NumberInput.propTypes = _props.propTypes, _NumberInput.defaultProps = {
   // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied

package/lib/NumberInput/props.js

@@ -52,6 +52,10 @@ const propTypes = exports.propTypes = {
   onKeyDown: _propTypes.default.func,
   inputMode: _propTypes.default.oneOf(['numeric', 'decimal', 'tel']),
   textAlign: _propTypes.default.oneOf(['start', 'center']),
-  allowStringValue: _propTypes.default.bool
+  allowStringValue: _propTypes.default.bool,
+  renderIcons: _propTypes.default.shape({
+    increase: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
+    decrease: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired
+  })
 };
-const allowedProps = exports.allowedProps = ['renderLabel', 'id', 'interaction', 'messages', 'placeholder', 'isRequired', 'showArrows', 'size', 'value', 'width', 'display', 'inputRef', 'onFocus', 'onBlur', 'onChange', 'onDecrement', 'onIncrement', 'onKeyDown', 'inputMode', 'textAlign', 'allowStringValue'];
+const allowedProps = exports.allowedProps = ['renderLabel', 'id', 'interaction', 'messages', 'placeholder', 'isRequired', 'showArrows', 'size', 'value', 'width', 'display', 'inputRef', 'onFocus', 'onBlur', 'onChange', 'onDecrement', 'onIncrement', 'onKeyDown', 'inputMode', 'textAlign', 'allowStringValue', 'renderIcons'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-number-input",
-  "version": "10.8.1-snapshot-0",
+  "version": "10.8.1-snapshot-3",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "homepage": "https://instructure.github.io/instructure-ui/",
@@ -23,26 +23,26 @@
     "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.8.1-snapshot-0",
-    "@instructure/ui-babel-preset": "10.8.1-snapshot-0",
-    "@instructure/ui-scripts": "10.8.1-snapshot-0",
-    "@instructure/ui-test-utils": "10.8.1-snapshot-0",
-    "@instructure/ui-themes": "10.8.1-snapshot-0",
-    "@testing-library/jest-dom": "^6.4.6",
+    "@instructure/ui-axe-check": "10.8.1-snapshot-3",
+    "@instructure/ui-babel-preset": "10.8.1-snapshot-3",
+    "@instructure/ui-scripts": "10.8.1-snapshot-3",
+    "@instructure/ui-test-utils": "10.8.1-snapshot-3",
+    "@instructure/ui-themes": "10.8.1-snapshot-3",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "vitest": "^2.1.1"
+    "vitest": "^2.1.8"
   },
   "dependencies": {
-    "@babel/runtime": "^7.25.6",
-    "@instructure/emotion": "10.8.1-snapshot-0",
-    "@instructure/shared-types": "10.8.1-snapshot-0",
-    "@instructure/ui-form-field": "10.8.1-snapshot-0",
-    "@instructure/ui-icons": "10.8.1-snapshot-0",
-    "@instructure/ui-react-utils": "10.8.1-snapshot-0",
-    "@instructure/ui-testable": "10.8.1-snapshot-0",
-    "@instructure/ui-utils": "10.8.1-snapshot-0",
-    "@instructure/uid": "10.8.1-snapshot-0",
+    "@babel/runtime": "^7.26.0",
+    "@instructure/emotion": "10.8.1-snapshot-3",
+    "@instructure/shared-types": "10.8.1-snapshot-3",
+    "@instructure/ui-form-field": "10.8.1-snapshot-3",
+    "@instructure/ui-icons": "10.8.1-snapshot-3",
+    "@instructure/ui-react-utils": "10.8.1-snapshot-3",
+    "@instructure/ui-testable": "10.8.1-snapshot-3",
+    "@instructure/ui-utils": "10.8.1-snapshot-3",
+    "@instructure/uid": "10.8.1-snapshot-3",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },

package/src/NumberInput/__new-tests__/NumberInput.test.tsx

@@ -33,6 +33,7 @@ import { NumberInput } from '../index'
 import NumberInputExamples from '../__examples__/NumberInput.examples'
 // eslint-disable-next-line no-restricted-imports
 import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11yTests'
+import { IconZoomInLine, IconZoomOutLine } from '@instructure/ui-icons'
 
 describe('<NumberInput />', () => {
   let consoleWarningMock: ReturnType<typeof vi.spyOn>
@@ -282,4 +283,39 @@ describe('<NumberInput />', () => {
       })
     }
   })
+
+  it('renders custom interactive icons', async () => {
+    const onDecrement = vi.fn()
+    const onIncrement = vi.fn()
+    const { container } = render(
+      <NumberInput
+        renderLabel="Label"
+        onIncrement={onIncrement}
+        onDecrement={onDecrement}
+        renderIcons={{
+          increase: <IconZoomInLine />,
+          decrease: <IconZoomOutLine />
+        }}
+      />
+    )
+
+    const zoomInIcon = container.querySelector('svg[name="IconZoomIn"]')
+    const zoomOutIcon = container.querySelector('svg[name="IconZoomOut"]')
+    expect(zoomInIcon).toBeInTheDocument()
+    expect(zoomOutIcon).toBeInTheDocument()
+
+    const buttons = container.querySelectorAll(
+      'button[class$="-numberInput_arrow'
+    )
+
+    userEvent.click(buttons[0])
+    await waitFor(() => {
+      expect(onIncrement).toHaveBeenCalledTimes(1)
+    })
+
+    userEvent.click(buttons[1])
+    await waitFor(() => {
+      expect(onDecrement).toHaveBeenCalledTimes(1)
+    })
+  })
 })

package/src/NumberInput/index.tsx

@@ -52,6 +52,7 @@ import type {
   NumberInputState,
   NumberInputStyleProps
 } from './props'
+import { Renderable } from '@instructure/shared-types'
 
 /**
 ---
@@ -203,7 +204,7 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
     }
   }
 
-  renderArrows() {
+  renderArrows(customIcons?: { increase: Renderable; decrease: Renderable }) {
     return (
       <span css={this.props.styles?.arrowContainer}>
         <button
@@ -213,7 +214,11 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
           tabIndex={-1}
           type="button"
         >
-          <IconArrowOpenUpLine />
+          {customIcons?.increase ? (
+            callRenderProp(customIcons.increase)
+          ) : (
+            <IconArrowOpenUpLine />
+          )}
         </button>
         <button
           aria-hidden
@@ -222,7 +227,11 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
           tabIndex={-1}
           type="button"
         >
-          <IconArrowOpenDownLine />
+          {customIcons?.decrease ? (
+            callRenderProp(customIcons.decrease)
+          ) : (
+            <IconArrowOpenDownLine />
+          )}
         </button>
       </span>
     )
@@ -238,7 +247,8 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
       value,
       width,
       styles,
-      allowStringValue
+      allowStringValue,
+      renderIcons
     } = this.props
 
     const { interaction } = this
@@ -295,7 +305,7 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
               onChange={this.handleChange}
               onKeyDown={this.handleKeyDown}
             />
-            {showArrows ? this.renderArrows() : null}
+            {showArrows ? this.renderArrows(renderIcons) : null}
           </span>
         </span>
       </FormField>

package/src/NumberInput/props.ts

@@ -166,6 +166,14 @@ type NumberInputOwnProps = {
    * sets the input type to string and allows string as value
    */
   allowStringValue?: boolean
+
+  /**
+   * Sets the icons to be rendered for increase and decrease buttons
+   */
+  renderIcons?: {
+    increase: Renderable
+    decrease: Renderable
+  }
 }
 
 type NumberInputState = {
@@ -226,7 +234,11 @@ const propTypes: PropValidators<PropKeys> = {
   onKeyDown: PropTypes.func,
   inputMode: PropTypes.oneOf(['numeric', 'decimal', 'tel']),
   textAlign: PropTypes.oneOf(['start', 'center']),
-  allowStringValue: PropTypes.bool
+  allowStringValue: PropTypes.bool,
+  renderIcons: PropTypes.shape({
+    increase: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+    decrease: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired
+  })
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -250,7 +262,8 @@ const allowedProps: AllowedPropKeys = [
   'onKeyDown',
   'inputMode',
   'textAlign',
-  'allowStringValue'
+  'allowStringValue',
+  'renderIcons'
 ]
 
 export type {