Adding an optional SelectionZone class name and also fixing remaining…

… bugs in UnifiedPicker (#15652)
microsoft · Oct 23, 2020 · 4da219b · 4da219b
1 parent a933f3f
commit 4da219b
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 7 deletions.
diff --git a/change/@fluentui-react-experiments-2020-10-22-13-57-57-u-nebhatna-remainingFluentBugs.json b/change/@fluentui-react-experiments-2020-10-22-13-57-57-u-nebhatna-remainingFluentBugs.json
@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "UnifiedPicker: Fixing fluent bugs",
+  "packageName": "@fluentui/react-experiments",
+  "email": "nebhatna@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-22T20:57:31.406Z"
+}
diff --git a/change/@fluentui-react-internal-2020-10-22-13-57-57-u-nebhatna-remainingFluentBugs.json b/change/@fluentui-react-internal-2020-10-22-13-57-57-u-nebhatna-remainingFluentBugs.json
@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "SelectionZone: Adding an optional className prop",
+  "packageName": "@fluentui/react-internal",
+  "email": "nebhatna@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-22T20:57:57.716Z"
+}
diff --git a/.../react-examples/src/react-experiments/UnifiedPeoplePicker/UnifiedPeoplePicker.Example.tsx b/.../react-examples/src/react-experiments/UnifiedPeoplePicker/UnifiedPeoplePicker.Example.tsx
@@ -51,6 +51,22 @@ const _suggestions = [
     isSelected: false,
     showRemoveButton: true,
   },
+  {
+    key: '6',
+    id: '6',
+    displayText: 'Suggestion 6',
+    item: people[5],
+    isSelected: false,
+    showRemoveButton: true,
+  },
+  {
+    key: '7',
+    id: '7',
+    displayText: 'Suggestion 7',
+    item: people[6],
+    isSelected: false,
+    showRemoveButton: true,
+  },
 ] as IFloatingSuggestionItem<IPersonaProps>[];
 
 export const UnifiedPeoplePickerExample = (): JSX.Element => {

diff --git a/...ts/FloatingSuggestionsComposite/FloatingSuggestionsList/FloatingSuggestionsList.styles.ts b/...ts/FloatingSuggestionsComposite/FloatingSuggestionsList/FloatingSuggestionsList.styles.ts
@@ -30,7 +30,7 @@ export const getStyles = (props: IFloatingSuggestionsListStyleProps): IFloatingS
       classNames.suggestionsContainer,
       {
         overflowX: 'auto',
-        overflowY: 'hidden',
+        overflowY: 'auto',
         maxHeight: '300px',
         borderBottom: `1px solid ${neutralLight}`,
       },

diff --git a/...ponents/UnifiedPicker/UnifiedPeoplePicker/__snapshots__/UnifiedPeoplePicker.test.tsx.snap b/...ponents/UnifiedPicker/UnifiedPeoplePicker/__snapshots__/UnifiedPeoplePicker.test.tsx.snap
@@ -18,7 +18,14 @@ exports[`UnifiedPeoplePicker renders correctly with no items 1`] = `
     onMouseDownCapture={[Function]}
   >
     <div
-      className="ms-SelectionZone"
+      className=
+          ms-SelectionZone
+          ms-UnifiedPicker-selectionZone
+          ms-UnifiedPicker-selectionZone
+          {
+            display: flex;
+            flex: 1 1 auto;
+          }
       onClick={[Function]}
       onContextMenu={[Function]}
       onDoubleClick={[Function]}
@@ -136,7 +143,14 @@ exports[`UnifiedPeoplePicker renders correctly with selected and suggested items
     onMouseDownCapture={[Function]}
   >
     <div
-      className="ms-SelectionZone"
+      className=
+          ms-SelectionZone
+          ms-UnifiedPicker-selectionZone
+          ms-UnifiedPicker-selectionZone
+          {
+            display: flex;
+            flex: 1 1 auto;
+          }
       onClick={[Function]}
       onContextMenu={[Function]}
       onDoubleClick={[Function]}

diff --git a/packages/react-experiments/src/components/UnifiedPicker/UnifiedPicker.styles.ts b/packages/react-experiments/src/components/UnifiedPicker/UnifiedPicker.styles.ts
@@ -6,12 +6,14 @@ export interface IUnifiedPickerStyles {
   pickerText: IStyle;
   pickerInput: IStyle;
   pickerDiv: IStyle;
+  selectionZone: IStyle;
 }
 
 const GlobalClassNames = {
   pickerText: 'ms-UnifiedPicker-text',
   pickerInput: 'ms-UnifiedPicker-input',
   pickerDiv: 'ms-UnifiedPicker-div',
+  selectionZone: 'ms-UnifiedPicker-selectionZone',
 };
 
 export const getStyles = (props: IUnifiedPickerStyleProps): IUnifiedPickerStyles => {
@@ -70,5 +72,12 @@ export const getStyles = (props: IUnifiedPickerStyleProps): IUnifiedPickerStyles
         flex: '1 1 auto',
       },
     ],
+    selectionZone: [
+      classNames.selectionZone,
+      {
+        display: 'flex',
+        flex: '1 1 auto',
+      },
+    ],
   };
 };
diff --git a/packages/react-experiments/src/components/UnifiedPicker/UnifiedPicker.tsx b/packages/react-experiments/src/components/UnifiedPicker/UnifiedPicker.tsx
@@ -406,7 +406,11 @@ export const UnifiedPicker = <T extends {}>(props: IUnifiedPickerProps<T>): JSX.
         {...focusZoneProps}
         /* TODO: create mouse drag selection capability */
       >
-        <SelectionZone selection={selection} selectionMode={SelectionMode.multiple}>
+        <SelectionZone
+          selection={selection}
+          selectionMode={SelectionMode.multiple}
+          className={css('ms-UnifiedPicker-selectionZone', classNames.selectionZone)}
+        >
           <div className={css('ms-BasePicker-text', classNames.pickerText)}>
             {headerComponent}
             {_renderSelectedItemsList()}

diff --git a/.../react-experiments/src/components/UnifiedPicker/__snapshots__/UnifiedPicker.test.tsx.snap b/.../react-experiments/src/components/UnifiedPicker/__snapshots__/UnifiedPicker.test.tsx.snap
@@ -18,7 +18,14 @@ exports[`UnifiedPicker renders correctly with no items 1`] = `
     onMouseDownCapture={[Function]}
   >
     <div
-      className="ms-SelectionZone"
+      className=
+          ms-SelectionZone
+          ms-UnifiedPicker-selectionZone
+          ms-UnifiedPicker-selectionZone
+          {
+            display: flex;
+            flex: 1 1 auto;
+          }
       onClick={[Function]}
       onContextMenu={[Function]}
       onDoubleClick={[Function]}
@@ -136,7 +143,14 @@ exports[`UnifiedPicker renders correctly with selected and suggested items 1`] =
     onMouseDownCapture={[Function]}
   >
     <div
-      className="ms-SelectionZone"
+      className=
+          ms-SelectionZone
+          ms-UnifiedPicker-selectionZone
+          ms-UnifiedPicker-selectionZone
+          {
+            display: flex;
+            flex: 1 1 auto;
+          }
       onClick={[Function]}
       onContextMenu={[Function]}
       onDoubleClick={[Function]}

diff --git a/packages/react-internal/etc/react-internal.api.md b/packages/react-internal/etc/react-internal.api.md
@@ -4360,6 +4360,7 @@ export interface ISelectionZone {
 
 // @public (undocumented)
 export interface ISelectionZoneProps extends React.ClassAttributes<SelectionZone> {
+    className?: string;
     componentRef?: () => void;
     disableAutoSelectOnInputElements?: boolean;
     enableTouchInvocationTarget?: boolean;

diff --git a/packages/react-internal/src/utilities/selection/SelectionZone.tsx b/packages/react-internal/src/utilities/selection/SelectionZone.tsx
@@ -106,6 +106,10 @@ export interface ISelectionZoneProps extends React.ClassAttributes<SelectionZone
    * item's contextual menu action occurs.
    */
   onItemContextMenu?: (item?: any, index?: number, ev?: Event) => void | boolean;
+  /**
+   * Additional CSS class(es) to apply to the SelectionZone.
+   */
+  className?: string;
 }
 
 /**
@@ -183,7 +187,7 @@ export class SelectionZone extends React.Component<ISelectionZoneProps, ISelecti
 
     return (
       <div
-        className={css('ms-SelectionZone', {
+        className={css('ms-SelectionZone', this.props.className, {
           'ms-SelectionZone--modal': !!isModal,
         })}
         ref={this._root}