patternfly-design
patternfly-design copied to clipboard
patternfly
Clarify docs around usage of help icon for tooltip/popover text
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?
Hi @mcoker Just wondering what is final decision according to the recommended icon? It seems that <HelpIcon> should be used and needed to be added to the PF guidance, is that correct?
Hi @mcoker curious about this as well - the new v6 FormGroupLabelHelp component also uses a different icon from the ones mentioned in this issue: QuestionCircleIcon.
Is this the new standard to use in forms? But I'm guessing otherwise it would be one of either <HelpIcon> or <OutlinedQuestionCircleIcon>? The RHOAI Dashboard team would like to clarify the preferred icon choice moving forward to align with PF6 recommendations.
Can we please get a handle of this once and for all because the latest adoption of PF6 makes this significantly worse than before. At least the help icon and outlined question icon were similar. PF6 default stands out as inconsistent now.
For form inputs like the one you linked @jenny-s51 I prefer the
<HelpIcon> rather than QuestionCircleIcon
The filled version is heavy and when there are lots of form labels with popovers it feels too strong.
I can create an issue to update the guidelines
