Skip to content

refactor(input): remove legacy property and styling#29019

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
brandyscarney merged 6 commits into from
Feb 13, 2024
Merged

refactor(input): remove legacy property and styling #29019

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e2b728b
refactor(input): remove legacy property and styling
brandyscarney Feb 12, 2024
fb37f4b
docs(BREAKING): add removal of legacy property to breaking changes
brandyscarney Feb 12, 2024
e2df101
Merge branch 'FW-2764' into FW-2764-legacy-removal
brandyscarney Feb 12, 2024
91f56cb
Merge branch 'FW-2764' into FW-2764-legacy-removal
brandyscarney Feb 12, 2024
55de1b5
refactor(input): remove unused Sass vars
brandyscarney Feb 12, 2024
d1a7adc
refactor(input): remove item label styles
brandyscarney Feb 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions BREAKING.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -154,6 +154,7 @@ For more information on the dynamic font, refer to the [Dynamic Font Scaling doc

- `size` has been removed from the `ion-input` component. Developers should use CSS to specify the visible width of the input.
- `accept` has been removed from the `ion-input` component. This was previously used in conjunction with the `type="file"`. However, the `file` value for `type` is not a valid value in Ionic Framework.
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-input` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy input syntax, refer to the [Input documentation](https://ionicframework.com/docs/api/input#migrating-from-legacy-input-syntax).

<h4 id="version-8x-nav">Nav</h4>

Expand Down
1 change: 0 additions & 1 deletion core/api.txt
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -566,7 +566,6 @@ ion-input,prop,helperText,string | undefined,undefined,false,false
ion-input,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
ion-input,prop,label,string | undefined,undefined,false,false
ion-input,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start",'start',false,false
ion-input,prop,legacy,boolean | undefined,undefined,false,false
ion-input,prop,max,number | string | undefined,undefined,false,false
ion-input,prop,maxlength,number | undefined,undefined,false,false
ion-input,prop,min,number | string | undefined,undefined,false,false
Expand Down
8 changes: 0 additions & 8 deletions core/src/components.d.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1220,10 +1220,6 @@ export namespace Components {
* Where to place the label relative to the input. `"start"`: The label will appear to the left of the input in LTR and to the right in RTL. `"end"`: The label will appear to the right of the input in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `"stacked"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
*/
"labelPlacement": 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
/**
* Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
*/
"legacy"?: boolean;
/**
* The maximum value, which must not be less than its minimum (min attribute) value.
*/
Expand DownExpand Up@@ -5951,10 +5947,6 @@ declare namespace LocalJSX {
* Where to place the label relative to the input. `"start"`: The label will appear to the left of the input in LTR and to the right in RTL. `"end"`: The label will appear to the right of the input in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `"stacked"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
*/
"labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
/**
* Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
*/
"legacy"?: boolean;
/**
* The maximum value, which must not be less than its minimum (min attribute) value.
*/
Expand Down
16 changes: 0 additions & 16 deletions core/src/components/input/input.ios.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,21 +8,6 @@
font-size: $input-ios-font-size;
}

// TODO FW-2764 Remove this
:host(.legacy-input) {
--padding-top: #{$input-ios-padding-top};
--padding-end: #{$input-ios-padding-end};
--padding-bottom: #{$input-ios-padding-bottom};
--padding-start: #{$input-ios-padding-start};
}

:host-context(.item-label-stacked),
:host-context(.item-label-floating) {
--padding-top: 8px;
--padding-bottom: 8px;
--padding-start: 0px;
}

.input-clear-icon ion-icon {
width: 18px;
height: 18px;
Expand All@@ -33,7 +18,6 @@
// The input, label, helper text, char counter and placeholder
// should use the same opacity and match the other form controls

:host(.legacy-input) .native-input[disabled],
:host(.input-disabled) {
opacity: #{$input-ios-disabled-opacity};
}
Expand Down
12 changes: 0 additions & 12 deletions core/src/components/input/input.ios.vars.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,17 +7,5 @@
/// @prop - Font size of the input
$input-ios-font-size: inherit !default;

/// @prop - Margin top of the input
$input-ios-padding-top: $item-ios-padding-top !default;

/// @prop - Margin end of the input
$input-ios-padding-end: ($item-ios-padding-end * 0.5) !default;

/// @prop - Margin bottom of the input
$input-ios-padding-bottom: $item-ios-padding-bottom !default;

/// @prop - Margin start of the input
$input-ios-padding-start: 0 !default;

@brandyscarneybrandyscarneyFeb 12, 2024

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These variables were only used by the legacy input


/// @prop - The opacity of the input text, label, helper text, char counter and placeholder of a disabled input
$input-ios-disabled-opacity: $form-control-ios-disabled-opacity !default;
16 changes: 0 additions & 16 deletions core/src/components/input/input.md.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -14,21 +14,6 @@
font-size: $input-md-font-size;
}

// TODO FW-2764 Remove this
:host(.legacy-input) {
--padding-top: #{$input-md-padding-top};
--padding-end: #{$input-md-padding-end};
--padding-bottom: #{$input-md-padding-bottom};
--padding-start: #{$input-md-padding-start};
}

:host-context(.item-label-stacked),
:host-context(.item-label-floating) {
--padding-top: 8px;
--padding-bottom: 8px;
--padding-start: 0;
}

.input-clear-icon ion-icon {
width: 22px;
height: 22px;
Expand All@@ -39,7 +24,6 @@
// The input, label, helper text, char counter and placeholder
// should use the same opacity and match the other form controls

:host(.legacy-input) .native-input[disabled],
:host(.input-disabled) {
opacity: #{$input-md-disabled-opacity};
}
Expand Down
12 changes: 0 additions & 12 deletions core/src/components/input/input.md.vars.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,18 +7,6 @@
/// @prop - Font size of the input
$input-md-font-size: inherit !default;

/// @prop - Margin top of the input
$input-md-padding-top: 10px !default;

/// @prop - Margin end of the input
$input-md-padding-end: 0 !default;

/// @prop - Margin bottom of the input
$input-md-padding-bottom: 10px !default;

/// @prop - Margin start of the input
$input-md-padding-start: ($item-md-padding-start * 0.5) !default;

Comment on lines -10 to -21

@brandyscarneybrandyscarneyFeb 12, 2024

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These variables were only used by the legacy input

/// @prop - The amount of whitespace to display on either side of the floating label
$input-md-floating-label-padding: 4px !default;

Expand Down
67 changes: 2 additions & 65 deletions core/src/components/input/input.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -57,6 +57,8 @@

width: 100%;

min-height: 44px;

/* stylelint-disable-next-line all */
padding: 0 !important;

Expand All@@ -67,47 +69,18 @@
z-index: $z-index-item-input;
}

// TODO FW-2764 Remove this
:host(.legacy-input) {
display: flex;

flex: 1;
align-items: center;

background: var(--background);
}

// TODO FW-2764 Remove this
:host(.legacy-input) .native-input {
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
@include border-radius(var(--border-radius));
}

:host-context(ion-item:not(.item-label):not(.item-has-modern-input)) {
--padding-start: 0;
}

:host-context(ion-item)[slot="start"],
:host-context(ion-item)[slot="end"] {
width: auto;
}

// TODO FW-2764 Remove this
:host(.legacy-input.ion-color) {
color: current-color(base);
}

:host(.ion-color) {
--highlight-color-focused: #{current-color(base)};
}

// Input Wrapper
// ----------------------------------------------------------------

:host(:not(.legacy-input)) {
min-height: 44px;
}

/**
* Since the label sits on top of the element,
* the component needs to be taller otherwise the
Expand DownExpand Up@@ -206,11 +179,6 @@
// Clear Input Icon
// --------------------------------------------------

// TODO FW-2764 Remove this
:host(.legacy-input) .input-clear-icon {
@include margin(0);
}

.input-clear-icon {
@include margin(auto);
@include padding(0);
Expand DownExpand Up@@ -256,37 +224,6 @@
visibility: visible;
}


// Input Has focus
// --------------------------------------------------

// TODO FW-2764 Remove this
:host(.has-focus.legacy-input) {
pointer-events: none;
}

// TODO FW-2764 Remove this
:host(.has-focus.legacy-input) input,
:host(.has-focus.legacy-input) a,
:host(.has-focus.legacy-input) button {
pointer-events: auto;
}
Comment thread
brandyscarney marked this conversation as resolved.


// Item Floating: Placeholder
// ----------------------------------------------------------------
// When used with a floating item the placeholder should hide

:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value)) {
opacity: 0;
}

:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value).item-has-focus) {
transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);

opacity: 1;
}

// Input Wrapper
// ----------------------------------------------------------------

Expand Down
Loading