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.

Sign up for GitHub

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

Components: Add Card Component #17963

Merged
merged 47 commits into from
Nov 13, 2019
Merged

Components: Add Card Component #17963

Show file tree
Hide file tree
Changes from 31 commits
Commits
Show all changes
47 commits
Select commit Hold shift + click to select a range
ce0a22a
Add styled-components, hex-rgb, and storybook knobs
Oct 11, 2019
643d02f
Add styled-components and hex-rgb to wordpress/components dependencies
Oct 11, 2019
c867811
Implement Storybook knobs addon
Oct 11, 2019
93be05a
Add color utilities
Oct 11, 2019
90a1bcf
Create Card component + sub components, and add initial stories
Oct 11, 2019
66a869a
Export the new Card component
Oct 11, 2019
20fcdfd
Improve default, context, and prop merging for Card sub-components
Oct 11, 2019
3963db1
Refactor Card components + sub-components, and add tests
Oct 15, 2019
329218b
Fix typos in card test
Oct 15, 2019
45a1f31
Refactor Card stories
Oct 15, 2019
504169f
Add Card Header to export
Oct 15, 2019
6324887
Add README content for Card component
Oct 15, 2019
084a1e2
Add updated manifest-devhub.json autogenerated doc file
Oct 15, 2019
e93de65
Update Card README for context overrides
Oct 15, 2019
05f27c1
Merge branch 'master' into add/card-component
Oct 15, 2019
7441e2e
Remove unused fragment from Card stories
Oct 15, 2019
0ec36f1
Merge branch 'master' into add/card-component
Oct 16, 2019
96ff8bd
Update size prop values for Card components
Oct 16, 2019
4534ed4
Fix typo for Card docs
Oct 16, 2019
efe6ea8
Fix size values in storybook knob props
Oct 16, 2019
6ebe575
Simplify implementation of CardContext.Provider
Oct 16, 2019
bfde122
Remove duplicate addDecorator withKnobs
Oct 16, 2019
1d24ec9
Merge branch 'master' into add/card-component
Oct 17, 2019
a8bd44f
Remove prettier comment + fix size values in readme files
Oct 17, 2019
9876eba
Change `hex-rgb` dependency from `4.1.0` to `^4.1.0`
Oct 17, 2019
468097e
Revert "Change `hex-rgb` dependency from `4.1.0` to `^4.1.0`"
Oct 17, 2019
7df0507
Change `hex-rgb` dependency from `4.1.0` to `^4.1.0`
Oct 17, 2019
3378c86
Rename __utils.js file to _utils.js
Oct 17, 2019
599324e
Rename colors.values.js -> colors-values.js (hyphen)
Oct 17, 2019
287b48e
Refactor Card sub-components to use BEM classNames
Oct 17, 2019
1fe7528
Fix typo + description of size + variant in sub-component documentation
Oct 17, 2019
af39009
Merge branch 'master' into add/card-component
Oct 22, 2019
23fbe54
Add story example for horizontally aligned media
Oct 22, 2019
32ae38a
Use HorizontalRule primitive in CardDivider
Oct 22, 2019
3e596fd
Merge branch 'master' into add/card-component
Oct 23, 2019
9d26f28
Update Card component API
Oct 23, 2019
0cca7bc
Merge branch 'master' into add/card-component
Oct 28, 2019
b9f852d
Merge branch 'master' into add/card-component
Nov 1, 2019
4ae4dcb
Merge branch 'master' into add/card-component
Nov 7, 2019
344e8b0
Merge branch 'master' into add/card-component
Nov 12, 2019
bb54a62
Replace styled-components with emotion
Nov 12, 2019
f40a890
Change first-child -> first-of-type to resolve emotion warnings
Nov 12, 2019
ca8aad4
Fix @emotion dependencies for root package-lock.json
Nov 12, 2019
8559de5
Update dependencies in package-lock.json
Nov 12, 2019
ca80cd2
Merge branch 'master' into add/card-component
Nov 12, 2019
66b4421
Fixed babelrc
Nov 13, 2019
dbe16a2
Fix whitespacing (use tabs) for babelrc
Nov 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions docs/manifest-devhub.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -599,6 +599,12 @@
"markdown_source": "../packages/components/src/button/README.md",
"parent": "components"
},
{
"title": "Card",
"slug": "card",
"markdown_source": "../packages/components/src/card/README.md",
"parent": "components"
},
{
"title": "CheckboxControl",
"slug": "checkbox-control",
Expand Down
136 changes: 103 additions & 33 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions packages/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"classnames": "^2.2.5",
"clipboard": "^2.0.1",
"dom-scroll-into-view": "^1.2.1",
"hex-rgb": "^4.1.0",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hex-rgb uses modern JavaScript (const, let, etc.) and is not transpiled to be able to run in older browsers.

tl;dr: Including this library has broken the editor in Internet Explorer.

Apparently this is an intentional choice on their part: sindresorhus/hex-rgb#10 (comment)

This module mainly targets Node.js, not the browser. It's up to you to transpile it with Babel if you want to use it in the browser.

If it's something we plan to use, it would need to be transpiled as well. I don't recall having had to deal with this for any other dependencies, and it would probably require some work to adapt into our build tooling.

Copy link
Contributor

@jameslnewell jameslnewell Nov 22, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch! Long term I think its probably good idea to support this in our tooling just as CRA, Parcel and other tools in the JavaScript ecosystem have done. Switching to polished's parseToRgb or similar fn might be a quick fix.

Edit: I'm working on the quick fix now
Edit: The quick fix is here #18681

Copy link
Contributor

@jameslnewell jameslnewell Nov 22, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

btw, thinking about the longer-term fix, I saw this on Twitter the other day and it seems that not compiling (or only compiling so-far) is closer to becoming a defacto standard (yay for smaller bundle sizes for apps only supporting modern browsers!).

https://twitter.com/_developit/status/1196393947989512193

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR for updating the build tooling #18798

"lodash": "^4.17.15",
"memize": "^1.0.5",
"moment": "^2.22.1",
Expand All @@ -43,6 +44,7 @@
"react-dates": "^17.1.1",
"react-spring": "^8.0.20",
"rememo": "^3.0.0",
"styled-components": "^4.4.0",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you know if this has any noticeable impact on bundle size?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not tiny, but it's not terribly large either (e.g. moment.js)

It's currently at:
45.1kb, minified
16.4kb, minified + gzipped

https://bundlephobia.com/[email protected]

The team is reducing the library size by a lot (and making it faster) in v5:
https://medium.com/styled-components/announcing-styled-components-v5-beast-mode-389747abd987

One of the requirements is that you must be using React 16.8, for hook support. Thankfully, it looks like Gutenberg + @wordpress/components does :)

"tinycolor2": "^1.4.1",
"uuid": "^3.3.2"
},
Expand Down
Loading