From f65235ac473e0c1a110613fc9c95cdc0783a8738 Mon Sep 17 00:00:00 2001 From: Sean Perkins <13732623+sean-perkins@users.noreply.github.com> Date: Fri, 5 Jan 2024 17:16:27 -0500 Subject: [PATCH] feat(progress-bar): update styles to iOS 17 specs (#28759) Issue number: Internal --------- ## What is the current behavior? Ionic's progress bar implementation deviates from the appearance of a progress bar on iOS 17. ## What is the new behavior? - Progress bar is updated to have rounded corners (around the container). - Increases progress bar height to `4px` - Solid progress bars (progress bars with a buffer value of `1`) will have a consistent background appearance. - Buffer progress bars will continue to have the colored background appearance as they do in v7. ## Does this introduce a breaking change? - [x] Yes - [ ] No ### Breaking Changes - `--buffer-background` has been removed in favor of `--background`. ## Other information Accomplishing rounded caps for the inner progress with Ionic's scale transformation was not viable. To maintain 60fps animations for the progress, rounded corners were applied to the container. --------- Co-authored-by: ionitron Co-authored-by: Liam DeBeasi --- BREAKING.md | 8 +++++++- core/api.txt | 1 - .../progress-bar/progress-bar.ios.scss | 16 +++++++++++++++- .../progress-bar/progress-bar.ios.vars.scss | 8 ++++++++ .../progress-bar/progress-bar.md.scss | 8 +++++++- .../progress-bar/progress-bar.md.vars.scss | 5 +++++ .../components/progress-bar/progress-bar.scss | 10 ++-------- .../components/progress-bar/progress-bar.tsx | 3 +++ .../progress-bar/test/basic/index.html | 4 ++-- ...-bar-basic-ios-ltr-Mobile-Chrome-linux.png | Bin 51875 -> 52323 bytes ...bar-basic-ios-ltr-Mobile-Firefox-linux.png | Bin 60798 -> 61546 bytes ...-bar-basic-ios-ltr-Mobile-Safari-linux.png | Bin 45430 -> 45877 bytes ...-bar-basic-ios-rtl-Mobile-Chrome-linux.png | Bin 51792 -> 52237 bytes ...bar-basic-ios-rtl-Mobile-Firefox-linux.png | Bin 61992 -> 62805 bytes ...-bar-basic-ios-rtl-Mobile-Safari-linux.png | Bin 45328 -> 45785 bytes .../progress-bar/test/buffer/index.html | 8 -------- .../progress-bar/test/determinate/index.html | 4 ++-- 17 files changed, 51 insertions(+), 24 deletions(-) create mode 100644 core/src/components/progress-bar/progress-bar.ios.vars.scss create mode 100644 core/src/components/progress-bar/progress-bar.md.vars.scss diff --git a/BREAKING.md b/BREAKING.md index 9f98d2ef308..2199fa7f355 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -19,6 +19,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver - [Content](#version-8x-content) - [Datetime](#version-8x-datetime) - [Picker](#version-8x-picker) + - [Progress bar](#version-8x-progress-bar)

Browser and Platform Support

@@ -70,4 +71,9 @@ This section details the desktop browser, JavaScript framework, and mobile platf - `ion-picker` and `ion-picker-column` have been renamed to `ion-picker-legacy` and `ion-picker-legacy-column`, respectively. This change was made to accommodate the new inline picker component while allowing developers to continue to use the legacy picker during this migration period. - Only the component names have been changed. Usages such as `ion-picker` or `IonPicker` should be changed to `ion-picker-legacy` and `IonPickerLegacy`, respectively. - - Non-component usages such as `pickerController` or `useIonPicker` remain unchanged. The new picker displays inline with your page content and does not have equivalents for these non-component usages. \ No newline at end of file + - Non-component usages such as `pickerController` or `useIonPicker` remain unchanged. The new picker displays inline with your page content and does not have equivalents for these non-component usages. + + +

Progress bar

+ +- The `--buffer-background` CSS variable has been removed. Use `--background` instead. \ No newline at end of file diff --git a/core/api.txt b/core/api.txt index a242f018894..1f919983773 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1028,7 +1028,6 @@ ion-progress-bar,prop,reversed,boolean,false,false,false ion-progress-bar,prop,type,"determinate" | "indeterminate",'determinate',false,false ion-progress-bar,prop,value,number,0,false,false ion-progress-bar,css-prop,--background -ion-progress-bar,css-prop,--buffer-background ion-progress-bar,css-prop,--progress-background ion-progress-bar,part,progress ion-progress-bar,part,stream diff --git a/core/src/components/progress-bar/progress-bar.ios.scss b/core/src/components/progress-bar/progress-bar.ios.scss index a7d1951bda8..5d8eb578d1a 100644 --- a/core/src/components/progress-bar/progress-bar.ios.scss +++ b/core/src/components/progress-bar/progress-bar.ios.scss @@ -1,8 +1,22 @@ @import "./progress-bar"; +@import "./progress-bar.ios.vars"; // iOS Progress bar // -------------------------------------------------- :host { - height: 3px; + @include border-radius($progress-bar-ios-border-radius); + + height: $progress-bar-ios-height; +} + +:host(.progress-bar-solid) { + /** + * On iOS the unfilled portion of the progress bar + * is always a consistent background color. We + * only apply this style when the progress bar is + * solid (with a buffer value of 1). This maintains + * the custom Ionic appearance for a buffered progress bar. + */ + --background: #{$background-color-step-100}; } diff --git a/core/src/components/progress-bar/progress-bar.ios.vars.scss b/core/src/components/progress-bar/progress-bar.ios.vars.scss new file mode 100644 index 00000000000..f38bba637c1 --- /dev/null +++ b/core/src/components/progress-bar/progress-bar.ios.vars.scss @@ -0,0 +1,8 @@ +// iOS Progress bar +// -------------------------------------------------- + +/// @prop - Height of the progress bar +$progress-bar-ios-height: 4px !default; + +/// @prop - Border radius of the progress bar container +$progress-bar-ios-border-radius: 9999px !default; diff --git a/core/src/components/progress-bar/progress-bar.md.scss b/core/src/components/progress-bar/progress-bar.md.scss index b681530b2e5..17becac33b4 100644 --- a/core/src/components/progress-bar/progress-bar.md.scss +++ b/core/src/components/progress-bar/progress-bar.md.scss @@ -1,8 +1,14 @@ @import "./progress-bar"; +@import "./progress-bar.md.vars"; // Material Design Progress bar // -------------------------------------------------- :host { - height: 4px; + height: $progress-bar-md-height; } + + +:host(.ion-color) .progress-buffer-bar { + background: #{current-color(base, 0.3)}; +} \ No newline at end of file diff --git a/core/src/components/progress-bar/progress-bar.md.vars.scss b/core/src/components/progress-bar/progress-bar.md.vars.scss new file mode 100644 index 00000000000..feb8de2bb01 --- /dev/null +++ b/core/src/components/progress-bar/progress-bar.md.vars.scss @@ -0,0 +1,5 @@ +// MD Progress bar +// -------------------------------------------------- + +/// @prop - Height of the progress bar +$progress-bar-md-height: 4px !default; diff --git a/core/src/components/progress-bar/progress-bar.scss b/core/src/components/progress-bar/progress-bar.scss index 0752c79d17a..9385c03e78d 100644 --- a/core/src/components/progress-bar/progress-bar.scss +++ b/core/src/components/progress-bar/progress-bar.scss @@ -8,11 +8,9 @@ /** * @prop --background: Background of the progress track, or the buffer bar if `buffer` is set * @prop --progress-background: Background of the progress bar representing the current value - * @prop --buffer-background: DEPRECATED, use `--background` instead */ --background: #{ion-color(primary, base, 0.3)}; --progress-background: #{ion-color(primary, base)}; - --buffer-background: var(--background); display: block; @@ -75,7 +73,7 @@ } .progress-buffer-bar { - background: var(--buffer-background); + background: var(--background); z-index: 1; } @@ -123,7 +121,7 @@ // ------------------------------------------------------------------------ .buffer-circles { - background-image: radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%); + background-image: radial-gradient(ellipse at center, var(--background) 0%, var(--background) 30%, transparent 30%); /* stylelint-disable property-disallowed-list */ background-repeat: repeat-x; @@ -158,10 +156,6 @@ // Progress Bar: Color // ------------------------------------------------------------------------ -:host(.ion-color) .progress-buffer-bar { - background: #{current-color(base, 0.3)}; -} - :host(.ion-color) .buffer-circles { background-image: radial-gradient(ellipse at center, #{current-color(base, 0.3)} 0%, #{current-color(base, 0.3)} 30%, transparent 30%); } diff --git a/core/src/components/progress-bar/progress-bar.tsx b/core/src/components/progress-bar/progress-bar.tsx index 9753a50656f..22e2f00d790 100644 --- a/core/src/components/progress-bar/progress-bar.tsx +++ b/core/src/components/progress-bar/progress-bar.tsx @@ -59,6 +59,8 @@ export class ProgressBar implements ComponentInterface { const { color, type, reversed, value, buffer } = this; const paused = config.getBoolean('_testing'); const mode = getIonMode(this); + // If the progress is displayed as a solid bar. + const progressSolid = buffer === 1; return ( {type === 'indeterminate' ? renderIndeterminate() : renderProgress(value, buffer)} diff --git a/core/src/components/progress-bar/test/basic/index.html b/core/src/components/progress-bar/test/basic/index.html index 56e4f734348..31ab53d9137 100644 --- a/core/src/components/progress-bar/test/basic/index.html +++ b/core/src/components/progress-bar/test/basic/index.html @@ -15,11 +15,11 @@