feat(NumberField): add belowMin and aboveMax error keys to `Numbe…

…rField` (#2853)

* feat: add `belowMin` and `aboveMax` error keys to `NumberField`

* fix: improve code readability

* refactor: widen or operator

---------

Co-authored-by: Douglas Egiemeh <[email protected]>

.changeset/thirty-bikes-kneel.md

@@ -0,0 +1,6 @@
+---
+'@commercetools-uikit/number-field': minor
+'@commercetools-uikit/i18n': minor
+---
+
+Add `belowMin` and `aboveMax` error keys to `NumberField`

packages/components/fields/number-field/README.md

@@ -116,6 +116,8 @@ When the `key` is known, and when the value is truthy, and when `renderError` re
 Known error keys are:
 
 - `missing`: tells the user that this field is required
+- `belowMin`: tells the user that the value is below the minimum
+- `aboveMax`: tells the user that the value is above the maximum
 
 ## Static methods
 

packages/components/fields/number-field/docs/additional-info.md

@@ -17,6 +17,8 @@ When the `key` is known, and when the value is truthy, and when `renderError` re
 Known error keys are:
 
 - `missing`: tells the user that this field is required
+- `belowMin`: tells the user that the value is below the minimum
+- `aboveMax`: tells the user that the value is above the maximum
 
 ## Static methods
 

packages/components/fields/number-field/src/messages.ts

@@ -0,0 +1,14 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  belowMinError: {
+    id: 'UIKit.NumberField.belowMinError',
+    description: 'An error message to show when the value is below the minimum',
+    defaultMessage: 'Value must be greater than or equal to {min}.',
+  },
+  aboveMaxError: {
+    id: 'UIKit.NumberField.aboveMaxError',
+    description: 'An error message to show when the value is above the maximum',
+    defaultMessage: 'Value must be less than or equal to {max}.',
+  },
+});

packages/components/fields/number-field/src/number-field.spec.js

@@ -14,7 +14,7 @@ class Story extends Component {
   static displayName = 'Story';
   static propTypes = {
     onChange: PropTypes.func.isRequired,
-    value: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     id: PropTypes.string,
   };
   static defaultProps = {
@@ -212,6 +212,34 @@ describe('when field is touched and has errors', () => {
       expect(getByText(/field is required/i)).toBeInTheDocument();
     });
   });
+  describe('when value is below min', () => {
+    it('should render a default error', () => {
+      const min = 2;
+      const { getByText } = renderNumberField({
+        value: 1,
+        min,
+        touched: true,
+        errors: { belowMin: true },
+      });
+      expect(
+        getByText(`Value must be greater than or equal to ${min}.`)
+      ).toBeInTheDocument();
+    });
+  });
+  describe('when value is above max', () => {
+    it('should render a default error', () => {
+      const max = 2;
+      const { getByText } = renderNumberField({
+        value: 3,
+        max,
+        touched: true,
+        errors: { aboveMax: true },
+      });
+      expect(
+        getByText(`Value must be less than or equal to ${max}.`)
+      ).toBeInTheDocument();
+    });
+  });
   describe('when there is a custom error', () => {
     it('should render the custom error message', () => {
       const { getByText } = renderNumberField({

packages/components/fields/number-field/src/number-field.story.js

@@ -53,7 +53,12 @@ storiesOf('Components|Fields', module)
               warnings={object('warnings', {
                 customWarning: true,
               })}
-              errors={object('errors', { missing: true, customError: true })}
+              errors={object('errors', {
+                missing: true,
+                belowMin: true,
+                aboveMax: true,
+                customError: true,
+              })}
               renderError={(key) => {
                 switch (key) {
                   case 'customError':

packages/components/fields/number-field/src/number-field.tsx

@@ -20,6 +20,8 @@ import FieldLabel from '@commercetools-uikit/field-label';
 import FieldErrors from '@commercetools-uikit/field-errors';
 import FieldWarnings from '@commercetools-uikit/field-warnings';
 import NumberInput from '@commercetools-uikit/number-input';
+import messages from './messages';
+import { FormattedMessage } from 'react-intl';
 
 const sequentialId = createSequentialId('number-field-');
 const sequentialErrorsId = createSequentialId('number-field-error-')();
@@ -220,6 +222,33 @@ class NumberField extends Component<TNumberFieldProps, TNumberFieldState> {
     return errors as TCustomFormErrors<FormValues>;
   }
 
+  renderError(key?: string): ReactNode | null {
+    switch (key) {
+      case 'belowMin':
+        if (typeof this.props.min === 'number') {
+          return (
+            <FormattedMessage
+              {...messages.belowMinError}
+              values={{ min: this.props.min }}
+            />
+          );
+        }
+        break;
+      case 'aboveMax':
+        if (typeof this.props.max === 'number') {
+          return (
+            <FormattedMessage
+              {...messages.aboveMaxError}
+              values={{ max: this.props.max }}
+            />
+          );
+        }
+        break;
+    }
+
+    return null;
+  }
+
   render() {
     if (!this.props.isReadOnly) {
       warning(
@@ -278,7 +307,10 @@ class NumberField extends Component<TNumberFieldProps, TNumberFieldState> {
             id={sequentialErrorsId}
             errors={this.props.errors}
             isVisible={hasError}
-            renderError={this.props.renderError}
+            renderError={(key: string, error?: boolean) =>
+              // Custom errors take precedence over the default errors
+              this.props.renderError?.(key, error) || this.renderError(key)
+            }
           />
           <FieldWarnings
             id={sequentialWarningsId}

packages/i18n/data/core.json

@@ -147,6 +147,14 @@
     "developer_comment": "The label for \"expand\" action",
     "string": "Expand"
   },
+  "UIKit.NumberField.aboveMaxError": {
+    "developer_comment": "An error message to show when the value is above the maximum",
+    "string": "Value must be less than or equal to {max}."
+  },
+  "UIKit.NumberField.belowMinError": {
+    "developer_comment": "An error message to show when the value is below the minimum",
+    "string": "Value must be greater than or equal to {min}."
+  },
   "UIKit.Pagination.PageNavigator.nextPageLabel": {
     "developer_comment": "Label for next page button",
     "string": "Next page"