Open office hours - November 16th!November 16, 2018 at 10:00pm
Chat with us about building a React component library, working with Figma, and building design systems at GitHub! 2-3pm PT
November 16, 2018 at 10:04pm
Pretttyyy good. Just working on my team's design token generator stuff. We're aiming to launch our design system to the public at the beginning of the year!
(we being Sprout Social)
No, I actually just rewrote our system to use Style Dictionary (https://amzn.github.io/style-dictionary). We had been using Theo in the past.
Just some scripts that run our tokens (defined in JSON) through some Handlebars temples in order to generate CSS, SCSS, JS variables, etc.
I'll have my coworker @jonrohan respond to your question since he's done a ton of work with our Figma setup!
Hi Emily. First off, thank you for doing this. I am interested in learning more about how you work on aligning Figma files/designs and Primer React components (especially when it comes to things like spacing). What has worked for you?
We’re taking small steps to make everyday life easier for us with quick wins. when I was first thinking about what a solution might look like, naively I thought I would be able to render and dump into figma. But I’m now of the mind that wouldn’t be useful for prod designers using figma. Where I’m at now, I believe setting up theme syncing between react theme files and figma styles and type components is a great next step. this would allow us to update colors, spacing, type sizes in code and have it update all our figma components that use these files. I’d love to hear if you have some ideas on taking it further after that.
November 22, 2018 at 12:57pm
Hi @emplums! I saw in the styled-components spectrum chat that you mentioned you are refactoring primer/components to use styled-components instead of emotion. What are the reasons for considering the move? Thanks a lot in advance! (I know I’m late to the party and office hours have been closed for a week, haha)
November 27, 2018 at 10:17pm
Hey @guillaume-lambert! Thanks for the question & sorry for the late reply. IMO, emotion and styled-components are relatively interchangable and they are both really great libraries. We've decided to move to styled-components for a few reasons: better testing support via jest-styled-components, a built in
as prop (`as` should be coming in emotion v10 though), and what seems like a more robust community (there seems to be more people using styled-components + more tooling being built around it). On top of that, we were already using some SSR utilities from styled-components to render our emotion CSS statically and we felt it would be nice to use either one or the other.
This is something I'm really looking into knowing more about, could you point me to where this is done?
we were already using some SSR utilities from styled-components to render our emotion CSS statically and we felt it would be nice to use either one or the other.
Yep! We're doing that right here in the _document.js file for our Next application (our docs site!) https://github.com/primer/components/blob/master/pages/_document.js#L10-L25
We won't need that
extractCritical call as well once we refactor away from emotion
At first I thought you meant that you were extracting CSS classes now with styled-components. You won’t be supporting this in the future with primer-component, correct?
As in you will keep on having to support both CSS and styled-components style for now?
November 29, 2018 at 12:08am
@guillaume-lambert We've gone back and forth a bit about whether or not we want to support using Primer CSS classes and CSS-in-JS via styled-components and I think that we will eventually move away from using Primer classes and loading the corresponding Primer CSS files. The reason we started building with Primer CSS was mostly because it made it super easy for us to move very fast in developing components since we didn't need to worry much about writing CSS, and it helped us craft an API that loosely followed the API of Primer CSS (this helps developers onboard to using Primer Component much quicker since it uses a similar API).
But! We're slowly starting to remove Primer CSS class names from components and use a fully CSS in JS approach.
Right now Avatar https://github.com/primer/components/blob/master/src/Avatar.js and BorderBox don't use any Primer classes and are fully CSS in JS powered