feat: add custom CSS properties for the people picker flyout text (#2162)

* Add new tokens for flyout text custom styling

* Document new css props

* Add new props to the people custom styling story

* Refactor the tokens to variables

---------

Co-authored-by: Nickii Miaro <[email protected]>

Author: musale

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

@@ -9,6 +9,11 @@
 @import '../../styles/shared-styles.scss';
 @import './mgt-people-picker.theme.scss';
 
+$flyout-line1-text-font-size: var(--people-picker-flyout-line1-text-font-size, 14px);
+$flyout-line1-text-font-weight: var(--people-picker-flyout-line1-text-font-weight, normal);
+$flyout-line2-text-font-size: var(--people-picker-flyout-line2-text-font-size, 12px);
+$flyout-line2-text-font-weight: var(--people-picker-flyout-line1-text-font-weight, normal);
+
 // Main
 :host {
   font-family: $font-family;
@@ -130,13 +135,13 @@ mgt-people-picker .root {
           .people-person-text-area {
             margin-left: 13px;
             flex: 1 1 0;
-            max-height: 40px;
+            min-height: 40px;
             overflow: hidden;
             color: $dropdown-item__text__color;
 
             .people-person-text {
-              font-size: 14px;
-              font-weight: normal;
+              font-size: $flyout-line1-text-font-size;
+              font-weight: $flyout-line1-text-font-weight;
               margin: 0;
               padding: 0;
               &.highlight-search-text {
@@ -288,8 +293,8 @@ mgt-people-picker .message-parent {
 mgt-people-picker .people-person-job-title {
   flex: 100%;
   order: 3;
-  font-weight: normal;
-  font-size: 12px;
+  font-size: $flyout-line2-text-font-size;
+  font-weight: $flyout-line2-text-font-weight;
   &.uppercase {
     text-transform: uppercase;
   }

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

@@ -81,6 +81,11 @@ interface IFocusable {
  * @cssprop --placeholder-color--focus - {Color} Color of placeholder text during focus state
  * @cssprop --placeholder-color - {Color} Color of placeholder text
  *
+ * @cssprop --people-picker-flyout-line1-text-font-size - {String} the font size of the line 1 text on the flyout results. Default is 14px.
+ * @cssprop --people-picker-flyout-line1-text-font-weight - {String} the font weight of the line 1 text on the flyout results. Default is normal.
+ * @cssprop --people-picker-flyout-line2-text-font-size - {String} the font size of the line 2 text on the flyout results. Default is 12px.
+ * @cssprop --people-picker-flyout-line2-text-font-weight - {String} the font weight of the line 2 text on the flyout results. Default is normal.
+ *
  */
 @customElement('mgt-people-picker')
 export class MgtPeoplePicker extends MgtTemplatedComponent {

stories/components/peoplePicker/peoplePicker.style.js

@@ -47,6 +47,11 @@ export const customCssProperties = () => html`
     --color-sub1: white;
     --placeholder-color: whitesmoke; /* placeholder text color */
     --placeholder-color--focus: black ; /* placeholder text focus color */
+
+    --people-picker-flyout-line1-text-font-size: 28px;
+    --people-picker-flyout-line1-text-font-weight: 500;
+    --people-picker-flyout-line2-text-font-size: 24px;
+    --people-picker-flyout-line2-text-font-weight: 600;
   }
 </style>
 `;