Action Sheets

Updated:

Action sheets provide an alternative workflow for displaying dropdown content when space is limited

The action sheet workflow was designed and created to primarily address the challenge of displaying dropdown contents when space is limited. This most often applies to mobile devices but also comes up when the displayed module might have very little space to work with.

With actions sheets, a component such as q2-select will display a modal-like element at the platform level when opened instead of as a popup directly above or below the field.

How to use

Once the showActionSheet capability has been defined in your adapter (We do this for you in the Design System), components can be instructed to use them in one of two ways.

One-off uses

To use action sheets with a single Tecton Web Component, simply add the hoist attribute, such as in the example below:

Option 1 Option 2 Option 3 
<q2-select
  label="My options"
  hoist
>
  <q2-option value="1">Option 1</q2-option>
  <q2-option value="2">Option 2</q2-option>
  <q2-option value="3">Option 3</q2-option>
</q2-select>

This will instruct the Web Component to first check that the action sheet feature is implemented, and if so, use it instead of the default workflow.

Using Globally

If you want to use the action sheet feature for all components that allow it, without adding the hoist attribute to each component, you can easily enable the feature for all components at once.

Platform

When a Tecton platform starts up, or a Tecton module initiates a connection via connect, one of the capabilities that get called is getVersionInfo. The output of this call is then stored as the contents of window.Tecton for debugging and configuration purposes.

In any platform where this method is defined, adding the property useActionSheets to its output will establish whether action sheets are the default approach everywhere.

const myAdaptor = {
  getVersionInfo() {
    return {
      // ... YOUR VERSION INFO
      useActionSheets: true
    };
  }
}

The action sheet feature was initially created to address display challenges on mobile devices. If you want to enable it only on those platforms, we suggest using matchMedia to determine the value of useActionSheets.

const useActionSheets = window.matchMedia('(max-width: 768px)').matches;

Design System

When using the Design System, making action sheets the default workflow everywhere is as simple as passing the useActionSheets property in the configuration object that instantiates the library.

import setupDesignSystem from "q2-design-system";

setupDesignSystem({
  useActionSheets: true
});

How to enable

If you are only using the Design System, action sheets are already enabled for you. However, if you are using Tecton Platform tooling, you will need to define the showActionSheet capability in your adaptor.

Lucky for you, we expose a function that implements this behavior in the way we recommend. To use it, simply import it and add it to your adaptor.

import showActionSheet from 'q2-tecton-platform/dist/esm/utility/showActionSheet';

const myAdaptor = {
  // ... MY CAPABILITIES
  showActionSheet
}

Used in this way, the components will send this capability all the necessary data. The function will then take care of ensuring a q2-action-sheet is present at the bottom of the body tag, populate it with the provided data, and then show it.

Once you have made your selections, the platform will handle sending those back to your component so that it can be updated accordingly.

Release Notes

Initial Release