clean up details page

Shopify · Apr 2, 2024 · bfb97da · bfb97da
1 parent 9f94aac
commit bfb97da
Showing 1 changed file with 26 additions and 30 deletions.
diff --git 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,27 +639,34 @@ 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}`,
                 }}
               />
               <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}`,