add disabled state, show first option text if react node

Shopify · Mar 16, 2024 · edb59cf · edb59cf
1 parent 7fd7213
commit edb59cf
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 22 deletions.
diff --git a/polaris-react/playground/Playground.tsx b/polaris-react/playground/Playground.tsx
@@ -55,7 +55,10 @@ export function Playground() {
                   placeholder: 'Search for a product',
                   autoComplete: 'off',
                 }}
-                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'}}

diff --git a/polaris-react/src/components/Picker/Picker.tsx b/polaris-react/src/components/Picker/Picker.tsx
@@ -25,20 +25,20 @@ import type {ListboxProps, OptionProps} from '../Listbox';
 import {Listbox} from '../Listbox';
 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;
+  /** 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 +49,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 +180,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 (

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} />