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(checkbox): update styles to iOS 17 specs #28729

Merged
merged 19 commits into from
Dec 20, 2023
Merged

feat(checkbox): update styles to iOS 17 specs #28729

merged 19 commits into from
Dec 20, 2023

Conversation

thetaPC
Copy link
Contributor

@thetaPC thetaPC commented Dec 18, 2023

Issue number: internal


What is the current behavior?

iOS checkbox does not align with the styles on iOS 17.

What is the new behavior?

iOS checkbox aligns with the styles on iOS 17.

  • height of the checkbox has decreased
  • border width of the unchecked checkbox has increased
  • added a basic test to check for visual regressions

Does this introduce a breaking change?

  • Yes
  • No

Other information

Screenshot 2023-12-19 at 1 44 41 PM

Checkboxes in the screenshot look pixelated b/c I had to zoom in to get a better visualization.

  • Border radius from the design doc has been confirmed to be correct.
  • Width from the design doc has been confirmed to be correct.

I noticed that the checkbox width was also different. Based on some comparisons, 1.5px was the most accurate.

@github-actions github-actions bot added the package: core @ionic/core package label Dec 18, 2023
Comment on lines +291 to +294
$alert-ios-checkbox-icon-top: calc($alert-ios-checkbox-size / 8) !default;

/// @prop - Start of the icon in the checkbox alert
$alert-ios-checkbox-icon-start: calc($alert-ios-checkbox-size / 3 + 1px) !default;
$alert-ios-checkbox-icon-start: calc($alert-ios-checkbox-size / 3) !default;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

These changes were made to align the icon to the center.

BREAKING.md Outdated Show resolved Hide resolved
@thetaPC thetaPC marked this pull request as ready for review December 19, 2023 17:57
@thetaPC thetaPC marked this pull request as draft December 19, 2023 20:47
@thetaPC
Copy link
Contributor Author

thetaPC commented Dec 19, 2023

Switching to draft to compare values with native.

@thetaPC thetaPC marked this pull request as ready for review December 19, 2023 22:11
Copy link
Member

@brandyscarney brandyscarney left a comment

Choose a reason for hiding this comment

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

This looks good! I compared against v7 and ios 17 and these changes definitely get us closer. Great work!

Ionic v7 iOS 17 Ionic v8 (proposed changes)
Ionic v7 iOS 17 Ionic (Proposed)

@@ -16,6 +16,9 @@

// Size
--size: #{$checkbox-ios-icon-size};

// Checkmark width
--checkmark-width: #{$checkbox-ios-icon-checkmark-width};
Copy link
Member

Choose a reason for hiding this comment

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

We can delete

--checkmark-width: 1;

from checkbox.scss since it is defined in both ios and md now.

@@ -20,12 +20,10 @@
* @prop --transition: Transition of the checkbox icon
*
* @prop --checkmark-color: Color of the checkbox checkmark when checked
* @prop --checkmark-width: Stroke width of the checkbox checkmark
Copy link
Member

@brandyscarney brandyscarney Dec 20, 2023

Choose a reason for hiding this comment

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

Sorry I did not mean to remove the @prop here. This will remove it from the documentation. I just meant the value below.

@thetaPC thetaPC merged commit 45907aa into FW-4845 Dec 20, 2023
44 checks passed
@thetaPC thetaPC deleted the FW-5733 branch December 20, 2023 23:43
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.

3 participants