Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support for as utility in attrs #2055

Merged
merged 2 commits into from Oct 4, 2018
Merged

Support for as utility in attrs #2055

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2fa9250
As prop in attrs support
imbhargav5 Oct 4, 2018
3ee0f10
Add changelog
imbhargav5 Oct 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Expand Up @@ -6,6 +6,8 @@ _The format is based on [Keep a Changelog](http://keepachangelog.com/) and this

## Unreleased

- Add support for `as` to be used with `attrs` for better polymorphism, by [@imbhargav5](https://github.com/imbhargav5) (see [#2055](https://github.com/styled-components/styled-components/pull/2055))

- Fix `withTheme` HOC to use a theme defined in `defaultProps` of the wrapped component, by [@theboyWhoCriedWoolf](https://github.com/theboyWhoCriedWoolf) (see [#2033](https://github.com/styled-components/styled-components/pull/2033))

- Add `enzymeFind` test utility to easily grab instances of a styled-component from enyzme mounted testing scenarios, by [@probablyup](https://github.com/probablyup) (see [#2049](https://github.com/styled-components/styled-components/pull/2049))
Expand Down
6 changes: 3 additions & 3 deletions src/models/StyledComponent.js
View file
Open in desktop
Expand Up @@ -75,8 +75,6 @@ class StyledComponent extends Component<*> {
renderInner(theme?: Theme) {
const { componentStyle, defaultProps, styledComponentId, target } = this.props.forwardedClass;

const isTargetTag = isTag(this.props.as || target);

let generatedClassName;
if (componentStyle.isStatic) {
generatedClassName = this.generateAndInjectStyles(EMPTY_OBJECT, this.props, this.styleSheet);
Expand All @@ -93,6 +91,8 @@ class StyledComponent extends Component<*> {
this.styleSheet
);
}
const elementToBeCreated = this.props.as || this.attrs.as || target;
const isTargetTag = isTag(elementToBeCreated);

const propsForElement: Object = { ...this.attrs };

Expand Down Expand Up @@ -123,7 +123,7 @@ class StyledComponent extends Component<*> {
.filter(Boolean)
.join(' ');

return createElement(this.props.as || target, propsForElement);
return createElement(elementToBeCreated, propsForElement);
}

buildExecutionContext(theme: any, props: any, attrs: any) {
Expand Down
14 changes: 14 additions & 0 deletions src/test/__snapshots__/expanded-api.test.js.snap
View file
Open in desktop
Expand Up @@ -6,6 +6,20 @@ exports[`expanded api "as" prop changes the rendered element type 1`] = `
/>
`;

exports[`expanded api "as" prop changes the rendered element type when used with attrs 1`] = `
<header
as="header"
className="sc-a b"
/>
`;

exports[`expanded api "as" prop prefers prop over attrs 1`] = `
<span
as="header"
className="sc-a b"
/>
`;

exports[`expanded api "as" prop transfers all styles that have been applied 1`] = `"styled.div"`;

exports[`expanded api "as" prop transfers all styles that have been applied 2`] = `"Styled(styled.div)"`;
Expand Down
20 changes: 20 additions & 0 deletions src/test/expanded-api.test.js
View file
Open in desktop
Expand Up @@ -113,6 +113,26 @@ describe('expanded api', () => {
expect(TestRenderer.create(<Comp as="span" />).toJSON()).toMatchSnapshot();
});

it('changes the rendered element type when used with attrs', () => {
const Comp = styled.div.attrs({
as: 'header',
})`
color: red;
`;

expect(TestRenderer.create(<Comp />).toJSON()).toMatchSnapshot();
});

it('prefers prop over attrs', () => {
const Comp = styled.div.attrs({
as: 'header',
})`
color: red;
`;

expect(TestRenderer.create(<Comp as="span" />).toJSON()).toMatchSnapshot();
});

it('works with custom components', () => {
const Override = props => <figure {...props} />;
const Comp = styled.div`
Expand Down
91 changes: 16 additions & 75 deletions yarn.lock
View file
Open in desktop
Expand Up @@ -8,18 +8,12 @@
dependencies:
"@babel/highlight" "7.0.0-beta.47"

"@babel/code-frame@^7.0.0":
"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.0.0-beta.35":
version "7.0.0"
resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz#06e2ab19bdb535385559aabb5ba59729482800f8"
dependencies:
"@babel/highlight" "^7.0.0"

"@babel/code-frame@^7.0.0-beta.35":
version "7.0.0-rc.1"
resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-rc.1.tgz#5c2154415d6c09959a71845ef519d11157e95d10"
dependencies:
"@babel/highlight" "7.0.0-rc.1"

"@babel/core@7.0.0-beta.47":
version "7.0.0-beta.47"
resolved "https://registry.npmjs.org/@babel/core/-/core-7.0.0-beta.47.tgz#b9c164fb9a1e1083f067c236a9da1d7a7d759271"
Expand Down Expand Up @@ -241,14 +235,6 @@
esutils "^2.0.2"
js-tokens "^3.0.0"

"@babel/highlight@7.0.0-rc.1":
version "7.0.0-rc.1"
resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-rc.1.tgz#e0ca4731fa4786f7b9500421d6ff5e5a7753e81e"
dependencies:
chalk "^2.0.0"
esutils "^2.0.2"
js-tokens "^3.0.0"

"@babel/highlight@^7.0.0":
version "7.0.0"
resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0.tgz#f710c38c8d458e6dd9a201afb637fcb781ce99e4"
Expand Down Expand Up @@ -627,11 +613,7 @@ acorn-jsx@^4.1.1:
dependencies:
acorn "^5.0.3"

acorn@^5.0.0, acorn@^5.5.3:
version "5.7.1"
resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.1.tgz#f095829297706a7c9776958c0afc8930a9b9d9d8"

acorn@^5.0.3, acorn@^5.6.0:
acorn@^5.0.0, acorn@^5.0.3, acorn@^5.5.3, acorn@^5.6.0:
version "5.7.3"
resolved "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"

Expand Down Expand Up @@ -2047,10 +2029,6 @@ ci-env@^1.4.0:
version "1.6.1"
resolved "https://registry.yarnpkg.com/ci-env/-/ci-env-1.6.1.tgz#3e3ef4fc528a2825397f912cfa30cde17ec364cc"

ci-info@^1.0.0:
version "1.1.3"
resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.1.3.tgz#710193264bb05c77b8c90d02f5aaf22216a667b2"

ci-info@^1.5.0:
version "1.6.0"
resolved "https://registry.npmjs.org/ci-info/-/ci-info-1.6.0.tgz#2ca20dbb9ceb32d4524a683303313f0304b1e497"
Expand Down Expand Up @@ -2245,13 +2223,7 @@ content-type@~1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"

convert-source-map@^1.1.0:
version "1.6.0"
resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
dependencies:
safe-buffer "~5.1.1"

convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1:
convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"

Expand Down Expand Up @@ -3083,14 +3055,10 @@ extract-zip@^1.6.6:
mkdirp "0.5.1"
yauzl "2.4.1"

extsprintf@1.3.0:
extsprintf@1.3.0, extsprintf@^1.2.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"

extsprintf@^1.2.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"

fancy-log@^1.3.2:
version "1.3.2"
resolved "https://registry.npmjs.org/fancy-log/-/fancy-log-1.3.2.tgz#f41125e3d84f2e7d89a43d06d958c8f78be16be1"
Expand Down Expand Up @@ -3726,13 +3694,7 @@ iconv-lite@0.4.19:
version "0.4.19"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"

iconv-lite@^0.4.17, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
version "0.4.23"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
dependencies:
safer-buffer ">= 2.1.2 < 3"

iconv-lite@^0.4.24:
iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
version "0.4.24"
resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
dependencies:
Expand Down Expand Up @@ -3899,13 +3861,7 @@ is-callable@^1.1.1, is-callable@^1.1.3:
version "1.1.4"
resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"

is-ci@^1.0.10:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.1.0.tgz#247e4162e7860cebbdaf30b774d6b0ac7dcfe7a5"
dependencies:
ci-info "^1.0.0"

is-ci@^1.2.1:
is-ci@^1.0.10, is-ci@^1.2.1:
version "1.2.1"
resolved "https://registry.npmjs.org/is-ci/-/is-ci-1.2.1.tgz#e3779c8ee17fccf428488f6e281187f2e632841c"
dependencies:
Expand Down Expand Up @@ -5263,18 +5219,14 @@ minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4:
dependencies:
brace-expansion "^1.1.7"

minimist@0.0.8:
minimist@0.0.8, minimist@~0.0.1:
version "0.0.8"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"

minimist@^1.1.1, minimist@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"

minimist@~0.0.1:
version "0.0.10"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"

minipass@^2.2.1, minipass@^2.3.3:
version "2.3.4"
resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.4.tgz#4768d7605ed6194d6d576169b9e12ef71e9d9957"
Expand Down Expand Up @@ -6728,20 +6680,13 @@ rollup-pluginutils@^1.5.0, rollup-pluginutils@^1.5.1:
estree-walker "^0.2.1"
minimatch "^3.0.2"

rollup-pluginutils@^2.0.1:
rollup-pluginutils@^2.0.1, rollup-pluginutils@^2.3.1:
version "2.3.1"
resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.3.1.tgz#760d185ccc237dedc12d7ae48c6bcd127b4892d0"
dependencies:
estree-walker "^0.5.2"
micromatch "^2.3.11"

rollup-pluginutils@^2.3.1:
version "2.3.3"
resolved "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.3.3.tgz#3aad9b1eb3e7fe8262820818840bf091e5ae6794"
dependencies:
estree-walker "^0.5.2"
micromatch "^2.3.11"

rollup@^0.66.2:
version "0.66.2"
resolved "https://registry.npmjs.org/rollup/-/rollup-0.66.2.tgz#77acdb9f4093f5f035ce75480577c40a81ea7999"
Expand Down Expand Up @@ -6836,14 +6781,14 @@ semver-diff@^2.0.0:
dependencies:
semver "^5.0.3"

"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"

semver@5.x, semver@^5.5.1:
"semver@2 || 3 || 4 || 5", semver@5.x, semver@^5.0.3, semver@^5.1.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1:
version "5.5.1"
resolved "https://registry.npmjs.org/semver/-/semver-5.5.1.tgz#7dfdd8814bdb7cabc7be0fb1d734cfb66c940477"

semver@^5.3.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"

semver@~5.3.0:
version "5.3.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
Expand Down Expand Up @@ -7134,18 +7079,14 @@ static-extend@^0.1.1:
define-property "^0.2.5"
object-copy "^0.1.0"

"statuses@>= 1.3.1 < 2", "statuses@>= 1.4.0 < 2":
version "1.5.0"
resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
"statuses@>= 1.3.1 < 2", "statuses@>= 1.4.0 < 2", statuses@~1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"

statuses@~1.3.1:
version "1.3.1"
resolved "https://registry.npmjs.org/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"

statuses@~1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"

stealthy-require@^1.1.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
Expand Down