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

[edonehoo]

Closes #3651

[edonehoo]

Issue: icon sizes at top of page are not accurate - all are the same size.

Question: Is the "updated icon recommendations" section needed? It seems like it's been around for a while (?), so I'm not sure the "recently updated" wording is accurate.

[patternfly-build]

Preview: https://patternfly-org-pr-3689-site.surge.sh

[nicolethoen]

@mcoker or @srambach do you know the answer to @edonehoo's question here?

[mcoker]

@edonehoo

Issue: icon sizes at top of page are not accurate - all are the same size.

the code for changing an icon's size has changed. The best way to do it is probably just to use the icon component. To fix those icons:

1. Add "Icon" to the list of components between the {}'s here

   patternfly-org/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/icons/icons.md

   Line 5 in dd8f223

   import { Card, CardBody, Divider, Flex, FlexItem, Grid, GridItem } from '@patternfly/react-core';

   • it should read

     import { Card, CardBody, Divider, Flex, FlexItem, Grid, GridItem, Icon } from '@patternfly/react-core'; 
     

2. Update each icon's code to 1) remove size="..." and 2) wrap the icon in <Icon size="...">...</Icon>. Using the small icon as an example -

   patternfly-org/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/icons/icons.md

   Line 31 in dd8f223

   <CheckCircleIcon size="sm" />

   • it should read

     <Icon size="sm">
       <CheckCircleIcon />
     </Icon>
     

We also need to update the size values on this page. "small" and "medium" changed to 12px and 16px in patternfly/patternfly#5525

Is the "updated icon recommendations" section needed? It seems like it's been around for a while (?), so I'm not sure the "recently updated" wording is accurate.

I'm not sure about that table... even spot checking, I don't know if the recommendations are even current. Looks like that section and table were added 3 years ago in #1840. cc @lboehling @mmenestr do you think we need that section, or can we just remove it from the icons page? For reference, here is the page in question https://patternfly-org-pr-3689-site.surge.sh/design-foundations/icons#current-icon-recommendations

[mmenestr]

I think having the table that outlines what icon to use when is helpful. The wording could definitely use an update though since it's not longer "recently" updated ha!

[edonehoo]

It actually looked like the "updated" recommendations are included in the "all icons" table - so maybe the second table isn't necessary? I removed it for now, but can add back if I'm wrong.

I don't know if it's worth addressing in this PR, but I find the image to be pretty wonky for mobile screen sizes. Maybe, longer term, it might be better to break out each "sm", "md", etc. visual example into their own images? I like it being in a grid and how it's formatted for desktop currently, but it doesn't seem to adapt well.

[mcoker]

🎃👍

Looks good to me! Nice job on those code updates.

I find the image to be pretty wonky for mobile screen sizes. Maybe, longer term, it might be better to break out each "sm", "md", etc. visual example into their own images? I like it being in a grid and how it's formatted for desktop currently, but it doesn't seem to adapt well.

If you'd like a hand with any of that, just lemme know.

[mmenestr]

LGTM!