fix: make TagBody render as span rather than p (#2533)

.changeset/curvy-boats-hunt.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/tag': patch
+---
+
+Make `<TagBody>` render as `<span>` rather than `<p>`

packages/components/tag/src/tag-body.tsx

@@ -117,7 +117,9 @@ const TagBody = (props: TTagBodyProps) => {
         {props.isDraggable && !props.isDisabled ? (
           <DragIcon data-testid="drag-icon" size="medium" />
         ) : null}
-        <Text.Body tone={textTone}>{props.children}</Text.Body>
+        <Text.Body tone={textTone} as="span">
+          {props.children}
+        </Text.Body>
       </Spacings.Inline>
     </Body>
   );

packages/components/tag/src/tag.spec.js

@@ -1,10 +1,22 @@
 import { screen, render } from '../../../../test/test-utils';
 import Tag from './tag';
 
-it('should render children', () => {
+it('should render text as children', () => {
   render(<Tag>Bread</Tag>);
   expect(screen.getByText('Bread')).toBeInTheDocument();
 });
+it('should render html markup as children', () => {
+  const error = jest.spyOn(console, 'error').mockImplementation(() => {});
+  render(
+    <Tag>
+      <div>👋</div>
+    </Tag>
+  );
+
+  // ensure is renders correctly without validateDOMNesting warning
+  expect(screen.getByText('👋')).toBeInTheDocument();
+  expect(error).not.toHaveBeenCalled();
+});
 
 it('should call onClick when clicked', () => {
   const onClick = jest.fn();