feat(checkbox): display as block when justify or alignment properties are defined (#29783)
- Change the checkbox's `display` property to `block` when the `justify` or `alignment` property is set. - Set the default `justify-content` style to `space-between` so that a checkbox with `width: 100%` set without `justify` or `alignment` set will still have the same default - Modifies the `label` e2e test to remove the explicit width as setting the property will make them full-width - Adds two examples to the `label` e2e test of labels that do not have `justify` set but use `width: 100%` to ensure they are working as expected without it
Brandy Carney
@ -36,7 +36,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
|
||||
font-size: 310%;
|
||||
}
|
||||
</style>
|
||||
<ion-checkbox justify="start" checked>Checked</ion-checkbox>
|
||||
<ion-checkbox checked>Checked</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
@ -15,7 +15,6 @@
|
||||
</head>
|
||||
<style>
|
||||
ion-checkbox {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@ -23,6 +22,10 @@
|
||||
transform: scale(0.5);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
hr {
|
||||
background: #ddd;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<ion-app>
|
||||
@ -33,15 +36,19 @@
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding">
|
||||
<div id="checkboxes">
|
||||
<ion-checkbox justify="start">Unchecked</ion-checkbox>
|
||||
<ion-checkbox justify="start" checked>Checked</ion-checkbox>
|
||||
<ion-checkbox justify="start" disabled>Disabled</ion-checkbox>
|
||||
<ion-checkbox justify="start" disabled checked>Disabled, Checked</ion-checkbox>
|
||||
<ion-checkbox justify="start" checked style="--checkmark-width: 7">Checkmark Width</ion-checkbox>
|
||||
<ion-checkbox justify="start" checked class="checkbox-part">Checkmark Shadow Part</ion-checkbox>
|
||||
<ion-checkbox justify="start" checked style="--size: 100px">--size</ion-checkbox>
|
||||
</div>
|
||||
<ion-checkbox>Unchecked</ion-checkbox><br />
|
||||
<ion-checkbox checked>Checked</ion-checkbox><br />
|
||||
<ion-checkbox disabled>Disabled</ion-checkbox><br />
|
||||
<ion-checkbox disabled checked>Disabled, Checked</ion-checkbox><br />
|
||||
<ion-checkbox checked style="--checkmark-width: 7">Checkmark Width</ion-checkbox><br />
|
||||
<ion-checkbox checked class="checkbox-part">Checkmark Shadow Part</ion-checkbox><br />
|
||||
<ion-checkbox checked style="--size: 100px">--size</ion-checkbox><br />
|
||||
|
||||
<hr />
|
||||
|
||||
<ion-checkbox checked>Default width</ion-checkbox><br />
|
||||
<ion-checkbox checked style="width: 200px">Specified width</ion-checkbox><br />
|
||||
<ion-checkbox checked style="width: 100%">Full-width</ion-checkbox><br />
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
@ -2,20 +2,50 @@ import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
/**
|
||||
* By default ion-checkbox only takes up
|
||||
* as much space as it needs. Justification is
|
||||
* used for when the checkbox takes up the full
|
||||
* line (such as in an ion-item). As a result,
|
||||
* we set the width of the checkbox so we can
|
||||
* see the justification results.
|
||||
* By default ion-checkbox only takes up as much space
|
||||
* as it needs. Justification is used for when the
|
||||
* checkbox should take up the full line (such as in an
|
||||
* ion-item or when it has 100% width).
|
||||
*/
|
||||
configs().forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('checkbox: label'), () => {
|
||||
test.describe('checkbox: default placement', () => {
|
||||
test('should render a space between justification with a full width checkbox', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox style="width: 100%">
|
||||
Label
|
||||
</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const checkbox = page.locator('ion-checkbox');
|
||||
await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-full-width`));
|
||||
});
|
||||
|
||||
test('should truncate long labels with ellipses', async ({ page }) => {
|
||||
// Checkbox needs to be full width to truncate properly
|
||||
// because it is not inside of an `ion-app` in tests
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox style="width: 100%">
|
||||
Long Label Long Label Long Label Long Label Long Label Long Label
|
||||
</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const checkbox = page.locator('ion-checkbox');
|
||||
await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-long-label`));
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('checkbox: start placement', () => {
|
||||
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>
|
||||
<ion-checkbox label-placement="start" justify="start">Label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@ -27,7 +57,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render an end justification with label in the start position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="start" justify="end" style="width: 200px">Label</ion-checkbox>
|
||||
<ion-checkbox label-placement="start" justify="end">Label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@ -39,7 +69,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render a space between justification with label in the start position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="start" justify="space-between" style="width: 200px">Label</ion-checkbox>
|
||||
<ion-checkbox label-placement="start" justify="space-between">Label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@ -51,7 +81,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should truncate long labels with ellipses', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="start" justify="start" style="width: 200px">
|
||||
<ion-checkbox label-placement="start" justify="start">
|
||||
Long Label Long Label Long Label Long Label Long Label Long Label
|
||||
</ion-checkbox>
|
||||
`,
|
||||
@ -59,7 +89,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
);
|
||||
|
||||
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`));
|
||||
});
|
||||
});
|
||||
|
||||
@ -67,7 +97,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render a start justification with label in the end position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="end" justify="start" style="width: 200px">Label</ion-checkbox>
|
||||
<ion-checkbox label-placement="end" justify="start">Label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@ -79,7 +109,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render an end justification with label in the end position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="end" justify="end" style="width: 200px">Label</ion-checkbox>
|
||||
<ion-checkbox label-placement="end" justify="end">Label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@ -91,7 +121,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render a space between justification with label in the end position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="end" justify="space-between" style="width: 200px">Label</ion-checkbox>
|
||||
<ion-checkbox label-placement="end" justify="space-between">Label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@ -105,7 +135,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render a start justification with label in the fixed position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="fixed" justify="start" style="width: 200px">This is a long label</ion-checkbox>
|
||||
<ion-checkbox label-placement="fixed" justify="start">This is a long label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@ -117,7 +147,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render an end justification with label in the fixed position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="fixed" justify="end" style="width: 200px">This is a long label</ion-checkbox>
|
||||
<ion-checkbox label-placement="fixed" justify="end">This is a long label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@ -129,7 +159,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should render a space between justification with label in the fixed position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="fixed" justify="space-between" style="width: 200px">This is a long label</ion-checkbox>
|
||||
<ion-checkbox label-placement="fixed" justify="space-between">This is a long label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@ -143,7 +173,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should align the label to the start of the container in the stacked position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="stacked" alignment="start" style="width: 200px">This is a long label</ion-checkbox>
|
||||
<ion-checkbox label-placement="stacked" alignment="start">This is a long label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@ -155,7 +185,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
test('should align the label to the center of the container in the stacked position', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="stacked" alignment="center" style="width: 200px">This is a long label</ion-checkbox>
|
||||
<ion-checkbox label-placement="stacked" alignment="center">This is a long label</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
@ -172,7 +202,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config, screen
|
||||
test('long label should truncate', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox label-placement="stacked" alignment="start" style="width: 200px">Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications</ion-checkbox>
|
||||
<ion-checkbox label-placement="stacked" alignment="start">Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 992 B |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 956 B After Width: | Height: | Size: 986 B |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1012 B |
|
Before Width: | Height: | Size: 998 B After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 977 B After Width: | Height: | Size: 1000 B |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 988 B |
|
Before Width: | Height: | Size: 1016 B After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 948 B After Width: | Height: | Size: 976 B |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 988 B |
|
Before Width: | Height: | Size: 989 B After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 946 B After Width: | Height: | Size: 969 B |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1008 B |
|
Before Width: | Height: | Size: 989 B After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 962 B After Width: | Height: | Size: 994 B |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 980 B |
|
Before Width: | Height: | Size: 982 B After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 939 B After Width: | Height: | Size: 964 B |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 988 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 969 B |
|
After Width: | Height: | Size: 988 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 976 B |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.7 KiB |