From 66694bdaec17b81aa68f6a1294cc7fbb12569a8b Mon Sep 17 00:00:00 2001 From: Dante Catalfamo Date: Fri, 17 Sep 2021 13:01:29 -0400 Subject: [PATCH 1/4] TextField: Add maxHeight prop --- src/components/TextField/TextField.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx index 11cef6ca783..6900dfc57e3 100644 --- a/src/components/TextField/TextField.tsx +++ b/src/components/TextField/TextField.tsx @@ -99,6 +99,8 @@ interface NonMutuallyExclusiveProps { /** Maximum character length for an input */ maxLength?: number; /** Mimics the behavior of the native HTML attribute, limiting the minimum value */ + maxHeight?: number | string; + /** Maximum height of the element */ min?: number | string; /** Minimum character length for an input */ minLength?: number; @@ -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); From 88b2d0da22b58a412aef54e249c6d55bcdbf79a4 Mon Sep 17 00:00:00 2001 From: Dante Catalfamo Date: Fri, 17 Sep 2021 14:15:00 -0400 Subject: [PATCH 2/4] TextField: Update changelog to include `maxHeight` --- UNRELEASED.md | 1 + 1 file changed, 1 insertion(+) 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 From af7cb2bf913b259471775df86e60d05f7cfcbe25 Mon Sep 17 00:00:00 2001 From: Dante Catalfamo <43040593+dantecatalfamo@users.noreply.github.com> Date: Mon, 20 Sep 2021 12:10:34 -0400 Subject: [PATCH 3/4] Update src/components/TextField/TextField.tsx Co-authored-by: Chloe Rice --- src/components/TextField/TextField.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx index 6900dfc57e3..17d2a349a38 100644 --- a/src/components/TextField/TextField.tsx +++ b/src/components/TextField/TextField.tsx @@ -98,9 +98,9 @@ interface NonMutuallyExclusiveProps { max?: number | string; /** Maximum character length for an input */ maxLength?: number; - /** Mimics the behavior of the native HTML attribute, limiting the minimum value */ - maxHeight?: number | string; - /** Maximum height of the element */ + /** 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 */ minLength?: number; From 66cb42b8c994f101d5a70f5ea5c9fe4d83debafe Mon Sep 17 00:00:00 2001 From: Dante Catalfamo Date: Mon, 20 Sep 2021 14:12:00 -0400 Subject: [PATCH 4/4] Remove period from docs --- src/components/TextField/TextField.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx index 17d2a349a38..68633b1d619 100644 --- a/src/components/TextField/TextField.tsx +++ b/src/components/TextField/TextField.tsx @@ -98,9 +98,9 @@ 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 */ + /** 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 */ minLength?: number;