mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
fix(field): move padding to slotted content
PiperOrigin-RevId: 547375880
This commit is contained in:
parent
e39f659662
commit
0ab5fd595d
@ -36,20 +36,6 @@ const styles = css`
|
||||
md-outlined-field {
|
||||
width: 256px;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
background: none;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
color: currentColor;
|
||||
font: inherit;
|
||||
outline: 1px dashed currentColor;
|
||||
padding: 0;
|
||||
resize: none;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
const filled: MaterialStoryInit<StoryKnobs> = {
|
||||
|
@ -74,13 +74,9 @@ $_enter-delay: $_label-duration - $_visible-duration;
|
||||
}
|
||||
|
||||
.content {
|
||||
// Content elements provided to the field (such as <input>) may use
|
||||
// `currentColor` to inherit this property.
|
||||
color: var(--_content-color);
|
||||
display: flex;
|
||||
flex: 1;
|
||||
// Content elements provided to the field (such as <input>) may inherit font
|
||||
font: var(--_content-type);
|
||||
opacity: 0;
|
||||
transition: opacity $_visible-duration
|
||||
map.get($_md-sys-motion, 'easing-emphasized');
|
||||
@ -93,6 +89,17 @@ $_enter-delay: $_label-duration - $_visible-duration;
|
||||
transition-delay: $_enter-delay;
|
||||
}
|
||||
|
||||
.content ::slotted(*) {
|
||||
all: unset;
|
||||
// Use `currentColor` to inherit the various state colors that are set
|
||||
// below.
|
||||
color: currentColor;
|
||||
font: var(--_content-type);
|
||||
padding-top: var(--_top-space);
|
||||
padding-bottom: var(--_bottom-space);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:hover .content {
|
||||
color: var(--_hover-content-color);
|
||||
}
|
||||
|
@ -92,7 +92,15 @@ $_md-sys-motion: tokens.md-sys-motion-values();
|
||||
|
||||
.label.floating {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: var(--_with-label-top-space);
|
||||
}
|
||||
|
||||
.field:not(.with-start) .label-space {
|
||||
margin-inline-start: var(--_leading-space);
|
||||
}
|
||||
|
||||
.field:not(.with-end) .label-space {
|
||||
margin-inline-end: var(--_trailing-space);
|
||||
}
|
||||
|
||||
.active-indicator {
|
||||
@ -125,21 +133,19 @@ $_md-sys-motion: tokens.md-sys-motion-values();
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.field:not(.with-start) .start {
|
||||
.field:not(.with-start) .content ::slotted(*) {
|
||||
padding-inline-start: var(--_leading-space);
|
||||
}
|
||||
|
||||
.field:not(.with-end) .end {
|
||||
.field:not(.with-end) .content ::slotted(*) {
|
||||
padding-inline-end: var(--_trailing-space);
|
||||
}
|
||||
|
||||
.field:not(.no-label) .container {
|
||||
.field:not(.no-label) .content ::slotted(*) {
|
||||
padding-bottom: var(--_with-label-bottom-space);
|
||||
padding-top: var(--_with-label-top-space);
|
||||
}
|
||||
|
||||
.field:not(.no-label) .middle {
|
||||
padding-top: var(--_label-text-populated-line-height);
|
||||
padding-top: calc(
|
||||
var(--_with-label-top-space) + var(--_label-text-populated-line-height)
|
||||
);
|
||||
}
|
||||
|
||||
:hover .active-indicator::before {
|
||||
|
@ -5,6 +5,7 @@
|
||||
|
||||
@mixin styles() {
|
||||
.label {
|
||||
box-sizing: border-box;
|
||||
color: var(--_label-text-color);
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
@ -22,6 +23,7 @@
|
||||
white-space: nowrap;
|
||||
z-index: 1;
|
||||
font: var(--_label-text-type);
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
.label.resting {
|
||||
@ -44,6 +46,17 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Labels need start/end padding when there isn't start/end content so they
|
||||
// don't sit on the edge of the field. We use a wrapper element around the
|
||||
// labels so as not to affect the dimensions used in the label keyframes.
|
||||
.label-space {
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
// Don't let setting text-align on the field change the label's alignment.
|
||||
// It should only impact content text.
|
||||
text-align: initial;
|
||||
}
|
||||
|
||||
:hover .label {
|
||||
color: var(--_hover-label-text-color);
|
||||
}
|
||||
|
@ -226,17 +226,27 @@ $_md-sys-motion: tokens.md-sys-motion-values();
|
||||
var(--_container-shape-start-end),
|
||||
var(--_container-shape-end-end)
|
||||
);
|
||||
$start-space: max(
|
||||
var(--_leading-space),
|
||||
$shape-start + var(--_outline-label-padding)
|
||||
);
|
||||
$end-space: max(var(--_trailing-space), $shape-end);
|
||||
|
||||
.outline-start,
|
||||
.field:not(.with-start) .start {
|
||||
padding-inline-start: max(
|
||||
var(--_leading-space),
|
||||
$shape-start + var(--_outline-label-padding)
|
||||
);
|
||||
.field:not(.with-start) .content ::slotted(*) {
|
||||
padding-inline-start: $start-space;
|
||||
}
|
||||
|
||||
.field:not(.with-end) .end {
|
||||
padding-inline-end: max(var(--_trailing-space), $shape-end);
|
||||
.field:not(.with-start) .label-space {
|
||||
margin-inline-start: $start-space;
|
||||
}
|
||||
|
||||
.field:not(.with-end) .content ::slotted(*) {
|
||||
padding-inline-end: $end-space;
|
||||
}
|
||||
|
||||
.field:not(.with-end) .label-space {
|
||||
margin-inline-end: $end-space;
|
||||
}
|
||||
|
||||
.outline-start::before,
|
||||
|
@ -46,8 +46,6 @@
|
||||
flex: 1;
|
||||
min-width: min-content;
|
||||
overflow: hidden;
|
||||
padding-top: var(--_top-space);
|
||||
padding-bottom: var(--_bottom-space);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
@ -112,16 +112,16 @@ export class Field extends LitElement implements SurfacePositionTarget {
|
||||
return html`
|
||||
<div class="field ${classMap(classes)}">
|
||||
<div class="container-overflow">
|
||||
${outline}
|
||||
${this.renderBackground?.()}
|
||||
${this.renderIndicator?.()}
|
||||
<div class="container">
|
||||
<div class="start">
|
||||
<slot name="start"></slot>
|
||||
</div>
|
||||
<div class="middle">
|
||||
${restingLabel}
|
||||
${outline ? nothing : floatingLabel}
|
||||
<div class="label-space">
|
||||
${restingLabel}
|
||||
${outline ? nothing : floatingLabel}
|
||||
</div>
|
||||
<div class="content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
@ -130,6 +130,8 @@ export class Field extends LitElement implements SurfacePositionTarget {
|
||||
<slot name="end"></slot>
|
||||
</div>
|
||||
</div>
|
||||
${outline}
|
||||
${this.renderIndicator?.()}
|
||||
</div>
|
||||
${this.renderSupportingText()}
|
||||
</div>
|
||||
|
@ -46,10 +46,6 @@
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:host([disabled]) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
@ -244,9 +244,7 @@ export abstract class Select extends LitElement {
|
||||
private renderLabel() {
|
||||
// need to render so that line-height can apply and give it a
|
||||
// non-zero height
|
||||
return html`<div
|
||||
id="label"
|
||||
class="label">${this.displayText || html` `}</div>`;
|
||||
return html`<div id="label">${this.displayText || html` `}</div>`;
|
||||
}
|
||||
|
||||
private renderMenu() {
|
||||
|
@ -4,17 +4,20 @@
|
||||
//
|
||||
|
||||
@mixin styles() {
|
||||
input {
|
||||
appearance: none;
|
||||
background: none;
|
||||
border: none;
|
||||
caret-color: var(--_caret-color);
|
||||
color: currentColor;
|
||||
font: inherit;
|
||||
outline: none;
|
||||
.content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
input,
|
||||
.prefix,
|
||||
.suffix {
|
||||
all: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
caret-color: var(--_caret-color);
|
||||
text-align: inherit;
|
||||
width: 100%;
|
||||
|
||||
&::placeholder {
|
||||
color: currentColor;
|
||||
@ -51,6 +54,11 @@
|
||||
color: var(--_input-text-placeholder-color);
|
||||
}
|
||||
|
||||
.prefix,
|
||||
.suffix {
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
.prefix {
|
||||
padding-inline-end: var(--_input-text-prefix-trailing-space);
|
||||
}
|
||||
|
@ -517,7 +517,7 @@ export abstract class TextField extends LitElement {
|
||||
max=${this.maxLength}
|
||||
>
|
||||
${this.renderLeadingIcon()}
|
||||
${prefix}${input}${suffix}
|
||||
<div class="content">${prefix}${input}${suffix}</div>
|
||||
${this.renderTrailingIcon()}
|
||||
</${this.fieldTag}>`;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user