diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss index 99fd5f6f22..7a74dddd5b 100644 --- a/core/src/components/checkbox/checkbox.scss +++ b/core/src/components/checkbox/checkbox.scss @@ -42,6 +42,11 @@ 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 :host(.legacy-checkbox) { width: var(--size); diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index 3178e20a45..224b9ddf60 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -87,6 +87,11 @@ --padding-start: 0; } +:host-context(ion-item)[slot="start"], +:host-context(ion-item)[slot="end"] { + width: auto; +} + // TODO FW-2764 Remove this :host(.legacy-input.ion-color) { color: current-color(base); diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png index e8fdec0b91..cf1075a53a 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png index 7d1cb28d0b..de8c07f904 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/index.html b/core/src/components/item/test/slotted-inputs/index.html new file mode 100644 index 0000000000..d9a67f3356 --- /dev/null +++ b/core/src/components/item/test/slotted-inputs/index.html @@ -0,0 +1,66 @@ + + + + + Item - Slotted Inputs + + + + + + + + + + + + + Slotted Inputs + + + + + + + Start + Checkbox + End + + + Start + Radio + End + + + Start + Toggle + End + + +
Start
 + Range +
End
 + + + + Input + + + + + Textarea + + + + + Select + + + + + + + diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts b/core/src/components/item/test/slotted-inputs/item.e2e.ts new file mode 100644 index 0000000000..71e80d72b3 --- /dev/null +++ b/core/src/components/item/test/slotted-inputs/item.e2e.ts @@ -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`); + }); +}); diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c97e224fb7 Binary files /dev/null and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..cfb8bb9de9 Binary files /dev/null and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..68b409abc1 Binary files /dev/null and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e95384f5e1 Binary files /dev/null and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..3703f15f49 Binary files /dev/null and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..039385734d Binary files /dev/null and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..b7705db536 Binary files /dev/null and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..09e4225563 Binary files /dev/null and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a95dd8f4e1 Binary files /dev/null and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3cdf993eb4 Binary files /dev/null and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..43f0a5c237 Binary files /dev/null and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..d284dee35f Binary files /dev/null and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio/radio.scss b/core/src/components/radio/radio.scss index d303c18034..aa33ae6ef8 100644 --- a/core/src/components/radio/radio.scss +++ b/core/src/components/radio/radio.scss @@ -74,6 +74,11 @@ input { width: 100%; } +:host(.in-item[slot="start"]:not(.legacy-radio)), +:host(.in-item[slot="end"]:not(.legacy-radio)) { + width: auto; +} + // Radio Wrapper // -------------------------------------------------- .radio-wrapper { diff --git a/core/src/components/range/range.scss b/core/src/components/range/range.scss index da7a0e22b5..fcac4ed634 100644 --- a/core/src/components/range/range.scss +++ b/core/src/components/range/range.scss @@ -168,6 +168,11 @@ width: 100%; } +:host(.in-item[slot="start"]), +:host(.in-item[slot="end"]) { + width: auto; +} + :host(.in-item) ::slotted(ion-label) { align-self: center; } diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss index 6b52c14b39..f6086698a8 100644 --- a/core/src/components/select/select.scss +++ b/core/src/components/select/select.scss @@ -93,6 +93,12 @@ 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 { color: var(--placeholder-color); diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss index 0e614e8148..5681b486ee 100644 --- a/core/src/components/textarea/textarea.scss +++ b/core/src/components/textarea/textarea.scss @@ -103,6 +103,11 @@ --padding-start: 0; } +:host-context(ion-item)[slot="start"], +:host-context(ion-item)[slot="end"] { + width: auto; +} + // Native Textarea // -------------------------------------------------- diff --git a/core/src/components/toggle/test/enable-on-off-labels/index.html b/core/src/components/toggle/test/enable-on-off-labels/index.html index 88ff925da9..4e18d63498 100644 --- a/core/src/components/toggle/test/enable-on-off-labels/index.html +++ b/core/src/components/toggle/test/enable-on-off-labels/index.html @@ -188,67 +188,67 @@ - Unchecked + Unchecked - Checked + Checked - Secondary Unchecked + Secondary Unchecked - Secondary Checked + Secondary Checked - Success Unchecked + Success Unchecked - Success Checked + Success Checked - Danger Unchecked + Danger Unchecked - Danger Checked + Danger Checked - Tertiary Unchecked + Tertiary Unchecked - Tertiary Checked + Tertiary Checked - Light Unchecked + Light Unchecked - Light Checked + Light Checked - Medium Unchecked + Medium Unchecked - Medium Checked + Medium Checked - Dark Unchecked + Dark Unchecked - Dark Checked + Dark Checked diff --git a/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 b/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 index f39166ced7..02d7394c39 100644 Binary files a/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 and b/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 differ diff --git a/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 b/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 index 1356ece915..dca4650ce3 100644 Binary files a/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 and b/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 differ diff --git a/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 b/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 index bfad3c5e60..f742750f71 100644 Binary files a/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 and b/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 differ diff --git a/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 b/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 index e1fb6fa631..d6e3bee0da 100644 Binary files a/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 and b/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 differ diff --git a/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 b/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 index d5334b169a..337b523e06 100644 Binary files a/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 and b/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 differ diff --git a/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 b/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 index 29df853204..390d5953ea 100644 Binary files a/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 and b/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 differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Chrome-linux.png index abc223cc4d..24ba3947c3 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Firefox-linux.png index cd92503e76..a3a3cde925 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Safari-linux.png index d1608c8e88..c7cc28c48f 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Chrome-linux.png index 89995934f8..bcf250c5c8 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Firefox-linux.png index d16b2dc3aa..e1a70a96fb 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Safari-linux.png index d081811d9f..71899213b9 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.scss index 709a5a14d9..d1967a22f8 100644 --- a/core/src/components/toggle/toggle.scss +++ b/core/src/components/toggle/toggle.scss @@ -43,6 +43,11 @@ height: 100%; } +:host(.in-item[slot="start"]:not(.legacy-toggle)), +:host(.in-item[slot="end"]:not(.legacy-toggle)) { + width: auto; +} + :host(.legacy-toggle) { contain: content; }