javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(item): wrap elements and label contents when the font size increases or the elements do not fit (#28146)

Browse Source 
1) Wraps the label text and other content in an item when there is not enough room for everything to fit, instead of truncating the label with an ellipsis. Does not apply to items containing legacy inputs.
2) Passes the legacy property up to item from checkbox, input, radio, range, select, textarea and toggle. Item adds classes for all of these and does not wrap its contents if that class exists. If a developer is using a legacy input without the legacy property on it then they will need to add the legacy property to prevent the wrapping.
3) If a developer does not want the text to wrap for labels in modern items, the `ion-text-nowrap` class can be added to the label.
This commit is contained in:
Brandy Carney
2023-10-17 14:08:35 -04:00
committed by GitHub
parent f14a59c5e0
commit 6438e3e919
176 changed files with 345 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
core/src/components/note/test/a11y/note.e2e.ts
View File

@ -61,5 +61,53 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
await expect(note).toHaveScreenshot(screenshot(`note-item-divider-scale`));
});
test('should wrap label to the next line without truncating', async ({ page }) => {
await page.setContent(
`
<style>
html {
font-size: 310%;
}
</style>
<ion-list>
<ion-item>
<ion-note slot="start">Really really long note</ion-note>
<ion-label>Label</ion-label>
</ion-item>
<ion-item>
<ion-label>Label</ion-label>
<ion-note slot="end">Really really long note</ion-note>
</ion-item>
<ion-item>
<ion-note slot="start">Note</ion-note>
<ion-label>Really really long label</ion-label>
</ion-item>
<ion-item>
<ion-label>Really really long label</ion-label>
<ion-note slot="end">Note</ion-note>
</ion-item>
<ion-item>
<ion-note slot="start">Really really long note</ion-note>
<ion-label>Really really long label</ion-label>
</ion-item>
<ion-item>
<ion-label>Really really long label</ion-label>
<ion-note slot="end">Really really long note</ion-note>
</ion-item>
</ion-list>
`,
config
);
const list = page.locator('ion-list');
await expect(list).toHaveScreenshot(screenshot(`note-wrapping-label-scale`));
});
});
});

BIN
core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

BIN
core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

108
core/src/components/note/test/basic/index.html
View File

@ -23,12 +23,13 @@
</ion-header>
<ion-content>
<div class="ion-padding">
<ion-note>Default Note</ion-note>
</div>
<ion-list>
<ion-list-header>
<ion-label> Notes Right </ion-label>
</ion-list-header>
<ion-item>
<ion-label>Default Note</ion-label>
<ion-label>Item Note</ion-label>
<ion-note slot="end">99</ion-note>
</ion-item>
@ -37,117 +38,44 @@
<ion-note slot="end" color="primary">99</ion-note>
</ion-item>
<ion-item>
<ion-label>Secondary Note</ion-label>
<ion-note slot="end" color="secondary">99</ion-note>
</ion-item>
<ion-item>
<ion-label>Tertiary Note</ion-label>
<ion-note slot="end" color="tertiary">99</ion-note>
</ion-item>
<ion-item>
<ion-label>Success Note</ion-label>
<ion-note slot="end" color="success">99</ion-note>
</ion-item>
<ion-item>
<ion-label>Warning Note</ion-label>
<ion-note slot="end" color="warning">99</ion-note>
</ion-item>
<ion-item>
<ion-label>Danger Note</ion-label>
<ion-note slot="end" color="danger">99</ion-note>
</ion-item>
<ion-item>
<ion-label>Light Note</ion-label>
<ion-note slot="end" color="light">99</ion-note>
</ion-item>
<ion-item>
<ion-label>Medium Note</ion-label>
<ion-note slot="end" color="medium">99</ion-note>
</ion-item>
<ion-item>
<ion-label>Dark Note</ion-label>
<ion-note slot="end" color="dark">99</ion-note>
</ion-item>
<ion-item onclick="toggleColor()">
<ion-note id="toggleColor" slot="end" color="primary">primary</ion-note>
<ion-label>Dynamic Note Color (toggle)</ion-label>
<ion-note slot="start" color="warning">99</ion-note>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header>
<ion-label> Notes Left </ion-label>
</ion-list-header>
<ion-item>
<ion-label>Default Note</ion-label>
<ion-note slot="start">99</ion-note>
<ion-note slot="start">Really really long note</ion-note>
<ion-label>Label</ion-label>
</ion-item>
<ion-item>
<ion-label>Primary Note</ion-label>
<ion-note slot="start" color="primary">99</ion-note>
<ion-label>Label</ion-label>
<ion-note slot="end">Really really long note</ion-note>
</ion-item>
<ion-item>
<ion-label>Secondary Note</ion-label>
<ion-note slot="start" color="secondary">99</ion-note>
<ion-note slot="start">Note</ion-note>
<ion-label>Really really long label</ion-label>
</ion-item>
<ion-item>
<ion-label>Tertiary Note</ion-label>
<ion-note slot="start" color="tertiary">99</ion-note>
<ion-label>Really really long label</ion-label>
<ion-note slot="end">Note</ion-note>
</ion-item>
<ion-item>
<ion-label>Success Note</ion-label>
<ion-note slot="start" color="success">99</ion-note>
<ion-note slot="start">Really really long note</ion-note>
<ion-label>Really really long label</ion-label>
</ion-item>
<ion-item>
<ion-label>Warning Note</ion-label>
<ion-note slot="start" color="warning">99</ion-note>
</ion-item>
<ion-item>
<ion-label>Danger Note</ion-label>
<ion-note slot="start" color="danger">99</ion-note>
</ion-item>
<ion-item>
<ion-label>Light Note</ion-label>
<ion-note slot="start" color="light">99</ion-note>
</ion-item>
<ion-item>
<ion-label>Medium Note</ion-label>
<ion-note slot="start" color="medium">99</ion-note>
</ion-item>
<ion-item>
<ion-label>Dark Note</ion-label>
<ion-note slot="start" color="dark">99</ion-note>
<ion-label>Really really long label</ion-label>
<ion-note slot="end">Really really long note</ion-note>
</ion-item>
</ion-list>
</ion-content>
</ion-app>
<script>
const note = document.querySelector('#toggleColor');
function toggleColor() {
const prev = note.getAttribute('color');
note.setAttribute('color', prev === 'secondary' ? 'primary' : 'secondary');
note.innerHTML = prev === 'secondary' ? 'primary' : 'secondary';
}
</script>
</body>
</html>