Merge pull request #2204 from microsoftgraph/merge/main-to-next

gavinbarron · web-flow · commit 1ebb02f5f90c · 2023-04-24T06:02:12.000-07:00
chore: merge main to next
diff --git a/.github/workflows/pr-storybook.yml b/.github/workflows/pr-storybook.yml
@@ -27,7 +27,9 @@ jobs:
 
       - name: Install deps 🛠
         run: |
-          npm install -g yarn lerna
+          echo "installing yarn"
+          npm install -g yarn
+          echo "installing deps for packages"
           yarn
       - name: Extract tag name
         shell: bash
diff --git a/.github/workflows/push-release.yml b/.github/workflows/push-release.yml
@@ -58,7 +58,7 @@ jobs:
 
       - name: Install Dependencies
         run: |
-          npm install -g yarn lerna
+          npm install -g yarn lerna@6.4.1
           yarn
 
       - name: Update package version
diff --git a/.github/workflows/push.yml b/.github/workflows/push.yml
@@ -27,7 +27,7 @@ jobs:
 
       - name: Install Dependencies
         run: |
-          npm install -g yarn lerna
+          npm install -g yarn lerna@6.4.1
           yarn
 
       - name: Set Preview Version
diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
@@ -26,7 +26,7 @@ jobs:
 
       - name: Build 🛠
         run: |
-          npm install -g yarn lerna
+          npm install -g yarn lerna@6.4.1
           yarn
           yarn build
           yarn storybook:build
diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
@@ -80,14 +80,21 @@
     color: #0360B9 !important;
   }
 
-  .css-zj0253 * .token.attr-name {
+  /* fix attributes in html rendering */
+  .mtk4, .css-zj0253 * .token.attr-name {
     color: #e50000 !important;
   }
 
+  /* fix number colors in monaco editor */
+  .mtk7 {
+    color: #088155 !important;
+  }
+
   .css-3ltsna:focus-visible {
     outline: auto;
   }
 
+
   @media (max-width: 768px) {
     .story-mgt-root {
       flex-direction: column;
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -10,3 +10,8 @@
   };
   awa.init(config);
 </script>
+<style>
+  a {
+    text-decoration: underline !important;
+  }
+</style>
diff --git a/.storybook/rollup.config.js b/.storybook/rollup.config.js
@@ -27,7 +27,7 @@ const es6Bundle = {
   output: {
     dir: 'assets',
     entryFileNames: 'mgt.storybook.js',
-    format: 'esm',
+    format: 'esm'
   },
   plugins: [
     babel({
diff --git a/package.json b/package.json
@@ -125,8 +125,8 @@
     "jest-junit": "^15.0.0",
     "lerna": "^3.22.1",
     "lit": "^2.3.1",
-    "monaco-editor": "^0.19.3",
-    "monaco-editor-webpack-plugin": "^1.8.2",
+    "monaco-editor": "^0.30.0",
+    "monaco-editor-webpack-plugin": "^6.0.0",
     "node-sass": "npm:sass@^1.44.0",
     "npm-run-all": "^4.1.5",
     "prettier": "2.2.1",
diff --git a/packages/mgt-components/package.json b/packages/mgt-components/package.json
@@ -27,7 +27,7 @@
     "build": "npm-run-all clean build:compile",
     "build:compile": "npm-run-all sass compile",
     "build:watch": "npm-run-all -p sass:watch compile:watch",
-    "clean": "shx rm -rf ./dist && shx rm -rf ./tsconfig.tsbuildinfo",
+    "clean": "shx rm -rf ./dist && shx rm -rf ./tsconfig.tsbuildinfo && shx rm 'src/**/*-css.ts' || shx true",
     "compile": "tsc -b",
     "compile:watch": "tsc -w",
     "lint": "eslint -c ../../.eslintrc.js 'src/**/*.ts'",
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
@@ -10,6 +10,10 @@
 @import './mgt-people-picker.theme.scss';
 
 $person-wrapper-background-hover: #fafafa;
+$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 {
@@ -149,13 +153,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 {
@@ -314,8 +318,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;
   }
diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
@@ -91,6 +91,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('people-picker')
 // @customElement('mgt-people-picker')
@@ -364,6 +369,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     if (!value) value = [];
     if (!arraysAreEqual(this._selectedPeople, value)) {
       this._selectedPeople = value;
+      this.requestUpdate();
     }
   }
 
@@ -962,21 +968,25 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
         id="suggestions-list"
         aria-label="${this.strings.suggestedContacts}"
         class="people-list"
-        role="listbox">
-          ${repeat(
-            filteredPeople,
-            person => person.id,
-            person => html`
-              <li
-              id="${person.id}"
-              aria-label=" ${this.strings.suggestedContact} ${person.displayName}"
-              class="list-person"
-              role="option"
-              @click="${e => this.handleSuggestionClick(person)}">
-                ${this.renderPersonResult(person)}
-              </li>
-            `
-          )}
+        role="listbox"
+        aria-live="polite"
+      >
+         ${repeat(
+           filteredPeople,
+           person => person.id,
+           person => {
+             return html`
+               <li
+                id="${person.id}"
+                aria-label=" ${this.strings.suggestedContact} ${person.displayName}"
+                class="list-person"
+                role="option"
+                @click="${e => this.handleSuggestionClick(person)}">
+                 ${this.renderPersonResult(person)}
+               </li>
+             `;
+           }
+         )}
        </ul>
      `;
   }
diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.scss b/packages/mgt-components/src/components/mgt-person/mgt-person.scss
@@ -427,6 +427,7 @@ mgt-person .person-root {
       border: $avatar-border;
       border-radius: $avatar-border-radius;
       position: relative;
+      box-sizing: border-box;
 
       img {
         position: absolute;
diff --git a/stories/components/peoplePicker/peoplePicker.style.js b/stories/components/peoplePicker/peoplePicker.style.js
@@ -43,6 +43,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>
 `;
diff --git a/stories/components/person/person.js b/stories/components/person/person.js
@@ -10,7 +10,7 @@ import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeA
 import { defaultDocsPage } from '../../../.storybook/story-elements/defaultDocsPage';
 
 export default {
-  title: 'Components | mgt-person',
+  title: 'Components / mgt-person',
   component: 'person',
   decorators: [withCodeEditor],
   parameters: {
diff --git a/stories/components/person/person.properties.js b/stories/components/person/person.properties.js
@@ -322,13 +322,17 @@ export const moreExamples = () => html`
        --line2-text-transform: uppercase;
      }
 
-     .person-initials {
-       --initials-color: yellow;
-       --initials-background-color: red;
-       --avatar-size: 60px;
-       --avatar-border-radius: 10% 35%;
-     }
-   </style>
+    .person-initials {
+      --initials-color: yellow;
+      --initials-background-color: red;
+      --avatar-size: 60px;
+      --avatar-border-radius: 10% 35%;
+    }
+
+    .person-with-avatar-border {
+      --avatar-border: 2px solid black;
+    }
+  </style>
 
    <div class="example">
      <div>Default person</div>
@@ -371,10 +375,15 @@ export const moreExamples = () => html`
      <mgt-person person-query="me" view="twoLines"></mgt-person>
    </div>
 
-   <div class="example">
-     <div>Style initials (see css tab for style)</div>
-     <mgt-person class="person-initials" person-query="alex@fineartschool.net" view="oneline"></mgt-person>
-   </div>
+  <div class="example">
+    <div>Avatar with border (see css tab for style)</div>
+    <mgt-person class="person-with-avatar-border" person-query="me" avatar-size="large" view="oneline"></mgt-person>
+  </div>
+
+  <div class="example">
+    <div>Style initials (see css tab for style)</div>
+    <mgt-person class="person-initials" person-query="alex@fineartschool.net" view="oneline"></mgt-person>
+  </div>
 
    <div>
      <div>Additional Person properties</div>
diff --git a/stories/components/picker/picker.templating.js b/stories/components/picker/picker.templating.js
@@ -10,7 +10,7 @@ import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeA
 
 export default {
   title: 'Components / mgt-picker / Templating',
-  component: 'mgt-picker',
+  component: 'picker',
   decorators: [withCodeEditor]
 };
 
diff --git a/stories/components/tasks/tasks.stories.js b/stories/components/tasks/tasks.stories.js
@@ -7,6 +7,7 @@
 
 import { html } from 'lit';
 import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon';
+import { defaultDocsPage } from '../../../.storybook/story-elements/defaultDocsPage';
 
 export default {
   title: 'Components / mgt-tasks',
diff --git a/stories/components/todo/todo.stories.js b/stories/components/todo/todo.stories.js
@@ -7,6 +7,7 @@
 
 import { html } from 'lit';
 import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon';
+import { defaultDocsPage } from '../../../.storybook/story-elements/defaultDocsPage';
 
 export default {
   title: 'Components / mgt-todo',
diff --git a/yarn.lock b/yarn.lock
@@ -21912,17 +21912,17 @@ modify-values@^1.0.0:
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
   integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
 
-monaco-editor-webpack-plugin@^1.8.2:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-1.9.1.tgz#eb4bbb1c5e5bfb554541c1ae1542e74c2a9f43fd"
-  integrity sha512-x7fx1w3i/uwZERIgztHAAK3VQMsL8+ku0lFXXbO81hKDg8IieACqjGEa2mqEueg0c/fX+wd0oI+75wB19KJAsA==
+monaco-editor-webpack-plugin@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-6.0.0.tgz#628956ce1851afa2a5f6c88d0ecbb24e9a444898"
+  integrity sha512-vC886Mzpd2AkSM35XLkfQMjH+Ohz6RISVwhAejDUzZDheJAiz6G34lky1vyO8fZ702v7IrcKmsGwL1rRFnwvUA==
   dependencies:
-    loader-utils "^1.2.3"
+    loader-utils "^2.0.0"
 
-monaco-editor@^0.19.3:
-  version "0.19.3"
-  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.19.3.tgz#1c994b3186c00650dbcd034d5370d46bf56c0663"
-  integrity sha512-2n1vJBVQF2Hhi7+r1mMeYsmlf18hjVb6E0v5SoMZyb4aeOmYPKun+CE3gYpiNA1KEvtSdaDHFBqH9d7Wd9vREg==
+monaco-editor@^0.30.0:
+  version "0.30.1"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.30.1.tgz#47f8d18a0aa2264fc5654581741ab8d7bec01689"
+  integrity sha512-B/y4+b2O5G2gjuxIFtCE2EkM17R2NM7/3F8x0qcPsqy4V83bitJTIO4TIeZpYlzu/xy6INiY/+84BEm6+7Cmzg==
 
 move-concurrently@^1.0.1:
   version "1.0.1"
