Deprecate MarkdownEditor, MarkdownViewer, InlineAutocomplete, and related code (#4027)

iansan5653 · web-flow · commit 49f585f91e78 · 2023-12-13T17:56:50.000Z
* Deprecate `MarkdownEditor`

* Deprecate `MarkdownViewer`

* Move `InlineAutocomplete` to `drafts`

* Deprecate `InlineAutocomplete`

* Deprecate related hooks

* Add issue link

* Create cold-pigs-shop.md

* Update path in InlineAutocomplete docs

* Update statuses in mdx files

* Update e2e tests
diff --git a/.changeset/cold-pigs-shop.md b/.changeset/cold-pigs-shop.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Deprecate `MarkdownEditor`, `MarkdownViewer`, `InlineAutocomplete`, and related hooks
diff --git a/docs/content/drafts/InlineAutocomplete.mdx b/docs/content/drafts/InlineAutocomplete.mdx
@@ -1,13 +1,13 @@
 ---
 title: InlineAutocomplete
 componentId: inline_autocomplete
-status: Draft
+status: Deprecated
 description: Provides inline auto completion suggestions for an input or textarea.
-source: https://github.com/primer/react/tree/main/src/InlineAutocomplete
-storybook: '/react/storybook?path=/story/drafts-components-inlineautocomplete--default'
+source: https://github.com/primer/react/tree/main/src/drafts/InlineAutocomplete
+storybook: '/react/storybook?path=/story/deprecated-components-inlineautocomplete--default'
 ---
 
-import data from '../../../src/InlineAutocomplete/InlineAutocomplete.docs.json'
+import data from '../../../src/drafts/InlineAutocomplete/InlineAutocomplete.docs.json'
 
 ```js
 import {InlineAutocomplete} from '@primer/react/drafts'
diff --git a/docs/content/drafts/MarkdownEditor.mdx b/docs/content/drafts/MarkdownEditor.mdx
@@ -1,7 +1,7 @@
 ---
 componentId: markdown_editor
 title: MarkdownEditor
-status: Draft
+status: Deprecated
 description: Full-featured Markdown input.
 storybook: '/react/storybook?path=/story/components-forms-markdowneditor--default'
 ---
diff --git a/docs/content/drafts/MarkdownViewer.mdx b/docs/content/drafts/MarkdownViewer.mdx
@@ -1,7 +1,7 @@
 ---
 componentId: markdown_viewer
 title: MarkdownViewer
-status: Draft
+status: Deprecated
 description: Displays rendered Markdown and facilitates interaction.
 ---
 
diff --git a/e2e/components/InlineAutocomplete.test.ts b/e2e/components/InlineAutocomplete.test.ts
@@ -8,7 +8,7 @@ test.describe('InlineAutocomplete', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-inlineautocomplete--default',
+            id: 'deprecated-components-inlineautocomplete--default',
             globals: {
               colorScheme: theme,
             },
@@ -20,7 +20,7 @@ test.describe('InlineAutocomplete', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-inlineautocomplete--default',
+            id: 'deprecated-components-inlineautocomplete--default',
             globals: {
               colorScheme: theme,
             },
@@ -36,7 +36,7 @@ test.describe('InlineAutocomplete', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-inlineautocomplete--playground',
+            id: 'deprecated-components-inlineautocomplete--playground',
             globals: {
               colorScheme: theme,
             },
@@ -48,7 +48,7 @@ test.describe('InlineAutocomplete', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-inlineautocomplete--playground',
+            id: 'deprecated-components-inlineautocomplete--playground',
             globals: {
               colorScheme: theme,
             },
@@ -64,7 +64,7 @@ test.describe('InlineAutocomplete', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-inlineautocomplete-features--custom-rendering',
+            id: 'deprecated-components-inlineautocomplete-features--custom-rendering',
             globals: {
               colorScheme: theme,
             },
@@ -76,7 +76,7 @@ test.describe('InlineAutocomplete', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-inlineautocomplete-features--custom-rendering',
+            id: 'deprecated-components-inlineautocomplete-features--custom-rendering',
             globals: {
               colorScheme: theme,
             },
@@ -92,7 +92,7 @@ test.describe('InlineAutocomplete', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-inlineautocomplete-features--single-line',
+            id: 'deprecated-components-inlineautocomplete-features--single-line',
             globals: {
               colorScheme: theme,
             },
@@ -104,7 +104,7 @@ test.describe('InlineAutocomplete', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-inlineautocomplete-features--single-line',
+            id: 'deprecated-components-inlineautocomplete-features--single-line',
             globals: {
               colorScheme: theme,
             },
diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.docs.json b/src/drafts/InlineAutocomplete/InlineAutocomplete.docs.json
@@ -1,7 +1,7 @@
 {
   "id": "drafts_inline_autocomplete",
   "name": "InlineAutocomplete",
-  "status": "draft",
+  "status": "deprecated",
   "a11yReviewed": false,
   "stories": [],
   "props": [
diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.features.stories.tsx b/src/drafts/InlineAutocomplete/InlineAutocomplete.features.stories.tsx
@@ -1,10 +1,10 @@
 import React, {useState} from 'react'
 import {Meta} from '@storybook/react'
-import {ActionList, Avatar, ActionListItemProps, Textarea, TextInput, FormControl} from '..'
+import {ActionList, Avatar, ActionListItemProps, Textarea, TextInput, FormControl} from '../..'
 import InlineAutocomplete, {ShowSuggestionsEvent, Suggestions} from '.'
 
 export default {
-  title: 'Drafts/Components/InlineAutocomplete/Features',
+  title: 'Deprecated/Components/InlineAutocomplete/Features',
   component: InlineAutocomplete,
 } as Meta<typeof InlineAutocomplete>
 
diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.stories.tsx b/src/drafts/InlineAutocomplete/InlineAutocomplete.stories.tsx
@@ -1,11 +1,11 @@
 import React, {useState} from 'react'
 import {Meta} from '@storybook/react'
 
-import {BaseStyles, Box, Textarea, ThemeProvider, FormControl} from '..'
+import {BaseStyles, Box, Textarea, ThemeProvider, FormControl} from '../..'
 import InlineAutocomplete, {ShowSuggestionsEvent, Suggestions} from '.'
 
 export default {
-  title: 'Drafts/Components/InlineAutocomplete',
+  title: 'Deprecated/Components/InlineAutocomplete',
   component: InlineAutocomplete,
   decorators: [
     Story => {
diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx b/src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx
@@ -2,11 +2,11 @@ import React, {useState} from 'react'
 import {fireEvent, render, within} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import InlineAutocomplete, {ShowSuggestionsEvent, Suggestions, Trigger} from '.'
-import FormControl from '../FormControl'
-import {ActionList} from '../ActionList'
-import Textarea from '../Textarea'
-import ThemeProvider from '../ThemeProvider'
-import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect'
+import FormControl from '../../FormControl'
+import {ActionList} from '../../ActionList'
+import Textarea from '../../Textarea'
+import ThemeProvider from '../../ThemeProvider'
+import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect'
 
 const label = 'Inline Autocomplete'
 
diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx b/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx
@@ -1,9 +1,9 @@
 import React, {cloneElement, useRef} from 'react'
-import Box from '../Box'
-import Portal from '../Portal'
-import {BetterSystemStyleObject} from '../sx'
-import {useSyntheticChange} from '../drafts/hooks/useSyntheticChange'
-import {getAbsoluteCharacterCoordinates} from '../drafts/utils/character-coordinates'
+import Box from '../../Box'
+import Portal from '../../Portal'
+import {BetterSystemStyleObject} from '../../sx'
+import {useSyntheticChange} from '../hooks/useSyntheticChange'
+import {getAbsoluteCharacterCoordinates} from '../utils/character-coordinates'
 
 import {
   SelectSuggestionsEvent,
@@ -16,9 +16,9 @@ import {
 } from './types'
 import {augmentHandler, calculateSuggestionsQuery, getSuggestionValue, requireChildrenToBeInput} from './utils'
 
-import {useRefObjectAsForwardedRef} from '../hooks'
+import {useRefObjectAsForwardedRef} from '../../hooks'
 import AutocompleteSuggestions from './_AutocompleteSuggestions'
-import {useFormControlForwardedProps} from '../FormControl'
+import {useFormControlForwardedProps} from '../../FormControl'
 
 export type InlineAutocompleteProps = {
   /** Register the triggers that can cause suggestions to appear. */
@@ -101,6 +101,7 @@ const noop = () => {
 
 /**
  * Shows suggestions to complete the current word/phrase the user is actively typing.
+ * @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604)
  */
 const InlineAutocomplete = ({
   triggers,
diff --git a/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx b/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx
@@ -1,14 +1,14 @@
 import React, {useCallback, useRef, useState} from 'react'
-import Spinner from '../Spinner'
-import {ActionList, ActionListItemProps} from '../ActionList'
-import Box from '../Box'
-import {ComboboxCommitEvent, useCombobox} from '../drafts/hooks/useCombobox'
-import Overlay from '../Overlay'
+import Spinner from '../../Spinner'
+import {ActionList, ActionListItemProps} from '../../ActionList'
+import Box from '../../Box'
+import {ComboboxCommitEvent, useCombobox} from '../hooks/useCombobox'
+import Overlay from '../../Overlay'
 
 import {Suggestion, Suggestions, SuggestionsPlacement, TextInputElement} from './types'
 import {getSuggestionKey, getSuggestionValue} from './utils'
-import {CharacterCoordinates} from '../drafts/utils/character-coordinates'
-import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect'
+import {CharacterCoordinates} from '../utils/character-coordinates'
+import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect'
 
 type AutoCompleteSuggestionsProps = {
   suggestions: Suggestions | null
diff --git a/src/drafts/InlineAutocomplete/index.ts b/src/drafts/InlineAutocomplete/index.ts
diff --git a/src/drafts/InlineAutocomplete/types.ts b/src/drafts/InlineAutocomplete/types.ts
@@ -1,4 +1,4 @@
-import {ActionListItemProps} from '../ActionList'
+import {ActionListItemProps} from '../../ActionList'
 
 export type Trigger = {
   /** A single character that can cause the suggestion list to open. */
diff --git a/src/drafts/InlineAutocomplete/utils.ts b/src/drafts/InlineAutocomplete/utils.ts
diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.docs.json b/src/drafts/MarkdownEditor/MarkdownEditor.docs.json
@@ -1,7 +1,7 @@
 {
   "id": "drafts_markdown_editor",
   "name": "MarkdownEditor",
-  "status": "draft",
+  "status": "deprecated",
   "a11yReviewed": false,
   "stories": [],
   "props": [
diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.features.stories.tsx b/src/drafts/MarkdownEditor/MarkdownEditor.features.stories.tsx
@@ -5,7 +5,7 @@ import Box from '../../Box'
 import MarkdownEditor, {Emoji, Mentionable, Reference, SavedReply} from '.'
 
 const meta: Meta = {
-  title: 'Drafts/Components/MarkdownEditor/Features',
+  title: 'Deprecated/Components/MarkdownEditor/Features',
   parameters: {
     controls: {
       include: [
diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.stories.tsx b/src/drafts/MarkdownEditor/MarkdownEditor.stories.tsx
@@ -6,7 +6,7 @@ import MarkdownEditor, {Emoji, Mentionable, Reference, SavedReply} from '.'
 import ThemeProvider from '../../ThemeProvider'
 
 const meta: Meta = {
-  title: 'Drafts/Components/MarkdownEditor',
+  title: 'Deprecated/Components/MarkdownEditor',
   decorators: [
     Story => {
       return (
diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.tsx b/src/drafts/MarkdownEditor/MarkdownEditor.tsx
@@ -149,6 +149,7 @@ let editorsInPreviewMode: string[] = []
 
 /**
  * Markdown textarea with controls & keyboard shortcuts.
+ * @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604)
  */
 const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorProps>(
   (
diff --git a/src/drafts/MarkdownEditor/_MarkdownInput.tsx b/src/drafts/MarkdownEditor/_MarkdownInput.tsx
@@ -1,7 +1,7 @@
 import {subscribe as subscribeToMarkdownPasting} from '@github/paste-markdown'
 import React, {forwardRef, useEffect, useMemo, useRef, useState} from 'react'
 import {useDynamicTextareaHeight} from '../hooks/useDynamicTextareaHeight'
-import InlineAutocomplete, {ShowSuggestionsEvent, Suggestions} from '../../InlineAutocomplete'
+import InlineAutocomplete, {ShowSuggestionsEvent, Suggestions} from '../InlineAutocomplete'
 import Textarea, {TextareaProps} from '../../Textarea'
 import {Emoji, useEmojiSuggestions} from './suggestions/_useEmojiSuggestions'
 import {Mentionable, useMentionSuggestions} from './suggestions/_useMentionSuggestions'
diff --git a/src/drafts/MarkdownEditor/index.ts b/src/drafts/MarkdownEditor/index.ts
@@ -6,6 +6,7 @@ import {Label} from './Label'
 
 export type {MarkdownEditorHandle} from './MarkdownEditor'
 
+/** @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604) */
 const MarkdownEditor = Object.assign(_MarkdownEditor, {
   /** REQUIRED: An accessible label for the editor. */
   Label,
diff --git a/src/drafts/MarkdownEditor/suggestions/_useEmojiSuggestions.tsx b/src/drafts/MarkdownEditor/suggestions/_useEmojiSuggestions.tsx
@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react'
 import {suggestionsCalculator, UseSuggestionsHook} from '.'
 import {ActionList} from '../../../ActionList'
-import {Suggestion, Trigger} from '../../../InlineAutocomplete'
+import {Suggestion, Trigger} from '../../InlineAutocomplete'
 
 type BaseEmoji = {
   /** Name (shortcode) of the emoji. Do not include the wrapping `:` symbols. */
diff --git a/src/drafts/MarkdownEditor/suggestions/_useMentionSuggestions.tsx b/src/drafts/MarkdownEditor/suggestions/_useMentionSuggestions.tsx
@@ -2,7 +2,7 @@ import {score} from 'fzy.js'
 import React, {useMemo} from 'react'
 import {suggestionsCalculator, UseSuggestionsHook} from '.'
 import {ActionList} from '../../../ActionList'
-import {Suggestion, Trigger} from '../../../InlineAutocomplete'
+import {Suggestion, Trigger} from '../../InlineAutocomplete'
 import Text from '../../../Text'
 
 /** Could be a user, team, or organization - anything that can be mentioned. */
diff --git a/src/drafts/MarkdownEditor/suggestions/_useReferenceSuggestions.tsx b/src/drafts/MarkdownEditor/suggestions/_useReferenceSuggestions.tsx
@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react'
 import {suggestionsCalculator, UseSuggestionsHook} from '.'
 import {ActionList} from '../../../ActionList'
-import {Suggestion, Trigger} from '../../../InlineAutocomplete'
+import {Suggestion, Trigger} from '../../InlineAutocomplete'
 import Text from '../../../Text'
 import {score} from 'fzy.js'
 
diff --git a/src/drafts/MarkdownEditor/suggestions/index.ts b/src/drafts/MarkdownEditor/suggestions/index.ts
@@ -1,4 +1,4 @@
-import {Suggestion, Trigger} from '../../../InlineAutocomplete'
+import {Suggestion, Trigger} from '../../InlineAutocomplete'
 
 const MAX_SUGGESTIONS = 5
 
diff --git a/src/drafts/MarkdownViewer/MarkdownViewer.docs.json b/src/drafts/MarkdownViewer/MarkdownViewer.docs.json
@@ -1,7 +1,7 @@
 {
   "id": "drafts_markdown_viewer",
   "name": "MarkdownViewer",
-  "status": "draft",
+  "status": "deprecated",
   "a11yReviewed": false,
   "stories": [],
   "props": [
diff --git a/src/drafts/MarkdownViewer/MarkdownViewer.features.stories.tsx b/src/drafts/MarkdownViewer/MarkdownViewer.features.stories.tsx
@@ -8,7 +8,7 @@ import {useSafeAsyncCallback} from '../hooks/useSafeAsyncCallback'
 import MarkdownViewer from './MarkdownViewer'
 
 const meta: Meta = {
-  title: 'Drafts/Components/MarkdownViewer/Features',
+  title: 'Deprecated/Components/MarkdownViewer/Features',
   decorators: [
     Story => {
       return (
diff --git a/src/drafts/MarkdownViewer/MarkdownViewer.stories.tsx b/src/drafts/MarkdownViewer/MarkdownViewer.stories.tsx
@@ -8,7 +8,7 @@ import {useSafeAsyncCallback} from '../hooks/useSafeAsyncCallback'
 import MarkdownViewer from './MarkdownViewer'
 
 const meta: Meta = {
-  title: 'Drafts/Components/MarkdownViewer',
+  title: 'Deprecated/Components/MarkdownViewer',
   decorators: [
     Story => {
       return (
diff --git a/src/drafts/MarkdownViewer/MarkdownViewer.tsx b/src/drafts/MarkdownViewer/MarkdownViewer.tsx
@@ -55,6 +55,7 @@ type NoninteractiveMarkdownViewerProps = CoreMarkdownViewerProps & {
 
 export type MarkdownViewerProps = NoninteractiveMarkdownViewerProps | InteractiveMarkdownViewerProps
 
+/** @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604) */
 const MarkdownViewer = ({
   dangerousRenderedHTML,
   loading = false,
diff --git a/src/drafts/hooks/useCombobox.ts b/src/drafts/hooks/useCombobox.ts
@@ -55,6 +55,8 @@ type UseComboboxSettings<T> = {
  * `useCombobox` will set nearly all necessary attributes by effect, but you **must** set
  * `role="option"` on list items in order for them to be 'seen' by the combobox. Style the
  * currently highlighted option with the `[aria-selected="true"]` selector.
+ *
+ * @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604)
  */
 export const useCombobox = <T>({
   isOpen,
diff --git a/src/drafts/hooks/useDynamicTextareaHeight.ts b/src/drafts/hooks/useDynamicTextareaHeight.ts
@@ -23,6 +23,8 @@ type UseDynamicTextareaHeightSettings = {
  *
  * NOTE: for the most accurate results, be sure that the `lineHeight` of the element is
  * explicitly set in CSS.
+ *
+ * @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604)
  */
 export const useDynamicTextareaHeight = ({
   disabled,
diff --git a/src/drafts/hooks/useIgnoreKeyboardActionsWhileComposing.ts b/src/drafts/hooks/useIgnoreKeyboardActionsWhileComposing.ts
@@ -18,6 +18,8 @@ import {CompositionEventHandler, KeyboardEventHandler, useCallback, useMemo, use
  * composing.
  *
  * @returns props which should be spread onto an `<input>` element
+ *
+ * @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604)
  **/
 export const useIgnoreKeyboardActionsWhileComposing = (
   onKeyDown: KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLDivElement>,
diff --git a/src/drafts/hooks/useSafeAsyncCallback.ts b/src/drafts/hooks/useSafeAsyncCallback.ts
@@ -22,6 +22,8 @@ export type CallbackCancelledResult = typeof callbackCancelledResult
  * This should typically be `false` but may be desirable in cases where user's changes would
  * not get saved unless the call is made, so the call can be made in the background after
  * unmount. If this is `true`, it's very important not to set state in this callback!
+ *
+ * @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604)
  */
 export const useSafeAsyncCallback = <A extends unknown[], R>(
   fn: (...args: A) => R,
diff --git a/src/drafts/hooks/useSyntheticChange.ts b/src/drafts/hooks/useSyntheticChange.ts
@@ -87,6 +87,8 @@ export type SyntheticChangeEmitter = (
  * Will first attempt to use the non-standard browser `execCommmand` API to simulate a typing
  * action. Failing this (ie, in test environments or certain browsers), the fallback handler
  * will be called with a fake constructed `ChangeEvent` that looks like a real event.
+ *
+ * @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604)
  */
 export const useSyntheticChange = ({inputRef, fallbackEventHandler}: UseSyntheticChangeSettings) =>
   useCallback<SyntheticChangeEmitter>(
diff --git a/src/drafts/hooks/useUnifiedFileSelect.ts b/src/drafts/hooks/useUnifiedFileSelect.ts
diff --git a/src/drafts/index.ts b/src/drafts/index.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@primer/react": minor
 +---
++
 +Deprecate `MarkdownEditor`, `MarkdownViewer`, `InlineAutocomplete`, and related hooks
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"id": "drafts_inline_autocomplete",`
`3`	`3`	`"name": "InlineAutocomplete",`
`4`		`- "status": "draft",`
	`4`	`+ "status": "deprecated",`
`5`	`5`	`"a11yReviewed": false,`
`6`	`6`	`"stories": [],`
`7`	`7`	`"props": [`