Overflow component

[Soheab]

Overflow Component

I would like to propose an Overflow Message Component.
This component would function similarly to a string select menu, but with a more compact UI and the restriction of only allowing a single option to be chosen at a time.

Appearance

A perfect example of this behavior already exists today: on every message on desktop, on the far right side, there is a [...] button that reveals additional actions when hovered over (video). For other references, see Slack's implemention below.

This component should:

• Only be allowed inside messages.
• Always exist within an ActionRow.
• Allowed as an accessory of the section component.

In addition to standard options, it may also be worth considering support for the separator component.
This would make is possible to mimic the way message overflow menus currently group actions, providing a clearer visual distinction between related sets of options.

Use Case

This component could be especially useful in dense or space-constrained UIs where adding a full select menu would take too much space or look cluttered, but you still want to offer a way for users to quickly hover and choose a single action.

Payload Example

Below is an example of how the payload for such a component could look when sent with the CV2 flag in the components field:

{
  "type": 1,  // ComponentType.ACTION_ROW
  "components": [
    {
      "type": 20,  // ComponentType.OVERFLOW
      "custom_id": "use_me",
      "id": "1",
      "disabled": false,
      "options": [  // re-uses SelectOption
        {
          "label": "Option 1",
          "value": "option_one",
          "emoji": "...",
          // no description or default
        },
        ... // min 1, max 10 (or 5?)
      ]
    }
  ]
}

References

• Slack’s Overflow Component