@primer/react 38.36.0-rc.3fb350b1f → 38.36.0-rc.62d935135

package/CHANGELOG.md

@@ -7,6 +7,10 @@
 - [#8212](https://github.com/primer/react/pull/8212) [`9ac9343`](https://github.com/primer/react/commit/9ac9343a70fd0f70413a42cd27baf562a74dd4fc) Thanks [@mattcosta7](https://github.com/mattcosta7)! - ThemeProvider: Add a CSS-variable-based implementation to `@primer/react/next`
   and deprecate the legacy JavaScript theme implementation.
 
+### Patch Changes
+
+- [#8260](https://github.com/primer/react/pull/8260) [`24d0831`](https://github.com/primer/react/commit/24d0831d34b13e3b4bac8afcfa2ccd5795cd9a9d) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - UnderlineNav: Keep item icons visible by default at the medium breakpoint and above
+
 ## 38.35.1
 
 ### Patch Changes

package/dist/UnderlineNav/UnderlineNav.d.ts

@@ -17,8 +17,9 @@ type UnderlineNavProps = {
    */
   variant?: 'inset' | 'flush';
   /**
-   * Customize when the icons are hidden to save space. Set to `null` to always show icons.
-   * Defaults to `xxlarge`; if you know there won't be very many tabs you might set this to a smaller value.
+   * Controls the container width below which icons are hidden to save space. Defaults to `medium`.
+   * To keep icons visible in a narrow container, use a smaller breakpoint such as `xsmall`, or set to `null` to
+   * always show icons.
    */
   hideIconsBreakpoint?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | null;
 };

package/dist/UnderlineNav/UnderlineNav.js

@@ -22,7 +22,7 @@ const UnderlineNav = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 	const as = t1 === void 0 ? "nav" : t1;
 	const loadingCounters = t2 === void 0 ? false : t2;
 	const variant = t3 === void 0 ? "inset" : t3;
-	const hideIconsBreakpoint = t4 === void 0 ? "xxlarge" : t4;
+	const hideIconsBreakpoint = t4 === void 0 ? "medium" : t4;
 	const backupRef = useRef(null);
 	const navRef = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
 	const listRef = useRef(null);

package/generated/components.json

@@ -9042,7 +9042,7 @@
         },
         {
           "id": "components-underlinenav-features--overflow-template",
-          "code": "({ initialSelectedIndex = 1 }: { initialSelectedIndex?: number }) => {\n  const [selectedIndex, setSelectedIndex] = React.useState<number | null>(\n    initialSelectedIndex,\n  )\n  return (\n    <UnderlineNav aria-label=\"Repository\">\n      {items.map((item, index) => (\n        <UnderlineNav.Item\n          key={item.navigation}\n          leadingVisual={item.icon}\n          aria-current={index === selectedIndex ? 'page' : undefined}\n          // Set so that navigation in interaction tests does not cause the\n          // page to load the storybook iframe URL and instead keeps the test in\n          // the local preview\n          target=\"_self\"\n          onSelect={(event) => {\n            event.preventDefault()\n            setSelectedIndex(index)\n          }}\n          counter={item.counter}\n          href={item.href}\n        >\n          {item.navigation}\n        </UnderlineNav.Item>\n      ))}\n    </UnderlineNav>\n  )\n}"
+          "code": "({ initialSelectedIndex = 1 }: { initialSelectedIndex?: number }) => {\n  const [selectedIndex, setSelectedIndex] = React.useState<number | null>(\n    initialSelectedIndex,\n  )\n  return (\n    <UnderlineNav aria-label=\"Repository\" hideIconsBreakpoint=\"medium\">\n      {items.map((item, index) => (\n        <UnderlineNav.Item\n          key={item.navigation}\n          leadingVisual={item.icon}\n          aria-current={index === selectedIndex ? 'page' : undefined}\n          // Set so that navigation in interaction tests does not cause the\n          // page to load the storybook iframe URL and instead keeps the test in\n          // the local preview\n          target=\"_self\"\n          onSelect={(event) => {\n            event.preventDefault()\n            setSelectedIndex(index)\n          }}\n          counter={item.counter}\n          href={item.href}\n        >\n          {item.navigation}\n        </UnderlineNav.Item>\n      ))}\n    </UnderlineNav>\n  )\n}"
         },
         {
           "id": "components-underlinenav-features--overflow-on-narrow-screen",
@@ -9078,6 +9078,12 @@
           "defaultValue": "false",
           "description": "Whether the navigation items are in loading state. Component waits for all the counters to finish loading to prevent multiple layout shifts."
         },
+        {
+          "name": "hideIconsBreakpoint",
+          "type": "'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | null",
+          "defaultValue": "'medium'",
+          "description": "Controls the container width below which icons are hidden to save space. To keep icons visible in a narrow container, use a smaller breakpoint such as `xsmall`, or set to `null` to always show icons."
+        },
         {
           "name": "variant",
           "type": "'inset' | 'flush'",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.36.0-rc.3fb350b1f",
+  "version": "38.36.0-rc.62d935135",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",