mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
feat(textarea): component can be used outside of ion-item (#26674)
This commit is contained in:
Sean Perkins
@ -8,6 +8,10 @@
|
||||
* @prop --background: Background of the textarea
|
||||
*
|
||||
* @prop --border-radius: Border radius of the textarea
|
||||
* @prop --border-color: Color of the border below the textarea when using helper text, error text, or counter
|
||||
* @prop --border-radius: Radius of the textarea border
|
||||
* @prop --border-style: Style of the border below the textarea when using helper text, error text, or counter
|
||||
* @prop --border-width: Width of the border below the textarea when using helper text, error text, or counter
|
||||
*
|
||||
* @prop --color: Color of the text
|
||||
*
|
||||
@ -16,6 +20,10 @@
|
||||
* @prop --placeholder-font-weight: Weight of the placeholder text
|
||||
* @prop --placeholder-opacity: Opacity of the placeholder text
|
||||
*
|
||||
* @prop --highlight-color-focused: The color of the highlight on the textarea when focused
|
||||
* @prop --highlight-color-valid: The color of the highlight on the textarea when valid
|
||||
* @prop --highlight-color-invalid: The color of the highlight on the textarea when invalid
|
||||
*
|
||||
* @prop --padding-top: Top padding of the textarea
|
||||
* @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the textarea
|
||||
* @prop --padding-bottom: Bottom padding of the textarea
|
||||
@ -32,15 +40,24 @@
|
||||
--padding-bottom: 0;
|
||||
--padding-start: 0;
|
||||
--border-radius: 0;
|
||||
--border-style: solid;
|
||||
--highlight-color-focused: #{ion-color(primary, base)};
|
||||
--highlight-color-valid: #{ion-color(success, base)};
|
||||
--highlight-color-invalid: #{ion-color(danger, base)};
|
||||
|
||||
/**
|
||||
* This is a private API that is used to switch
|
||||
* out the highlight color based on the state
|
||||
* of the component without having to write
|
||||
* different selectors for different fill variants.
|
||||
*/
|
||||
--highlight-color: var(--highlight-color-focused);
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
flex: 1;
|
||||
|
||||
width: 100%;
|
||||
|
||||
background: var(--background);
|
||||
color: var(--color);
|
||||
|
||||
font-family: $font-family-base;
|
||||
@ -52,14 +69,29 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:host(.ion-color) {
|
||||
background: initial;
|
||||
// TODO: FW-2876 - Remove this selector
|
||||
:host(.legacy-textarea) {
|
||||
flex: 1;
|
||||
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
:host(.ion-color) {
|
||||
// TODO: FW-2876 - Remove this selector
|
||||
:host(.legacy-textarea.ion-color) {
|
||||
color: current-color(base);
|
||||
}
|
||||
|
||||
// TODO: FW-2876 - Remove this selector, move styles to :host
|
||||
:host(:not(.legacy-textarea)) {
|
||||
--padding-bottom: #{$textarea-padding-bottom};
|
||||
}
|
||||
|
||||
:host(.ion-color) {
|
||||
--highlight-color-focused: #{current-color(base)};
|
||||
|
||||
background: initial;
|
||||
}
|
||||
|
||||
// Textarea Within An Item
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -74,43 +106,17 @@
|
||||
// Native Textarea
|
||||
// --------------------------------------------------
|
||||
|
||||
.textarea-wrapper {
|
||||
display: grid;
|
||||
|
||||
min-width: inherit;
|
||||
max-width: inherit;
|
||||
min-height: inherit;
|
||||
max-height: inherit;
|
||||
|
||||
&::after {
|
||||
// This technique is used for an auto-resizing textarea.
|
||||
// The text contents are reflected as a pseudo-element that is visually hidden.
|
||||
// This causes the textarea container to grow as needed to fit the contents.
|
||||
|
||||
white-space: pre-wrap;
|
||||
|
||||
content: attr(data-replicated-value) " ";
|
||||
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.native-textarea,
|
||||
.textarea-wrapper::after {
|
||||
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
|
||||
@include text-inherit();
|
||||
|
||||
grid-area: 1 / 1 / 2 / 2;
|
||||
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.native-textarea {
|
||||
@include border-radius(var(--border-radius));
|
||||
// Browsers may add a default margin to the textarea
|
||||
@include margin(0);
|
||||
@include padding(0, 0, 0, 0);
|
||||
|
||||
display: block;
|
||||
|
||||
position: relative;
|
||||
|
||||
flex: 1;
|
||||
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
@ -124,6 +130,17 @@
|
||||
resize: none;
|
||||
appearance: none;
|
||||
|
||||
/**
|
||||
* This ensures the textarea
|
||||
* remains on top of any decoration
|
||||
* that we render (particularly the
|
||||
* outline border when fill="outline").
|
||||
* If we did not do this then Axe would
|
||||
* be unable to determine the color
|
||||
* contrast of the textarea.
|
||||
*/
|
||||
z-index: 1;
|
||||
|
||||
&::placeholder {
|
||||
@include padding(0);
|
||||
|
||||
@ -137,6 +154,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: FW-2876 - Remove this selector
|
||||
:host(.legacy-textarea) .textarea-legacy-wrapper::after {
|
||||
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
|
||||
@include border-radius(var(--border-radius));
|
||||
}
|
||||
|
||||
.native-textarea,
|
||||
// TODO: FW-2876 - Remove this selector, keep .native-textarea
|
||||
:host(.legacy-textarea) .textarea-legacy-wrapper::after {
|
||||
@include text-inherit();
|
||||
|
||||
grid-area: 1 / 1 / 2 / 2;
|
||||
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.native-textarea[disabled]:not(.cloned-input) {
|
||||
opacity: 0.4;
|
||||
}
|
||||
@ -166,7 +199,12 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:host([auto-grow="true"]) .cloned-input {
|
||||
// TODO: FW-2876 - Remove this selector
|
||||
:host(.legacy-textarea[auto-grow]) .cloned-input {
|
||||
@include margin(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
:host([auto-grow]) .cloned-input {
|
||||
// Workaround for webkit rendering issue with scroll assist.
|
||||
// When cloning the textarea and scrolling into view,
|
||||
// a white box is rendered from the difference in height
|
||||
@ -176,6 +214,10 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:host([auto-grow]) .native-textarea {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Item Floating: Placeholder
|
||||
// ----------------------------------------------------------------
|
||||
// When used with a floating item the placeholder should hide
|
||||
@ -190,6 +232,367 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:host([auto-grow="true"]) .native-textarea {
|
||||
// Textarea Wrapper
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
.textarea-wrapper {
|
||||
@include padding(0px, var(--padding-end), 0px, var(--padding-start));
|
||||
@include border-radius(var(--border-radius));
|
||||
|
||||
display: flex;
|
||||
|
||||
position: relative;
|
||||
|
||||
flex-grow: 1;
|
||||
|
||||
align-items: flex-start;
|
||||
|
||||
height: 100%;
|
||||
|
||||
min-height: inherit;
|
||||
|
||||
transition: background-color 15ms linear;
|
||||
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
// Textarea Native Wrapper
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
.native-wrapper {
|
||||
display: flex;
|
||||
|
||||
flex-grow: 1;
|
||||
|
||||
width: 100%;
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// Textarea Native
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
:host(.has-focus) textarea {
|
||||
caret-color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.native-wrapper textarea {
|
||||
@include padding(var(--padding-top), 0px, var(--padding-bottom), 0px);
|
||||
}
|
||||
|
||||
// Textarea Highlight
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
:host(.ion-touched.ion-invalid) {
|
||||
--highlight-color: var(--highlight-color-invalid);
|
||||
}
|
||||
|
||||
:host(.ion-touched.ion-valid) {
|
||||
--highlight-color: var(--highlight-color-valid);
|
||||
}
|
||||
|
||||
.native-wrapper,
|
||||
// TODO: FW-2876 - Remove this selector, keep .native-wrapper
|
||||
.textarea-legacy-wrapper {
|
||||
display: grid;
|
||||
|
||||
min-width: inherit;
|
||||
max-width: inherit;
|
||||
min-height: inherit;
|
||||
max-height: inherit;
|
||||
|
||||
&::after {
|
||||
// This technique is used for an auto-resizing textarea.
|
||||
// The text contents are reflected as a pseudo-element that is visually hidden.
|
||||
// This causes the textarea container to grow as needed to fit the contents.
|
||||
|
||||
white-space: pre-wrap;
|
||||
|
||||
content: attr(data-replicated-value) " ";
|
||||
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.native-wrapper::after {
|
||||
@include padding(var(--padding-top), 0, var(--padding-bottom), 0);
|
||||
@include margin(0, 0, 0, 0);
|
||||
@include text-inherit();
|
||||
@include border-radius(var(--border-radius));
|
||||
|
||||
grid-area: 1 / 1 / 2 / 2;
|
||||
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
// Textarea Highlight
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
:host(.ion-touched.ion-invalid) {
|
||||
--highlight-color: var(--highlight-color-invalid);
|
||||
}
|
||||
|
||||
:host(.ion-touched.ion-valid) {
|
||||
--highlight-color: var(--highlight-color-valid);
|
||||
}
|
||||
|
||||
// Textarea Bottom Content
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
.textarea-bottom {
|
||||
/**
|
||||
* The bottom content should take on the start and end
|
||||
* padding so it is always aligned with either the label
|
||||
* or the start of the textarea.
|
||||
*/
|
||||
@include padding(5px, var(--padding-end), 0, var(--padding-start));
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: space-between;
|
||||
|
||||
border-top: var(--border-width) var(--border-style) var(--border-color);
|
||||
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
// Textarea Hint Text
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Error text should only be shown when .ion-invalid is
|
||||
* present on the textarea. Otherwise the helper text should
|
||||
* be shown.
|
||||
*/
|
||||
.textarea-bottom .error-text {
|
||||
display: none;
|
||||
|
||||
color: var(--highlight-color-invalid);
|
||||
}
|
||||
|
||||
.textarea-bottom .helper-text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
:host(.ion-invalid) .textarea-bottom .error-text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
:host(.ion-invalid) .textarea-bottom .helper-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Textarea Max Length Counter
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
.textarea-bottom .counter {
|
||||
/**
|
||||
* Counter should always be at
|
||||
* the end of the container even
|
||||
* when no helper/error texts are used.
|
||||
*/
|
||||
@include margin-horizontal(auto, null);
|
||||
|
||||
color: #{$background-color-step-550};
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
padding-inline-start: 16px;
|
||||
}
|
||||
|
||||
// Textarea Label
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
.label-text-wrapper {
|
||||
@include padding(var(--padding-top), 0px, var(--padding-bottom), 0px);
|
||||
|
||||
/**
|
||||
* Label text should not extend
|
||||
* beyond the bounds of the textarea.
|
||||
* However, we do not set the max
|
||||
* width to 100% because then
|
||||
* only the label would show and users
|
||||
* would not be able to see what they are typing.
|
||||
*/
|
||||
max-width: 200px;
|
||||
|
||||
transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/**
|
||||
* This ensures that double tapping this text
|
||||
* clicks the <label> and focuses the textarea
|
||||
* when a screen reader is enabled.
|
||||
*/
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* We need to use two elements instead of
|
||||
* one. The .label-text-wrapper is responsible
|
||||
* for centering the label text vertically regardless
|
||||
* of the textarea height using flexbox.
|
||||
*
|
||||
* The .label-text element is responsible for controlling
|
||||
* overflow when label-placement="fixed".
|
||||
* We want the ellipses to show up when the
|
||||
* fixed label overflows, but text-overflow: ellipsis only
|
||||
* works on block-level elements. A flex item is
|
||||
* considered blockified (https://www.w3.org/TR/css-display-3/#blockify).
|
||||
*/
|
||||
.label-text {
|
||||
text-overflow: ellipsis;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.textarea-wrapper textarea {
|
||||
/**
|
||||
* When the floating label appears on top of the
|
||||
* textarea, we need to fade the textarea out so that the
|
||||
* label does not overlap with the placeholder.
|
||||
*/
|
||||
transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
// Textarea Label Placement - Start
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Label is on the left of the textarea in LTR and
|
||||
* on the right in RTL.
|
||||
*/
|
||||
:host(.textarea-label-placement-start) .textarea-wrapper {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
:host(.textarea-label-placement-start) .label-text-wrapper {
|
||||
/**
|
||||
* The margin between the label and
|
||||
* the textarea should be on the end
|
||||
* when the label sits at the start.
|
||||
*/
|
||||
@include margin(0, 8px, 0, 0);
|
||||
}
|
||||
|
||||
// Textarea Label Placement - End
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Label is on the right of the textarea in LTR and
|
||||
* on the left in RTL.
|
||||
*/
|
||||
:host(.textarea-label-placement-end) .textarea-wrapper {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
/**
|
||||
* The margin between the label and
|
||||
* the textarea should be on the start
|
||||
* when the label sits at the end.
|
||||
*/
|
||||
:host(.textarea-label-placement-end) .label-text-wrapper {
|
||||
@include margin(0, 0, 0, 8px);
|
||||
}
|
||||
|
||||
// Textarea Label Placement - Fixed
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
:host(.textarea-label-placement-fixed) .label-text-wrapper {
|
||||
/**
|
||||
* The margin between the label and
|
||||
* the textarea should be on the end
|
||||
* when the label sits at the start.
|
||||
*/
|
||||
@include margin(0, 8px, 0, 0);
|
||||
}
|
||||
|
||||
/**
|
||||
* Label is on the left of the textarea in LTR and
|
||||
* on the right in RTL. Label also has a fixed width.
|
||||
*/
|
||||
:host(.textarea-label-placement-fixed) .label-text {
|
||||
flex: 0 0 100px;
|
||||
|
||||
width: 100px;
|
||||
min-width: 100px;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
// Textarea Label Placement - Stacked and Floating
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Stacked: Label sits above the textarea and is scaled down.
|
||||
* Floating: Label sits over the textarea when the textarea has no
|
||||
* value and is blurred. Label sits above the textarea and is scaled
|
||||
* down when the textarea is focused or has a value.
|
||||
*
|
||||
*/
|
||||
:host(.textarea-label-placement-stacked) .textarea-wrapper,
|
||||
:host(.textarea-label-placement-floating) .textarea-wrapper {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
/**
|
||||
* Ensures that the label animates
|
||||
* up and to the left in LTR or
|
||||
* up and to the right in RTL.
|
||||
*/
|
||||
:host(.textarea-label-placement-stacked) .label-text-wrapper,
|
||||
:host(.textarea-label-placement-floating) .label-text-wrapper {
|
||||
@include transform-origin(start, top);
|
||||
@include padding(0px);
|
||||
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Ensures the textarea does not
|
||||
* overlap the label.
|
||||
*/
|
||||
:host(.textarea-label-placement-stacked) textarea,
|
||||
:host(.textarea-label-placement-floating) textarea,
|
||||
:host(.textarea-label-placement-stacked[auto-grow]) .native-wrapper::after,
|
||||
:host(.textarea-label-placement-floating[auto-grow]) .native-wrapper::after {
|
||||
@include margin(8px, 0px, 0px, 0px);
|
||||
}
|
||||
|
||||
/**
|
||||
* This makes the label sit over the textarea
|
||||
* when the textarea is blurred and has no value.
|
||||
*/
|
||||
:host(.textarea-label-placement-floating) .label-text-wrapper {
|
||||
@include transform(translateY(100%), scale(1));
|
||||
}
|
||||
|
||||
/**
|
||||
* The textarea should be hidden when the label
|
||||
* is on top of the textarea. This prevents the label
|
||||
* from overlapping any placeholder value.
|
||||
*/
|
||||
:host(.textarea-label-placement-floating) textarea {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
:host(.has-focus.textarea-label-placement-floating) textarea,
|
||||
:host(.has-value.textarea-label-placement-floating) textarea {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* This makes the label sit above the textarea.
|
||||
*/
|
||||
:host(.textarea-label-placement-stacked) .label-text-wrapper,
|
||||
:host(.has-focus.textarea-label-placement-floating) .label-text-wrapper,
|
||||
:host(.has-value.textarea-label-placement-floating) .label-text-wrapper {
|
||||
@include transform(translateY(50%), scale(#{$textarea-floating-label-scale}));
|
||||
|
||||
/**
|
||||
* Label text should not extend
|
||||
* beyond the bounds of the textarea.
|
||||
*/
|
||||
max-width: calc(100% / #{$textarea-floating-label-scale});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user