@pushwoosh/dumb-components 2.9.11 → 2.9.12

package/Skeleton/__tests__/Skeleton.test.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
-import { CircularSkeleton, RectangularSkeleton } from '../styles';
+import { CircularSkeleton, RectangularSkeleton, TextSkeletonTag } from '../styles';
+import { TextSkeleton } from '../TextSkeleton';
 describe('RectangularSkeleton', () => {
   it('keeps style props off the DOM and still paints them', () => {
     render(_jsx(RectangularSkeleton, {
@@ -53,4 +54,48 @@ describe('CircularSkeleton', () => {
       backgroundColor: 'rgb(255, 0, 0)'
     });
   });
+});
+describe('TextSkeleton', () => {
+  it('denies borderRadius and color in shouldForwardProp, which SC 6 uses instead of isPropValid', () => {
+    const {
+      shouldForwardProp
+    } = TextSkeletonTag;
+    expect(shouldForwardProp?.('borderRadius')).toBe(false);
+    expect(shouldForwardProp?.('color')).toBe(false);
+    expect(shouldForwardProp?.('title')).toBe(true);
+  });
+  it('keeps style props off the DOM and still paints them', () => {
+    render(_jsx(TextSkeleton, {
+      "data-testid": "text",
+      width: 160,
+      color: "red",
+      borderRadius: "8px"
+    }));
+    const node = screen.getByTestId('text');
+    expect(node).not.toHaveAttribute('color');
+    expect(node).not.toHaveAttribute('borderradius');
+    expect(node).toHaveAttribute('data-testid', 'text');
+    expect(getComputedStyle(node)).toMatchObject({
+      width: '160px',
+      color: 'rgb(255, 0, 0)',
+      backgroundColor: 'rgb(255, 0, 0)',
+      borderRadius: '8px'
+    });
+  });
+  it('still renders a div with inline width and an inline span without it', () => {
+    render(_jsx(TextSkeleton, {
+      "data-testid": "block",
+      width: 160
+    }));
+    render(_jsx(TextSkeleton, {
+      "data-testid": "inline",
+      children: "abc"
+    }));
+    expect(screen.getByTestId('block').tagName).toBe('DIV');
+    expect(screen.getByTestId('block')).toHaveStyle({
+      width: '160px'
+    });
+    expect(screen.getByTestId('inline').tagName).toBe('SPAN');
+    expect(screen.getByTestId('inline')).not.toHaveAttribute('style');
+  });
 });

package/Skeleton/styles.js

@@ -36,6 +36,8 @@ export const CircularSkeleton = styled.div.withConfig({
   diameter
 }) => toCssValue(diameter), skeletonCommonCss);
 export const TextSkeletonTag = styled.div.withConfig({
+  shouldForwardProp: prop => !['borderRadius', 'color'].includes(prop)
+}).withConfig({
   displayName: "TextSkeletonTag",
   componentId: "sc-mdyfd6-2"
 })(["", " color:", ";border-radius:", ";", ""], ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "2.9.11",
+  "version": "2.9.12",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",