v13.3.0

🐛 Bug fixes:

• Removed text decoration on button #503
• Fixed Heading margin #506
• Fixed broken link in docs #505

💅 Enhancements

• Added whitespace prop to TYPOGRAPHY #506

v13.2.0

Release 13.2.0

✨ New Components

• Adds Grid component and GRID system prop category #485
• Adds ButtonGroup component #495
• Adds Dialog component #480

💅 Enhancements

• Exports themeGet function that wraps @styled-system/theme-get with Primer theme fallback values #492
• Adds TypeScript types! 🎉 🎉 🎉 #490
• Updates aria-label APIs #498
• Updates as prop documentation #497
• Allows Link to render any valid component type #488

Big thank you to @mxstbr and @colebemis for your contributions to this release! 💖

v13.1.0

💅 Enhancements

• Added display to COMMON group of props
• Make React version not strict
• Upgrades to Octicons 9.0.0, makes them a regular dep again Fixes: #479
• Upgrade Styled System to v5!
• Removes FLEX_CONTAINER and FLEX_ITEM prop categories for a singular FLEX category that contains everything. Still keeping the Flex.Item component around for backwards compatibility.

v13.0.0

🚨 Breaking Changes 🚨

• Removed Donut component #457
• Made Octicons and React external #459 Users will now need to manually install React and Octicons in their project. Helps reduce bundle size.

💅 Enhancements

• Upgraded styled-system to v4 for bundle size improvements :)

🚀 41kb gzipped to 13kb gzipped! cc @mxstbr

v0.0.0-e9e13cb

Primer Components

React components for the Primer Design System

Documentation

Our documentation site lives at primer.style/components. You'll be able to find the information listed in this README as well as detailed docs for each component, our theme, and system props.

Installation

Install @primer/components in your project with npm:

npm install @primer/components

Usage

All of our components are exported by name from @primer/components, so you can import them with:

import {
  Box,
  Button,
  Heading,
  Text
} from '@primer/components'

Primer Components come with all the necessary CSS built-in, so you don't need to worry about including Primer CSS.

Base styles

You can establish base Primer styles for your app by wrapping all of your Primer components in <BaseStyles>:

import {BaseStyles, Box, Heading} from '@primer/components'

export default () => (
  <BaseStyles>
    <Box m={4}>
      <Heading mb={2}>Hello, world!</Heading>
      <p>This will get Primer text styles.</p>
    </Box>
  </BaseStyles>
)

This will set the color, font-family, and line-height CSS properties to the same ones used in primer-base.

Theming

Components are styled using Primer's theme by default, but you can provide your own theme by using styled-component's <ThemeProvider>. If you'd like to fully replace the Primer theme with your custom theme, pass your theme to the <ThemeProvider> in the root of your application like so:

import {ThemeProvider} from 'styled-components'

const theme = { ... }

const App = (props) => {
  return (
    <div>
      <ThemeProvider theme={theme}>
        <div>your app here</div>
      </ThemeProvider>
    </div>
  )
}

If you'd like to merge the Primer theme with your theme, you can do so importing the Primer theme and merging using Object.assign:

import {ThemeProvider} from 'styled-components'
import {theme} from '@primer/components'

const customTheme = { ... }


const App = (props) => {
  return (
    <div>
      <ThemeProvider theme={Object.assign({}, theme, customTheme)}> // matching keys in customTheme will override keys in the Primer theme
        <div>your app here</div>
      </ThemeProvider>
    </div>
  )
}

*Note that using Object.assign will only create a shallow merge. This means that if both themes have a color object, the entire color object will be replaced with the new color object, instead of only replacing duplicate values from the original theme's color object.

Static CSS rendering

If you're rendering React components both server-side and client-side, we suggest following styled-component's server-side rendering instructions to avoid the flash of unstyled content for server-rendered components. This repo's documentation template component demonstrates how to do this in Next.js.

Local Development

To run @primer/components locally when adding or updating components:

1. Clone this repo: git clone https://github.com/primer/components
2. Install dependencies: npm install
3. Run the dev app: npm start

👉 See the contributing docs for more info on code style, testing, and coverage.

Principles

• Everything is a component.
• Aim for total style encapsulation; don't rely on inheritance to provide default styles.
• Build small building blocks with minimal props to keep complexity low.
• Keep system constrained by only including props needed per component.
• Favor extending or wrapping components for more complex operations.
• Maintain design system consistency with utilities as props (for spacing, color, font-size, line-height, widths, and radii).

12.1.0

Merge pull request #451 from primer/update-lock

update package-lock

0.0.0-e9e13cb

Merge pull request #451 from primer/update-lock

update package-lock

v12.1.0

📝 Documentation

• Update Box docs @shawnbot #441
• Update landing page @emplums #440

🐛 Bug Fixes

• Compose Box in Flex components @emplums #438

v12.0.1

Enhancements

• Adds order to Flex.Item

v12.0.0

🚨 Breaking Changes

• Change is prop to use styled-component's as #423

💅 Enhancements

• Make styled-components a peer dependency #422
• Rename start script #424
• Details refactor #429

📝 Documentation

• Update docs homepage #419