fix(ChatMessage): prevent hover over invisible actions area

CHANGELOG.md

@@ -24,11 +24,11 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Export `lock` SVG icon @VyshnaviDasari ([#906](https://github.com/stardust-ui/react/pull/906))
 - Adding status behavior @kolaps33 ([#880](https://github.com/stardust-ui/react/pull/880))
 - Add basic animation library for Teams theme @bhamlefty @mnajdova ([#871](https://github.com/stardust-ui/react/pull/871)
-- Export `accept` and `urgent` SVG icons to the Teams Theme @joheredi([#929](https://github.com/stardust-ui/react/pull/929))
+- Export `accept` and `urgent` SVG icons to the Teams theme @joheredi([#929](https://github.com/stardust-ui/react/pull/929))
 - Add `open`, `defaultOpen` and `onOpenChange` props for `Dropdown` component (controlled mode) @Bugaa92 ([#900](https://github.com/stardust-ui/react/pull/900))
 - Add `accessibility` prop to all components that supports it @layershifter ([#927](https://github.com/stardust-ui/react/pull/927))
 - Export `FocusZone` types @sophieH29 ([#943](https://github.com/stardust-ui/react/pull/943/))
-- Export `chevron-down`, `download`, `search`, `email` and `star` SVG icons to the Teams Theme @pajindal([#955](https://github.com/stardust-ui/react/pull/955))
+- Export `chevron-down`, `download`, `search`, `email` and `star` SVG icons to the Teams theme @pajindal([#955](https://github.com/stardust-ui/react/pull/955))
 
 ### Fixes
 - Display correctly images in portrait mode inside `Avatar` @layershifter ([#899](https://github.com/stardust-ui/react/pull/899))
@@ -39,9 +39,11 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `ChatMessage` styles for Teams theme @kuzhelov ([#962](https://github.com/stardust-ui/react/pull/962))
 - Fix the order of applied props in `Status` component @layershifter ([#961](https://github.com/stardust-ui/react/pull/961))
 - Remove redundant margins for `Button` and `Icon` components and fix layout of `Dialog` component and affected examples @Bugaa92 ([#945](https://github.com/stardust-ui/react/pull/945))
+- Prevent appearance of `actions` slot on hover over area outside of `ChatMessage` @kuzhelov ([#953](https://github.com/stardust-ui/react/pull/953))
 
 ### Documentation
 - Add `Editable Area with Dropdown` prototype for mentioning people using `@` character (only available in development mode) @Bugaa92 ([#931](https://github.com/stardust-ui/react/pull/931))
+- Adjust styles of `Portal` examples @kuzhelov ([#953](https://github.com/stardust-ui/react/pull/953))
 
 <!--------------------------------[ v0.21.1 ]------------------------------- -->
 ## [v0.21.1](https://github.com/stardust-ui/react/tree/v0.21.1) (2019-02-14)
@@ -625,7 +627,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fixed missing colors in Teams' siteVariables @mnajdova ([#200](https://github.com/stardust-ui/react/pull/200))
 - Fixed Teams' siteVariables font sizes @levithomason ([#204](https://github.com/stardust-ui/react/pull/204))
 - Fixed docs examples of `Text` component @codepretty ([#205](https://github.com/stardust-ui/react/pull/205))
-- Preserve fonts and static styles in mergeThemes @levithomason ([#217](https://github.com/stardust-ui/react/pull/217))
+- Preserve fonts and static styles in `mergeThemes` @levithomason ([#217](https://github.com/stardust-ui/react/pull/217))
 
 ### Features
 - Add `state` to `props` in component styling functions @Bugaa92 ([#173](https://github.com/stardust-ui/react/pull/173))

docs/src/examples/components/Portal/Types/PortalExample.shorthand.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Button, Divider, Header, Label, Portal } from '@stardust-ui/react'
+import { Button, Divider, Flex, Header, Label, Portal } from '@stardust-ui/react'
 
 class PortalExamplePortal extends React.Component {
   state = { log: [], logCount: 0 }
@@ -41,10 +41,13 @@ class PortalExamplePortal extends React.Component {
         />
         <Divider />
         <div>
-          <Button size="small" onClick={this.clearLog} content="Clear" />
-          <span>
-            Event Log <Label circular>{logCount}</Label>
-          </span>
+          <Flex gap="gap.small" vAlign="center">
+            <Button size="small" onClick={this.clearLog} content="Clear" />
+            <span>
+              Event Log <Label circular>{logCount}</Label>
+            </span>
+          </Flex>
+
           <pre>
             {log.map((e, i) => (
               <div key={i}>{e}</div>

docs/src/examples/components/Portal/Types/PortalExample.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Button, Divider, Header, Label, Portal } from '@stardust-ui/react'
+import { Button, Divider, Flex, Header, Label, Portal } from '@stardust-ui/react'
 
 class PortalExamplePortal extends React.Component {
   state = { log: [], logCount: 0 }
@@ -38,10 +38,13 @@ class PortalExamplePortal extends React.Component {
         </Portal>
         <Divider />
         <div>
-          <Button size="small" onClick={this.clearLog} content="Clear" />
-          <span>
-            Event Log <Label circular>{logCount}</Label>
-          </span>
+          <Flex gap="gap.small" vAlign="center">
+            <Button size="small" onClick={this.clearLog} content="Clear" />
+            <span>
+              Event Log <Label circular>{logCount}</Label>
+            </span>
+          </Flex>
+
           <pre>
             {log.map((e, i) => (
               <div key={i}>{e}</div>

docs/src/examples/components/Portal/Types/PortalExampleControlled.shorthand.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Button, Divider, Header, Label, Portal } from '@stardust-ui/react'
+import { Button, Divider, Flex, Header, Label, Portal } from '@stardust-ui/react'
 
 class PortalExampleControlled extends React.Component {
   state = { log: [], logCount: 0, open: false }
@@ -26,10 +26,14 @@ class PortalExampleControlled extends React.Component {
         <div>
           <Button content={btnContent} onClick={this.handleClick.bind(this, btnContent)} />
           <Divider />
-          <Button size="small" onClick={this.clearLog} content="Clear" />
-          <span>
-            Event Log <Label circular>{logCount}</Label>
-          </span>
+
+          <Flex gap="gap.small" vAlign="center">
+            <Button size="small" onClick={this.clearLog} content="Clear" />
+            <span>
+              Event Log <Label circular>{logCount}</Label>
+            </span>
+          </Flex>
+
           <pre>
             {log.map((e, i) => (
               <div key={i}>{e}</div>

docs/src/examples/components/Portal/Types/PortalExampleControlled.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Button, Divider, Header, Label, Portal } from '@stardust-ui/react'
+import { Button, Divider, Flex, Header, Label, Portal } from '@stardust-ui/react'
 
 class PortalExampleControlled extends React.Component {
   state = { log: [], logCount: 0, open: false }
@@ -26,10 +26,14 @@ class PortalExampleControlled extends React.Component {
         <div>
           <Button content={btnContent} onClick={this.handleClick.bind(this, btnContent)} />
           <Divider />
-          <Button size="small" onClick={this.clearLog} content="Clear" />
-          <span>
-            Event Log <Label circular>{logCount}</Label>
-          </span>
+
+          <Flex gap="gap.small" vAlign="center">
+            <Button size="small" onClick={this.clearLog} content="Clear" />
+            <span>
+              Event Log <Label circular>{logCount}</Label>
+            </span>
+          </Flex>
+
           <pre>
             {log.map((e, i) => (
               <div key={i}>{e}</div>

packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts

@@ -58,6 +58,7 @@ const chatMessageStyles: ComponentSlotStylesInput<
     ':hover': {
       [`& .${ChatMessage.slotClassNames.actionMenu}`]: {
         opacity: 1,
+        width: 'auto',
       },
     },
   }),
@@ -66,10 +67,14 @@ const chatMessageStyles: ComponentSlotStylesInput<
     backgroundColor: v.backgroundColor,
     borderRadius: v.borderRadius,
     boxShadow: v.actionMenuBoxShadow,
-    opacity: p.focused ? 1 : 0,
     position: 'absolute',
     right: v.actionMenuPositionRight,
     top: v.actionMenuPositionTop,
+    overflow: p.focused ? 'visible' : 'hidden',
+
+    // hide and squash actions menu to prevent accidental hovers over its invisible area
+    opacity: p.focused ? 1 : 0,
+    width: p.focused ? 'auto' : 0,
   }),
 
   author: ({ props: p, variables: v }): ICSSInJSStyle => ({