fix(form-controls): adjust flex properties inside of an item #29328
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
commented
Apr 11, 2024
There was a problem hiding this comment.
I don't know if this behavior is desired, but it is how select works.
averyjohnston
approved these changes
Apr 12, 2024
There was a problem hiding this comment.
Seems reasonable to me. I was about to request we add a dedicated test for this, but since the difference is only one pixel, I don't think a screenshot would be too helpful; even if it's regressed in the future, the difference would likely fly under the radar.
Plus, we have tests that render these components in items already, so we can at least be confident we're not breaking something else.
2 tasks
github-merge-queue bot
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>
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>
# for free
to join this conversation on GitHub.
Already have an account?
# 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 #29319
What is the current behavior?
Icons (not slotted) alongside a checkbox, toggle, or radio in an item using the modern syntax cause the icon to shrink in width.
What is the new behavior?
Allow the checkbox, toggle, and radio to shrink to accommodate the icon. This matches the select behavior:
ionic-framework/core/src/components/select/select.scss
Line 84 in f0da2c1
Does this introduce a breaking change?