SidePanel

In the 2.0.0 version, component was divided into three parts: Header,Body and Footer. This was done to make it easier to use the restyling component. Also, got an optional Back button.

SidePanel is a component for displaying the sliding panel with content. It's also can be called just panel or drawer.

Use SidePanel when it is needed:

• to show sub-tasks, additional support information and links that may be useful to the user when working with a report, a specific widget or the whole product;
• to keep the user in the context of the page (even if SidePanel has an overlay).

Use Modal windows to show important information or request a response from the user.

For example, you can use SidePanel as:

• Notification center for the whole website;
• Help Center or News panel in products;
• "panels" on mobile devices.

• News icon in the main header of the website.
• Additional link in ProductHead.
• Controls inside the report that hide additional information.
• Charts inside the report, which can be clicked to show additional information.
• On small screens other controls can serve as a trigger to open SidePanel.

1. SidePanel
2. SidePanel.Header
   • SidePanel.Back
   • SidePanel.Title
3. SidePanel.Close (optional)
4. SidePanel.Body
5. SidePanel.Footer (optional)
6. SidePanel.Overlay (optional)

SidePanel has a fixed width that does not change when the browser window is resized. Default width of the panel is 256px. You can change it if necessary.

The component has a default padding. It can be changed if necessary.

It can be changed, for example, when using SidePanel on a small screen where you want to reduce paddings.

The padding between title and content:

For panel's title use 16px text (--fs-300, --lh-300) with font-weight: var(--bold).

Pin header when scrolling large content inside the SidePanel.

General recommendations for SidePanel content styles:

• Choose the text size for the panel in order to maintain a hierarchy of headers in the content within SidePanel. If necessary, you can experiment and use your text size hierarchy within our typographic scale.

• Always pin the header and the footer, when scrolling the content of the SidePanel.

You can place common controls for SidePanel content in the footer.

• Typically, any controls, CTA or other elements like ProgressBar can be placed there.
• The recommended size of controls in the panel on the desktop is M. Depending on the context, use M or L controls in the panel on small screens.

Footer styles:

height: 44px;
padding: var(--spacing-2x) 0;
align-items: center;
border-top: 1px solid var(–-border-primary);

• You can customize whether the SidePanel should open in the product area or over the entire website (as modal windows do). If the SidePanel refers to a specific product, it should be rendered in the product under the main header.
• The focus remains inside the SidePanel and does not move to the page content. You can navigate through the controls inside the SidePanel using Tab.

You can enable or disable page scroll. It's disabled by default.

Page scrolling should be enabled when SidePanel has some tips and additional things for the page.

It is important to disable page scroll for SidePanel with overlay, otherwise it will look like a bug.

You can close the panel with:

• CTA control;
• Close icon;
• Clicking outside the area of the panel (at overlay), optional;
• Esc key.

SidePanel can be opened either by user clicking on the corresponding trigger or by the system in special cases to draw attention to the information in the panel.

SidePanel opens and closes with the animation: transition: all 350ms ease-in-out.

• SidePanel has a fixed width that does not change when the browser window is resized. Default width of the panel is 256px. You can change it if necessary.
• On a 320px screen, SidePanel should not occupy more than 80% of the screen width so that the user can click outside of it and close it.

SidePanel should have header in all cases.

At the initial load of the SidePanel content, show the content structure with Skeleton.

When loading and reloading SidePanel content, show Spin with XL size in the center.

If an error occurs during data loading, show the the corresponding message and the "Try again" button to reload the SidePanel content.