diff --git a/BREAKING.md b/BREAKING.md index 016cad3483..9288951b47 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -12,43 +12,16 @@ This is a comprehensive list of the breaking changes introduced in the major ver ## Version 7.x +- [Browser and Platform Support](#version-7x-browser-platform-support) - [Components](#version-7x-components) - [Overlays](#version-7x-overlays) - - [Virtual Scroll](#version-7x-virtual-scroll) + - [Range](#version-7x-range) - [Slides](#version-7x-slides) -- [Browser and Platform Support](#version-7x-browser-platform-support) + - [Virtual Scroll](#version-7x-virtual-scroll) - [Utilities](#version-7x-utilities) - [hidden attribute](#version-7x-hidden-attribute) -

Components

- -

Overlays

- -Ionic now listens on the `keydown` event instead of the `keyup` event when determining when to dismiss overlays via the "Escape" key. Any applications that were listening on `keyup` to suppress this behavior should listen on `keydown` instead. - -

Virtual Scroll

- -`ion-virtual-scroll` has been removed from Ionic. - -Developers using the component will need to migrate to a virtual scroll solution provided by their framework: - -- [Angular](https://ionicframework.com/docs/angular/virtual-scroll) -- [React](https://ionicframework.com/docs/react/virtual-scroll) -- [Vue](https://ionicframework.com/docs/vue/virtual-scroll) - -Any references to the virtual scroll types from `@ionic/core` have been removed. Please remove or replace these types: `Cell`, `VirtualNode`, `CellType`, `NodeChange`, `HeaderFn`, `ItemHeightFn`, `FooterHeightFn`, `ItemRenderFn` and `DomRenderFn`. - -

Slides

- -`ion-slides`, `ion-slide`, and the `IonicSwiper` plugin have been removed from Ionic. - -Developers using these components will need to migrate to using Swiper.js directly, optionally using the `IonicSlides` plugin. Guides for migration and usage are linked below: - -- [Angular](https://ionicframework.com/docs/angular/slides) -- [React](https://ionicframework.com/docs/react/slides) -- [Vue](https://ionicframework.com/docs/vue/slides) - -

Browser and Platform Support

+

Browser and Platform Support

This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 7. @@ -75,6 +48,53 @@ This section details the desktop browser, JavaScript framework, and mobile platf | iOS | 14+ | | Android | 5.1+ with Chromium 79+ | +

Components

+ +

Overlays

+ +Ionic now listens on the `keydown` event instead of the `keyup` event when determining when to dismiss overlays via the "Escape" key. Any applications that were listening on `keyup` to suppress this behavior should listen on `keydown` instead. + +

Range

+ +Range is updated to align with the design specification for supported modes. + +**Design tokens** + + +iOS: + +|Token|Previous Value|New Value| +|-----|--------------|---------| +|`--bar-border-radius`|`0px`|`$range-ios-bar-border-radius` (`2px` default)| +|`--knob-size`|`28px`|`$range-ios-knob-width` (`26px` default)| +|`$range-ios-bar-height`|`2px`|`4px`| +|`$range-ios-bar-background-color`|`rgba(var(--ion-text-color-rgb, 0, 0, 0), .1)`|`var(--ion-color-step-900, #e6e6e6)`| +|`$range-ios-knob-box-shadow`|`0 3px 1px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .13), 0 0 0 1px rgba(0, 0, 0, .02)`|`0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12)`| +|`$range-ios-knob-width`|`28px`|`26px`| + + +

Slides

+ +`ion-slides`, `ion-slide`, and the `IonicSwiper` plugin have been removed from Ionic. + +Developers using these components will need to migrate to using Swiper.js directly, optionally using the `IonicSlides` plugin. Guides for migration and usage are linked below: + +- [Angular](https://ionicframework.com/docs/angular/slides) +- [React](https://ionicframework.com/docs/react/slides) +- [Vue](https://ionicframework.com/docs/vue/slides) + +

Virtual Scroll

+ +`ion-virtual-scroll` has been removed from Ionic. + +Developers using the component will need to migrate to a virtual scroll solution provided by their framework: + +- [Angular](https://ionicframework.com/docs/angular/virtual-scroll) +- [React](https://ionicframework.com/docs/react/virtual-scroll) +- [Vue](https://ionicframework.com/docs/vue/virtual-scroll) + +Any references to the virtual scroll types from `@ionic/core` have been removed. Please remove or replace these types: `Cell`, `VirtualNode`, `CellType`, `NodeChange`, `HeaderFn`, `ItemHeightFn`, `FooterHeightFn`, `ItemRenderFn` and `DomRenderFn`. +

Utilities

`hidden` attribute

diff --git a/core/src/components/item/test/standalone/item.e2e.ts-snapshots/item-standalone-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/standalone/item.e2e.ts-snapshots/item-standalone-diff-ios-rtl-Mobile-Safari-linux.png index 98c6015e72..45a5ad65db 100644 Binary files a/core/src/components/item/test/standalone/item.e2e.ts-snapshots/item-standalone-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/standalone/item.e2e.ts-snapshots/item-standalone-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/range.ios.scss b/core/src/components/range/range.ios.scss index abb5a278e1..d0149df52e 100644 --- a/core/src/components/range/range.ios.scss +++ b/core/src/components/range/range.ios.scss @@ -8,11 +8,11 @@ --knob-border-radius: 50%; --knob-background: #{$range-ios-knob-background-color}; --knob-box-shadow: #{$range-ios-knob-box-shadow}; - --knob-size: 28px; + --knob-size: #{$range-ios-knob-width}; --bar-height: #{$range-ios-bar-height}; --bar-background: #{$range-ios-bar-background-color}; --bar-background-active: #{ion-color(primary, base)}; - --bar-border-radius: 0; + --bar-border-radius: #{$range-ios-bar-border-radius}; --height: #{$range-ios-slider-height}; @include padding($range-ios-padding-vertical, $range-ios-padding-horizontal); @@ -36,6 +36,9 @@ } .range-bar-active { + @include border-radius(0); + @include margin(null, calc(-1 * $range-ios-tick-width * 0.5), null, calc(-1 * $range-ios-tick-width * 0.5)); + bottom: 0; width: auto; @@ -48,7 +51,7 @@ @include border-radius($range-ios-tick-border-radius); position: absolute; - top: ($range-ios-hit-height * 0.5) - ($range-ios-tick-height * 0.5) + ($range-ios-bar-height * 0.5); + top: ($range-ios-hit-height * 0.5) - ($range-ios-tick-height * 0.5); width: $range-ios-tick-width; height: $range-ios-tick-height; diff --git a/core/src/components/range/range.ios.vars.scss b/core/src/components/range/range.ios.vars.scss index d3e5dd28f9..91067981d0 100644 --- a/core/src/components/range/range.ios.vars.scss +++ b/core/src/components/range/range.ios.vars.scss @@ -4,76 +4,79 @@ // -------------------------------------------------- /// @prop - Padding top/bottom of the range -$range-ios-padding-vertical: 8px !default; +$range-ios-padding-vertical: 8px !default; /// @prop - Padding start/end of the range -$range-ios-padding-horizontal: 16px !default; +$range-ios-padding-horizontal: 16px !default; /// @prop - Height of the range slider -$range-ios-slider-height: 42px !default; +$range-ios-slider-height: 42px !default; /// @prop - Width of the area that will select the range knob -$range-ios-hit-width: 42px !default; +$range-ios-hit-width: 42px !default; /// @prop - Height of the area that will select the range knob -$range-ios-hit-height: $range-ios-slider-height !default; +$range-ios-hit-height: $range-ios-slider-height !default; /// @prop - Height of the range bar -$range-ios-bar-height: 2px !default; +$range-ios-bar-height: 4px !default; /// @prop - Background of the range bar -$range-ios-bar-background-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), .1) !default; +$range-ios-bar-background-color: var(--ion-color-step-900, #e6e6e6) !default; /// @prop - Background of the active range bar -$range-ios-bar-active-background-color: current-color(base) !default; +$range-ios-bar-active-background-color: current-color(base) !default; + +/// @prop - Border radius of the range bar +$range-ios-bar-border-radius: 2px !default; /// @prop - Width of the range knob -$range-ios-knob-width: 28px !default; +$range-ios-knob-width: 26px !default; /// @prop - Height of the range knob -$range-ios-knob-height: $range-ios-knob-width !default; +$range-ios-knob-height: $range-ios-knob-width !default; /// @prop - Box shadow of the range knob -$range-ios-knob-box-shadow: 0 3px 1px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .13), 0 0 0 1px rgba(0, 0, 0, .02) !default; +$range-ios-knob-box-shadow: 0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12) !default; /// @prop - Border radius of the range knob -$range-ios-knob-border-radius: 50% !default; +$range-ios-knob-border-radius: 50% !default; /// @prop - Background of the range knob -$range-ios-knob-background-color: #ffffff !default; +$range-ios-knob-background-color: #ffffff !default; /// @prop - Width of the range tick -$range-ios-tick-width: $range-ios-bar-height !default; +$range-ios-tick-width: $range-ios-bar-height !default; /// @prop - Height of the range tick -$range-ios-tick-height: 8px !default; +$range-ios-tick-height: 8px !default; /// @prop - Border radius of the range tick -$range-ios-tick-border-radius: 0 !default; +$range-ios-tick-border-radius: 0 !default; /// @prop - Background of the range tick -$range-ios-tick-background-color: $range-ios-bar-background-color !default; +$range-ios-tick-background-color: $range-ios-bar-background-color !default; /// @prop - Background of the active range tick -$range-ios-tick-active-background-color: $range-ios-bar-active-background-color !default; +$range-ios-tick-active-background-color: $range-ios-bar-active-background-color !default; /// @prop - Background of the range pin -$range-ios-pin-background-color: transparent !default; +$range-ios-pin-background-color: transparent !default; /// @prop - Color of the range pin -$range-ios-pin-color: $text-color !default; +$range-ios-pin-color: $text-color !default; /// @prop - Font size of the range pin -$range-ios-pin-font-size: 12px !default; +$range-ios-pin-font-size: 12px !default; /// @prop - Padding top of the range pin -$range-ios-pin-padding-top: 8px !default; +$range-ios-pin-padding-top: 8px !default; /// @prop - Padding end of the range pin -$range-ios-pin-padding-end: $range-ios-pin-padding-top !default; +$range-ios-pin-padding-end: $range-ios-pin-padding-top !default; /// @prop - Padding bottom of the range pin -$range-ios-pin-padding-bottom: $range-ios-pin-padding-top !default; +$range-ios-pin-padding-bottom: $range-ios-pin-padding-top !default; /// @prop - Padding start of the range pin -$range-ios-pin-padding-start: $range-ios-pin-padding-end !default; +$range-ios-pin-padding-start: $range-ios-pin-padding-end !default; diff --git a/core/src/components/range/range.scss b/core/src/components/range/range.scss index 7c147f459d..a12919a83e 100644 --- a/core/src/components/range/range.scss +++ b/core/src/components/range/range.scss @@ -93,7 +93,7 @@ } } -.range-bar { +.range-bar-container { @include border-radius(var(--bar-border-radius)); @include position(calc((var(--height) - var(--bar-height)) / 2), null, null, 0); @@ -107,6 +107,17 @@ width: 100%; height: var(--bar-height); + overflow: hidden; +} + +.range-bar { + @include border-radius(var(--bar-border-radius)); + + position: absolute; + + width: 100%; + height: var(--bar-height); + background: var(--bar-background); pointer-events: none; diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx index f97ce9c5d1..5b57929abb 100644 --- a/core/src/components/range/range.tsx +++ b/core/src/components/range/range.tsx @@ -613,8 +613,10 @@ export class Range implements ComponentInterface { /> ))} -