[Engineering] What's New -Stylized UI View

Overview

As a follow on iteration to #5387 (closed), let's take the data and fully style it to match the designs in product#1546 (closed)

Issue breakdown

Pagination gitlab-org/gitlab!45101 (merged)
Platform specific items, and package names gitlab-org/gitlab!45697 (merged)
Touchup of styles gitlab-org/gitlab!47115 (merged)
Self-managed version tabs gitlab-org/gitlab!47852 (merged)
Add 13.5 entry gitlab-org/gitlab!46058 (merged)

Details

Styling should match the design provided by UX for:

headline
body content
plan badging
CTA link

Drawer interaction

Drawer will follow our standard drawer component in pajamas: https://design.gitlab.com/components/drawer/
need to ensure the Drawer works with Firefox (as mentioned by Mark):

Mark Florian
Hello #s_growth! I hope this is the right channel for this question 😄 While reviewing gitlab-org/gitlab!41705 (merged), I noticed that the What's New drawer doesn't render quite correctly in Firefox. Is this known?

Version badging:

Only used for self-managed
The default behavior is to open to the current version
Future versions will be listed to the right in chronological order
Past versions can be accessed to the left by using the arrow options to navigate to them

Plan badging:

Plan	Badge(s)
EE/SaaS - Free	`All plans`
EE/SaaS - Basic	`EE/SaaS - Basic` `EE/SaaS - Standard` `EE/SaaS - Ultimate`
EE/SaaS - Standard	`EE/SaaS - Standard` `EE/SaaS - Ultimate`
EE/SaaS - Utimate	`EE/SaaS - Ultimate`

Proposed Designs

Figma Designs

Step 1
Notification dot appears above the help icon in main menu.

Step 2
User selects help menu and `See What's New at GitLab` is bold with corresponding number tag referencing how many new items are available to view.

Step 3
User selects `See What's New at GitLab` and the drawer is exposed animating in from the right. The screen also has an overlay above content (not navigation) to enhance visibility. This would also remove the notification dot above the help menu icon.

Step 4
User can close the drawer by selecting the cross icon on the top left of the drawer or space to the left of the drawer. The drawer would animate out to the right and the overlay would also fade out.

Prototype Link

https://www.loom.com/share/cec750d82f7246de94a8ce0aa1f90f6f

Drawer component

Self-Managed	SaaS
The drawer component will be slightly different for Self-Managed users. We introduce the ability to filter via version. A user's current version would be shown as default and past version updates would be loaded in the current version tab below the most recent updates. In the use case where there either aren't any new versions to pull, or we are unable to due to admin preference this would then default to the SaaS view (we hide the tabs).	For SaaS users we do not share the concept of versions but display updates in a similar way to the Self-Managed approach using the same pricing badge matrix.

Self-Managed

SaaS

The drawer component will be slightly different for Self-Managed users. We introduce the ability to filter via version. A user's current version would be shown as default and past version updates would be loaded in the current version tab below the most recent updates. In the use case where there either aren't any new versions to pull, or we are unable to due to admin preference this would then default to the SaaS view (we hide the tabs).

For SaaS users we do not share the concept of versions but display updates in a similar way to the Self-Managed approach using the same pricing badge matrix.

Drawer Component Anatomy

Drawer Component Anatomy on Figma

Edited Dec 15, 2020 by Jay