diff --git a/UNRELEASED.md b/UNRELEASED.md index 64753e3a604..20aeaa04601 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -12,6 +12,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f ### Bug fixes +- Move character counter to bottom of multiline text input ([#992](https://github.com/Shopify/polaris-react/pull/992)) + ### Documentation - Added all props example of `ResourceList` in the [style guide](https://polaris.shopify.com) ([#978](https://github.com/Shopify/polaris-react/pull/978)) diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss index 55b97ca8834..878f79c5718 100644 --- a/src/components/TextField/TextField.scss +++ b/src/components/TextField/TextField.scss @@ -18,6 +18,7 @@ $stacking-order: ( .multiline { padding: 0; + flex-wrap: wrap; > .Input { overflow: auto; @@ -174,12 +175,14 @@ $stacking-order: ( @include text-emphasis-subdued; z-index: z-index(contents, $stacking-order); margin-right: $backdrop-horizontal-spacing; - line-height: control-height(); pointer-events: none; + text-align: right; } .AlignFieldBottom { align-self: flex-end; + width: 100%; + padding-bottom: spacing(tight); } .Spinner {