thumbprint icon indicating copy to clipboard operation
thumbprint copied to clipboard

[@thumbtack/thumbprint-react]: Add support for Button and Link to wrap an Icon or Image

Open webbower opened this issue 5 years ago • 1 comments

Currently, to create a purely graphical (icon or image) Button or Link, you must use the text-style component variant (TextButton or Link) with theme="inherit" and use the iconLeft prop to provide the icon component (which only really works for icon buttons, not image buttons). This is arguably unintuitive. A more desirable API for icon/image buttons would be something like:

<[Text]Button theme="graphic" accessibilityLabel="...">
  <IconComponent />
  // or
  <ImageServicePicture id="..." />
</[Text]Button>

The important things here are:

  • A dedicated theme specifically for purely graphical links and buttons
  • Being able to provide the icon/image as the children prop

Additionally, accessibilityLabel would be required in this case (maybe using the new theme value as the heuristic). For buttons and links that need text + icon, using the iconLeft (and proposed iconRight) seems intuitive enough.

webbower avatar Aug 26 '19 23:08 webbower

An idea came to mind. Since we have different components for the button-style and text-style cases, maybe this should be a new component for graphic-style buttons/links called something like GraphicButton and GraphicLink to simplify the API.

webbower avatar Sep 10 '19 23:09 webbower