From 2e4c66d4ca2397ad04ce80d6b937340524002735 Mon Sep 17 00:00:00 2001 From: Dave Garwacke Date: Fri, 4 Aug 2017 17:45:16 -0400 Subject: [PATCH 1/5] feat(withComponent) Allow changing of tag/component - Add `withComponent` method to create new styled component - Update react test - Update snapshot --- docs/styled-with-component.md | 3 +++ packages/react-emotion/src/index.js | 11 ++++++++- .../test/__snapshots__/index.test.js.snap | 23 +++++++++++++++++++ packages/react-emotion/test/index.test.js | 13 +++++++++++ .../src/blocks/styled-with-component.example | 9 ++++++++ packages/site/src/main.js | 10 ++++++++ 6 files changed, 68 insertions(+), 1 deletion(-) create mode 100644 docs/styled-with-component.md create mode 100644 packages/site/src/blocks/styled-with-component.example diff --git a/docs/styled-with-component.md b/docs/styled-with-component.md new file mode 100644 index 000000000..e49ca3a13 --- /dev/null +++ b/docs/styled-with-component.md @@ -0,0 +1,3 @@ +## withComponent + +You can change a `styled` component's tag with the method `withComponent`. This API was inspired by [styled-components](https://github.com/styled-components/styled-components). diff --git a/packages/react-emotion/src/index.js b/packages/react-emotion/src/index.js index a68ad888b..07822a8af 100644 --- a/packages/react-emotion/src/index.js +++ b/packages/react-emotion/src/index.js @@ -26,7 +26,7 @@ const omitAssign = function(testFn, target) { let componentIdIndex = 0 -export default function(tag, options: { e: string, id: string }) { +const createStyled = (tag, options: { e: string, id: string }) => { if (process.env.NODE_ENV !== 'production') { if (tag === undefined) { throw new Error( @@ -106,6 +106,15 @@ export default function(tag, options: { e: string, id: string }) { Styled.__emotion_class = componentId Styled.__emotion_classes = componentIdClassName + Styled.withComponent = nextTag => { + return createStyled({ + __emotion_base: nextTag, + __emotion_styles: styles + })() + } + return Styled } } + +export default createStyled diff --git a/packages/react-emotion/test/__snapshots__/index.test.js.snap b/packages/react-emotion/test/__snapshots__/index.test.js.snap index 4ca9549d8..9139d164a 100644 --- a/packages/react-emotion/test/__snapshots__/index.test.js.snap +++ b/packages/react-emotion/test/__snapshots__/index.test.js.snap @@ -677,3 +677,26 @@ exports[`styled throws if undefined is passed as the component 1`] = ` "You are trying to create a styled element with an undefined component. You may have forgotten to import it." `; + +exports[`styled withComponent will replace tags but keep styling classes 1`] = ` +.glamor-1 { + color: green; +} + +
+ +

+ My Title +

+ + +

+ My Subtitle +

+ +
+`; diff --git a/packages/react-emotion/test/index.test.js b/packages/react-emotion/test/index.test.js index fce997f64..b40e49d3a 100644 --- a/packages/react-emotion/test/index.test.js +++ b/packages/react-emotion/test/index.test.js @@ -644,4 +644,17 @@ describe('styled', () => { () => styled(undefined)`display: flex;` ).toThrowErrorMatchingSnapshot() }) + test('withComponent will replace tags but keep styling classes', () => { + const Title = styled('h1')`color: green;` + const Subtitle = Title.withComponent('h2') + + const wrapper = mount( +
+ My Title + My Subtitle +
+ ) + + expect(enzymeToJson(wrapper)).toMatchSnapshot() + }) }) diff --git a/packages/site/src/blocks/styled-with-component.example b/packages/site/src/blocks/styled-with-component.example new file mode 100644 index 000000000..59a4a6111 --- /dev/null +++ b/packages/site/src/blocks/styled-with-component.example @@ -0,0 +1,9 @@ +const Circle = styled('span')` + width: 96px; + height: 96px; + border-radius: 50%; +` + +const Avatar = Circle.withComponent('img') + +render() diff --git a/packages/site/src/main.js b/packages/site/src/main.js index 5234d8500..71e5dd4ae 100755 --- a/packages/site/src/main.js +++ b/packages/site/src/main.js @@ -17,6 +17,7 @@ const propsExample = require('./blocks/props.example') const nestedExample = require('./blocks/nested.example') const mediaExample = require('./blocks/media.example') const anyComponentExample = require('./blocks/styling-any-component.example') +const withComponentExample = require('./blocks/styled-with-component.example') const pseudoExample = require('./blocks/pseudo.example') const keyframesExample = require('./blocks/keyframes.example') @@ -153,6 +154,15 @@ class App extends React.Component { scope={scope} /> + + + From 6bb35692db11fc23ba9229d5cd3b00b6081e1a2f Mon Sep 17 00:00:00 2001 From: Mitchell Hamilton Date: Fri, 22 Sep 2017 16:10:23 +1000 Subject: [PATCH 2/5] Update styled-with-component.md --- docs/styled-with-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/styled-with-component.md b/docs/styled-with-component.md index e49ca3a13..3b6ac0bb4 100644 --- a/docs/styled-with-component.md +++ b/docs/styled-with-component.md @@ -1,3 +1,3 @@ ## withComponent -You can change a `styled` component's tag with the method `withComponent`. This API was inspired by [styled-components](https://github.com/styled-components/styled-components). +You can change a `styled` component's tag with the method `withComponent`. This API was inspired by [styled-components' `withComponent`](https://www.styled-components.com/docs/api#withcomponent). From 850526bc5dbc8ec607bd24072d8281cf868c9c98 Mon Sep 17 00:00:00 2001 From: Mitchell Hamilton Date: Mon, 25 Sep 2017 14:05:54 +1000 Subject: [PATCH 3/5] Fix linting error --- packages/react-emotion/src/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-emotion/src/index.js b/packages/react-emotion/src/index.js index b6aaedb26..e471a3d2c 100644 --- a/packages/react-emotion/src/index.js +++ b/packages/react-emotion/src/index.js @@ -24,7 +24,6 @@ const omitAssign = function(testFn, target) { return target } - const createStyled = (tag, options: { e: string }) => { if (process.env.NODE_ENV !== 'production') { if (tag === undefined) { From 98eaadcae6e0f03e93fd398d59a9d9bab81cedb3 Mon Sep 17 00:00:00 2001 From: Mitchell Hamilton Date: Mon, 25 Sep 2017 16:27:05 +1000 Subject: [PATCH 4/5] Update snapshots --- .../react-emotion/test/__snapshots__/index.test.js.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-emotion/test/__snapshots__/index.test.js.snap b/packages/react-emotion/test/__snapshots__/index.test.js.snap index 68bbb038b..b2df2ed0e 100644 --- a/packages/react-emotion/test/__snapshots__/index.test.js.snap +++ b/packages/react-emotion/test/__snapshots__/index.test.js.snap @@ -621,21 +621,21 @@ You may have forgotten to import it." `; exports[`styled withComponent will replace tags but keep styling classes 1`] = ` -.glamor-1 { +.glamor-0 { color: green; }

My Title

My Subtitle

From 735a364cf215d0a42877b60640d82bc9a6972a37 Mon Sep 17 00:00:00 2001 From: Mitchell Hamilton Date: Mon, 25 Sep 2017 16:41:42 +1000 Subject: [PATCH 5/5] Update index.js --- packages/react-emotion/src/index.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/react-emotion/src/index.js b/packages/react-emotion/src/index.js index e471a3d2c..6b4789f33 100644 --- a/packages/react-emotion/src/index.js +++ b/packages/react-emotion/src/index.js @@ -91,10 +91,7 @@ const createStyled = (tag, options: { e: string }) => { Styled.__emotion_base = baseTag Styled.withComponent = nextTag => { - return createStyled({ - __emotion_base: nextTag, - __emotion_styles: styles - })() + return createStyled(nextTag, options)(styles) } return Styled