Release tracking by primer-css · Pull Request #1943 · primer/react

primer-css · 2022-03-09T20:54:47Z

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 main, this PR will be updated.

Releases

@primer/react@35.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)

<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.

#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:

Instead of using items prop, use ActionList inside ActionMenu
Instead of using anchorContent on ActionMenu, use ActionMenu.Button with children
Instead of using onAction prop on ActionMenu, use onSelect prop on ActionList.Item
Instead of using groupMetadata on ActionMenu, use ActionList.Group
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.

#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:

Instead of using items prop, use ActionList inside ActionMenu
Use selectionVariant="single" on ActionList to set the right semantics for selection
Instead of using selectedItem prop, use selected prop on ActionList.Item
Instead of using renderAnchor and placeholder props on DropdownMenu, use ActionMenu.Button or ActionMenu.Anchor
Instead of using onChange prop on DropdownMenu, use onSelect prop on ActionList.Item
Instead of using groupMetadata on DropdownMenu, use ActionList.Group
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

#1910 e1e8d478 Thanks @colebemis! -

Label

The Label component's API and visual design have been updated to be consistent with its counterpart in Primer ViewComponents' Label component.

Major changes in the new Label component:

No more medium size - only small and large
Labels are outlined by default, so the outline prop has been removed
Custom text and background colors are discouraged, but still possible via the sx prop

If you were using the Label component to render issue/PR labels, use the IssueLabelToken component instead.

Before (v34)

After (v35)

import{Label}from'@primer/react'functionExample(){return(<><Labeloutline>default</Label><Labelvariant="small"outlinesx={{borderColor: 'danger.emphasis',color: 'danger.fg'}}>
danger
</Label></>)}

import{Label}from'@primer/react'functionExample(){return(<><Label>default</Label><Labelsize="small"variant="danger">
danger
</Label></>)}

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

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

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

#1910 e1e8d478 Thanks @colebemis! -

Button

Before v35, Button was a set of seven independent components. In v35, we've simplified the Button API.

Button variants

We now support a variant property which takes values primary, invisible, outline and danger

Before (v34)

After (v35)

import{ButtonPrimary,ButtonInvisible,ButtonOutline,ButtonDanger}from'@primer/react'functionExample(){return(<><ButtonPrimary>Primary Button</ButtonPrimary><ButtonInvisible>Invisible Button</ButtonInvisible><ButtonOutline>Outline Button</ButtonOutline><ButtonDanger>Danger Button</ButtonDanger></>)}

import{Button}from'@primer/react'functionExample(){return(<><Buttonvariant="primary">Primary Button</Button><Buttonvariant="invisible">Invisible Button</Button><Buttonvariant="outline">Outline Button</Button><Buttonvariant="danger">Danger Button</Button></>)}

Leading and trailing icons

Previously including icons inside buttons required a lot of custom styling. In the new Button component, we now support first-class leadingIcon and trailingIcon props:

Before (v34)	After (v35)
<Button><SearchIcon/> Search </Button>	<ButtonleadingIcon={SearchIcon}>Search</Button>

Icon buttons

Icon-only buttons are common in many applications. We now have a component designed for this use-case:

Before (v34)	After (v35)
<Button><XIcon/></Button>	<IconButtonaria-label="Close button"icon={XIcon}/>

Size property

Previously, we used a variant prop to set the size of buttons. We now have a prop called size which is more semantically correct.

Before (v34)	After (v35)
<Buttonvariant="small">Small button</Button>	<Buttonsize="small">Small button</Button>

#1910 e1e8d478 Thanks @colebemis! -

ChoiceFieldset

The CheckboxGroup and RadioGroup components are replacing the ChoiceFieldset component.

CheckboxGroup and RadioGroup have the ability to render contextual content with your fieldset: labels, validation statuses, captions. They also handle the ARIA attributes that make the form controls accessible to assistive technology.

Before (v34)

After (v35)

import{ChoiceFieldset}from'@primer/react'functionExample(){return(<>{/* Multi-select */}<ChoiceFieldset><ChoiceFieldset.Legend>Preferred Primer component interface</ChoiceFieldset.Legend><ChoiceFieldset.ListselectionVariant="multiple"><ChoiceFieldset.Itemvalue="figma">Figma library</ChoiceFieldset.Item><ChoiceFieldset.Itemvalue="css">Primer CSS</ChoiceFieldset.Item><ChoiceFieldset.Itemvalue="react">Primer React components</ChoiceFieldset.Item><ChoiceFieldset.Itemvalue="viewcomponents">Primer ViewComponents</ChoiceFieldset.Item></ChoiceFieldset.List></ChoiceFieldset>{/* Single select */}<ChoiceFieldset><ChoiceFieldset.Legend>Preferred Primer component interface</ChoiceFieldset.Legend><ChoiceFieldset.List><ChoiceFieldset.Itemvalue="figma">Figma library</ChoiceFieldset.Item><ChoiceFieldset.Itemvalue="css">Primer CSS</ChoiceFieldset.Item><ChoiceFieldset.Itemvalue="react">Primer React components</ChoiceFieldset.Item><ChoiceFieldset.Itemvalue="viewcomponents">Primer ViewComponents</ChoiceFieldset.Item></ChoiceFieldset.List></ChoiceFieldset></>)}

import{CheckboxGroup,RadioGroup,FormControl,Checkbox,Radio}from'@primer/react'functionExample(){return(<>{/* Multi-select */}<CheckboxGroup><CheckboxGroup.Label>Preferred Primer component interface</CheckboxGroup.Label><FormControl><Checkboxvalue="figma"/><FormControl.Label>Figma</FormControl.Label></FormControl><FormControl><Checkboxvalue="css"/><FormControl.Label>CSS</FormControl.Label></FormControl><FormControl><Checkboxvalue="react"/><FormControl.Label>Primer React components</FormControl.Label></FormControl><FormControl><Checkboxvalue="viewcomponents"/><FormControl.Label>Primer ViewComponents</FormControl.Label></FormControl></CheckboxGroup>{/* Single select */}<RadioGroupname="preferred-primer"><RadioGroup.Label>Preferred Primer component interface</RadioGroup.Label><FormControl><Radiovalue="figma"/><FormControl.Label>Figma</FormControl.Label></FormControl><FormControl><Radiovalue="css"/><FormControl.Label>CSS</FormControl.Label></FormControl><FormControl><Radiovalue="react"/><FormControl.Label>Primer React components</FormControl.Label></FormControl><FormControl><Radiovalue="viewcomponents"/><FormControl.Label>Primer ViewComponents</FormControl.Label></FormControl></RadioGroup></>)}

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

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

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

#1910 e1e8d478 Thanks @colebemis! -
PageLayout
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'
```

#1910 e1e8d478 Thanks @colebemis! -

FormGroup, InputField, ChoiceInputField

The FormControl component is replacing the FormGroup, InputField, and ChoiceInputField components. It has the ability to render contextual content with your inputs: labels, validation statuses, captions. It also handles the ARIA attributes that make the form controls accessible to assistive technology.

Before (v34)

After (v35)

import{FormControl,Checkbox,TextInput}from'@primer/react'functionExample(){return(<><FormGroup><FormGroup.LabelhtmlFor="example-text">Example text</FormGroup.Label><TextInputid="example-text"/></FormGroup>{/* OR */}<InputField><InputField.Label>Example text</InputField.Label><TextInput/></InputField>{/* OR */}<ChoiceInputField><ChoiceInputField.Label>Example text</ChoiceInputField.Label><Checkbox/></ChoiceInputField></>)}

import{FormGroup,TextInput}from'@primer/react'functionExample(){return(<><FormControl><FormControl.Label>Example text</FormControl.Label><TextInput/></FormControl>{/* OR */}<FormControl><FormControl.Label>Example text</FormControl.Label><Checkbox/></FormControl></>)}

import{InputField,TextInput}from'@primer/react'functionExample(){return(<InputField><InputField.Label>Example text</InputField.Label><TextInput/></InputField>)}

import{FormControl,TextInput}from'@primer/react'functionExample(){return(<FormControl><FormControl.Label>Example text</FormControl.Label><TextInput/></FormControl>)}

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

import{FormGroup,ChoiceInputField,InputField}from'@primer/react/deprecated'

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

#1910 e1e8d478 Thanks @colebemis! -

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 Box 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

#1910 e1e8d478 Thanks @colebemis! - Add align prop on ActionMenu.Overlay to pass through to AnchoredOverlay

Patch Changes

#1910 e1e8d478 Thanks @colebemis! - ActionMenu.Button: Fix spacing between text and caret
#1910 e1e8d478 Thanks @colebemis! - - Update styles for default variant of Button's active state
- Use active state for Button when it is used to open an Overlay
#1910 e1e8d478 Thanks @colebemis! - Surfaced the following components and hooks from the root index:
- Portal
- AnchoredOverlay
- useFocusTrap
- useFocusZone (and types)
- sx (and types)
- ConfirmationDialogProps
These exports can now be imported from the root index, rather than from their nested subfolders.
E.g.
```
- import { ConfirmationDialogProps } from '@primer/react/lib-esm/Dialog/ConfirmationDialog';+ import { ConfirmationDialogProps } from '@primer/react';
```

github-actions · 2022-03-09T20:58:07Z

size-limit report 📦

Path	Size
dist/browser.esm.js	63.18 KB (0%)
dist/browser.umd.js	63.52 KB (0%)

colebemis

🚢 !!!

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Version Packages
ac76a60

primer-css requested review from a team and siddharthkp March 9, 2022 20:54

colebemis approved these changes Mar 9, 2022
View reviewed changes

colebemis merged commit dbc7d22 into mainMar 9, 2022

colebemis deleted the changeset-release/main branch March 9, 2022 21:20

pksjce pushed a commit that referenced this pull request Mar 10, 2022
Version Packages (#1943)
82e1a58
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Navigation Menu

Uh oh!

Release tracking - #1943

Release tracking#1943
colebemis merged 1 commit into
mainfrom
changeset-release/main

primer-css commented Mar 9, 2022

Uh oh!

github-actionsBot commented Mar 9, 2022

Uh oh!

colebemis left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

primer-css commented Mar 9, 2022

Releases

@primer/react@35.0.0

Major Changes

ActionList

ActionMenu

DropdownMenu

drafts/DropdownMenu2

Label

Button

Button variants

Leading and trailing icons

Icon buttons

Size property

ChoiceFieldset

PageLayout

FormGroup, InputField, ChoiceInputField

SelectMenu

Dropdown

Flex

Grid

BorderBox

Position

Minor Changes

Patch Changes

Uh oh!

github-actionsBot commented Mar 9, 2022

size-limit report 📦

Uh oh!

colebemis left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants