Release v19.0.0

[BinaryMuse]

Expected changes

• New BorderBox API (breaking change)
• sx prop + docs
• Removal of StyledOcticon in favor of @primer/styled-octicons
• Flash Refresh Flash refresh + Refactor #777
• Docs updates Update intro/getting started docs #786
• Compilation pipeline updates Create actual browser bundles and transpile everything else #789
• Changes to StateLabel
• Right-align for SelectMenu.Modal

References:

Closes #797
Closes #456
Closes #797
Closes #801
Closes #510
Closes #752

Release notes

🚨 Breaking Changes

• Removed "Segoe UI Symbol" from font stack as it is not compatible with Chinese characters Remove "Segoe UI Symbol" from font stack #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>

  BorderBox and related (breaking) changes #761 @BinaryMuse

• Flex now behaves exactly like Box except that it has its display prop set to flex by default BorderBox and related (breaking) changes #761 @BinaryMuse

• Flex.Item, previously deprecated, has been removed in favor of Box, which now has all the same props BorderBox and related (breaking) changes #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) BorderBox and related (breaking) changes #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'

  Flash refresh + Refactor #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. StateLabel modernization #798 Switch to usage of variant for StateLabel and remove theme calls #752 @tiaanduplessis @BinaryMuse

💅 Enhancements

• Box (and components that inherit from it, like BorderBox) now have access to FLEX system props BorderBox and related (breaking) changes #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. Add sx prop for theme-aware ad-hoc styles #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. Create actual browser bundles and transpile everything else #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

  BorderBox and related (breaking) changes #761 @BinaryMuse

• Allow SelectMenu.Item to be a or button 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 Add align='right' prop to SelectMenu.Modal #800

🐛 Bug Fixes

• Typo fix Fix typo 'Dropdown.Caret.propTpyes' to 'Dropdown.Caret.propTypes' #783 @andrewhillcode
• Add text-align to buttons text-align: center on base button styles #772 @albingroen

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primer-components/e7wfif0lt
✅ Preview: https://primer-components-git-release-1900.primer.now.sh

[emplums]

Might make sense to deprecate StyledOcticon in this release as well, Cole and I would need to create the @primer/styled-octicons package first though, not sure if this release has any urgency, if so we could do it in a different major version

[BinaryMuse]

not sure if this release has any urgency

Nope, no urgency, just wanted to have a base branch to set new PRs to :)

[BinaryMuse]

Since the Octicon changes (most likely) won't be going out in this version, this is now officially ready for review.

[emplums]

Testing sandbox: https://codesandbox.io/s/primer-components-ts-testing-47dbw

[emplums]

one second, need to think about the octicons stuff for a minute!