implement header component #15
Conversation
lesnitsky
force-pushed
the
feature/header-component
branch
from
63387a2
to
8a04ed1
Compare
.gitignore
Outdated
| @@ -2,3 +2,4 @@ node_modules | |||
| npm-debug.log | |||
| .idea/ | |||
| .DS_Store | |||
| yarn.lock | |||
There was a problem hiding this comment.
Why? I'd rather not hide the "mistakes" (and using yarn is a mistake :) )
| @@ -21,9 +21,11 @@ | |||
| }, | |||
| "homepage": "https://github.com/21-23/cssqd-ui#readme", | |||
| "dependencies": { | |||
| "preact": "^8.2.5" | |||
| "preact": "^8.2.5", | |||
| "react-fontawesome": "^1.6.1" | |||
There was a problem hiding this comment.
Not critical for now, but just curious: can we engage it with 21-23/_qd-ui#42 ?
There was a problem hiding this comment.
I'd say addressing 21-23/_qd-ui#42 will require too much effort, so let's postpone it
| <Header | ||
| productName={text('productName', 'CSS Quickdraw')} | ||
| username={text('username', 'username')} | ||
| style={{ |
There was a problem hiding this comment.
Perhaps background could be set in the component style, so that Headers are configured with a bgUrl prop. On the other hand, there's apparent semantic distinction between "style" and "data props". Still there is no default background (and it doesn't make sense to have one), background is not optional so I wouldn't say it's styling or customization... 🤔
There was a problem hiding this comment.
We can try to make background b&w image and customize color with CSS (have no idea on top of my head right now how to do this)
There was a problem hiding this comment.
There was a problem hiding this comment.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode - no IE support :(
There was a problem hiding this comment.
I'd drop IE support completely...
There was a problem hiding this comment.
Multiple backgrounds then maybe
There was a problem hiding this comment.
Just to clarify, are you guys ok with style prop being passed down to header or you think bgUrl prop will be more verbose? I'd say having ability to passstyle object has a benefit as you can override several background related properties alongside with changing backgroundUrl. As an example you might want to change background position/cover/attachment with different images
There was a problem hiding this comment.
I’d go with more strict ‘bgUrl’. Right now there’re no cases for overriding smth more than image
lesnitsky
force-pushed
the
feature/header-component
branch
from
9e38629
to
d7174e3
Compare
Closes #2