Utility classes for media and row (#1213)

Utility classes for media and row

react/Media/Media.md → react/Media/Readme.md

@@ -1,5 +1,6 @@
-The mighty Media object. Also known as Flag. Used to align vertically
-objects. 
+The mighty Media object. Also known as Flag. Used to horizontally align
+objects. Utility classes are also available and are preferred since they
+prevent nesting.
 
 * `<Bd />` tries to take the space available
 * `<Img />` is as small as possible

react/Media/styles.styl

@@ -1,17 +1,16 @@
+@require '../../stylus/objects/media'
+
 .media
-    display flex
-    align-items center
+    @extend $media
 
 .media--top
-    align-items flex-start
+    @extend $media--top
 
 .media--bottom
-    align-items flex-end
+    @extend $media--bottom
 
 .bd
-    flex 1 1 auto
-    overflow hidden
+    @extend $media__grow
 
 .img
-    line-height 0
-    flex 0 0 auto
+    @extend $media__fixed

react/__snapshots__/examples.spec.jsx.snap

@@ -3321,6 +3321,33 @@ exports[`ListItemText should render examples: ListItemText 3`] = `
 </div>"
 `;
 
+exports[`Media should render examples: Media 1`] = `
+"<div>
+  <div class=\\"styles__media___cSJMp\\">
+    <div class=\\"styles__img___3SHpG\\"><img src=\\"http://lorempixel.com/90/90/people\\" style=\\"margin-right: 1rem;\\"></div>
+    <div class=\\"styles__bd___1Uv-F\\">Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation, and published the first algorithm intended to be carried out by such a machine. As a result, she is often regarded as the first to recognise the full potential of a \\"computing machine\\" and the first computer programmer.</div>
+  </div>
+</div>"
+`;
+
+exports[`Media should render examples: Media 2`] = `
+"<div>
+  <div class=\\"styles__media___cSJMp styles__media--top___K9w0I\\">
+    <div class=\\"styles__img___3SHpG\\"><img src=\\"http://lorempixel.com/90/90/people\\" style=\\"margin-right: 1rem;\\"></div>
+    <div class=\\"styles__bd___1Uv-F\\">Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation, and published the first algorithm intended to be carried out by such a machine. As a result, she is often regarded as the first to recognise the full potential of a \\"computing machine\\" and the first computer programmer.</div>
+  </div>
+</div>"
+`;
+
+exports[`Media should render examples: Media 3`] = `
+"<div>
+  <div class=\\"styles__media___cSJMp styles__media--bottom___21YWJ\\">
+    <div class=\\"styles__img___3SHpG\\"><img src=\\"http://lorempixel.com/90/90/people\\" style=\\"margin-right: 1rem;\\"></div>
+    <div class=\\"styles__bd___1Uv-F\\">Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation, and published the first algorithm intended to be carried out by such a machine. As a result, she is often regarded as the first to recognise the full potential of a \\"computing machine\\" and the first computer programmer.</div>
+  </div>
+</div>"
+`;
+
 exports[`Menu should render examples: Menu 1`] = `
 "<div>
   <div class=\\"styles__c-menu___2YTiU styles__c-menu--left___3wamY\\" id=\\"menu\\"><button role=\\"button\\" class=\\"c-btn styles__c-menu__btn___18qF8\\">Click me !</button>

react/examples.spec.jsx

@@ -37,6 +37,7 @@ testComponent('InlineCard')
 testComponent('InputGroup')
 testComponent('Label')
 testComponent('ListItemText')
+testComponent('Media')
 testComponent('Menu')
 testComponent('Radio')
 testComponent('SelectBox')

stylus/objects/media.styl

@@ -0,0 +1,17 @@
+$media
+    display flex
+    align-items center
+
+$media--top
+    align-items flex-start
+
+$media--bottom
+    align-items flex-end
+
+$media__grow
+    flex 1 1 auto
+    overflow hidden
+
+$media__fixed
+    line-height 0
+    flex 0 0 auto

stylus/utilities/media.styl

@@ -0,0 +1,8 @@
+@require '../tools/mixins'
+@require '../objects/media'
+
+global('.u-media', $media)
+global('.u-media-top', $media--top)
+global('.u-media-bottom', $media--bottom)
+global('.u-media-grow', $media__grow)
+global('.u-media-fixed', $media__fixed)

stylus/utilities/spaces.styl

@@ -23,9 +23,9 @@ sizes = {
 // These are the values used by the design team, they should used
 // instead of the `sizes` variable above that is only kept for retro-compatibility
 spacing_values = {
+    m: 1rem, // the standard, no modifier needed
     xs: .5rem,
     s: .75rem,
-    m: 1rem, // the standard, no modifier needed
     l: 1.5rem,
     xl: 2rem
     xxl: 3rem

stylus/utilities/stack.styl

@@ -8,3 +8,12 @@ else
     for k, v in spacing_values
         .u-stack-{k} > * + *
             margin-top v[0]
+
+if cssmodules == true
+    for k, v in spacing_values
+        :global(.u-row-{k} > * + *)
+            margin-left v[0]
+else
+    for k, v in spacing_values
+        .u-row-{k} > * + *
+            margin-left v[0]