Use Link for emails in contact details pattern (#4197)

Co-authored-by: Yun <[email protected]>

packages/core/stories/patterns/contact-details/contact-details.stories.tsx

@@ -6,6 +6,7 @@ import {
   type DropdownProps,
   FlexLayout,
   FlowLayout,
+  Link,
   Option,
   SplitLayout,
   StackLayout,
@@ -53,7 +54,9 @@ const basicContact = {
     },
     {
       label: "Email",
-      value: "[email protected]",
+      value: (
+        <Link href="mailto:[email protected]">[email protected]</Link>
+      ),
       icon: <MessageIcon aria-hidden />,
     },
   ],
@@ -86,7 +89,7 @@ export const ContactDetails = ({ avatarSrc = persona }) => {
           <StackLayout gap={0.5} direction={"column"}>
             {basicContact.metadata.map((metadata) => {
               return (
-                <Text variant="secondary" key={metadata.label}>
+                <Text color="secondary" key={metadata.label}>
                   {metadata.label}
                 </Text>
               );
@@ -182,7 +185,7 @@ export const QuickAction = () => {
             hideIcon
           >
             <Button
-              variant="secondary"
+              appearance="transparent"
               aria-label={`Email ${basicContact.primary}`}
             >
               <MessageIcon aria-hidden />
@@ -194,7 +197,7 @@ export const QuickAction = () => {
             hideIcon
           >
             <Button
-              variant="secondary"
+              appearance="transparent"
               aria-label={`Call ${basicContact.primary}`}
             >
               <CallIcon aria-hidden />
@@ -206,7 +209,7 @@ export const QuickAction = () => {
             hideIcon
           >
             <Button
-              variant="secondary"
+              appearance="transparent"
               aria-label={`Text ${basicContact.primary}`}
             >
               <ChatIcon aria-hidden />
@@ -249,7 +252,7 @@ export const CollapsibleDetails = () => {
                 hideIcon
               >
                 <Button
-                  variant="secondary"
+                  appearance="transparent"
                   aria-label={`Email ${basicContact.primary}`}
                 >
                   <MessageIcon aria-hidden />
@@ -261,7 +264,7 @@ export const CollapsibleDetails = () => {
                 hideIcon
               >
                 <Button
-                  variant="secondary"
+                  appearance="transparent"
                   aria-label={`Call ${basicContact.primary}`}
                 >
                   <CallIcon aria-hidden />
@@ -273,7 +276,7 @@ export const CollapsibleDetails = () => {
                 hideIcon
               >
                 <Button
-                  variant="secondary"
+                  appearance="transparent"
                   aria-label={`Text ${basicContact.primary}`}
                 >
                   <ChatIcon aria-hidden />
@@ -284,7 +287,7 @@ export const CollapsibleDetails = () => {
           endItem={
             <Button
               onClick={handleClick}
-              variant="secondary"
+              appearance="transparent"
               aria-expanded={expandedDetails}
               aria-label={"expand contact details"}
             >
@@ -310,7 +313,7 @@ export const CollapsibleDetails = () => {
             <StackLayout direction={"column"} gap={0.5}>
               {basicContact.metadata.map((metadata) => {
                 return (
-                  <Text variant="secondary" key={metadata.label}>
+                  <Text color="secondary" key={metadata.label}>
                     {metadata.label}
                   </Text>
                 );
@@ -385,17 +388,14 @@ export const List = () => {
       valueToString={(contact) => contact.primary}
     >
       {contactList.map((contact) => (
-        <Option key={contact.sid} value={contact}>
-          <StackLayout
-            direction={"row"}
-            gap={1}
-            style={{
-              paddingLeft: "var(--salt-spacing-100)",
-              paddingRight: "var(--salt-spacing-100)",
-              paddingTop: "var(--salt-spacing-50)",
-              paddingBottom: "var(--salt-spacing-50)",
-            }}
-          >
+        <Option
+          key={contact.sid}
+          value={contact}
+          style={{
+            padding: "var(--salt-spacing-50) var(--salt-spacing-100)",
+          }}
+        >
+          <StackLayout direction={"row"} align="center" gap={1}>
             <Avatar
               src={contact.avatarImage as string}
               aria-label={basicContact.primary}

site/docs/patterns/contact-details.mdx

@@ -95,7 +95,7 @@ Refrain from using icon descriptors when you have multiple values for similar ch
 
 ## Using links
 
-You can define contact details as links, making them interactive. This enables immediate communication to a contact from within your application.
+We recommend emails to be interactive links by default, you can also define other details (e.g. phone number) as links, making them interactive—to enable immediate communication to a contact from within your application.
 
  <Diagram
     src="/img/patterns/contact-details/contact-details-using-links.png"
@@ -159,7 +159,9 @@ Consider making supplementary details collapsible when they contain secondary in
 
 The list version allows you to display a snapshot of key details. It’s ideal when you have restricted real estate, such as in a client picker dropdown menu or a contact directory list.
 
-To show as many options as possible, we recommend you keep data points to no more than one line. Prioritize the most important values.
+To show as many options as possible, we recommend you keep data points to no more than one line. Prioritize the most important values. 
+
+The link function won't be able to be applied to the text content (e.g. email or phone number) as it is an list item that users select as a whole option from the dropdown.
 
  <Diagram
     src="/img/patterns/contact-details/contact-details-list.png"
@@ -182,4 +184,10 @@ Use `StackLayout` to display the text elements underneath the header in a row.
     border
   />
 
+## Changelog
+
+| Date | Summary |
+| --- | --- |
+| 2024-09-27 | Updated email with Link. | 
+
 :fragment{src="./fragments/feedback.mdx"}