javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(item): prevent slotted form controls from taking whole width of item (#26897)

Browse Source
This commit is contained in:
Amanda Johnston
2023-03-06 11:34:52 -06:00
committed by GitHub
parent 7bc22f2bbf
commit 78f5d960cf
36 changed files with 130 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
core/src/components/checkbox/checkbox.scss
View File

@ -42,6 +42,11 @@
height: 100%; height: 100%;
} }
:host(.in-item[slot="start"]:not(.legacy-checkbox)),
:host(.in-item[slot="end"]:not(.legacy-checkbox)) {
width: auto;
}
// TODO(FW-3100): remove this // TODO(FW-3100): remove this
:host(.legacy-checkbox) { :host(.legacy-checkbox) {
width: var(--size); width: var(--size);

5
core/src/components/input/input.scss
View File

@ -87,6 +87,11 @@
--padding-start: 0; --padding-start: 0;
} }
:host-context(ion-item)[slot="start"],
:host-context(ion-item)[slot="end"] {
width: auto;
}
// TODO FW-2764 Remove this // TODO FW-2764 Remove this
:host(.legacy-input.ion-color) { :host(.legacy-input.ion-color) {
color: current-color(base); color: current-color(base);

BIN
core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 75 KiB

After

Width:  |  Height:  |  Size: 75 KiB

BIN
core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 75 KiB

After

Width:  |  Height:  |  Size: 75 KiB

66
core/src/components/item/test/slotted-inputs/index.html Normal file
View File

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Item - Slotted Inputs</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Slotted Inputs</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content">
<ion-list>
<ion-item>
<ion-checkbox slot="start">Start</ion-checkbox>
Checkbox
<ion-checkbox slot="end">End</ion-checkbox>
</ion-item>
<ion-item>
<ion-radio slot="start">Start</ion-radio>
Radio
<ion-radio slot="end">End</ion-radio>
</ion-item>
<ion-item>
<ion-toggle slot="start">Start</ion-toggle>
Toggle
<ion-toggle slot="end">End</ion-toggle>
</ion-item>
<ion-item>
<ion-range slot="start"><div slot="label">Start</div></ion-range>
Range
<ion-range slot="end"><div slot="label">End</div></ion-range>
</ion-item>
<ion-item>
<ion-input label="Start" slot="start"></ion-input>
Input
<ion-input label="End" slot="end"></ion-input>
</ion-item>
<ion-item>
<ion-textarea label="Start" slot="start"></ion-textarea>
Textarea
<ion-textarea label="End" slot="end"></ion-textarea>
</ion-item>
<ion-item>
<ion-select label="Start" slot="start"></ion-select>
Select
<ion-select label="End" slot="end"></ion-select>
</ion-item>
</ion-list>
</ion-content>
</ion-app>
</body>
</html>

12
core/src/components/item/test/slotted-inputs/item.e2e.ts Normal file
View File

@ -0,0 +1,12 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
test.describe('item: slotted inputs', () => {
test('should not have visual regressions', async ({ page }) => {
await page.goto(`/src/components/item/test/slotted-inputs`);
await page.setIonViewport();
await expect(page).toHaveScreenshot(`item-slotted-inputs-${page.getSnapshotSettings()}.png`);
});
});

BIN
core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

5
core/src/components/radio/radio.scss
View File

@ -74,6 +74,11 @@ input {
width: 100%; width: 100%;
} }
:host(.in-item[slot="start"]:not(.legacy-radio)),
:host(.in-item[slot="end"]:not(.legacy-radio)) {
width: auto;
}
// Radio Wrapper // Radio Wrapper
// -------------------------------------------------- // --------------------------------------------------
.radio-wrapper { .radio-wrapper {

5
core/src/components/range/range.scss
View File

@ -168,6 +168,11 @@
width: 100%; width: 100%;
} }
:host(.in-item[slot="start"]),
:host(.in-item[slot="end"]) {
width: auto;
}
:host(.in-item) ::slotted(ion-label) { :host(.in-item) ::slotted(ion-label) {
align-self: center; align-self: center;
} }

6
core/src/components/select/select.scss
View File

@ -93,6 +93,12 @@
border: 2px solid #5e9ed6; border: 2px solid #5e9ed6;
} }
// TODO FW-3194 - Remove :not(.legacy-select) piece
:host(.in-item[slot="start"]:not(.legacy-select)),
:host(.in-item[slot="end"]:not(.legacy-select)) {
width: auto;
}
.select-placeholder { .select-placeholder {
color: var(--placeholder-color); color: var(--placeholder-color);

5
core/src/components/textarea/textarea.scss
View File

@ -103,6 +103,11 @@
--padding-start: 0; --padding-start: 0;
} }
:host-context(ion-item)[slot="start"],
:host-context(ion-item)[slot="end"] {
width: auto;
}
// Native Textarea // Native Textarea
// -------------------------------------------------- // --------------------------------------------------

32
core/src/components/toggle/test/enable-on-off-labels/index.html
View File

@ -188,67 +188,67 @@
<ion-content> <ion-content>
<ion-list> <ion-list>
<ion-item> <ion-item>
<ion-toggle slot="end" enable-on-off-labels="true">Unchecked</ion-toggle> <ion-toggle enable-on-off-labels="true">Unchecked</ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-toggle slot="end" enable-on-off-labels="true" checked>Checked</ion-toggle> <ion-toggle enable-on-off-labels="true" checked>Checked</ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-toggle slot="end" color="secondary" enable-on-off-labels="true">Secondary Unchecked</ion-toggle> <ion-toggle color="secondary" enable-on-off-labels="true">Secondary Unchecked</ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-toggle slot="end" color="secondary" enable-on-off-labels="true" checked>Secondary Checked</ion-toggle> <ion-toggle color="secondary" enable-on-off-labels="true" checked>Secondary Checked</ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-toggle slot="end" color="success" enable-on-off-labels="true">Success Unchecked</ion-toggle> <ion-toggle color="success" enable-on-off-labels="true">Success Unchecked</ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-toggle slot="end" color="success" enable-on-off-labels="true" checked>Success Checked</ion-toggle> <ion-toggle color="success" enable-on-off-labels="true" checked>Success Checked</ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-toggle slot="end" color="danger" enable-on-off-labels="true">Danger Unchecked</ion-toggle> <ion-toggle color="danger" enable-on-off-labels="true">Danger Unchecked</ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-toggle slot="end" color="danger" enable-on-off-labels="true" checked>Danger Checked</ion-toggle> <ion-toggle color="danger" enable-on-off-labels="true" checked>Danger Checked</ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-toggle slot="end" color="tertiary" enable-on-off-labels="true">Tertiary Unchecked</ion-toggle> <ion-toggle color="tertiary" enable-on-off-labels="true">Tertiary Unchecked</ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-toggle slot="end" color="tertiary" enable-on-off-labels="true" checked>Tertiary Checked</ion-toggle> <ion-toggle color="tertiary" enable-on-off-labels="true" checked>Tertiary Checked</ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-toggle slot="end" color="light" enable-on-off-labels="true">Light Unchecked</ion-toggle> <ion-toggle color="light" enable-on-off-labels="true">Light Unchecked</ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-toggle slot="end" color="light" enable-on-off-labels="true" checked>Light Checked</ion-toggle> <ion-toggle color="light" enable-on-off-labels="true" checked>Light Checked</ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-toggle slot="end" color="medium" enable-on-off-labels="true">Medium Unchecked</ion-toggle> <ion-toggle color="medium" enable-on-off-labels="true">Medium Unchecked</ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-toggle slot="end" color="medium" enable-on-off-labels="true" checked>Medium Checked</ion-toggle> <ion-toggle color="medium" enable-on-off-labels="true" checked>Medium Checked</ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-toggle slot="end" color="dark" enable-on-off-labels="true">Dark Unchecked</ion-toggle> <ion-toggle color="dark" enable-on-off-labels="true">Dark Unchecked</ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-toggle slot="end" color="dark" enable-on-off-labels="true" checked>Dark Checked</ion-toggle> <ion-toggle color="dark" enable-on-off-labels="true" checked>Dark Checked</ion-toggle>
</ion-item> </ion-item>
</ion-list> </ion-list>
</ion-content> </ion-content>

BIN
core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Chrome-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 52 KiB

BIN
core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Firefox-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 66 KiB

BIN
core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Safari-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 47 KiB

BIN
core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Chrome-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 53 KiB

BIN
core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Firefox-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 67 KiB

After

Width:  |  Height:  |  Size: 66 KiB

BIN
core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Safari-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 47 KiB

BIN
core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Chrome-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

BIN
core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Firefox-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 61 KiB

After

Width:  |  Height:  |  Size: 60 KiB

BIN
core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Safari-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

BIN
core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Chrome-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

BIN
core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Firefox-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 61 KiB

After

Width:  |  Height:  |  Size: 61 KiB

BIN
core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Safari-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

5
core/src/components/toggle/toggle.scss
View File

@ -43,6 +43,11 @@
height: 100%; height: 100%;
} }
:host(.in-item[slot="start"]:not(.legacy-toggle)),
:host(.in-item[slot="end"]:not(.legacy-toggle)) {
width: auto;
}
:host(.legacy-toggle) { :host(.legacy-toggle) {
contain: content; contain: content;
} }