search

helpscout / hsds-react

Help Scout Design System (HSDS) — React Component Library
MIT License
86 stars 17 forks source link

Rewrite Icons CSS & New Docs Icons #1056

Closed plbabin closed 2 years ago

plbabin commented 2 years ago

Problem

When importing new icon from figma, we realized that the css we apply on icons (for the icon color) was off and breaking some shape

Before

CleanShot 2022-04-28 at 13 59 42@2x

We update the css to be a bit more specific on when to apply those color change: https://github.com/helpscout/hsds-react/blob/fda8e5012c77297b5a421833f9c75ab5d0b85af6/src/components/Icon/Icon.css.js#L75-L87

After

CleanShot 2022-04-28 at 13 59 30@2x

New icons

At the same time, we imported a couple of new icons from figma:

blockquote

CleanShot 2022-04-28 at 14 50 00@2x

callout

CleanShot 2022-04-28 at 14 50 24@2x

circleArrow

CleanShot 2022-04-28 at 14 50 12@2x

code

CleanShot 2022-04-28 at 14 50 29@2x

dl

CleanShot 2022-04-28 at 14 50 39@2x

h1

CleanShot 2022-04-28 at 14 51 02@2x

table-left

CleanShot 2022-04-28 at 14 54 04@2x

table-top

CleanShot 2022-04-28 at 14 52 56@2x
cloudflare-pages[bot] commented 2 years ago

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: 3e82245
Status: ✅  Deploy successful!
Preview URL: https://149f5606.hsds-react.pages.dev

View logs

kyliedunkley commented 2 years ago

the drag looks off, in figma it shows as circles but the drags (drag and drag-handle) look like an odd square. In addition the small-drag-handle looks wrong too.. not sure if this is just how it is rendered on this screen or if it broke