search

patternfly / patternfly-elements

PatternFly Elements. A set of community-created web components based on PatternFly design.
https://patternflyelements.org/
MIT License
378 stars 93 forks source link

pfe-icon + link #863

Open coreyvickery opened 4 years ago

coreyvickery commented 4 years ago

Needs spacing, orientation, multiple text lines..

starryeyez024 commented 4 years ago

https://docs.google.com/document/d/1QWuD8l2nH3oFqz0IUad1S9V23lEIDYUtBxcSjDRX7Zg/edit

coreyvickery commented 4 years ago

Icon and link

Types

Light theme

Screen Shot 2020-05-12 at 3 59 09 PM

https://xd.adobe.com/spec/3e62e93c-8338-4f31-5040-3b81f0ed5c71-4853/screen/ee7a6461-f786-4b73-b753-64a491f13aec/Icon-and-link-light-theme

Dark theme

Screen Shot 2020-05-12 at 3 59 16 PM

https://xd.adobe.com/spec/3e62e93c-8338-4f31-5040-3b81f0ed5c71-4853/screen/b97165b1-66e4-47a7-a450-122c557b4b0f/Icon-and-link-dark-theme

Alignment

Icon orientation

Icons can either be aligned to the left or the top of text.

Left aligned

Desktop

Left align light Left align dark

Mobile

Left align light mobile Left align dark mobile

Center aligned

Desktop

Center align light desktop Center align dark desktop

Mobile

Center align light mobile Center align dark mobile

Line breaks

The icon will remain vertically aligned to the text when the line breaks.

custom – 2

Styles and interactions

Styles

Light theme

Desktop

Mobile

Dark theme

Desktop

Mobile

Interactions

Light theme

IXD - white

Dark theme

IXD - dark

Icon container

The invisible box that houses the icon that's positioned to the left or center of the link.

Icon box

Spacing

Light theme

Screen Shot 2020-05-12 at 4 22 59 PM

Dark theme

Screen Shot 2020-05-12 at 4 23 54 PM

Spacing legend https://www.patternfly.org/v4/design-guidelines/styles/spacers

coreyvickery commented 4 years ago

@starryeyez024 When this issue is assigned/started, let's discuss if we can feature icons at different sizes instead of using just one size globally; though the icon container can have a max size, certain icons will appear different than others even when used at the same size.

starryeyez024 commented 4 years ago

@coreyvickery That will be tricky. The best way to combat that issue is within the icon itself. Most of our icons have extra space around the edges so they can scale up or down in relation to other icons. I would suggest that if an icon appears too large when sitting alongside its brothers which all have the same container size, then the SVG for that icon should be scaled down inside the viewbox, rather than the code trying to retroactively fix it.

Because currently we have webrh, webdrupal, webdms, webux, and PFE all using these icons, which would mean 5 separate code solutions, per icon. In the future we want PFE to be the source of truth, the others still exist today.

coreyvickery commented 4 years ago

@starryeyez024 Makes perfect sense. We will defer to this method when using icons next to links.

coreyvickery commented 4 years ago

Link color on dark theme has changed to $pf-color-blue-200 or #73BCF7; hover color has changed to $pf-color-blue-100 or #BEE1F4.

https://xd.adobe.com/spec/3e62e93c-8338-4f31-5040-3b81f0ed5c71-4853/screen/b97165b1-66e4-47a7-a450-122c557b4b0f/

coreyvickery commented 4 years ago

@starryeyez024 @kylebuch8 See above.