[JS] Overflow actions (flyout menu) #4715 (Pre-Release)

[robin-liao]

Related Issue

ActionSet overflow flyout (... actions menu) #4715

Description

To introduce a new feature of overflow actions, the implementation follows the spec:

1. This new feature will bring as part of Schema version 1.5

2. Introduce a new property field mode to all Action type. Its value can be primary (default) or secondary. For all secondary action instances in the same actions array (either the root level actions section or ActionSet inside card elements) they'll group as overflow actions, wrap up within a "..." button and display flyout context menu when user clicks "..." button.

3. Introduce a new global setting flag (schema version-free) allowMoreThanMaxActionsInOverflowMenu. By default it's false, but when it's true then the actions exceeding the number defined in hostConfig.actions.maxActions will be auto wrapped up as overflow actions and "..." button for context menu will be displayed.

4. hostConfig.actions.maxActions doesn't count "..." button itself.

5. Two client callbacks are added to control overflow button "..." and flyout context menu rendering:

   • onRenderOverflowActions?: (actions: readonly Action[], isRootLevelActions: boolean) => boolean

     • It'll be called when "..." overflow button will be rendered. First argument actions are those overflow actions wrapped as flyout menu actions, and isRootLevelActions indicates if the current "..." overflow action belongs to root level actions array. If it's false then it indicates it's ActionSet as body elements.
     • Client callback requires to return a boolean value. Returning false means let SDK continue to render "..." button, while true informs SDK don't render the current "..." button (which implies client code might grab those flyout actions and render / handle overflow actions by itself).

   • onDisplayOverflowActionMenu?: (actions: readonly Action[], target?: HTMLElement) => boolean

     • It'll be called when overflow context menu will be shown. The first argument actionsare those overflow actions wrapped as flyout menu actions, and target is the HTML element triggered the context menu, which usually is the "..." button. It can be used by client to position the context menu if client wants to render flyout by itself.
     • Client callback requires to return a boolean value. Returning false means let SDK continue to render flyout context menu, while true informs SDK don't render flyout (which implies client code might render context menu by itself).

Sample Card

{
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    {
      "type": "Image",
      "url": "https://adaptivecards.io/content/adaptive-card-50.png"
    },
    {
      "type": "TextBlock",
      "text": "Hello **Adaptive Cards!**"
    },
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.Submit",
          "title": "Action Submit",
          "data": {
            "key": "Submit from overflow menu"
          },
          "mode": "secondary"
        },
        {
          "type": "Action.OpenUrl",
          "title": "OpenUrl",
          "url": "https://github.com/Microsoft/AdaptiveCards",
          "iconUrl": "https://scontent.ftpe5-1.fna.fbcdn.net/v/t1.0-9/122050521_10222320423416866_2987313765978046472_n.jpg?_nc_cat=103&ccb=2&_nc_sid=09cbfe&_nc_ohc=gLcNo1PMYHAAX_KI9HV&_nc_ht=scontent.ftpe5-1.fna&oh=1adaf81bd075ef9ba9d42c7eec78218a&oe=603E2FCE",
          "mode": "secondary"
        }
      ]
    },
    {
      "type": "TextBlock",
      "text": "some text..........."
    },
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.Submit",
          "title": "View",
          "data": {
            "key": "View"
          },
          "mode": "primary"
        },
        {
          "type": "Action.Submit",
          "title": "Edit",
          "data": {
            "key": "Edit"
          },
          "mode": "secondary"
        },
        {
          "type": "Action.Submit",
          "title": "Delete",
          "data": {
            "key": "Delete"
          },
          "mode": "secondary"
        }
      ]
    },
    {
      "type": "TextBlock",
      "text": "some other text..........."
    }
  ],
  "actions": [
    {
      "type": "Action.OpenUrl",
      "title": "OpenUrl 1",
      "url": "https://adaptivecards.io"
    },
    {
      "type": "Action.Submit",
      "title": "Action Submit",
      "data": {
        "key": "Submit from overflow menu"
      },
      "mode": "secondary"
    },
    {
      "type": "Action.OpenUrl",
      "title": "OpenUrl",
      "url": "https://github.com/Microsoft/AdaptiveCards",
      "iconUrl": "https://scontent.ftpe5-1.fna.fbcdn.net/v/t1.0-9/122050521_10222320423416866_2987313765978046472_n.jpg?_nc_cat=103&ccb=2&_nc_sid=09cbfe&_nc_ohc=gLcNo1PMYHAAX_KI9HV&_nc_ht=scontent.ftpe5-1.fna&oh=1adaf81bd075ef9ba9d42c7eec78218a&oe=603E2FCE",
      "mode": "secondary"
    }
  ]
}

How Verified

How you verified the fix, including one or all of the following:

1. New unit tests that were added if any. If none were added please add a quick line explaining why not.
2. Existing relevant unit/regression tests that you ran
3. Manual scenario verification if any; Do include .gif's or screenshots of the testing you performed here if you think that it
   will aid in code reviews or corresponding fixes on other platforms for eg.

Microsoft Reviewers: Open in CodeFlow

Microsoft Reviewers: Open in CodeFlow

[ghost]

Hi @robin-liao. Thanks for helping make the AdaptiveCards JS renderer + tooling better. As additional verification, once the JS build succeeds, please go to the test site to test out your website/designer changes.