Merge pull request #2758 from microsoftgraph/merge/chat-from-main

chore: update chat from main

.github/workflows/pr-chat.yml

@@ -34,8 +34,7 @@ jobs:
         shell: bash
         run: |
           cp samples/react-contoso/.env.sample samples/react-contoso/.env
-          sed -i 's|REACT_APP_CLIENT_ID="00000000-0000-0000-0000-000000000000"|REACT_APP_CLIENT_ID="${{secrets.REACT_CONTOSO_CHAT}}"|g' samples/react-contoso/.env
-          sed -i 's|REACT_APP_BACKEND_CLIENT_ID="00000000-0000-0000-0000-000000000000"|REACT_APP_BACKEND_CLIENT_ID="${{secrets.REACT_CONTOSO_CHAT_BACKEND}}"|g' samples/react-contoso/.env
+          sed -i 's|REACT_APP_CLIENT_ID="ed072e38-e76e-45ae-ab76-073cb95495bb"|REACT_APP_CLIENT_ID="${{secrets.REACT_CONTOSO_CHAT}}"|g' samples/react-contoso/.env
           sed -i 's|REACT_APP_BASE_DIR="/"|REACT_APP_BASE_DIR="/next/mgt-chat"|g' samples/react-contoso/.env
 
       - name: Build 🛠

.github/workflows/pr-clean-storybook.yml → .github/workflows/pr-clean-deployments.yml

@@ -1,7 +1,7 @@
 # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
 # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
-name: Clean pr storybook
+name: Clean pr deployments
 
 on:
   pull_request:
@@ -30,5 +30,29 @@ jobs:
           git config user.name github-actions
           git config user.email github-actions@github.com
           git rm -r next/pr/${{ github.event.number }}
-          git commit -m "PR ${{ github.event.number }} closed"
+          git commit -m "PR ${{ github.event.number }} closed - remove storybook"
+          git push
+
+  react-contoso:
+    if: "contains(github.event.pull_request.labels.*.name, 'Build: React Contoso')"
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          ref: gh-pages
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+          registry-url: 'https://registry.npmjs.org'
+      - run: |
+          git config user.name github-actions
+          git config user.email github-actions@github.com
+          git rm -r next/sample/pr/${{ github.event.number }}
+          git commit -m "PR ${{ github.event.number }} closed - remove react-contoso"
           git push

.github/workflows/pr-storybook.yml

@@ -59,5 +59,5 @@ jobs:
       - name: Comment PR
         uses: thollander/actions-comment-pull-request@v1
         with:
-          message: 'The updated storybook is available [here](https://mgt.dev/next/pr/${{ github.event.number }})'
+          message: '📖 The updated storybook is available [here](https://mgt.dev/next/pr/${{ github.event.number }})'
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/pr-test-app.yml

@@ -0,0 +1,56 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Deploy react-contoso sample app for PR
+
+on:
+  pull_request:
+    types: [opened, labeled, synchronize, reopened]
+    branches: [main, release/**, next/**]
+
+jobs:
+  react-contoso:
+    if: "contains(github.event.pull_request.labels.*.name, 'Build: React Contoso')"
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install deps 🛠
+        run: |
+          echo "installing deps for packages"
+          yarn
+
+      - name: Setup env file
+        shell: bash
+        run: |
+          cp samples/react-contoso/.env.sample samples/react-contoso/.env
+          sed -i 's|REACT_APP_CLIENT_ID="ed072e38-e76e-45ae-ab76-073cb95495bb"|REACT_APP_CLIENT_ID="${{secrets.REACT_CONTOSO_CHAT}}"|g' samples/react-contoso/.env
+          sed -i 's|REACT_APP_BASE_DIR="/"|REACT_APP_BASE_DIR="/next/sample/pr/${{ github.event.number }}"|g' samples/react-contoso/.env
+
+      - name: Build 🛠
+        run: |
+          yarn build
+          yarn build:react-contoso
+
+      - name: Deploy mgt.dev/sample/pr/${{ github.event.number }} 🚀
+        uses: JamesIves/github-pages-deploy-action@v4.4.1
+        with:
+          branch: gh-pages
+          folder: samples/react-contoso/build
+          target-folder: next/sample/pr/${{ github.event.number }}
+
+      - name: Comment PR
+        uses: thollander/actions-comment-pull-request@v1
+        with:
+          message: '🚀 New react-contoso sample application deployed [here](https://mgt.dev/next/sample/pr/${{ github.event.number }})'
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/storybook.yml

@@ -41,6 +41,7 @@ jobs:
           folder: storybook-static
           target-folder: next
           clean-exclude: |
+            sample
             pr
             v3
             mgt-chat

packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss

@@ -39,7 +39,6 @@ $progress-ring-size: var(--progress-ring-size, 24px);
 
 :host .file-list-wrapper {
   background-color: $file-list-background-color;
-  box-shadow: $file-list-box-shadow;
   border: $file-list-border;
   position: relative;
   display: flex;
@@ -76,7 +75,7 @@ $progress-ring-size: var(--progress-ring-size, 24px);
         --file-padding: 10px 20px 10px 20px;
         --file-padding-inline-start: 24px;
         --file-border-radius: 2px;
-        --file-background-color: var(--file-item-background-color, var(--neutral-layer-floating));
+        --file-background-color: var(--file-item-background-color, var(--neutral-layer-1));
       }
     }
   }

packages/mgt-components/src/components/mgt-file-list/mgt-file-list.theme.scss

@@ -9,5 +9,8 @@
 @import '../../components/mgt-file/mgt-file.theme';
 
 $file-list-background-color: var(--file-list-background-color, var(--neutral-layer-floating));
-$show-more-button-background-color: var(--show-more-button-background-color, var(--neutral-layer-floating));
-$show-more-button-background-color--hover: var(--show-more-button-background-color-hover, var(-neutral-fill-hover));
+$show-more-button-background-color: var(--show-more-button-background-color, var(--neutral-stroke-divider-rest));
+$show-more-button-background-color--hover: var(
+  --show-more-button-background-color-hover,
+  var(--neutral-fill-input-alt-active)
+);

packages/mgt-components/src/components/mgt-file/mgt-file.scss

@@ -47,6 +47,8 @@ $line3-text-transform: var(--file-line3-text-transform, initial);
     background-color: $file-background-color-hover;
     border-radius: $file-border-radius;
     cursor: pointer;
+
+    --secondary-text-color: var(--secondary-text-hover-color);
   }
 
   &:focus,

packages/mgt-components/src/components/mgt-file/mgt-file.theme.scss

@@ -6,8 +6,8 @@
  */
 
 $line1-color: var(--file-line1-color, var(--neutral-foreground-rest));
-$line2-color: var(--file-line2-color, var(--neutral-foreground-hint));
-$line3-color: var(--file-line3-color, var(--neutral-foreground-hint));
+$line2-color: var(--file-line2-color, var(--secondary-text-color));
+$line3-color: var(--file-line3-color, var(--secondary-text-color));
 $file-background-color: var(--file-background-color);
 $file-background-color-focus: var(--file-background-color-focus, var(--neutral-fill-hover));
 $file-background-color-hover: var(--file-background-color-hover, var(--neutral-fill-hover));

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

@@ -7,25 +7,43 @@
 
 @import '../../styles/shared-sass-variables';
 
-$input-background: padding-box linear-gradient(
-  var(--people-picker-input-background, var(--neutral-fill-input-rest)),
-  var(--people-picker-input-background, var(--neutral-fill-input-rest))),
+$input-background: padding-box
+    linear-gradient(
+      var(--people-picker-input-background, var(--neutral-fill-input-rest)),
+      var(--people-picker-input-background, var(--neutral-fill-input-rest))
+    ),
   border-box var(--people-picker-input-border-color, var(--neutral-stroke-input-rest));
-$input-hover-background: padding-box linear-gradient(
-  var(--people-picker-input-hover-background, var(--neutral-fill-input-hover)),
-  var(--people-picker-input-hover-background, var(--neutral-fill-input-hover))),
+$input-hover-background: padding-box
+    linear-gradient(
+      var(--people-picker-input-hover-background, var(--neutral-fill-input-hover)),
+      var(--people-picker-input-hover-background, var(--neutral-fill-input-hover))
+    ),
   border-box var(--people-picker-input-hover-border-color, var(--neutral-stroke-input-hover));
-$input-focus-background: padding-box linear-gradient(
-  var(--people-picker-input-focus-background, var(--neutral-fill-input-focus)),
-  var(--people-picker-input-focus-background, var(--neutral-fill-input-focus))),
+$input-focus-background: padding-box
+    linear-gradient(
+      var(--people-picker-input-focus-background, var(--neutral-fill-input-focus)),
+      var(--people-picker-input-focus-background, var(--neutral-fill-input-focus))
+    ),
   border-box var(--people-picker-input-focus-border-color, var(--neutral-stroke-input-focus));
 $placeholder-text-color: var(--people-picker-input-placeholder-text-color, var(--input-placeholder-rest));
 $placeholder-hover-text-color: var(--people-picker-input-placeholder-hover-text-color, var(--input-placeholder-hover));
 $placeholder-focus-text-color: var(--people-picker-input-placeholder-focus-text-color, var(--input-placeholder-filled));
-$selected-option-bg: var(--people-picker-selected-option-background-color, var(--person-background-color, var(--neutral-layer-3)));
+$selected-option-bg: var(
+  --people-picker-selected-option-background-color,
+  var(--person-background-color, var(--neutral-layer-3))
+);
 $selected-option-highlight-bg: var(--people-picker-selected-option-highlight-background-color, var(--accent-fill-rest));
-$dropdown-card-color: var(--people-picker-dropdown-background-color, var(--neutral-fill-rest));
-$dropdown-result-bg-color: var(--people-picker-dropdown-result-background-color, var(--person-background-color, transparent));
-$dropdown-result-hover-bg-color: var(--people-picker-dropdown-result-hover-background-color, var(--person-background-color, var(--neutral-layer-2)));
-$dropdown-result-focus-bg-color: var(--people-picker-dropdown-result-focus-background-color, var(--person-background-color, var(--neutral-layer-2)));
+$dropdown-card-color: var(--people-picker-dropdown-background-color, var(--neutral-layer-card-container));
+$dropdown-result-bg-color: var(
+  --people-picker-dropdown-result-background-color,
+  var(--person-background-color, transparent)
+);
+$dropdown-result-hover-bg-color: var(
+  --people-picker-dropdown-result-hover-background-color,
+  var(--person-background-color, var(--neutral-fill-rest))
+);
+$dropdown-result-focus-bg-color: var(
+  --people-picker-dropdown-result-focus-background-color,
+  var(--person-background-color, var(--neutral-fill-rest))
+);
 $no-results-color: var(--people-picker-no-results-text-color, var(--neutral-foreground-hint));

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

@@ -12,9 +12,25 @@
 :host {
   --max-height: var(--picker-max-height, 380px);
 
+  font-family: $font-family;
+
   .picker {
     background-color: $picker-background-color;
   }
+
+  fluent-combobox {
+    &::part(selected-value) {
+      &::placeholder {
+        color: $picker-text-color;
+      }
+
+      &:hover {
+        &::placeholder {
+          color: $picker-text-hover-color;
+        }
+      }
+    }
+  }
 }
 
 [dir='rtl'] {

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

@@ -8,3 +8,5 @@
 @import '../../styles/shared-sass-variables';
 
 $picker-background-color: var(--picker-background-color, transparent);
+$picker-text-color: var(--picker-text-color, var(--input-filled-placeholder-rest));
+$picker-text-hover-color: var(--picker-text-color-hover, var(--secondary-text-hover-color));

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

@@ -10,11 +10,25 @@
 @import './mgt-taxonomy-picker.theme';
 
 :host {
-  --max-height: var(--taxonomy-picker-max-height, 380px);
+  --max-height: var(--taxonomy-picker-list-max-height, 380px);
 
   .picker {
     background-color: $taxonomy-picker-background-color;
   }
+
+  fluent-combobox {
+    &::part(selected-value) {
+      &::placeholder {
+        color: $taxonomy-picker-placeholder-color;
+      }
+
+      &:hover {
+        &::placeholder {
+          color: $taxonomy-picker-placeholder-hover-color;
+        }
+      }
+    }
+  }
 }
 
 [dir='rtl'] {

packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.theme.scss

@@ -8,3 +8,8 @@
 @import '../../styles/shared-sass-variables';
 
 $taxonomy-picker-background-color: var(--taxonomy-picker-background-color, transparent);
+$taxonomy-picker-placeholder-color: var(--taxonomy-picker-placeholder-color, var(--input-filled-placeholder-rest));
+$taxonomy-picker-placeholder-hover-color: var(
+  --taxonomy-picker-placeholder-color-hover,
+  var(--secondary-text-hover-color)
+);

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

@@ -33,6 +33,8 @@ registerFluentComponents(fluentCombobox, fluentOption);
  *
  * @cssprop --taxonomy-picker-background-color - {Color} Picker component background color
  * @cssprop --taxonomy-picker-list-max-height - {String} max height for options list. Default value is 380px.
+ * @cssprop --taxonomy-picker-placeholder-color - {Color} Text color for the placeholder in the picker
+ * @cssprop --taxonomy-picker-placeholder-hover-color - {Color} Text color for the placeholder in the picker on hover
  */
 @customElement('taxonomy-picker')
 export class MgtTaxonomyPicker extends MgtTemplatedComponent {

packages/mgt-react/src/MgtTemplateProps.ts

@@ -5,7 +5,9 @@
  * -------------------------------------------------------------------------------------------
  */
 
-export interface MgtTemplateProps {
+// Make type generic with a default of any to provide backwards compatibility and allow correct typing of the dataContext
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface MgtTemplateProps<T = any> {
   template?: string;
-  dataContext?: unknown;
+  dataContext?: T;
 }

samples/react-contoso/.env.sample

@@ -2,8 +2,5 @@ BROWSER="none"
 SKIP_PREFLIGHT_CHECK=true
 FAST_REFRESH=false
 REACT_APP_SITE_NAME="Contoso Dashboard"
-REACT_APP_CLIENT_ID="00000000-0000-0000-0000-000000000000"
-REACT_APP_URL_AZURE_FUNCTION="https://contoso.azurewebsites.net"
-REACT_APP_BACKEND_CLIENT_ID="00000000-0000-0000-0000-000000000000"
+REACT_APP_CLIENT_ID="ed072e38-e76e-45ae-ab76-073cb95495bb"
 REACT_APP_BASE_DIR="/"
-

samples/react-contoso/package.json

@@ -1,8 +1,8 @@
 {
   "name": "react-contoso",
   "version": "1.3.0",
-  "private": true,
   "homepage": ".",
+  "private": true,
   "dependencies": {
     "@fluentui/fluent2-theme": "^8.0.0",
     "@fluentui/merge-styles": "^8.0.3",

samples/react-contoso/src/index.tsx

@@ -3,7 +3,6 @@ import { App } from './App';
 import { mergeStyles } from '@fluentui/react';
 import { Msal2Provider } from '@microsoft/mgt-msal2-provider';
 import { Providers, LoginType } from '@microsoft/mgt-element';
-import { brokerSettings } from '@microsoft/mgt-chat';
 
 // Inject some global styles
 mergeStyles({
@@ -15,9 +14,6 @@ mergeStyles({
   }
 });
 
-brokerSettings.functionHost = process.env.REACT_APP_URL_AZURE_FUNCTION!;
-brokerSettings.appId = process.env.REACT_APP_BACKEND_CLIENT_ID!;
-
 Providers.globalProvider = new Msal2Provider({
   clientId: process.env.REACT_APP_CLIENT_ID!,
   loginType: LoginType.Redirect,

stories/components/person/person.templating.stories.js

@@ -57,7 +57,9 @@ export const retemplateMetadata = () => html`
     </template>
   </mgt-person>
 
-  <mgt-person view="fourLines">
+  <br/>
+
+  <mgt-person person-query="me" view="fourLines">
     <template data-type="line1">
       <div>
         Hello, my name is: {{person.displayName}}