fix(flexgrid): include flexgrid styles in @carbon/styles and `@carb…

…on/react` (#10666) * fix(flexgrid): include flexgrid styles in and * fix(flexgrid): correct mixin name, update tests and snaps * fix(flexgrid): call mixin, update docs, remove carbon prefix * fix(flexgrid): 12 column configuration option * fix(flexgrid): update snaps Co-authored-by: Josefina Mancilla <[email protected]>
carbon-design-system · Feb 11, 2022 · c2a62f9 · c2a62f9
1 parent 75c1522
commit c2a62f9
Show file tree

Hide file tree

Showing 17 changed files with 1,121 additions and 72 deletions.
diff --git a/docs/migration/v11.md b/docs/migration/v11.md
@@ -1270,8 +1270,8 @@ For full Sass API documentation, visit the
 | `scss/grid.scss`      |     | Moved to `index.scss`                                                     |
 | `scss/index.scss`     |     | Moved to `index.scss`                                                     |
 | `scss/_css-grid.scss` |     | New                                                                       |
-| `scss/_flexbox.scss`  |     | New                                                                       |
-| `scss/_mixins.scss`   |     | Moved to `scss/_flexbox.scss`                                             |
+| `scss/flex-grid.scss` |     | New                                                                       |
+| `scss/_mixins.scss`   |     | Moved to `scss/flex-grid.scss`                                            |
 | `scss/_prefix.scss`   |     | Moved to `scss/_config.scss`                                              |
 | `scss/12.scss`        |     | This file has been removed, to configure the grid use `scss/_config.scss` |
 

diff --git a/packages/carbon-react/tasks/build-styles.js b/packages/carbon-react/tasks/build-styles.js
@@ -95,6 +95,16 @@ async function build() {
               },
             ],
           },
+          {
+            type: 'directory',
+            filepath: 'aspect-ratio',
+            files: [
+              {
+                type: 'file',
+                filepath: '_index.scss',
+              },
+            ],
+          },
           {
             type: 'directory',
             filepath: 'breadcrumb',

diff --git a/packages/grid/__tests__/__snapshots__/scss-test.js.snap b/packages/grid/__tests__/__snapshots__/scss-test.js.snap
@@ -3,9 +3,9 @@
 exports[`@carbon/grid Public API 1`] = `
 Array [
   "prefix",
+  "flex-grid-columns",
   "grid-gutter",
   "grid-gutter--condensed",
   "grid-breakpoints",
-  "carbon--aspect-ratios",
 ]
 `;
diff --git a/packages/grid/index.scss b/packages/grid/index.scss
@@ -7,6 +7,8 @@
 
 @forward 'scss/modules/config' with (
   $prefix: 'bx' !default,
+  $flex-grid-columns: 16 !default,
 );
 @forward 'scss/modules/breakpoint';
 @forward 'scss/modules/css-grid';
+@forward 'scss/modules/flex-grid';
diff --git a/packages/grid/scss/modules/_config.scss b/packages/grid/scss/modules/_config.scss
@@ -10,3 +10,9 @@
 /// @access public
 /// @group @carbon/grid
 $prefix: 'bx' !default;
+
+/// Total columns used in the flex grid
+/// @type Number
+/// @access public
+/// @group @carbon/grid
+$flex-grid-columns: 16 !default;
diff --git a/packages/grid/scss/modules/_css-grid.scss b/packages/grid/scss/modules/_css-grid.scss
@@ -356,71 +356,3 @@
 .#{$prefix}--align-items-center {
   align-items: center;
 }
-
-// -----------------------------------------------------------------------------
-// Aspect ratio -- TODO: in v11 should this move to a new file to live alongside the AspectRatio component?
-// -----------------------------------------------------------------------------
-
-/// The aspect ratios that are used to generate corresponding aspect ratio
-/// classes in code
-/// @type List
-/// @access public
-/// @group @carbon/grid
-$carbon--aspect-ratios: (
-  (16, 9),
-  (9, 16),
-  (2, 1),
-  (1, 2),
-  (4, 3),
-  (3, 4),
-  (3, 2),
-  (2, 3),
-  (1, 1)
-);
-
-/// Generates the CSS classname utilities for the aspect ratios
-///
-/// CSS Tricks article on aspect ratios and all the different ways it can be done.
-/// https://css-tricks.com/aspect-ratio-boxes/#article-header-id-6
-///
-/// That article references an earlier article on the topic.
-/// https://keithjgrant.com/posts/2017/03/aspect-ratios/
-///
-/// @param {Number} $width width from an aspect ratio
-/// @param {Number} $height height from an aspect ratio
-/// @access private
-/// @group @carbon/grid
-@mixin carbon--aspect-ratio($aspect-ratios: $carbon--aspect-ratios) {
-  .#{$prefix}--aspect-ratio {
-    position: relative;
-  }
-
-  .#{$prefix}--aspect-ratio::before {
-    width: 1px;
-    height: 0;
-    margin-left: -1px;
-    content: '';
-    float: left;
-  }
-
-  .#{$prefix}--aspect-ratio::after {
-    display: table;
-    clear: both;
-    content: '';
-  }
-
-  @each $aspect-ratio in $aspect-ratios {
-    $width: nth($aspect-ratio, 1);
-    $height: nth($aspect-ratio, 2);
-
-    .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before {
-      @if meta.function-exists('div', 'math') {
-        padding-top: percentage(math.div($height, $width));
-      } @else {
-        padding-top: percentage(($height / $width));
-      }
-    }
-  }
-}
-
-@include carbon--aspect-ratio();