v35.23.0

Permalink to documentation

Minor Changes

• #3068 09e11335 Thanks @mperrotti! - Adds text alignment option to columns

• #3012 04d9db02 Thanks @radglob! - Adds tabIndex and role="region" to PageLayout.Pane when overflow is detected (scrollHeight > clientHeight). Also requires either aria-labelledby or aria-label when overflow is detected, and throws an error if neither is defined.

Patch Changes

• #3056 7e4f7714 Thanks @langermank! - Remove incorrect focus styles on ActionList items

• #3061 b71cb1fb Thanks @broccolinisoup! - Stop rendering activeClassName when there is no to prop is passed for react-router (TabNav, SubNav, BreadCrumb, UnderlineNav v1)

• #3041 e5f13300 Thanks @simurai! - Use open/closed colors for StateLabel

v35.22.0

Permalink to documentation

Minor Changes

• #2901 992f1acd Thanks @joshblack! - Add babel-plugin-dev-expression to transform warning calls in package bundle

• #3027 3153c810 Thanks @talum! - Export useResizeObserver hook

Patch Changes

• #2996 baa63958 Thanks @mperrotti! - Implements column width features for the DataTable

• #3036 51a2cc94 Thanks @colebemis! - PageLayout and SplitPageLayout are now SSR-compatible.

  Warning: In this new implementation, PageLayout.Header and PageLayout.Footer must be direct children of PageLayout. The same applies to SplitPageLayout

• #3029 bb9f1561 Thanks @mperrotti! - Adds new a11y improvements to Pagination.

• #2993 6aa9205e Thanks @mperrotti! - Makes StateLabel's 'status' prop required

• #3009 cc4e2bc5 Thanks @iansan5653! - Recalculate autocomplete suggestions if the input data changes while the menu is open

• #3010 022d449c Thanks @broccolinisoup! - SegmentedControl: Resolve axe-violation by adding a discernible text to the icon button and removing the tooltip until it is marked as accessible

v35.21.0

Permalink to documentation

Minor Changes

• #2953 91688a41 Thanks @joshblack! - Add Table.Divider and Table.Actions components for Table

• #2985 38ac17a6 Thanks @broccolinisoup! - Hidden: rename prop 'on' -> 'when'

• #2951 eff43b07 Thanks @joshblack! - Add DataTable, Table to drafts entrypoint

Patch Changes

• #2929 ee4b76f8 Thanks @broccolinisoup! - Button: Fixes the style override issue when size is explicitly specified as medium

• #2933 81ed5403 Thanks @langermank! - Bug fix: ButtonGroup hover state causes buttons to shift horizontally

• #2948 0215c969 Thanks @colebemis! - Include story source code in generated/components.json

• #2905 6bf9e677 Thanks @broccolinisoup! - PageHeader: Make default heading level h2

• #2973 3a25597a Thanks @colebemis! - Upgrade @primer/octicons-react dependency to ^18.0.0

• #2910 0c701920 Thanks @iansan5653! - Add isolation:isolate to ButtonGroup container

• #2843 533f0b4a Thanks @mperrotti! - Updates the ToggleSwitch styles to be more minimal and less dimensional

• #2702 0121c0f5 Thanks @mperrotti! - Pagination design updates:

  • Updates spacing inside of the buttons to match the "medium" control metrics: https://primer.style/primitives/spacing#medium
  • Updates hover style to align with ActionList items and other elements that may appear on any background color
  • Updates ARIA markup to improve assistive technology experience

• #2974 6a795da6 Thanks @iansan5653! - Fix ellipsis truncation in Token

• #2925 6f50b156 Thanks @langermank! - Decrease invisible button icon CSS specifity

• #2922 7140ac8f Thanks @green6erry! - Updated PageLayout.Pane to conditionally include id prop

• #2702 0121c0f5 Thanks @mperrotti! - Updates the visual design of the Pagination component to align with the latest design token usage patterns. Also improves ARIA markup to hide the "..." from assistive technologies.

• #2954 041dd150 Thanks @iansan5653! - Allow React.ReactNode as Token content

• #3004 45107bc5 Thanks @iansan5653! - Add support for custom emojis and a declarative "loading" state in MarkdownEditor suggestions

v35.20.0

Permalink to documentation

Minor Changes

• 5967b0a9 Thanks @broccolinisoup! - Issue a deprecation notice for UnderlineNav v1

• #2815 74df59c4 Thanks @mperrotti! - Addresses feedback from the accessibility team about our SegmentedControl component. These changes include an update to ActionMenu that allows u to specify the ID of the DOM node that labels the menu.

• #2768 5055b91b Thanks @green6erry! - Confine Heading as prop to header element types

• #2903 13651ba1 Thanks @colebemis! - TreeView promoted to beta status. You can now import it from the main bundle instead of /drafts:

  - import {TreeView} from '@primer/react/drafts'
  + import {TreeView} from '@primer/react'

Patch Changes

• #2792 03b470b0 Thanks @broccolinisoup! - - Add a block prop for full width

  • Add alignContent prop to align content to center or start for full width buttons
  • Use control sizing CSS variable values (not using CSS vars just yet)
  • Use height over padding for more control over sizing
  • Adjust invisible button variant to match new design using ActionList colors

• #2868 03ebf41b Thanks @colebemis! - TreeView: Reliably move focus from loading item to first asynchronously loaded item

• #2845 c31314c8 Thanks @colebemis! - TreeView: When moving focus to TreeView, the current item will be focused by default.

• #2770 3bf1b0e3 Thanks @broccolinisoup! - UnderlineNav2: Handle the case when container is too small to render any items

• d8f18435 Thanks @iansan5653! - Add aria-modal attribute to Dialog (V2) element

• 3127e104 Thanks @jbrown1618! - Upgrade primer/behaviors from 1.3.1 to 1.3.2

• 2a00aab6 Thanks @colebemis! - TreeView: Set aria-selected=true on focused item

• ca7398df Thanks @broccolinisoup! - CounterLabel: Do not parse children to string for visually hidden content

• #2900 3768cd7d Thanks @broccolinisoup! - PageHeader: A11y eng review remediations

• 8bce9740 Thanks @broccolinisoup! - UnderlineNav2: Update total height of the navigation to 48px

• 196a7929 Thanks @iansan5653! - Fix useDynamicTextareaHeight not taking into account top padding of textarea

  Also makes the hook accept a RefObject instead of an element instance

• #2845 c31314c8 Thanks @colebemis! - TabNav: Re-focusing a TabNav will focus the selected tab

v35.19.0

Permalink to documentation

Minor Changes

• #2807 81447a10 Thanks @joshblack! - Add default type="button" for Button. This removes the implicit type="submit" for a <button> and requires an explicit type to change.

• #2789 44f66cb9 Thanks @green6erry! - warn user if link as prop is not or

Patch Changes

• #2818 7403a47f Thanks @iansan5653! - Improve initial useCombobox initialization process to avoid race conditions

v35.18.0

Permalink to documentation

Minor Changes

• #2715 8bd40de2 Thanks @ajhenry! - Overlay: Add position, right, and bottom props

Patch Changes

• #2732 3f70b2e6 Thanks @renbaoshuo! - Prevent automatic batching updates in ThemeProvider to ensure client use right colorMode

• #2701 73dbefdb Thanks @mperrotti! - Updates visual design of the Checkbox and Radio component to match the new direction defined by design.

• #2729 4dcf658c Thanks @broccolinisoup! - PageHeader: Add visual ordering for layout enforcement

• #2710 ac0abd17 Thanks @green6erry! - TreeView: aria status description is now accurate

• #2729 4dcf658c Thanks @broccolinisoup! - Hidden: Refactor Hidden component to use getBreakpointsDeclarations util function to reduce layout shifts

• #2759 693ce68c Thanks @manuelpuyol! - Update defaultProps to be JS function defaults

v35.17.0

Permalink to documentation

Minor Changes

• #2677 d356be83 Thanks @mattcosta7! - update types for button extensions

• #2661 5dd4bb1f Thanks @joshblack! - Update to React.useId() when using React 18

• #2694 5a659295 Thanks @broccolinisoup! - PageHeader: export PageHeader in the draft bundle

• #2662 1266b108 Thanks @broccolinisoup! - PageHeader: Add a util function that returns breakpoint styles with the given CSS property and values

• #2593 d8875861 Thanks @radglob! - Make resizable SplitPageLayout.Pane keyboard accessible.

Patch Changes

• #2765 154db4b9 Thanks @iansan5653! - Remove shadow from MarkdownEditor textarea

• #2685 3a8bb765 Thanks @radglob! - Setting overflow: auto without a media query to fix resizable pane bug.

• #2718 9cb01190 Thanks @marywhite! - Prevent default when clicking on MarkdownViewer links with openLinksInNewTab

• #2656 db0db6ec Thanks @joshblack! - Update useDetails ref type to HTMLDetailsElement

• #2762 74016a7c Thanks @mattcosta7! - Token: Update component type to be PolymorphicForwardRefComponent.

  this avoids types being swallowed by forwardRef (which isn't polymorphic)

• #2658 20e18c07 Thanks @joshblack! - Update TypeScript types for deprecated ButtonClose to support React 18

• #2755 dd1e5ce7 Thanks @dwilsonactual! - Update isScrollable utility to only run getComputedStyle on scrollable content.

• #2660 1fb6ee9f Thanks @joshblack! - Update npm package to include deprecated/package.json for TypeScript type resolution

• #2721 386561a3 Thanks @simurai! - Add Noto Sans to fontStack

• #2756 5826b94d Thanks @broccolinisoup! - Button: Revert new enhancement due to introducing major styling changes

• #2760 24fb9a77 Thanks @broccolinisoup! - Token: Omit onResize and onResizeCapture methods that are included in the method expansion and causes type issues in React 18

• #2757 b55d8232 Thanks @jdrush89! - Making onClick of ActionList.LinkItem functional

• #2697 5efab195 Thanks @keithamus! - Update @github/relative-time-element package dependency to a range

• #2712 88008a0d Thanks @ajhenry! - Add sx prop to Dialog v2

• #2750 dcb51c64 Thanks @jdrush89! - Show tooltips on focus-within

• #2661 5dd4bb1f Thanks @joshblack! - Update types for components to work for React 17 and 18

v35.16.0

Permalink to documentation

Minor Changes

• #2265 2ef9ad43 Thanks @pksjce! - PageHeader: Draft implementation

• #2484 5eb6939a Thanks @keithamus! - Add RelativeTime component

• #2657 cc909dc4 Thanks @green6erry! - Assign aria-keyshorcuts and role properties to the correct element in LinkItem.tsx

• #2693 f8939f33 Thanks @broccolinisoup! - Relative Time Element : Publish v4.1.2 in NPM and GPR

Patch Changes

• #2659 84d29977 Thanks @kendallgassner! - Add a console warning if the Button and IconButton as property is used incorrectly

• #2666 d995bb84 Thanks @mattcosta7! - make check for semantic as a compile time effect

• #2639 fd9ab396 Thanks @iansan5653! - Fix MarkdownEditor preview overflowing its container

• #2689 7fc9acd7 Thanks @mperrotti! - Removes useless z-index from the remove button in tokens

• #2635 95ba0790 Thanks @joshblack! - Update Radio to only use disabled when provided and no longer set aria-disabled

• #2640 a8f2289d Thanks @jdrush89! - TreeView: Add containIntrinsicSize prop and typeahead performance improvement

• #2692 5352bccb Thanks @jdrush89! - Trigger onSelect when TreeView items are middle clicked

v35.15.1

Patch Changes

• #2625 404e2b15 Thanks @broccolinisoup! - UnderlineNav2: Use useIsomorphicLayoutEffect to make it SSR friendly

• #2606 e98bcdf9 Thanks @radglob! - Fix issue where scroll containers nested inside of PageLayout.Pane would be hard to use on mobile.

v35.15.0

Minor Changes

• #2591 764bf6b9 Thanks @iansan5653! - Add useRefObjectAsForwardedRef to public hooks

• #2618 04683150 Thanks @broccolinisoup! - UnderlineNav2: expose aria-current in the API to enable it to be used as the selected status of UnderlineNav.Item

Patch Changes

• #2592 d9c7290a Thanks @radglob! - Delete TreeView.LinkItem. Use TreeView.Item and call a navigation function inside the onSelect callback instead:

  - <TreeView.LinkItem href="#">...
  + <TreeView.Item onSelect={() => navigate('#')}>...

• #2545 eb30fdad Thanks @joshblack! - Update setTimeout in AutocompleteInput to cancel when unmounting

• #2615 a7455696 Thanks @Swiftwork! - Fix Windows checkout by removing unsupported colon in filename

• #2603 22059e9f Thanks @broccolinisoup! - UnderlineNav2: Render non-breaking space properly for screen readers

• #2563 3085fde0 Thanks @josepmartins! - Remove deprecated component instances in stories

• #2569 0e7a6388 Thanks @nicolleromero! - Present MarkdownEditor from resizing when rendered in a condensed state

• #2604 7e9e3678 Thanks @broccolinisoup! - Accessibility improvements on CounterLabel for better screen reader announcing