refactor: remove MarkdownEditor and MarkdownViewer (#4782)

* refactor: remove MarkdownEditor and MarkdownViewer

* chore: remove MarkdownEditor components from ActionBar

* test(e2e): update e2e tests for ActionBar

* test(vrt): update snapshots

---------

Co-authored-by: Josh Black <[email protected]>

.changeset/nasty-apricots-whisper.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove the MarkdownEditor and MarkdownViewer components from Primer React

e2e/components/drafts/ActionBar.test.ts

@@ -4,22 +4,22 @@ import {themes} from '../../test-helpers/themes'
 import {viewports} from '../../test-helpers/viewports'
 
 test.describe('ActionBar', () => {
-  test.describe('Default state', () => {
+  test.describe('Default', () => {
     for (const theme of themes) {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-actionbar--comment-box',
+            id: 'drafts-components-actionbar--default',
             globals: {
               colorScheme: theme,
             },
           })
-          expect(await page.screenshot()).toMatchSnapshot(`drafts.ActionBar.CommentBox.${theme}.png`)
+          expect(await page.screenshot()).toMatchSnapshot(`drafts.ActionBar.${theme}.png`)
         })
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-actionbar--comment-box',
+            id: 'drafts-components-actionbar--default',
             globals: {
               colorScheme: theme,
             },
@@ -31,24 +31,24 @@ test.describe('ActionBar', () => {
   })
 
   test.describe('ActionBar Interactions', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('Overflow interaction @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'drafts-components-actionbar--comment-box',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          const toolbarButtonSelector = `button[data-component="IconButton"]`
-          await expect(page.locator(toolbarButtonSelector)).toHaveCount(10)
-          await page.setViewportSize({width: viewports['primer.breakpoint.xs'], height: 768})
-          await expect(page.locator(toolbarButtonSelector)).toHaveCount(6)
-          const moreButtonSelector = page.getByLabel('More Comment box toolbar items')
-          await moreButtonSelector.click()
-          await expect(page.locator('ul[role="menu"]>li')).toHaveCount(5)
-        })
+    test('Overflow interaction @vrt', async ({page}) => {
+      await visit(page, {
+        id: 'drafts-components-actionbar--default',
       })
-    }
+
+      await page.setViewportSize({width: viewports['primer.breakpoint.lg'], height: 768})
+
+      const toolbarButtonSelector = `button[data-component="IconButton"]`
+      await expect(page.locator(toolbarButtonSelector)).toHaveCount(10)
+
+      await page.setViewportSize({width: 320, height: 768})
+      await page.getByLabel('More Toolbar items').waitFor()
+
+      await expect(page.locator(toolbarButtonSelector)).toHaveCount(6)
+
+      const moreButtonSelector = page.getByLabel('More Toolbar items')
+      await moreButtonSelector.click()
+      await expect(page.locator('ul[role="menu"] > li')).toHaveCount(5)
+    })
   })
 })

package.json

@@ -101,4 +101,4 @@
   "lint-staged": {
     "**/*.{js,ts,tsx,md,mdx}": "npm run lint"
   }
-}
+}