Release tracking (next major) #1911

primer-css · 2022-02-28T21:46:31Z

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

Releases

@primer/react@35.0.0

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

#1889 e9b81fae Thanks @mperrotti! -

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'

function Example() {
  return (
    <>
      <Label outline>default</Label>
      <Label variant="small" outline sx={{borderColor: 'danger.emphasis', color: 'danger.fg'}}>
        danger
      </Label>
    </>
  )
}

import {Label} from '@primer/react'

function Example() {
  return (
    <>
      <Label>default</Label>
      <Label size="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.

#1908 61404aed Thanks @pksjce! -

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'

function Example() {
  return (
    <>
      <ButtonPrimary>Primary Button</ButtonPrimary>
      <ButtonInvisible>Invisible Button</ButtonInvisible>
      <ButtonOutline>Outline Button</ButtonOutline>
      <ButtonDanger>Danger Button</ButtonDanger>
    </>
  )
}

import {Button} from '@primer/react'

function Example() {
  return (
    <>
      <Button variant="primary">Primary Button</Button>
      <Button variant="invisible">Invisible Button</Button>
      <Button variant="outline">Outline Button</Button>
      <Button variant="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>	<Button leadingIcon={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>	<IconButton aria-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)
<Button variant="small">Small button</Button>	<Button size="small">Small button</Button>

#1900 d61b28ad Thanks @mperrotti! -

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'

function Example() {
  return (
    <>
      {/* Multi-select */}
      <ChoiceFieldset>
        <ChoiceFieldset.Legend>Preferred Primer component interface</ChoiceFieldset.Legend>
        <ChoiceFieldset.List selectionVariant="multiple">
          <ChoiceFieldset.Item value="figma">Figma library</ChoiceFieldset.Item>
          <ChoiceFieldset.Item value="css">Primer CSS</ChoiceFieldset.Item>
          <ChoiceFieldset.Item value="react">Primer React components</ChoiceFieldset.Item>
          <ChoiceFieldset.Item value="viewcomponents">Primer ViewComponents</ChoiceFieldset.Item>
        </ChoiceFieldset.List>
      </ChoiceFieldset>

      {/* Single select */}
      <ChoiceFieldset>
        <ChoiceFieldset.Legend>Preferred Primer component interface</ChoiceFieldset.Legend>
        <ChoiceFieldset.List>
          <ChoiceFieldset.Item value="figma">Figma library</ChoiceFieldset.Item>
          <ChoiceFieldset.Item value="css">Primer CSS</ChoiceFieldset.Item>
          <ChoiceFieldset.Item value="react">Primer React components</ChoiceFieldset.Item>
          <ChoiceFieldset.Item value="viewcomponents">Primer ViewComponents</ChoiceFieldset.Item>
        </ChoiceFieldset.List>
      </ChoiceFieldset>
    </>
  )
}

import {CheckboxGroup, RadioGroup, FormControl, Checkbox, Radio} from '@primer/react'

function Example() {
  return (
    <>
      {/* Multi-select */}
      <CheckboxGroup>
        <CheckboxGroup.Label>Preferred Primer component interface</CheckboxGroup.Label>
        <FormControl>
          <Checkbox value="figma" />
          <FormControl.Label>Figma</FormControl.Label>
        </FormControl>
        <FormControl>
          <Checkbox value="css" />
          <FormControl.Label>CSS</FormControl.Label>
        </FormControl>
        <FormControl>
          <Checkbox value="react" />
          <FormControl.Label>Primer React components</FormControl.Label>
        </FormControl>
        <FormControl>
          <Checkbox value="viewcomponents" />
          <FormControl.Label>Primer ViewComponents</FormControl.Label>
        </FormControl>
      </CheckboxGroup>

      {/* Single select */}
      <RadioGroup name="preferred-primer">
        <RadioGroup.Label>Preferred Primer component interface</RadioGroup.Label>
        <FormControl>
          <Radio value="figma" />
          <FormControl.Label>Figma</FormControl.Label>
        </FormControl>
        <FormControl>
          <Radio value="css" />
          <FormControl.Label>CSS</FormControl.Label>
        </FormControl>
        <FormControl>
          <Radio value="react" />
          <FormControl.Label>Primer React components</FormControl.Label>
        </FormControl>
        <FormControl>
          <Radio value="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.

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

#1888 f94dcd33 Thanks @mperrotti! -

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'

function Example() {
  return (
    <>
      <FormGroup>
        <FormGroup.Label htmlFor="example-text">Example text</FormGroup.Label>
        <TextInput id="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'

function Example() {
  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'

function Example() {
  return (
    <InputField>
      <InputField.Label>Example text</InputField.Label>
      <TextInput />
    </InputField>
  )
}

import {FormControl, TextInput} from '@primer/react'

function Example() {
  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.

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

#1921 561aad86 Thanks @siddharthkp! - Add align prop on ActionMenu.Overlay to pass through to AnchoredOverlay

Patch Changes

#1922 b1d7b8c9 Thanks @siddharthkp! - ActionMenu.Button: Fix spacing between text and caret
#1915 a98091c1 Thanks @siddharthkp! - - Update styles for default variant of Button's active state
- Use active state for Button when it is used to open an Overlay
#1934 33da6a0e Thanks @rezrah! - 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';
```

* prepare integration branch * Move deprecated components to deprecated folder * Add subpath exports for deprecated * Fix up the docs * Remove dialog and formgroup components * Fix up all the tests * Create smooth-cameras-prove.md Co-authored-by: Reza Rahman <rezrah@github.com>

…#1883) * prefix component name to types * add changeset * Update .changeset/actionlist2-actionmenu2-prefix-types.md Co-authored-by: Cole Bemis <colebemis@github.com> Co-authored-by: Cole Bemis <colebemis@github.com>

* Export PageLayout from main bundle * Create odd-apes-guess.md * Add PageLayout to sidenav * Update .changeset/odd-apes-guess.md Co-authored-by: Rez <rezrah@github.com> * Update PageLayout docs Co-authored-by: Rez <rezrah@github.com>

…ropdown (#1887) * chore: add deprecation notices for SelectMenu and Dropdown * fix: deprecated metadata scope in docs * docs: update release notes for Flex and BorderBox * docs: update release notes for Position * chore: add deprecated scope to jsx snippets * chore: add release notes for Dropdown deprecation * chore: add Grid release notes * update release notes

@deprecated

* Deprecate ActionList v1 * Promote drafts/ActionList2 to main/ActionList * Add changelog * Undo package-lock change * update ActionList import for Menu2 docs * Deprecate ActionMenu - part 1 * Deprecate ActionMenu - part 2 * Promote drafts/ActionMenu2 to main/ActionMenu * Add changelog * Add @deprecated on deprecated/ActionMenu * docs fixed!

…" (#1896) This reverts commit f366604.

@deprecated

* Deprecate ActionList v1 * Promote drafts/ActionList2 to main/ActionList * Add changelog * Undo package-lock change * update ActionList import for Menu2 docs * changelog oopsie * fix docs copy * Add @deprecated on deprecated/ActionList * oopsie on the link * PR feedback on deprecation message

@deprecated

* Deprecate ActionList v1 * Promote drafts/ActionList2 to main/ActionList * Add changelog * Undo package-lock change * update ActionList import for Menu2 docs * Deprecate ActionMenu - part 1 * Deprecate ActionMenu - part 2 * Promote drafts/ActionMenu2 to main/ActionMenu * Add changelog * Add @deprecated on deprecated/ActionMenu * docs fixed! * reorder deprecated components alphabetically * Update deprecation message * Fix missing icon that only broke on this PR for some reason

@deprecated

* Deprecate ActionList v1 * Promote drafts/ActionList2 to main/ActionList * Add changelog * Undo package-lock change * update ActionList import for Menu2 docs * Deprecate ActionMenu - part 1 * Deprecate ActionMenu - part 2 * Promote drafts/ActionMenu2 to main/ActionMenu * Add changelog * Add @deprecated on deprecated/ActionMenu * docs fixed! * reorder deprecated components alphabetically * Update deprecation message * Fix missing icon that only broke on this PR for some reason * Deprecate DropdownMenu * Use deprecated Dropdown for theme switcher * Delete drafts/DropdownMenu2 * Add changelog * remove debug statement :)

github-actions · 2022-02-28T21:49:45Z

size-limit report 📦

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

* Move old button to deprecated * Move Button2 to main bundle * Add migration docs * More changes from the checklist * More deprecation * Update tests * Add deprecated details * Create many-roses-hammer.md * Update .changeset/many-roses-hammer.md Co-authored-by: Rez <rezrah@github.com> * Update many-roses-hammer.md * Update many-roses-hammer.md * Update many-roses-hammer.md Co-authored-by: Rez <rezrah@github.com>

* add missing root exports * fix invalid export

rezrah and others added 18 commits February 21, 2022 17:56

prepare integration branch

fdd6915

Merge branch 'main' into next/v35.0.0

4a0cc23

Merge branch 'main' into next/v35.0.0

ff7da70

Merge branch 'main' into next/v35.0.0

94034e3

Export PageLayout from main bundle (#1882)

df75752

* Export PageLayout from main bundle * Create odd-apes-guess.md * Add PageLayout to sidenav * Update .changeset/odd-apes-guess.md Co-authored-by: Rez <rezrah@github.com> * Update PageLayout docs Co-authored-by: Rez <rezrah@github.com>

Merge branch 'main' into next/v35.0.0

6fc788f

Revert "Deprecate ActionMenu v1 & Promote drafts/ActionMenu v2 (#1895)…

c5c4b92

…" (#1896) This reverts commit f366604.

Merge branch 'main' into next/v35.0.0

09f87c5

Merge branch 'main' of github.com:primer/react into next/v35.0.0

87889b5

Fix code examples in changeset (#1901)

64b8f88

Merge remote-tracking branch 'origin/main' into next-major

05e54ca

primer-css requested review from a team and pksjce February 28, 2022 21:46

github-actions bot had a problem deploying to Preview February 28, 2022 21:46 Failure

Update .changeset/deprecate-actionlistv1-promote-actionlistv2.md

b51ea3b

primer-css force-pushed the changeset-release/next-major branch from 95a48a3 to 19ca837 Compare February 28, 2022 22:05

github-actions bot deployed to Preview February 28, 2022 22:06 View deployment

Add linebreaks to changesets

a8a3de1

primer-css force-pushed the changeset-release/next-major branch from 19ca837 to f9187a8 Compare February 28, 2022 22:23

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

primer-css force-pushed the changeset-release/next-major branch from f9187a8 to 4b40d61 Compare March 1, 2022 12:49

rezrah added 2 commits March 9, 2022 12:25

Fixes for v35 (#1938)

8959aeb

* add missing root exports * fix invalid export

Merge branch 'main' into next-major

2868c21

primer-css force-pushed the changeset-release/next-major branch from 6930220 to a7837eb Compare March 9, 2022 12:26

github-actions bot deployed to Preview March 9, 2022 12:26 View deployment

primer-css force-pushed the changeset-release/next-major branch from a7837eb to bc5c574 Compare March 9, 2022 12:27

github-actions bot deployed to Preview March 9, 2022 12:27 View deployment

primer-css force-pushed the changeset-release/next-major branch from bc5c574 to f10bd63 Compare March 9, 2022 12:27

github-actions bot deployed to Preview March 9, 2022 12:27 View deployment

add missing fragments to changesets (#1940)

002e9cf

primer-css force-pushed the changeset-release/next-major branch from f10bd63 to c9cc207 Compare March 9, 2022 13:24

github-actions bot deployed to Preview March 9, 2022 13:24 View deployment

Update changeset examples (#1941)

16a5d17

primer-css force-pushed the changeset-release/next-major branch from c9cc207 to 24f015c Compare March 9, 2022 17:55

github-actions bot deployed to Preview March 9, 2022 17:55 View deployment

Fix table in changeset

4f07696

primer-css force-pushed the changeset-release/next-major branch from 24f015c to 99f3cdd Compare March 9, 2022 18:32

github-actions bot deployed to Preview March 9, 2022 18:32 View deployment

Add missing comma

6bb44c4

primer-css force-pushed the changeset-release/next-major branch from 99f3cdd to 06d6ace Compare March 9, 2022 19:03

github-actions bot deployed to Preview March 9, 2022 19:03 View deployment

Fix grid changeset

f69a6d0

primer-css force-pushed the changeset-release/next-major branch from 06d6ace to 1ed726e Compare March 9, 2022 19:37

github-actions bot deployed to Preview March 9, 2022 19:38 View deployment

colebemis and others added 2 commits March 9, 2022 11:39

Update button changeset

8675cd8

Version Packages

da3872a

primer-css force-pushed the changeset-release/next-major branch from 1ed726e to da3872a Compare March 9, 2022 19:41

github-actions bot deployed to Preview March 9, 2022 19:41 View deployment

Base automatically changed from next-major to main March 9, 2022 20:52

rezrah closed this Mar 13, 2022

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Release tracking (next major) #1911

Release tracking (next major) #1911

primer-css commented Feb 28, 2022 •

edited

Loading

github-actions bot commented Feb 28, 2022 •

edited

Loading

Release tracking (next major) #1911

Release tracking (next major) #1911

Conversation

primer-css commented Feb 28, 2022 • edited Loading

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

github-actions bot commented Feb 28, 2022 • edited Loading

size-limit report 📦

primer-css commented Feb 28, 2022 •

edited

Loading

github-actions bot commented Feb 28, 2022 •

edited

Loading