Skip to content

Latest commit

 

History

History
720 lines (451 loc) · 53.2 KB

CHANGELOG.md

File metadata and controls

720 lines (451 loc) · 53.2 KB
Raw

@primer/components

28.3.2

Patch Changes

  • #1368 36f156a0 Thanks @dgreif! - Allow anchorRef to be passed into SelectPanel if you want to use an external anchor

28.3.1

Patch Changes

28.3.0

Minor Changes

  • #1316 4c063317 Thanks @VanAnderson! - The following components have been deprecated in favor of the Box component:

    Component Replacement
    Flex <Box display="flex">
    Grid <Box display="grid">
    Position <Box>
    Absolute <Box position="absolute">
    Fixed <Box position="fixed">
    Relative <Box position="relative">
    Sticky <Box position="sticky">
    BorderBox <Box borderWidth="1px" borderStyle="solid" borderColor="border.primary" borderRadius={2}>

    There is a codemod available to upgrade these components:

    • TypeScript example:

      npx jscodeshift -t node_modules/@primer/react/codemods/deprecateUtilityComponents.js
--parser=tsx path/to/workspace/src/*.tsx

    • Babel example:

      npx jscodeshift -t node_modules/@primer/react/codemods/deprecateUtilityComponents.js
--parser=babel path/to/workspace/src/*.tsx

  • #1336 489a718b Thanks @VanAnderson! - System props are deprecated in all components except Box. Move all system props into the sx prop instead. Example:

    - <Button mr={2}>...</Button>
+ <Button sx={{mr: 2}}>...</Button>

    There is a codemod available to migrate from system props to the sx prop:

    • TypeScript example:

      npx jscodeshift -t node_modules/@primer/react/codemods/removeSystemProps.js
--parser=tsx path/to/workspace/src/*.tsx

    • Babel example:

      npx jscodeshift -t node_modules/@primer/react/codemods/removeSystemProps.js
--parser=babel path/to/workspace/src/*.tsx

Patch Changes

  • #1308 a8f3ca6d Thanks @dgreif! - Focus zones will now update active-descendant on mousemove over focusable elements. ActionList has been updated to handle direct (key press) vs indirect (mousemove, DOM change, etc.) changes to active-descendant, and will use a distinct background color for the directly activated items.

28.2.5

Patch Changes

  • #1251 528e9a41 Thanks @VanAnderson! - Call useOnOutsideClick handlers in reverse order that they are registered, and allow propagation to stop if default is prevented or an non-outside click is detected.
  • #1312 76a38432 Thanks @smockle! - Ensure clicking an AnchoredOverlay’s trigger allows it to close without immediately reopening.

28.2.4

Patch Changes

  • #1293 1148a718 Thanks @smockle! - Restore "fix: Don’t focus first 'Item' of 'DropdownMenu' and 'SelectMenu' on open" by deferring the removal of a temporary tabIndex until focus moves within the container.
  • #1288 15207119 Thanks @dgreif! - Focus zones with an activeDescendantControl will now activate the first descendant as soon as the control element is focused, rather than waiting for an up/down arrow press. Descendants stay active until the control element is blurred. This is a breaking change to useFocusZone, but this behavior is still considered to be in alpha.

28.2.3

Patch Changes

28.2.2

Patch Changes

  • 2793ef48 #1286 Thanks @colebemis! - ThemeProvider now uses the first defined color scheme if passed an invalid color scheme name

28.2.1

Patch Changes

28.2.0

Minor Changes

  • 8368a83e #1238 Thanks @dgreif! - New sizes for Overlay and Dialog. Sizes have been changed from abbreviations to full words. xs -> xsmall, sm -> small, md -> medium, lg -> large, xl -> xlarge. The sizing for Overlay has also been updated to provide a wider range of options. The original values for Overlay were based on the needs of Dialog, but Dialog is not reliant on Overlay so they don't need to have similar sizing. This is technically a breaking change, but is being released as a minor because these components are both still in alpha status.

Patch Changes

  • 02e86095 Thanks @dgreif! - Allow filterValue to be provided to SelectPanel
  • 10df320b #1247 Thanks @dgreif! - Handle overflow and active-descendant scrolling within SelectPanel
  • 25d88c49 #1253 Thanks @dgreif! - Correct font size and truncate for description within ActionList Items
  • 9cb715cd #1258 Thanks @dgreif! - prevent focusTrap from causing a blur if trap container is not in DOM
  • aa7d80fc #1246 Thanks @dgreif! - Fix border radius on buttons and title font-weight in ConfirmationDialog

28.1.1

Patch Changes

  • c1991318 #1158 Thanks @dgreif! - Add background styles for focused action list items, instead of using default outline

28.1.0

Minor Changes

Patch Changes

  • e009e321 #1235 Thanks @VanAnderson! - Dialog properly auto-focuses cancel button by default when originating from a FocusZone/FocusTrap.

28.0.4

Patch Changes

28.0.3

Patch Changes

  • c63fa4b5 #1215 Thanks @dgreif! - Add selectionVariant: 'multiple' for Items. These will use a checkbox input instead of a checkmark icon for selected state
  • 4ab3d175 #1222 Thanks @dgreif! - Trap focus in AnchoredOverlay as soon as it opens, regardless of the event that triggered it to open

28.0.2

Patch Changes

  • d20a5996 #1209 Thanks @dgreif! - Allow Overlay height and width to be set through AnchoredOverlay Allow ActionList Items to supply an id instead of key Performance imporvements when ActionList is not given any groups Enable focus zone as soon as AnchoredOverlay opens
  • d29741ca #1196 Thanks @dgreif! - Allow custom children in ActionItem. text and description can still be provided as a shortcut, but children is now available if you need more control over the rending of the item, without sacrificing benefits from Item by using renderItem.
  • 7aeb53fe #1200 Thanks @dgreif! - Perform ActionMenu actions after overlay has closed. This allows the action to move focus if so desired, without the ActionMenu focus trap preventing focus from moving away.

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/react'

- 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/react
+ import {ThemeProvider} from '@primer/react'

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/react'
+ import {useTheme} from '@primer/react'

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/react'

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