fix: add detail-line part attribute to person component (#2999)

microsoftgraph · Feb 2, 2024 · b254e49 · b254e49
1 parent f432d85
commit b254e49
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 12 deletions.
diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.tests.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.tests.ts
@@ -20,8 +20,8 @@ describe('mgt-person - tests', () => {
           <img alt="Photo for Megan Bowen" src="">
         </div>
         <div class=" details-wrapper ">
-              <div class="line1" role="presentation" aria-label="Megan Bowen">Megan Bowen</div>
-              <div class="line2" role="presentation" aria-label="Auditor">Auditor</div>
+              <div class="line1" part="detail-line" role="presentation" aria-label="Megan Bowen">Megan Bowen</div>
+              <div class="line2" part="detail-line" role="presentation" aria-label="Auditor">Auditor</div>
         </div>
       </div>`,
       { ignoreAttributes: ['src'] }
@@ -46,13 +46,15 @@ describe('mgt-person - tests', () => {
               <div
                 aria-label="Megan Bowen"
                 class="line1"
+                part="detail-line"
                 role="presentation"
               >
                 Megan Bowen
               </div>
               <div
                 aria-label="Auditor"
                 class="line2"
+                part="detail-line"
                 role="presentation"
               >
                 Auditor
@@ -197,8 +199,8 @@ describe('mgt-person - localization', () => {
           <img alt="test value Megan Bowen" src="">
         </div>
         <div class=" details-wrapper ">
-              <div class="line1" role="presentation" aria-label="Megan Bowen">Megan Bowen</div>
-              <div class="line2" role="presentation" aria-label="Auditor">Auditor</div>
+              <div class="line1" part="detail-line" role="presentation" aria-label="Megan Bowen">Megan Bowen</div>
+              <div class="line2" part="detail-line" role="presentation" aria-label="Auditor">Auditor</div>
         </div>
       </div>`,
       { ignoreAttributes: ['src'] }

diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -869,14 +869,14 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
       // Render the line1 template
       const template = this.renderTemplate('line1', { person });
       details.push(html`
-           <div class="line1" @click=${() =>
+           <div class="line1" part="detail-line" @click=${() =>
              this.handleLine1Clicked()} role="presentation" aria-label="${line1text}">${template}</div>
          `);
     } else {
       // Render the line1 property value
       if (line1text) {
         details.push(html`
-             <div class="line1" @click=${() =>
+             <div class="line1" part="detail-line" @click=${() =>
                this.handleLine1Clicked()} role="presentation" aria-label="${line1text}">${line1text}</div>
            `);
       }
@@ -889,14 +889,14 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
         // Render the line2 template
         const template = this.renderTemplate('line2', { person });
         details.push(html`
-           <div class="line2" @click=${() =>
+           <div class="line2" part="detail-line" @click=${() =>
              this.handleLine2Clicked()} role="presentation" aria-label="${text}">${template}</div>
          `);
       } else {
         // Render the line2 property value
         if (text) {
           details.push(html`
-             <div class="line2" @click=${() =>
+             <div class="line2" part="detail-line" @click=${() =>
                this.handleLine2Clicked()} role="presentation" aria-label="${text}">${text}</div>
            `);
         }
@@ -910,14 +910,14 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
         // Render the line3 template
         const template = this.renderTemplate('line3', { person });
         details.push(html`
-           <div class="line3" @click=${() =>
+           <div class="line3" part="detail-line" @click=${() =>
              this.handleLine3Clicked()} role="presentation" aria-label="${text}">${template}</div>
          `);
       } else {
         // Render the line3 property value
         if (text) {
           details.push(html`
-             <div class="line3" @click=${() =>
+             <div class="line3" part="detail-line" @click=${() =>
                this.handleLine3Clicked()} role="presentation" aria-label="${text}">${text}</div>
            `);
         }
@@ -931,14 +931,14 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
         // Render the line4 template
         const template = this.renderTemplate('line4', { person });
         details.push(html`
-          <div class="line4" @click=${() =>
+          <div class="line4" part="detail-line" @click=${() =>
             this.handleLine4Clicked()} role="presentation" aria-label="${text}">${template}</div>
         `);
       } else {
         // Render the line4 property value
         if (text) {
           details.push(html`
-            <div class="line4" @click=${() =>
+            <div class="line4" part="detail-line" @click=${() =>
               this.handleLine4Clicked()} role="presentation" aria-label="${text}">${text}</div>
           `);
         }

diff --git a/stories/components/person/person.style.stories.js b/stories/components/person/person.style.stories.js
@@ -83,3 +83,21 @@ export const customCSSProperties = () => html`
   <mgt-person class="person" vertical-layout person-query="me" view="fourlines" avatar-type="initials" id="dnd"
     show-presence></mgt-person>
 `;
+
+export const personDetailPart = () => html`
+  <style>
+    mgt-person::part(detail-line) {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: var(--person-details-wrapper-width)
+    }
+
+    mgt-person {
+      --person-details-wrapper-width: 150px;
+    }
+  </style>
+
+  <mgt-person person-query="me" view="threelines" line3-property="email"></mgt-person>
+
+`;