From e2b728b02413218612592eb53f39bb9fd872306c Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 12 Feb 2024 15:01:39 -0500 Subject: [PATCH 1/4] refactor(input): remove legacy property and styling --- core/api.txt | 1 - core/src/components.d.ts | 8 - core/src/components/input/input.ios.scss | 9 - core/src/components/input/input.md.scss | 9 - core/src/components/input/input.scss | 48 +---- core/src/components/input/input.tsx | 168 +----------------- .../components/input/test/item/input.spec.ts | 27 --- packages/angular/src/directives/proxies.ts | 4 +- .../standalone/src/directives/input.ts | 1 - packages/vue/src/proxies.ts | 1 - 10 files changed, 8 insertions(+), 268 deletions(-) delete mode 100644 core/src/components/input/test/item/input.spec.ts diff --git a/core/api.txt b/core/api.txt index 2ac742620f6..8b601ae7809 100644 --- a/core/api.txt +++ b/core/api.txt @@ -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 diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 668cb2d85fa..4e4795c1e53 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -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. */ @@ -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. */ diff --git a/core/src/components/input/input.ios.scss b/core/src/components/input/input.ios.scss index 35dc4aee518..9b6d45bb10d 100644 --- a/core/src/components/input/input.ios.scss +++ b/core/src/components/input/input.ios.scss @@ -8,14 +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; @@ -33,7 +25,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}; } diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss index 97c65cd59dc..ce1888f7c63 100644 --- a/core/src/components/input/input.md.scss +++ b/core/src/components/input/input.md.scss @@ -14,14 +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; @@ -39,7 +31,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}; } diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index e2504b032a5..dc41f4b993b 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -57,6 +57,8 @@ width: 100%; + min-height: 44px; + /* stylelint-disable-next-line all */ padding: 0 !important; @@ -67,22 +69,6 @@ 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; } @@ -92,11 +78,6 @@ 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)}; } @@ -104,10 +85,6 @@ // 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 @@ -206,11 +183,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); @@ -257,22 +229,6 @@ } -// 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; -} - - // Item Floating: Placeholder // ---------------------------------------------------------------- // When used with a floating item the placeholder should hide diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 20f0719e0a3..46ffd83f0d0 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -1,16 +1,9 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, forceUpdate, h } from '@stencil/core'; -import type { LegacyFormController, NotchController } from '@utils/forms'; -import { createLegacyFormController, createNotchController } from '@utils/forms'; +import type { NotchController } from '@utils/forms'; +import { createNotchController } from '@utils/forms'; import type { Attributes } from '@utils/helpers'; -import { - inheritAriaAttributes, - debounceEvent, - findItemLabel, - inheritAttributes, - componentOnReady, -} from '@utils/helpers'; -import { printIonWarning } from '@utils/logging'; +import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from '@utils/helpers'; import { createSlotMutationController } from '@utils/slot-mutation-controller'; import type { SlotMutationController } from '@utils/slot-mutation-controller'; import { createColorClasses, hostContext } from '@utils/theme'; @@ -42,13 +35,10 @@ export class Input implements ComponentInterface { private inputId = `ion-input-${inputIds++}`; private inheritedAttributes: Attributes = {}; private isComposing = false; - private legacyFormController!: LegacyFormController; private slotMutationController?: SlotMutationController; private notchController?: NotchController; private notchSpacerEl: HTMLElement | undefined; - // This flag ensures we log the deprecation warning at most once. - private hasLoggedDeprecationWarning = false; private originalIonInput?: EventEmitter; /** @@ -142,11 +132,6 @@ export class Input implements ComponentInterface { */ @Prop() disabled = false; - @Watch('disabled') - protected disabledChanged() { - this.emitStyle(); - } - /** * A hint to the browser for which enter key to display. * Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, @@ -196,17 +181,6 @@ export class Input implements ComponentInterface { */ @Prop() labelPlacement: 'start' | 'end' | 'floating' | 'stacked' | 'fixed' = 'start'; - /** - * 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. - */ - @Prop() legacy?: boolean; - /** * The maximum value, which must not be less than its minimum (min attribute) value. */ @@ -327,14 +301,6 @@ export class Input implements ComponentInterface { */ @Event() ionStyle!: EventEmitter; - /** - * Update the item classes when the placeholder changes - */ - @Watch('placeholder') - protected placeholderChanged() { - this.emitStyle(); - } - /** * Update the native input element when the value changes */ @@ -353,7 +319,6 @@ export class Input implements ComponentInterface { */ nativeInput.value = value; } - this.emitStyle(); } componentWillLoad() { @@ -366,7 +331,6 @@ export class Input implements ComponentInterface { connectedCallback() { const { el } = this; - this.legacyFormController = createLegacyFormController(el); this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this)); this.notchController = createNotchController( el, @@ -374,7 +338,6 @@ export class Input implements ComponentInterface { () => this.labelSlot ); - this.emitStyle(); this.debounceChanged(); if (Build.isBrowser) { document.dispatchEvent( @@ -483,21 +446,6 @@ export class Input implements ComponentInterface { return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString(); } - private emitStyle() { - if (this.legacyFormController.hasLegacyControl()) { - this.ionStyle.emit({ - interactive: true, - input: true, - 'has-placeholder': this.placeholder !== undefined, - 'has-value': this.hasValue(), - 'has-focus': this.hasFocus, - 'interactive-disabled': this.disabled, - // TODO(FW-2764): remove this - legacy: !!this.legacy, - }); - } - } - private onInput = (ev: InputEvent | Event) => { const input = ev.target as HTMLInputElement | null; if (input) { @@ -512,7 +460,6 @@ export class Input implements ComponentInterface { private onBlur = (ev: FocusEvent) => { this.hasFocus = false; - this.emitStyle(); if (this.focusedValue !== this.value) { /** @@ -530,7 +477,6 @@ export class Input implements ComponentInterface { private onFocus = (ev: FocusEvent) => { this.hasFocus = true; this.focusedValue = this.value; - this.emitStyle(); this.ionFocus.emit(ev); }; @@ -718,7 +664,7 @@ export class Input implements ComponentInterface { return this.renderLabel(); } - private renderInput() { + render() { const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus } = this; const mode = getIonMode(this); const value = this.getValue(); @@ -833,112 +779,6 @@ export class Input implements ComponentInterface { ); } - - // TODO FW-2764 Remove this - private renderLegacyInput() { - if (!this.hasLoggedDeprecationWarning) { - printIonWarning( - `ion-input now requires providing a label with either the "label" property or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the "label" property or the "aria-label" attribute. - -Example: -Example with aria-label: - -For inputs that do not render the label immediately next to the input, developers may continue to use "ion-label" but must manually associate the label with the input by using "aria-labelledby". - -Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, - this.el - ); - - if (this.legacy) { - printIonWarning( - `ion-input is being used with the "legacy" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup. - -Developers can dismiss this warning by removing their usage of the "legacy" property and using the new input syntax.`, - this.el - ); - } - - this.hasLoggedDeprecationWarning = true; - } - - const mode = getIonMode(this); - const value = this.getValue(); - const labelId = this.inputId + '-lbl'; - const label = findItemLabel(this.el); - if (label) { - label.id = labelId; - } - - return ( - - (this.nativeInput = input)} - aria-labelledby={label ? label.id : null} - disabled={this.disabled} - autoCapitalize={this.autocapitalize} - autoComplete={this.autocomplete} - autoCorrect={this.autocorrect} - autoFocus={this.autofocus} - enterKeyHint={this.enterkeyhint} - inputMode={this.inputmode} - min={this.min} - max={this.max} - minLength={this.minlength} - maxLength={this.maxlength} - multiple={this.multiple} - name={this.name} - pattern={this.pattern} - placeholder={this.placeholder || ''} - readOnly={this.readonly} - required={this.required} - spellcheck={this.spellcheck} - step={this.step} - type={this.type} - value={value} - onInput={this.onInput} - onChange={this.onChange} - onBlur={this.onBlur} - onFocus={this.onFocus} - onKeyDown={this.onKeydown} - {...this.inheritedAttributes} - /> - {this.clearInput && !this.readonly && !this.disabled && ( - - )} - - ); - } - - render() { - const { legacyFormController } = this; - - return legacyFormController.hasLegacyControl() ? this.renderLegacyInput() : this.renderInput(); - } } let inputIds = 0; diff --git a/core/src/components/input/test/item/input.spec.ts b/core/src/components/input/test/item/input.spec.ts deleted file mode 100644 index 589abf76841..00000000000 --- a/core/src/components/input/test/item/input.spec.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { newSpecPage } from '@stencil/core/testing'; - -import { Item } from '../../../item/item'; -import { Input } from '../../input'; - -it('should render as modern when label is set asynchronously', async () => { - const page = await newSpecPage({ - components: [Item, Input], - html: ` - - - - `, - }); - - const input = page.body.querySelector('ion-input')!; - - // Template should be modern - expect(input.classList.contains('legacy-input')).toBe(false); - - // Update the input label - input.label = 'New label'; - await page.waitForChanges(); - - // Template should still be modern - expect(input.classList.contains('legacy-input')).toBe(false); -}); diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index d038c6f8700..169f7523c31 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -955,7 +955,7 @@ export declare interface IonInfiniteScrollContent extends Components.IonInfinite @ProxyCmp({ - inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'legacy', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'spellcheck', 'step', 'type', 'value'], + inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'spellcheck', 'step', 'type', 'value'], methods: ['setFocus', 'getInputElement'] }) @Component({ @@ -963,7 +963,7 @@ export declare interface IonInfiniteScrollContent extends Components.IonInfinite changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'legacy', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'spellcheck', 'step', 'type', 'value'], + inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'spellcheck', 'step', 'type', 'value'], }) export class IonInput { protected el: HTMLElement; diff --git a/packages/angular/standalone/src/directives/input.ts b/packages/angular/standalone/src/directives/input.ts index fd468746eb0..dc0765ed7f3 100644 --- a/packages/angular/standalone/src/directives/input.ts +++ b/packages/angular/standalone/src/directives/input.ts @@ -40,7 +40,6 @@ const INPUT_INPUTS = [ 'inputmode', 'label', 'labelPlacement', - 'legacy', 'max', 'maxlength', 'min', diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 910a609e349..8be5e900f5d 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -414,7 +414,6 @@ export const IonInput = /*@__PURE__*/ defineContainer Date: Mon, 12 Feb 2024 15:06:52 -0500 Subject: [PATCH 2/4] docs(BREAKING): add removal of legacy property to breaking changes --- BREAKING.md | 1 + 1 file changed, 1 insertion(+) diff --git a/BREAKING.md b/BREAKING.md index 9d14348f30a..259c8c98201 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -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).

Nav

From 55de1b5d7e316fb3864433608b111d38fadec7bd Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 12 Feb 2024 16:20:44 -0500 Subject: [PATCH 3/4] refactor(input): remove unused Sass vars --- core/src/components/input/input.ios.vars.scss | 12 ------------ core/src/components/input/input.md.vars.scss | 12 ------------ 2 files changed, 24 deletions(-) diff --git a/core/src/components/input/input.ios.vars.scss b/core/src/components/input/input.ios.vars.scss index 2d6de0d507e..238d9cd4275 100644 --- a/core/src/components/input/input.ios.vars.scss +++ b/core/src/components/input/input.ios.vars.scss @@ -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; - /// @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; diff --git a/core/src/components/input/input.md.vars.scss b/core/src/components/input/input.md.vars.scss index b3bc7c65408..952bc390ffc 100644 --- a/core/src/components/input/input.md.vars.scss +++ b/core/src/components/input/input.md.vars.scss @@ -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; - /// @prop - The amount of whitespace to display on either side of the floating label $input-md-floating-label-padding: 4px !default; From d1a7adc1aba3d544b5d829f548fd63b2ccb29b6f Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 13 Feb 2024 10:59:02 -0500 Subject: [PATCH 4/4] refactor(input): remove item label styles --- core/src/components/input/input.ios.scss | 7 ------- core/src/components/input/input.md.scss | 7 ------- core/src/components/input/input.scss | 19 ------------------- 3 files changed, 33 deletions(-) diff --git a/core/src/components/input/input.ios.scss b/core/src/components/input/input.ios.scss index 9b6d45bb10d..4f06328db03 100644 --- a/core/src/components/input/input.ios.scss +++ b/core/src/components/input/input.ios.scss @@ -8,13 +8,6 @@ font-size: $input-ios-font-size; } -: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; diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss index ce1888f7c63..f11e3562591 100644 --- a/core/src/components/input/input.md.scss +++ b/core/src/components/input/input.md.scss @@ -14,13 +14,6 @@ font-size: $input-md-font-size; } -: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; diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index dc41f4b993b..6dd16582d53 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -69,10 +69,6 @@ z-index: $z-index-item-input; } -: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; @@ -228,21 +224,6 @@ visibility: visible; } - -// 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 // ----------------------------------------------------------------