diff --git a/BREAKING.md b/BREAKING.md
index 9f98d2ef30..2199fa7f35 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)
@@ -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 a242f01889..1f91998377 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 a7d1951bda..5d8eb578d1 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 0000000000..f38bba637c
--- /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 b681530b2e..17becac33b 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 0000000000..feb8de2bb0
--- /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 0752c79d17..9385c03e78 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 9753a50656..22e2f00d79 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 56e4f73434..31ab53d913 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 @@