diff --git a/polaris-react/playground/Playground.tsx b/polaris-react/playground/Playground.tsx index 4ab7562a096..2d8fe1e419e 100644 --- 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 index 3ab15b98c1d..29479ba29ea 100644 --- 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 { /** 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 { 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 index d94b7bdcdd3..062142d13c5 100644 --- 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 index 34a704be43b..285a3c7e2dc 100644 --- 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 ( - + - - {label} - - - {placeholder} - + {label && ( + + {label} + + )} + + {placeholder && ( + + {placeholder} + + )}