feat: adds max height and scrollbar to people picker (#3429)

Co-authored-by: Kanupriya Thakur <[email protected]>

Author: Kanupriya1511

packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.scss

@@ -131,6 +131,8 @@ $people-picker-font-size: var(--people-picker-font-size, 14px);
     list-style: none;
     padding: 4px;
     margin: auto;
+    max-height: var(--people-picker-dropdown-max-height, 300px);
+    overflow-y: var(--people-picker-dropdown-scrollbar, auto);
 
     &-result {
       padding: 4px;

packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts

@@ -101,6 +101,8 @@ export const registerMgtPeoplePickerComponent = () => {
  * @cssprop --people-picker-result-person-avatar-size - {Length} the avatar size of the person in the result. Default is 40px.
  * @cssprop --people-picker-selected-person-avatar-size - {Length} the avatar size of the selected person. Default is 24px.
  * @cssprop --people-picker-font-size - {Length} the font size of the text in the people picker input. Default is 14px.
+ * @cssprop --people-picker-dropdown-max-height - {Length} the maximum height of the dropdown. Default is 300px.
+ * @cssprop --people-picker-dropdown-scrollbar - {String} the scrollbar behavior for the dropdown. Default is auto.
  */
 export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
   /**

packages/mgt-element/src/utils/version.ts

@@ -8,4 +8,4 @@
 // THIS FILE IS AUTO GENERATED
 // ANY CHANGES WILL BE LOST DURING BUILD
 
-export const PACKAGE_VERSION = '4.4.0';
+export const PACKAGE_VERSION = '4.5.0';

stories/components/peoplePicker/peoplePicker.style.stories.js

@@ -24,6 +24,8 @@ export const customCSSProperties = () => html`
     --people-picker-dropdown-result-background-color: yellow;
     --people-picker-dropdown-result-hover-background-color: gold;
     --people-picker-dropdown-result-focus-background-color: green;
+    --people-picker-dropdown-max-height: 100px;
+    --people-picker-dropdown-scrollbar: auto;
     --people-picker-no-results-text-color: white;
     --people-picker-input-background: gray;
     --people-picker-input-border-color: yellow;