diff --git a/UNRELEASED.md b/UNRELEASED.md index 6e0a5919ce8..907f03bf09d 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -22,6 +22,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Updated `IndexTable` component to hide checkboxes when `selectable` prop is `false` ([#4376](https://github.com/Shopify/polaris-react/pull/4376)) - [Accessibility] - Removes skeleton shimmer animation on devices that have Reduced motion setting enabled [#4460](https://github.com/Shopify/polaris-react/pull/4460) - Added optional `compactTitle` prop to `Page` which removes margin between `title` and `subtitle` ([#4463](https://github.com/Shopify/polaris-react/pull/4463)) +- Added `maxHeight` prop to `TextField` component to limit the height of multi-line inputs. ([#4476](https://github.com/Shopify/polaris-react/pull/4476)) ### Bug fixes diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx index 11cef6ca783..68633b1d619 100644 --- a/src/components/TextField/TextField.tsx +++ b/src/components/TextField/TextField.tsx @@ -98,6 +98,8 @@ interface NonMutuallyExclusiveProps { max?: number | string; /** Maximum character length for an input */ maxLength?: number; + /** Maximum height of the input element. Only applies when `multiline` is `true` */ + maxHeight?: number | string; /** Mimics the behavior of the native HTML attribute, limiting the minimum value */ min?: number | string; /** Minimum character length for an input */ @@ -169,6 +171,7 @@ export function TextField({ autoComplete, max, maxLength, + maxHeight, min, minLength, pattern, @@ -354,7 +357,7 @@ export function TextField({ /> ) : null; - const style = multiline && height ? {height} : null; + const style = multiline && height ? {height, maxHeight} : null; const handleExpandingResize = useCallback((height: number) => { setHeight(height);