v35.6.0

Permalink to documentation

Minor Changes

• #2191 7edf1347 Thanks @mperrotti! - Adds responsive behavior to SegmentedControl's fullWidth prop.

• #2174 62dbc981 Thanks @colebemis! - Add a responsive hidden prop to PageLayout.Header, PageLayout.Pane, PageLayout.Content, and PageLayout.Footer that allows you to hide layout regions based on the viewport width. Example usage:

  // Hide pane on narrow viewports
  <PageLayout.Pane hidden={{narrow: true}}>...</PageLayout.Pane>

• #2199 fb385b63 Thanks @colebemis! - * Updated the position prop in PageLayout.Pane to use the new responsive prop API introduced in #2174.

  • Deprecated the positionWhenNarrow prop in favor of the new responsive prop API

  Before

  position="start"
  positionWhenNarrow="end"
  

  After

  position={{regular: 'start', narrow: 'end'}}
  

• #2201 885064ed Thanks @colebemis! - Add padding prop to PageLayout.Header, PageLayout.Content, PageLayout.Pane, and PageLayout.Footer

• #2164 2b5c86e5 Thanks @mperrotti! - Adds support for a responsive 'variant' prop to the SegmentedControl component

• #2212 04d9d9c1 Thanks @colebemis! - Add a sticky prop to the PageLayout.Pane component that provides a convenient way for you to make side panes sticky:

  <PageLayout>
  - <PageLayout.Pane>...</PageLayout.Pane>
  + <PageLayout.Pane sticky>...</PageLayout.Pane>
    <PageLayout.Content>...</PageLayout.Content>
  </PageLayout>

• #2198 4d9b7db9 Thanks @colebemis! - * Updated the divider prop in PageLayout.Header, PageLayout.Pane, and PageLayout.Footer to use the new responsive prop API introduced in #2174.

  • Deprecated the dividerWhenNarrow prop in favor of the new responsive prop API

  Before

  divider="line"
  dividerWhenNarrow="filled"
  

  After

  divider={{regular: 'line', narrow: 'filled'}}
  

Patch Changes

• #2024 5321f1c9 Thanks @siddharthkp! - ActionMenu: Remove focus trap to enable Tab and Shift+Tab behavior and fix initial focus on click

• #2186 e28aadbd Thanks @mperrotti! - Updates SegmentedControl styles to use component primitives.

• #2171 384ae6b9 Thanks @anleac! - Support issues closed as not planned, and correct the standard issue closed backgroud colour

• #2157 77e7ab05 Thanks @iansan5653! - Add InlineAutocomplete component, useCombobox hook, and useSyntheticChange hook to drafts

• #2189 35716587 Thanks @mperrotti! - Makes SegmentedControl uncontrolled by default.

• #2196 5ff5bb81 Thanks @mattcosta7! - update types to allow children for react 18

• #2219 af534f15 Thanks @iansan5653! - Fix slots infinite rendering when no context prop is provided

• #2182 47725a92 Thanks @iansan5653! - - Add MarkdownEditor and MarkdownViewer draft components. The MarkdownEditor is also known as the CommentBox component

  • Add useUnifiedFileSelect, useIgnoreKeyboardInputWhileComposing, useDynamicTextareaHeight, and useSafeAsyncCallback draft hooks

• #2173 ed609719 Thanks @mperrotti! - Updates styles for the Select component so that the focus outline is even all the way around.

• #2216 82fd8c35 Thanks @iansan5653! - Change createSlots to use layout effects when registering slots

• #2185 3756a1ed Thanks @mattcosta7! - Set ConfirmationDialog initial focus based on the confirmationButtonVariant. When danger autoFocus the cancel button, otherwise autoFocus the confirmation button

• #2166 75d21745 Thanks @mattcosta7! - button should be polymorphic

• #2220 f4ef7b4b Thanks @mperrotti! - - Fixes role and keyboard behavior for SegmentedControl.

  • Fixes a bug where icon-only SegmentedControl buttons did not fill the parent width when the fullWidth prop was set
  • Fixes a bug where click handlers were not passed correctly when the responsive variant was set to 'hideLabels'

• #2204 522f5806 Thanks @iansan5653! - Replace useCombinedRefs with useRefObjectAsForwardedRef

• #2221 9ce64937 Thanks @josepmartins! - Overlay documentation fixes

v35.5.0

Permalink to documentation

Minor Changes

• #2180 300025d1 Thanks @mattcosta7! - Update the primer/primitives dependency

Patch Changes

• #2150 63a2de51 Thanks @dgreif! - Ensure all files in lib-esm are in fact esm and not CommonJS

• #2145 a2950ac4 Thanks @mperrotti! - Updates SegmentedControl component's keyboard navigation to align with the recommendations of GitHub's accessibility team.

• #2143 d9b161a0 Thanks @mperrotti! - Fixes bugs in form components discovered while fixing/improving Storybook and docs.

v35.4.0

Permalink to documentation

Minor Changes

• #2108 e5be3db3 Thanks @mperrotti! - Adds a draft component to render a basic segmented control.

• #2139 f17446e0 Thanks @owenniblock! - Changes focus rules of TabNav to match WAI-ARIA rules for tablist

Patch Changes

• #2099 40da598e Thanks @siddharthkp! - AnchoredOverlay: aria-expanded attribute is removed from anchor when overlay is not open

• #2155 003cbcf0 Thanks @mperrotti! - Update Checkbox component to useIsomorphicLayoutEffect instead of useLayoutEffect to support SSR

• #2154 96ad635b Thanks @mperrotti! - Allow "falsely/empty" Autocomplete.Input values

• #2153 ce45de30 Thanks @willglas! - Add AutocompleteContext to Autocomplete component exports

• #2105 c7bbd06f Thanks @siddharthkp! - ActionMenu: Replace typeahead behavior with single key mnemonics

• #2125 78dc8134 Thanks @owenniblock! - Adds roles of tablist and tab to the TabNav component, required rearranging the HTML elements to be semantically correct

• #2149 b3a98bac Thanks @dgreif! - Converted commonjs require of focus-visible to an esm import

• #2120 53713b2f Thanks @colebemis! - Deprecate SideNav in favor of NavList.

  Before

  <SideNav aria-label="Main">
    <SideNav.Link href="/" selected>
      Home
    </SideNav.Link>
    <SideNav.Link href="/about">About</SideNav.Link>
    <SideNav.Link href="/contact">Contact</SideNav.Link>
  </SideNav>

  After

  <NavList aria-label="Main">
    <NavList.Item href="/" aria-current="page">
      Home
    </NavList.Item>
    <NavList.Item href="/about">About</NavList.Item>
    <NavList.Item href="/contact">Contact</NavList.Item>
  </NavList>

• #2133 65fcd9f2 Thanks @mattcosta7! - Passthrough ActionList.Group props from NavList.Group

• #2158 ac92de47 Thanks @owenniblock! - Fixes issue when tabs are not links

Documentation

https://primer.style/react

https://primer-1ccf29cffb-13348165.drafts.github.io

v35.3.0

Minor Changes

• #2112 74e1d138 Thanks @colebemis! - NavList is ready to use. You can now import it from the main bundle:

  import {NavList} from '@primer/react'

Patch Changes

• #2083 ea69ccd6 Thanks @ty-v1! - Export new Dialog component from the @primer/react/drafts bundle:

  - import {Dialog} from '@primer/react/lib-esm/Dialog/Dialog'
  + import {Dialog} from '@primer/react/drafts'

• #2117 6e3532cf Thanks @dgreif! - Allow minor version updates for production dependencies

• #2095 db5e629c Thanks @hectahertz! - Communicate the SelectPanel multi-select capability to assistive technologies.

Documentation

https://primer-3d95468836-13348165.drafts.github.io/

v35.2.2

Patch Changes

• #2058 ab30f14a Thanks @colebemis! - Add draft of NavList component

• #2038 1c2eeb9c Thanks @mperrotti! - Fixes accessibility bugs in the Select component.

• #2076 05301033 Thanks @colebemis! - Draft NavList.Item now accepts an as prop, allowing it to be rendered as a Next.js or React Router link

• #2082 3252b74c Thanks @mperrotti! - Fixes broken links in the documentation

• #2075 56dbbd32 Thanks @colebemis! - Fix overflow issues in PageLayout.Content

  Before	After

• #2087 b319b29d Thanks @mperrotti! - Prevents the onRemove prop from being passed through to the HTML element from Token, AvatarToken, and IssueToken.

• #2077 30f93ffb Thanks @colebemis! - Adds support for the sx prop on the draft implementation of NavList and all its subcomponents (e.g., NavList.Item)

• #2050 0f9edcac Thanks @mperrotti! - Finishes updating components with the global focus styles defined in Primer CSS (this PR)

• #2054 a682735f Thanks @colebemis! - Fixes layout bug with ButtonGroup by changing the display property from inline-block to inline-flex

• #2064 62d90af8 Thanks @colebemis! - Add support for sub-items in draft implementation of NavList

• #2057 c8f7e235 Thanks @mperrotti! - - adds color-scheme style to inputs so they get the correct user-agent dark/light styles

  • crops ToggleSwitch knob's shadow inside the toggle switch boundaries
  • changes FormControl styles to prevent <select>, <textarea>, <input> from filling the parent's width when the block prop has not been passed to the input component

• #2048 4e15985b Thanks @siddharthkp! - ThemeProvider: Bug fix, in colorMode=auto, the theme now syncs with system changes.

v35.2.1

Patch Changes

• #2013 5f6c5e22 Thanks @mperrotti! - 1. Fix a spacing issue with the loading spinner in a TextInputWithTokens
  2. Bolds form validation text to be visually balanced with the icon

• #2053 231c70b9 Thanks @langermank! - Namespace UnderlineNav

• #2033 0d7a871a Thanks @mperrotti! - - Text input inner action's hover bg should not touch the text input edges

  • Increases touch target area of the text input inner action button
  • Deprecated children and variant props on the TextInputInnerAction component, but they're still supported for now.

v35.2.0

Minor Changes

• #1947 edc85c96 Thanks @mperrotti! - Adds the option to render a trailing action inside of the TextInput component

• #1933 ae7650f1 Thanks @mperrotti! - Adds a toggle switch component

Patch Changes

• #1973 adbcd3bf Thanks @colebemis! - The PageLayout component now renders HTML5 landmark elements (header, aside, footer) to improve the navigation experience for people using assistive technologies (like screen readers)

• #1998 cd8a5bb3 Thanks @mperrotti! - Updates the API for token components to align with our size-naming ADR, avatar guidelines, and icon guidelines

• #2002 3ebc1bb0 Thanks @dgreif! - Update @primer/behaviors for better ESM compatibility

• #2007 a8b3ed16 Thanks @pksjce! - Add button focus styles

v35.1.0

Minor Changes

• #1942 3f50ef54 Thanks @mperrotti! - Adds button element selector to FilteredSearch button styles

• #1920 40ed423e Thanks @mperrotti! - Adds a loadings state to our text input components

• #1961 767d4166 Thanks @simurai! - Bump primer/primitives to 7.5.1

Patch Changes

• #1970 3b236044 Thanks @siddharthkp! - ActionMenu: Fix styles for windows high contrast mode

• #1981 e9bb5956 Thanks @mperrotti! - Ensures select option text has acceptable contrast in Firefox when in dark mode

• #1945 ef3b58a1 Thanks @pksjce! - Icon button fixes: Removes iconLabel and adds aria-label to the type

• #1959 2025036e Thanks @colebemis! - Fix TextInput types

• #1968 1b01485a Thanks @mperrotti! - Instead of rendering unexpected FormControl children before the rest of the content, we render them in the same spot we'd normally render a Primer input component

• #1967 c83a06f0 Thanks @pksjce! - Add overlay props to Autocomplete.Overlay

• #1955 77e123f4 Thanks @pksjce! - Add disabled color and backgroundColor to Button.Counter

v35.0.1

Patch Changes

• #1958 be8f9014 Thanks @siddharthkp! - ActionList: Add focus styles for Windows high contrast mode
  ActionList: Fix incorrect role for ActionList.Group outside ActionMenu

• #1949 e430bd8b Thanks @colebemis! - FormControl now accepts a ref prop

• #1960 26c7784d Thanks @colebemis! - Checkbox: value prop is now optional

• #1935 40c93d8b Thanks @pksjce! - Add monospace prop to textinput

v35.0.0

Major Changes

• #1910 e1e8d478 Thanks @colebemis! - ActionList2 exported types are now prefixed with ActionList:

  ListProps → ActionListProps
  GroupProps → ActionListGroupProps
  ItemProps → ActionListItemProps
  DescriptionProps → ActionListDescriptionProps
  LeadingVisualProps → ActionListLeadingVisualProps,
  TrailingVisualProps → ActionListTrailingVisualProps
  

  ActionMenu2 exported types are now prefixed with ActionMenu:

  MenuButtonProps → ActionMenuButtonProps
  MenuAnchorProps → ActionMenuAnchorProps
  

• #1910 e1e8d478 Thanks @colebemis! -
  

  ActionList

  ActionList has been rewritten with a composable API, design updates and accessibility fixes.

  See full list of props and examples: https://primer.style/react/ActionList

  Before (v34)	After (v35)
  <ActionList items={[ {text: 'New file'}, {text: 'Copy link'}, {text: 'Edit file'}, ActionList.Divider, {text: 'Delete file', variant: 'danger'} ]} />	<ActionList> <ActionList.Item>New file</ActionList.Item> <ActionList.Item>Copy link</ActionList.Item> <ActionList.Item>Edit file</ActionList.Item> <ActionList.Divider /> <ActionList.Item variant="danger">Delete file</ActionList.Item> </ActionList>
  <ActionList showItemDividers items={[ { key: '0', leadingVisual: LinkIcon, text: 'github/primer' }, { key: '1', leadingVisual: () => <Avatar src="https://github.com/mona.png" />, text: 'mona', description: 'Monalisa Octocat', descriptionVariant: 'block' }, { key: '2', leadingVisual: GearIcon, text: 'View Settings', trailingVisual: ArrowRightIcon } ]} />	<ActionList showDividers> <ActionList.Item> <ActionList.LeadingVisual> <LinkIcon /> </ActionList.LeadingVisual> github/primer </ActionList.Item> <ActionList.Item> <ActionList.LeadingVisual> <Avatar src="https://github.com/mona.png" /> </ActionList.LeadingVisual> mona <ActionList.Description variant="block">Monalisa Octocat</ActionList.Description> </ActionList.Item> <ActionList.Item> <ActionList.LeadingVisual> <GearIcon /> </ActionList.LeadingVisual> View settings <ActionList.TrailingVisual> <ArrowRightIcon /> </ActionList.TrailingVisual> </ActionList.Item> </ActionList>
  <ActionList groupMetadata={[ {groupId: '0', header: {title: 'Live query'}}, {groupId: '1', header: {title: 'Layout'}} ]} items={[ {key: '0', text: 'repo:github/github', groupId: '0'}, {key: '1', text: 'Table', groupId: '1'}, {key: '2', text: 'Board', groupId: '1'}, {key: '3', text: 'View settings'} ]} />	<ActionList> <ActionList.Group title="Live query"> <ActionList.Item>repo:github/github</ActionList.Item> </ActionList.Group> <ActionList.Divider /> <ActionList.Group title="Layout"> <ActionList.Item>Table</ActionList.Item> <ActionList.Item>Board Description</ActionList.Item> </ActionList.Group> <ActionList.Divider /> <ActionList.Item>View settings</ActionList.Item> </ActionList>

  To continue to use the deprecated API for now, change the import path to @primer/react/deprecated:

  import {ActionList} from '@primer/react/deprecated'

  You can use the one-time codemod to change your import statements automatically.

• #1910 e1e8d478 Thanks @colebemis! -
  

  ActionMenu

  ActionMenu has been rewritten with a composable API, design updates and accessibility fixes.

  See full list of props and examples: https://primer.style/react/ActionMenu

  Main changes:

  1. Instead of using items prop, use ActionList inside ActionMenu
  2. Instead of using anchorContent on ActionMenu, use ActionMenu.Button with children
  3. Instead of using onAction prop on ActionMenu, use onSelect prop on ActionList.Item
  4. Instead of using groupMetadata on ActionMenu, use ActionList.Group
  5. Instead of overlayProps on ActionMenu, use ActionMenu.Overlay

  Before (v34)	After (v35)
  <ActionMenu anchorContent="Menu" onAction={fn} items={[ {text: 'New file'}, {text: 'Copy link'}, {text: 'Edit file'}, ActionMenu.Divider, {text: 'Delete file', variant: 'danger'} ]} overlayProps={{width: 'small'}} />	<ActionMenu> <ActionMenu.Button>Menu</ActionMenu.Button> <ActionMenu.Overlay width="small"> <ActionList> <ActionList.Item onSelect={fn}>New file</ActionList.Item> <ActionList.Item>Copy link</ActionList.Item> <ActionList.Item>Edit file</ActionList.Item> <ActionList.Divider /> <ActionList.Item variant="danger">Delete file</ActionList.Item> </ActionList> </ActionMenu.Overlay> </ActionMenu>

  To continue to use the deprecated API for now, change the import path to @primer/react/deprecated:

  import {ActionMenu} from '@primer/react/deprecated'

  You can use the one-time codemod to change your import statements automatically.

• #1910 e1e8d478 Thanks @colebemis! -
  

  DropdownMenu

  DropdownMenu has been deprecated in favor of ActionMenu with ActionList

  See example with selection: https://primer.style/react/ActionMenu#with-selection

  Migration guide:

  1. Instead of using items prop, use ActionList inside ActionMenu
  2. Use selectionVariant="single" on ActionList to set the right semantics for selection
  3. Instead of using selectedItem prop, use selected prop on ActionList.Item
  4. Instead of using renderAnchor and placeholder props on DropdownMenu, use ActionMenu.Button or ActionMenu.Anchor
  5. Instead of using onChange prop on DropdownMenu, use onSelect prop on ActionList.Item
  6. Instead of using groupMetadata on DropdownMenu, use ActionList.Group
  7. Instead of overlayProps on DropdownMenu, use ActionMenu.Overlay

  Before (v34)

  After (v35)

  const fieldTypes = [ {key: 0, text: 'Text'}, {key: 1, text: 'Number'}, {key: 3, text: 'Date'}, {key: 4, text: 'Single select'}, {key: 5, text: 'Iteration'} ] const Example = () => { const [selectedType, setSelectedType] = React.useState() return ( <DropdownMenu renderAnchor={({children, ...anchorProps}) => ( <ButtonInvisible {...anchorProps}> {children} <GearIcon /> </ButtonInvisible> )} placeholder="Field type" items={fieldTypes} selectedItem={selectedType} onChange={setSelectedType} overlayProps={{width: 'medium'}} /> ) }

  const fieldTypes = [ {id: 0, text: 'Text'}, {id: 1, text: 'Number'}, {id: 3, text: 'Date'}, {id: 4, text: 'Single select'}, {id: 5, text: 'Iteration'} ] const Example = () => { const [selectedType, setSelectedType] = React.useState() render( <ActionMenu> <ActionMenu.Button aria-label="Select field type">{selectedType.name || 'Field type'}</ActionMenu.Button> <ActionMenu.Overlay width="medium"> <ActionList selectionVariant="single"> {fieldTypes.map(type => ( <ActionList.Item key={type.id} selected={type.id === selectedType.id} onSelect={() => setSelectedType(type)} > {type.name} </ActionList.Item> ))} </ActionList> </ActionMenu.Overlay> </ActionMenu> ) }

  To continue to use the deprecated API for now, change the import path to @primer/react/deprecated:

  import {DropdownMenu} from '@primer/react/deprecated'

  You can use the one-time codemod ...