Fluentui: Picker personaWrapper style is not applied when setting

[apollon7]

Environment Information

• Package version(s): Office UI Fabric React 7.61.0
• Browser and OS versions: Chrome Version 78.0.3904.97 (Official Build) (64-bit) + Windows 10

Please provide a reproduction of the bug in a codepen:

Actual behavior:

When setting _IPeoplePickerItemSuggestionStyles_ for a _NormalPeoplePicker_ everything in _personaWrapper_ is ignored, while the style in _root_ is applied.

Here is a codepen showing the problem: https://codepen.io/apollon7/pen/wvvQGNR

How to reproduce:

1. Export sample from https://developer.microsoft.com/en-us/fabric#/controls/web/peoplepicker with the button "Export to CodePen"
2. Replace value of _const suggestionProps_ with the following:

const suggestionProps: IPeoplePickerItemSuggestionProps = {
    styles: {
        personaWrapper: {
            width: "100%",
            backgroundColor: "green",
            borderStyle: "solid"
        },
        root: {
            borderStyle: "solid"
        }
    },
    suggestionsProps: {
        suggestionsHeaderText: 'Suggested People',
        mostRecentlyUsedHeaderText: 'Suggested Contacts',
        noResultsFoundText: 'No results found',
        loadingText: 'Loading',
        showRemoveButtons: false,
        suggestionsAvailableAlertText: 'People Picker Suggestions available',
        suggestionsContainerAriaLabel: 'Suggested contacts'
    }
};

Expected behavior:

Style from personaWrapper should be applied.

What I want to do is set the width for personaWrapper to 100% to remove the space on the right side reserved for the Remove-Button which I'm not using (showRemoveButtons: false). Currently longer names are truncated with ... even though there is enough space left.

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: (Blocking, High, Normal, Low)

Products/sites affected: (if applicable)

[micahgodbolt]

The styles prop was never properly exposed in the typings, while it was properly spread into the component.

[micahgodbolt]

@apollon7 this PR is going to be tricky to get right, but its only a matter of fixing typings, not any functionality.

The styles interface you'll want to use is this one:

https://github.com/OfficeDev/office-ui-fabric-react/blob/a6e2ea7d73d0e9af2021bb90f983180c55495096/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.types.ts#L242-L266

Also, you have your suggestionsProps nested in suggestionsProps. Styles should be a sibling of suggestionsHeaderText etc

[apollon7]

Thanks a lot for your quick response.

If I understand you correctly I can't use the interface _IBasePickerSuggestionsProps_ as documented but have to use _ISuggestionsProps_ (which contains _styles_ property of type _ISuggestionsStyles_) instead for the _pickerSuggestionsProps_ of the _NormalPeoplePicker_?

If so, what to do with all the required properties there like onRenderSuggestion, onSuggestionClick and suggestions which I don't want to override?

Also, how to access _personaWrapper_ in _ISuggestionsStyles_ as there is no property for it?

[bdeterling]

In case anyone else runs across this issue, I was able to handle it by overriding onRenderSuggestionsItem and returning the same thing that the default implementation does, but with the extra style to increase the width:

  const onRenderSuggestionsItem = (personaProps, suggestionsProps) => (
     <PeoplePickerItemSuggestion 
        personaProps={personaProps} 
        suggestionsProps={suggestionsProps} 
        styles={ { personaWrapper: { width: '100%' } } 
     }/>
  );

  <NormalPeoplePicker
      onRenderSuggestionsItem={onRenderSuggestionsItem}
      pickerCalloutProps={{ calloutWidth: 300 } }
       ...

In my case, which I think I similar to @apollon7, I wanted to increase the size of the suggestion callout, but when I did that via pickerCalloutProps, it was truncating the text. I tried doing it through pickerSuggestionsProps, but could not get it to pick up the personaWrapper style. It may be possible, but the picker props and styles hierarchy was just too much for me to grasp.