feat(progress-bar): update styles to iOS 17 specs (#28759)

Issue number: Internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Ionic's progress bar implementation deviates from the appearance of a
progress bar on iOS 17.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- 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

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->

### Breaking Changes

- `--buffer-background` has been removed in favor of `--background`. 

## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

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 <[email protected]>
Co-authored-by: Liam DeBeasi <[email protected]>

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)
 
 <h2 id="version-8x-browser-platform-support">Browser and Platform Support</h2>
 
@@ -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. 
+  - 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. 
+
+
+<h4 id="version-8x-progress-bar">Progress bar</h4>
+
+- The `--buffer-background` CSS variable has been removed. Use `--background` instead.

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

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};
 }

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;

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)};
+}

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;

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%);
 }

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 (
       <Host
         role="progressbar"
@@ -70,6 +72,7 @@ export class ProgressBar implements ComponentInterface {
           [`progress-bar-${type}`]: true,
           'progress-paused': paused,
           'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed,
+          'progress-bar-solid': progressSolid,
         })}
       >
         {type === 'indeterminate' ? renderIndeterminate() : renderProgress(value, buffer)}

core/src/components/progress-bar/test/basic/index.html

@@ -15,11 +15,11 @@
 
     <style>
       .custom-bar-background {
-        --buffer-background: red;
+        --background: red;
       }
 
       .no-bar-background {
-        --buffer-background: none;
+        --background: none;
       }
 
       ion-content ion-progress-bar {

core/src/components/progress-bar/test/buffer/index.html

@@ -14,14 +14,6 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
 
     <style>
-      .custom-bar-background {
-        --buffer-background: red;
-      }
-
-      .no-bar-background {
-        --buffer-background: none;
-      }
-
       ion-content ion-progress-bar {
         margin: 10px 0;
       }

core/src/components/progress-bar/test/determinate/index.html

@@ -15,11 +15,11 @@
 
     <style>
       .custom-bar-background {
-        --buffer-background: red;
+        --background: red;
       }
 
       .no-bar-background {
-        --buffer-background: none;
+        --background: none;
       }
 
       ion-content ion-progress-bar {