fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

InfoButton: Update docs to mention decision on component variant and usage of these

Open sopranopillow opened this issue 2 years ago • 0 comments

Issue tracking the update of the docs relating the usage of InfoLabel, InfoTip, and InfoButton.

Here's a summary of the decision we made:

There are two use cases we want to tackle, covering these means covering the 80-90%:

  1. When the bubble has a few words and no interactive elements.
  2. When the bubble may have more than a few sentences and interactive elements.

From the discussion we settled on having two types of controls to solve this cases, the first one will be an InfoTip that will cover the first use case.

InfoTip

  • An InfoTip is an icon/image that has a tooltip.
  • InfoTips must keep the default cursor even when hovered.
  • InfoTips are opened when hovered or focused.

For the second use case we will use InfoButton.

InfoButton

  • An InfoButton is a button that has a popover attached to it.
  • InfoButtons must use the pointer cursor to show this is a button.
  • InfoButtons do not open when focused/hovered, instead they open on click/space/enter.
  • When dismissing the bubble of an InfoButton, this can be done by pressing Escape, clicking outside the bubble or clicking the button again.
  • InfoButton has role note and at first focuses on the popover surface.

Outstanding challenge (5-10%) would be using it with touch devices, it will be hard to differentiate between an InfoButton and an InfoTip.

sopranopillow avatar May 30 '23 17:05 sopranopillow