diff --git a/BREAKING.md b/BREAKING.md index a882d98d2be..49120d9c2fd 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -21,6 +21,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver - [Checkbox](#version-8x-checkbox) - [Content](#version-8x-content) - [Datetime](#version-8x-datetime) + - [Item](#version-8x-item) - [Input](#version-8x-input) - [Item](#version-8x-item) - [Modal](#version-8x-modal) @@ -162,6 +163,13 @@ For more information on the dynamic font, refer to the [Dynamic Font Scaling doc + background: red; } ``` +

Item

+ +- The `helper` slot has been removed. Developers should use the `helperText` property on `ion-input` and `ion-textarea`. +- The `error` slot has been removed. Developers should use the `errorText` property on `ion-input` and `ion-textarea`. +- Counter functionality has been removed including the `counter` and `counterFormatter` properties. Developers should use the properties of the same name on `ion-input` and `ion-textarea`. +- The `fill` property has been removed. Developers should use the property of the same name on `ion-input`, `ion-select`, and `ion-textarea`. +- The `shape` property has been removed. Developers should use the property of the same name on `ion-input`, `ion-select`, and `ion-textarea`.

Input

diff --git a/core/api.txt b/core/api.txt index 4dffadf53b1..eab32d73aeb 100644 --- a/core/api.txt +++ b/core/api.txt @@ -608,20 +608,16 @@ ion-input,css-prop,--placeholder-opacity ion-item,shadow ion-item,prop,button,boolean,false,false,false ion-item,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true -ion-item,prop,counter,boolean,false,false,false -ion-item,prop,counterFormatter,((inputLength: number, maxLength: number) => string) | undefined,undefined,false,false ion-item,prop,detail,boolean | undefined,undefined,false,false ion-item,prop,detailIcon,string,chevronForward,false,false ion-item,prop,disabled,boolean,false,false,false ion-item,prop,download,string | undefined,undefined,false,false -ion-item,prop,fill,"outline" | "solid" | undefined,undefined,false,false ion-item,prop,href,string | undefined,undefined,false,false ion-item,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false ion-item,prop,mode,"ios" | "md",undefined,false,false ion-item,prop,rel,string | undefined,undefined,false,false ion-item,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-item,prop,routerDirection,"back" | "forward" | "root",'forward',false,false -ion-item,prop,shape,"round" | undefined,undefined,false,false ion-item,prop,target,string | undefined,undefined,false,false ion-item,prop,type,"button" | "reset" | "submit",'button',false,false ion-item,css-prop,--background diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 9a1791a5d42..3e21c28b44b 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -18,7 +18,6 @@ import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-int import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface"; import { SpinnerTypes } from "./components/spinner/spinner-configs"; import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface"; -import { CounterFormatter } from "./components/item/item-interface"; import { MenuChangeEventDetail, Side } from "./components/menu/menu-interface"; import { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface"; import { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface"; @@ -54,7 +53,6 @@ export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-int export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface"; export { SpinnerTypes } from "./components/spinner/spinner-configs"; export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface"; -export { CounterFormatter } from "./components/item/item-interface"; export { MenuChangeEventDetail, Side } from "./components/menu/menu-interface"; export { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface"; export { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface"; @@ -1294,16 +1292,6 @@ export namespace Components { * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). */ "color"?: Color; - /** - * If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`. - * @deprecated Use the `counter` property on `ion-input` or `ion-textarea` instead. - */ - "counter": boolean; - /** - * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength". - * @deprecated Use the `counterFormatter` property on `ion-input` or `ion-textarea` instead. - */ - "counterFormatter"?: CounterFormatter; /** * If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present. */ @@ -1320,11 +1308,6 @@ export namespace Components { * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). */ "download": string | undefined; - /** - * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode. - * @deprecated Use the `fill` property on `ion-input` or `ion-textarea` instead. - */ - "fill"?: 'outline' | 'solid'; /** * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. */ @@ -1349,10 +1332,6 @@ export namespace Components { * When using a router, it specifies the transition direction when navigating to another page using `href`. */ "routerDirection": RouterDirection; - /** - * The shape of the item. If "round" it will have increased border radius. - */ - "shape"?: 'round'; /** * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. */ @@ -6009,16 +5988,6 @@ declare namespace LocalJSX { * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). */ "color"?: Color; - /** - * If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`. - * @deprecated Use the `counter` property on `ion-input` or `ion-textarea` instead. - */ - "counter"?: boolean; - /** - * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength". - * @deprecated Use the `counterFormatter` property on `ion-input` or `ion-textarea` instead. - */ - "counterFormatter"?: CounterFormatter; /** * If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present. */ @@ -6035,11 +6004,6 @@ declare namespace LocalJSX { * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). */ "download"?: string | undefined; - /** - * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode. - * @deprecated Use the `fill` property on `ion-input` or `ion-textarea` instead. - */ - "fill"?: 'outline' | 'solid'; /** * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. */ @@ -6064,10 +6028,6 @@ declare namespace LocalJSX { * When using a router, it specifies the transition direction when navigating to another page using `href`. */ "routerDirection"?: RouterDirection; - /** - * The shape of the item. If "round" it will have increased border radius. - */ - "shape"?: 'round'; /** * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. */ diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss index d27d8f6a9aa..27af3194d95 100644 --- a/core/src/components/item/item.ios.scss +++ b/core/src/components/item/item.ios.scss @@ -33,7 +33,6 @@ --highlight-color-focused: #{$item-ios-input-highlight-color}; --highlight-color-valid: #{$item-ios-input-highlight-color-valid}; --highlight-color-invalid: #{$item-ios-input-highlight-color-invalid}; - --bottom-padding-start: 0px; font-size: $item-ios-font-size; } @@ -149,7 +148,6 @@ @include margin($item-ios-label-slot-end-margin-top, $item-ios-label-slot-end-margin-end, $item-ios-label-slot-end-margin-bottom, $item-ios-label-slot-end-margin-start); } - // iOS Item Button // -------------------------------------------------- @@ -204,7 +202,6 @@ @include margin(10px, 8px, 10px, 0); } - // iOS Stacked & Floating Inputs // -------------------------------------------------- @@ -212,10 +209,3 @@ :host(.item-label-stacked) { --min-height: 68px; } - -// iOS Fixed Labels -// -------------------------------------------------- - -:host(.item-label-fixed) ::slotted(ion-datetime) { - --padding-start: 0; -} diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss index 1b963145993..3dd0ca01570 100644 --- a/core/src/components/item/item.md.scss +++ b/core/src/components/item/item.md.scss @@ -32,68 +32,6 @@ text-transform: none; } -:host(.item-fill-outline) { - --highlight-height: 2px; -} - -// Item Fill: None -// -------------------------------------------------- - -:host(.item-fill-none.item-interactive.ion-focus) .item-highlight, -:host(.item-fill-none.item-interactive.item-has-focus) .item-highlight, -:host(.item-fill-none.item-interactive.ion-touched.ion-invalid) .item-highlight { - transform: scaleX(1); - - border-width: 0 0 var(--full-highlight-height) 0; - border-style: var(--border-style); - border-color: var(--highlight-background); -} - -:host(.item-fill-none.item-interactive.ion-focus) .item-native, -:host(.item-fill-none.item-interactive.item-has-focus) .item-native, -:host(.item-fill-none.item-interactive.ion-touched.ion-invalid) .item-native { - border-bottom-color: var(--highlight-background); -} - -// Item Fill: Outline -// -------------------------------------------------- - -:host(.item-fill-outline.item-interactive.ion-focus) .item-highlight, -:host(.item-fill-outline.item-interactive.item-has-focus) .item-highlight { - transform: scaleX(1); -} - -:host(.item-fill-outline.item-interactive.ion-focus) .item-highlight, -:host(.item-fill-outline.item-interactive.item-has-focus) .item-highlight, -:host(.item-fill-outline.item-interactive.ion-touched.ion-invalid) .item-highlight { - border-width: var(--full-highlight-height); - border-style: var(--border-style); - border-color: var(--highlight-background); -} - -:host(.item-fill-outline.item-interactive.ion-touched.ion-invalid) .item-native { - border-color: var(--highlight-background); -} - -// Item Fill: Solid -// -------------------------------------------------- - -:host(.item-fill-solid.item-interactive.ion-focus) .item-highlight, -:host(.item-fill-solid.item-interactive.item-has-focus) .item-highlight, -:host(.item-fill-solid.item-interactive.ion-touched.ion-invalid) .item-highlight { - transform: scaleX(1); - - border-width: 0 0 var(--full-highlight-height) 0; - border-style: var(--border-style); - border-color: var(--highlight-background); -} - -:host(.item-fill-solid.item-interactive.ion-focus) .item-native, -:host(.item-fill-solid.item-interactive.item-has-focus) .item-native, -:host(.item-fill-solid.item-interactive.ion-touched.ion-invalid) .item-native { - border-bottom-color: var(--highlight-background); -} - // Material Design Item: States // -------------------------------------------------- @@ -147,25 +85,6 @@ --show-inset-highlight: 0; } -/** - * When `fill="outline"`, reposition the highlight element to cover everything but the `.item-bottom` - */ -:host(.item-fill-outline) .item-highlight { - --position-offset: calc(-1 * var(--border-width)); - - @include position(var(--position-offset), null, null, var(--position-offset)); - - width: calc(100% + 2 * var(--border-width)); - height: calc(100% + 2 * var(--border-width)); - - transition: none; -} - -:host(.item-fill-outline.ion-focused) .item-native, -:host(.item-fill-outline.item-has-focus) .item-native { - border-color: transparent; -} - // Material Design Multi-line Item // -------------------------------------------------- @@ -188,14 +107,6 @@ @include margin-horizontal($item-md-end-slot-margin-start, $item-md-end-slot-margin-end); } -:host(.item-fill-solid) ::slotted([slot="start"]), -:host(.item-fill-solid) ::slotted([slot="end"]), -:host(.item-fill-outline) ::slotted([slot="start"]), -:host(.item-fill-outline) ::slotted([slot="end"]) { - align-self: center; -} - - // Material Design Slotted Icon // -------------------------------------------------- @@ -211,7 +122,7 @@ font-size: math.div($item-md-icon-slot-font-size, $item-md-font-size) * 1em; } -:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) ::slotted(ion-icon) { +:host(.ion-color) ::slotted(ion-icon) { color: current-color(contrast); } @@ -227,12 +138,6 @@ @include margin-horizontal($item-md-icon-end-slot-margin-start, $item-md-icon-end-slot-margin-end); } -:host(.item-fill-solid) ::slotted(ion-icon[slot="start"]), -:host(.item-fill-outline) ::slotted(ion-icon[slot="start"]) { - @include margin-horizontal($item-md-icon-start-slot-margin-start, $item-md-input-icon-start-slot-margin-end); -} - - // Material Design Slotted Toggle // -------------------------------------------------- @@ -253,7 +158,7 @@ font-size: $item-md-note-slot-font-size; } -::slotted(ion-note[slot]:not([slot="helper"]):not([slot="error"])) { +::slotted(ion-note[slot]) { @include padding($item-md-note-slot-padding-top, $item-md-note-slot-padding-end, $item-md-note-slot-padding-bottom, $item-md-note-slot-padding-start); } @@ -298,7 +203,6 @@ @include margin($item-md-label-margin-top, $item-md-label-margin-end, $item-md-label-margin-bottom, $item-md-label-margin-start); } - // Material Design Floating/Stacked Label // -------------------------------------------------- @@ -307,15 +211,6 @@ @include margin($item-md-label-slot-end-margin-top, $item-md-label-slot-end-margin-end, $item-md-label-slot-end-margin-bottom, $item-md-label-slot-end-margin-start); } - -// Material Design Fixed Labels -// -------------------------------------------------- - -:host(.item-label-fixed) ::slotted(ion-datetime) { - --padding-start: 8px; -} - - // Material Design Toggle/Radio Item // -------------------------------------------------- @@ -324,7 +219,6 @@ @include margin-horizontal(0, null); } - // Material Design Item Button // -------------------------------------------------- @@ -339,15 +233,6 @@ font-size: dynamic-font(12px); } - -// Material Design Radio Item Label: Checked -// ----------------------------------------- - -// .item-radio-checked.item-md ion-label { -// color: $radio-md-color-on; -// } - - // Material Design Stacked & Floating Inputs // -------------------------------------------------- @@ -373,94 +258,3 @@ :host(.item-label-color) { --highlight-color-focused: #{current-color(base)}; } - -:host(.item-fill-solid.ion-color), -:host(.item-fill-outline.ion-color) { - --highlight-color-focused: #{current-color(base)}; -} - -// Material Design Item: Fill Solid -// -------------------------------------------------- - -:host(.item-fill-solid) { - --background: #{$item-md-input-fill-solid-background-color}; - --background-hover: #{$item-md-input-fill-solid-background-color-hover}; - --background-focused: #{$item-md-input-fill-solid-background-color-focus}; - --border-width: 0 0 #{$item-md-border-bottom-width} 0; - --inner-border-width: 0; - - @include border-radius(4px, 4px, 0, 0); -} - -:host(.item-fill-solid) .item-native { - --border-color: #{$item-md-input-fill-border-color}; -} - -:host(.item-fill-solid.ion-focused) .item-native, -:host(.item-fill-solid.item-has-focus) .item-native { - --background: var(--background-focused); -} - -:host(.item-fill-solid.item-shape-round) { - @include border-radius(16px, 16px, 0, 0); -} - -@media (any-hover: hover) { - :host(.item-fill-solid:hover) .item-native { - --background: var(--background-hover); - --border-color: #{$item-md-input-fill-border-color-hover}; - } -} - -// Material Design Item: Fill Outline -// -------------------------------------------------- - -:host(.item-fill-outline) { - --ripple-color: transparent; - --background-focused: transparent; - --background-hover: transparent; - --border-color: #{$item-md-input-fill-border-color}; - --border-width: #{$item-md-border-bottom-width}; - - border: none; - - overflow: visible; -} - -:host(.item-fill-outline) .item-native { - --native-padding-left: 16px; - - @include border-radius(4px); -} - -:host(.item-fill-outline.item-shape-round) .item-native { - --inner-padding-start: 16px; - - @include border-radius(28px); -} - -:host(.item-fill-outline.item-shape-round) .item-bottom { - @include padding-horizontal(32px, null); -} - -:host(.item-fill-outline.item-label-floating.ion-focused) .item-native ::slotted(ion-input:not(:first-child)), -:host(.item-fill-outline.item-label-floating.ion-focused) .item-native ::slotted(ion-textarea:not(:first-child)), -:host(.item-fill-outline.item-label-floating.item-has-focus) .item-native ::slotted(ion-input:not(:first-child)), -:host(.item-fill-outline.item-label-floating.item-has-focus) .item-native ::slotted(ion-textarea:not(:first-child)), -:host(.item-fill-outline.item-label-floating.item-has-value) .item-native ::slotted(ion-input:not(:first-child)), -:host(.item-fill-outline.item-label-floating.item-has-value) .item-native ::slotted(ion-textarea:not(:first-child)) { - transform: translateY(-14px); -} - -@media (any-hover: hover) { - :host(.item-fill-outline:hover) .item-native { - --border-color: #{$item-md-input-fill-border-color-hover}; - } -} - -// Material Design Text Field Character Counter -// -------------------------------------------------- - -.item-counter { - letter-spacing: #{$item-md-input-counter-letter-spacing}; -} diff --git a/core/src/components/item/item.md.vars.scss b/core/src/components/item/item.md.vars.scss index e66fcc4158e..3f21bda9353 100644 --- a/core/src/components/item/item.md.vars.scss +++ b/core/src/components/item/item.md.vars.scss @@ -45,15 +45,6 @@ $item-md-border-bottom-color: $item-md-border-color !default; // Item Input // -------------------------------------------------- -/// @prop - Color of the item input background -$item-md-input-fill-solid-background-color: $background-color-step-50 !default; - -/// @prop - Color of the item input background when hovered -$item-md-input-fill-solid-background-color-hover: $background-color-step-100 !default; - -/// @prop - Color of the item input background when focused -$item-md-input-fill-solid-background-color-focus: $background-color-step-150 !default; - /// @prop - Color of the item input highlight $item-md-input-highlight-color: ion-color(primary, base) !default; @@ -63,15 +54,6 @@ $item-md-input-highlight-color-valid: ion-color(success, base) !default; /// @prop - Color of the item input highlight when invalid $item-md-input-highlight-color-invalid: ion-color(danger, base) !default; -/// @prop - Color of the item border when `fill` is set -$item-md-input-fill-border-color: $background-color-step-500 !default; - -/// @prop - Color of the item border when `fill` is set and hovered -$item-md-input-fill-border-color-hover: $background-color-step-750 !default; - -/// @prop - Letter spacing of the item input counter -$item-md-input-counter-letter-spacing: .0333333333em !default; - // Item Label // -------------------------------------------------- @@ -87,12 +69,6 @@ $item-md-label-margin-bottom: 10px !default; /// @prop - Margin start of the label $item-md-label-margin-start: 0 !default; -/// @prop - X translation for floating labels -$item-md-fill-outline-label-translate-x: -32px !default; - -/// @prop - Padding for floating labels -$item-md-fill-outline-label-padding: 4px !default; - // Item Slots // -------------------------------------------------- diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss index 214a7dc6676..f8421c5dc30 100644 --- a/core/src/components/item/item.scss +++ b/core/src/components/item/item.scss @@ -99,13 +99,13 @@ // Item: Color // -------------------------------------------------- -:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-native { +:host(.ion-color) .item-native { background: current-color(base); color: current-color(contrast); } -:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-native, -:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-inner { +:host(.ion-color) .item-native, +:host(.ion-color) .item-inner { border-color: current-color(shade); } @@ -307,32 +307,6 @@ button, a { box-sizing: border-box; } -// Item Bottom -// -------------------------------------------------- - -.item-bottom { - @include margin(0); - @include padding(0, null); - - /* stylelint-disable */ - @include ltr() { - padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px)); - padding-right: calc(var(--inner-padding-end) + var(--ion-safe-area-right, 0px)); - } - - @include rtl() { - padding-left: calc(var(--inner-padding-end) + var(--ion-safe-area-left, 0px)); - padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px)); - } - /* stylelint-enable */ - - display: flex; - - justify-content: space-between; - -} - - // Item Detail Icon // -------------------------------------------------- @@ -424,7 +398,6 @@ button, a { flex-direction: column; } - // Item Input Highlight // -------------------------------------------------- @@ -485,15 +458,10 @@ button, a { opacity: var(--show-inset-highlight); } -:host(.ion-focused.item-fill-solid) .item-highlight, -:host(.item-has-focus.item-fill-solid) .item-highlight { - border-width: calc(var(--full-highlight-height) - 1px); -} - :host(.ion-focused) .item-inner-highlight, -:host(.ion-focused:not(.item-fill-outline)) .item-highlight, +:host(.ion-focused) .item-highlight, :host(.item-has-focus) .item-inner-highlight, -:host(.item-has-focus:not(.item-fill-outline)) .item-highlight { +:host(.item-has-focus) .item-highlight { border-top: none; border-right: none; border-left: none; @@ -522,35 +490,6 @@ button, a { --highlight-background: var(--highlight-color-invalid); } -:host(.item-interactive.ion-invalid) ::slotted([slot="helper"]) { - display: none; -} - -::slotted([slot="error"]) { - display: none; - - color: var(--highlight-color-invalid); -} - -:host(.item-interactive.ion-invalid) ::slotted([slot="error"]) { - display: block; -} - -// Item Datetime -// -------------------------------------------------- - -:host(:not(.item-label)) ::slotted(ion-datetime) { - --padding-start: 0; -} - -:host(.item-label-stacked) ::slotted(ion-datetime), -:host(.item-label-floating) ::slotted(ion-datetime) { - --padding-start: 0; - - width: 100%; -} - - // Item w/ Multiple Inputs // -------------------------------------------------- // Multiple inputs in an item should have the input @@ -585,36 +524,6 @@ ion-ripple-effect { color: var(--ripple-color); } -:host(.item-fill-solid) ::slotted([slot="start"]), -:host(.item-fill-solid) ::slotted([slot="end"]), -:host(.item-fill-outline) ::slotted([slot="start"]), -:host(.item-fill-outline) ::slotted([slot="end"]) { - align-self: center; -} - -::slotted([slot="helper"]), -::slotted([slot="error"]), -.item-counter { - padding-top: 5px; - - font-size: dynamic-font(12px); - - z-index: 1; -} - -// Item Max Length Counter -// -------------------------------------------------- - -.item-counter { - @include margin-horizontal(auto, null); - - color: #{$background-color-step-550}; - - white-space: nowrap; - - padding-inline-start: 16px; -} - // Item: Reduced Motion // -------------------------------------------------- diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index 022c78d40a0..0cc0870cdec 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -3,25 +3,19 @@ import { Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } import type { AnchorInterface, ButtonInterface } from '@utils/element-interface'; import type { Attributes } from '@utils/helpers'; import { inheritAttributes, raf } from '@utils/helpers'; -import { printIonError, printIonWarning } from '@utils/logging'; import { createColorClasses, hostContext, openURL } from '@utils/theme'; import { chevronForward } from 'ionicons/icons'; import { getIonMode } from '../../global/ionic-global'; import type { AnimationBuilder, Color, CssClassMap, StyleEventDetail } from '../../interface'; -import type { InputInputEventDetail } from '../input/input-interface'; import type { RouterDirection } from '../router/utils/interface'; -import type { CounterFormatter } from './item-interface'; - /** * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use. * * @slot - Content is placed between the named slots if provided without a slot. * @slot start - Content is placed to the left of the item text in LTR, and to the right in RTL. * @slot end - Content is placed to the right of the item text in LTR, and to the left in RTL. - * @slot helper - Content is placed under the item and displayed when no error is detected. **DEPRECATED** Use the "helperText" property on ion-input or ion-textarea instead. - * @slot error - Content is placed under the item and displayed when an error is detected. **DEPRECATED** Use the "errorText" property on ion-input or ion-textarea instead. * * @part native - The native HTML button, anchor or div element that wraps all child elements. * @part detail-icon - The chevron icon for the item. Only applies when `detail="true"`. @@ -80,18 +74,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac */ @Prop() download: string | undefined; - /** - * The fill for the item. If `"solid"` the item will have a background. If - * `"outline"` the item will be transparent with a border. Only available in `md` mode. - * @deprecated Use the `fill` property on `ion-input` or `ion-textarea` instead. - */ - @Prop() fill?: 'outline' | 'solid'; - - /** - * The shape of the item. If "round" it will have increased - * border radius. - */ - @Prop() shape?: 'round'; /** * Contains a URL or a URL fragment that the hyperlink points to. * If this property is set, an anchor tag will be rendered. @@ -109,12 +91,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac */ @Prop() lines?: 'full' | 'inset' | 'none'; - /** - * If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`. - * @deprecated Use the `counter` property on `ion-input` or `ion-textarea` instead. - */ - @Prop() counter = false; - /** * When using a router, it specifies the transition animation when navigating to * another page using `href`. @@ -139,33 +115,12 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac */ @Prop() type: 'submit' | 'reset' | 'button' = 'button'; - /** - * A callback used to format the counter text. - * By default the counter text is set to "itemLength / maxLength". - * @deprecated Use the `counterFormatter` property on `ion-input` or `ion-textarea` instead. - */ - @Prop() counterFormatter?: CounterFormatter; - - @State() counterString: string | null | undefined; - @Watch('button') buttonChanged() { // Update the focusable option when the button option is changed this.focusable = this.isFocusable(); } - @Watch('counterFormatter') - counterFormatterChanged() { - this.updateCounterOutput(this.getFirstInput()); - } - - @Listen('ionInput') - handleIonInput(ev: CustomEvent) { - if (this.counter && ev.target === this.getFirstInput()) { - this.updateCounterOutput(ev.target as HTMLIonInputElement | HTMLIonTextareaElement); - } - } - @Listen('ionColor') labelColorChanged(ev: CustomEvent) { const { color } = this; @@ -207,10 +162,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac } connectedCallback() { - if (this.counter) { - this.updateCounterOutput(this.getFirstInput()); - } - this.hasStartEl(); } @@ -219,51 +170,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac } componentDidLoad() { - const { el, counter, counterFormatter, fill, shape } = this; - const hasHelperSlot = el.querySelector('[slot="helper"]') !== null; - if (hasHelperSlot) { - printIonWarning( - 'The "helper" slot has been deprecated in favor of using the "helperText" property on ion-input or ion-textarea.', - el - ); - } - - const hasErrorSlot = el.querySelector('[slot="error"]') !== null; - if (hasErrorSlot) { - printIonWarning( - 'The "error" slot has been deprecated in favor of using the "errorText" property on ion-input or ion-textarea.', - el - ); - } - - if (counter === true) { - printIonWarning( - 'The "counter" property has been deprecated in favor of using the "counter" property on ion-input or ion-textarea.', - el - ); - } - - if (counterFormatter !== undefined) { - printIonWarning( - 'The "counterFormatter" property has been deprecated in favor of using the "counterFormatter" property on ion-input or ion-textarea.', - el - ); - } - - if (fill !== undefined) { - printIonWarning( - 'The "fill" property has been deprecated in favor of using the "fill" property on ion-input or ion-textarea.', - el - ); - } - - if (shape !== undefined) { - printIonWarning( - 'The "shape" property has been deprecated in favor of using the "shape" property on ion-input or ion-textarea.', - el - ); - } - raf(() => { this.setMultipleInputs(); this.focusable = this.isFocusable(); @@ -319,35 +225,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac return this.canActivate() || focusableChild !== null; } - private getFirstInput(): HTMLIonInputElement | HTMLIonTextareaElement { - const inputs = this.el.querySelectorAll('ion-input, ion-textarea') as NodeListOf< - HTMLIonInputElement | HTMLIonTextareaElement - >; - return inputs[0]; - } - - private updateCounterOutput(inputEl: HTMLIonInputElement | HTMLIonTextareaElement) { - const { counter, counterFormatter, defaultCounterFormatter } = this; - if (counter && !this.multipleInputs && inputEl?.maxlength !== undefined) { - const length = inputEl?.value?.toString().length ?? 0; - if (counterFormatter === undefined) { - this.counterString = defaultCounterFormatter(length, inputEl.maxlength); - } else { - try { - this.counterString = counterFormatter(length, inputEl.maxlength); - } catch (e) { - printIonError('Exception in provided `counterFormatter`.', e); - // Fallback to the default counter formatter when an exception happens - this.counterString = defaultCounterFormatter(length, inputEl.maxlength); - } - } - } - } - - private defaultCounterFormatter(length: number, maxlength: number) { - return `${length} / ${maxlength}`; - } - private hasStartEl() { const startEl = this.el.querySelector('[slot="start"]'); if (startEl !== null) { @@ -364,17 +241,14 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac render() { const { - counterString, detail, detailIcon, download, - fill, labelColorStyles, lines, disabled, href, rel, - shape, target, routerAnimation, routerDirection, @@ -445,7 +319,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac Object.assign(childStyles, value); }); const ariaDisabled = disabled || childStyles['item-interactive-disabled'] ? 'true' : null; - const fillValue = fill || 'none'; const inList = hostContext('ion-list', this.el) && !hostContext('ion-radio-group', this.el); /** @@ -466,8 +339,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac [mode]: true, 'item-lines-default': lines === undefined, [`item-lines-${lines}`]: lines !== undefined, - [`item-fill-${fillValue}`]: true, - [`item-shape-${shape}`]: shape !== undefined, 'item-control-needs-pointer-cursor': firstInteractiveNeedsPointerCursor, 'item-disabled': disabled, 'in-list': inList, @@ -508,11 +379,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac {canActivate && mode === 'md' && }
-
- - - {counterString && {counterString}} -
); } diff --git a/core/src/components/item/test/basic/item.e2e.ts b/core/src/components/item/test/basic/item.e2e.ts index 4f3076adf84..b06ede55ca0 100644 --- a/core/src/components/item/test/basic/item.e2e.ts +++ b/core/src/components/item/test/basic/item.e2e.ts @@ -25,11 +25,6 @@ configs().forEach(({ title, screenshot, config }) => { } - - Item with helper -
Helper
- - Single line text that should have ellipses when it doesn't all fit in the item diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-ltr-Mobile-Chrome-linux.png index 3c7598f13fe..f4536258e6d 100644 Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-ltr-Mobile-Firefox-linux.png index f52966a3fc7..1eb2c8165bf 100644 Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-ltr-Mobile-Safari-linux.png index 41438a1401b..fb877b9e1e1 100644 Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-rtl-Mobile-Chrome-linux.png index 31769bd8b41..6a15c05a6e6 100644 Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-rtl-Mobile-Firefox-linux.png index 7283620e0e4..c42da0a4129 100644 Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-rtl-Mobile-Safari-linux.png index 3fb79af9614..d42001281be 100644 Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-ltr-Mobile-Chrome-linux.png index 2534024ce32..e4d1e91390f 100644 Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-ltr-Mobile-Firefox-linux.png index d64ca28f58e..16be268f197 100644 Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-ltr-Mobile-Safari-linux.png index 40f103f5f84..b4967dac18e 100644 Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-rtl-Mobile-Chrome-linux.png index 89ea0b441b7..c509226bfae 100644 Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-rtl-Mobile-Firefox-linux.png index 84881d8dd1d..59aaa743ed2 100644 Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-rtl-Mobile-Safari-linux.png index b4932e5a2eb..4debba8343b 100644 Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-safe-area-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/bottom/index.html b/core/src/components/item/test/bottom/index.html deleted file mode 100644 index f89740008b4..00000000000 --- a/core/src/components/item/test/bottom/index.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - - Item - Bottom - - - - - - - - - - - - - - - Item inputs - - - - - - - - - - - - Helper Text - Error Text - - - - - Helper Text - - - - - Error Text - - - - - Helper Text - Error Text - - - - - - - - - Helper Text - Error Text - - - - - - Helper Text - Error Text - - - - - - - Toggle Error - - - - - - - - - - diff --git a/core/src/components/item/test/legacy/disabled/index.html b/core/src/components/item/test/legacy/disabled/index.html deleted file mode 100644 index 4299e3adbb5..00000000000 --- a/core/src/components/item/test/legacy/disabled/index.html +++ /dev/null @@ -1,63 +0,0 @@ - - - - - Item - Disabled - - - - - - - - - - - - Item: Disabled - - - - - - - Single Input Disabled Items - - - - Disabled Item - - - - Disabled Item Button - - - - Disabled Item Anchor - - - - - - - - Toggle - - - - - - - - diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts b/core/src/components/item/test/legacy/disabled/item.e2e.ts deleted file mode 100644 index a24d51bdfdd..00000000000 --- a/core/src/components/item/test/legacy/disabled/item.e2e.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { expect } from '@playwright/test'; -import { configs, test } from '@utils/test/playwright'; - -configs().forEach(({ title, screenshot, config }) => { - test.describe(title('item: disabled state'), () => { - test('should not have visual regressions', async ({ page }) => { - await page.goto(`/src/components/item/test/legacy/disabled`, config); - - await page.setIonViewport(); - - await expect(page).toHaveScreenshot(screenshot(`item-disabled-diff`)); - }); - }); -}); diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index bcf5ed99b5f..00000000000 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 456412237eb..00000000000 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index df85966d58d..00000000000 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 60a5993758c..00000000000 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index d7851065759..00000000000 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Safari-linux.png deleted file mode 100644 index eb70831b2f3..00000000000 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 4a03aece347..00000000000 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index dd329f1bfa0..00000000000 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 8f140e8470c..00000000000 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 837b35c14bf..00000000000 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index b537878189f..00000000000 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png deleted file mode 100644 index b9277da27f3..00000000000 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/item/test/standalone/item.e2e-legacy.ts-snapshots/item-standalone-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/standalone/item.e2e-legacy.ts-snapshots/item-standalone-diff-ios-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 45a5ad65db8..00000000000 Binary files a/core/src/components/item/test/standalone/item.e2e-legacy.ts-snapshots/item-standalone-diff-ios-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 89a556877e4..00000000000 Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index a3ff200d58a..00000000000 Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index b6eca003c02..00000000000 Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 08684526a39..00000000000 Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 8fd41383898..00000000000 Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 38b822d163f..00000000000 Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 6fc228c6614..00000000000 Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index b722f1948b1..00000000000 Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 71e76cf66b7..00000000000 Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index a2522d4b4e8..00000000000 Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 7198f6b3ab5..00000000000 Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 170769b7e78..00000000000 Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/label/label.md.scss b/core/src/components/label/label.md.scss index 6dc42bae3ca..b2f3b1e4748 100644 --- a/core/src/components/label/label.md.scss +++ b/core/src/components/label/label.md.scss @@ -52,65 +52,6 @@ @include transform(translateY(50%), scale(.75)); } -/** - * When translating the label inside of an ion-item with `fill="outline"`, - * add pseudo-elements to imitate fieldset-like padding without shifting the label - */ -:host-context(.item-fill-outline.ion-focused).label-floating, -:host-context(.item-fill-outline.item-has-focus).label-floating, -:host-context(.item-fill-outline.item-has-placeholder:not(.item-input)).label-floating, -:host-context(.item-fill-outline.item-has-value).label-floating { - @include transform(translateY(-6px), scale(.75)); - position: relative; - - max-width: min-content; - - background-color: $item-md-background; - - overflow: visible; - // Places the label on top of the item outline - z-index: 3; - - &::before, - &::after { - position: absolute; - - width: $item-md-fill-outline-label-padding; - - height: 100%; - - background-color: $item-md-background; - - content: ""; - } - - &::before { - /* stylelint-disable property-disallowed-list */ - left: calc(-1 * #{$item-md-fill-outline-label-padding}); - /* stylelint-enable property-disallowed-list */ - } - - &::after { - /* stylelint-disable property-disallowed-list */ - right: calc(-1 * #{$item-md-fill-outline-label-padding}); - /* stylelint-enable property-disallowed-list */ - } -} - -:host-context(.item-fill-outline.ion-focused.item-has-start-slot).label-floating, -:host-context(.item-fill-outline.item-has-focus.item-has-start-slot).label-floating, -:host-context(.item-fill-outline.item-has-placeholder:not(.item-input).item-has-start-slot).label-floating, -:host-context(.item-fill-outline.item-has-value.item-has-start-slot).label-floating { - @include transform(translateX(#{$item-md-fill-outline-label-translate-x}), translateY(-6px), scale(.75)); -} - -:host-context(.item-fill-outline.ion-focused.item-has-start-slot).label-floating.label-rtl, -:host-context(.item-fill-outline.item-has-focus.item-has-start-slot).label-floating.label-rtl, -:host-context(.item-fill-outline.item-has-placeholder:not(.item-input).item-has-start-slot).label-floating.label-rtl, -:host-context(.item-fill-outline.item-has-value.item-has-start-slot).label-floating.label-rtl { - @include transform(translateX(calc(-1 * #{$item-md-fill-outline-label-translate-x})), translateY(-6px), scale(.75)); -} - :host-context(.ion-focused).label-stacked:not(.ion-color), :host-context(.ion-focused).label-floating:not(.ion-color), :host-context(.item-has-focus).label-stacked:not(.ion-color), @@ -125,23 +66,11 @@ color: #{current-color(contrast)}; } -:host-context(.item-fill-solid.ion-focused.ion-color).label-stacked:not(.ion-color), -:host-context(.item-fill-solid.ion-focused.ion-color).label-floating:not(.ion-color), -:host-context(.item-fill-outline.ion-focused.ion-color).label-stacked:not(.ion-color), -:host-context(.item-fill-outline.ion-focused.ion-color).label-floating:not(.ion-color), -:host-context(.item-fill-solid.item-has-focus.ion-color).label-stacked:not(.ion-color), -:host-context(.item-fill-solid.item-has-focus.ion-color).label-floating:not(.ion-color), -:host-context(.item-fill-outline.item-has-focus.ion-color).label-stacked:not(.ion-color), -:host-context(.item-fill-outline.item-has-focus.ion-color).label-floating:not(.ion-color) { - color: #{current-color(base)}; -} - :host-context(.ion-invalid.ion-touched).label-stacked:not(.ion-color), :host-context(.ion-invalid.ion-touched).label-floating:not(.ion-color) { color: var(--highlight-color-invalid); } - // MD Typography // -------------------------------------------------- diff --git a/core/src/components/label/label.scss b/core/src/components/label/label.scss index fc197ef171d..103fcdfad08 100644 --- a/core/src/components/label/label.scss +++ b/core/src/components/label/label.scss @@ -22,13 +22,6 @@ box-sizing: border-box; } -// TODO(FW-5289): remove -:host-context(.item-legacy) { - white-space: nowrap; - - overflow: hidden; -} - :host(.ion-color) { color: current-color(base); } diff --git a/core/src/components/select/select.md.scss b/core/src/components/select/select.md.scss index cac2cd3e939..50d46e0249c 100644 --- a/core/src/components/select/select.md.scss +++ b/core/src/components/select/select.md.scss @@ -98,31 +98,6 @@ color: var(--highlight-color); } -/** - * Adjust the arrow so that it appears in the middle - * of the item. If the item has fill="outline" then - * we should adjust the entire ion-select rather than - * just the outline so the selected value appears centered too. - */ -:host-context(.item-label-stacked) .select-icon, -:host-context(.item-label-floating:not(.item-fill-outline)) .select-icon, -:host-context(.item-label-floating.item-fill-outline) { - @include transform(translate3d(0, -9px, 0)); -} - -:host-context(.item-has-focus):host(:not(.has-expanded-icon)) .select-icon { - @include transform(rotate(180deg)); -} - -/** - * Ensure that the translation we did - * above is preserved when we rotate the select icon. - */ -:host-context(.item-has-focus.item-label-stacked):host(:not(.has-expanded-icon)) .select-icon, -:host-context(.item-has-focus.item-label-floating:not(.item-fill-outline)):host(:not(.has-expanded-icon)) .select-icon { - @include transform(rotate(180deg), translate3d(0, -9px, 0)); -} - // Select Shape Rounded // ---------------------------------------------------------------- diff --git a/core/src/components/textarea/textarea.ios.scss b/core/src/components/textarea/textarea.ios.scss index 1e3540035c0..9549217dbb1 100644 --- a/core/src/components/textarea/textarea.ios.scss +++ b/core/src/components/textarea/textarea.ios.scss @@ -16,13 +16,6 @@ font-size: $textarea-ios-font-size; } -:host-context(.item-label-stacked), -:host-context(.item-label-floating) { - --padding-top: 8px; - --padding-bottom: 8px; - --padding-start: 0px; -} - // Textarea - Disabled // ---------------------------------------------------------------- // The textarea, label, helper text, char counter and placeholder diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss index 6191cf6e195..c312e1e74ec 100644 --- a/core/src/components/textarea/textarea.scss +++ b/core/src/components/textarea/textarea.scss @@ -116,10 +116,6 @@ align-self: baseline; } -:host-context(ion-item:not(.item-label)) { - --padding-start: 0; -} - :host-context(ion-item)[slot="start"], :host-context(ion-item)[slot="end"] { width: auto; @@ -238,20 +234,6 @@ overflow: hidden; } -// 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; -} - // Textarea Wrapper // ---------------------------------------------------------------- diff --git a/core/src/utils/forms/form-controller.ts b/core/src/utils/forms/form-controller.ts deleted file mode 100644 index d905d5ecdf1..00000000000 --- a/core/src/utils/forms/form-controller.ts +++ /dev/null @@ -1,73 +0,0 @@ -import { findItemLabel } from '@utils/helpers'; - -type HTMLLegacyFormControlElement = HTMLElement & { label?: string; legacy?: boolean }; - -/** - * Creates a controller that tracks whether a form control is using the legacy or modern syntax. This should be removed when the legacy form control syntax is removed. - * - * @internal - * @prop el: The Ionic form component to reference - */ -export const createLegacyFormController = (el: HTMLLegacyFormControlElement): LegacyFormController => { - const controlEl: HTMLLegacyFormControlElement = el; - let legacyControl: boolean | undefined; - - const hasLegacyControl = () => { - if (legacyControl === undefined) { - /** - * Detect if developers are using the legacy form control syntax - * so a deprecation warning is logged. This warning can be disabled - * by either using the new `label` property or setting `aria-label` - * on the control. - * Alternatively, components that use a slot for the label - * can check to see if the component has slotted text - * in the light DOM. - */ - const hasLabelProp = controlEl.label !== undefined || hasLabelSlot(controlEl); - const hasAriaLabelAttribute = - controlEl.hasAttribute('aria-label') || - // Shadow DOM form controls cannot use aria-labelledby - (controlEl.hasAttribute('aria-labelledby') && controlEl.shadowRoot === null); - const legacyItemLabel = findItemLabel(controlEl); - - /** - * Developers can manually opt-out of the modern form markup - * by setting `legacy="true"` on components. - */ - legacyControl = - controlEl.legacy === true || (!hasLabelProp && !hasAriaLabelAttribute && legacyItemLabel !== null); - } - return legacyControl; - }; - - return { hasLegacyControl }; -}; - -export type LegacyFormController = { - hasLegacyControl: () => boolean; -}; - -const hasLabelSlot = (controlEl: HTMLElement) => { - /** - * Components that have a named label slot - * also have other slots, so we need to query for - * anything that is explicitly passed to slot="label" - */ - if (NAMED_LABEL_SLOT_COMPONENTS.includes(controlEl.tagName) && controlEl.querySelector('[slot="label"]') !== null) { - return true; - } - - /** - * Components that have an unnamed slot for the label - * have no other slots, so we can check the textContent - * of the element. - */ - if (UNNAMED_LABEL_SLOT_COMPONENTS.includes(controlEl.tagName) && controlEl.textContent !== '') { - return true; - } - - return false; -}; - -const NAMED_LABEL_SLOT_COMPONENTS = ['ION-INPUT', 'ION-TEXTAREA', 'ION-SELECT', 'ION-RANGE']; -const UNNAMED_LABEL_SLOT_COMPONENTS = ['ION-TOGGLE', 'ION-CHECKBOX', 'ION-RADIO']; diff --git a/core/src/utils/forms/index.ts b/core/src/utils/forms/index.ts index 5b870bd513a..d24bddfaa77 100644 --- a/core/src/utils/forms/index.ts +++ b/core/src/utils/forms/index.ts @@ -1,3 +1,2 @@ -export * from './form-controller'; export * from './notch-controller'; export * from './compare-with-utils'; diff --git a/core/src/utils/helpers.ts b/core/src/utils/helpers.ts index 81ffb4efa92..6b17098ae68 100644 --- a/core/src/utils/helpers.ts +++ b/core/src/utils/helpers.ts @@ -254,14 +254,6 @@ export const hasShadowDom = (el: HTMLElement) => { return !!el.shadowRoot && !!(el as any).attachShadow; }; -export const findItemLabel = (componentEl: HTMLElement): HTMLIonLabelElement | null => { - const itemEl = componentEl.closest('ion-item'); - if (itemEl) { - return itemEl.querySelector('ion-label'); - } - return null; -}; - export const focusVisibleElement = (el: HTMLElement) => { el.focus(); @@ -310,8 +302,7 @@ export const getAriaLabel = ( let labelId = labelledBy !== null && labelledBy.trim() !== '' ? labelledBy : inputId + '-lbl'; - let label = - labelledBy !== null && labelledBy.trim() !== '' ? document.getElementById(labelledBy) : findItemLabel(componentEl); + let label = labelledBy !== null && labelledBy.trim() !== '' ? document.getElementById(labelledBy) : null; if (label) { if (labelledBy === null) { diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index cd26d7360c7..a3c9f13db1a 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -1015,14 +1015,14 @@ where the user's interaction is typing. @ProxyCmp({ - inputs: ['button', 'color', 'counter', 'counterFormatter', 'detail', 'detailIcon', 'disabled', 'download', 'fill', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'target', 'type'] + inputs: ['button', 'color', 'detail', 'detailIcon', 'disabled', 'download', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'type'] }) @Component({ selector: 'ion-item', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['button', 'color', 'counter', 'counterFormatter', 'detail', 'detailIcon', 'disabled', 'download', 'fill', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'target', 'type'], + inputs: ['button', 'color', 'detail', 'detailIcon', 'disabled', 'download', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'type'], }) export class IonItem { protected el: HTMLElement; diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index b366f4a1a5b..a677f50007c 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -978,14 +978,14 @@ export declare interface IonInfiniteScrollContent extends Components.IonInfinite @ProxyCmp({ defineCustomElementFn: defineIonItem, - inputs: ['button', 'color', 'counter', 'counterFormatter', 'detail', 'detailIcon', 'disabled', 'download', 'fill', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'target', 'type'] + inputs: ['button', 'color', 'detail', 'detailIcon', 'disabled', 'download', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'type'] }) @Component({ selector: 'ion-item', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['button', 'color', 'counter', 'counterFormatter', 'detail', 'detailIcon', 'disabled', 'download', 'fill', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'target', 'type'], + inputs: ['button', 'color', 'detail', 'detailIcon', 'disabled', 'download', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'type'], standalone: true }) export class IonItem { diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 1960e1ffab0..acb0ac9f271 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -443,17 +443,13 @@ export const IonItem = /*@__PURE__*/ defineContainer('ion-item', de 'detailIcon', 'disabled', 'download', - 'fill', - 'shape', 'href', 'rel', 'lines', - 'counter', 'routerAnimation', 'routerDirection', 'target', - 'type', - 'counterFormatter' + 'type' ]);