fix(label): do not grow when in end slot (#29036)

Issue number: resolves #29033

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

In https://github.com/ionic-team/ionic-framework/pull/28773 I resolved
several incorrect behaviors with Items related to text wrapping.
However, it looks like I missed the removal of
https://github.com/ionic-team/ionic-framework/pull/28146/files#diff-4a1156704dbf45b0dad273b6909b190ca45e4380aa7378ba88d0dd7d48d7d473R37
which caused the issue to persist when adding a label to the end slot.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Removed logic that caused `ion-label` to grow larger than it needed to
be

| `main` | branch |
| - | - |
| ![Screenshot 2024-02-13 at 11 20
43 AM](https://github.com/ionic-team/ionic-framework/assets/2721089/3fbddd04-d4b5-474c-ab9c-4d9c6e88f758)
| ![Screenshot 2024-02-13 at 11 21
17 AM](https://github.com/ionic-team/ionic-framework/assets/2721089/188eda24-ec6f-4ba7-b3ed-2993d93b1cc7)
|

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.7.2-dev.11707840956.16e27b4c`

---------

Co-authored-by: ionitron <hi@ionicframework.com>
This commit is contained in:
Liam DeBeasi
2024-02-14 12:19:23 -05:00
committed by GitHub
parent 6b781fb165
commit 1fc4b76f59
8 changed files with 27 additions and 8 deletions

View File

@ -29,14 +29,6 @@
overflow: hidden;
}
// TODO(FW-5289): move to :host-context(.item)
// Shouldn't need :not(.item-input) as this was
// only needed because of the specificity with
// :not(.item-legacy)
:host-context(.item:not(.item-input):not(.item-legacy)) {
flex-grow: 1;
}
:host(.ion-color) {
color: current-color(base);
}

View File

@ -0,0 +1,27 @@
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('label: in item'), () => {
test('should render correctly in an item', async ({ page }) => {
test.info().annotations.push({
type: 'issue',
description: 'https://github.com/ionic-team/ionic-framework/issues/29033',
});
await page.setContent(
`
<ion-item>
<ion-label slot="start">Start</ion-label>
<ion-label>Default</ion-label>
<ion-label slot="end">End</ion-label>
</ion-item>
`,
config
);
const item = page.locator('ion-item');
await expect(item).toHaveScreenshot(screenshot(`label-item`));
});
});
});

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB