Updated application layout to use new tagged logo style [WD-2451]

[lorumic]

Done

Added new class p-panel__tagged-logo to style a tagged logo for panels in application layouts.
Updated application layout examples to use this tagged logo style.
Added an example of the default application layout using the legacy logo.

Fixes WD-2451

QA

• Open the examples page.
• Open any of the application layout examples (except the "Structure" one). Check the style of the logo in the side navigation panel.
• Open the Application / Default with legacy logo example.
• Check the legacy logo in the side navigation panel.
• Review updated documentation:
  • Application layout > Panels

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

[webteam-app]

Demo starting at https://vanilla-framework-4691.demos.haus

[bartaz]

Please bump the threshold to 350000:

vanilla-framework/tests/parker.js

Line 15 in a72ca52

threshold: 320000,

[bartaz]

Looks good on large screens:

But on medium/small needs some more adjustments:

@lyubomir-popov we haven't previously updated application layout to use new logo and it's already being used in some apps. Can you have a look and decide how we want new logo to align on different screen sizes and in expanded/collapsed mode?

I guess we want the orange tag centered above side navigation icons (so they align in collapse mode), and the panel pin/close buttons need to better align with logo/headings.

Also in standard top navigation the top nav and logo is smaller (less height), but not sure if the same needs to happen in application layout?

[lyubomir-popov]

@bartaz can we please reduce the padding-top of the main area and panels so headings align by baseline with the logo?

[bartaz]

@lyubomir-popov sure - the thing is that the tag height is different on smaller screen sizes - should the panel header padding follow that as well? or should logo not get smaller in application layout?

[lyubomir-popov]

@bartaz that's a good point - where can I see it with the new logo, and does it ever align with the headings?
Here for example the headings are underneath so it doesn't seem to be an issue.

[bartaz]

@lyubomir-popov

So, here is large screen - tag on the logo is full height, headings need to be aligned:

When you go down to medium breakpoint, side nav is collapsed, logo tag is already smaller. Headings are also smaller in font size, but still need to be slightly adjusted:

But do we need logo tag to get smaller in this case? (it does that in our current top navigation component on sites)

Another thing is horizontal alignment between tag and icons in side nav. Currently tag is has same padding on left as icons, but is wider. I guess it should be centred, right? The icon inside tag, should align with icons in side nav below?

On small screen alignment between logo and headers doesn't matter, but still the top bar seems to high for the size of the logo:

Another aspect is alignent of logo/headings and buttons (pin, close) currently these buttons don't align very well. We added them for the sake of example, but I'm not sure how should they align (as buttons have padding around the icon as clickable area making them larger than text in logo/headings)

I guess we should address all of these issues?

[lyubomir-popov]

@bartaz my comments inline

So, here is large screen - tag on the logo is full height, headings need to be aligned:

yes

When you go down to medium breakpoint, side nav is collapsed, logo tag is already smaller. Headings are also smaller in font size, but still need to be slightly adjusted:

But do we need logo tag to get smaller in this case? (it does that in our current top navigation component on sites)

I would keep this consistent with the normal navigation. I do have one concern here - the jaas icon in particular is too tiny - but I think that's a problem with the svg.

Another thing is horizontal alignment between tag and icons in side nav. Currently tag is has same padding on left as icons, but is wider. I guess it should be centred, right? The icon inside tag, should align with icons in side nav below?

I noticed that today while looking at LXD. We need to align it exactly as you are describing.

On small screen alignment between logo and headers doesn't matter, but still the top bar seems to high for the size of the logo:

Yes, why does it become so tall? It should look exactly like the main navigation at that screen size

Another aspect is alignent of logo/headings and buttons (pin, close) currently these buttons don't align very well. We added them for the sake of example, but I'm not sure how should they align (as buttons have padding around the icon as clickable area making them larger than text in logo/headings)

This is why I wanted the logo text to be exactly like the h4s - if it were, then properly aligning the close icon with a regular h4 will result in perfect alginment with the logo as well. Reducing the top padding as mentioned previously will get us most of the way there I think. And unless there's text in the button, I would propose using the base button variant that doesn't have outlines or color different from the background. The icon can simply be in the same color as the text, in this case white

I guess we should address all of these issues?

Yes please

[lorumic]

So, summing up:

1. Use p-heading--4 for the logo text.
2. Increase the height of the tag on medium/large screens - otherwise aligning it with the headings is impossible, unless we reduce the padding-top of the p-panel__title class - is this what you were suggesting @lyubomir-popov?
3. Left-align the icon inside the tag with the icons in the side nav below.
4. Fix (= decrease) the height of the top bar in the app layout examples so that it matches that used for the main navigation.
5. Check that using p-heading--4 for the logo text also solves the alignment problem with the pin/close icon. (as for the style changes that you proposed Lyubo, there's another PR awaiting review: Fixed theme of pin/close button in application layout examples #4694)

Did I forget or misunderstand anything? @bartaz @lyubomir-popov

[lyubomir-popov]

@lorumic

1. yes
2. no, decreae the padding top. It is very wrong at the moment - we need to take the existing padding on h4s, which ensures the baseline stays on the baseline grid, and add a value to it - e.g. .5rem. This will get you most of the way to perfect alignment wiht the logo. Then adjust the logo to finalise the alignment.

4. precisely
5. yes

[bartaz]

Side navigation for apps is being redesigned which will likely affect how the logo needs to be displayed. So until it's decided how it is going to look like I'm going to close this one. Sorry 😢

[lorumic]

Side navigation for apps is being redesigned which will likely affect how the logo needs to be displayed. So until it's decided how it is going to look like I'm going to close this one. Sorry 😢

No problem! Thanks for the feedback.