feat(Chat): add actionMenu prop for ChatMessage

CHANGELOG.md

@@ -29,6 +29,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Added slot class names in `ChatMessage`, `ChatItem`, `Dropdown`, `ItemLayout`, `Layout`, `MenuItem` @mnajdova ([#827](https://github.com/stardust-ui/react/pull/827))
 - Add `badge` and `badgePosition` properties on the `ChatMessage` @mnajdova ([#823](https://github.com/stardust-ui/react/pull/823))
 - Add `hasMention`, `isImportant`, `hasMentionColor` and `isImportantColor` in ChatMessage variables in Teams theme @mnajdova ([#841](https://github.com/stardust-ui/react/pull/841))
+- Add `actionMenu` prop to `ChatMessage` component @layershifter ([#811](https://github.com/stardust-ui/react/pull/811))
 
 ### Fixes
 - Fix `Dropdown` component styles regression @Bugaa92 ([#824](https://github.com/stardust-ui/react/pull/824))

docs/src/examples/components/Chat/Content/ChatExampleActions.shorthand.tsx

@@ -0,0 +1,63 @@
+import { Avatar, Chat } from '@stardust-ui/react'
+import * as React from 'react'
+
+const actionMenu = {
+  iconOnly: true,
+  items: [
+    { key: 'like', icon: 'like', title: 'Like' },
+    { key: 'more', icon: 'more', title: 'More actions' },
+  ],
+}
+
+const items = [
+  {
+    attached: 'top',
+    contentPosition: 'end',
+    message: {
+      content: (
+        <Chat.Message
+          actionMenu={actionMenu}
+          content="Hello"
+          author="John Doe"
+          timestamp="Yesterday, 10:15 PM"
+          mine
+        />
+      ),
+    },
+    key: 'message-1',
+  },
+  {
+    attached: 'bottom',
+    contentPosition: 'end',
+    key: 'message-2',
+    message: {
+      content: (
+        <Chat.Message
+          actionMenu={actionMenu}
+          content="I'm back!"
+          author="John Doe"
+          timestamp="Yesterday, 10:15 PM"
+          mine
+        />
+      ),
+    },
+  },
+  {
+    gutter: { content: <Avatar image="public/images/avatar/small/ade.jpg" /> },
+    message: {
+      content: (
+        <Chat.Message
+          actionMenu={actionMenu}
+          content="Hi"
+          author="Jane Doe"
+          timestamp="Yesterday, 10:15 PM"
+        />
+      ),
+    },
+    key: 'message-3',
+  },
+]
+
+const ChatExample = () => <Chat items={items} />
+
+export default ChatExample

docs/src/examples/components/Chat/Content/index.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Content = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Actions"
+      description="A chat message can contain actions."
+      examplePath="components/Chat/Content/ChatExampleActions"
+    />
+  </ExampleSection>
+)
+
+export default Content

docs/src/examples/components/Chat/index.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react'
+
+import Content from './Content'
 import Types from './Types'
 
 const ChatExamples = () => (
-  <div>
+  <>
     <Types />
-  </div>
+    <Content />
+  </>
 )
 
 export default ChatExamples

docs/src/prototypes/chatMessageWithPopover/ChatWithPopover.tsx

@@ -1,6 +1,6 @@
 import { Chat, Provider, Avatar } from '@stardust-ui/react'
 import * as React from 'react'
-import ChatMessageWithPopover from './ChatMessageWithPopover'
+import Popover from './Popover'
 
 const janeAvatar = {
   image: 'public/images/avatar/small/ade.jpg',
@@ -12,15 +12,7 @@ const ChatWithPopover = () => (
     theme={{
       componentStyles: {
         ChatMessage: {
-          root: ({ theme: { siteVariables } }) => ({
-            position: 'relative',
-
-            '&.focused .actions': {
-              opacity: 1,
-            },
-            ':hover .actions': {
-              opacity: 1,
-            },
+          root: ({ props: p, theme: { siteVariables } }) => ({
             '& a': {
               color: siteVariables.brand,
             },
@@ -29,15 +21,34 @@ const ChatWithPopover = () => (
         Menu: {
           root: {
             background: '#fff',
-            boxShadow: '0px 2px 4px #ddd',
-            borderRadius: '.3rem',
+            transition: 'opacity 0.2s',
+            position: 'absolute',
+
             '& a:focus': {
               textDecoration: 'none',
               color: 'inherit',
             },
             '& a': {
               color: 'inherit',
             },
+
+            '& .smile-emoji': {
+              position: 'absolute',
+              opacity: 0,
+              zIndex: -1,
+            },
+
+            '&.focused .smile-emoji': {
+              position: 'initial',
+              zIndex: 'initial',
+              opacity: 1,
+            },
+
+            '&:hover .smile-emoji': {
+              position: 'initial',
+              zIndex: 'initial',
+              opacity: 1,
+            },
           },
         },
       },
@@ -47,17 +58,62 @@ const ChatWithPopover = () => (
       items={[
         {
           key: 'a',
-          message: { content: <ChatMessageWithPopover /> },
+          message: {
+            content: (
+              <Chat.Message
+                actionMenu={<Popover />}
+                author="Jane Doe"
+                content={{
+                  content: (
+                    <div>
+                      <a href="/">Link</a> Hover me to see the actions <a href="/">Some Link</a>
+                    </div>
+                  ),
+                }}
+                timestamp="Yesterday, 10:15 PM"
+              />
+            ),
+          },
           gutter: { content: <Avatar {...janeAvatar} /> },
         },
         {
           key: 'b',
-          message: { content: <ChatMessageWithPopover /> },
+          message: {
+            content: (
+              <Chat.Message
+                actionMenu={<Popover />}
+                author="Jane Doe"
+                content={{
+                  content: (
+                    <div>
+                      <a href="/">Link</a> Hover me to see the actions <a href="/">Some Link</a>
+                    </div>
+                  ),
+                }}
+                timestamp="Yesterday, 10:15 PM"
+              />
+            ),
+          },
           gutter: { content: <Avatar {...janeAvatar} /> },
         },
         {
           key: 'c',
-          message: { content: <ChatMessageWithPopover /> },
+          message: {
+            content: (
+              <Chat.Message
+                actionMenu={<Popover />}
+                author="Jane Doe"
+                content={{
+                  content: (
+                    <div>
+                      <a href="/">Link</a> Hover me to see the actions <a href="/">Some Link</a>
+                    </div>
+                  ),
+                }}
+                timestamp="Yesterday, 10:15 PM"
+              />
+            ),
+          },
           gutter: { content: <Avatar {...janeAvatar} /> },
         },
       ]}

docs/src/prototypes/chatMessageWithPopover/Popover.tsx

@@ -1,4 +1,4 @@
-import { Menu, toolbarBehavior, toolbarButtonBehavior } from '@stardust-ui/react'
+import { Accessibility, Menu, toolbarBehavior, toolbarButtonBehavior } from '@stardust-ui/react'
 import * as React from 'react'
 import cx from 'classnames'
 
@@ -10,6 +10,16 @@ interface PopoverState {
   focused: boolean
 }
 
+const popoverBehavior: Accessibility = (props: any) => {
+  const behavior = toolbarBehavior(props)
+
+  behavior.focusZone.props.defaultTabbableElement = (root: HTMLElement): HTMLElement => {
+    return root.querySelector('[aria-label="thumbs up"]')
+  }
+
+  return behavior
+}
+
 class Popover extends React.Component<PopoverProps, PopoverState> {
   state = {
     focused: false,
@@ -28,30 +38,11 @@ class Popover extends React.Component<PopoverProps, PopoverState> {
     this.changeFocusState(shouldPreserveFocusState)
   }
 
-  popoverStyles = ({ theme: { siteVariables } }) => ({
-    transition: 'opacity 0.2s',
-    position: 'absolute',
-    top: '-20px',
-    right: '5px',
-    opacity: 0,
-
-    '& .smile-emoji': {
-      display: 'none',
-    },
-
-    '&.focused .smile-emoji': {
-      display: 'flex',
-    },
-
-    '&:hover .smile-emoji': {
-      display: 'flex',
-    },
-  })
-
   render() {
     return (
       <Menu
-        styles={this.popoverStyles}
+        {...this.props}
+        accessibility={popoverBehavior}
         iconOnly
         className={cx(this.props.className, this.state.focused ? 'focused' : '')}
         items={[
@@ -100,7 +91,6 @@ class Popover extends React.Component<PopoverProps, PopoverState> {
         ]}
         onFocus={this.handleFocus}
         onBlur={this.handleBlur}
-        accessibility={toolbarBehavior}
         data-is-focusable={true}
       />
     )