feat: add belowMin and aboveMax error keys to NumberField

.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

@@ -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-')();
@@ -278,7 +280,36 @@ class NumberField extends Component<TNumberFieldProps, TNumberFieldState> {
             id={sequentialErrorsId}
             errors={this.props.errors}
             isVisible={hasError}
-            renderError={this.props.renderError}
+            renderError={(key: string, error?: boolean) => {
+              const element = this.props.renderError?.(key, error);
+              if (element) {
+                return element;
+              } else {
+                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;
+              }
+            }}
           />
           <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"