Merge tag 'v2.21.1' of github.com:salesforce-ux/design-system-internal into opensource-summer-23

Author: Dottenpixel

RELEASENOTES.general.md

@@ -1,6 +1,11 @@
 <!-- Release notes authoring guidelines: http://keepachangelog.com/ -->
 <!-- On release, add general notes here. In time the legacy release notes will be add to this -->
 
+## 2.21.1 - May 18, 2023
+
+## Fixed
+
+- Fixed grid column size classes where the `slds-col-` class now applies 'flex: 1 1 auto,' which breaks grid layouts when combined with `slds-small|medium|large-size_*` classes. This results in incomplete rows and layout issues.
 
 ## 2.21.0 - April 20, 2023
 

RELEASENOTES.md

@@ -1,6 +1,11 @@
 <!-- Release notes authoring guidelines: http://keepachangelog.com/ -->
 <!-- !!! THIS FILE IS AUTO-GENERATED !!! DO NOT EDIT THIS FILE MANUALLY !!! -->
 
+## Release 2.21.1 - May 18, 2023
+
+## Fixed
+- Fixed grid column size classes where the `slds-col-` class now applies 'flex: 1 1 auto,' which breaks grid layouts when combined with `slds-small|medium|large-size_*` classes. This results in incomplete rows and layout issues.
+
 ## Release 2.21.0 - April 20, 2023
 
 ## Fixed

package-lock.json

@@ -8,7 +8,7 @@
     "CSS"
   ],
   "homepage": "https://lightningdesignsystem.com",
-  "version": "2.21.0",
+  "version": "2.21.1",
   "author": "Salesforce",
   "bugs": {
     "url": "https://github.com/salesforce-ux/design-system/issues"

package.json

@@ -9,7 +9,7 @@
 ///
 /// @type String
 /// @access private
-$app-version: "2.21.0";
+$app-version: "2.21.1";
 
 /// Debug mode (uncomment to activate)
 /// Turn on to output deprecation warnings during development

ui/_config.scss

@@ -15,19 +15,23 @@ $_sizes: (
   'xx-large': $size-xx-large
 );
 
+/// Column sizes
+/// @type array
+/// @private
+$_columnSizes: 1, 2, 3, 4, 5, 6, 7, 8, 12;
+
 // All SLDS size classes like `slds-size--medium` and `slds-size--medium-1-of-12` in one string.
 // This is faster for style calculation than `[class*="slds-size_"]`.
 /// @private
 @function all-sizes () {
   $prefixes: 'slds-size_', 'slds-size--';
-  $columnSizes: 1, 2, 3, 4, 5, 6, 7, 8, 12;
 
   $result: '';
   @each $prefix in $prefixes {
     @each $size in map-keys($_sizes) {
       $result: "#{$result}, .#{$prefix}#{$size}";
     }
-    @each $columnSize in $columnSizes {
+    @each $columnSize in $_columnSizes {
       @for $i from 1 through $columnSize {
         $result: "#{$result}, .#{$prefix}#{$i}-of-#{$columnSize}";
       }
@@ -37,18 +41,28 @@ $_sizes: (
   @return str-slice($result, 3); // Remove initial ", "
 }
 
-// All SLDS classes like `slds-small-size_medium` in one string.
+// All SLDS classes like `slds-small-size_medium` and `slds-small-size_1-of-12` in one string.
 // Note that the first size is only a breakpoint size, and the second is all possible sizes.
 // This is faster for style calculation than `[class*="slds-#{$breakpointSize}-size_"]`
 /// @private
-@function all-responsive-sizes ($breakpointSize, $prefix) {
+@function all-responsive-sizes ($breakpointSize, $prefix, $withColumnSizes) {
   $infixes: '-size_', '-size--';
 
   $result: '';
+
   @each $infix in $infixes {
+    // e.g. `slds-small-size_medium`
     @each $size in map-keys($_sizes) {
       $result: "#{$result}, .#{$prefix}#{$breakpointSize}#{$infix}#{$size}";
     }
+    // e.g. `slds-small-size_1_of_12`
+    @if ($withColumnSizes) {
+      @each $columnSize in $_columnSizes {
+        @for $i from 1 through $columnSize {
+          $result: "#{$result}, .#{$prefix}#{$breakpointSize}#{$infix}#{$i}-of-#{$columnSize}";
+        }
+      }
+    }
   }
   @return str-slice($result, 3); // Remove initial ", "
 }
@@ -101,7 +115,7 @@ $_sizes: (
   @media (min-width: #{pem($breakpoint)}) {
 
     // Fixes issue when sizing is used with slds-col
-    #{all-responsive-sizes($size, 'slds-')} {
+    #{all-responsive-sizes($size, 'slds-', true)} {
       flex: none;
     }
 
@@ -133,7 +147,7 @@ $_sizes: (
   @media (max-width: #{pem($breakpoint)}) {
 
     // Fixes issue when sizing is used with slds-col
-    #{all-responsive-sizes($size, 'slds-max-')} {
+    #{all-responsive-sizes($size, 'slds-max-', false)} {
       flex: none;
     }