Description
We should expose a ds-icon class that can be added to any element, to setup icon-scaling.
This can be used inside of ds-link, and we should revert the styling of img+svg in ds-link to only include vertical alignment ☺️
Takeaways from the discussion on Slack
The main concern with the current .ds-link styling is that we implicitly assume any direct img or svg child is an icon and therefore apply icon sizing. This can unexpectedly resize other graphics, such as logos or images with a non-square aspect ratio.
We discussed trying to distinguish icons from other graphics automatically, for example by only sizing elements without explicit width/height. However, this is difficult to do reliably because different icon sets handle sizing differently, and trying to account for everything users may put inside a link introduces a lot of edge cases.
The preferred direction was therefore:
- Keep safe, generic styling such as alignment on graphics inside
.ds-link.
- Avoid implicitly sizing
img/svg elements based on the assumption that they are icons.
- Make icon sizing explicit/opt-in, potentially through a reusable
.ds-icon primitive rather than link-specific magic. This would also make the behavior useful outside links and avoid assumptions about which icon set consumers use.
- Review the Link documentation. It currently says a link can be clickable “text or graphics,” while
.ds-link is primarily intended for styled text links/icons. For image/logo links where only the focus treatment is needed, .ds-focus may be the more appropriate choice.
- Broader image/illustration sizing should be considered separately (potentially as part of primitives) rather than solved through
.ds-link.
This approach should also avoid introducing another breaking assumption for existing links: graphics would retain their own sizing unless the consumer explicitly opts into icon styling.
Description
We should expose a☺️
ds-iconclass that can be added to any element, to setup icon-scaling.This can be used inside of
ds-link, and we should revert the styling ofimg+svginds-linkto only include vertical alignmentTakeaways from the discussion on Slack
The main concern with the current
.ds-linkstyling is that we implicitly assume any directimgorsvgchild is an icon and therefore apply icon sizing. This can unexpectedly resize other graphics, such as logos or images with a non-square aspect ratio.We discussed trying to distinguish icons from other graphics automatically, for example by only sizing elements without explicit
width/height. However, this is difficult to do reliably because different icon sets handle sizing differently, and trying to account for everything users may put inside a link introduces a lot of edge cases.The preferred direction was therefore:
.ds-link.img/svgelements based on the assumption that they are icons..ds-iconprimitive rather than link-specific magic. This would also make the behavior useful outside links and avoid assumptions about which icon set consumers use..ds-linkis primarily intended for styled text links/icons. For image/logo links where only the focus treatment is needed,.ds-focusmay be the more appropriate choice..ds-link.This approach should also avoid introducing another breaking assumption for existing links: graphics would retain their own sizing unless the consumer explicitly opts into icon styling.