patternfly / patternfly/patternfly-org
Guidelines updates: Icon
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 74
- Forks
- 147
- Avg merge
- 4d 11h
- Merged PRs (30d)
- 2
Description
It would probably be helpful to have design guidelines for the <Icon> component. Something that came up recently is that the <Icon> component on its own will deliver an icon with our default icon font-size and color tokens. However, if the <Icon> is used somewhere a component already styles an <Icon> (like a button or a label), you want to use the isInline prop to tell the icon's font-size and color to inherit from it's parent context. We will be adding some docs to the component examples pages around this, but I wonder if this could also be touched on in design guidelines. At a minimum I think some guidelines around icon font-sizes and colors and how the <Icon> component allows you to customize those would be good.
cc @tlabaj @thatblindgeye @srambach
Jira Issue: PF-1284
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Icon component examples pages and the existing design guidelines. Document icon font-size and color guidance, including when to use the isInline prop so an icon inherits styles from its parent. Done means the guidelines clearly explain standalone and component-styled Icon usage.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- design, documentation
- Issue type
- Documentation
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100