Skip to content

Releases: primer/react

v36.7.0

29 Jan 22:18
@primer primer
v36.7.0
0941b00
This commit was created on github.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
v36.7.0

Permalink to documentation

Minor Changes

  • #4157 aafa257e1 Thanks @langermank! - - Adds CSS variable color values to the legacy Primitive design tokens.
    • Three values include: the new v8 color CSS variable, a fallback of the old color CSS variable, and the raw value.

Patch Changes

Assets 2
Loading

v36.6.0

25 Jan 17:33
@primer primer
v36.6.0
05f2d79
This commit was created on github.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
v36.6.0

Permalink to documentation

Minor Changes

  • #3787 c9d74219d Thanks @langermank! - - Moves legacy color primitives from primer/primitives directly into Primer React

    • Cleans up unused dependencies on primitives other than color
    • Preparing for the upgrade to CSS variables (Primitives v8)

  • #3994 c40f76562 Thanks @maximedegreve! - ActionMenu: Only use checkmarks in menus instead of checkboxes

  • #4135 c2b069cfd Thanks @dipree! - Deprecate the underline property of the Link component in favor of the new inline property to better handle link visibility and accessibility when adjacent to text.

  • #4145 996475f7b Thanks @siddharthkp! - experimental/SelectPanel: Add SelectPanel.SecondaryAction

  • #4128 359213b29 Thanks @joshblack! - Add "use client" to package entrypoints to support React Server Components

Patch Changes

Assets 2
Loading

v36.5.0

22 Dec 02:53
@primer primer
v36.5.0
7fa7c14
This commit was created on github.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v36.5.0

Permalink to documentation

Minor Changes

  • #4027 49f585f9 Thanks @iansan5653! - Deprecate MarkdownEditor, MarkdownViewer, InlineAutocomplete, and related hooks

  • #4049 f0d38bc39 Thanks @TylerJDev! - Replaces deprecated Button component in Dialog with newest version

  • #4061 f46c07189 Thanks @mperrotti! - Adds a new prop, animated, to the ProgressBar component. This allows the "filled" segment(s) to animate and indicate some process is still in progress.

  • #3913 cf225772 Thanks @mperrotti! - Supports inactive ActionList items by letting users pass the required message to the inactiveText prop.

  • #4028 bbe58b8e1 Thanks @joshblack! - Use a CSS variable for the monospace font stack

Patch Changes

Assets 2
Loading

v36.4.0

07 Dec 12:32
@primer primer
v36.4.0
48fd418
This commit was created on github.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v36.4.0

Permalink to documentation

Minor Changes

  • #3982 968d4ef05 Thanks @joshblack! - Update SSRProvider, useSSRSafeId to use the native React 18 useId() instead of @react-aria/ssr

  • #3812 3f82a1cab Thanks @mperrotti! - Adds an 'inactive' state to buttons. An inactive button looks disabled and has aria-disabled, but it can still be clicked and focused. This was added to support buttons that are broken due to availability issues, but can't be removed from the page.

Patch Changes

Assets 2
Loading

v36.3.1

01 Dec 21:16
@primer primer
v36.3.1
a6def94
This commit was created on github.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v36.3.1

Permalink to documentation

Patch Changes

Assets 2
Loading

v36.3.0

01 Dec 16:46
@primer primer
v36.3.0
b5618cd
This commit was created on github.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v36.3.0

Permalink to documentation

Minor Changes

Patch Changes

  • #3897 6b0c118b3 Thanks @mperrotti! - When passing an id prop to ActionMenu.Button, it will be passed as the rendered button element's id attribute instead of being set as an automatically generated ID.

  • #3960 ec8a2cadd Thanks @pksjce! - Update to @primer/behaviors v1.5.1

  • #3945 40b29787e Thanks @siddharthkp! - ActionList: Fix bug that did not allow both inline and block description at the same time

  • #3903 f62ec728a Thanks @pksjce! - Make resize vertical splitter keyboard accessible

  • #3946 e08432d54 Thanks @siddharthkp! - Link: Add inline prop to tag links inside a text block, underlined with accessibility setting [data-a11y-link-underlines]

  • #3983 43d1dce4a Thanks @TylerJDev! - Readjust order of PageLayout.Pane contents

  • #3972 87028d2b9 Thanks @iulia-b! - Update MarkdownEditor to correctly identify non-standard formatted tasklist items

Assets 2
Loading

v36.2.0

14 Nov 02:16
@primer primer
v36.2.0
8cfd7f0
This commit was created on github.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v36.2.0

Permalink to documentation

Minor Changes

  • #3900 2f9b5869 Thanks @broccolinisoup! - ActionList: Add ActionList.GroupHeading component to label the group lists and update labelling semantics for accessibility

  • #3143 cc0c16e9 Thanks @green6erry! - Adjusts position of children within PageLayout.Pane to live above adjustable resize form.

Patch Changes

Assets 2
Loading

v36.1.0

02 Nov 18:06
@primer primer
v36.1.0
24032c7
This commit was created on github.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v36.1.0

Minor Changes

Patch Changes

Assets 2
Loading

v36.0.0

31 Oct 16:19
@primer primer
v36.0.0
82a4e30
This commit was created on github.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v36.0.0

Permalink to documentation

We're excited to announce the next major release of Primer React! 🥳 Starting in v36, you'll see changes to @primer/react that make it even easier to build consistent, accessible experiences that feel right at home at GitHub.

New components ✨

The following components have been moved from @primer/react/drafts to @primer/react:

Breaking changes ⚠️

The v36 release of @primer/react introduces several breaking changes to components and changes to the package itself. To understand how to migrate between v35 and v36 of @primer/react, review the sections below to understand how your project may be impacted by these changes.

Components

The following list of components have breaking changes to their API or availability in @primer/react. For a list of deprecated components that have been removed, visit the Removed components section below.

AvatarToken

The size prop for AvatarToken has been updated in v36 to only accept "large" and "xlarge".

v35 v36 
<AvatarToken size="small">
<AvatarToken size="medium">
<AvatarToken size="large">
<AvatarToken size="xlarge">
<AvatarToken size="extralarge">
 
<AvatarToken size="large">
<AvatarToken size="xlarge">

Button

The API for the Button component has been updated to match the specification for this component and align with other implementations like in Primer View Components.

  • The leadingIcon prop has been renamed to leadingVisual

    v35 v36 
    <Button leadingIcon={TrashIcon}>Delete</Button>
    		 
    <Button leadingVisual={TrashIcon}>Delete</Button>

  • The trailingIcon prop has been renamed to trailingVisual

    v35 v36 
    <Button trailingIcon={EyeIcon}>Delete</Button>
    		 
    <Button trailingVisual={EyeIcon}>Delete</Button>

  • The Button.Counter component has been removed, use the count prop instead

    v35 v36 
    <Button>
  Watch
  <Button.Counter>5</Button.Counter>
</Button>
    		 
    <Button count={5}>Watch</Button>

  • The outline variant has been removed, instead use variant="invisible"

    v35 v36 
    <Button variant="outline">Example</Button>
    		 
    <Button variant="invisible">Example</Button>

Checkbox

The validationStatus prop has been updated and no longer supports the 'warning' value. Instead, only 'error' and 'success' are supported.

FilterList

The FilterList component has been deprecated in v36 in favor of the ActionList component. To continue using this component, update your imports for FilterList to import from the deprecated entrypoint.

v35 v36 
import { FilterList } from '@primer/react';
 
import { FilterList } from '@primer/react/deprecated';

FilterSearch

The FilterSearch component has been deprecated in v36. A new filter component is currently in progress but is not yet available. Until a new component is ready, use a combination of Button, TextInput, and ActionList to reproduce this component. To continue using this component, update your imports for FilterSearch to import from the deprecated entrypoint.

v35 v36 
import { FilterSearch } from '@primer/react';
 
import { FilterSearch } from '@primer/react/deprecated';

FormControl

The variant prop for the FormControl.Validation component has been updated to no longer support the 'warning' value. Instead, only 'error' and 'success' are supported.

Radio

The validationStatus prop has been updated and no longer supports the 'warning' value. Instead, only 'error' and 'success' are supported.

Textarea

The validationStatus prop has been updated and no longer supports the 'warning' value. Instead, only 'error' and 'success' are supported.

TextInputWithTokens

The size prop has been updated to no longer accept the extralarge value. Use xlarge instead.

v35 v36 
<TextInputWithTokens size="extralarge">
 
<TextInputWithTokens size="xlarge">

UnderlineNav

The implementation for UnderlineNav has been updated in v36. Certain props for UnderlineNav have been removed and the UnderlineNav.Link component has been replaced by UnderlineNav.Item.

Component v35 v36
UnderlineNav actions This prop has been removed
align This prop has been removed
full This prop has been removed
UnderlineNav.Link Use the UnderlineNav.Item component
UnderlineNav.Link selected Use the aria-current prop
v35 v36 
<UnderlineNav aria-label="Main">
  <UnderlineNav.Link href="#home" selected>
    Home
  </UnderlineNav.Link>
  <UnderlineNav.Link href="#documentation">
    Documentation
  </UnderlineNav.Link>
  <UnderlineNav.Link href="#support">
    Support
  </UnderlineNav.Link>
</UnderlineNav>
 
<UnderlineNav aria-label="Main">
  <UnderlineNav.Item href="#home" aria-current="page">
    Home
  </UnderlineNav.Item>
  <UnderlineNav.Item href="#documentation">
    Documentation
  </UnderlineNav.Item>
  <UnderlineNav.Item href="#support">
    Support
  </UnderlineNav.Item>
</UnderlineNav>

To continue using the implementation for UnderlineNav from v35, import the component from @primer/react/deprecated.

v35 v36 
import { UnderlineNav } from '@primer/react';
 
import { UnderlineNav } from '@primer/react/deprecated';

Removed components

The following deprecated components have been removed from @primer/react/deprecated and are no longer be available.

Name Migration
BorderBox Use the Box component, <BorderBox> → <Box borderWidth='1px' borderStyle='solid' borderColor='border.primary' borderRadius={2}>
ChoiceFieldset Use the CheckboxGroup or RadioGroup component
Item Use CheckboxGroup or RadioGroup component
ChoiceInputField Use the FormControl component
Flex Use the Box component, <Flex> → <Box display="flex">
Grid Use the Box component, <Grid> → <Box display="grid">
Position Use the Box component, <Position> → <Box>
Absolute Use the [Box](https://...
Read more
Assets 2
Loading

v35.32.2

26 Oct 18:01
@primer primer
v35.32.2
a6d6907
This commit was created on github.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v35.32.2

Permalink to documentation

Patch Changes

Assets 2
Loading