menu

Primer

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

Channels
Team

Open office hours - 10/11/18

October 10, 2018 at 10:03pm

Open office hours - 10/11/18

October 10, 2018 at 10:03pm

Chat with us about https://primer.style/, https://primer.style/components/, and all things design systems 1-2pm PT / 4-5pm ET on Oct 11th.


October 11, 2018 at 8:50pm

Okay, fine. Halloween-themed CSS it is!

  • reply
  • like
[is=werewolf] { will-change: transform; }
[is=ghost] { will-change: opacity; }
like-fill
2
  • reply
  • like

October 12, 2018 at 8:03pm

Am I at the right place for Open office hours? :)

  • reply
  • like

is it still happening between 4 and 5pm EST?

  • reply
  • like

Today is October 12th

  • reply
  • like

It says Oct. 10th

  • reply
  • like

You are at the wrong place and time :)

  • reply
  • like

haha

  • reply
  • like

I'm new here also, but I think the office hours are here: https://spectrum.chat/primer/office-hours

  • reply
  • like

this is more of an announcement thread I think.

  • reply
  • like

Oh well, next time :)

  • reply
  • like

Hey folks, this is indeed yesterday's weekly open office hours thread. As you can see, nobody was really around to chat then, but we're happy to answer any burning questions here today.

  • reply
  • like

Is the react components still targetted for Oct?

  • reply
  • like

Any ideas why I am getting this sass error? https://github.com/primer/primer/issues/575

  • reply
  • like

Ok, shooting my burning questions:

- What is your CSS migration / extract static strategy?

- What version of Emotion are you using, as extract static as now been deprecated in the latest version?

- Did you consider using CSS Modules?

  • reply
  • like

- How do you handle component customization, for instance an `

  • reply
  • like

`<Alert>` that has `title`, `content`, and `icon`

  • reply
  • like

Would you rather use `<Alert title="My title" />` or `<Alert><AlertTitle>My title</AlertTitle></Alert>`?

  • reply
  • like

and let the consumer do something completely different if they want to by using `children`

  • reply
  • like

@guillaume-lambert Our CSS migration strategy looks something like this:

1. Pull in and globally inject whatever bits of Primer CSS that we need to get individual components up and running.

2. Slowly, but surely, factor out Primer CSS classes and move the styles into Emotion.

We have some nascent ideas about eventually treating the Primer "primitives" (design tokens, essentially) that form the backbone of our Emotion theme as the source of truth for both the React components and Primer CSS, but we're not quite there yet and will probably be maintaining them independently for a while.

We're not using emotion-server in the distributed Primer Components package, but it's a good question because we are using it on the docs site. We'll be looking at a pretty gnarly Flash of Unstyled Content without it, so we've got to figure it out before the package becomes completely unsupported. ☹️

  • reply
  • like

We did look at CSS Modules, but theming support was too coarse for our needs, and the tools around Modules really just aren't as good as those in the Emotion/styled-components/et al realm.

  • reply
  • like

Thanks a lot for your answers πŸ‘Œ

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