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?
Jira Issue: PF-992
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?Jira Issue: PF-992