diff --git a/BREAKING.md b/BREAKING.md index 49120d9c2f..5291db672f 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -21,7 +21,6 @@ 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) @@ -138,6 +137,7 @@ Developers who had previously chosen dynamic font scaling by activating it in th Developers who want to disable dynamic font scaling can set `--ion-dynamic-font: initial;` in their global stylesheets. However, this is not recommended because it may introduce accessibility challenges for users who depend on enlarged font sizes. For more information on the dynamic font, refer to the [Dynamic Font Scaling documentation](https://ionicframework.com/docs/layout/dynamic-font-scaling). +

Components

Button

@@ -163,6 +163,13 @@ For more information on the dynamic font, refer to the [Dynamic Font Scaling doc + background: red; } ``` + +

Input

+ +- `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). +

Item

- The `helper` slot has been removed. Developers should use the `helperText` property on `ion-input` and `ion-textarea`. @@ -170,16 +177,52 @@ For more information on the dynamic font, refer to the [Dynamic Font Scaling doc - 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`. +- Item no longer automatically delegates focus to the first focusable element. While most developers should not need to make any changes to account for this update, usages of `ion-item` with interactive elements such as form controls (inputs, textareas, etc) should be evaluated to verify that interactions still work as expected. -

Input

+
CSS variables
-- `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). +The following deprecated CSS variables have been removed: `--highlight-height`, `--highlight-color-focused`, `--highlight-color-valid`, and `--highlight-color-invalid`. These variables were used on the bottom border highlight of an item when the form control inside of that item was focused. The form control syntax was [simplified in v7](https://ionic.io/blog/ionic-7-is-here#simplified-form-control-syntax) so that inputs, selects, and textareas would no longer be required to be used inside of an item. -

Item

+If you have not yet migrated to the modern form control syntax, migration guides for each of the form controls that added a highlight to item can be found below: +- [Input migration documentation](https://ionicframework.com/docs/api/input#migrating-from-legacy-input-syntax) +- [Select migration documentation](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax) +- [Textarea migration documentation](https://ionicframework.com/docs/api/textarea#migrating-from-legacy-textarea-syntax) -- Item no longer automatically delegates focus to the first focusable element. While most developers should not need to make any changes to account for this update, usages of `ion-item` with interactive elements such as form controls (inputs, textareas, etc) should be evaluated to verify that interactions still work as expected. +Once all form controls are using the modern syntax, the same variables can be used to customize them from the form control itself: + +| Name | Description | +| ----------------------------| ----------------------------------------| +| `--highlight-color-focused` | The color of the highlight when focused | +| `--highlight-color-invalid` | The color of the highlight when invalid | +| `--highlight-color-valid` | The color of the highlight when valid | +| `--highlight-height` | The height of the highlight indicator | + +The following styles for item: + +```css +ion-item { + --highlight-color-focused: purple; + --highlight-color-valid: blue; + --highlight-color-invalid: orange; + --highlight-height: 6px; +} +``` + +will instead be applied on the form controls: + +```css +ion-input, +ion-textarea, +ion-select { + --highlight-color-focused: purple; + --highlight-color-valid: blue; + --highlight-color-invalid: orange; + --highlight-height: 6px; +} +``` + +> [!NOTE] +> The input and textarea components are scoped, which means they will automatically scope their CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. Targeting the `ion-input` or `ion-textarea` for customization will not work; therefore we recommend adding a class and customizing it that way.

Modal

diff --git a/core/api.txt b/core/api.txt index edf2582e43..7add74f680 100644 --- a/core/api.txt +++ b/core/api.txt @@ -639,10 +639,6 @@ ion-item,css-prop,--color-hover ion-item,css-prop,--detail-icon-color ion-item,css-prop,--detail-icon-font-size ion-item,css-prop,--detail-icon-opacity -ion-item,css-prop,--highlight-color-focused -ion-item,css-prop,--highlight-color-invalid -ion-item,css-prop,--highlight-color-valid -ion-item,css-prop,--highlight-height ion-item,css-prop,--inner-border-width ion-item,css-prop,--inner-box-shadow ion-item,css-prop,--inner-padding-bottom diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss index 27af3194d9..54d897251a 100644 --- a/core/src/components/item/item.ios.scss +++ b/core/src/components/item/item.ios.scss @@ -29,10 +29,6 @@ --background-hover-opacity: .04; --border-color: #{$item-ios-border-bottom-color}; --color: #{$item-ios-color}; - --highlight-height: 0px; - --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}; font-size: $item-ios-font-size; } @@ -63,24 +59,15 @@ // iOS Item Lines // -------------------------------------------------- -// Default input items have an inset border -:host(.item-interactive) { - --show-full-highlight: 0; - --show-inset-highlight: 1; -} // Full lines - apply the border to the item // Inset lines - apply the border to the item inner :host(.item-lines-full) { --border-width: #{0px 0px $item-ios-border-bottom-width 0px}; - --show-full-highlight: 1; - --show-inset-highlight: 0; } :host(.item-lines-inset) { --inner-border-width: #{0px 0px $item-ios-border-bottom-width 0px}; - --show-full-highlight: 0; - --show-inset-highlight: 1; } // Full lines - remove the border from the item inner (inset list items) @@ -89,28 +76,13 @@ :host(.item-lines-inset), :host(.item-lines-none) { --border-width: 0px; - --show-full-highlight: 0; } :host(.item-lines-full), :host(.item-lines-none) { --inner-border-width: 0px; - --show-inset-highlight: 0; -} - -.item-highlight, -.item-inner-highlight { - transition: none; } -:host(.item-has-focus) .item-inner-highlight, -:host(.item-has-focus) .item-highlight { - border-top: none; - border-right: none; - border-left: none; -} - - // iOS Item Slots // -------------------------------------------------- diff --git a/core/src/components/item/item.ios.vars.scss b/core/src/components/item/item.ios.vars.scss index 95997ab1f5..4ebbb24f0a 100644 --- a/core/src/components/item/item.ios.vars.scss +++ b/core/src/components/item/item.ios.vars.scss @@ -57,15 +57,6 @@ $item-ios-border-bottom-style: solid !default; /// @prop - Border bottom color for the item when lines are displayed $item-ios-border-bottom-color: $item-ios-border-color !default; -/// @prop - Color of the item input highlight -$item-ios-input-highlight-color: ion-color(primary, base) !default; - -/// @prop - Color of the item input highlight when valid -$item-ios-input-highlight-color-valid: ion-color(success, base) !default; - -/// @prop - Color of the item input highlight when invalid -$item-ios-input-highlight-color-invalid: ion-color(danger, base) !default; - // Item Slots // -------------------------------------------------- diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss index 3dd0ca0157..1083192e7c 100644 --- a/core/src/components/item/item.md.scss +++ b/core/src/components/item/item.md.scss @@ -21,10 +21,6 @@ --padding-start: #{$item-md-padding-start}; --inner-padding-end: #{$item-md-padding-end}; --inner-border-width: #{0 0 $item-md-border-bottom-width 0}; - --highlight-height: 1px; - --highlight-color-focused: #{$item-md-input-highlight-color}; - --highlight-color-valid: #{$item-md-input-highlight-color-valid}; - --highlight-color-invalid: #{$item-md-input-highlight-color-invalid}; font-size: dynamic-font($item-md-font-size); font-weight: normal; @@ -41,10 +37,6 @@ } } -:host(.item-has-focus) .item-native { - caret-color: var(--highlight-background); -} - // Material Design Item Lines // -------------------------------------------------- @@ -52,22 +44,16 @@ :host(.item-interactive) { --border-width: #{0 0 $item-md-border-bottom-width 0}; --inner-border-width: 0; - --show-full-highlight: 1; - --show-inset-highlight: 0; } // Full lines - apply the border to the item // Inset lines - apply the border to the item inner :host(.item-lines-full) { --border-width: #{0 0 $item-md-border-bottom-width 0}; - --show-full-highlight: 1; - --show-inset-highlight: 0; } :host(.item-lines-inset) { --inner-border-width: #{0 0 $item-md-border-bottom-width 0}; - --show-full-highlight: 0; - --show-inset-highlight: 1; } // Full lines - remove the border from the item inner (inset list items) @@ -76,13 +62,11 @@ :host(.item-lines-inset), :host(.item-lines-none) { --border-width: 0; - --show-full-highlight: 0; } :host(.item-lines-full), :host(.item-lines-none) { --inner-border-width: 0; - --show-inset-highlight: 0; } // Material Design Multi-line Item @@ -247,14 +231,3 @@ :host(.item-has-focus:not(.ion-color)) ::slotted(.label-floating) { color: $label-md-text-color-focused; } - -// Material Design Inputs: Highlight Color -// -------------------------------------------------- - -:host(.ion-color) { - --highlight-color-focused: #{current-color(contrast)}; -} - -:host(.item-label-color) { - --highlight-color-focused: #{current-color(base)}; -} diff --git a/core/src/components/item/item.md.vars.scss b/core/src/components/item/item.md.vars.scss index 3f21bda935..d16d30300d 100644 --- a/core/src/components/item/item.md.vars.scss +++ b/core/src/components/item/item.md.vars.scss @@ -42,18 +42,6 @@ $item-md-border-bottom-style: solid !default; /// @prop - Border bottom color for the item when lines are displayed $item-md-border-bottom-color: $item-md-border-color !default; -// Item Input -// -------------------------------------------------- - -/// @prop - Color of the item input highlight -$item-md-input-highlight-color: ion-color(primary, base) !default; - -/// @prop - Color of the item input highlight when valid -$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; - // Item Label // -------------------------------------------------- diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss index f8421c5dc3..b17649265d 100644 --- a/core/src/components/item/item.scss +++ b/core/src/components/item/item.scss @@ -2,7 +2,6 @@ // Item // -------------------------------------------------- -// TODO: FW-4955 :host { /** @@ -46,10 +45,6 @@ * * @prop --ripple-color: Color of the item ripple effect * - * @prop --highlight-height: The height of the highlight on the item. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax. - * @prop --highlight-color-focused: The color of the highlight on the item when focused. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax. - * @prop --highlight-color-valid: The color of the highlight on the item when valid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax. - * @prop --highlight-color-invalid: The color of the highlight on the item when invalid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax. */ --border-radius: 0px; --border-width: 0px; @@ -64,8 +59,6 @@ --inner-padding-start: 0px; --inner-padding-end: 0px; --inner-box-shadow: none; - --show-full-highlight: 0; - --show-inset-highlight: 0; --detail-icon-color: initial; --detail-icon-font-size: 1.25em; --detail-icon-opacity: 0.25; @@ -109,7 +102,6 @@ border-color: current-color(shade); } - // Item: Activated // -------------------------------------------------- @@ -127,7 +119,6 @@ color: current-color(contrast); } - // Item: Focused // -------------------------------------------------- @@ -149,7 +140,6 @@ } } - // Item: Hover // -------------------------------------------------- @@ -181,7 +171,6 @@ cursor: pointer; } - // Item: Disabled // -------------------------------------------------- @@ -192,12 +181,10 @@ :host(.item-disabled) { cursor: default; - opacity: .3; + opacity: 0.3; pointer-events: none; } - - // Native Item // -------------------------------------------------- @@ -257,14 +244,14 @@ z-index: -1; } -button, a { +button, +a { cursor: pointer; user-select: none; -webkit-user-drag: none; } - // Inner Item // -------------------------------------------------- @@ -328,7 +315,6 @@ button, a { opacity: var(--detail-icon-opacity); } - // Item Slots // -------------------------------------------------- @@ -398,98 +384,6 @@ button, a { flex-direction: column; } -// Item Input Highlight -// -------------------------------------------------- - -.item-highlight, -.item-inner-highlight { - @include position(0, 0, 0, 0); - @include border-radius(inherit); - position: absolute; - - width: 100%; - - height: 100%; - - transform: scaleX(0); - - transition: transform 200ms, border-bottom-width 200ms; - - z-index: 2; - - box-sizing: border-box; - pointer-events: none; -} - -// Item Input Focused -// -------------------------------------------------- - -:host(.item-interactive.ion-focused), -:host(.item-interactive.item-has-focus), -:host(.item-interactive.ion-touched.ion-invalid) { - // If the item has a full border and highlight is enabled, show the full item highlight - --full-highlight-height: #{calc(var(--highlight-height) * var(--show-full-highlight))}; - - // If the item has an inset border and highlight is enabled, show the inset item highlight - --inset-highlight-height: #{calc(var(--highlight-height) * var(--show-inset-highlight))}; -} - -:host(.ion-focused) .item-highlight, -:host(.ion-focused) .item-inner-highlight, -:host(.item-has-focus) .item-highlight, -:host(.item-has-focus) .item-inner-highlight { - transform: scaleX(1); - - border-style: var(--border-style); - border-color: var(--highlight-background); -} - -:host(.ion-focused) .item-highlight, -:host(.item-has-focus) .item-highlight { - border-width: var(--full-highlight-height); - - opacity: var(--show-full-highlight); -} - -:host(.ion-focused) .item-inner-highlight, -:host(.item-has-focus) .item-inner-highlight { - border-bottom-width: var(--inset-highlight-height); - - opacity: var(--show-inset-highlight); -} - -:host(.ion-focused) .item-inner-highlight, -:host(.ion-focused) .item-highlight, -:host(.item-has-focus) .item-inner-highlight, -:host(.item-has-focus) .item-highlight { - border-top: none; - border-right: none; - border-left: none; -} - - -// Item Input Focus -// -------------------------------------------------- - -:host(.item-interactive.ion-focused), -:host(.item-interactive.item-has-focus) { - --highlight-background: var(--highlight-color-focused); -} - -// Item Input Valid -// -------------------------------------------------- - -:host(.item-interactive.ion-valid) { - --highlight-background: var(--highlight-color-valid); -} - -// Item Input Invalid -// -------------------------------------------------- - -:host(.item-interactive.ion-invalid) { - --highlight-background: var(--highlight-color-invalid); -} - // Item w/ Multiple Inputs // -------------------------------------------------- // Multiple inputs in an item should have the input @@ -508,7 +402,6 @@ button, a { align-items: stretch; } - // Item Reorder // -------------------------------------------------- @@ -516,7 +409,6 @@ button, a { @include margin(0, null); } - // Item Button Ripple effect // -------------------------------------------------- @@ -524,12 +416,3 @@ ion-ripple-effect { color: var(--ripple-color); } -// Item: Reduced Motion -// -------------------------------------------------- - -@media (prefers-reduced-motion: reduce) { - .item-highlight, - .item-inner-highlight { - transition: none; - } -} diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index 0cc0870cde..6356c7ddca 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -374,10 +374,8 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac flip-rtl={detailIcon === chevronForward} > )} -
{canActivate && mode === 'md' && } -
); diff --git a/core/src/components/item/test/basic/index.html b/core/src/components/item/test/basic/index.html index f9d6c77bb7..49c5efb5f8 100644 --- a/core/src/components/item/test/basic/index.html +++ b/core/src/components/item/test/basic/index.html @@ -137,7 +137,6 @@