Skip to content

fix(many): add correct scale to stacked labels #28163

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

Merged
merged 11 commits into from
Sep 13, 2023

Conversation

liamdebeasi
Copy link
Contributor

@liamdebeasi liamdebeasi commented Sep 13, 2023

Issue number: N/A


What is the current behavior?

The checkbox, radio, range, and toggle stacked labels do not scale which makes them look a bit out of place when used in a list with input/textarea/select stacked labels.

Notice that the stacked Radio label is much larger than the Input label when using the modern syntax. The legacy syntax is consistent where both the Input and Radio stacked labels are scaled.

image

What is the new behavior?

  • Added logic to checkbox, radio, range, and toggle so that the labels scale to 0.75
  • Added the appropriate transform origin for each alignment value
  • Refactored input/textarea/select to use the new global sass variable
  • Added max-width logic to the stacked labels so long labels don't run off the page

Does this introduce a breaking change?

  • Yes
  • No

Other information

@liamdebeasi liamdebeasi changed the base branch from main to feature-7.4 September 13, 2023 13:42
@github-actions github-actions bot added the package: core @ionic/core package label Sep 13, 2023
@liamdebeasi liamdebeasi changed the title Label stacked scale fix(many): add correct scale to stacked labels Sep 13, 2023
@liamdebeasi liamdebeasi marked this pull request as ready for review September 13, 2023 15:25
@liamdebeasi liamdebeasi requested a review from a team September 13, 2023 15:25
Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

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

LGTM

@liamdebeasi liamdebeasi merged commit 8cb8786 into feature-7.4 Sep 13, 2023
@liamdebeasi liamdebeasi deleted the label-stacked-scale branch September 13, 2023 17:46
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.

4 participants