fix(grid): make subgrid work with grid offset (#9803)

janhassel · tay1orjones · kodiakhq[bot] · web-flow · commit 9f558cf7e0c8 · 2021-10-13T19:32:36.000Z
* fix(grid): make subgrid work with grid offset

* docs(grid): fix storybook styles prefix

Co-authored-by: Taylor Jones &lt;taylor.jones826@gmail.com&gt;
Co-authored-by: kodiakhq[bot] &lt;49736102+kodiakhq[bot]@users.noreply.github.com&gt;
diff --git a/packages/carbon-react/src/components/Grid/Grid.stories.scss b/packages/carbon-react/src/components/Grid/Grid.stories.scss
@@ -2,54 +2,54 @@
 @use '@carbon/styles/scss/type' as *;
 
 // Grid modes
-.bx--css-grid {
+.cds--css-grid {
   background-color: $blue-20;
   outline: 1px dashed $blue-40;
 }
 
-.bx--css-grid p {
+.cds--css-grid p {
   @include type-style('code-02');
 }
 
-.bx--css-grid p:first-of-type {
+.cds--css-grid p:first-of-type {
   //messing up progress indicator stories
   margin-top: 0;
 }
 
-.bx--css-grid.bx--css-grid--narrow {
+.cds--css-grid.cds--css-grid--narrow {
   background-color: $teal-20;
   outline: 1px dashed $teal-40;
 }
 
-.bx--css-grid.bx--css-grid--condensed {
+.cds--css-grid.cds--css-grid--condensed {
   background-color: $purple-20;
   outline: 1px dashed $purple-40;
 }
 
 // Only use background for subgrid example, not other subgrids in "mixed modes" story or others
-.bx--subgrid.example {
+.cds--subgrid.example {
   background-color: $green-20;
 }
 
 // Columns
-.bx--css-grid > [class*='col'],
-.bx--subgrid > [class*='col'] {
+.cds--css-grid > [class*='col'],
+.cds--subgrid > [class*='col'] {
   min-height: 80px;
 }
 
-.bx--css-grid > [class*='col'] {
+.cds--css-grid > [class*='col'] {
   background: $blue-10;
 }
 
-.bx--subgrid > [class*='col'] {
+.cds--subgrid > [class*='col'] {
   background: $green-10;
   outline: 1px dashed $green-30;
 }
 
-.bx--css-grid.bx--css-grid--narrow > [class*='col'] {
+.cds--css-grid.cds--css-grid--narrow > [class*='col'] {
   background: $teal-10;
 }
 
-.bx--css-grid.bx--css-grid--condensed > [class*='col'] {
+.cds--css-grid.cds--css-grid--condensed > [class*='col'] {
   background: $purple-10;
 }
diff --git a/packages/grid/scss/modules/_css-grid.scss b/packages/grid/scss/modules/_css-grid.scss
@@ -254,10 +254,6 @@
   .#{$prefix}--col-start-#{$i} {
     grid-column-start: $i;
   }
-
-  .#{$prefix}--col-end-#{$i} {
-    grid-column-end: $i;
-  }
 }
 
 .#{$prefix}--col-start-auto {
@@ -272,17 +268,13 @@
   $columns: map.get($value, columns);
 
   @include breakpoint($name) {
-    // The `grid-column-end` and `grid-column-start` properties are *not* inclusive.
-    // It starts/ends the column *at* the column, not *on* the column. We must
+    // The `grid-column-start` property is *not* inclusive.
+    // It starts the column *at* the column, not *on* the column. We must
     // ensure that there is one additional class available for each breakpoint.
     @for $i from 1 through $columns + 1 {
       .#{$prefix}--#{$name}\:col-start-#{$i} {
         grid-column-start: $i;
       }
-
-      .#{$prefix}--#{$name}\:col-end-#{$i} {
-        grid-column-end: $i;
-      }
     }
 
     .#{$prefix}--#{$name}\:col-start-auto {
diff --git a/packages/react/src/components/Grid/Column.js b/packages/react/src/components/Grid/Column.js
@@ -150,11 +150,7 @@ function getClassNameForBreakpoints(breakpoints, prefix) {
     }
 
     if (typeof span === 'number') {
-      if (typeof offset === 'number' && offset > 0) {
-        classNames.push(`${prefix}--${name}:col-end-${offset + span + 1}`);
-      } else {
-        classNames.push(`${prefix}--${name}:col-span-${span}`);
-      }
+      classNames.push(`${prefix}--${name}:col-span-${span}`);
     }
 
     if (span === true) {

Original file line number	Diff line number	Diff line change
`@@ -2,54 +2,54 @@`
`2`	`2`	`@use '@carbon/styles/scss/type' as *;`
`3`	`3`
`4`	`4`	`// Grid modes`
`5`		`-.bx--css-grid {`
	`5`	`+.cds--css-grid {`
`6`	`6`	`background-color: $blue-20;`
`7`	`7`	`outline: 1px dashed $blue-40;`
`8`	`8`	`}`
`9`	`9`
`10`		`-.bx--css-grid p {`
	`10`	`+.cds--css-grid p {`
`11`	`11`	`@include type-style('code-02');`
`12`	`12`	`}`
`13`	`13`
`14`		`-.bx--css-grid p:first-of-type {`
	`14`	`+.cds--css-grid p:first-of-type {`
`15`	`15`	`//messing up progress indicator stories`
`16`	`16`	`margin-top: 0;`
`17`	`17`	`}`
`18`	`18`
`19`		`-.bx--css-grid.bx--css-grid--narrow {`
	`19`	`+.cds--css-grid.cds--css-grid--narrow {`
`20`	`20`	`background-color: $teal-20;`
`21`	`21`	`outline: 1px dashed $teal-40;`
`22`	`22`	`}`
`23`	`23`
`24`		`-.bx--css-grid.bx--css-grid--condensed {`
	`24`	`+.cds--css-grid.cds--css-grid--condensed {`
`25`	`25`	`background-color: $purple-20;`
`26`	`26`	`outline: 1px dashed $purple-40;`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`// Only use background for subgrid example, not other subgrids in "mixed modes" story or others`
`30`		`-.bx--subgrid.example {`
	`30`	`+.cds--subgrid.example {`
`31`	`31`	`background-color: $green-20;`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`// Columns`
`35`		`-.bx--css-grid > [class*='col'],`
`36`		`-.bx--subgrid > [class*='col'] {`
	`35`	`+.cds--css-grid > [class*='col'],`
	`36`	`+.cds--subgrid > [class*='col'] {`
`37`	`37`	`min-height: 80px;`
`38`	`38`	`}`
`39`	`39`
`40`		`-.bx--css-grid > [class*='col'] {`
	`40`	`+.cds--css-grid > [class*='col'] {`
`41`	`41`	`background: $blue-10;`
`42`	`42`	`}`
`43`	`43`
`44`		`-.bx--subgrid > [class*='col'] {`
	`44`	`+.cds--subgrid > [class*='col'] {`
`45`	`45`	`background: $green-10;`
`46`	`46`	`outline: 1px dashed $green-30;`
`47`	`47`	`}`
`48`	`48`
`49`		`-.bx--css-grid.bx--css-grid--narrow > [class*='col'] {`
	`49`	`+.cds--css-grid.cds--css-grid--narrow > [class*='col'] {`
`50`	`50`	`background: $teal-10;`
`51`	`51`	`}`
`52`	`52`
`53`		`-.bx--css-grid.bx--css-grid--condensed > [class*='col'] {`
	`53`	`+.cds--css-grid.cds--css-grid--condensed > [class*='col'] {`
`54`	`54`	`background: $purple-10;`
`55`	`55`	`}`
Original file line number	Diff line number	Diff line change
`@@ -150,11 +150,7 @@ function getClassNameForBreakpoints(breakpoints, prefix) {`
`150`	`150`	`}`
`151`	`151`
`152`	`152`	`if (typeof span === 'number') {`
`153`		`- if (typeof offset === 'number' && offset > 0) {`
`154`		- classNames.push(`${prefix}--${name}:col-end-${offset + span + 1}`);
`155`		`- } else {`
`156`		- classNames.push(`${prefix}--${name}:col-span-${span}`);
`157`		`- }`
	`153`	+ classNames.push(`${prefix}--${name}:col-span-${span}`);
`158`	`154`	`}`
`159`	`155`
`160`	`156`	`if (span === true) {`