Guidelines updates: Icon

Open Beginner friendly
#4,487 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
68/100
Issue type
Documentation
Clarity
Mostly clear
Activity status
Quiet
Tech stack
javascript

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.

Description

PF Team PF6 Design guidelines

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

Dominant language
JavaScript
Stars
74
Forks
147
Avg merge
4d 11h
Merged PRs (30d)
2

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from patternfly/patternfly-org

All issues in patternfly/patternfly-org

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.