fix(title): large title aligns with ios spec (#27969)

Issue number: resolves #27966

---------

<!-- 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. -->

The large title on iOS added bottom padding to create space between the
title and the main content. However, this caused tall text to be cut off
on the top.

During development I also noticed that the padding value we were using
does not match the iOS spec.

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

- The padding is now applied to the toolbar that contains the large
title. The title itself is positioned absolutely so adding
padding/margin to it never actually had the desired effect. What we want
is space between the title and any content in sibling toolbars. All the
padding on the title did was shift content within the title up to give
the impression of space between the title and other content.
- Adjusted the actual padding values to align with the iOS spec

Note: The screenshot diffs here are correct. By adding padding to the
toolbar we are increasing the height of the toolbar by 6px. As noted
above, we never truly had spacing between the large title and the
content since the text inside of the title was just being shifted by 6px
to give the impression of spacing.

Additionally, the padding values were further adjusted to match the iOS
spec:

| native | ionic | diff |
| - | - | - |
|
![native](https://github.com/ionic-team/ionic-framework/assets/2721089/10c51b1c-c52c-4871-add4-5af42cfda106)
|
![ionic](https://github.com/ionic-team/ionic-framework/assets/2721089/a1062dbf-4a3e-4022-97a1-dcae8b19725d)
|
![diff](https://github.com/ionic-team/ionic-framework/assets/2721089/c9506f5d-c21f-4d74-93c5-6d1a64ff4023)
|

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## 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.2.4-dev.11691683954.1b6ed4bb`

---------

Co-authored-by: ionitron <hi@ionicframework.com>
This commit is contained in:
Liam DeBeasi
2023-08-14 08:17:59 -05:00
committed by GitHub
parent 84cf0f152f
commit 8fa12fc888
16 changed files with 32 additions and 4 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 81 KiB

After

Width:  |  Height:  |  Size: 81 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 81 KiB

After

Width:  |  Height:  |  Size: 81 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 68 KiB

View File

@ -51,7 +51,7 @@
}
.header-collapse-condense ion-toolbar:first-of-type {
padding-top: 7px;
padding-top: 1px;
z-index: 1;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -12,3 +12,23 @@ configs().forEach(({ title, screenshot, config }) => {
});
});
});
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('title: special characters'), () => {
test('should not cut off characters', async ({ page }) => {
await page.setContent(
`
<ion-header>
<ion-toolbar>
<ion-title size="large">ÔÔÔ</ion-title>
</ion-toolbar>
</ion-header>
`,
config
);
const title = page.locator('ion-title');
await expect(title).toHaveScreenshot(screenshot('title-characters'));
});
});
});

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -49,8 +49,6 @@
min-width: 100%;
padding-bottom: 6px;
font-size: 34px;
font-weight: 700;

View File

@ -84,6 +84,16 @@
// Toolbar: Large Title
// --------------------------------------------------
/**
* Ensure there is enough spacing between the large
* title and any potential content in subsequent
* toolbars. We do not add padding to the title
* itself because it is absolutely positioned.
*/
:host(.toolbar-title-large) {
padding-bottom: 7px;
}
:host(.toolbar-title-large) .toolbar-container {
flex-wrap: wrap;
align-items: flex-start;