notifications not visible if folks first experience is starting out on an api docs page

[susanev]

overview

updated description

some of our packages have important notifications on the overview pages, but we know most users come in via the API docs pages, so they totally miss this important information. we have the header that is visible on every page, lets figure out how to put important notifications in that area so its accessible from every package page.

original description

if folks first start out on an API docs page they may never see the note on the overview page that gives information about the native provider. we may want to consider having access to this information in the header so no matter what page of the package they are on they have access to this info.

original report from a user:
#547 (comment)

[jonelleb]

Design Goals

Users may be starting out on the API Docs page and miss the Azure Native provider info. banner that's currently located on the Overview page only. We want to design a way that the user sees this message no matter what page they are on.

[susanev]

@jonelleb what would you think of possibly leaving the notes on the pages as is, and then having a much shorter message in the top section, possibly with new styles instead of the note styles? im asking because there has been previous feedback on the height of our header and i worry a bit about this increasing the height even more. this is partly an eng constraint because every time someone takes an action we totally reload the page. happy to chat more over zoom sometime if it would be helpful to you!

[jonelleb]

@susanev - I definitely think having the message shorter would help and I can update the style of banner- the only reason I didn't make any changes to the styling is I thought this issue was just a minimal effort change and didn't think changing the look of the actual banner was part of it.

[susanev]

ah yah, sry about that. i think this work should possibly be about how we can add some kind of general-purpose notification into the top of package pages (with the first application being this particular use case). ill do better at describing these kinds of things in issues going forward.

[jonelleb]

No problem. I'll move this back to UX design and work on an updated design.

[jonelleb]

Figma File

Overview tab

Design Changes

• Final design for new info. alert (takes the place of the current note on the Overview page now) - applies to all tabs: Overview, Installation & Configuration, API Docs and How To Guides, and should remain in the same place on the page, at the same size, no matter what tab user is on.
• Links to https://www.pulumi.com/registry/packages/azure-native](https://www.figma.com/exit?url=https%3A%2F%2Fwww.pulumi.com%2Fregistry%2Fpackages%2Fazure-native - same link as what's currently in the note on the Overview page now
• Has a Close icon so that user can dismiss the alert if they want.

Installation & Configuration tab

API Docs tab

How-to-Guides tab

[jonelleb]

Additional Changes

• On all of the tabs, Pulumi Official graphic has been moved next to 'Azure Classic' header

Engineer Notes

• Comments have been added in Figma but please feel free to reach out with any questions or concerns.

Thanks!

[susanev]

@anita-trimbur can you take a look at the adjustment to the official label and let us know what you think?

@jonelleb im still worried about the increase in height of this header, lets chat more about this in our 1-1 this week.

[anita-trimbur]

I think this label position is great. Kimberley and I weren't able to position it exactly where it was initially designed anyway, so I absolutely support this change.

[jkodroff]

Is it possible to tighten up the layout vertically by putting the logo on the same line as "Azure Classic"?

[susanev]

ive updated this issue to be more generic as we are now running into this issue with other packages, including awsx

[anita-trimbur]

closing this issue as fixed via #1797