ActionBar: Move to main directory (experimental → alpha) (#4574)

* Move ActionBar to main directory

* Export as named

* Fix actionbar export in drafts

* Fix lint errors

* Fix imports

Fix imports

* Create wise-adults-lay.md

* Update wise-adults-lay.md

* update exports snapshot

---------

Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>

.changeset/wise-adults-lay.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+ActionBar: Move to main directory. ActionBar can now be imported from `'@primer/react'`

packages/react/src/drafts/ActionBar/ActionBar.docs.json → packages/react/src/ActionBar/ActionBar.docs.json

@@ -1,10 +1,10 @@
 {
   "id": "actionbar",
   "name": "ActionBar",
-  "status": "draft",
-  "a11yReviewed": false,
+  "status": "alpha",
+  "a11yReviewed": true,
   "stories": [],
-  "importPath": "@primer/react/experimental",
+  "importPath": "@primer/react",
   "props": [
     {
       "name": "size",

packages/react/src/drafts/ActionBar/ActionBar.stories.tsx → packages/react/src/ActionBar/ActionBar.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import type {Meta} from '@storybook/react'
 import ActionBar from '.'
-import Text from '../../Text'
+import Text from '../Text'
 import {
   PencilIcon,
   BoldIcon,
@@ -18,12 +18,12 @@ import {
   ReplyIcon,
   ThreeBarsIcon,
 } from '@primer/octicons-react'
-import {MarkdownInput} from '../MarkdownEditor/_MarkdownInput'
-import {ViewSwitch} from '../MarkdownEditor/_ViewSwitch'
-import type {MarkdownViewMode} from '../MarkdownEditor/_ViewSwitch'
-import {Box, Dialog, Button, Avatar, ActionMenu, IconButton, ActionList} from '../..'
-import {Divider} from '../../deprecated/ActionList/Divider'
-import mockData from '../SelectPanel2/mock-story-data'
+import {MarkdownInput} from '../drafts/MarkdownEditor/_MarkdownInput'
+import {ViewSwitch} from '../drafts/MarkdownEditor/_ViewSwitch'
+import type {MarkdownViewMode} from '../drafts/MarkdownEditor/_ViewSwitch'
+import {Box, Dialog, Button, Avatar, ActionMenu, IconButton, ActionList} from '../'
+import {Divider} from '../deprecated/ActionList/Divider'
+import mockData from '../drafts/SelectPanel2/mock-story-data'
 
 export default {
   title: 'Drafts/Components/ActionBar',

packages/react/src/drafts/ActionBar/ActionBar.test.tsx → packages/react/src/ActionBar/ActionBar.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {behavesAsComponent} from '../../utils/testing'
+import {behavesAsComponent} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
 

packages/react/src/drafts/ActionBar/ActionBar.tsx → packages/react/src/ActionBar/ActionBar.tsx

@@ -1,20 +1,20 @@
 import type {RefObject, MutableRefObject} from 'react'
 import React, {useState, useCallback, useRef, forwardRef} from 'react'
 import {KebabHorizontalIcon} from '@primer/octicons-react'
-import {ActionList} from '../../ActionList'
-import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect'
+import {ActionList} from '../ActionList'
+import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 import styled from 'styled-components'
-import sx from '../../sx'
-import {useOnEscapePress} from '../../hooks/useOnEscapePress'
-import type {ResizeObserverEntry} from '../../hooks/useResizeObserver'
-import {useResizeObserver} from '../../hooks/useResizeObserver'
-
-import {useOnOutsideClick} from '../../hooks/useOnOutsideClick'
-import type {IconButtonProps} from '../../Button'
-import {IconButton} from '../../Button'
-import Box from '../../Box'
-import {ActionMenu} from '../../ActionMenu'
-import {useFocusZone, FocusKeys} from '../../hooks/useFocusZone'
+import sx from '../sx'
+import {useOnEscapePress} from '../hooks/useOnEscapePress'
+import type {ResizeObserverEntry} from '../hooks/useResizeObserver'
+import {useResizeObserver} from '../hooks/useResizeObserver'
+
+import {useOnOutsideClick} from '../hooks/useOnOutsideClick'
+import type {IconButtonProps} from '../Button'
+import {IconButton} from '../Button'
+import Box from '../Box'
+import {ActionMenu} from '../ActionMenu'
+import {useFocusZone, FocusKeys} from '../hooks/useFocusZone'
 
 type ChildSize = {
   text: string

packages/react/src/drafts/ActionBar/index.ts → packages/react/src/ActionBar/index.ts

@@ -7,3 +7,4 @@ const ActionBar = Object.assign(Bar, {
 })
 
 export default ActionBar
+export {ActionBar}

packages/react/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -2,6 +2,8 @@
 
 exports[`@primer/react should not update exports without a semver change 1`] = `
 [
+  "ActionBar",
+  "type ActionBarProps",
   "ActionList",
   "type ActionListDescriptionProps",
   "type ActionListDividerProps",

packages/react/src/drafts/index.ts

@@ -67,8 +67,7 @@ export * from './SelectPanel2'
 export {default as TabPanels} from './TabPanels'
 export type {TabPanelsProps, TabPanelsTabProps, TabPanelsPanelProps} from './TabPanels'
 export * from '../TooltipV2'
-export {default as ActionBar} from './ActionBar'
-export * from './ActionBar'
+export * from '../ActionBar'
 
 export {Stack} from '../Stack'
 export type {StackProps, StackItemProps} from '../Stack'

packages/react/src/index.ts

@@ -193,6 +193,9 @@ export type {
 export {UnderlineNav} from './UnderlineNav'
 export type {UnderlineNavProps, UnderlineNavItemProps} from './UnderlineNav'
 
+export {ActionBar} from './ActionBar'
+export type {ActionBarProps} from './ActionBar'
+
 // eslint-disable-next-line no-restricted-imports
 export {SSRProvider, useSSRSafeId} from './utils/ssr'
 export {default as sx, merge} from './sx'