Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

Commit

Permalink
feat(text-field): Truncate floating label width w/ icons
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 307658908
  • Loading branch information
@patrickrodee @copybara-github
patrickrodee authored and copybara-github committed Apr 21, 2020
1 parent d10412c commit c141801
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 6 deletions.
4 changes: 2 additions & 2 deletions packages/mdc-floating-label/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@
}

@mixin shake-keyframes(
$modifier, $positionY, $positionX: 0%, $scale: .75, $query: functions.all()) {
$modifier, $positionY, $positionX: 0%, $scale: variables.$float-scale, $query: functions.all()) {
$feat-animation: functions.create-target($query, animation);

@include feature-targeting-mixins.targets($feat-animation) {
Expand All @@ -132,7 +132,7 @@
}
}

@mixin float-position($positionY, $positionX: 0%, $scale: .75, $query: functions.all()) {
@mixin float-position($positionY, $positionX: 0%, $scale: variables.$float-scale, $query: functions.all()) {
$feat-structure: functions.create-target($query, structure);

.mdc-floating-label--float-above {
Expand Down
1 change: 1 addition & 0 deletions packages/mdc-floating-label/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,3 +26,4 @@
///
$position-y: 106% !default;
$transition-duration: 150ms !default;
$float-scale: .75 !default;
98 changes: 94 additions & 4 deletions packages/mdc-textfield/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
@use "sass:list";
@use "@material/density/functions" as density-functions;
@use "@material/floating-label/mixins" as floating-label-mixins;
@use "@material/floating-label/variables" as floating-label-variables;
@use "@material/line-ripple/mixins" as line-ripple-mixins;
@use "@material/notched-outline/mixins" as notched-outline-mixins;
@use "@material/notched-outline/variables" as notched-outline-variables;
Expand Down Expand Up @@ -142,6 +143,22 @@
}
}

.mdc-text-field--with-trailing-icon {
&.mdc-text-field--filled {
@include _with-trailing-icon($query);
}

&.mdc-text-field--outlined {
@include _outlined-with-trailing-icon($query);
}
}

.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {
&.mdc-text-field--filled {
@include _with-leading-and-trailing-icon($query);
}
}

@include required-label-asterisk_ {
@include feature-targeting-mixins.targets($feat-structure) {
margin-left: 1px;
Expand Down Expand Up @@ -1048,13 +1065,46 @@
@mixin with-leading-icon_($query: feature-targeting-functions.all()) {
$feat-structure: feature-targeting-functions.create-target($query, structure);

@include feature-targeting-mixins.targets($feat-structure) {
$icon-padding: icon-variables.$leading-icon-padding-left + icon-variables.$icon-size + icon-variables.$leading-icon-padding-right;
$icon-padding: icon-variables.$leading-icon-padding-left + icon-variables.$icon-size + icon-variables.$leading-icon-padding-right;

.mdc-floating-label {
.mdc-floating-label {
@include _truncate-floating-label-max-width($icon-padding, $query: $query);
@include feature-targeting-mixins.targets($feat-structure) {
@include rtl-mixins.reflexive-position(left, $icon-padding);
}
}

$truncation: $icon-padding + variables.$padding-horizontal;

.mdc-floating-label--float-above {
@include _truncate-floating-label-floated-max-width($truncation, $query: $query);
}
}

@mixin _with-trailing-icon($query: feature-targeting-functions.all()) {
$truncation: icon-variables.$trailing-icon-padding-left + icon-variables.$icon-size + icon-variables.$trailing-icon-padding-right + variables.$label-offset;

.mdc-floating-label {
@include _truncate-floating-label-max-width($truncation, $query: $query);
}

.mdc-floating-label--float-above {
@include _truncate-floating-label-floated-max-width($truncation, $query: $query);
}
}

@mixin _with-leading-and-trailing-icon($query: feature-targeting-functions.all()) {
$leading-icon: icon-variables.$leading-icon-padding-left + icon-variables.$icon-size + icon-variables.$leading-icon-padding-right;
$trailing-icon: icon-variables.$trailing-icon-padding-left + icon-variables.$icon-size + icon-variables.$trailing-icon-padding-right;
$truncation: $leading-icon + $trailing-icon;

.mdc-floating-label {
@include _truncate-floating-label-max-width($truncation, $query: $query);
}

.mdc-floating-label--float-above {
@include _truncate-floating-label-floated-max-width($truncation, $query: $query);
}
}

@mixin outlined-with-leading-icon_($query: feature-targeting-functions.all()) {
Expand All @@ -1072,7 +1122,7 @@

// Notch width
$notch-truncation: $icon-padding + notched-outline-variables.$leading-width;
@include notched-outline-mixins.notch-max-width(calc(100% - #{$notch-truncation}), $query: $query);
@include _truncate-notched-outline-max-width($notch-truncation, $query: $query);

// Floating label position and animation
@include _outlined-with-leading-icon-floating-label-position-animation(
Expand All @@ -1082,6 +1132,46 @@
);
}

///
/// Applied to the outlined text field with a trailing icon
///
@mixin _outlined-with-trailing-icon($query: feature-targeting-functions.all()) {
// Resting label position
$icon-padding: icon-variables.$trailing-icon-padding-left + icon-variables.$icon-size + icon-variables.$trailing-icon-padding-right;
// Notch width
$notch-truncation: $icon-padding + notched-outline-variables.$leading-width;

@include _truncate-notched-outline-max-width($notch-truncation, $query: $query);
}

///
/// Truncates the max-width of the notched outline by the given amount
///
/// @param {Number} $truncation - Amount to truncate the notched outline max-width
///
@mixin _truncate-notched-outline-max-width($truncation, $query: feature-targeting-functions.all()) {
@include notched-outline-mixins.notch-max-width(calc(100% - #{$truncation}), $query: $query);
}

///
/// Truncates the max-width of the floating label by the given amount
///
/// @param {Number} $truncation - Amount to truncate the floating label max-width
///
@mixin _truncate-floating-label-max-width($truncation, $query: feature-targeting-functions.all()) {
@include floating-label-mixins.max-width(calc(100% - #{$truncation}), $query: $query);
}

///
/// Truncates the max-width of the floating label by the given amount while scaling by the given scale value
///
/// @param {Number} $truncation - Amount to truncate the floating label max-width
///
@mixin _truncate-floating-label-floated-max-width($truncation, $query: feature-targeting-functions.all()) {
$scale: floating-label-variables.$float-scale;
@include floating-label-mixins.max-width(calc(100% / #{$scale} - #{$truncation} / #{$scale}), $query: $query);
}

// Full Width
@mixin fullwidth_($query: feature-targeting-functions.all()) {
$feat-structure: feature-targeting-functions.create-target($query, structure);
Expand Down

0 comments on commit c141801

Please sign in to comment.