refactor(css): remove the deprecated flex bp classes

Author: brandyscarney

core/src/css/flex-utils.scss

@@ -129,20 +129,22 @@ $flex-wrap-values: (
   wrap-reverse
 );
 
+@each $value in $flex-wrap-values {
+  // TODO(FW-6697): remove ion-wrap, ion-nowrap, ion-wrap-reverse
+  // in favor of the new ion-flex-wrap, ion-flex-nowrap, and
+  // ion-flex-wrap-reverse classes
+  .ion-#{$value} {
+    flex-wrap: #{$value} !important;
+  }
+}
+
 @each $breakpoint in map-keys($screen-breakpoints) {
   $infix: breakpoint-infix($breakpoint, $screen-breakpoints);
   @include media-breakpoint-up($breakpoint, $screen-breakpoints) {
     @each $value in $flex-wrap-values {
       .ion-flex#{$infix}-#{$value} {
         flex-wrap: #{$value} !important;
       }
-
-      // TODO(FW-6697): remove ion-wrap, ion-nowrap, ion-wrap-reverse
-      // in favor of the new ion-flex-wrap, ion-flex-nowrap, and
-      // ion-flex-wrap-reverse classes
-      .ion#{$infix}-#{$value} {
-        flex-wrap: #{$value} !important;
-      }
     }
   }
 }

core/src/css/test/flex-utils.test.mjs

@@ -29,7 +29,6 @@ for (const value of ALIGN_CONTENT_VALUES) {
   );
 }
 
-// Responsive align content
 for (const bp of BREAKPOINTS) {
   for (const value of ALIGN_CONTENT_VALUES) {
     assert(
@@ -57,7 +56,6 @@ for (const value of ALIGN_ITEMS_VALUES) {
   );
 }
 
-// Responsive align items
 for (const bp of BREAKPOINTS) {
   for (const value of ALIGN_ITEMS_VALUES) {
     assert(
@@ -86,7 +84,6 @@ for (const value of ALIGN_SELF_VALUES) {
   );
 }
 
-// Responsive align self
 for (const bp of BREAKPOINTS) {
   for (const value of ALIGN_SELF_VALUES) {
     assert(
@@ -115,7 +112,6 @@ for (const value of JUSTIFY_CONTENT_VALUES) {
   );
 }
 
-// Responsive justify content
 for (const bp of BREAKPOINTS) {
   for (const value of JUSTIFY_CONTENT_VALUES) {
     assert(
@@ -142,7 +138,6 @@ for (const value of FLEX_DIRECTION_VALUES) {
   );
 }
 
-// Responsive flex direction
 for (const bp of BREAKPOINTS) {
   for (const value of FLEX_DIRECTION_VALUES) {
     assert(
@@ -174,15 +169,8 @@ for (const value of FLEX_WRAP_VALUES) {
   );
 }
 
-// Responsive flex wrap
 for (const bp of BREAKPOINTS) {
   for (const value of FLEX_WRAP_VALUES) {
-    // TODO(FW-6697): remove assert for .ion-${bp}-${value} classes
-    assert(
-      css.includes(`.ion-${bp}-${value}`),
-      `CSS should include .ion-${bp}-${value} class`
-    );
-
     assert(
       css.includes(`.ion-flex-${bp}-${value}`),
       `CSS should include .ion-flex-${bp}-${value} class`
@@ -207,7 +195,6 @@ for (const value of FLEX_FILL_VALUES) {
   );
 }
 
-// Responsive flex fill
 for (const bp of BREAKPOINTS) {
   for (const value of FLEX_FILL_VALUES) {
     assert(
@@ -237,7 +224,6 @@ for (const value of FLEX_GROW_SHRINK_VALUES) {
   );
 }
 
-// Responsive flex grow and shrink
 for (const bp of BREAKPOINTS) {
   for (const value of FLEX_GROW_SHRINK_VALUES) {
     assert(
@@ -272,7 +258,6 @@ for (let i = 0; i <= 12; i++) {
   );
 }
 
-// Responsive flex order
 for (const bp of BREAKPOINTS) {
   assert(
     css.includes(`.ion-order-${bp}-first`),