menu

Primer

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

Channels
Team

Open office hours - Nov 2nd

November 2, 2018 at 6:27pm

Open office hours - Nov 2nd

November 2, 2018 at 6:27pm

Chat with us about building a React component library, working with Figma, and building design systems at GitHub! 2-3pm PT


November 2, 2018 at 9:20pm

Good news! We just flipped the switch to make our React components public! ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰https://github.com/primer/components

like-fill
5
  • reply
  • like

<3!

  • reply
  • like

Schweet @emplums, congrats! Really dig your and team's work on this front

  • reply
  • like

Thanks Manny! ๐Ÿ’–

  • reply
  • like

We're sort of soft launching them this week so not making a big public announcement, but feel free to dig around and shoot us any feedback if you have any! :)

like-fill
2
  • reply
  • like

Will do Emily! Looking now, however, any particular guiding points or things to keep in mind while checking out the WIP?

  • reply
  • like

We'd love feedback around: whether or not the props API feels intuitive/easy to learn or any accessibility feedback!

  • reply
  • like

Our docs are here too: https://primer.style/components

  • reply
  • like

Excellent. Do y'all prefer feedback in this channel during office hours or through the issues section, https://github.com/primer/components/issues, or a little mixture of both?

  • reply
  • like

Preferably GitHub Issues but whatever is easiest for you!

  • reply
  • like

general questions are good to post here, but feedback is definitely better in GitHub issues!

  • reply
  • like

Excellent. Alrighty, gonna go check it out; I'll channel feedback through GitHub Issues @broccolini and @emplums, and post general Qs here. ยกWay to go Primer Team!

  • reply
  • like

Thanks so much! We really appreciate it! ๐Ÿ’–

  • reply
  • like

Thank you!

  • reply
  • like

Hey Emily and Diana, one q, out of curiosity and firsthand struggles atm. From your docs, This project uses emotion under the hood to generate static CSS from some component styles, but still relies on Primer CSS for some component styles that haven't yet been ported over.: will Primer live in two eco-systems (CSS/SASS-land and another version in CSS-in-JS via Emotion)), or eventually all live in Emotion? This is something I've been thinking about a lot, specifically how to best and sustainably rollout and maintain a design system without maintaining two or more sources. I'm still reading through things... love the principles

Edited
  • reply
  • like

Hey Emily and Diana, one q, out of curiosity and firsthand struggles atm. From your docs, This project uses emotion under the hood to generate static CSS from some component styles, but still relies on Primer CSS for some component styles that haven't yet been ported over.: will Primer live in two eco-systems (CSS/SASS-land and another version in CSS-in-JS via Emotion)), or eventually all live in Emotion? This is something I've been thinking about a lot, specifically how to best and sustainably rollout and maintain a design system without maintaining two or more sources. I'm still reading through things... love the principles

Our long-term goal is ideally to move entirely to emotion, and also to generate a CSS only version of primer from the react component library. We'll likely be maintaining both versions for a while which creates some overhead, but feels manageable for the time being. Starting off with using the classnames package with our existing primer CSS meant that we could begin developing the public API without the blocker of re-coding all the styles for every component.

Edited
like-fill
1
  • reply
  • like

As an aside, though currently we're using emotion.js, it's possible we'll swap it out for another solution like styled-components which has pretty much the same API. Our focus to start with was to get the public api right and then focus on making the private api better to work with for contributors.

  • reply
  • like

Thatโ€™s great and insightful Diana, ยกgracias!

like-fill
1
  • reply
  • like
private
This conversation has been locked