Skip to content

[bug][docs] Fix numerous docs style issues #2397

Description

@markcaron

There are multiple style issues throughout PFE doc pages:

Activity

  1. zeroedin commented on Mar 10, 2023

    @zeroedin
    Collaborator
    • Fix v1/v2 toggle to be consistent in style
    • Have v1/v2 toggle go directly to All Components (not individual components)

    I believe we are deferring these due to symlinking to the v1 docs and not directly maintaining their templates.

  2. zeroedin commented on Mar 10, 2023

    @zeroedin
    Collaborator
    • Move overview description into page heading

    Due to the usage of pfe-tools to render these pages we can't modify these without a breaking change to child repos.

  3. zeroedin commented on Mar 10, 2023

    @zeroedin
    Collaborator
    • Icon doesn't match PatternFly's

    The difference is between font awesome version 6 and version 5

    https://fontawesome.com/v6/icons/copy?s=solid&f=classic

    https://fontawesome.com/v5/icons/copy?s=solid&f=classic

    @bennypowers was this the intent of pf-icon to use version 6 of fontawesome rather then version 5?

  4. zeroedin commented on Mar 10, 2023

    @zeroedin
    Collaborator
    • Icon size

    The icon sizes are not the same as PFv4 clipboard. Currently, the copy icon is showing up at 10px which is the default size of a <pf-icon> with no-size variant given (eg. size="sm|md|lg").

    pf-icon size API does not allow for a 16px icon, even though this is the size that PFv4 itself uses for many of its components, this issue has come up in several places including pf-tabs and downstream in RHDS. You can override this with CSS prop --pf-icon--size: 16px.

    Patternfly icon states this same intent of 10px = sm,18px = md, 24px = lg, 54px = xl. Even though use cases throughout PFv4 of a 16px size <svg> are used in components for many icons.

    The reason this is being exposed is that these components are not directly using the PF <Icon/> react component like we are reusing the <pf-icon> in our web components. This is the discrepancy that is causing the size issue differences.

  5. zeroedin commented on Mar 10, 2023

    @zeroedin
    Collaborator

    [ ] Font changes on in-page demos, like accordion's constructed stylesheet (i.e., "Red Hat Text" vs "RedHatTextUpdated")

    @brianferry will you take a look at this one with Accordion? I'm pretty sure the solution here is just to remove "RedHatTextUpdated" and replace it with "Red Hat Text" as we won't serve "RedHatTextUpdated" on any of the sites this gets used on. If I understand the issue correctly. I believe @markcaron can expand on that if needed.

  6. markcaron commented on Mar 10, 2023

    @markcaron
    ContributorAuthor

    @zeroedin No need to adjust the band padding. I marked off the item from the checklist above. But, I added a item below it to remove the extra <p> between bands.

  7. bennypowers commented on Oct 18, 2023

    @bennypowers
    Member

    @markcaron @hellogreg please take a quick look and see if we can maybe close this and open some new, targeted issues on the PFE milestone

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions