Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 18 commits into from Jan 5, 2024
Merged

Conversation

sean-perkins
Copy link
Contributor

@sean-perkins sean-perkins commented Dec 22, 2023

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?

  • 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.

@github-actions github-actions bot added the package: core @ionic/core package label Dec 22, 2023
@sean-perkins sean-perkins marked this pull request as ready for review December 22, 2023 18:25
@sean-perkins sean-perkins requested a review from a team as a code owner December 22, 2023 18:25
@sean-perkins sean-perkins requested review from liamdebeasi and removed request for a team December 22, 2023 18:25
@mapsandapps mapsandapps self-requested a review December 27, 2023 14:19
Copy link
Contributor

@mapsandapps mapsandapps left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good 👍🏻

Comment on lines -17 to -23
.custom-bar-background {
--buffer-background: red;
}

.no-bar-background {
--buffer-background: none;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These classes were not applied anywhere in the file

@sean-perkins sean-perkins merged commit f65235a into FW-4845 Jan 5, 2024
44 checks passed
@sean-perkins sean-perkins deleted the sp/FW-5742 branch January 5, 2024 22:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants