feat(checkbox): display as block when justify or alignment properties are defined #29783
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
…box wrapper" This reverts commit 7365fb3.
| font-size: 310%; | ||
| } | ||
| </style> | ||
| <ion-checkbox justify="start" checked>Checked</ion-checkbox> |
There was a problem hiding this comment.
The justify property does not need to be on this test as all it does is force the Checkbox to be 100% width when it isn't necessary.
| flex-grow: 1; | ||
|
|
||
| align-items: center; | ||
| justify-content: space-between; |
There was a problem hiding this comment.
This is required so that the user can still do the following, with a space between the label and checkbox:
<ion-checkbox style="width: 100%">Label</ion-checkbox>| test('should render a start justification with label in the start position', async ({ page }) => { | ||
| await page.setContent( | ||
| ` | ||
| <ion-checkbox label-placement="start" justify="start" style="width: 200px">Label</ion-checkbox> |
There was a problem hiding this comment.
An explicit width is no longer needed since using justify sets display: block which takes up the full-width of its container.
|
|
||
| const checkbox = page.locator('ion-checkbox'); | ||
| await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-long-label`)); | ||
| await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-start-justify-start-long-label`)); |
There was a problem hiding this comment.
Renamed this test to match the other prefixes in this describe block.
There was a problem hiding this comment.
These width differences are expected since removing the explicit width: 200px makes the checkbox take up the full width with justify defined.
There was a problem hiding this comment.
These width differences are expected since removing the explicit width: 200px makes the checkbox take up the inline width without justify defined.
There was a problem hiding this comment.
This was renamed to checkbox-label-start-justify-start-long-label
4f6b241 to
c620298
Compare
Issue number: internal
What is the current behavior?
When adding the
justifyoralignmentproperty to anion-checkboxit does not change the design because the checkbox is displayed inline.What is the new behavior?
displayproperty toblockwhen thejustifyoralignmentproperty is set.justify-contentstyle tospace-betweenso that a checkbox withwidth: 100%set withoutjustifyoralignmentset will still have the same defaultlabele2e test to remove the explicit width as setting the property will make them full-widthlabele2e test of labels that do not havejustifyset but usewidth: 100%to ensure they are working as expected without itDoes this introduce a breaking change?
Other information