diff --git a/CHANGELOG.md b/CHANGELOG.md index 2f041d719a..4d0ba4ef2f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Correctly apply static styles if the first `Provider` rendered is RTL @miroslavstastny ([#960](https://github.com/stardust-ui/react/pull/960)) - Fix font-based `Icon` styles in Teams theme @kuzhelov ([#976](https://github.com/stardust-ui/react/pull/976)) - Refactor the `ListItem` component to use the `Flex` components instead of `ItemLayout` @mnajdova ([#886](https://github.com/stardust-ui/react/pull/886)) +- Fixed distance of the `content` and `reactionGroup` from the `badge` in the `ChatMessage` component for Teams theme @mnajdova ([#986](https://github.com/stardust-ui/react/pull/986)) ### Features - Add `delay` prop for `Loader` component @layershifter ([#969](https://github.com/stardust-ui/react/pull/969)) diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts b/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts index 3ffb6e6224..ea93458336 100644 --- a/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts +++ b/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts @@ -95,6 +95,10 @@ const chatMessageStyles: ComponentSlotStylesInput< color: v.contentFocusOutlineColor, textDecoration: 'underline', }, + ...(p.badge && + p.badgePosition === 'end' && { + marginRight: pxToRem(4), + }), }), badge: ({ props: p, variables: v }) => { const sidePosition = p.badgePosition === 'start' ? 'left' : 'right' @@ -113,8 +117,12 @@ const chatMessageStyles: ComponentSlotStylesInput< transform: p.badgePosition === 'start' ? 'translateX(-50%)' : 'translateX(50%)', } }, - reactionGroup: ({ variables: v }) => ({ + reactionGroup: ({ props: p, variables: v }) => ({ marginLeft: v.reactionGroupMarginLeft, + ...(p.badge && + p.badgePosition === 'end' && { + marginRight: pxToRem(2), + }), float: 'right', }), }