{"id":56,"date":"2017-09-29T04:09:00","date_gmt":"2017-09-29T04:09:00","guid":{"rendered":"https:\/\/blog.raoulwegat.com\/?p=56"},"modified":"2023-09-05T07:42:55","modified_gmt":"2023-09-05T07:42:55","slug":"intermediate-svg-icons-in-react","status":"publish","type":"post","link":"https:\/\/blog.raoulwegat.com\/?p=56","title":{"rendered":"Intermediate SVG Icons in\u00a0React"},"content":{"rendered":"\n

One of the things Product Designers at Automattic get to do plenty of is to tinker with code. Whether it\u2019s prototyping, writing CSS, or even playing with new tools<\/a>. And that\u2019s what I normally get up to on Hack\/Trash Day \u2014 our internal day to work on something that\u2019s not you\u2019re regular job \u2014 fixing something that needs fixing.<\/p>\n\n\n\n

During last August\u2019s Hack\/Trash Day, I picked \u201creplace Noticons with Gridicons in Calypso<\/a>\u201d. Noticons are our old icon font based icons, and Gridicons<\/a> are our new SVG-based icons.<\/p>\n\n\n\n

One of my icon font to SVG replacements involved creating a half-star Gridicon<\/a> so our Rating component<\/a> in Calypso could be updated to use all SVG-based Gridicons.<\/p>\n\n\n\n

In my Github PR to present the new icon, my colleague Davide Casali<\/a>mentioned how there\u2019d been previous discussion to create intermediate icons by overlaying a solid icon over an outline icon and masking out what you don\u2019t need. This was a brilliant solution to help keep our SVG icon library compact and performant, so I got straight to work.<\/p>\n\n\n\n

HTML\/CSS Prototype<\/h2>\n\n\n\n

First up, I prototyped the rating component using just HTML and CSS at Codepen<\/a>. At it\u2019s core, the rating component has two rows of icons, one positioned absolutely over the other. Masking is handled by both the new clip-path<\/code> property, and the deprecated clip<\/code> properties. Why use a deprecated property? Unfortunately, \u2019clip-path<\/code> is not supported by any Microsoft browsers, but clip<\/code> is still supported by every browser. And I figure that Microsoft won\u2019t be pulling support for clip<\/code> until they introduce clip-path<\/code>.<\/p>\n\n\n\n

It\u2019s important to note that there\u2019s two differences in how clip<\/code> and clip-path<\/code>calculate the masking rectangles:<\/p>\n\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
clip: rect(0, $mask-position, $height, 0)<\/span>;<\/span><\/span>\nclip-path: inset(0 $clip-path-mask-position 0 0)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
rect<\/code> values are positional: top, left, bottom and right; whereas inset<\/code> values are: from-top, from-right, from-bottom and from-left.<\/p>\n\n\n\n
Reactify<\/h2>\n\n\n\n
My JavaScript skills are very far removed from what Automattic\u2019s JavaScript Wranglers are capable of, but I\u2019ve had some exposure to React, so I was determined to give it a good go.<\/p>\n\n\n\n
One of my first realizations was that most of what I had written in SASS, would need to be rewritten into JavaScript\/React.<\/p>\n\n\n\n
For example the SASS mixin to change the outline-only stars:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
@mixin<\/span> <\/span>outline-grey<\/span>(<\/span> $rating <\/span>)<\/span> <\/span>{<\/span><\/span>\n  $inverse-rating<\/span>:<\/span> <\/span>100<\/span> <\/span>-<\/span> $rating<\/span>;<\/span><\/span>\n  <\/span>@if<\/span> $inverse-rating <\/span>\/<\/span> <\/span>20<\/span> <\/span>>=<\/span> <\/span>1<\/span> <\/span>{<\/span><\/span>\n\t<\/span>\/\/ need an integer to make this work<\/span><\/span>\n\t$count<\/span>:<\/span> <\/span>floor<\/span>(<\/span>$inverse-rating <\/span>\/<\/span> <\/span>20<\/span>)<\/span>;<\/span><\/span>\n\t<\/span>\/\/ add a color class to only those stars outside the rating<\/span><\/span>\n\t<\/span>@for<\/span> $i <\/span>from<\/span> <\/span>1<\/span> <\/span>through<\/span> $count <\/span>{<\/span><\/span>\n\t  <\/span>.<\/span>gridicon<\/span>.<\/span>outline-<\/span>#{<\/span>$i<\/span>}<\/span> <\/span>{<\/span><\/span>\n\t\t<\/span>fill<\/span>:<\/span> <\/span>lighten<\/span>(<\/span> $gray<\/span>,<\/span> <\/span>20<\/span>%<\/span> <\/span>)<\/span>;<\/span><\/span>\n\t  <\/span>}<\/span><\/span>\n\t<\/span>}<\/span><\/span>\n  <\/span>}<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
became a JavaScript loop:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
let outlineStyles = <\/span>{<\/span> <\/span>fill<\/span>:<\/span> <\/span>'<\/span>#00aadc<\/span>'<\/span> <\/span>}<\/span>;<\/span><\/span>\nif ( inverseRating \/ 20 >= 1 ) <\/span>{<\/span><\/span>\n\tif ( <\/span>i<\/span> > ( 5 - outlineCount ) ) <\/span>{<\/span><\/span>\n\t\toutlineStyles = <\/span>{<\/span><\/span>\n\t\t\t<\/span>fill<\/span>:<\/span> <\/span>'<\/span>#c8d7e1<\/span>'<\/span>,<\/span><\/span>\n\t\t<\/span>}<\/span>;<\/span><\/span>\n\t<\/span>}<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
But the SASS math to calculate the values:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
$rating<\/span>:<\/span> <\/span>round<\/span>(<\/span>$rating <\/span>\/<\/span> <\/span>10<\/span>)<\/span> <\/span>*<\/span> <\/span>10<\/span>;<\/span><\/span>\n$width<\/span>:<\/span> $height <\/span>*<\/span> <\/span>5<\/span>;<\/span><\/span>\n$mask-position<\/span>:<\/span> <\/span>(<\/span> <\/span>(<\/span> $rating <\/span>\/<\/span> <\/span>100<\/span> <\/span>)<\/span> <\/span>*<\/span> $width <\/span>)<\/span>;<\/span><\/span>\n$clip-path-mask-position<\/span>:<\/span> <\/span>(<\/span> $width <\/span>-<\/span> <\/span>(<\/span> <\/span>(<\/span> $rating <\/span>\/<\/span> <\/span>100<\/span> <\/span>)<\/span> <\/span>*<\/span> $width <\/span>)<\/span> <\/span>)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
remained math:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const roundRating = <\/span>Math<\/span>.round( this<\/span>.<\/span>props<\/span>.<\/span>rating<\/span> \/ 10 ) <\/span>*<\/span> 10<\/span>;<\/span><\/span>\nconst ratingWidth = ( this<\/span>.<\/span>props<\/span>.<\/span>size<\/span> <\/span>*<\/span> 5 )<\/span>;<\/span><\/span>\nconst maskPosition = ( ( roundRating \/ 100 ) <\/span>*<\/span> ratingWidth ) + 'px'<\/span>;<\/span><\/span>\nconst clipPathMaskPosition = ( ratingWidth - ( ( roundRating \/ 100 ) <\/span>*<\/span> ratingWidth ) ) + 'px'<\/span>;<\/span><\/span>\nconst overlayHeightPx = ( this<\/span>.<\/span>props<\/span>.<\/span>size<\/span> ) + 'px'<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
And to add an additional CSS class to a DOM object, you firstly create an object to hold the CSS property:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const <\/span>style<\/span> = <\/span>{<\/span> <\/span>fill<\/span>:<\/span> <\/span>'<\/span>#ffffff<\/span>'<\/span> <\/span>}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
And then add your additional CSS properties using Object.assign like this:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
allStyles<\/span> <\/span>=<\/span> <\/span>Object<\/span>.<\/span>assign<\/span>( <\/span>{},<\/span> <\/span>style<\/span>,<\/span> <\/span>{<\/span> <\/span>color<\/span>:<\/span> <\/span>'<\/span>#c8d7e1<\/span>'<\/span> <\/span>}<\/span> )<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Testing<\/h1>\n\n\n\n
We use component testing<\/a> on Calypso<\/a> to ensure code and UI components work as they should. As the final part of this update, I needed to rewrite the test for this component<\/a> which had been written to count the number of font icons being rendered.<\/p>\n\n\n\n
Because all SVG icons were being rendered all of the time, I needed to take a different approach, and that was to check that the mask being created was of the correct dimension. Basically I was running the component code in reverse and in one test, inside a loop over each value the component would display (0\u2013100).<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> <\/span>ratingList<\/span> <\/span>=<\/span> [ <\/span>10<\/span>,<\/span> <\/span>20<\/span>,<\/span> <\/span>30<\/span>,<\/span> <\/span>40<\/span>,<\/span> <\/span>50<\/span>,<\/span> <\/span>60<\/span>,<\/span> <\/span>70<\/span>,<\/span> <\/span>80<\/span>,<\/span> <\/span>90<\/span>,<\/span> <\/span>100<\/span> ]<\/span>;<\/span><\/span>\n    <\/span>it<\/span>.<\/span>each<\/span>( <\/span>ratingList<\/span>,<\/span> <\/span>'<\/span>should render rating %s as %s<\/span>'<\/span>,<\/span> [ <\/span>'<\/span>element<\/span>'<\/span>,<\/span> <\/span>'<\/span>element<\/span>'<\/span> ]<\/span>,<\/span> <\/span>function<\/span>(<\/span> <\/span>element<\/span> <\/span>)<\/span> <\/span>{<\/span><\/span>\n        <\/span>const<\/span> <\/span>rating<\/span> <\/span>=<\/span> <\/span>element<\/span>,<\/span><\/span>\n            <\/span>size<\/span> <\/span>=<\/span> <\/span>24<\/span>,<\/span> <\/span>\/\/ use default size<\/span><\/span>\n            <\/span>wrapper<\/span> <\/span>=<\/span> <\/span>shallow<\/span>(<\/span><\/span>\n                <\/span><<\/span>Rating<\/span><\/span>\n                    <\/span>rating<\/span>={<\/span> <\/span>rating<\/span> <\/span>}<\/span><\/span>\n                    <\/span>size<\/span>={<\/span> <\/span>size<\/span> <\/span>}<\/span><\/span>\n                <\/span>\/><\/span><\/span>\n            )<\/span>;<\/span><\/span>\n <\/span><\/span>\n        <\/span>const<\/span> <\/span>roundRating<\/span> <\/span>=<\/span> <\/span>Math<\/span>.<\/span>round<\/span>( <\/span>rating<\/span> <\/span>\/<\/span> <\/span>10<\/span> ) <\/span>*<\/span> <\/span>10<\/span>;<\/span><\/span>\n        <\/span>const<\/span> <\/span>ratingWidth<\/span> <\/span>=<\/span> ( <\/span>size<\/span> <\/span>*<\/span> <\/span>5<\/span> )<\/span>;<\/span><\/span>\n        <\/span>const<\/span> <\/span>maskPosition<\/span> <\/span>=<\/span> ( ( <\/span>roundRating<\/span> <\/span>\/<\/span> <\/span>100<\/span> ) <\/span>*<\/span> <\/span>ratingWidth<\/span> )<\/span>;<\/span><\/span>\n        <\/span>const<\/span> <\/span>clipPathMaskPosition<\/span> <\/span>=<\/span> ( <\/span>ratingWidth<\/span> <\/span>-<\/span> ( ( <\/span>roundRating<\/span> <\/span>\/<\/span> <\/span>100<\/span> ) <\/span>*<\/span> <\/span>ratingWidth<\/span> ) )<\/span>;<\/span><\/span>\n        <\/span>const<\/span> <\/span>component<\/span> <\/span>=<\/span> <\/span>wrapper<\/span>.<\/span>find<\/span>( <\/span>'<\/span>div.rating__overlay<\/span>'<\/span> )<\/span>;<\/span><\/span>\n        <\/span>expect<\/span>( <\/span>component<\/span>.<\/span>props<\/span>()<\/span>.<\/span>style<\/span>.<\/span>clipPath<\/span> )<\/span>.<\/span>to<\/span>.<\/span>equal<\/span>( <\/span>'<\/span>inset(0 <\/span>'<\/span> <\/span>+<\/span> <\/span>clipPathMaskPosition<\/span> <\/span>+<\/span> <\/span>'<\/span>px 0 0 )<\/span>'<\/span> )<\/span>;<\/span><\/span>\n        <\/span>expect<\/span>( <\/span>component<\/span>.<\/span>props<\/span>()<\/span>.<\/span>style<\/span>.<\/span>clip<\/span> )<\/span>.<\/span>to<\/span>.<\/span>equal<\/span>( <\/span>'<\/span>rect(0, <\/span>'<\/span> <\/span>+<\/span> <\/span>maskPosition<\/span> <\/span>+<\/span> <\/span>'<\/span>px, <\/span>'<\/span> <\/span>+<\/span> <\/span>size<\/span> <\/span>+<\/span> <\/span>'<\/span>px, 0)<\/span>'<\/span> )<\/span>;<\/span><\/span>\n    <\/span>}<\/span> )<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Challenges<\/h1>\n\n\n\n
The biggest challenge I faced was that the component was written almost two years ago, and the current preferred JavaScript style is ES6. I don\u2019t know enough about the differences to make changes, so I largely left the linter recommendations alone.<\/p>\n\n\n\n
I knew that come the code review, a JavaScript Wrangler would come to the code\u2019s rescue and bring it into 2017. As it happened, that colleague would be Andrija Vucinic<\/a>, who also gave my code a nice cleanup refactor<\/a>.<\/p>\n\n\n\n
If you have a self-hosted WordPress site and use the Jetpack plugin, you can see the component in action on WordPress.com<\/a> in the Manage Plugins page.<\/p>\n\n\n\n
So there you have it, a new and performant way to do rating stars and also how to bring it nicely into React.<\/p>\n\n\n\n
\n\n\n\n
Originally published at <\/em>a8cdesignflow.wordpress.com<\/em><\/a> on September 29, 2017.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
One of the things Product Designers at Automattic get to do plenty of is to tinker with code. Whether it\u2019s prototyping, writing CSS, or even playing with new tools. And that\u2019s what I normally get up to on Hack\/Trash Day \u2014 our internal day to work on something that\u2019s not you\u2019re regular job \u2014 fixing something […]<\/p>\n","protected":false},"author":1,"featured_media":815,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-56","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blog.raoulwegat.com\/index.php?rest_route=\/wp\/v2\/posts\/56","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.raoulwegat.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.raoulwegat.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.raoulwegat.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.raoulwegat.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=56"}],"version-history":[{"count":1,"href":"https:\/\/blog.raoulwegat.com\/index.php?rest_route=\/wp\/v2\/posts\/56\/revisions"}],"predecessor-version":[{"id":791,"href":"https:\/\/blog.raoulwegat.com\/index.php?rest_route=\/wp\/v2\/posts\/56\/revisions\/791"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.raoulwegat.com\/index.php?rest_route=\/wp\/v2\/media\/815"}],"wp:attachment":[{"href":"https:\/\/blog.raoulwegat.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=56"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.raoulwegat.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=56"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.raoulwegat.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=56"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Once I was happy with the result and tested it on our supported browsers, I got started on integrating it into its home, the React component<\/a>.<\/p>\n\n\n\n