feat(helper-text): added helper text component #4089
Conversation
|
Preview: https://patternfly-pr-4089.surge.sh A11y report: https://patternfly-pr-4089-coverage.surge.sh
|
There was a problem hiding this comment.
This looks good @mcoker . My only feedback is that I think the yellow/warning version should use the darker gold text color for better contrast/readability. @mceledonia @doruskova @ajacobs21e can you also take a look?
|
@mcarrano @doruskova thanks! Looking at the alert, we use In the form component, the error helper text and icon both are
Here is this helper text PR with icon/text color that matches the alert component with
|
|
Yep. I think this is the way to go @mcoker . |
|
@mcarrano great, those color updates are in the PR now. |
|
@mcarrano btw I called this component "Helper text" - is that OK or do you want to name it "Rich helper text"? |
|
I think that the name is fine @mcoker . It's more likely people will look for it under this name. |
|
@mcoker Looks great! |
There was a problem hiding this comment.
Hey @mcoker, this is looking great! Couple of questions
- Not sure I understand the static/dynamic concept. It looks like they could be used interchangeably, based on messaging and/or intent.
In this example, I would assume both helper texts are dynamic, but I wouldn't inherently know which variant to use.
I think this could be solved by either changing dynamic to another name or adding documentation explaining when to use which variant.
- Looks like you need to add standard documentation at the end of
HelperText.md
| &.pf-m-dynamic { | ||
| --pf-c-helper-text__item-text--Color: var(--pf-c-helper-text--m-dynamic__item-text--Color); | ||
| --pf-c-helper-text__item-icon--Color: var(--pf-c-helper-text--m-dynamic__item-icon--Color); | ||
| } |
|
@mcarrano wdyt about @mattnolting's comment about naming above? I would expect the design docs to explain the usage, but we can also explain the usage a bit in the component documentation at the bottom of the component, and rename the variation if it could be more clear as to what the variation does. The react implementation will also illustrate the difference better as the dynamic variation changes as the user types in a field. |
|
@mcoker adding a bit of explanation might help. Seems like the distinction is more of a behavioral one than anything to do with the structure of the component, right? So I can see why this distinction might seem unnecessary to someone just using the HTML. |
|
@mattnolting updated the docs |
|
@mattnolting I chatted with @mcarrano offline about the confusion using the dynamic modifier, and didn't have an obvious solution. I'm fine with merging it as is and following up if we need to. wdyt? |
@mcoker wfm! |
|
🎉 This PR is included in version 4.106.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
fixes #4017
Preview - https://patternfly-pr-4089.surge.sh/components/helper-text
Adds 2 types of helper texts:
Static
This is the default helper text. With static helper text, the text color and icon color are the same. By default the text and optional icon are black. Indeterminate is grey, warning is yellow, success is green, invalid is red.
Dynamic
This is an opt in to the helper text component. By default a dynamic helper text and icon are black. Intermediate is grey, warning has yellow icon and grey text, success has green icon and grey text, and invalid has red icon and black text.
A helper text component is a block made up of helper text items. There can be one or more items, and if there are multiple items in a helper text block, there is a
xsspacer between items. A block of multiple items can be regular divs (in the case of regular helper text that isn't necessarily a list), or an HTML list (particularly useful in dynamic/validation helper text).