changeset

Shopify · Mar 20, 2024 · 04b48e4 · 04b48e4
1 parent c02e145
commit 04b48e4
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 90 deletions.
diff --git a/.changeset/few-wolves-fail.md b/.changeset/few-wolves-fail.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added new AlphaPicker component
diff --git a/polaris-react/playground/DetailsPage.tsx b/polaris-react/playground/DetailsPage.tsx
@@ -55,6 +55,10 @@ export function DetailsPage() {
     emailFieldValue: '[email protected]',
     nameFieldValue: 'Jaded Pixel',
   });
+  const [query, setQuery] = useState('');
+  const [vendors, setVendors] = useState([
+    {value: 'Burberry', children: 'Burberry'},
+  ]);
   const skipToContentRef = useRef<HTMLAnchorElement>(null);
   const [toastActive, setToastActive] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -66,7 +70,7 @@ export function DetailsPage() {
   const [modalActive, setModalActive] = useState(false);
   const [navItemActive, setNavItemActive] = useState('products');
   const initialDescription =
-    'The M60-A represents the benchmark and equilibrium between function and design for us at Rama Works. The gently exaggerated design of the frame is not understated, but rather provocative. Inspiration and evolution from previous models are evident in the beautifully articulated design and the well defined aesthetic, the fingerprint of our ‘Industrial Modern’ designs.';
+    'The M60-A represents the benchmark and equilibrium between function and design for us at Rama Works. The gently exaggerated design of the frame is not understated, but rather provocative. Inspiration and evolution from previous models are evident in the beautifully articulated design and the well defined aesthetic, the fingerprint of our ‘Industrial Modern’ designs. The M60-A represents the benchmark and equilibrium between function and design for us at Rama Works. The gently exaggerated design of the frame is not understated, but rather provocative. Inspiration and evolution from previous models are evasdfasdfident in the beautifully articulated design and the well defined aesthetic, the fingerprint of our ‘Industrial Modern’ designs.';
   const [previewValue, setPreviewValue] = useState(initialDescription);
   const [nameFieldValue, setNameFieldValue] = useState(
     defaultState.current.nameFieldValue,
@@ -80,6 +84,16 @@ 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);
@@ -625,58 +639,6 @@ export function DetailsPage() {
               {fileUpload}
             </DropZone>
           </LegacyCard>
-          <LegacyCard sectioned>
-            <FormLayout>
-              <TextField
-                label="Title"
-                value={title}
-                onChange={(title) => {
-                  setTitle(title);
-                  setIsDirty(true);
-                }}
-                autoComplete="off"
-              />
-              <TextField
-                label="Description"
-                value={descriptionValue}
-                onChange={handleChange}
-                autoComplete="off"
-                multiline
-              />
-            </FormLayout>
-          </LegacyCard>
-          <LegacyCard title="Media" sectioned>
-            <DropZone onDrop={handleDropZoneDrop}>
-              {uploadedFiles}
-              {fileUpload}
-            </DropZone>
-          </LegacyCard>
-          <LegacyCard sectioned>
-            <FormLayout>
-              <TextField
-                label="Title"
-                value={title}
-                onChange={(title) => {
-                  setTitle(title);
-                  setIsDirty(true);
-                }}
-                autoComplete="off"
-              />
-              <TextField
-                label="Description"
-                value={descriptionValue}
-                onChange={handleChange}
-                autoComplete="off"
-                multiline
-              />
-            </FormLayout>
-          </LegacyCard>
-          <LegacyCard title="Media" sectioned>
-            <DropZone onDrop={handleDropZoneDrop}>
-              {uploadedFiles}
-              {fileUpload}
-            </DropZone>
-          </LegacyCard>
         </Layout.Section>
         <Layout.Section variant="oneThird">
           <LegacyCard title="Organization">
@@ -696,21 +658,23 @@ export function DetailsPage() {
               />
               <br />
               <AlphaPicker
+                onSelect={handleSelect}
+                activator={{
+                  label: 'Tags',
+                  placeholder: 'Search tags',
+                }}
                 searchField={{
                   label: 'Search vendors',
                   placeholder: 'Search vendors',
                   autoComplete: 'off',
+                  value: query,
+                  onChange: (value) => setQuery(value),
                 }}
-                activator={{
-                  label: 'Tags',
-                  placeholder: 'Search tags',
+                options={vendors}
+                addAction={{
+                  value: query,
+                  children: `Add ${query}`,
                 }}
-                options={[
-                  {
-                    value: 'Burberry',
-                    children: 'Burberry',
-                  },
-                ]}
               />
             </LegacyCard.Section>
             <LegacyCard.Section title="Collections" />

diff --git a/polaris-react/src/components/Picker/Picker.tsx b/polaris-react/src/components/Picker/Picker.tsx
@@ -2,13 +2,12 @@ import React, {
   useState,
   useCallback,
   useMemo,
-  useRef,
   isValidElement,
+  useEffect,
 } from 'react';
 import {SearchIcon} from '@shopify/polaris-icons';
 
 import {Popover} from '../Popover';
-import type {PopoverPublicAPI} from '../Popover';
 import {
   ComboboxTextFieldContext,
   ComboboxListboxContext,
@@ -75,9 +74,12 @@ export function Picker({
   const [textFieldLabelId, setTextFieldLabelId] = useState<string>();
   const [listboxId, setListboxId] = useState<string>();
   const [textFieldFocused, setTextFieldFocused] = useState<boolean>(false);
-  const popoverRef = useRef<PopoverPublicAPI | null>(null);
   const shouldOpen = !popoverActive;
 
+  useEffect(() => {
+    setFilteredOptions(options);
+  }, [options]);
+
   const handleClose = useCallback(() => {
     setPopoverActive(false);
     onClose?.();
@@ -87,19 +89,6 @@ export function Picker({
     setPopoverActive(true);
   }, []);
 
-  const handleSelect = useCallback((selected: string) => {
-    setActiveItem(selected);
-  }, []);
-
-  const onOptionSelected = useCallback(() => {
-    if (!allowMultiple) {
-      handleClose();
-      return;
-    }
-
-    popoverRef.current?.forceUpdatePosition();
-  }, [allowMultiple, handleClose]);
-
   const handleFocus = useCallback(() => {
     if (shouldOpen) {
       handleOpen();
@@ -154,7 +143,6 @@ export function Picker({
       textFieldLabelId,
       textFieldFocused,
       willLoadMoreOptions,
-      onOptionSelected,
       setActiveOptionId,
       setListboxId,
       onKeyToBottom: onScrolledToBottom,
@@ -164,7 +152,6 @@ export function Picker({
       textFieldLabelId,
       textFieldFocused,
       willLoadMoreOptions,
-      onOptionSelected,
       setActiveOptionId,
       setListboxId,
       onScrolledToBottom,
@@ -191,6 +178,7 @@ export function Picker({
   const firstSelectedOption = reactChildrenText(
     options.find((option) => option.value === activeItem)?.children,
   );
+
   const firstSelectedLabel = firstSelectedOption
     ? firstSelectedOption?.toString()
     : activator.placeholder;
@@ -201,7 +189,6 @@ export function Picker({
 
   return (
     <Popover
-      ref={popoverRef}
       active={popoverActive}
       activator={
         <Activator
@@ -236,7 +223,6 @@ export function Picker({
                 }}
                 prefix={<Icon source={SearchIcon} />}
                 labelHidden
-                focused
                 autoFocus
               />
             </ComboboxTextFieldContext.Provider>
@@ -251,9 +237,14 @@ export function Picker({
               <Listbox
                 {...listboxProps}
                 onSelect={(selected: string) => {
-                  onOptionSelected();
-                  handleSelect(selected);
+                  setQuery('');
+                  updateText('');
+                  setActiveItem(selected);
                   listboxProps.onSelect?.(selected);
+
+                  if (!allowMultiple) {
+                    handleClose();
+                  }
                 }}
               >
                 {filteredOptions?.map((option) => (

diff --git a/polaris-react/src/components/Popover/Popover.module.css b/polaris-react/src/components/Popover/Popover.module.css
@@ -24,10 +24,6 @@
   transition: opacity var(--p-motion-duration-100) var(--p-motion-ease);
 }
 
-.PopoverOverlay-noAnimation {
-  transition: none;
-}
-
 .PopoverOverlay-entering {
   opacity: 1;
   transform: translateY(0);

diff --git a/polaris-react/src/components/Popover/Popover.stories.tsx b/polaris-react/src/components/Popover/Popover.stories.tsx
@@ -112,13 +112,11 @@ export function WithActionList() {
     <div style={{height: '250px'}}>
       <BlockStack gap="400">
         <Popover
-          preferredPosition="cover"
           active={activePopover === 'popover1'}
           activator={activator}
           autofocusTarget="first-node"
           onClose={() => togglePopoverActive('popover1', true)}
         >
-          whee
           <ActionList
             actionRole="menuitem"
             items={[{content: 'Import file'}, {content: 'Export file'}]}