Repository navigation
[bug][docs] Fix numerous docs style issues #2397
Description
There are multiple style issues throughout PFE doc pages:
- Add new site header style (@markcaron — [docs] Update header bar #2396)
- Add new PFE logo docs: adding new PFE logo SVG #2401
-
Fix v1/v2 toggle to be consistent in style(see comment below) -
Have v1/v2 toggle go directly to All Components (not individual components)(see comment below)
- Page headings
- Add back in gray background behind page headings docs: improvements #2398
-
Move overview description into page heading(see comment below)
- Add max-width to content docs: improvements #2398
- Bands
-
Fix spacing between "bands"(see comment below) - Remove extra
<p>between bands ([docs][bug] Remove extra spacing between bands coming from extra <p> #2419) docs: hide empty <p> elements #2421
-
- Components
- Accordion
- API content/sections doesn't match PF (should mimic) docs(accordion): improve docs to more closely match PFv4 #2417
- Clipboard copy
- Icon doesn't match PatternFly's (see comment below)
- Icon size fix(clipboard-copy): icon size and input-group styles #2418
- Bottom border doesn't lineup is both versions fix(clipboard-copy): icon size and input-group styles #2418
- Accordion
- Font changes on in-page demos, like accordion's constructed stylesheet (i.e., "Red Hat Text" vs "RedHatTextUpdated") fix(accordion): fixing font-family styling, fixed height demo #2427
- Get Started theming example uses
cornflowerbluewhich seems to be a poor color choice. docs: update developer content #2409 - Blog fixes Fixed in docs: fix blog layout and component headers #2459
- Fix favicon Fixed in docs: fix favicon not appearing in url bar #2456
- Fix "Get Started" CTA on homepage (@eyevana in progress) docs: set text color to white on hover #2457
- Accordion page focus bug PR fix(accordion): removing auto focus on expanded in the header #2458
Activity
zeroedin commentedon Mar 10, 2023
I believe we are deferring these due to symlinking to the
v1docs and not directly maintaining their templates.zeroedin commentedon Mar 10, 2023
Due to the usage of
pfe-toolsto render these pages we can't modify these without a breaking change to child repos.zeroedin commentedon Mar 10, 2023
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-iconto use version 6 of fontawesome rather then version 5?zeroedin commentedon Mar 10, 2023
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-iconsize 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 includingpf-tabsand 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.zeroedin commentedon Mar 10, 2023
@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.
markcaron commentedon Mar 10, 2023
@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.bennypowers commentedon Oct 18, 2023
@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