Spec for comparison component

mxstbr commented 7 years ago

We need a common component with the exact same behaviour. It needs to be:

Responsive (e.g. via media queries)
Animated (what about react-motion and libs like that, does that count?)
Have a part that has to differentiate between active, hover, selected,…
Multiple nested components that share a theme variable (e.g. primary colour)
Overridable styles

mxstbr commented 7 years ago

@nikgraf has been thinking about making it a NavBar component, what do you think @JedWatson @jossmac? That fulfills the above criteria quite well with dropdowns.

jossmac commented 7 years ago

There's a lot of variables in a component like that. Wouldn't you start with something simpler and easier to measure, like a Button or Input?

mxstbr commented 7 years ago

Those are too simple I think, we'd balloon them with features that nobody needs and it's not a valid comparison. I kinda agree that a NavBar might be too complex, but Button and Input are too simple. Something in the middle…

JedWatson commented 7 years ago

:+1:

I'd add some requirements from the perspective of developing generic components:

Multiple nested components that share a theme variable (e.g. primary colour)
Overridable styles

NavBar might be a bit much but it could demonstrate these pretty well. Another option is a simple calendar UI mockup (has the component, a header, days, and buttons. we could animate scrolling left/right between months)

JedWatson commented 7 years ago

Should also demonstrate how conditional styles are applied in JS (props.isSelected) vs. CSS (:hover). Pseudo style support is important, and different frameworks handle the className prop differently (e.g. Aphrodite doesn't support the classnames package)

mxstbr commented 7 years ago

The problem is that theming isn't css-methodology specific. You can do theming via context, via props, via a global variable, via whatever but that doesn't have to mean it's specific to that one thing.

JedWatson commented 7 years ago

It would be good to include though; for example Aphrodite, Radium and Vanilla inline style all support runtime style generation (so having the theme in context is an option) whereas JSS doesn't (but you can still require theme variables in your JS). css-modules means applying variables at build time (I think, haven't worked with postCSS before)

jossmac commented 7 years ago

Aphrodite doesn't support the classnames package

@JedWatson how do you mean? Here's an example from a commercial project:

const componentClassname = classnames(css(classes.button), {
  [css(classes['kind__' + kind])]: kind,
  [css(classes['mode__' + mode])]: mode,
  [css(classes['size__' + size])]: size,
}, className)

JedWatson commented 7 years ago

@jossmac see Khan/aphrodite#114

MicheleBertoli commented 7 years ago

hello everyone, I've started this repo last year: https://github.com/MicheleBertoli/css-in-js

I'll be happy to contribute here if you need any help.

mxstbr commented 7 years ago

Damn son, that's awesome @MicheleBertoli! Maybe we don't need to do this after all, taking a look! How have I not seen this before??

EDIT: Oh wait, I have it starred… 🙊

JedWatson commented 7 years ago

@MicheleBertoli that is awesome. I'm going to add a link in our Readme to your repo as the exhaustive reference. Would love to have your help with what we're doing here, if you want to join the org I'll add you?

@mxstbr I think this is still worth pursuing to do a deeper dive on less frameworks to establish how well each deals with the requirements we're laying out in the spec repo ..?

MicheleBertoli commented 7 years ago

thanks @mxstbr @JedWatson I would love to join the org and I'll be more than happy to help.

mxstbr commented 7 years ago

Awesome! Figuring out what component we want to present and with which frameworks will be the most important thing for now…

mxstbr commented 7 years ago

It would be good to include though; for example Aphrodite, Radium and Vanilla inline style all support runtime style generation (so having the theme in context is an option) whereas JSS doesn't (but you can still require theme variables in your JS). css-modules means applying variables at build time (I think, haven't worked with postCSS before)

You're right, let's create a component with some base styling that's overridden with theming. I still kinda like a NavBar but I could be convinced of something else if somebody has a better idea?

JedWatson commented 7 years ago

What about a vertical navigation stack? I think something about the horizontal size of a navbar is putting me off. Like this one from GitHub's primer framework (styled differently of course)

Hits our requirements for multiple components, usage of :hover and props.isSelected, and we could stack multiple instances of it horizontally with different props (e.g. different theme / styles)

mxstbr commented 7 years ago

No animations
No media queries?

MicheleBertoli commented 7 years ago

+1 a NavBar seems to have all the requirements.

another solution would be to copy an existing piece of UI from a popular website. for example a tweet from mobile.twitter.com

pros:

it matches all the requirements (pseudo-classes, media queries, animations, and themes)
we don't need design/mockups
it's a real world example
it's familiar to people

mxstbr commented 7 years ago

I love that idea @MicheleBertoli! I looked at the mobile twitter ones but they don't have any animation for me – I took a look at the main twitter.com ones and they even give you the markup when you embed it:

<div data-twitter-event-id="0" class="SandboxRoot env-bp-350" style="position: relative;"><div class="EmbeddedTweet EmbeddedTweet--mediaForward media-forward js-clickToOpenTarget js-tweetIdInfo" data-click-to-open-target="https://twitter.com/mxstbr/status/732833839140229120" data-iframe-title="Twitter Tweet" data-dt-full="%{hours12}:%{minutes} %{amPm} - %{day} %{month} %{year}" data-dt-months="Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec" data-dt-am="AM" data-dt-pm="PM" data-dt-now="now" data-dt-s="s" data-dt-m="m" data-dt-h="h" data-dt-second="second" data-dt-seconds="seconds" data-dt-minute="minute" data-dt-minutes="minutes" data-dt-hour="hour" data-dt-hours="hours" data-dt-abbr="%{number}%{symbol}" data-dt-short="%{day} %{month}" data-dt-long="%{day} %{month} %{year}" data-scribe="page:tweet" data-tweet-id="732833839140229120" id="twitter-widget-0" lang="en" data-twitter-event-id="1">

<article class="MediaCard
           MediaCard--mediaForward

           customisable-border" data-scribe="component:card" dir="ltr">
  <div class="MediaCard-media">

<a class="MediaCard-borderOverlay" href="http://twitter.com/mxstbr/status/732833839140229120/photo/1" role="presentation" tabindex="-1" title="View image on Twitter">
  <span class="u-hiddenVisually">View image on Twitter</span>
</a>

    <div class="MediaCard-widthConstraint js-cspForcedStyle" style="max-width: 600px" data-style="max-width: 600px">
      <div class="MediaCard-mediaContainer js-cspForcedStyle" style="padding-bottom: 29.0000%" data-style="padding-bottom: 29.0000%">
          <a class="MediaCard-mediaAsset
                    NaturalImage
" href="http://twitter.com/mxstbr/status/732833839140229120/photo/1" data-scribe="element:photo"><img class="NaturalImage-image" data-srcset="https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FCiuMfh6WUAAN4cM.jpg%3Alarge 1024w,https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FCiuMfh6WUAAN4cM.jpg 600w,https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FCiuMfh6WUAAN4cM.jpg%3Asmall 340w" width="600" height="174" title="View image on Twitter" alt="View image on Twitter" src="https://pbs.twimg.com/media/CiuMfh6WUAAN4cM.jpg:large"></a>
      </div>
    </div>
  </div>
</article>

    <div class="EmbeddedTweet-tweet">
<blockquote class="Tweet h-entry js-tweetIdInfo subject expanded
                   is-deciderHtmlWhitespace" cite="https://twitter.com/mxstbr/status/732833839140229120" data-tweet-id="732833839140229120" data-scribe="section:subject">
  <div class="Tweet-header u-cf">
    <div class="Tweet-brand u-floatRight">
      <span class="u-hiddenInNarrowEnv">
<a class="FollowButton follow-button profile" data-scribe="component:followbutton" href="https://twitter.com/mxstbr" role="button" title="Follow Max Stoiber on Twitter"><span class="FollowButton-bird"><div class="Icon Icon--twitter " aria-label="" title="" role="presentation"></div></span> Follow</a>
</span>
      <span class="u-hiddenInWideEnv"><a href="https://twitter.com/download" data-scribe="element:logo"><div class="Icon Icon--twitter " aria-label="Get Twitter app" title="Get Twitter app" role="img"></div></a></span>
    </div>

<div class="TweetAuthor" data-scribe="component:author">
  <a class="TweetAuthor-link Identity u-linkBlend" data-scribe="element:user_link" href="https://twitter.com/mxstbr" aria-label="Max Stoiber (screen name: mxstbr)">
    <span class="TweetAuthor-avatar Identity-avatar">
      <img class="Avatar" data-scribe="element:avatar" data-src-2x="https://pbs.twimg.com/profile_images/681114454029942784/PwhopfmU_bigger.jpg" alt="" data-src-1x="https://pbs.twimg.com/profile_images/681114454029942784/PwhopfmU_normal.jpg" src="https://pbs.twimg.com/profile_images/681114454029942784/PwhopfmU_bigger.jpg">
    </span>
    <span class="TweetAuthor-name Identity-name customisable-highlight" title="Max Stoiber" data-scribe="element:name">Max Stoiber</span>

    <span class="TweetAuthor-screenName Identity-screenName" title="@mxstbr" data-scribe="element:screen_name" dir="ltr">@mxstbr</span>
  </a>
</div>

  </div>

  <div class="Tweet-body e-entry-content" data-scribe="component:tweet">
    <p class="Tweet-text e-entry-title" lang="en" dir="ltr"><img class="Emoji Emoji--forText" src="https://abs.twimg.com/emoji/v2/72x72/1f389.png" draggable="false" alt="🎉" title="Party popper" aria-label="Emoji: Party popper"> I'm super excited to announce react-boilerplate v3, the result of several months' work!<a href="https://t.co/y0VjqRujax" rel="nofollow" dir="ltr" data-expanded-url="https://github.com/mxstbr/react-boilerplate" class="link customisable" target="_blank" title="https://github.com/mxstbr/react-boilerplate" data-scribe="element:url"><span class="u-hiddenVisually">https://</span>github.com/mxstbr/react-b<span class="u-hiddenVisually">oilerplate&nbsp;</span>…</a> </p>

    <div class="Tweet-metadata dateline">

<a class="u-linkBlend u-url customisable-highlight long-permalink" data-datetime="2016-05-18T07:22:57+0000" data-scribe="element:full_timestamp" href="https://twitter.com/mxstbr/status/732833839140229120">

<time class="dt-updated" datetime="2016-05-18T07:22:57+0000" pubdate="" title="Time posted: 18 May 2016, 07:22:57 (UTC)">9:22 AM - 18 May 2016</time></a>
    </div>

    <ul class="Tweet-actions" data-scribe="component:actions" role="menu" aria-label="Tweet actions">
      <li class="Tweet-action">
<a class="TweetAction TweetAction--reply web-intent" href="https://twitter.com/intent/tweet?in_reply_to=732833839140229120" data-scribe="element:reply"><div class="Icon Icon--reply TweetAction-icon" aria-label="Reply" title="Reply" role="img"></div></a></li>
      <li class="Tweet-action">
<a class="TweetAction TweetAction--retweet web-intent" href="https://twitter.com/intent/retweet?tweet_id=732833839140229120" data-scribe="element:retweet"><div class="Icon Icon--retweet TweetAction-icon" aria-label="Retweet" title="Retweet" role="img"></div>    <span class="TweetAction-stat" data-scribe="element:retweet_count" aria-hidden="true">229</span>
    <span class="u-hiddenVisually">229 Retweets</span>
</a></li>
      <li class="Tweet-action">
<a class="TweetAction TweetAction--heart web-intent" href="https://twitter.com/intent/like?tweet_id=732833839140229120" data-scribe="element:heart"><div class="Icon Icon--heart TweetAction-icon" aria-label="Like" title="Like" role="img"></div>    <span class="TweetAction-stat" data-scribe="element:heart_count" aria-hidden="true">544</span>
    <span class="u-hiddenVisually">544 likes</span>
</a></li>
    </ul>
  </div>
</blockquote>
</div>
  </div><div class="resize-sensor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; z-index: -1; visibility: hidden;"><div class="resize-sensor-expand" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;"><div style="position: absolute; left: 0px; top: 0px; transition: 0s; width: 510px; height: 334px;"></div></div><div class="resize-sensor-shrink" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;"><div style="position: absolute; left: 0; top: 0; transition: 0s; width: 200%; height: 200%"></div></div></div></div>

Looks quite complex 😁 (ref: http://jsbin.com/rinedisixa/edit?output)

MicheleBertoli commented 7 years ago

thanks @mxstbr

they've got a pretty cool animation on the heart icon: twitter (not sure if that's what you had in mind)

their snippet looks pretty messy, you are right. we could rewrite/simplify it if we like the idea.

mxstbr commented 7 years ago

Ah yeah I didn't see that, that's pretty good for me then! We don't necessarily have to use their markup since we don't care about browser support etc., so this sounds like a great idea to me!

Do you want to champion the first implementation? (with whatever methodology you want to use…)

MicheleBertoli commented 7 years ago

sure, if everyone is ok with the Twitter solution I will start implementing it with CSS Modules.

did we already agree on the structure (#3)? are there any style guides to follow?

mxstbr commented 7 years ago

Yeah that sounds ace!

did we already agree on the structure (#3)? are there any style guides to follow?

Neither, I'm assuming there'll be some common build files maybe or text or something, but I'm sure you can figure that out! We definitely need child components and that sort of thing, but we can discuss about different architectures when we have a WIP PR 👍

geelen commented 7 years ago

The tweet card is a nice idea, because as a UI it also has to handle embedding a bunch of different media objects within. I'm going to start on my weird little idea with this tweet https://mobile.twitter.com/mxstbr/status/755481795206971392 because it has an image, emoji, and links in the tweet. Also, 10/10 for relevance :)

mxstbr commented 7 years ago

I'm a fan of that tweet too @geelen! Incredible luck that you picked one we both adore out of the millions out there, wow! 👏

mxstbr commented 7 years ago

Closing this since this is pretty much done?

styled-components / comparison

Spec for comparison component #3