SubNav component style evolution

[stamat]

Hello there! 👋 (said in the voice of Ewan McGregor)

brand-engineering has some requests regarding the SubNav component enhancement, and we have found some bugs. Actually I'll have another issue for the bugs.

The following enhancements are possible with overrides, but we don't want to cause any regression issues by having ugly overrides, so we would like these to be baked in.

This was designed by @jesussandreas so I would love if he could chime in and just confirm if what I wrote here is correct. And provide more designs if useful and applicable.

• Figma link 🎨

The optional heading separator

Based on the designs for the new /features/copilot/extensions page a need arises for a "second level" SubNav style. By "second level" we mean an alternative style for SubNav that depicts a SubNav for the feature page of a feature. Current SubNav is suited for the top level feature pages like /features/copilot but we would like to have a slightly different style when looking at the page that is about a feature of Copilot, like Extensions.

This was designed similarly to the existing SubNav but with a forward dash separator, as you can see from the provided screenshot.

It would be cool to have this separator as an optional component attribute. Currently we have solved it by adding a styled forward dash to the SubNav.Heading component.

Forward slash here symbolizes descending one level down, like in a directory path or the URL. I think it makes sense to have this forward slash in the Features SubNav as well.

The optional current page text alignment on mobile

Similarly to the previous request, the mobile style of the SubNav is a bit different. The current page "label" is left aligned as opposed to the right aligned one that we currently have. This makes sense since we have a forward slash separator.

What's desired

What we currently have

Looking at the code we would need to restructure the layout a bit to make this possible. We didn't do an override for this since it would most probably cause the regression issues.

Having this as an option would allow us to choose how we use this. It can be tied to the same optional attribute as the one previously mentioned.

Separate color variables for active, hover, and inactive for SubNav.Item

This feature request is so we could color the active element differently from the hover state color.

Currently we have two variables that dictate the color of the SubNav items:

• --brand-SubNav-color-link-active for the active state
• --brand-SubNav-color-link-rest for the rest

It would be great if we could have:

• --brand-SubNav-color-link-active for the active state
• --brand-SubNav-color-link-hover for the hover state
• --brand-SubNav-color-link for the rest

We should revise the font weights and sizes

Font sizes and weights of the elements in this component differ in the design. We should align on the styles and make them uniform, what say ye @jesussandreas? Are these styles from this figma file applicable for the "top level" features subnav?

cc: @joshfarrant ✨

[jesussandreas]

@stamat thank you for creating the issue!

i've created the main component --> here.

that should have the consolidated font weights which should be semibold.