Merge pull request #146 from dani-cl-madrid/fix/CHI-134-Update-grid-a…

…lignment-notation [CHI-134] Update grid alignment notation
CenturyLinkCloud · Oct 26, 2018 · 5815321 · 5815321
2 parents 4762c73 + 5cb3726
commit 5815321
Show file tree

Hide file tree

Showing 11 changed files with 119 additions and 56 deletions.
diff --git a/src/chi/components/buttons/button-groups.scss b/src/chi/components/buttons/button-groups.scss
@@ -15,13 +15,22 @@
           flex: 0 0 auto;
         }
 
+        &.-align--left {
+          justify-content: flex-start;
+        }
+
+        &.-align--right {
+          justify-content: flex-end;
+        }
+        // Legacy code start
         &.-alignLeft {
           justify-content: flex-start;
         }
 
         &.-alignRight {
           justify-content: flex-end;
         }
+        // Legacy code end
       }
     }
   }

diff --git a/src/chi/components/card/card.scss b/src/chi/components/card/card.scss
@@ -39,6 +39,19 @@
       padding: 1rem;
       position: relative;
 
+      &.-align--left {
+        justify-content: flex-start;
+      }
+
+      &.-align--right {
+        justify-content: flex-end;
+      }
+
+      &.-align--center {
+        justify-content: center;
+      }
+
+      // Legacy code start
       &.-alignLeft {
         justify-content: flex-start;
       }
@@ -50,6 +63,7 @@
       &.-alignCenter {
         justify-content: center;
       }
+      // Legacy code end
 
       &.-noBorder {
         box-shadow: none;
@@ -78,6 +92,18 @@
       padding: 1rem;
       position: relative;
 
+      &.-align--left {
+        justify-content: flex-start;
+      }
+
+      &.-align--right {
+        justify-content: flex-end;
+      }
+
+      &.-align--center {
+        justify-content: center;
+      }
+      // Legacy code start
       &.-alignLeft {
         justify-content: flex-start;
       }
@@ -89,6 +115,7 @@
       &.-alignCenter {
         justify-content: center;
       }
+      // Legacy code end
 
       &.-small {
         padding: 0.5rem 1rem;

diff --git a/src/chi/components/grid/grid.scss b/src/chi/components/grid/grid.scss
@@ -30,6 +30,19 @@
 
     // Vertical Alignment
 
+    &.-align--top {
+      align-items: flex-start;
+    }
+
+    &.-align--center {
+      align-items: center;
+    }
+
+    &.-align--bottom {
+      align-items: flex-end;
+    }
+
+    // Legacy code start
     &.-alignTop {
       align-items: flex-start;
     }
@@ -41,6 +54,7 @@
     &.-alignBottom {
       align-items: flex-end;
     }
+    // Legacy code end
   }
 
   .a-col {
@@ -167,6 +181,18 @@
 
     // Vertical Alignment (Column-Specifics)
 
+    &.-align--top {
+      align-self: flex-start;
+    }
+
+    &.-align--center {
+      align-self: center;
+    }
+
+    &.-align--bottom {
+      align-self: flex-end;
+    }
+    // Legacy code start
     &.-alignTop {
       align-self: flex-start;
     }
@@ -178,6 +204,7 @@
     &.-alignBottom {
       align-self: flex-end;
     }
+    // Legacy code end
 
     // Reordering
 

diff --git a/src/website/views/components/button-group.pug b/src/website/views/components/button-group.pug
@@ -84,18 +84,18 @@ h4 Vertical
 h4 Alignment
 p.-text
   | Button text is centered by default. However, this behavior can change by applying the modifiers
-  | <code>-alignLeft</code> or <code>-alignRight</code>.
+  | <code>-align--left</code> or <code>-align--right</code>.
 .example.-mb3
   .-p3
     .m-btnGroup.-fluid(style="width:100%")
-      button(class=`a-btn -alignLeft`) Button
+      button(class=`a-btn -align--left`) Button
       button(class=`a-btn`) Button
-      button(class=`a-btn -alignRight`) Button
+      button(class=`a-btn -align--right`) Button
   :code(lang='html')
     <div class="m-btnGroup -fluid">
-      <button class="a-btn -alignLeft">Button</button>
+      <button class="a-btn -align--left">Button</button>
       <button class="a-btn">Button</button>
-      <button class="a-btn -alignRight">Button</button>
+      <button class="a-btn -align--right">Button</button>
     </div>
 
 h4 Disable Fluidity

diff --git a/src/website/views/components/card.pug b/src/website/views/components/card.pug
@@ -100,44 +100,44 @@ h4 Footer
       </div>
     </div>
 h4 Footer Right Aligned
-p.-text Apply the class <code>-alignRight</code> on <code>a-card__footer</code> to right align its contents.
+p.-text Apply the class <code>-align--right</code> on <code>a-card__footer</code> to right align its contents.
 .example.-mb3
   .-p3
     .a-card(style="width:20rem;")
       .a-card__content
         p.-text.-m0
           | Aenean pretium massa sed vehicula porta. Phasellus id metus felis.
           | Ut felis magna, facilisis ut malesuada nec.
-      .a-card__footer.-alignRight
+      .a-card__footer.-align--right
         button.a-btn.-brand Link
         button.a-btn.-ml1 Link
   :code(lang="html")
     <div class="a-card">
       <div class="a-card__content">
         <p class="-text -m0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
       </div>
-      <div class="a-card__footer -alignRight">
+      <div class="a-card__footer -align--right">
         <button class="a-btn -brand">Link</button>
         <button class="a-btn -ml1">Link</button>
       </div>
     </div>
 h4 Footer Center Aligned
-p.-text Apply the class <code>-alignCenter</code> on <code>a-card__footer</code> to center align its contents.
+p.-text Apply the class <code>-align--center</code> on <code>a-card__footer</code> to center align its contents.
 .example.-mb3
   .-p3
     .a-card(style="width:20rem;")
       .a-card__content
         p.-text.-m0
           | Aenean pretium massa sed vehicula porta. Phasellus id metus felis.
           | Ut felis magna, facilisis ut malesuada nec.
-      .a-card__footer.-alignCenter
+      .a-card__footer.-align--center
         button.a-btn.-brand Link
   :code(lang="html")
     <div class="a-card">
       <div class="a-card__content">
         <p class="-text -m0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
       </div>
-      <div class="a-card__footer -alignCenter">
+      <div class="a-card__footer -align--center">
         <button class="a-btn -brand">Link</button>
       </div>
     </div>
@@ -201,39 +201,39 @@ h4 Header
       </div>
     </div>
 h4 Header Right Aligned
-p.-text Apply the class <code>-alignRight</code> on <code>a-card__header</code> to right align its contents.
+p.-text Apply the class <code>-align--right</code> on <code>a-card__header</code> to right align its contents.
 .example.-mb3
   .-p3
     .a-card(style="width:20rem;")
-      .a-card__header.-alignRight
+      .a-card__header.-align--right
         h5.a-card__title Title
       .a-card__content
         p.-text.-m0
           | Aenean pretium massa sed vehicula porta. Phasellus id metus felis.
           | Ut felis magna, facilisis ut malesuada nec.
   :code(lang="html")
     <div class="a-card">
-      <div class="a-card__header -alignRight">
+      <div class="a-card__header -align--right">
         <h5 class="a-card__title">Title</h5>
       </div>
       <div class="a-card__content">
         <p class="-text -m0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
       </div>
     </div>
 h4 Header Center Aligned
-p.-text Apply the class <code>-alignCenter</code> on <code>a-card__header</code> to center align its contents.
+p.-text Apply the class <code>-align--center</code> on <code>a-card__header</code> to center align its contents.
 .example.-mb3
   .-p3
     .a-card(style="width:20rem;")
-      .a-card__header.-alignCenter
+      .a-card__header.-align--center
         h5.a-card__title Title
       .a-card__content
         p.-text.-m0
           | Aenean pretium massa sed vehicula porta. Phasellus id metus felis.
           | Ut felis magna, facilisis ut malesuada nec.
   :code(lang="html")
     <div class="a-card">
-      <div class="a-card__header -alignCenter">
+      <div class="a-card__header -align--center">
         <h5 class="a-card__title">Title</h5>
       </div>
       <div class="a-card__content">

diff --git a/src/website/views/foundations/grid.pug b/src/website/views/foundations/grid.pug
@@ -307,7 +307,7 @@ p.-text The columns in the following rows will be 50% wide until they are in the
 
 h4 Column Stacking
 
-p.-text On extra small (xs) viewports you can make columns stack by specifying the column with the <code>-w-sm</code> or any <code>-sm--w*</code> size modifier classes. Columns will start out stacked until viewed in the small viewport, at which point they will display horizontally in the row according to automatic layout or its assigned viewport size class.
+p.-text On extra small (xs) viewports you can make columns stack by specifying the column with the <code>-w-sm</code> or any <code>-w-sm--*</code> size modifier classes. Columns will start out stacked until viewed in the small viewport, at which point they will display horizontally in the row according to automatic layout or its assigned viewport size class.
 
 .a-grid.-show.-mb3
   .a-col.-w-sm--2
@@ -345,46 +345,46 @@ h4 Container-Level Vertical Alignment
 
 p.-text Setting alignment on the grid container will apply to all columns within the container. Use this method if you do not need to change the vertical alignment for each individual column.
 
-h5 -alignTop
+h5 -align--top
 
-.a-grid.-alignTop.-show.-mb3(style="height: 160px")
+.a-grid.-align--top.-show.-mb3(style="height: 160px")
   .a-col
   .a-col
   .a-col
 
 .-mb4.-mt2
   :code(lang="html")
-    <div class="a-grid -alignTop" style="height: 160px;">
+    <div class="a-grid -align--top" style="height: 160px;">
       <div class="a-col"></div>
       <div class="a-col"></div>
       <div class="a-col"></div>
     </div>
 
-h5 -alignCenter
+h5 -align--center
 
-.a-grid.-alignCenter.-show.-mb3(style="height: 160px")
+.a-grid.-align--center.-show.-mb3(style="height: 160px")
   .a-col
   .a-col
   .a-col
 
 .-mb4.-mt2
   :code(lang="html")
-    <div class="a-grid -alignCenter" style="height: 160px;">
+    <div class="a-grid -align--center" style="height: 160px;">
       <div class="a-col"></div>
       <div class="a-col"></div>
       <div class="a-col"></div>
     </div>
 
-h5 -alignBottom
+h5 -align--bottom
 
-.a-grid.-alignBottom.-show.-mb3(style="height: 128px")
+.a-grid.-align--bottom.-show.-mb3(style="height: 128px")
   .a-col
   .a-col
   .a-col
 
 .-mb4.-mt2
   :code(lang="html")
-    <div class="a-grid -alignBottom" style="height: 160px">
+    <div class="a-grid -align--bottom" style="height: 160px">
       <div class="a-col"></div>
       <div class="a-col"></div>
       <div class="a-col"></div>
@@ -395,14 +395,14 @@ h4 Column-Specific Vertical Alignment
 p.-text Changing the alignment of an individual column is as easy as applying an alignment modifier to the column in question.
 
 .a-grid.-show.-mb3(style="height: 160px")
-  .a-col.-alignTop
-  .a-col.-alignCenter
-  .a-col.-alignBottom
+  .a-col.-align--top
+  .a-col.-align--center
+  .a-col.-align--bottom
 
 .-mb4.-mt2
   :code(lang="html")
     <div class="a-grid" style="height: 160px">
-      <div class="a-col -alignTop"></div>
-      <div class="a-col -alignCenter"></div>
-      <div class="a-col -alignBottom"></div>
+      <div class="a-col -align--top"></div>
+      <div class="a-col -align--center"></div>
+      <div class="a-col -align--bottom"></div>
     </div>
diff --git a/test/chi/components/button-horizontal-groups.pug b/test/chi/components/button-horizontal-groups.pug
@@ -79,13 +79,13 @@ each size in ['default', 'small', 'large']
           tr
             td
               .m-btnGroup.-fluid.-m1
-                each modifier in ['notFluid', 'alignLeft', false, 'alignRight']
+                each modifier in ['notFluid', 'align--left', false, 'align--right']
                   +button(false, type, style, size, modifier)
                     | Button
           tr
             td
               .m-btnGroup.-pill.-fluid.-m1
-                each modifier in ['notFluid', 'alignLeft', false, 'alignRight']
+                each modifier in ['notFluid', 'align--left', false, 'align--right']
                   +button(false, type, style, size, modifier)
                     | Button
 
@@ -94,14 +94,14 @@ each size in ['default', 'small', 'large']
           tr
             td
               .m-btnGroup.-fluid.-m1
-                each modifier in ['notFluid', 'alignLeft', false, 'alignRight']
+                each modifier in ['notFluid', 'align--left', false, 'align--right']
                   +button(true, type, style, size, modifier)
                     .a-btn__content
                       +icon('atom')
           tr
             td
               .m-btnGroup.-pill.-fluid.-m1
-                each modifier in ['notFluid', 'alignLeft', false, 'alignRight']
+                each modifier in ['notFluid', 'align--left', false, 'align--right']
                   +button(true, type, style, size, modifier)
                     .a-btn__content
                       +icon('atom')
@@ -111,15 +111,15 @@ each size in ['default', 'small', 'large']
           tr
             td
               .m-btnGroup.-fluid.-m1
-                each modifier in ['notFluid', 'alignLeft', false, 'alignRight']
+                each modifier in ['notFluid', 'align--left', false, 'align--right']
                   +button(false, type, style, size, modifier)
                     .a-btn__content
                       +icon('atom')
                       span Button
           tr
             td
               .m-btnGroup.-pill.-fluid.-m1
-                each modifier in ['notFluid', 'alignLeft', false, 'alignRight']
+                each modifier in ['notFluid', 'align--left', false, 'align--right']
                   +button(false, type, style, size, modifier)
                     .a-btn__content
                       +icon('atom')