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

* fix(grid): make subgrid work with grid offset * docs(grid): fix storybook styles prefix Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Oct 13, 2021 · 9f558cf · 9f558cf
1 parent 83f2658
commit 9f558cf
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 27 deletions.
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) {