menu

Primer

For discussing Primer, Octicons, our style guide, and design systems at GitHub πŸ€–πŸŽ¨

Channels
Team

July 12, 2018 at 4:06pm

Check out our beta component library here! https://primer.github.io/primer-react/

like-fill
3
  • reply
  • like

Awesome. I'm doing a project right now with primer and react and this is going to be very useful. Does it support icons? Where can I download / install primer-react?

  • reply
  • like

If this is the package I think you should make the repo public. I get 404 https://github.com/primer/primer-react and can't clone it.

  • reply
  • like

Hey hey @gimenete! primer-react isn't quite ready to be used in other projects yet, but we're getting super close! Once it's ready for a v0.0.1 we'll make it public and announce here :)

like-fill
2
  • reply
  • like

awesome, thanks!

  • reply
  • like

Regarding icons, we've got a React version of our Octicons here: https://www.npmjs.com/package/@github/octicons-react

  • reply
  • like

oh, great. Thanks!

  • reply
  • like

Heads we are going to change the scope that (and other packages) to @githubprimer/octicons-react in the very near future

  • reply
  • like

Going to be using primer-react in Smee.io - https://github.com/probot/smee/issues/71

:party_parrot:

  • reply
  • like

So cool! Can't wait to see it out in the wild! πŸŽ‰

  • reply
  • like

July 13, 2018 at 8:36pm

We've released v0.0.10-beta today! πŸŽ‰ https://www.npmjs.com/package/primer-react

  • reply
  • like

Release Notes:

πŸŽ‰ New Components!

- OcticonButton component

- UnderlineNav component

- CircleBadge component

πŸš€ Enhancements

- Hush console errors in test output

- Improve test coverage

### πŸ“ Documentation

- Visual updates to Kit

Component Library Documentation: https://primer.github.io/primer-react/components/

like-fill
2
  • reply
  • like

July 20, 2018 at 7:48pm

We released v0.0.11-beta today! πŸ‘―β€β™€οΈhttps://www.npmjs.com/package/primer-react

Release Notes:

πŸš€ Enhancements

- Responsive flex component

- UnderlineNav follow-up tasks

- Improve CircleBadge test coverage

- Add onChange handler to TextInput

- Add margin + padding utility props to all components

πŸ“ Documentation

- Visual updates to Kit

  • reply
  • like

Nice!

  • reply
  • like

Any word on when the source github repo will be opened up?

  • reply
  • like

We're hoping to have it public in the next few weeks! It's our #1 priority right now :)

  • reply
  • like

Our plan is to start with a private beta in the next few weeks, get some feedback, then go fully public some time after that

like-fill
3
  • reply
  • like

August 17, 2018 at 9:17pm

Release Notes:

  • reply
  • like

πŸ’₯ Breaking changes

- Rename Block to Box, Box to BorderBox

- Rename CaretBox to PointerBox

πŸš€ Enhancements

- Add positioning components

- Allow CircleBadge size to be customized

πŸ’… Housekeeping

- Drop `stage-0` Babel preset

- Improve style testing utilities and some component tests

  • reply
  • like

August 23, 2018 at 5:02pm

@emplums, I have few questions regarding the primer-react.

  • reply
  • like

August 24, 2018 at 8:55am

@mittalyashu, what's up?

How did you styles the components?

  • reply
  • like

August 24, 2018 at 9:12pm

How did you styles the components?

We started by using CSS from Primer and used a library called classnames to apply them to components. Recently we starting using emotion.js along with another library called styled-system for our "system props" (for things like color, spacing, typography). We have a theme.js file that defines things like color values etc. Long term we'll probably switch everything currently using classnames to emotion.js.

like-fill
1
  • reply
  • like

September 14, 2018 at 10:28am

We started by using CSS from Primer and used a library called classnames to apply them to components. Recently we starting using emotion.js along with another library called styled-system for our "system props" (for things like color, spacing, typography). We have a theme.js file that defines things like color values etc. Long term we'll probably switch everything currently using classnames to emotion.js.

That's great. What would be the main reason to move everything to emotion? I'm thinking about doing exactly the opposite: I started with styled-components, and I'm thinking about moving to SASS (JS agnostic styleguide) and build React components with classnames, in order to be able to share styles both for non-js pages and React components. If you move everything to emotion, would not you have styles replicated? (i.e. primer sass code for static buttons, and the same styles in SASS and emotion)

  • reply
  • like
Show more messages