fix: fix person-card to use fluent-card (#2487)

updates person card to use a fluent card
revert agenda event card background color change closes #2512
fix playground background color and padding closes: #2505
set dev test page to use --fill-color for background
updates theming stories with correct background color token

---------

Co-authored-by: Gavin Barron <[email protected]>
Co-authored-by: Musale Martin <[email protected]>

Author: 3 people

.storybook/addons/codeEditorAddon/codeAddon.js

@@ -165,7 +165,7 @@ export const withCodeEditor = makeDecorator({
       ? ''
       : `
       body {
-        background-color: var(--neutral-fill-rest);
+        background-color: var(--fill-color);
         color: var(--neutral-foreground-rest);
         font-family: var(--body-font);
         padding: 0 12px;
@@ -232,9 +232,6 @@ export const withCodeEditor = makeDecorator({
                 ${providerInitCode}
               </script>
               <style>
-                html, body {
-                  height: 100%;
-                }
                 ${themeToggleCss}
                 ${css}
               </style>

.storybook/preview-body.html

@@ -6,6 +6,7 @@
     width: 100%;
     font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto,
       'Helvetica Neue', sans-serif;
+    padding: 0!important;
   }
 
   .docs-img-centered {
@@ -24,6 +25,7 @@
     width: 100%;
     position: relative;
     display: flex;
+    overflow: hidden;
   }
 
   .story-mgt-preview {
@@ -98,6 +100,7 @@
   @media (max-width: 768px) {
     .story-mgt-root {
       flex-direction: column;
+      overflow-y: auto;
     }
 
     .story-mgt-preview-wrapper {

index.html

@@ -21,7 +21,7 @@
         justify-content: flex-end;
       }
       body {
-        background-color: var(--neutral-fill-rest);
+        background-color: var(--fill-color);
         color: var(--neutral-foreground-rest);
         font-family: var(--body-font);
         padding: 24px 12px;
@@ -76,7 +76,7 @@ <h2>mgt-teams-channel-picker</h2>
       <!-- <h2>mgt-search-box</h2>
       <mgt-search-box search-term="contoso"></mgt-search-box>
       <h2>mgt-search-results</h2>
-      <mgt-search-results query-string="contoso"></mgt-search-results> -->
+      <mgt-search-results query-string="contoso"></mgt-search-results>
     </main>
   </body>
 </html>

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

@@ -15,4 +15,4 @@ $agenda-background-color: var(--agenda-background-color, transparent);
 $agenda-header-background-color: var(--agenda-header-background-color, var(--neutral-layer-floating));
 $agenda-header-border-color: var(--agenda-header-border-color, var(--neutral-foreground-rest));
 $agenda-event-border-color: var(--agenda-event-border-color, var(--neutral-layer-floating));
-$agenda-event-background-color: var(--agenda-event-background-color, transparent);
+$agenda-event-background-color: var(--agenda-event-background-color, var(--fill-color));

packages/mgt-components/src/components/mgt-person-card/mgt-person-card.scss

@@ -43,6 +43,7 @@ $person-card-base-icons-left-spacing: var(--person-card-base-icons-left-spacing,
   --file-list-background-color: transparent;
   --file-list-box-shadow: none;
   --file-item-background-color: transparent;
+  --card-height: auto;
 
   .small {
     max-height: 100vh;
@@ -445,7 +446,8 @@ $person-card-base-icons-left-spacing: var(--person-card-base-icons-left-spacing,
 
 :host fluent-button {
   &.section__show-more.lightweight::part(control),
-  &.close-button.lightweight::part(control) {
+  &.close-button.lightweight::part(control),
+  &.expanded-details-button::part(control) {
     background: $person-card-fluent-background-color;
   }
 

packages/mgt-components/src/components/mgt-person-card/mgt-person-card.theme.scss

@@ -19,7 +19,7 @@
 @import '../../components/mgt-messages/mgt-messages.theme';
 @import '../../components/mgt-file-list/mgt-file-list.theme';
 
-$person-card-background-color: var(--person-card-background-color, var(--neutral-layer-floating));
+$person-card-background-color: var(--person-card-background-color, transparent);
 $person-card-expanded-background-color-hover: var(
   --person-card-expanded-background-color-hover,
   var(--neutral-fill-hover)

packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts

@@ -41,11 +41,18 @@ import '../sub-components/mgt-spinner/mgt-spinner';
 
 export * from './mgt-person-card.types';
 
-import { fluentTabs, fluentTab, fluentTabPanel, fluentButton, fluentTextField } from '@fluentui/web-components';
+import {
+  fluentTabs,
+  fluentTab,
+  fluentTabPanel,
+  fluentButton,
+  fluentTextField,
+  fluentCard
+} from '@fluentui/web-components';
 import { registerFluentComponents } from '../../utils/FluentComponents';
 import { BasePersonCardSection, CardSection } from '../BasePersonCardSection';
 
-registerFluentComponents(fluentTabs, fluentTab, fluentTabPanel, fluentButton, fluentTextField);
+registerFluentComponents(fluentCard, fluentTabs, fluentTab, fluentTabPanel, fluentButton, fluentTextField);
 
 interface MgtPersonCardStateHistory {
   state: MgtPersonCardState;
@@ -557,15 +564,15 @@ export class MgtPersonCard extends MgtTemplatedComponent {
       ? html`<div @keydown=${this.handleEndOfCard} aria-label=${this.strings.endOfCard} tabindex="0" id="end-of-container"></div>`
       : html``;
     return html`
-      <div class="root" dir=${this.direction}>
+      <fluent-card class="root" dir=${this.direction}>
         <div class=${classMap({ small: this._smallView })}>
           ${navigationTemplate}
           ${closeCardTemplate}
           <div class="person-details-container">${personDetailsTemplate}</div>
           <div class="expanded-details-container">${expandedDetailsTemplate}</div>
           ${tabLocker}
         </div>
-      </div>
+      </fluent-card>
      `;
   }
 

stories/components/person/person.style.js

@@ -28,7 +28,7 @@ export const customCSSProperties = () => html`
 
       --person-line1-font-size: 20px;
       --person-line1-font-weight: 600;
-      --person-line1-text-color: #f9b1b1;
+      --person-line1-text-color: #ffd5d5;
       --person-line1-text-transform: capitalize;
       --person-line1-text-line-height: 22px;
 

stories/components/theme-toggle/themeToggle.js

@@ -32,7 +32,7 @@ export const userPreferenceDriven = () => html`
   </p>
   <style>
 body {
-    background-color: var(--neutral-fill-rest);
+    background-color: var(--fill-color);
     color: var(--neutral-foreground-rest);
     font-family: var(--body-font);
 }
@@ -43,7 +43,7 @@ export const darkModeOn = () => html`
   <mgt-theme-toggle mode="dark"></mgt-theme-toggle>
   <style>
 body {
-    background-color: var(--neutral-fill-rest);
+    background-color: var(--fill-color);
 }
   </style>
 `;
@@ -52,7 +52,7 @@ export const lightModeOn = () => html`
   <mgt-theme-toggle mode="light"></mgt-theme-toggle>
   <style>
 body {
-    background-color: var(--neutral-fill-rest);
+    background-color: var(--fill-color);
 }
   </style>
 `;
@@ -81,7 +81,7 @@ export const localization = () => html`
 <mgt-theme-toggle></mgt-theme-toggle>
   <style>
 body {
-    background-color: var(--neutral-fill-rest);
+    background-color: var(--fill-color);
 }
   </style>
   <script>

stories/samples/general.stories.b.js

@@ -43,7 +43,7 @@ if(body) applyTheme('dark', body);
 </script>
 <style>
 body {
-  background-color: var(--neutral-fill-rest);
+  background-color: var(--fill-color);
   color: var(--neutral-foreground-rest);
   font-family: var(--body-font);
 }