Clarify docs around usage of help icon for tooltip/popover text #1332
Description
Reported by @christianvogt via slack:
It's a little unclear whether <HelpIcon> or <OutlinedQuestionCircleIcon> is the recommended icon for help text (triggers a tooltip/popover for contextual help). Specifically in the context of a field label in a form.
In all of the places I looked across PF components that support help text triggered via an icon, we're using <HelpIcon>, which is part of our custom icon set. The SVG code is in core (source) and used to create the <HelpIcon> seen on this page which shows all of the icons in @patternfly/react-icons - https://react-staging.patternfly.org/icons. Here's a screenshot, along with <OutlinedQuestionCircleIcon>:
However, in the icons table on https://www.patternfly.org/design-foundations/icons#all-icons, only the FA icons are listed and "fa-question-circle (outlined)" says "Indicates the availability of contextual help".
In the form design guidelines, the wording is "In a form, indicate a popover with an unfilled question mark circle that reveals information when clicked."
In the popover design guidelines, the wording is "When using a default popover to define a term or explain a concept, use a gray question-circle icon."
If someone were to ask me which icon to use, I would recommend <HelpIcon> to match the icons used in PF components. However, if someone were to reference the design guidelines on org, I think they would assume <OutlinedQuestionCircleIcon> is the correct icon to use.
I guess the questions are:
- Is there a preferred/recommended icon to use, or can they be used interchangeably?
- If our components use
<HelpIcon>, should we mention that in these (or other) docs/design guidelines on org?