fix(many): do not grow slotted checkboxes, radios, selects and toggles #29501
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
brandyscarney
changed the title
brandyscarney
changed the title
sean-perkins
pushed a commit
that referenced
this pull request
May 15, 2024
#29501) Issue number: resolves #29423 --------- ## What is the current behavior? I fixed a bug where icon was collapsing its width when next to a checkbox, radio or toggle to match the styles of select in #29328. This caused a regression for checkboxes, radios, and toggles when slotted inside of an item. Our test coverage for this was not great, as the slotted inputs test in item had so many elements that it was not apparent that this bug was introduced. In addition, the select itself presented the same issue before my PR and this is a regression from the v7 behavior. See the following Codepens to see the regression: - [Ionic v7](https://codepen.io/brandyscarney/pen/jOoPzoL) - [Ionic v8](https://codepen.io/brandyscarney/pen/KKLpoLX) ## What is the new behavior? - Updates the checkbox, radio, select, and toggle to reset the flex property when slotted. - Adds test coverage for the previous fix I did in #29328 where icons were collapsing their width next to checkboxes, radios and toggles. This was reproducible with a div and easier to see in a test so I used a div with a background instead of an icon. - Adds better test coverage for this fix which separates each component (checkbox, radio, select, toggle) into their own screenshot test to make sure the width is shrinking or expanding properly based on where it is located in an item. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information | Before fix 9b59138 | After | | ---| ---| |  |  | <table width="100%"> <tr align="center"> <td width="50%"><b>Before regression fix</b></td> <td width="50%"><b>After</b></td> </tr> <tr> <td width="50%"><img alt="before-regression-fix" src="https://github.com/ionic-team/ionic-framework/assets/6577830/bb1aea84-6c83-4fbe-96ad-855c1c9cca95"></td> <td width="50%"><img alt="after-regression-fix" src="https://github.com/ionic-team/ionic-framework/assets/6577830/655dab88-55a9-4961-a7fb-2a3233aa0004"></td> </tr> </table>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue number: resolves #29423
What is the current behavior?
I fixed a bug where icon was collapsing its width when next to a checkbox, radio or toggle to match the styles of select in #29328. This caused a regression for checkboxes, radios, and toggles when slotted inside of an item. Our test coverage for this was not great, as the slotted inputs test in item had so many elements that it was not apparent that this bug was introduced. In addition, the select itself presented the same issue before my PR and this is a regression from the v7 behavior. See the following Codepens to see the regression:
What is the new behavior?
Does this introduce a breaking change?
Other information