diff --git a/change/@fluentui-react-tag-picker-014eed16-1877-4eba-9bff-52e4ccf27a00.json b/change/@fluentui-react-tag-picker-014eed16-1877-4eba-9bff-52e4ccf27a00.json new file mode 100644 index 00000000000000..3ab77b6bb62ebc --- /dev/null +++ b/change/@fluentui-react-tag-picker-014eed16-1877-4eba-9bff-52e4ccf27a00.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: adds text property to TagPickerOption", + "packageName": "@fluentui/react-tag-picker", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-tag-picker/etc/react-tag-picker.api.md b/packages/react-components/react-tag-picker/etc/react-tag-picker.api.md index 12464e7cd7c9a6..0ea0177e771e1b 100644 --- a/packages/react-components/react-tag-picker/etc/react-tag-picker.api.md +++ b/packages/react-components/react-tag-picker/etc/react-tag-picker.api.md @@ -197,9 +197,14 @@ export type TagPickerOptionGroupState = OptionGroupState; // @public export type TagPickerOptionProps = ComponentProps & { - children: React_2.ReactNode; value: string; -}; +} & ({ + text?: string; + children: string; +} | { + text: string; + children?: React_2.ReactNode; +}); // @public (undocumented) export type TagPickerOptionSlots = Pick & { diff --git a/packages/react-components/react-tag-picker/src/components/TagPickerOption/TagPickerOption.test.tsx b/packages/react-components/react-tag-picker/src/components/TagPickerOption/TagPickerOption.test.tsx index 0a87b95cd8ec95..cab6435c24e9b8 100644 --- a/packages/react-components/react-tag-picker/src/components/TagPickerOption/TagPickerOption.test.tsx +++ b/packages/react-components/react-tag-picker/src/components/TagPickerOption/TagPickerOption.test.tsx @@ -2,9 +2,10 @@ import * as React from 'react'; import { render } from '@testing-library/react'; import { isConformant } from '../../testing/isConformant'; import { TagPickerOption } from './TagPickerOption'; +import { TagPickerOptionProps } from './TagPickerOption.types'; describe('TagPickerOption', () => { - isConformant({ + isConformant({ Component: TagPickerOption, displayName: 'TagPickerOption', requiredProps: { value: 'value', media: <>, secondaryContent: <> }, diff --git a/packages/react-components/react-tag-picker/src/components/TagPickerOption/TagPickerOption.types.ts b/packages/react-components/react-tag-picker/src/components/TagPickerOption/TagPickerOption.types.ts index dc24b976150045..247b4a1bc713e8 100644 --- a/packages/react-components/react-tag-picker/src/components/TagPickerOption/TagPickerOption.types.ts +++ b/packages/react-components/react-tag-picker/src/components/TagPickerOption/TagPickerOption.types.ts @@ -11,9 +11,28 @@ export type TagPickerOptionSlots = Pick & { * TagPickerOption Props */ export type TagPickerOptionProps = ComponentProps & { - children: React.ReactNode; value: string; -}; +} & ( + | { + /** + * An optional override the string value of the Option's display text, + * defaulting to the Option's child content. + * This is used as the Dropdown button's or Combobox input's value when the option is selected, + * and as the comparison for type-to-find keyboard functionality. + */ + text?: string; + children: string; + } + | { + /** + * The string value of the Option's display text when the Option's children are not a string. + * This is used as the Dropdown button's or Combobox input's value when the option is selected, + * and as the comparison for type-to-find keyboard functionality. + */ + text: string; + children?: React.ReactNode; + } + ); /** * State used in rendering TagPickerOption diff --git a/packages/react-components/react-tag-picker/src/components/TagPickerOption/useTagPickerOption.ts b/packages/react-components/react-tag-picker/src/components/TagPickerOption/useTagPickerOption.ts index 5a3bba87c9d2a7..775bbe458bea9f 100644 --- a/packages/react-components/react-tag-picker/src/components/TagPickerOption/useTagPickerOption.ts +++ b/packages/react-components/react-tag-picker/src/components/TagPickerOption/useTagPickerOption.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { slot } from '@fluentui/react-utilities'; -import { OptionProps, useOption_unstable } from '@fluentui/react-combobox'; +import { useOption_unstable } from '@fluentui/react-combobox'; import type { TagPickerOptionProps, TagPickerOptionState } from './TagPickerOption.types'; /** @@ -16,7 +16,7 @@ export const useTagPickerOption_unstable = ( props: TagPickerOptionProps, ref: React.Ref, ): TagPickerOptionState => { - const optionState = useOption_unstable(props as OptionProps, ref); + const optionState = useOption_unstable(props, ref); const state: TagPickerOptionState = { components: { ...optionState.components, diff --git a/packages/react-components/react-tag-picker/stories/TagPicker/TagPickerTruncatedText.stories.tsx b/packages/react-components/react-tag-picker/stories/TagPicker/TagPickerTruncatedText.stories.tsx index 8fb7b1ef60d713..eb23867bf61613 100644 --- a/packages/react-components/react-tag-picker/stories/TagPicker/TagPickerTruncatedText.stories.tsx +++ b/packages/react-components/react-tag-picker/stories/TagPicker/TagPickerTruncatedText.stories.tsx @@ -90,6 +90,7 @@ export const TruncatedText = () => { value={option.value} key={option.value} title={option.value} + text={option.value} >
{option.value}