Merge branch 'main' into kanupriya/peoplePicker_noMatchesError

Author: Mnickii

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 {
   /**

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;