Release Tracking #1890

primer-css · 2022-02-24T21:41:29Z

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/[email protected]

Major Changes

#1883 310e6553 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

#1893 17ef5ef8 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)

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

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

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)

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

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

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)

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 to change your import statements automatically.

drafts/DropdownMenu2

DropdownMenu2 has been removed in favor of ActionMenu with ActionList

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

ActionList now ships a composable API.

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

Before

After

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

#1882 df757521 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'
```

#1881 8cd12439 Thanks @pksjce! - ### SelectMenu

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

Before

After

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

<ActionMenu>
  <ActionMenu.Button>Projects</ActionMenu.Button>
  <ActionMenu.Overlay>
    <ActionList showDividers>
      <ActionList.Group title="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

const fieldTypes = [
  {leadingVisual: TypographyIcon, text: 'Text'},
  {leadingVisual: NumberIcon, text: 'Number'}
]

const Example = () => {
  const [selectedItem, setSelectedItem] = React.useState()

  return (
    <DropdownMenu
      renderAnchor={({children, ...anchorProps}) => <ButtonInvisible {...anchorProps}>{children}</ButtonInvisible>}
      placeholder="Select a field type"
      items={fieldTypes}
      selectedItem={selectedItem}
      onChange={() => setSelectedIndex(index)}
    />
  )
}

const fieldTypes = [
  {icon: <TypographyIcon />, name: 'Text'},
  {icon: <NumberIcon />, name: 'Number'}
]

const Example = () => {
  const [selectedItem, setSelectedItem] = React.useState()

  return (
    <ActionMenu>
      <ActionMenu.Button>{selectedItem ? selectedItem.name : 'Select a field type'}</ActionMenu.Button>
      <ActionMenu.Overlay>
        <ActionList selectionVariant="single">
          {fieldTypes.map(field => (
            <ActionList.Item onSelect={() => 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

<Flex flexWrap="nowrap">
  <Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
    Item 1
  </Box>
</Flex>

<Box display="flex" flexWrap="nowrap">
  <Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
    Item 1
  </Box>
</Box>

Grid

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

Before

After

<Grid gridTemplateColumns="repeat(2, auto)" gridGap={3}>
  <Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
    1
  </Box>
  <Box p={3} color="fg.onEmphasis" bg="attention.emphasis">
    2
  </Box>
</Grid>

<Box display="grid" gridTemplateColumns="repeat(2, auto)" gridGap={3}>
  <Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
    1
  </Box>
  <Box p={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>	<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2}> Item 1 </Box>

Position

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

Before

After

<>
  <Position position="absolute">...</Position>
  <Absolute>...</Absolute>
  <Relative>...</Relative>
  <Fixed>...</Fixed>
  <Sticky>...</Sticky>
</>

<>
  <Box position="absolute">...</Box>
  <Box position="absolute">...</Box>
  <Box position="relative">...</Box>
  <Box position="fixed">...</Box>
  <Box position="sticky">...</Box>
</>

Minor Changes

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

Patch Changes

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

github-actions · 2022-02-24T21:44:56Z

size-limit report 📦

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

primer-css requested review from a team and mperrotti February 24, 2022 21:41

github-actions bot deployed to Preview February 24, 2022 21:41 View deployment

primer-css force-pushed the changeset-release/next/v35.0.0 branch from 2420ca3 to 7e7842a Compare February 25, 2022 12:12

github-actions bot deployed to Preview February 25, 2022 12:13 View deployment

github-actions bot deployed to Preview February 25, 2022 12:18 View deployment

primer-css force-pushed the changeset-release/next/v35.0.0 branch from 68e24a6 to 94c580f Compare February 25, 2022 17:33

github-actions bot deployed to Preview February 25, 2022 17:33 View deployment

primer-css force-pushed the changeset-release/next/v35.0.0 branch from 94c580f to 7cccfa6 Compare February 25, 2022 17:39

github-actions bot deployed to Preview February 25, 2022 17:39 View deployment

primer-css force-pushed the changeset-release/next/v35.0.0 branch from 7cccfa6 to 0b31b9c Compare February 25, 2022 17:39

github-actions bot deployed to Preview February 25, 2022 17:40 View deployment

primer-css force-pushed the changeset-release/next/v35.0.0 branch from 0b31b9c to 5cfc90b Compare February 25, 2022 19:38

github-actions bot deployed to Preview February 25, 2022 19:38 View deployment

primer-css force-pushed the changeset-release/next/v35.0.0 branch from 5cfc90b to b9e94ec Compare February 25, 2022 19:52

github-actions bot deployed to Preview February 25, 2022 19:52 View deployment

siddharthkp mentioned this pull request Feb 25, 2022

Fix lint issues in changelog.md for release branch #1901

Merged

primer-css force-pushed the changeset-release/next/v35.0.0 branch from b9e94ec to a53da19 Compare February 28, 2022 09:15

github-actions bot deployed to Preview February 28, 2022 09:16 View deployment

primer-css force-pushed the changeset-release/next/v35.0.0 branch from a53da19 to 40c1b01 Compare February 28, 2022 11:23

github-actions bot deployed to Preview February 28, 2022 11:23 View deployment

Version Packages

7d9c793

primer-css force-pushed the changeset-release/next/v35.0.0 branch from 40c1b01 to 7d9c793 Compare February 28, 2022 11:23

github-actions bot deployed to Preview February 28, 2022 11:23 View deployment

colebemis closed this Feb 28, 2022

joshblack deleted the changeset-release/next/v35.0.0 branch January 19, 2023 16:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Release Tracking #1890

Release Tracking #1890

Uh oh!

primer-css commented Feb 24, 2022 •

edited

Loading

Uh oh!

github-actions bot commented Feb 24, 2022 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Release Tracking #1890

Release Tracking #1890

Uh oh!

Conversation

primer-css commented Feb 24, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Releases

@primer/[email protected]

Major Changes

drafts/DropdownMenu2

Dropdown

Flex

Grid

BorderBox

Position

Minor Changes

Patch Changes

Uh oh!

github-actions bot commented Feb 24, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

primer-css commented Feb 24, 2022 •

edited

Loading

github-actions bot commented Feb 24, 2022 •

edited

Loading