From bfb97dabf090d30894f00c3d808bfbc5e10b7d29 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyle.durand@shopify.com>
Date: Tue, 2 Apr 2024 13:28:55 -0400
Subject: [PATCH] clean up details page

---
 polaris-react/playground/DetailsPage.tsx | 56 +++++++++++-------------
 1 file changed, 26 insertions(+), 30 deletions(-)

diff --git a/polaris-react/playground/DetailsPage.tsx b/polaris-react/playground/DetailsPage.tsx
index 84fcf3af529..56d3b412fbf 100644
--- a/polaris-react/playground/DetailsPage.tsx
+++ b/polaris-react/playground/DetailsPage.tsx
@@ -56,19 +56,6 @@ export function DetailsPage() {
     nameFieldValue: 'Jaded Pixel',
   });
   const [query, setQuery] = useState('');
-  const [vendors, setVendors] = useState([
-    {value: 'The North Face', children: 'The North Face'},
-    {value: 'Patagonia', children: 'Patagonia'},
-    {value: 'Arc’teryx', children: 'Arc’teryx'},
-    {value: 'Marmot', children: 'Marmot'},
-    {value: 'Black Diamond', children: 'Black Diamond'},
-    {value: 'Mountain Hardwear', children: 'Mountain Hardwear'},
-    {value: 'Columbia', children: 'Columbia'},
-    {value: 'Canada Goose', children: 'Canada Goose'},
-    {value: 'Merrell', children: 'Merrell'},
-    {value: 'Salomon', children: 'Salomon'},
-    {value: 'Burton', children: 'Burton'},
-  ]);
   const skipToContentRef = useRef<HTMLAnchorElement>(null);
   const [toastActive, setToastActive] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -94,16 +81,6 @@ export function DetailsPage() {
   const [supportSubject, setSupportSubject] = useState('');
   const [supportMessage, setSupportMessage] = useState('');
 
-  const handleSelect = (selected: string) => {
-    setQuery('');
-    if (vendors.some((vendor) => vendor.children === selected)) return;
-
-    setVendors((vendors) => [
-      ...vendors,
-      {value: selected, children: selected},
-    ]);
-  };
-
   const handleDiscard = useCallback(() => {
     setEmailFieldValue(defaultState.current.emailFieldValue);
     setNameFieldValue(defaultState.current.nameFieldValue);
@@ -662,19 +639,27 @@ export function DetailsPage() {
               <br />
               <AlphaPicker
                 allowMultiple
-                onSelect={handleSelect}
                 activator={{
-                  label: 'Vendor',
+                  label: 'Tags',
                   placeholder: 'None selected',
                 }}
                 searchField={{
-                  label: 'Search vendors',
-                  placeholder: 'Search or add new vendor',
+                  label: 'Search tags',
+                  placeholder: 'Search or add new tags',
                   autoComplete: 'off',
                   value: query,
                   onChange: (value) => setQuery(value),
                 }}
-                options={vendors}
+                options={[
+                  {value: 'Outdoors', children: 'Outdoors'},
+                  {value: 'Adventure', children: 'Adventure'},
+                  {value: 'Hiking', children: 'Hiking'},
+                  {value: 'Camping', children: 'Camping'},
+                  {value: 'Backpacking', children: 'Backpacking'},
+                  {value: 'Mountaineering', children: 'Mountaineering'},
+                  {value: 'Skiing', children: 'Skiing'},
+                  {value: 'Snowboarding', children: 'Snowboarding'},
+                ]}
                 addAction={{
                   value: query,
                   children: `Add ${query}`,
@@ -682,7 +667,6 @@ export function DetailsPage() {
               />
               <br />
               <AlphaPicker
-                onSelect={handleSelect}
                 activator={{
                   label: 'Vendor',
                   placeholder: 'None selected',
@@ -694,7 +678,19 @@ export function DetailsPage() {
                   value: query,
                   onChange: (value) => setQuery(value),
                 }}
-                options={vendors}
+                options={[
+                  {value: 'The North Face', children: 'The North Face'},
+                  {value: 'Patagonia', children: 'Patagonia'},
+                  {value: 'Arc’teryx', children: 'Arc’teryx'},
+                  {value: 'Marmot', children: 'Marmot'},
+                  {value: 'Black Diamond', children: 'Black Diamond'},
+                  {value: 'Mountain Hardwear', children: 'Mountain Hardwear'},
+                  {value: 'Columbia', children: 'Columbia'},
+                  {value: 'Canada Goose', children: 'Canada Goose'},
+                  {value: 'Merrell', children: 'Merrell'},
+                  {value: 'Salomon', children: 'Salomon'},
+                  {value: 'Burton', children: 'Burton'},
+                ]}
                 addAction={{
                   value: query,
                   children: `Add ${query}`,