Flyout

A Flyout is used to show and hide additional information and content that is related to the main page without navigating or routing to a new page.

Usage

When to use

When displaying additional information, context, or details about an object or element present on the main page.

When not to use

• When requesting the user for information or feedback, use a Modal.
• When displaying overly complex information, consider moving the content to its own page.

A Flyout is best used in scenarios when there are more details about a specific item or object that benefit from being easily accessible in the same page context, but may not be suited for a separate page. This is a conscious decision to limit the recommended usage to reduce the confusion between the Flyout and Modal, which have very similar interaction patterns.

Flyout complexity

Functions within a Flyout

Given that a Flyout is intended to provide more detail on a specific item, don’t use a Flyout in a functional capacity; e.g., performing a CRUD (create, read, update, delete) function or submitting form data.

This type of content is often too complex and is better organized in its own page.

Code snippets and examples

While code snippets and terminal scripts are usually detailed, they are well suited content within a Flyout due to their contextual relevancy to the content on the page, while maybe not being complex enough to exist on their own page.

Size

Medium

Large

Best practices

• Use a Flyout size that best accounts for the complexity and detail of the content.
• The medium size accounts for the majority of scenarios and is the default recommended size.

Flyout header

The Flyout header features several properties to better communicate the purpose and content within the component.

Title icon

With title icon

Without title icon

Usage

An icon paired with the title can help reinforce the purpose and function of the Flyout while also drawing the eye to the header and title area.

The purpose and function of the Flyout should not rely solely on an icon, instead the title should be explicit and pragmatic while the icon provides visual support.

Tagline

With tagline

With tagline and icon

A tagline helps the user maintain the context of the main page the Flyout was triggered from. Since a Flyout disables and obscures the main page content, adding a tagline can help the user understand the relationship between the Flyout and the main page.

The tagline should directly reference the page, feature title, or object to reinforce the purpose of the Flyout.

Description

A description provides additional information about the Flyout.

With description

With description and icon

Flyout body

The body of the Flyout supports any custom content, local components, or Helios components via an instance swap property (customInstance) in Figma. In code, yield is supported.

Dismissal

The primary dismissal method for the Flyout is the dismiss action in the header. The Flyout does not support action buttons to “confirm” or “cancel” the Flyout as the component is not intended to perform functions.

Multiple dismissal options are available that can be customized in production with a callback (on onClose, or onOpen) function:

• Dismiss button in the header
• Clicking with a mouse outside of the Flyout on the main page
• Hitting the escape (ESC) key on a keyboard

Positioning and responsive sizing

A Flyout should slide out from the right side of the viewport on top of the main page content and occupy 100% of the viewport height.

• This is true regardless of whether there is a sidebar or navigational element that persists on the page.
• A Flyout should overlay all content and block/disable interaction on the main page.

On smaller viewports, the Flyout should occupy 100% of the viewport width minus a 40px margin from the viewport edge.

• If the body content of the Flyout exceeds the maximum height of the viewport, a scroll will be introduced.
• The Flyout header is not included in the scrolling section, only the body content. The header should always be visible to help the user understand the Flyout content and how it relates to the main page.
• The Flyout should not be resized manually, rather select the size that best accommodates the content.

Browser support

The Hds::Flyout component leverages the <dialog> element which is currently supported by all major browser vendors. To ensure support on older browser versions (for example, Safari 14 or Internet Explorer 11) we rely on a polyfill that is automatically loaded when needed.

Page scroll

When an Hds::Flyout component is open, the rest of the page is disabled (via inert). However, scrolling at the page level is still available. To make it clear to the user that the underlying elements are not interactive and to avoid confusion, we recommend disabling the page scroll onOpen and enabling it back onClose (for example, by setting overflow: hidden; and overflow: auto; respectively) by applying it to the <body> element.

Positioning

As an overlaying component, the Hds::Flyout requires a high value on the z-axis. We are currently setting 49 as a default value, but we recommend you review the z-index values used across your project and either adjust them accordingly or increase this value by defining an override.

Focus trap

This component uses ember-focus-trap to prevent the focus from going outside the Flyout and to deactivate the Flyout when clicking outside. This Ember modifier requires at least one interactive element to be present within the Flyout, which is by default achieved by the dismiss button in the header.

How to use this component

<Hds::Button
  @text="Open Flyout"
  @color="secondary"
  {{on "click" (fn this.activateFlyout "basicFlyoutActive")}}
/>

{{#if this.basicFlyoutActive}}
  <Hds::Flyout id="basic-flyout"
    @onClose={{fn this.deactivateFlyout "basicFlyoutActive"}} as |M|>
    <M.Header @tagline="Main page context" @icon="info">
      Additional information
    </M.Header>
    <M.Description>
      Lorem ipsum dolor sit amet consectetur.
      Ut ultrices id venenatis in felis auctor ante.
    </M.Description>
    <M.Body>
      <p class="hds-typography-body-300 hds-foreground-primary">
        Aliquam ac enim iaculis, faucibus enim id, dapibus quam.
        Nunc nibh mi, vehicula sed enim eget, lacinia venenatis tortor.
        Quisque vitae accumsan est, eu vehicula arcu.
      </p>
    </M.Body>
  </Hds::Flyout>
{{/if}}

Component API

Contextual components

The title, description and the content are passed into the Flyout as yielded components, using the Header, Description, and Body keys.

Flyout::Header

It is a container that yields its content as the title of the Flyout.

Flyout::Description

A container that yields its content as the description of the Flyout.

This component supports use of ...attributes.

Flyout::Body

The body is an unstyled, generic container that yields as the main content of the Flyout component.

When the yielded content exceeds the available space, a scrollbar is introduced to the container.

This component supports use of ...attributes.

Anatomy

Conformance

The Flyout component is conformant when used as directed.

Focus

When a Flyout is triggered, focus is trapped within the component. The dismiss button should receive focus as the first interactive element in the DOM (document object model).

Applicable WCAG Success Criteria

This section is for reference only, some descriptions have been truncated for brevity. This component intends to conform to the following WCAG Success Criteria:

Support

If any accessibility issues have been found within this component, let us know by submitting an issue.