Page header with inconsistent height in Figma and Code

[felipepowlist]

Problem

The height of the page header is not consistent and causing miscommunication between front-end and design.

Figma

Shoreline documentation

Expected behavior

No response

Reproducible Example

No response

Suggested solution

I believe we should follow the specification on Figma

Additional context

No response

Package

No response

Packages version

No response

Browser

No response

Package Manager

pnpm

[davicostalf]

Hi @felipepowlist! The page header styles are responsive:

As can be seen in Figma as well:

• When it's width is equal or less than 379px, it's corresponding height is 72px.
• When it's width is between 380px and 559px, it's corresponding height is 80px (in code but not in Figma, I'm looking into this).
• When it's width is between 560px and 799px, it's corresponding height is 88px.
• When it's width is equal or above 800px, it's corresponding height is 96px.

That is to say, it's behaving in code as intended. Do you think we choose change this behavior?

[felipepowlist]

Got it!!

I guess we could make this behavior more clear in the documentation. I only noticed the width prop in Figma now that you explained it to me.

Also, should we have a prop in Figma for the layout (wide, standard, narrow)?

[davicostalf]

I guess we could make this behavior more clear in the documentation. I only noticed the width prop in Figma now that you explained it to me.

In the Page best practices documentation you mean? Since it's something that "just works" we avoided including additional content. At least to me, it seems most designers use the Page Header through the Page component, and there it's already configured as it should be. Do you see it differently?

Also, should we have a prop in Figma for the layout (wide, standard, narrow)?

Layout is a prop of the PageContent component. In Figma, since PageContent doesn't exist as a standalone component, the prop was added in the page component. Does it make sense to you?

[felipepowlist]

Yes It makes sense to me @davicostalf! 👍

My feedback here is that even though it is a natural behavior of the component, maybe "stating the obvious" in the documentation may prevent further confusion. For example, I completely missed the behaviour and the component prop in Figma.

[davicostalf]

Thanks, @felipepowlist! We'll continue to discuss this in the issue #1790.