Remove graduated primer_react_action_list_item_gap feature flag

.changeset/nav-list-item-gaps.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+NavList: Graduate item gaps to the default experience.

packages/react/src/ActionList/ActionList.test.tsx

@@ -593,19 +593,6 @@ describe('ActionList with role="tree"', () => {
 
     expect(container.querySelector('[data-component="ActionList"]')).not.toHaveAttribute('data-item-gap')
   })
-
-  it('does not set data-item-gap on a standalone ActionList even when the primer_react_action_list_item_gap feature flag is enabled', () => {
-    const {container} = HTMLRender(
-      <FeatureFlags flags={{primer_react_action_list_item_gap: true}}>
-        <ActionList aria-label="Links">
-          <ActionList.LinkItem href="#">Home</ActionList.LinkItem>
-          <ActionList.LinkItem href="#">About</ActionList.LinkItem>
-        </ActionList>
-      </FeatureFlags>,
-    )
-
-    expect(container.querySelector('[data-component="ActionList"]')).not.toHaveAttribute('data-item-gap')
-  })
 })
 
 describe('ActionList forwarded ref (primer_react_merged_forwarded_refs)', () => {

packages/react/src/ActionList/List.tsx

@@ -51,7 +51,7 @@ const UnwrappedList = <As extends React.ElementType = 'ul'>(
   const providedOrCreatedRef = useProvidedRefOrCreate(forwardedRef as React.RefObject<HTMLElement>)
   const readRef = mergedRefEnabled ? listRef : providedOrCreatedRef
   const appliedRef = mergedRefEnabled ? mergedRef : providedOrCreatedRef
-  const itemGapEnabled = useFeatureFlag('primer_react_action_list_item_gap') && container === 'NavList'
+  const itemGapEnabled = container === 'NavList'
 
   let enableFocusZone = false
   if (enableFocusZoneFromContainer !== undefined) enableFocusZone = enableFocusZoneFromContainer

packages/react/src/FeatureFlags/DefaultFeatureFlags.ts

@@ -6,7 +6,6 @@ export const DefaultFeatureFlags = FeatureFlagScope.create({
   primer_react_select_panel_order_selected_at_top: false,
   primer_react_styled_react_use_primer_theme_providers: false,
   primer_react_action_list_group_heading_trailing_action: false,
-  primer_react_action_list_item_gap: false,
   primer_react_timeline_list_semantics: false,
   primer_react_merged_forwarded_refs: false,
   primer_react_underline_panels_controlled: false,

packages/react/src/NavList/NavList.features.stories.tsx

@@ -22,7 +22,6 @@ import {
 import Octicon from '../Octicon'
 import VisuallyHidden from '../_VisuallyHidden'
 import {ReactRouterLikeLink} from '../Pagination/mocks/ReactRouterLink'
-import {FeatureFlags} from '../FeatureFlags'
 
 const meta: Meta = {
   title: 'Components/NavList/Features',
@@ -622,29 +621,27 @@ export const WithDescription: StoryFn = () => (
   </NavList>
 )
 
-export const WithItemGap: StoryFn = () => (
-  <FeatureFlags flags={{primer_react_action_list_item_gap: true}}>
-    <PageLayout>
-      <PageLayout.Pane position="start">
-        <NavList>
-          <NavList.Item href="#" aria-current="page">
-            Home
-          </NavList.Item>
-          <NavList.Item defaultOpen href="#">
-            About
-            <NavList.SubNav>
-              <NavList.Item href="#">Team</NavList.Item>
-              <NavList.Item href="#">History</NavList.Item>
-            </NavList.SubNav>
-          </NavList.Item>
-          <NavList.Item href="#">Contact</NavList.Item>
-        </NavList>
-      </PageLayout.Pane>
-    </PageLayout>
-  </FeatureFlags>
+export const WithGapBetweenItems: StoryFn = () => (
+  <PageLayout>
+    <PageLayout.Pane position="start">
+      <NavList>
+        <NavList.Item href="#" aria-current="page">
+          Home
+        </NavList.Item>
+        <NavList.Item defaultOpen href="#">
+          About
+          <NavList.SubNav>
+            <NavList.Item href="#">Team</NavList.Item>
+            <NavList.Item href="#">History</NavList.Item>
+          </NavList.SubNav>
+        </NavList.Item>
+        <NavList.Item href="#">Contact</NavList.Item>
+      </NavList>
+    </PageLayout.Pane>
+  </PageLayout>
 )
 
-WithItemGap.storyName = 'With gap between items (behind feature flag)'
+WithGapBetweenItems.storyName = 'With gap between items'
 
 export const WithoutDivider: StoryFn = () => (
   <PageLayout>

packages/react/src/NavList/NavList.test.tsx

@@ -5,7 +5,6 @@ import {renderToStaticMarkup} from 'react-dom/server'
 import {NavList, type NavListGroupHeadingProps} from './NavList'
 import {ReactRouterLikeLink} from '../Pagination/mocks/ReactRouterLink'
 import {implementsClassName} from '../utils/testing'
-import {FeatureFlags} from '../FeatureFlags'
 import {asSlot} from '../utils/as-slot'
 
 type NextJSLinkProps = {href: string; children: React.ReactNode}
@@ -601,8 +600,8 @@ describe('NavList.ShowMoreItem with pages', () => {
     expect(queryByRole('link', {name: 'Item 4'})).toHaveAttribute('href', '#item4')
   })
 
-  describe('item gap feature flag', () => {
-    it('does not set data-item-gap on the underlying ActionList by default', () => {
+  describe('item gaps', () => {
+    it('sets data-item-gap on the underlying ActionList by default', () => {
       const {container} = render(
         <NavList>
           <NavList.Item href="#" aria-current="page">
@@ -612,44 +611,10 @@ describe('NavList.ShowMoreItem with pages', () => {
         </NavList>,
       )
 
-      expect(container.querySelector('[data-component="ActionList"]')).not.toHaveAttribute('data-item-gap')
-    })
-
-    it('sets data-item-gap on the underlying ActionList when the primer_react_action_list_item_gap feature flag is enabled', () => {
-      const {container} = render(
-        <FeatureFlags flags={{primer_react_action_list_item_gap: true}}>
-          <NavList>
-            <NavList.Item href="#" aria-current="page">
-              Home
-            </NavList.Item>
-            <NavList.Item href="#">About</NavList.Item>
-          </NavList>
-        </FeatureFlags>,
-      )
-
       expect(container.querySelector('[data-component="ActionList"]')).toHaveAttribute('data-item-gap', '')
     })
 
-    it('adds a gap between a parent item and the first item of its expanded sub-nav when the feature flag is enabled', () => {
-      const {container} = render(
-        <FeatureFlags flags={{primer_react_action_list_item_gap: true}}>
-          <NavList>
-            <NavList.Item defaultOpen href="#">
-              Item 1
-              <NavList.SubNav>
-                <NavList.Item href="#">Sub item 1</NavList.Item>
-              </NavList.SubNav>
-            </NavList.Item>
-          </NavList>
-        </FeatureFlags>,
-      )
-
-      const subGroup = container.querySelector('ul[aria-labelledby]')
-      expect(subGroup).not.toBeNull()
-      expect(getComputedStyle(subGroup as HTMLElement).marginBlockStart).toBe('2px')
-    })
-
-    it('does not add a gap before a sub-nav when the feature flag is disabled', () => {
+    it('adds a gap between a parent item and the first item of its expanded sub-nav by default', () => {
       const {container} = render(
         <NavList>
           <NavList.Item defaultOpen href="#">
@@ -663,7 +628,7 @@ describe('NavList.ShowMoreItem with pages', () => {
 
       const subGroup = container.querySelector('ul[aria-labelledby]')
       expect(subGroup).not.toBeNull()
-      expect(getComputedStyle(subGroup as HTMLElement).marginBlockStart).toBe('0px')
+      expect(getComputedStyle(subGroup as HTMLElement).marginBlockStart).toBe('2px')
     })
   })