fix(Text): apply display: inline-block only if the animation prop is provided while the Text is rendered as span

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Fixes
 - Remove space between `Button.Group` items without `circular` prop @Bugaa92 ([#973](https://github.com/stardust-ui/react/pull/973))
+- Fix allow `Text` component when rendered as div to behave as block element in Teams theme @mnajdova ([#940](https://github.com/stardust-ui/react/pull/940))
 
 <!--------------------------------[ v0.22.1 ]------------------------------- -->
 ## [v0.22.1](https://github.com/stardust-ui/react/tree/v0.22.1) (2019-02-26)

docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx

@@ -53,10 +53,16 @@ const ChatMessageExampleStyled = () => (
         ChatMessage: {
           root: { ...slotLabelStyles('chat-message-root'), backgroundColor: '#87CEFA' },
           author: ({ props: { mine } }) => ({
-            ...(!mine && { ...slotLabelStyles('author'), backgroundColor: '#E0FFFF' }),
+            ...(!mine && {
+              ...slotLabelStyles('author', {}, { display: 'inline-block' }),
+              backgroundColor: '#E0FFFF',
+            }),
           }),
           content: { ...slotLabelStyles('content'), backgroundColor: '#F08080' },
-          timestamp: { ...slotLabelStyles('timestamp'), backgroundColor: '#FFFFE0' },
+          timestamp: {
+            ...slotLabelStyles('timestamp', {}, { display: 'inline-block' }),
+            backgroundColor: '#FFFFE0',
+          },
           badge: {
             ...slotLabelStyles(
               'badge',

packages/react/src/themes/base/components/Text/textStyles.ts

@@ -6,6 +6,8 @@ import { TextProps } from '../../../../components/Text/Text'
 export default {
   root: ({
     props: {
+      as,
+      animation,
       atMention,
       color,
       disabled,
@@ -21,7 +23,11 @@ export default {
     variables: v,
   }: ComponentStyleFunctionParam<TextProps, TextVariables>): ICSSInJSStyle => {
     return {
-      display: 'inline-block',
+      // animations are not working with span, unless display is set to 'inline-block'
+      ...(animation &&
+        as === 'span' && {
+          display: 'inline-block',
+        }),
       ...(atMention === true && {
         color: v.atMentionOtherColor,
       }),