Forward shouldForwardProp through withComponent

- Fixes a bug that prevented `shouldForwardProp` from forwarding to components created via `withComponent`; Fixes #1394 - Compacts `createStyled`'s options argument
emotion-js · Dec 2, 2019 · 2f18d6b · 2f18d6b
1 parent 04038fd
commit 2f18d6b
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 6 deletions.
diff --git a/packages/styled-base/src/index.js b/packages/styled-base/src/index.js
@@ -211,12 +211,11 @@ let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
       nextTag: ElementType,
       nextOptions?: StyledOptions
     ) => {
-      return createStyled(
-        nextTag,
-        nextOptions !== undefined
-          ? { ...(options || {}), ...nextOptions }
-          : options
-      )(...styles)
+      return createStyled(nextTag, {
+        shouldForwardProp,
+        ...options,
+        ...nextOptions
+      })(...styles)
     }
 
     return Styled

diff --git a/packages/styled/__tests__/__snapshots__/styled.js.snap b/packages/styled/__tests__/__snapshots__/styled.js.snap
@@ -617,6 +617,35 @@ exports[`styled with higher order component that hoists statics 1`] = `
 />
 `;
 
+exports[`styled withComponent correctly composes shouldForwardProp 1`] = `
+<p
+  className="emotion-0"
+  propA={true}
+/>
+`;
+
+exports[`styled withComponent correctly composes shouldForwardProp 2`] = `
+<label
+  className="emotion-0"
+  propA={true}
+/>
+`;
+
+exports[`styled withComponent correctly composes shouldForwardProp 3`] = `
+<label
+  className="emotion-0"
+  propB={true}
+/>
+`;
+
+exports[`styled withComponent correctly inherits parent shouldForwardProp through chained withComponent calls 1`] = `
+<div
+  className="emotion-0"
+  propA={true}
+  propB={true}
+/>
+`;
+
 exports[`styled withComponent does carry styles from flattened component 1`] = `
 .emotion-0 {
   color: green;
@@ -628,6 +657,20 @@ exports[`styled withComponent does carry styles from flattened component 1`] = `
 />
 `;
 
+exports[`styled withComponent inherits parent shouldForwardProp 1`] = `
+<span
+  className="emotion-0"
+  propA={true}
+/>
+`;
+
+exports[`styled withComponent overrides inherited parent shouldForwardProp 1`] = `
+<div
+  className="emotion-0"
+  propB={true}
+/>
+`;
+
 exports[`styled withComponent will replace tags but keep styling classes 1`] = `
 .emotion-0 {
   color: green;

diff --git a/packages/styled/__tests__/styled.js b/packages/styled/__tests__/styled.js
@@ -641,6 +641,58 @@ describe('styled', () => {
     const tree = renderer.create(<OneMoreComponent />).toJSON()
     expect(tree).toMatchSnapshot()
   })
+
+  test('withComponent inherits parent shouldForwardProp', () => {
+    const SomeComponent = styled('div', {
+      label: 'cmp-a',
+      shouldForwardProp: prop => prop === 'propA'
+    })``.withComponent('span')
+    const tree = renderer.create(<SomeComponent propA propB />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  test('withComponent overrides inherited parent shouldForwardProp', () => {
+    const SomeComponent = styled('div', {
+      label: 'cmp-a',
+      shouldForwardProp: prop => prop === 'propA'
+    })``.withComponent('div', {
+      label: 'cmp-b',
+      shouldForwardProp: prop => prop === 'propB'
+    })
+    const tree = renderer.create(<SomeComponent propA propB />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  test('withComponent correctly inherits parent shouldForwardProp through chained withComponent calls', () => {
+    const SomeComponent = styled('div', {
+      shouldForwardProp: prop => prop === 'propA'
+    })``
+      .withComponent('div', {
+        shouldForwardProp: prop => prop === 'propB'
+      })
+      .withComponent('div', {
+        shouldForwardProp: prop => prop === 'propA' || prop === 'propB'
+      })
+    const tree = renderer.create(<SomeComponent propA propB propC />).toJSON()
+    expect(tree.props.propC).toBeUndefined()
+    expect(tree).toMatchSnapshot()
+  })
+
+  test('withComponent correctly composes shouldForwardProp', () => {
+    const ComponentA = styled('p', {
+      shouldForwardProp: prop => prop === 'propA'
+    })``
+    const ComponentB = styled(ComponentA)``.withComponent('label')
+    const ComponentC = styled(ComponentB)``.withComponent('label', {
+      shouldForwardProp: prop => prop === 'propB'
+    })
+    const treeA = renderer.create(<ComponentA propA propB />).toJSON()
+    const treeB = renderer.create(<ComponentB propA propB />).toJSON()
+    const treeC = renderer.create(<ComponentC propA propB />).toJSON()
+    expect(treeA).toMatchSnapshot()
+    expect(treeB).toMatchSnapshot()
+    expect(treeC).toMatchSnapshot()
+  })
   test('theming', () => {
     const Div = styled.div`
       color: ${props => props.theme.primary};