Open coreyvickery opened 4 years ago
Icons can either be aligned to the left or the top of text.
Desktop
Mobile
Desktop
Mobile
The icon will remain vertically aligned to the text when the line breaks.
Desktop
Mobile
Desktop
Mobile
The invisible box that houses the icon that's positioned to the left or center of the link.
Spacing legend https://www.patternfly.org/v4/design-guidelines/styles/spacers
@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.
@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.
@starryeyez024 Makes perfect sense. We will defer to this method when using icons next to links.
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.
@starryeyez024 @kylebuch8 See above.
Needs spacing, orientation, multiple text lines..