fix: increase area for placeholder (#2921)

allows the input to expand to show a larger placeholder adds a story for the placeholder attribute
microsoftgraph · Dec 19, 2023 · 513031b · 513031b
1 parent 86697f4
commit 513031b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.scss b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.scss
@@ -41,7 +41,9 @@ $people-picker-selected-person-avatar-size: var(--people-picker-selected-person-
     }
 
     &::part(control) {
-      width: min-content;
+      width: auto;
+      flex-grow: 1;
+      min-width: 25%;
       height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
       word-spacing: inherit;
       text-indent: inherit;

diff --git a/stories/components/peoplePicker/peoplePicker.properties.stories.js b/stories/components/peoplePicker/peoplePicker.properties.stories.js
@@ -14,6 +14,10 @@ export default {
   decorators: [withCodeEditor]
 };
 
+export const setPlaceholder = () => html`
+<mgt-people-picker placeholder="Select people"></mgt-people-picker>
+`;
+
 export const showPresence = () => html`
 <mgt-people-picker show-presence></mgt-people-picker>
 `;