refactor: move drafts to experimental (#4785)

* refactor: move drafts to experimental * chore: add changeset * refactor: rename drafts to experimental * chore: remove imports to drafts * test(e2e): move drafts to experimental * docs: change drafts to experimental * chore: update changeset * chore: update story ids * docs: update drafts to experimental * chore: update top-level storybook order * chore: update banner e2e tests * chore: update figma file imports --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
primer · Sep 16, 2024 · b74c47f · b74c47f
1 parent 59363a6
commit b74c47f
Show file tree

Hide file tree

Showing 144 changed files with 273 additions and 2,305 deletions.
diff --git a/.changeset/hot-baboons-allow.md b/.changeset/hot-baboons-allow.md
@@ -0,0 +1,6 @@
+---
+'@primer/react': major
+---
+
+The drafts entrypoint has been removed from @primer/react. Use
+@primer/react/experimental instead.
diff --git a/contributor-docs/deprecating-components.md b/contributor-docs/deprecating-components.md
@@ -62,7 +62,7 @@ Note: Component v1 is referred to the component that is going to be moved to the
   - [ ] Make sure to update the import code block. I.e. `import { ActionList } from "@primer/react/deprecated"`.
 
 - [ ] Move the new components docs from draft folder to the main docs folder `docs/content/` and update the title by removing `v2`, status as well as the storybook and the source code link.
-  - [ ] Make sure to update `jsx live drafts` -> `jsx live`
+  - [ ] Make sure to update `jsx live experimental` -> `jsx live`
   - [ ] Make sure to update the import code block. I.e. `import { ActionList } from "@primer/react"`.
   - [ ] Update the navigation on `docs/src/@primer/gatsby-theme-doctocat/nav.yml` accordingly.
 

diff --git a/e2e/components/Banner.test.ts b/e2e/components/Banner.test.ts
@@ -6,63 +6,63 @@ import {viewports} from '../test-helpers/viewports'
 const stories: Array<{title: string; id: string; viewports?: Array<keyof typeof viewports>}> = [
   {
     title: 'Default',
-    id: 'drafts-components-banner--default',
+    id: 'experimental-components-banner--default',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
   {
     title: 'Critical',
-    id: 'drafts-components-banner-features--critical',
+    id: 'experimental-components-banner-features--critical',
   },
   {
     title: 'Dismiss',
-    id: 'drafts-components-banner-features--dismiss',
+    id: 'experimental-components-banner-features--dismiss',
   },
   {
     title: 'Dismiss With Actions',
-    id: 'drafts-components-banner-features--dismiss-with-actions',
+    id: 'experimental-components-banner-features--dismiss-with-actions',
   },
   {
     title: 'Info',
-    id: 'drafts-components-banner-features--info',
+    id: 'experimental-components-banner-features--info',
   },
   {
     title: 'Success',
-    id: 'drafts-components-banner-features--success',
+    id: 'experimental-components-banner-features--success',
   },
   {
     title: 'Upsell',
-    id: 'drafts-components-banner-features--upsell',
+    id: 'experimental-components-banner-features--upsell',
   },
   {
     title: 'Warning',
-    id: 'drafts-components-banner-features--warning',
+    id: 'experimental-components-banner-features--warning',
   },
   {
     title: 'WithActions',
-    id: 'drafts-components-banner-features--with-actions',
+    id: 'experimental-components-banner-features--with-actions',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
   {
     title: 'WithHiddenTitle',
-    id: 'drafts-components-banner-features--with-hidden-title',
+    id: 'experimental-components-banner-features--with-hidden-title',
   },
   {
     title: 'WithHiddenTitleAndActions',
-    id: 'drafts-components-banner-features--with-hidden-title-and-actions',
+    id: 'experimental-components-banner-features--with-hidden-title-and-actions',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
   {
     title: 'DismissibleWithHiddenTitleAndActions',
-    id: 'drafts-components-banner-features--dismissible-with-hidden-title-and-actions',
+    id: 'experimental-components-banner-features--dismissible-with-hidden-title-and-actions',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
   {
     title: 'InSidebar',
-    id: 'drafts-components-banner-examples--in-sidebar',
+    id: 'experimental-components-banner-examples--in-sidebar',
   },
   {
     title: 'Multiline',
-    id: 'drafts-components-banner-examples--multiline',
+    id: 'experimental-components-banner-examples--multiline',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
 ]

diff --git a/e2e/components/Blankslate.test.ts b/e2e/components/Blankslate.test.ts
@@ -6,37 +6,37 @@ import {viewports} from '../test-helpers/viewports'
 const stories: Array<{title: string; id: string; viewports?: Array<keyof typeof viewports>}> = [
   {
     title: 'Default',
-    id: 'drafts-components-blankslate--default',
+    id: 'experimental-components-blankslate--default',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
   {
     title: 'Narrow',
-    id: 'drafts-components-blankslate-features--narrow',
+    id: 'experimental-components-blankslate-features--narrow',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
   {
     title: 'Spacious',
-    id: 'drafts-components-blankslate-features--spacious',
+    id: 'experimental-components-blankslate-features--spacious',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
   {
     title: 'With Border',
-    id: 'drafts-components-blankslate-features--with-border',
+    id: 'experimental-components-blankslate-features--with-border',
     viewports: ['primer.breakpoint.sm'],
   },
   {
     title: 'With Primary Action',
-    id: 'drafts-components-blankslate-features--with-primary-action',
+    id: 'experimental-components-blankslate-features--with-primary-action',
     viewports: ['primer.breakpoint.sm'],
   },
   {
     title: 'With Secondary Action',
-    id: 'drafts-components-blankslate-features--with-secondary-action',
+    id: 'experimental-components-blankslate-features--with-secondary-action',
     viewports: ['primer.breakpoint.sm'],
   },
   {
     title: 'With Visual',
-    id: 'drafts-components-blankslate-features--with-visual',
+    id: 'experimental-components-blankslate-features--with-visual',
     viewports: ['primer.breakpoint.sm'],
   },
 ]

diff --git a/e2e/components/DataTable.test.ts b/e2e/components/DataTable.test.ts
@@ -8,7 +8,7 @@ test.describe('DataTable', () => {
       test.describe(theme, () => {
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-datatable--default',
+            id: 'experimental-components-datatable--default',
             globals: {
               colorScheme: theme,
             },
@@ -24,7 +24,7 @@ test.describe('DataTable', () => {
       test.describe(theme, () => {
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-datatable-features--with-title',
+            id: 'experimental-components-datatable-features--with-title',
             globals: {
               colorScheme: theme,
             },
@@ -40,7 +40,7 @@ test.describe('DataTable', () => {
       test.describe(theme, () => {
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-datatable-features--with-title-and-subtitle',
+            id: 'experimental-components-datatable-features--with-title-and-subtitle',
             globals: {
               colorScheme: theme,
             },
@@ -56,7 +56,7 @@ test.describe('DataTable', () => {
       test.describe(theme, () => {
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-datatable-features--with-sorting',
+            id: 'experimental-components-datatable-features--with-sorting',
             globals: {
               colorScheme: theme,
             },
@@ -72,7 +72,7 @@ test.describe('DataTable', () => {
       test.describe(theme, () => {
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-datatable-features--with-actions',
+            id: 'experimental-components-datatable-features--with-actions',
             globals: {
               colorScheme: theme,
             },
@@ -88,7 +88,7 @@ test.describe('DataTable', () => {
       test.describe(theme, () => {
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-datatable-features--with-action',
+            id: 'experimental-components-datatable-features--with-action',
             globals: {
               colorScheme: theme,
             },
@@ -104,7 +104,7 @@ test.describe('DataTable', () => {
       test.describe(theme, () => {
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-datatable-features--with-row-action',
+            id: 'experimental-components-datatable-features--with-row-action',
             globals: {
               colorScheme: theme,
             },
@@ -120,7 +120,7 @@ test.describe('DataTable', () => {
       test.describe(theme, () => {
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-datatable-features--with-row-actions',
+            id: 'experimental-components-datatable-features--with-row-actions',
             globals: {
               colorScheme: theme,
             },
@@ -136,7 +136,7 @@ test.describe('DataTable', () => {
       test.describe(theme, () => {
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-datatable-features--with-row-action-menu',
+            id: 'experimental-components-datatable-features--with-row-action-menu',
             globals: {
               colorScheme: theme,
             },
@@ -152,7 +152,7 @@ test.describe('DataTable', () => {
       test.describe(theme, () => {
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-datatable-features--with-custom-heading',
+            id: 'experimental-components-datatable-features--with-custom-heading',
             globals: {
               colorScheme: theme,
             },
@@ -166,7 +166,7 @@ test.describe('DataTable', () => {
   test.describe('With Overflow', () => {
     test('focusable region for overflow', async ({page}) => {
       await visit(page, {
-        id: 'drafts-components-datatable-features--with-overflow',
+        id: 'experimental-components-datatable-features--with-overflow',
       })
 
       const heading = page.getByRole('heading', {name: 'Repositories'})
@@ -190,7 +190,7 @@ test.describe('DataTable', () => {
       test.describe(theme, () => {
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-datatable-features--with-overflow',
+            id: 'experimental-components-datatable-features--with-overflow',
             globals: {
               colorScheme: theme,
             },

diff --git a/e2e/components/Hidden.test.ts b/e2e/components/Hidden.test.ts
@@ -9,7 +9,7 @@ test.describe('Hidden', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-hidden--default',
+            id: 'experimental-components-hidden--default',
             globals: {
               colorScheme: theme,
             },
@@ -37,7 +37,7 @@ test.describe('Hidden', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-hidden--default',
+            id: 'experimental-components-hidden--default',
             globals: {
               colorScheme: theme,
             },

diff --git a/e2e/components/InlineMessage.test.ts b/e2e/components/InlineMessage.test.ts
@@ -6,11 +6,11 @@ import {matrix, serialize} from '../test-helpers/matrix'
 const stories = [
   {
     title: 'Default',
-    id: 'drafts-components-inlinemessage--default',
+    id: 'experimental-components-inlinemessage--default',
   },
   {
     title: 'Multiline',
-    id: 'drafts-components-inlinemessage-features--multiline',
+    id: 'experimental-components-inlinemessage-features--multiline',
   },
 ]
 
@@ -58,7 +58,7 @@ test.describe('InlineMessage', () => {
         test.describe(theme, () => {
           test('default @vrt', async ({page}) => {
             await visit(page, {
-              id: 'drafts-components-inlinemessage--playground',
+              id: 'experimental-components-inlinemessage--playground',
               globals: {
                 colorScheme: theme,
               },
@@ -72,7 +72,7 @@ test.describe('InlineMessage', () => {
 
           test('axe @aat', async ({page}) => {
             await visit(page, {
-              id: 'drafts-components-inlinemessage--playground',
+              id: 'experimental-components-inlinemessage--playground',
               globals: {
                 colorScheme: theme,
               },