add disabled state, show first option text if react node

Shopify · Mar 19, 2024 · 31fc7ff · 31fc7ff
1 parent 7fd7213
commit 31fc7ff
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 34 deletions.
diff --git a/polaris-react/playground/Playground.tsx b/polaris-react/playground/Playground.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
+import {PlusCircleIcon} from '@shopify/polaris-icons';
 
 import {BlockStack, Card, Layout, Page, Picker, Text} from '../src';
 
 export function Playground() {
+  const [selected, setSelected] = React.useState('');
   const options = [
     {
       value: '012345678',
@@ -54,12 +56,23 @@ export function Playground() {
                   label: 'Search for a product',
                   placeholder: 'Search for a product',
                   autoComplete: 'off',
+                  onChange: (value) => console.log(value),
+                }}
+                activator={{
+                  label: 'Product',
+                  placeholder: 'Select a product',
                 }}
-                activator={{label: 'Product', placeholder: 'Select a product'}}
                 options={options}
-                onSelect={(selected) => console.log(selected)}
-                addAction={{value: 'add', children: 'Add product'}}
+                onSelect={setSelected}
+                addAction={{
+                  value: 'addy',
+                  children: 'Add product',
+                  icon: PlusCircleIcon,
+                }}
               />
+              <ul>
+                <li>Selected: {selected}</li>
+              </ul>
             </BlockStack>
           </Card>
         </Layout.Section>

diff --git a/polaris-react/src/components/Picker/Picker.tsx b/polaris-react/src/components/Picker/Picker.tsx
@@ -23,22 +23,23 @@ import {Box} from '../Box';
 import type {TextFieldProps} from '../TextField';
 import type {ListboxProps, OptionProps} from '../Listbox';
 import {Listbox} from '../Listbox';
+import type {IconProps} from '../Icon';
 import {Icon} from '../Icon';
 
-import {TextField, Activator} from './components';
+import {Activator, TextField} from './components';
 import type {ActivatorProps} from './components';
 
 export interface PickerProps extends Omit<ListboxProps, 'children'> {
   /** Configure the button that activates the Picker */
   activator: ActivatorProps;
-  /** Textfield that allows filtering of options */
-  searchField?: TextFieldProps;
   /** Allows more than one option to be selected */
   allowMultiple?: boolean;
   /** The options to be listed within the picker */
   options?: OptionProps[];
   /** Used to add a new picker option that isn't listed */
-  addAction?: OptionProps;
+  addAction?: OptionProps & {icon?: IconProps['source']};
+  /** Textfield that allows filtering of options */
+  searchField?: TextFieldProps;
   /** Whether or not more options are available to lazy load when the bottom of the listbox reached. Use the hasMoreResults boolean provided by the GraphQL API of the paginated data. */
   willLoadMoreOptions?: boolean;
   /** Height to set on the Popover Pane. */
@@ -49,10 +50,8 @@ export interface PickerProps extends Omit<ListboxProps, 'children'> {
   onClose?(): void;
 }
 
-const filterRegex = (value: string) => new RegExp(value, 'i');
-
-// regex match string exact upper or lower case
-const filterRegexExact = (value: string) => new RegExp(`^${value}$`, 'i');
+const FILTER_REGEX = (value: string) => new RegExp(value, 'i');
+const QUERY_REGEX = (value: string) => new RegExp(`^${value}$`, 'i');
 
 export function Picker({
   activator,
@@ -182,22 +181,22 @@ export function Picker({
       }
 
       const resultOptions = options?.filter((option) =>
-        filterRegex(value).exec(reactChildrenText(option.children)),
+        FILTER_REGEX(value).exec(reactChildrenText(option.children)),
       );
       setFilteredOptions(resultOptions ?? []);
     },
     [options],
   );
 
-  const firstSelectedOption = options.find(
-    (option) => option.value === active,
-  )?.children;
+  const firstSelectedOption = reactChildrenText(
+    options.find((option) => option.value === active)?.children,
+  );
   const firstSelectedLabel = firstSelectedOption
     ? firstSelectedOption?.toString()
     : activator.placeholder;
 
   const queryMatchesExistingOption = options.some((option) =>
-    filterRegexExact(query).exec(reactChildrenText(option.children)),
+    QUERY_REGEX(query).exec(reactChildrenText(option.children)),
   );
 
   return (
@@ -229,11 +228,12 @@ export function Picker({
           >
             <ComboboxTextFieldContext.Provider value={textFieldContextValue}>
               <TextField
-                autoComplete="off"
-                label={searchField.label}
+                {...searchField}
                 value={query}
-                placeholder={searchField.placeholder}
-                onChange={updateText}
+                onChange={(value) => {
+                  updateText(value);
+                  searchField.onChange?.(value, searchField.id ?? '');
+                }}
                 prefix={<Icon source={SearchIcon} />}
                 labelHidden
               />
@@ -262,7 +262,7 @@ export function Picker({
                   />
                 ))}
                 {addAction && query !== '' && !queryMatchesExistingOption ? (
-                  <Listbox.Action {...addAction} />
+                  <Listbox.Action {...addAction} value={query} />
                 ) : null}
               </Listbox>
             </Box>

diff --git a/polaris-react/src/components/Picker/components/Activator/Activator.module.css b/polaris-react/src/components/Picker/components/Activator/Activator.module.css
@@ -23,3 +23,9 @@
     outline-offset: var(--p-space-025);
   }
 }
+
+.disabled {
+  pointer-events: none;
+  background-color: var(--p-color-bg-surface-disabled);
+  border-color: var(--p-color-border-disabled);
+}
diff --git a/polaris-react/src/components/Picker/components/Activator/Activator.tsx b/polaris-react/src/components/Picker/components/Activator/Activator.tsx
@@ -5,25 +5,40 @@ import {BlockStack} from '../../../BlockStack';
 import {Icon} from '../../../Icon';
 import {Text} from '../../../Text';
 import {UnstyledButton} from '../../../UnstyledButton';
+import {classNames} from '../../../../utilities/css';
 
 import styles from './Activator.module.css';
 
 export interface ActivatorProps {
-  label: string;
+  label?: string;
   placeholder?: string;
+  disabled?: boolean;
   onClick?(): void;
 }
 
-export function Activator({placeholder, onClick, label}: ActivatorProps) {
+export function Activator({
+  disabled,
+  label,
+  placeholder,
+  onClick,
+}: ActivatorProps) {
   return (
-    <UnstyledButton className={styles.Activator} onClick={onClick}>
+    <UnstyledButton
+      className={classNames(styles.Activator, disabled && styles.disabled)}
+      onClick={onClick}
+    >
       <BlockStack as="span" gap="100">
-        <Text as="span" variant="bodySm" alignment="start" tone="subdued">
-          {label}
-        </Text>
-        <Text as="span" variant="bodyMd" alignment="start">
-          {placeholder}
-        </Text>
+        {label && (
+          <Text as="span" variant="bodySm" alignment="start" tone="subdued">
+            {label}
+          </Text>
+        )}
+
+        {placeholder && (
+          <Text as="span" variant="bodyMd" alignment="start">
+            {placeholder}
+          </Text>
+        )}
       </BlockStack>
       <span>
         <Icon tone="subdued" source={SelectIcon} />

diff --git a/polaris-react/src/components/PositionedOverlay/utilities/math.ts b/polaris-react/src/components/PositionedOverlay/utilities/math.ts
@@ -20,7 +20,6 @@ export function calculateVerticalPosition(
   fixed: boolean | undefined,
   topBarOffset = 0,
 ) {
-  const log = console.log;
   const activatorTop = activatorRect.top;
   const activatorBottom = activatorTop + activatorRect.height;
   const spaceAbove = activatorRect.top - topBarOffset;
@@ -102,7 +101,6 @@ export function calculateVerticalPosition(
   }
 
   if (preferredPosition === 'cover') {
-    log('is covered');
     return (enoughSpaceFromBottomScroll ||
       (distanceToBottomScroll >= distanceToTopScroll &&
         !enoughSpaceFromTopScroll)) &&
@@ -111,11 +109,11 @@ export function calculateVerticalPosition(
       ? positionIfCoverBelow
       : positionIfCoverAbove;
   }
-  log('is not covered');
+
   if (enoughSpaceFromTopScroll && enoughSpaceFromBottomScroll) {
     return spaceAbove > spaceBelow ? positionIfAbove : positionIfBelow;
   }
-  log('is super not covered');
+
   return distanceToTopScroll > minimumSpaceToScroll
     ? positionIfAbove
     : positionIfBelow;