fix(form-controls): adjust flex properties inside of an item (#29328)

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:
f0da2c1727/core/src/components/select/select.scss (L84)

| Before | After |
| --- | --- |
|
![before](https://github.com/ionic-team/ionic-framework/assets/6577830/ca32e2a7-ee10-427e-b060-3c554e9e7fec)
|
![after](https://github.com/ionic-team/ionic-framework/assets/6577830/8be2d918-0caa-4b7a-8fc7-a57456307a84)
|

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

---------

Co-authored-by: ionitron <hi@ionicframework.com>
This commit is contained in:
Brandy Carney
2024-04-12 11:36:05 -04:00
committed by GitHub
parent f0da2c1727
commit 9b59138011
15 changed files with 6 additions and 0 deletions

View File

@ -38,6 +38,8 @@
}
:host(.in-item) {
flex: 1 1 0;
width: 100%;
height: 100%;
}