@primer/[email protected]

Permalink to documentation

Major Changes

• #4800 482b4d6ab815350d5f5b71d686bf76cb3d234686 Thanks @joshblack! - Update Primer React to emit _.css files that are imported by emitted _.js files for styling

Minor Changes

• #4814 1cda89c2d92719e0fa85e3945a53bd5bd6b301de Thanks @langermank! - Add link variant to Button

• #4771 92e05f7c51d23778ead897f935f2cc14ed8ceff1 Thanks @TylerJDev! - Set openOnFocus default to false, making the menu closed initially rather than opening on focus of input

• #4798 0fa60a49177cf6bf60cdb5d4714d5e55708461f9 Thanks @joshblack! - Add the deprecated Dialog, Octicon, Pagehead, TabNav, and Tooltip components to @primer/react/deprecated

Patch Changes

• #4774 11e7aef33f124e84b4cf5c9e62c766834c6d1c31 Thanks @langermank! - - Adjust checkbox and radio border color values for high contrast themes

  • Add default border to SegmentedControl
  • Add inset box-shadow to StatusLabel to prep for new border-color in dark high contrast

• #4666 04eac6280224d365f0496d927a87b32150006f9e Thanks @TylerJDev! - ActionList: Adds aria-labelledby to ActionList.TrailingVisual, making it part of the accessible name of ActionList.Item

• #4768 b7c90ea44be4abfb00a451567115cda6d9bc864d Thanks @siddharthkp! - Header: Add overflow when there are a lot of items

• #4803 527f9a9320c51b9b1a0884b388d5ff53af7c11b1 Thanks @aprendendofelipe! - Bumps @github/relative-time-element to v4.4.2

@primer/[email protected]

Permalink to documentation

Minor Changes

• #4485 991839cd2487a24e76f45b516acb974ea006e1c8 Thanks @mperrotti! - Add loading state to Button and IconButton

• #4725 6db8b2fba72ac934db1481adc4a6f067032b5936 Thanks @broccolinisoup! - PageHeader: Promote the component to Beta status and now it is available to import from "@primer/react"

• #4719 801ca9653154490f664e55bbb357cd6cf6f198be Thanks @joshblack! - Add experimental ScrollableRegion component and useOverflow hook

Patch Changes

• #4770 8574027d887eeb202f3c902397d3f9750b0aeaa4 Thanks @mperrotti! - Prevents inactive indicator icon/tooltip from appearing in ActionMenu items

• #4733 1c131f8ca56790ae516290a8a4199718ccff475b Thanks @broccolinisoup! - TextInput: Refactor TextInputInnerAction to use the default icon button tooltip (No changes in the behaviour or DOM is expected)

• #4778 a9730c93f3d51b6d976fe598f8168e67d4649fb0 Thanks @langermank! - Bug fix: ActionList divider disappears on selected items

• #4757 d4f23fbaf6ee251e142fddadfa69ab1bd6216ef5 Thanks @siddharthkp! - experimental/SelectPanel v2: Fix heading color for dark themes

• #4741 a9fab9805e166a80585366f865ce50f0a727e660 Thanks @Princeyadav05! - AnchoredOverlay: Add 'className' prop to the component

• #4738 453279368462c8e8581b65c56ba3d31a689009c3 Thanks @broccolinisoup! - PageHeader: Fix shrinking Actions sub component in Safari

• #4772 3779dbf117793112945668fe2694cdc6715c2e32 Thanks @TylerJDev! - (Behind feature flag) ActionList: Fix issue where triggering a keyboard event was possible when using the onSelect prop

• #4764 533f997922f2621e242ab3bbe1799939a3d5a6f0 Thanks @siddharthkp! - StateLabel: Differentiate issue and pull request labels for screen readers

• #4710 7d086c73a980de333c55717717dd9e744196dd8e Thanks @joshblack! - Update Blankslate styles to better support server-side rendering

@primer/[email protected]

Permalink to documentation

Minor Changes

• #4718 fd80a60eeb615b3c4464ade10cde7e26e1349e40 Thanks @joshblack! - Add support for providing icons as an element to UnderlineNavItem

• #4702 2536b4995568a6353c67c812a34a970fca7e76bb Thanks @broccolinisoup! - IconButton: Enable tooltips by default in icon buttons by updating the default value of unsafeDisableTooltip to false.

  This is a behaviour change in icon buttons, please upgrade with a caution.

• #4707 d773f264f923677b4109d03b9c5bd5054151037b Thanks @broccolinisoup! - IconButton: Add keyshortcuts prop to allow labelling and describing support for keyboard shortcut (through tooltips)

• #4729 71bdfa847d4cc569bb59b0b4e7a3010f1d7a0faa Thanks @broccolinisoup! - Dialog2: Add support for "InitialFocusRef" that allows to specify an element that should receive focus when the dialog opens.

Patch Changes

• #4742 c004fd50fb333022644c39645f6fabb494fc1d8b Thanks @joshblack! - Update exports for UnderlinePanels component

@primer/[email protected]

Minor Changes

• #4051 7e644b70359fcba07810560abcb8b1fbe785668a Thanks @mperrotti! - Adds a loading state to ActionList items. Also allows the Spinner component to accept screenreader text.

• #4697 a7d1e4f37cd8fd01c86250178ef6ae748d786e03 Thanks @khiga8! - Add TrailingAction support to NavList

Patch Changes

• #4706 71859edc30664e259c855ffdc3732cda8dc6d169 Thanks @TylerJDev! - (Behind feature flag) ActionList: Fix for "full" variant when using button semantics

• #4711 199e3840af17d8ea7c75dbba60cdfbaaf7ef4021 Thanks @TylerJDev! - Removes live region from FormControl validation

@primer/[email protected]

Minor Changes

• #4673 eedc6b16ba3078025c636a8c1368f38f7f9b798d Thanks @joshblack! - Add experimental support for the AriaStatus, AriaAlert, and Announce components

• #4691 55e97a9027aafd0ee432d8d5c293d75792de96dc Thanks @joshblack! - Update internal VisuallyHidden helper to use a span by default over a div to support more nesting scenarios by default

Patch Changes

• #4699 546803e66661d353450c9ef2fc8cbfd51ca18d41 Thanks @siddharthkp! - Overlay: Set style prop correctly

• #4669 1403ef7e015165119b03b73832c5aa8b2f093021 Thanks @broccolinisoup! - PageHeader: Resolve layout shift issues on Title and Actions

@primer/[email protected]

Minor Changes

• #4634 db72a714211b1f2aa8ee0cebaca056c702963542 Thanks @khiga8! - Introduce ActionList.TrailingAction to support secondary action on ActionList.Item

• #4052 e2f35e2eda04e2128aaaf98c188cc94a34de7aeb Thanks @mperrotti! - Adds components to support skeleton loading states, and uses those components to replace ad-hoc skeleton loading states in Primer React components.

• #4140 c093411ec6caa4d4ce1720a68a22e492d5f39458 Thanks @mperrotti! - Adds a prop, srText, to the Spinner component to convey a loading message to assistive technologies such as screen readers.

• #4272 3c467efc794d47326613796149f422c24a9b3cb9 Thanks @TylerJDev! - (Behind feature flag) ActionList: Utilizes <button> inside of <li> for interactive items.

• #4527 623b16e9832173d418092e47a85fd0a0a0d895f8 Thanks @langermank! - Add truncation prop to Button to allow for ellipses overflow or text wrapping for long button labels

• #4550 3e493ba0723c9f0eadfacae6389959023561a700 Thanks @mperrotti! - Adds UnderlinePanels component. It's like UnderlineNav, but for rendering semantic tabs instead of links.

Patch Changes

• #4651 b13bbb33d547352926af5206741db123457a09a1 Thanks @mperrotti! - Prevents text color from changing on hover for "inactive" ActionMenu.Items of the "danger" variant. Before this change, the text color would change on hover. After this change, the text color remains the same on hover.

• #4695 9ee8ec9a16d9a72e4723163115dd59ce7e8dce28 Thanks @TylerJDev! - Fixes conditional in ActionList.Item that was dependent on FF being active before applying forwarded ref.

@primer/[email protected]

Minor Changes

• #4443 f2523373e09e0027f29b36a995574a296ffde3da Thanks @joshblack! - Add experimental InlineMessage component

• #4613 eb2ab132cd451b8c67a85d028483aa00a7a1c81b Thanks @joshblack! - Dialog and ConfirmationDialog can now be closed by clicking on the backdrop surrounding the dialog. This will cause onClose to be called with the escape gesture.

• #4443 f2523373e09e0027f29b36a995574a296ffde3da Thanks @joshblack! - Add support for InlineMessage to experimental

• #4667 e2a974f4a376ca92b305e03f36f905ad02c61341 Thanks @ktravers! - Adds support for className prop to PageHeader component and its children.

@primer/[email protected]

Minor Changes

• #4635 bd861cc779358fcb62fbcb48d2e76cdad90a9301 Thanks @lindseywild! - RelativeTime: Adds noTitle prop if you want to not render the title attribute with full date time.

Patch Changes

• #4456 65f2cd190069af4502e70c4a4d29099f81614122 Thanks @TylerJDev! - Adds full aria-expanded (true/false) state to AnchoredOverlay, and components that consume it

• #4640 6cbbc497680a1ce4ffe4fa3cda45e6beca586f94 Thanks @joshblack! - Explicitly set the type attribute for SegmentedControl.Button

• #4638 240fa50d359f9a338be010c5f7f6af26bb881e2d Thanks @lindseywild! - Bumps @github/relative-time-element to v4.4.1

@primer/[email protected]

Permalink to documentation

Minor Changes

• #4358 e34e4b265f7584c344a4b6b7145da1a5eec1ffb5 Thanks @broccolinisoup! - PageHeader: Update the layout styles so that all interactive content comes after the title (while keeping the component visually the same).
  This is a breaking change however PageHeader is still a draft component so we are releasing the changes as minor but please upgrade with caution.

• #4617 42ba5dc5e722c2341761bf4c6e1e993aac9f2ca8 Thanks @JelloBagel! - Add an ability to provide custom aria-label and aria-labelledby to TreeView.Item

@primer/[email protected]

Permalink to documentation

Patch Changes

• #4555 9b63299689500808167bacff624ff910269417b1 Thanks @JoyceZhu! - Add openInFocus prop (default: true) to AutocompleteInput

• #4601 f57dd3d687042069c5e5712aa906e59df9f8729e Thanks @bwittenberg! - SelectPanel2: Minor optimization for escape key event listener binding

• #4589 ed701bee8b6c1a9fb9b91462034f8fe04b0244ad Thanks @joshblack! - Update how gap is set in Stack to work in wide breakpoints

• #4598 32c687041a600e8b54ffaf9b3ab77f9215a37e3e Thanks @lukasoppermann! - Replaced space-small with base-size-6

• #4543 e47445df6c389fef2aacc72449c02ff471e4cb68 Thanks @TylerJDev! - FormControl: Adds new props to FormControl.Label, requiredText and requiredIndicator