v19.0.0

In addition to the changes below, this release also features a new and improved Getting Started guide.

🚨 Breaking Changes

• Removed "Segoe UI Symbol" from font stack as it is not compatible with Chinese characters #769 @skw

• BorderBox has had its default border prop split into borderWidth and borderStyle:

  before:

  BorderBox.defaultProps = {
    border: '1px solid',
    borderColor: 'gray.2',
    borderRadius: 2
  }

  after:

  BorderBox.defaultProps = {
    borderWidth: '1px',
    borderStyle: 'solid',
    borderColor: 'gray.2',
    borderRadius: 2
  }

  While this change was made to fix bugs in the ability to modify BorderBox's border, it is also a breaking change if you use border or border<Direction> shorthand props to modify the border, as these will no longer work. Instead, use non-shorthand props. For example, change

  <BorderBox border={0} borderTop={1}>...</BorderBox>

  to

  <BorderBox borderWidth={0} borderTopWidth={1}>...</BorderBox>

  #761 @BinaryMuse

• Flex now behaves exactly like Box except that it has its display prop set to flex by default #761 @BinaryMuse

• Flex.Item, previously deprecated, has been removed in favor of Box, which now has all the same props #761 @BinaryMuse

• theme.borders has been removed; use the new borderWidths theme values for borderWidth properties (0 is a width of 0, 1 is a width of 1px) #761 @BinaryMuse

🚫 Deprecations

Starting this version, we will be adding a deprecation period for breaking API changes whenever possible. When using a deprecated feature, you will see a warning in the JavaScript console that details how you should change your usage as well as the version at which we plan to remove the deprecated feature.

• The Flash component's scheme prop has been deprecated in favor of a new variant prop. We plan to remove the scheme prop in version 20.

  To migrate:

  Change scheme='blue' to ▶️variant='default'
  Change scheme='green' to ▶️ variant='success'
  Change scheme='red' to ▶️ variant='danger'
  Change scheme='yellow' to ▶️ variant='warning'

  #777 @emplums

• StateLabel's small prop is deprecated in favor of a new variant prop. Use variant="small" to achieve the same result. We plan to remove the small prop in version 20. #798 #752 @tiaanduplessis @BinaryMuse

💅 Enhancements

• Box (and components that inherit from it, like BorderBox) now have access to FLEX system props #761 @BinaryMuse

• Position and its family members (Relative, Absolute, Sticky, and Fixed) now inherit from Box and receive FLEX system props.

• A new prop, sx, has been added to all components to allow theme-aware ad-hoc styles. See the prop's documentation for more information. #755 @BinaryMuse

• Each component can now be imported individually, without importing all of Primer Components. For example, import Box from '@primer/components/lib/Box'. Users using an ESM-compatible module bundler should not use this import style. See the usage docs for more information. #789 @BinaryMuse

• The following colors have been added:

  • border.blackFade
  • border.blue
  • border.blueLight
  • border.grayDarker
  • border.green
  • border.greenLight
  • border.purple
  • border.red
  • border.redLight
  • border.white
  • border.whiteFade
  • border.yellow

  #761 @BinaryMuse

• Allow SelectMenu.Item to be a or button #787

• SelectMenu.Modal has a new property align; set align='right' to right-align the modal @dmarcey #800

🐛 Bug Fixes

• Typo fix #783 @andrewhillcode
• Add text-align to buttons #772 @albingroen

v18.1.0

💅 Enhancements

• Second wave of visual fresh changes #751

v18.0.0

🔨 Breaking changes

Some breaking changes that were meant to be included in v17.0.0 were mistakenly absent. Those changes are included in this release, and the v17.0.0 release notes have been edited to reflect the changes included in that release. Big thanks to @acknosyn for catching and fixing this. (#757, #758)

• Dialog components no longer render with a header by default. #736 @BinaryMuse

  Migration strategy: change any Dialog component with a title prop set as follows:

  <Dialog title="...title...">
    ...content...
  </Dialog>

  to

  <Dialog>
    <Dialog.Header>...title...</Dialog.Header>
    ...content...
  </Dialog>

• Heading now renders an h2 by default instead of an h1 #716 @taylorcjohnson

  Migration strategy: change any use of the Heading component without an as prop:

  <Heading>...</Heading>

  to

  <Heading as="h1">...</Heading>

🐛 Bug Fixes

• Update box shadow to match Primer CSS Next #732 @colebemis

v17.1.1

🤕 Patch

• Fix SelectMenu.MenuContext type definition

v17.1.0

Bug Fixes

• SideNav.Link types is missing selected #733 @wuweiweiwu
• Dropdown type fixes #741

v17.0.0

🔧 Breaking changes

• Dropdown elements no longer provide a Dropdown button by default - this allows users to pass in any type of summary element so the component can work well for different types of dropdowns #729.

  Migration strategy: change any Dropdown component with a title prop set as follows:

  <Dropdown title="hello world">
    <Dropdown.Menu>
      <Dropdown.Item>Item 1</Dropdown.Item>
      <Dropdown.Item>Item 2</Dropdown.Item>
      <Dropdown.Item>Item 3</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown>

  to

  <Dropdown title="hello world">
    <Dropdown.Button>Hello world</Dropdown.Button>
    <Dropdown.Menu>
      <Dropdown.Item>Item 1</Dropdown.Item>
      <Dropdown.Item>Item 2</Dropdown.Item>
      <Dropdown.Item>Item 3</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown>

  We've also added the ability to manage the open state and provide custom handles for onToggle and onOutsideClick to the Details component and Dropdown component for more flexibility and reusability 🎉 🙌

✨ New Components

• SelectMenu #600 @emplums
• ButtonTableList #600 @emplums
• Pagination #739 @BinaryMuse

🐛 Bug Fixes

• Fix maxWidths in theme not being applied #662 @dcastil

v16.3.0

🐛 Bug fixes

• Fix DropdownProps type intersections #725 @clayplumridge
• Add className and css to BaseProps TypeScript type #726 @BinaryMuse
• Update UnderlineNav.Link prop type #727 @emplums
• Let 'TextInput' use 'maxWidth' and 'minWidth' from 'styled-system' #723 @smockle

💅 New components

• Add Popover component #703 @BinaryMuse

v16.2.0

🐛 Bug fixes

• Fixed Dropdown title type definition to allow react nodes #722
• Added new accent color value in the theme & updated UnderlineNav to use the color from the theme #722
• Fixed Grid type definition #721

v16.1.0

💅 Enhancements

• Update Dropdown title type #704 @emplums

🔨 Maintenence

• Bump acorn from 6.4.0 to 6.4.1 #710 @emplums / dependabot
• [FIX] Remove z-index on focused button #712 @emplums
• Add Grid type definition #719 @emplums

✨ New Components!

• Timeline #700 @dmarcey

v16.0.0 Visual Refresh

This release contains changes for the Primer Visual Refresh ✨ There are no breaking changes, so upgrading to v16.0.0 should be fairly seamless.

👉 Stickersheet

Buttons

• Updated border radii
• Updated colors
• Updated box shadows
• Corrected padding on buttons
• Reorganized the theme file to store variables for buttons in a more organized manner
• Made sure all colors, bg, border colors, and box shadows pull from a button specific theme object instead of directly from the color shadows etc objects in the theme.
• Created a new internal ButtonBase component that all exported buttons are based on. This button has all the shared styles between the buttons, variant styles, and disabled behaviors. I did this so that we were not including the styles that are specific to our grey default Button in every other button component. Makes overriding styles more predictable and the internal API cleaner :)

UnderlineNav

• Use new orange color
• Remove bold from selected item

StateLabel

• Updated border radius
• Updated padding
• Updated line height

FilteredSearch

• Updated border radius

TextInput

• Updated border radius
• Updated disabled styles
• Fixed font size
• Updated left padding
• Updated border color

Dropdown

• Inherits updated Button styles
• Updated caret spacing
• Updated border radius of menu

Labels

• Updated padding
• Updated border radius
• Updated line heights
• Updated font sizes
• Made sure outline variant can use the borderColor system prop.
• Updated label documentation

BorderBox

• Updated default border radius

SubNav

• Updated border radius

TabNav

• Updated border radius
• Updated text colors

General System Changes:

• New button object in theme
• New border radius value in theme
• Updated formControl values in theme