Icons page redesign #1840

evwilkin · 2020-05-12T16:20:47Z

Closes #1687

This PR rebuilds the icons page based on redesign & updated icon recommendations.

patternfly-build · 2020-05-12T16:24:55Z

PF3 preview: https://patternfly-org-pr-1840-v3.surge.sh/v3
PF4 preview: https://patternfly-org-pr-1840-v4.surge.sh/v4

redallen · 2020-05-15T17:42:28Z

Rebased on master since v4 is about to be deleted.

- gatsby-theme-patternfly-org@1.4.19 - patternfly-org-4@3.52.31

- gatsby-theme-patternfly-org@1.4.20 - patternfly-org-4@3.52.32

- gatsby-theme-patternfly-org@1.4.21 - patternfly-org-4@3.52.33

- patternfly-org-4@3.52.34

- patternfly-org-4@3.52.35

…ot for large icons

- gatsby-theme-patternfly-org@4.0.10 - gatsby-transformer-react-docgen-typescript@4.0.3 - patternfly-org-4@4.0.11

* fix(org): update to RC1 versions * add back doc search

redallen

Can you make the recommendations table searchable, sortable, and have an item count like the previous?

I missed the "-" the first read through... maybe just put "N/A"?

Can we link to the Spinner component and fix the weird tab?

packages/v4/src/content/design-guidelines/styles/icons/IconRecommendations.js

packages/v4/src/content/design-guidelines/styles/icons/IconsTable.js

packages/v4/src/content/design-guidelines/styles/icons/recommendations.js

packages/v4/src/content/design-guidelines/styles/icons/iconsData.js

mcoker · 2020-05-20T15:29:04Z

Under "small icons", the dropdown toggle example - is the down arrow supposed to be small? If so, it's 16x16.

The App launcher menu beside ^ dropdown is a <nav> element (when it isn't a <nav> for the page) and the spacing is wrong because there are 2 .pf-c-app-launcher__group elements in the menu, and the first one is hidden via .ws-icon-size-examples .ws-icons-appLauncher .pf-c-app-launcher__group:first-child, .ws-icon-size-examples .ws-icons-appLauncher .pf-c-app-launcher__toggle { display: none; }. We rely on the :first-child section to have custom spacing for the menu to display properly.

Under "medium icons" the alert has an <h4> title that isn't a section title for the page.

Under "x-large icons" the empty state has an <h5> with the same issue.

Also, the presentation of the small/medium/large/x-large icons box where we include these examples seems a little odd. One of the examples is a screenshot. IMO, they should all be screenshots. That would give you more control over their presentation and you won't end up with the problem of those examples having invalid markup for their role on the page. Here's what it looks like when the nav is hidden, since they're regular html/css and are responsive. It also shows how we need some space between the alignment screenshot and this example box.

And here is the screen right before the nav is hidden, showing the small/medium/large/x-large example box overlapping the alignment image in the left column.

Use this for 'fa' regular icons:

A user would have to bundle their own font-awesome regular package for this to work since we only ship the font-awesome solid webfont. Is that noted anywhere?

In the "Updated icon recommendations" table, the way the names wrap is kinda hard to read. It also doesn't present the same as the "all icons" table above it. If we kept the icon/name cells from wrapping and made it a compact table, I think it would work a lot better.

Old:

New:

gdoyle1 · 2020-05-20T15:52:20Z

@mcoker @evwilkin I wasn't aware of the dropdown not using the small sized caret. I switched that example up with our new labels instead so we don't have to worry about that. I ended up zipping together screenshots of what we can use per icon size and attached them here!
IconPageScreenShots.zip

I have a couple comments on the responsiveness of the page:

Can we drop the icon sizes image below the listing of the icon sizes? (Right now it is dropping below everything)
I'm seeing some weird responsiveness stuff here with the alignment image - we can just drop this image below the text

Everything @mcoker said above covers anything else I was seeing with the table!

@mcoker To answer your question about the fa regular icons - we provide a link back to this page: https://www.patternfly.org/v4/get-started/developers#using-styles for that. We need to add some more text there for:

Fixing the part that says "overpass"
Adding the part about "A user would have to bundle their own font-awesome regular package for this to work since we only ship the font-awesome solid webfont"

Is that something we should open another issue for?

bdellasc · 2020-05-20T21:38:18Z

The page is looking great! I have some feedback:

In the intro text for the icon table, we should link directly to the FA Free filtered set, since that's the only subset of Font Awesome we can use. https://fontawesome.com/icons?d=gallery&m=free

"PatternFly uses custom icons and selections from Font Awesome Free. PatternFly icons are mostly two dimensional and flat. Navigate to Font Awesome’s website to download SVGs of any additional ‘fa’ icons within their free set. Proper attribution should be given as outlined on the Font Awesome site.

Click on any single icon in the table to download it as an SVG. Download all icon SVGs here."

A user would have to bundle their own font-awesome regular package for this to work since we only ship the font-awesome solid webfont. Is that noted anywhere?

I was under the impression that the only limitation we had for Font Awesome was whether or not it was in the "free" set. I didn't think it mattered if it was a solid or regular icon. Was there a reason why we're not including the regular icons? That will really limit our options. Two icons marked as regular (far) on the test page are showing the solid versions in the table (the other regular icons seem ok. Here are the two showing the solid versions:

fa-clock
fa-comments

The regular versions of these icons used in the design kit, so there's a mismatch. There aren't many we use, but they are part of the recommendations.

New Recommendations table:

Can we keep the icon names from wrapping in this table as well? They're very clean when not wrapping in the top table.
row for "fas fa-plus-square" - the second line in the contextual usage text is actually referring to the outlined version of the icon (second icon). Can we vertically align that second line of text with the second icon? If not, we need to modify the second line of text to say: "Use 'pf-icon-add-circle-o' if there are many instances of the icon in a UI (data list, table, etc) to reduce visual noise."
For the 'pf-icon-unplugged' row, can we use 'n/a' instead of a '-' in the new recommendation column?
For pf-icon-help row, can we split the contextual text so the outline version is used for contextual help and the solid is for a help system in the masthead?:
(vertically aligned with the first line of text) "Indicates the availability of contextual help"
(vertically aligned with the second line of text) "Indicates the availability of a help system in the masthead". If not, we need to modify the text to say: " 'far fa-question-circle' indicates the availability of contextual help, while 'fas fa-question-circle' indicates the availability of a help system in the masthead.

Thanks for all the hard work on this page! It's looking great!

…ed alignment img onto its own line

…how when there are multiple updated icons in one row

rachael-phillips · 2020-05-22T19:17:35Z

Is this "design-guidelines" at the top going to go away?

gdoyle1

@evwilkin this looks SO great - I found only 4 things that need to be updated:

The responsiveness when breaking the card below the icon size text, right when it breaks, there is no space between the bottom edge of the card and the text following. Can we bump it up to match what it is when you shrink the screen a little smaller? (24 px)
Screenshot of the spacing right after breaking:

Correct screenshot of the spacing once you keep shrinking the screen:

The "getting started" link in the beginning is broken (should link to https://www.patternfly.org/v4/get-started/developers#using-styles - I think it already is so not sure what's going on)
The "how to get started with icons" link within the All icons text section is also broken (should link to https://www.patternfly.org/v4/get-started/developers#using-styles - I think it already is so not sure what's going on)
The "Spinner component" link isn't going anywhere - should link to https://www.patternfly.org/v4/documentation/react/components/spinner

… header link

evwilkin · 2020-05-22T20:14:35Z

Is this "design-guidelines" at the top going to go away?

@rachael-phillips removed this, thanks!

@gdoyle1 I've updated the responsive breakpoint. The broken links should work as expected when live, this is a known issue in Org with the preview site combined with internal relative links.

gdoyle1

@evwilkin Looks great!!

redallen

LGTM! Thanks @evwilkin.

Merging this for now since all feedback was addressed. Extra followup work can be done later.

bdellasc · 2020-05-26T19:09:50Z

Just verifying that all the fixes were completed based on my comment from last week. Great work everyone, it looks fantastic! Thanks!

evwilkin added DO NOT MERGE design review needed labels May 12, 2020

redallen force-pushed the chore/1687-icons-page branch from e2b5f83 to 44b900f Compare May 15, 2020 17:42

redallen changed the base branch from v4 to master May 15, 2020 17:42

evwilkin force-pushed the chore/1687-icons-page branch from 2eb5299 to 2ae044d Compare May 20, 2020 00:58

patternfly-build and others added 23 commits May 19, 2020 21:47

chore(release): releasing packages [ci skip]

88abe70

- gatsby-theme-patternfly-org@1.4.19 - patternfly-org-4@3.52.31

chore(release): releasing packages [ci skip]

e6d850f

- gatsby-theme-patternfly-org@1.4.20 - patternfly-org-4@3.52.32

chore(2020.06): bump docs and versions.json (patternfly#1839)

41ba6cf

chore(release): releasing packages [ci skip]

4482c11

- gatsby-theme-patternfly-org@1.4.21 - patternfly-org-4@3.52.33

updated to v4, fixed search

88ccbd1

replaced simplelist with applicationlauncher

8442606

added fit content to Name and React columns in all icons table

3d069e6

updated windowrestoreicon to outlined version

444e970

chore(release): releasing packages [ci skip]

3c3f38e

- patternfly-org-4@3.52.34

fixed line break around insert-icon-name code block

9c07510

chore(release): releasing packages [ci skip]

2a1dcad

- patternfly-org-4@3.52.35

fixed sorting and few remaining icons in all icons table

d8c5c42

updating icon size section per new designs

375fa09

fixed iconComponent prop in sideNav.js, added new login page screensh…

795b65d

…ot for large icons

chore(release): releasing packages [ci skip]

48dcff1

- gatsby-theme-patternfly-org@4.0.10 - gatsby-transformer-react-docgen-typescript@4.0.3 - patternfly-org-4@4.0.11

updated to v4, fixed search

e1ad7f5

replaced simplelist with applicationlauncher

9946e1e

fixed line break around insert-icon-name code block

7a3d816

updating icon size section per new designs

c4b0a3d

fix(org): update to RC1 versions (patternfly#1847)

23d9b58

* fix(org): update to RC1 versions * add back doc search

begin icon alignment sections

2fecdbb

built out icon alignment with flex

f5a62e3

uploading missing svgs

14f4c4f

evwilkin requested review from bdellasc, gdoyle1, jschuler and redallen May 20, 2020 04:25

redallen suggested changes May 20, 2020

View reviewed changes

bdellasc mentioned this pull request May 20, 2020

Icons page redesign - add "copy unicode" functionality to icon table #1851

Closed

evwilkin added 6 commits May 21, 2020 12:38

added search to recommended icons

0ffde2f

added sort, Spinner icon to recommendations table

49c98fe

PR feedback: uploaded new images for icon sizes

bbab403

PR feedback: fixed comments & clock icons to outlined versions, wrapp…

46570b7

…ed alignment img onto its own line

PR feedback: fixed bug causing only last line of contextual help to s…

8aa695d

…how when there are multiple updated icons in one row

rearranged icon size/alignment grid items for responsive ordering

282bd9e

evwilkin requested a review from redallen May 22, 2020 16:11

added link to download all icons

b13924a

gdoyle1 suggested changes May 22, 2020

View reviewed changes

PR feedback: updated responsive breakpoint, removed design-guidelines…

807ca97

… header link

evwilkin requested a review from gdoyle1 May 22, 2020 20:14

gdoyle1 approved these changes May 22, 2020

View reviewed changes

redallen approved these changes May 26, 2020

View reviewed changes

redallen merged commit d3e9c3a into patternfly:master May 26, 2020

evwilkin mentioned this pull request Jun 17, 2020

Icon page descriptions #993

Closed

evwilkin removed DO NOT MERGE design review needed labels Jun 17, 2020

mcoker mentioned this pull request Aug 9, 2023

docs(icons): updates icons guidelines as part of content audit. #3689

Merged

Icons page redesign #1840

Icons page redesign #1840

Uh oh!

Conversation

evwilkin commented May 12, 2020

Uh oh!

patternfly-build commented May 12, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

redallen commented May 15, 2020

Uh oh!

redallen left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mcoker commented May 20, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Old:

New:

Uh oh!

gdoyle1 commented May 20, 2020

Uh oh!

bdellasc commented May 20, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rachael-phillips commented May 22, 2020

Uh oh!

gdoyle1 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

evwilkin commented May 22, 2020

Uh oh!

gdoyle1 left a comment

Choose a reason for hiding this comment

Uh oh!

redallen left a comment

Choose a reason for hiding this comment

Uh oh!

bdellasc commented May 26, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

patternfly-build commented May 12, 2020 •

edited

Loading

redallen left a comment •

edited

Loading

mcoker commented May 20, 2020 •

edited

Loading

bdellasc commented May 20, 2020 •

edited

Loading

gdoyle1 left a comment •

edited

Loading