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

@@ -600,19 +600,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

@@ -52,8 +52,7 @@
   const providedOrCreatedRef = useProvidedRefOrCreate(forwardedRef as React.RefObject<HTMLElement>)
   const readRef = mergedRefEnabled ? listRef : providedOrCreatedRef
   const appliedRef = mergedRefEnabled ? mergedRef : providedOrCreatedRef
-  const itemGapFlag = useFeatureFlag('primer_react_action_list_item_gap')
   const itemGapEnabled = itemGapFlag && !disableItemGap && 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_button_loading_disabled_styles: false,

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

@@ -22,7 +22,6 @@
 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,32 +621,30 @@
   </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 WithoutItemGap: StoryFn = () => (
   <FeatureFlags flags={{primer_react_action_list_item_gap: true}}>
     <PageLayout>
       <PageLayout.Pane position="start">
         <NavList disableItemGap>

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

@@ -5,7 +5,6 @@
 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 @@
     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,60 +611,24 @@
         </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('does not set data-item-gap when disableItemGap is set and the feature flag is enabled', () => {
+    it('does not set data-item-gap when disableItemGap is set', () => {
       const {container} = render(
-        <FeatureFlags flags={{primer_react_action_list_item_gap: true}}>
-          <NavList disableItemGap>
-            <NavList.Item href="#" aria-current="page">
-              Home
-            </NavList.Item>
-            <NavList.Item href="#">About</NavList.Item>
-          </NavList>
-        </FeatureFlags>,
+        <NavList disableItemGap>
+          <NavList.Item href="#" aria-current="page">
+            Home
+          </NavList.Item>
+          <NavList.Item href="#">About</NavList.Item>
+        </NavList>,
       )
 
       expect(container.querySelector('[data-component="ActionList"]')).not.toHaveAttribute('data-item-gap')
       expect(container.querySelector('nav')).not.toHaveAttribute('disableitemgap')
     })
 
-    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="#">
@@ -679,12 +642,12 @@
 
       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')
     })
 
     it('does not add a gap before a sub-nav when disableItemGap is set and the feature flag is enabled', () => {
       const {container} = render(
         <FeatureFlags flags={{primer_react_action_list_item_gap: true}}>
           <NavList disableItemGap>
             <NavList.Item defaultOpen href="#">
               Item 1