diff --git a/CHANGELOG.md b/CHANGELOG.md index 5361057d1..ec701fefa 100644 --- a/CHANGELOG.md +++ b/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](https://github.com/stardust-ui/react/tree/v0.22.1) (2019-02-26) diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx index 36733fdda..99f700d6d 100644 --- a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx +++ b/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', diff --git a/packages/react/src/themes/base/components/Text/textStyles.ts b/packages/react/src/themes/base/components/Text/textStyles.ts index be7c2adba..f989abdea 100644 --- a/packages/react/src/themes/base/components/Text/textStyles.ts +++ b/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): 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, }),