From 88f594d23db43c72b3ab6b6934d4c67469a1ea39 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Thu, 23 Nov 2023 11:40:16 +0100
Subject: [PATCH] SelectPanel2: Props for docs page (#3961)

* wip

* add SelectPanel.Loading

* run prettier

* refine types

* add loading to SearchInput
---
 docs/content/drafts/SelectPanel.mdx           |  36 +++++
 .../src/@primer/gatsby-theme-doctocat/nav.yml |   2 +
 src/drafts/SelectPanel2/SelectPanel.docs.json | 143 ++++++++++++++++++
 3 files changed, 181 insertions(+)
 create mode 100644 docs/content/drafts/SelectPanel.mdx
 create mode 100644 src/drafts/SelectPanel2/SelectPanel.docs.json

diff --git a/docs/content/drafts/SelectPanel.mdx b/docs/content/drafts/SelectPanel.mdx
new file mode 100644
index 00000000000..b619be2cd27
--- /dev/null
+++ b/docs/content/drafts/SelectPanel.mdx
@@ -0,0 +1,36 @@
+---
+componentId: selectpanel_v2
+title: SelectPanel v2
+status: Draft
+source: https://github.com/primer/react/blob/main/src/drafts/SelectPanel2
+storybook: '/react/storybook/?path=/story/drafts-components-selectpanel'
+---
+
+import data from '../../../src/drafts/SelectPanel2/SelectPanel.docs.json'
+
+A `SelectPanel` provides an anchor that will open an overlay with a list of selectable items, and a text input to filter the selectable items
+
+## Props
+
+<ComponentProps data={data} />
+
+## Status
+
+<ComponentChecklist
+  items={{
+    propsDocumented: true,
+    noUnnecessaryDeps: true,
+    adaptsToThemes: true,
+    adaptsToScreenSizes: false,
+    fullTestCoverage: false,
+    usedInProduction: false,
+    usageExamplesDocumented: false,
+    hasStorybookStories: false,
+    designReviewed: false,
+    a11yReviewed: false,
+    stableApi: false,
+    addressedApiFeedback: false,
+    hasDesignGuidelines: false,
+    hasFigmaComponent: false,
+  }}
+/>
diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
index 026db01338d..d3a8b72b027 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml
+++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -168,6 +168,8 @@
       url: /drafts/MarkdownViewer
     - title: PageHeader
       url: /drafts/PageHeader
+    - title: SelectPanel v2
+      url: /drafts/SelectPanel
     - title: Tooltip v2
       url: /drafts/Tooltip
 - title: Deprecated
diff --git a/src/drafts/SelectPanel2/SelectPanel.docs.json b/src/drafts/SelectPanel2/SelectPanel.docs.json
new file mode 100644
index 00000000000..662feb5a4f3
--- /dev/null
+++ b/src/drafts/SelectPanel2/SelectPanel.docs.json
@@ -0,0 +1,143 @@
+{
+  "id": "selectpanel_v2",
+  "name": "SelectPanel v2",
+  "status": "draft",
+  "a11yReviewed": false,
+  "stories": [],
+  "props": [
+    {
+      "name": "title",
+      "type": "string",
+      "required": true,
+      "description": "A descriptive title for the panel"
+    },
+    {
+      "name": "description",
+      "type": "string",
+      "description": "When provided, a description is displayed below the title"
+    },
+    {
+      "name": "selectionVariant",
+      "type": "'multiple' | 'single' | 'instant'",
+      "defaultValue": "multiple"
+    },
+    {
+      "name": "onSubmit",
+      "type": "(event: React.FormEvent) => void",
+      "description": "Function that will be called when the panel is closed"
+    },
+    {
+      "name": "onCancel",
+      "type": "() => void",
+      "description": "Function that will be called when the selection is submitted"
+    },
+    {
+      "name": "onClearSelection",
+      "type": "() => void",
+      "description": "Function that will be called when the clear selection is selection"
+    },
+    {
+      "name": "anchorRef",
+      "type": "React.RefObject<HTMLButtonElement>",
+      "description": "Useful for defining an external anchor"
+    },
+    {
+      "name": "open",
+      "type": "boolean",
+      "defaultValue": "false",
+      "description": "If defined, will control the open/closed state of the panel."
+    },
+    {
+      "name": "children",
+      "type": "React.ReactNode[]",
+      "description": "Recommended: `SelectPanel.Button`, `SelectPanel.Header`, `ActionList`, `SelectPanel.Loading`, `SelectPanel.Message`, `SelectPanel.Footer`"
+    }
+  ],
+  "subcomponents": [
+    {
+      "name": "SelectPanel.Button",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactElement",
+          "required": true,
+          "defaultValue": ""
+        }
+      ],
+      "passthrough": {
+        "element": "Button",
+        "url": "/react/Button"
+      }
+    },
+    {
+      "name": "SelectPanel.Header",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Rendered before the list. Recommended: `SelectPanel.SearchInput`"
+        }
+      ]
+    },
+    {
+      "name": "SelectPanel.SearchInput",
+      "props": [
+        {
+          "name": "onChange",
+          "type": "React.ChangeEventHandler<HTMLInputElement>",
+          "description": "Callback when input text changes, use this for search/filter"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "description": "Useful for subtle loading states while fetching items asynchronously"
+        }
+      ],
+      "passthrough": {
+        "element": "TextInput",
+        "url": "/react/TextInput"
+      }
+    },
+    {
+      "name": "SelectPanel.Footer",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Optional: `<SelectPanel.SecondaryButton>`"
+        }
+      ]
+    },
+    {
+      "name": "SelectPanel.Loading",
+      "props": [
+        {
+          "name": "children",
+          "type": "string"
+        }
+      ]
+    },
+    {
+      "name": "SelectPanel.Message",
+      "props": [
+        {
+          "name": "variant",
+          "type": "'warning' | 'error' | 'empty'"
+        },
+        {
+          "name": "size",
+          "type": "'inline' | 'full'"
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "description": "`inline` variant does not accept `title`"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode"
+        }
+      ]
+    }
+  ]
+}