Skip to content

Latest commit

 

History

History
491 lines (323 loc) · 35.3 KB

CHANGELOG.md

File metadata and controls

491 lines (323 loc) · 35.3 KB
Raw

@primer/components

28.0.1

Patch Changes

  • b319ce43 #1197 Thanks @dmarcey! - Typescript declare files will now be published to the lib-esm directory, as well as lib

28.0.0

Major Changes

  • 5f85394d #1157 Thanks @dgreif! - Removed useMouseIntent in favor of :focus-visible. With the removal of useMouseIntent, the intent-mouse class will no longer be added to the <body>. Since :focus-visible is a relatively new psuedo-class, a polyfill is included. Any focused elements that meet the criteria for :focus-visible will also have a focus-visible class added to them by the polyfill.

Patch Changes

27.0.0

Major Changes

  • db478205 #1147 Thanks @colebemis! - Type definitions are now being generated by TypeScript instead of manually maintained. These new type definitions may differ from the previous type definitions and cause breaking changes. If you experience any new TypeScript errors, feel free to create an issue or reach out in Slack (#design-systems).

    Breaking changes

    • The following types are no longer exported:

      BaseProps
UseDetailsProps
AnchoredPositionHookSettings
AnchorAlignment
AnchorSide
PositionSettings
PaginationHrefBuilder
PaginationPageChangeCallback
PositionComponentProps

    • Props are now defined with types instead of interfaces which means in some cases you may not be able to create interfaces that extend them. To work around this issue, you may need to convert your interfaces to types:

      import {BoxProps} from '@primer/components'

- interface MyFancyBox extends BoxProps {...}
+ type MyFancyBox = BoxProps & {...}

    • Some components now expect more specific ref types. For example:

      - const ref = React.useRef<HTMLElement>(null)
+ const ref = React.useRef<HTMLButtonElement>(null)

return <Button ref={ref}>...</Button>

26.0.0

Major Changes

  • 016a273f #1115 Thanks @VanAnderson! - Removes deprecated presentational theme variables in favor of functional variables for styling components that are consistent across multiple themes.

    Migration guide

    If you don't use any color-related system props (e.g. color, bg, borderColor), all components should work without changes. If you're using color-related system props, you'll need to update them to use the new functional variables. Reference the tables below to see how old variables map to new functional variables.

    If you have any questions, feel free to reach out in the #design-systems channel.

    Text

    v25 v26
    color="text.gray" color="text.secondary"
    color="text.grayLight" color="text.tertiary"
    color="text.grayDark" color="text.primary"
    color="text.red" color="text.danger"
    color="text.white" color="text.inverse"
    color="gray.6" color="text.secondary"
    color="gray.5" color="text.tertiary"
    color="gray.9" color="text.primary"
    color="red.6" color="text.danger"
    color="white" color="text.inverse"
    color="blue.5" color="text.link"
    color="gray.4" color="text.disabled"
    color="green.5" color="text.success"
    color="yellow.8" color="text.warning"

    Icon

    v25 v25
    color="gray.9" color="icon.primary"
    color="gray.6" color="icon.secondary"
    color="gray.4" color="icon.tertiary"
    color="blue.5" color="icon.info"
    color="red.5" color="icon.danger"
    color="green.6" color="icon.success"
    color="yellow.8" color="icon.warning"

    Border

    v25 v26
    borderColor="border.blue" borderColor="border.info"
    borderColor="border.blueLight" n/a
    borderColor="border.grayLight" borderColor="border.primary"
    borderColor="border.grayDark" borderColor="border.tertiary"
    borderColor="border.grayDarker" n/a
    borderColor="border.green" borderColor="border.success"
    borderColor="border.greenLight" n/a
    borderColor="border.purple" n/a
    borderColor="border.red" borderColor="border.danger"
    borderColor="border.redLight" n/a
    borderColor="border.white" borderColor="border.inverse"
    borderColor="border.whiteFace" n/a
    borderColor="border.yellow" borderColor="border.warning"
    borderColor="border.blackFade" borderColor="fade.fg15"
    borderColor="border.whiteFade" borderCOlor="fade.white15"
    borderColor="blue.5" borderColor="border.info"
    borderColor="gray.2" borderColor="border.primary"
    borderColor="gray.3" borderColor="border.tertiary"
    borderColor="green.4" borderColor="border.success"
    borderColor="red.5" borderColor="border.danger"
    borderColor="white" borderColor="border.inverse"

    Background

    v25 v26
    bg="white" bg="bg.primary"
    bg="bg.grayLight" bg="bg.secondary"
    bg="bg.gray" bg="bg.tertiary"
    bg="bg.grayDark" bg="bg.canvasInverse"
    bg="blue.0" bg="bg.info"
    bg="blue.5" bg="bg.infoInverse"
    bg="red.0" bg="bg.danger"
    bg="red.5" bg="bg.dangerInverse"
    bg="green.1" bg="bg.success"
    bg="green.5" bg="bg.successInverse"

    Labels

    Note the change in pluralization from 'labels' to 'label'.

    v25 v26
    color="labels.grayDarkText" color="label.primary.text
    borderColor="labels.gray" borderColor="label.primary.border
    color="labels.grayText" color="label.secondary.text
    borderColor="labels.gray" borderColor="label.secondary.border
    color="labels.blueText" color="label.info.text
    borderColor="labels.blue" borderColor="label.info.border
    color="labels.greenText" color="label.success.text
    borderColor="labels.green" borderColor="label.success.border
    color="labels.yellowText" color="label.warning.text
    borderColor="labels.yellow" borderColor="label.warning.border
    color="labels.redText" color="label.danger.text
    borderColor="labels.red" borderColor="label.danger.border
    color="labels.orangeText" color="label.primary.text
    borderColor="labels.orange" borderColor="label.primary.text
    color="labels.pinkText" n/a
    borderColor="labels.pink" n/a
    color="labels.purpleText" n/a
    borderColor="labels.purple" n/a

    Counters

    v25 v26
    scheme="gray" scheme="primary"
    scheme="gray-light" scheme="secondary"

    Timeline

    v25 v26
    bg="red.5" bg="prState.closed.bg"
    bg="green.5" bg="prState.open.bg"
    bg="purple.5" bg="prState.merged.bg"
    bg="gray.5" bg="prState.draft.bg"
    color="white" (context: closed PR icon) color="prState.closed.text"
    color="white" (context: open PR icon) color="prState.open.text"
    color="white" (context: merged PR icon) color="prState.merged.text"
    color="white" (context: merged PR icon) color="prState.draft.text"

25.0.0

Major Changes

  • 8799f74a #1112 Thanks @colebemis! - Primer React now supports color modes! 🎉

    See the new Theming documentation for more details.

    Breaking changes

    • You'll need to replace the ThemeProvider from styled-components with the new Primer React ThemeProvider:
    - import {ThemeProvider} from 'styled-components'
- import {theme} from '@primer/components
+ import {ThemeProvider} from '@primer/components'

function App() {
  return (
-   <ThemeProvider theme={theme}>
+   <ThemeProvider>
      <div>your app here...</div>
    </ThemeProvider>
  )
}
    • The structure of the theme object has changed to support color schemes:
    const theme = {
- colors,
- shadows,
+ colorSchemes: {
+   light: {
+     colors,
+     shadows,
+   },
+   dark: {...},
+   dark_dimmed: {...},
+ },
  space,
  fonts,
  fontSizes,
  fontWeights,
  lineHeights,
  borderWidths,
  radii,
  breakpoints,
  sizes,
}
    • The theme.colors and theme.shadows objects are no longer available from the theme export. Use the useThemehook instead:
    - import {theme} from '@primer/components'
+ import {useTheme} from '@primer/components'

function Example() {
+ const {theme} = useTheme()
  const myColor = theme.colors.text.primary
  ...
}

Patch Changes

24.0.0

Major Changes

  • beef075e #1094 Thanks @colebemis! - Components no longer have a default theme prop. To ensure components still render correctly, you'll need pass the Primer theme to a styled-components <ThemeProvider> at the root of your application:

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

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

Patch Changes

  • e93cf268 #1092 Thanks @bscofield! - Use functional color variables in Caret, CircleBadge, Pagehead, ProgressBar, and Popover

23.2.1

Patch Changes

  • a42162c0 #1087 Thanks @emplums! - Fix up styles in TabNav allowing for items positioned on the right end of TabNav

23.2.0

Minor Changes

Patch Changes

23.1.0

Minor Changes

Patch Changes

23.0.4

Patch Changes

23.0.3

Patch Changes

23.0.2

Patch Changes