Skip to content

Commit

Permalink
feat(textfield): move resize handle for textareas to bottom corner
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: textareas must now add a `mdc-text-field__resizer` span around the textarea (and internal counter if present) if they are resizable

PiperOrigin-RevId: 310979350
  • Loading branch information
@asyncLiz
asyncLiz authored and Copybara-Service committed May 11, 2020
1 parent 610c68d commit ed52af7
Show file tree
Hide file tree
Showing 2 changed files with 134 additions and 9 deletions.
24 changes: 18 additions & 6 deletions packages/mdc-textfield/README.md
View file
Expand Up @@ -112,7 +112,9 @@ included as part of the DOM structure of a full width text field.**

```html
<label class="mdc-text-field mdc-text-field--outlined mdc-text-field--textarea mdc-text-field--no-label">
<textarea class="mdc-text-field__input" rows="8" cols="40" aria-label="Label"></textarea>
<span class="mdc-text-field__resizer">
<textarea class="mdc-text-field__input" rows="8" cols="40" aria-label="Label"></textarea>
</span>
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading"></span>
<span class="mdc-notched-outline__trailing"></span>
Expand All @@ -122,6 +124,8 @@ included as part of the DOM structure of a full width text field.**

**Note: Only the `mdc-text-field--outlined` variant of textarea is currently supported.**

**Note: The `mdc-text-field__resizer` element may be omitted for a non-resizable textarea.**

### Text field without label

A text field doesn’t require a label if a separate but clear label indicator is already displayed adjacent to the text field.
Expand Down Expand Up @@ -153,7 +157,9 @@ Add class name `mdc-text-field--no-label` and remove the label element from the

```html
<label class="mdc-text-field mdc-text-field--outlined mdc-text-field--textarea mdc-text-field--no-label">
<textarea class="mdc-text-field__input" rows="8" cols="40" aria-label="Label"></textarea>
<span class="mdc-text-field__resizer">
<textarea class="mdc-text-field__input" rows="8" cols="40" aria-label="Label"></textarea>
</span>
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading"></span>
<span class="mdc-notched-outline__trailing"></span>
Expand Down Expand Up @@ -221,8 +227,10 @@ to any helper text.

```html
<label class="mdc-text-field mdc-text-field--textarea">
<textarea class="mdc-text-field__input" aria-labelledby="my-label-id" rows="8"
cols="40" maxlength="140"></textarea>
<span class="mdc-text-field__resizer">
<textarea class="mdc-text-field__input" aria-labelledby="my-label-id" rows="8"
cols="40" maxlength="140"></textarea>
</span>
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading"></span>
<span class="mdc-notched-outline__notch">
Expand All @@ -241,8 +249,10 @@ inserting the character counter below the textarea and adding the

```html
<label class="mdc-text-field mdc-text-field--outlined mdc-text-field--textarea mdc-text-field--with-internal-counter">
<textarea class="mdc-text-field__input" aria-labelledby="my-label-id" rows="8" cols="40" maxlength="140"></textarea>
<span class="mdc-text-field-character-counter">0 / 140</span>
<span class="mdc-text-field__resizer">
<textarea class="mdc-text-field__input" aria-labelledby="my-label-id" rows="8" cols="40" maxlength="140"></textarea>
<span class="mdc-text-field-character-counter">0 / 140</span>
</span>
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading"></span>
<span class="mdc-notched-outline__notch">
Expand Down Expand Up @@ -435,6 +445,8 @@ Mixin | Description
Mixin | Description
--- | ---
`textarea-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to text area variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
`outlined-textarea-density($density-scale)` | Sets density scale for outlined textarea. Supported density scale values `-4`, `-3`, `-2`, `-1`, `0`.
`textarea-min-rows($rows)` | Sets the minimum number of rows for a textarea a textarea may be resized to.

## `MDCTextField` properties and methods

Expand Down
119 changes: 116 additions & 3 deletions packages/mdc-textfield/_mixins.scss
View file
Expand Up @@ -151,6 +151,21 @@
}
}

// Resizer element does not need to be under mdc-text-field--textarea, that
// just adds specificity
.mdc-text-field__resizer {
@include _textarea-resizer($query);

.mdc-text-field--outlined & {
@include _textarea-outlined-resizer($query);

.mdc-text-field__input,
.mdc-text-field-character-counter {
@include _textarea-outlined-resizer-children($query);
}
}
}

.mdc-text-field--fullwidth {
@include fullwidth_($query);
}
Expand Down Expand Up @@ -332,6 +347,12 @@
///
@mixin outlined-textarea-density($density-scale, $query: feature-targeting-functions.all()) {
$feat-structure: feature-targeting-functions.create-target($query, structure);
$textfield-height: density-functions.prop-value(
$density-config: variables.$density-config,
$density-scale: $density-scale,
$property-name: height,
);

$margin-top: density-functions.prop-value(
$density-config: variables.$textarea-outlined-density-config,
$density-scale: $density-scale / 2,
Expand All @@ -347,6 +368,12 @@
// The distance between the textarea and internal counter should not be
// affected
&.mdc-text-field--outlined {
.mdc-text-field__resizer {
@include feature-targeting-mixins.targets($feat-structure) {
min-height: $textfield-height;
}
}

.mdc-text-field__input {
@include feature-targeting-mixins.targets($feat-structure) {
margin-top: $margin-top;
Expand All @@ -363,6 +390,24 @@
}
}

///
/// Sets the minimum number of rows for a textarea a textarea may be resized to.
///
/// For IE11 this mixin can be used instead of the rows attribute.
///
/// @param {Number} $rows - The minimum number of rows for a textarea.
/// @param {Number} $line-height - The line-height of the textarea.
///
@mixin textarea-min-rows($rows, $line-height: variables.$textarea-line-height, $query: feature-targeting-functions.all()) {
$feat-structure: feature-targeting-functions.create-target($query, structure);

.mdc-text-field__input {
@include feature-targeting-mixins.targets($feat-structure) {
min-height: $rows * $line-height;
}
}
}

///
/// Sets height of default text field variant.
///
Expand Down Expand Up @@ -1253,7 +1298,7 @@
}
}

&.mdc-text-field--textarea .mdc-text-field__input {
&.mdc-text-field--textarea .mdc-text-field__resizer {
@include feature-targeting-mixins.targets($feat-structure) {
resize: vertical;
}
Expand All @@ -1280,6 +1325,74 @@
}
}

@mixin _textarea-resizer($query: feature-targeting-functions.all()) {
$feat-structure: feature-targeting-functions.create-target($query, structure);

@include feature-targeting-mixins.targets($feat-structure) {
align-self: stretch;
display: inline-flex;
flex-direction: column;
flex-grow: 1;
max-height: 100%;
max-width: 100%;
min-height: variables.$height;
// stylelint-disable declaration-block-no-duplicate-properties
// "stretch" is the preferred rule here. It will allow the textarea to grow
// to the min/max width of the container, but if an explicit width is set,
// it cannot be resized horizontally.
// Stretch is still a working draft. Chrome and Firefox have it implemented
// with "available" prefixes. fit-content is another good target for
// Safari since it works in almost all use cases except when an explicit
// width is set (the user can make the textarea smaller than the container).
// None of this matters for IE11, which doesn't support resize.
min-width: fit-content;
/* @alternate */
min-width: -moz-available;
/* @alternate */
min-width: -webkit-fit-available;
// stylelint-enable declaration-block-no-duplicate-properties
overflow: hidden;
resize: both;
}
}

@mixin _textarea-outlined-resizer($query: feature-targeting-functions.all()) {
$feat-structure: feature-targeting-functions.create-target($query, structure);
// Shift the resizer element left/up by a margin amount to make space for the
// resize handle. For outlined elements, the resize handle directly touches
// the outline and is hard to see.
// Using a margin affects the width and positioning of the overall component
// and underlying textarea, which is why a transform is used instead.
$x: -1 * variables.$textarea-input-handle-margin;
$y: -1 * variables.$textarea-input-handle-margin;

@include feature-targeting-mixins.targets($feat-structure) {
transform: translateX($x) translateY($y);

@include rtl-mixins.rtl {
// Flip the horizontal shifting direction for RTL
transform: translateX(-1 * $x) translateY($y);
}
}
}

@mixin _textarea-outlined-resizer-children($query: feature-targeting-functions.all()) {
$feat-structure: feature-targeting-functions.create-target($query, structure);
// See above. After shifting the resize wrapper element, all of its children
// should be shifted in the opposite direction (right and down) to compensate.
$x: variables.$textarea-input-handle-margin;
$y: variables.$textarea-input-handle-margin;

@include feature-targeting-mixins.targets($feat-structure) {
transform: translateX($x) translateY($y);

@include rtl-mixins.rtl {
// Flip the horizontal shifting direction for RTL
transform: translateX(-1 * $x) translateY($y);
}
}
}

@mixin _textarea-floating-label($query: feature-targeting-functions.all()) {
$feat-structure: feature-targeting-functions.create-target($query, structure);

Expand Down Expand Up @@ -1309,8 +1422,7 @@
overflow-x: hidden; // https://bugzilla.mozilla.org/show_bug.cgi?id=33654
overflow-y: auto;
box-sizing: border-box;
// left/right margins are used to add space for the resize handle
@include rtl-mixins.reflexive-box(margin, right, variables.$textarea-input-handle-margin);
resize: none;
// Textarea has horizontal padding instead of the container. This allows the
// resize handle to extend to the edge of the container.
padding: 0 variables.$padding-horizontal;
Expand All @@ -1326,6 +1438,7 @@

@include typography-mixins.baseline-bottom(variables.$textarea-internal-counter-baseline-bottom, $query: $query);
@include feature-targeting-mixins.targets($feat-structure) {
align-self: flex-end;
// Needed since padding is on the textarea and not the container
padding: 0 variables.$padding-horizontal;

Expand Down

0 comments on commit ed52af7

Please sign in to comment.