diff --git a/UNRELEASED.md b/UNRELEASED.md index e22a6ef38fa..c7a9eb9d887 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -13,6 +13,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f ### Bug fixes - Fixed animation for Modal when being rendered asynchronously ([#2076](https://github.com/Shopify/polaris-react/pull/2076)) +- Updated `TextField` `min` and `max` type from `number` to `number | string` to allow min/max dates ([#1991](https://github.com/Shopify/polaris-react/pull/1991)) ### Documentation diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx index b83142c8e58..a300dddd06b 100644 --- a/src/components/TextField/TextField.tsx +++ b/src/components/TextField/TextField.tsx @@ -87,12 +87,12 @@ export interface BaseProps { step?: number; /** Enable automatic completion by the browser */ autoComplete?: boolean | string; - /** Mimics the behavior of the native HTML attribute, limiting how high the spinner can increment the value */ - max?: number; + /** Mimics the behavior of the native HTML attribute, limiting the maximum value */ + max?: number | string; /** Maximum character length for an input */ maxLength?: number; - /** Mimics the behavior of the native HTML attribute, limiting how low the spinner can decrement the value */ - min?: number; + /** Mimics the behavior of the native HTML attribute, limiting the minimum value */ + min?: number | string; /** Minimum character length for an input */ minLength?: number; /** A regular expression to check the value against */ @@ -432,7 +432,10 @@ class TextField extends React.PureComponent { // step / value has. const decimalPlaces = Math.max(dpl(numericValue), dpl(step)); - const newValue = Math.min(max, Math.max(numericValue + steps * step, min)); + const newValue = Math.min( + Number(max), + Math.max(numericValue + steps * step, Number(min)), + ); onChange(String(newValue.toFixed(decimalPlaces)), this.state.id); };