menu

Primer

For discussing Primer, Octicons, our style guide, and design systems at GitHub ๐Ÿค–๐ŸŽจ

Channels
Team

Open office hours - November 16th!

November 16, 2018 at 10:00pm

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

Hey Emily! I dunno if you remember, but we met briefly at XOXO this year.

  • reply
  • like

Oh hey Chase! How's it going??

  • reply
  • like

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!

  • reply
  • like

(we being Sprout Social)

  • reply
  • like

Ooh awesome! What's the token generator stuff like? Is that in CSS?

  • reply
  • like

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.

  • reply
  • like

Just some scripts that run our tokens (defined in JSON) through some Handlebars temples in order to generate CSS, SCSS, JS variables, etc.

  • reply
  • like

๐Ÿ‘€I hadn't heard of Style Dictionary, that looks pretty cool!

  • reply
  • like

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?

  • reply
  • like

I'll have my coworker @jonrohan respond to your question since he's done a ton of work with our Figma setup!

like-fill
1
  • reply
  • like

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.

  • reply
  • like

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)

  • reply
  • like

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.

  • reply
  • like

If you'd like to read more around this refactor and our decision making process this is a great issue to lurk on! https://github.com/primer/components/pull/362

  • reply
  • like

Much appreciated, thanks a lot for taking the time to reply ๐Ÿ‘Œ

  • reply
  • like

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.
  • reply
  • like

@guillaume-lambert

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

  • reply
  • like

We won't need that extractCritical call as well once we refactor away from emotion

  • reply
  • like

Merci beaucoup @emplums ๐Ÿ‘Œ

  • reply
  • like

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?

  • reply
  • like

As in you will keep on having to support both CSS and styled-components style for now?

  • reply
  • like

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).

  • reply
  • like

But! We're slowly starting to remove Primer CSS class names from components and use a fully CSS in JS approach.

  • reply
  • like

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

  • reply
  • like
Show more messages