Release Tracking

[primer-css]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to next/v35.0.0, this PR will be updated.

Releases

@primer/react@35.0.0

Major Changes

• #1883310e6553 Thanks @siddharthkp! - 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
  

• #189317ef5ef8 Thanks @siddharthkp! - ### 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)
  <ActionListitems={[{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.Itemvariant="danger">Delete file</ActionList.Item></ActionList>
  <ActionListshowItemDividersitems={[{key: '0',leadingVisual: LinkIcon,text: 'github/primer'},{key: '1',leadingVisual: ()=><Avatarsrc="https://github.com/mona.png"/>,text: 'mona',description: 'Monalisa Octocat',descriptionVariant: 'block'},{key: '2',leadingVisual: GearIcon,text: 'View Settings',trailingVisual: ArrowRightIcon}]}/>	<ActionListshowDividers><ActionList.Item><ActionList.LeadingVisual><LinkIcon/></ActionList.LeadingVisual> github/primer </ActionList.Item><ActionList.Item><ActionList.LeadingVisual><Avatarsrc="https://github.com/mona.png"/></ActionList.LeadingVisual> mona <ActionList.Descriptionvariant="block">Monalisa Octocat</ActionList.Description></ActionList.Item><ActionList.Item><ActionList.LeadingVisual><GearIcon/></ActionList.LeadingVisual> View settings <ActionList.TrailingVisual><ArrowRightIcon/></ActionList.TrailingVisual></ActionList.Item></ActionList>
  <ActionListgroupMetadata={[{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.Grouptitle="Live query"><ActionList.Item>repo:github/github</ActionList.Item></ActionList.Group><ActionList.Divider/><ActionList.Grouptitle="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.

• #1897d4023572 Thanks @siddharthkp! - ### 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)
  <ActionMenuanchorContent="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.Overlaywidth="small"><ActionList><ActionList.ItemonSelect={fn}>New file</ActionList.Item><ActionList.Item>Copy link</ActionList.Item><ActionList.Item>Edit file</ActionList.Item><ActionList.Divider/><ActionList.Itemvariant="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.

• #1898d6d1ca4c Thanks @siddharthkp! - ### 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)

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

  constfieldTypes=[{id: 0,text: 'Text'},{id: 1,text: 'Number'},{id: 3,text: 'Date'},{id: 4,text: 'Single select'},{id: 5,text: 'Iteration'}]constExample=()=>{const[selectedType,setSelectedType]=React.useState()render(<ActionMenu><ActionMenu.Buttonaria-label="Select field type">{selectedType.name||'Field type'}</ActionMenu.Button><ActionMenu.Overlaywidth="medium"><ActionListselectionVariant="single">{fieldTypes.map(type=>(<ActionList.Itemkey={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 to change your import statements automatically.

  drafts/DropdownMenu2

  DropdownMenu2 has been removed in favor of ActionMenu with ActionList

• #1879fdd6915a Thanks @rezrah! - ### ActionList

  ActionList now ships a composable API.

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

  Before	After
  <ActionListitems={[{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.Itemvariant="danger">Delete file</ActionList.Item></ActionList>
  <ActionListshowItemDividersitems={[{key: '0',leadingVisual: LinkIcon,text: 'github/primer'},{key: '1',leadingVisual: ()=><Avatarsrc="https://github.com/mona.png"/>,text: 'mona',description: 'Monalisa Octocat',descriptionVariant: 'block'},{key: '2',leadingVisual: GearIcon,text: 'View Settings',trailingVisual: ArrowRightIcon}]}/>	<ActionListshowDividers><ActionList.Item><ActionList.LeadingVisual><LinkIcon/></ActionList.LeadingVisual> github/primer </ActionList.Item><ActionList.Item><ActionList.LeadingVisual><Avatarsrc="https://github.com/mona.png"/></ActionList.LeadingVisual> mona <ActionList.Descriptionvariant="block">Monalisa Octocat</ActionList.Description></ActionList.Item><ActionList.Item><ActionList.LeadingVisual><GearIcon/></ActionList.LeadingVisual> View settings <ActionList.TrailingVisual><ArrowRightIcon/></ActionList.TrailingVisual></ActionList.Item></ActionList>
  <ActionListgroupMetadata={[{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.Grouptitle="Live query"><ActionList.Item>repo:github/github</ActionList.Item></ActionList.Group><ActionList.Divider/><ActionList.Grouptitle="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'

• #1882df757521 Thanks @colebemis! - PageLayout is being graduated from the drafts bundle to the main bundle.

  To upgrade, rewrite your imports accordingly:

  - import {PageLayout} from '@primer/react/drafts'+ import {PageLayout} from '@primer/react'

• #18818cd12439 Thanks @pksjce! - ### SelectMenu

  ⚠️SelectMenu has been deprecated. Please use ActionMenu instead.

  Before

  After

  <SelectMenu><Buttonas="summary">Projects</Button><SelectMenu.Modal><SelectMenu.Header>Projects</SelectMenu.Header><SelectMenu.List><SelectMenu.Itemhref="#">Primer React bugs</SelectMenu.Item><SelectMenu.Itemhref="#">Primer React roadmap</SelectMenu.Item><SelectMenu.Itemhref="#">Project 3</SelectMenu.Item><SelectMenu.Itemhref="#">Project 4</SelectMenu.Item></SelectMenu.List></SelectMenu.Modal></SelectMenu>

  <ActionMenu><ActionMenu.Button>Projects</ActionMenu.Button><ActionMenu.Overlay><ActionListshowDividers><ActionList.Grouptitle="Projects"><ActionList.Item>Primer React bugs</ActionList.Item><ActionList.Item>Primer React roadmap</ActionList.Item><ActionList.Item>Project three</ActionList.Item><ActionList.Item>Project four</ActionList.Item></ActionList.Group></ActionList></ActionMenu.Overlay></ActionMenu>

  See https://primer.style/react/ActionMenu for more migration examples.

  Dropdown

  ⚠️Dropdown has been deprecated. Please use ActionMenu instead.

  Before

  After

  constfieldTypes=[{leadingVisual: TypographyIcon,text: 'Text'},{leadingVisual: NumberIcon,text: 'Number'}]constExample=()=>{const[selectedItem,setSelectedItem]=React.useState()return(<DropdownMenurenderAnchor={({children, ...anchorProps})=><ButtonInvisible{...anchorProps}>{children}</ButtonInvisible>}placeholder="Select a field type"items={fieldTypes}selectedItem={selectedItem}onChange={()=>setSelectedIndex(index)}/>)}

  constfieldTypes=[{icon: <TypographyIcon/>,name: 'Text'},{icon: <NumberIcon/>,name: 'Number'}]constExample=()=>{const[selectedItem,setSelectedItem]=React.useState()return(<ActionMenu><ActionMenu.Button>{selectedItem ? selectedItem.name : 'Select a field type'}</ActionMenu.Button><ActionMenu.Overlay><ActionListselectionVariant="single">{fieldTypes.map(field=>(<ActionList.ItemonSelect={()=>setSelectedItem(field)}key={field.name}><ActionList.LeadingVisual>{field.icon}</ActionList.LeadingVisual>{field.name}</ActionList.Item>))}</ActionList></ActionMenu.Overlay></ActionMenu>)}

  See https://primer.style/react/ActionMenu for more migration examples.

  Flex

  ⚠️Flex has been deprecated. Please use Box instead.

  Before	After
  <FlexflexWrap="nowrap"><Boxp={3}color="fg.onEmphasis"bg="accent.emphasis"> Item 1 </Box></Flex>	<Boxdisplay="flex"flexWrap="nowrap"><Boxp={3}color="fg.onEmphasis"bg="accent.emphasis"> Item 1 </Box></Box>

  Grid

  ⚠️Grid has been deprecated. Please use ActionMenu instead.

  Before	After
  <GridgridTemplateColumns="repeat(2, auto)"gridGap={3}><Boxp={3}color="fg.onEmphasis"bg="accent.emphasis"> 1 </Box><Boxp={3}color="fg.onEmphasis"bg="attention.emphasis"> 2 </Box></Grid>	<Boxdisplay="grid"gridTemplateColumns="repeat(2, auto)"gridGap={3}><Boxp={3}color="fg.onEmphasis"bg="accent.emphasis"> 1 </Box><Boxp={3}color="fg.onEmphasis"bg="attention.emphasis"> 2 </Box></Box>

  BorderBox

  ⚠️BorderBox has been deprecated. Please use Box instead.

  Before	After
  <BorderBox>Item 1</BorderBox>	<BoxborderWidth="1px"borderStyle="solid"borderColor="border.default"borderRadius={2}> Item 1 </Box>

  Position

  ⚠️Position has been deprecated. Please use Box instead.

  Before	After
  <><Positionposition="absolute">...</Position><Absolute>...</Absolute><Relative>...</Relative><Fixed>...</Fixed><Sticky>...</Sticky></>	<><Boxposition="absolute">...</Box><Boxposition="absolute">...</Box><Boxposition="relative">...</Box><Boxposition="fixed">...</Box><Boxposition="sticky">...</Box></>

Minor Changes

• #1862eebb3f27 Thanks @mperrotti! - Adds CheckboxGroup and RadioGroup components to replace the ChoiceFieldset component

Patch Changes

• #1886ecbf923e Thanks @mperrotti! - Makes it possible to render leading and trailing visuals in TextInputWithTokens just like we do in TextInput

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	67.61 KB (0%)
dist/browser.umd.js	68.03 KB (0%)