feat(css): add new display css classes and test

Author: brandyscarney

core/package.json

@@ -90,7 +90,8 @@
     "prerender.e2e": "node scripts/testing/prerender.js",
     "prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx}\"",
     "start": "npm run build.css && stencil build --dev --watch --serve",
-    "test": "npm run test.spec && npm run test.e2e",
+    "test": "npm run test.css && npm run test.spec && npm run test.e2e",
+    "test.css": "sh -c 'for f in src/css/test/*.mjs; do node \"$f\"; done'",
     "test.spec": "stencil test --spec --max-workers=2",
     "test.e2e": "npx playwright test",
     "test.e2e.update-snapshots": "npm run test.e2e -- --update-snapshots='changed'",

core/src/css/display.scss

@@ -2,9 +2,14 @@
 @import "../themes/ionic.mixins";
 
 // Display
-// --------------------------------------------------
-// Modifies display of a particular element based on the given classes
+// ------------------------------------------------------------------
+// Provides utility classes to control the CSS display property
+// of elements. Includes responsive variants for toggling between
+// block, inline, flex, grid, and other display values at different
+// breakpoints.
 
+// TODO(FW-6697): remove ion-hide-* classes in favor of the new
+// ion-display-* classes
 .ion-hide {
   display: none !important;
 }
@@ -29,3 +34,29 @@
     }
   }
 }
+
+$display-values: (
+  none,
+  inline,
+  inline-block,
+  block,
+  flex,
+  inline-flex,
+  grid,
+  inline-grid,
+  table,
+  table-cell,
+  table-row
+);
+
+@each $display in $display-values {
+  @each $breakpoint in map-keys($screen-breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $screen-breakpoints);
+
+    @include media-breakpoint-up($breakpoint, $screen-breakpoints) {
+      .ion-display#{$infix}-#{$display} {
+        display: #{$display} !important;
+      }
+    }
+  }
+}

core/src/css/test/display.test.mjs

@@ -0,0 +1,54 @@
+import assert from 'assert';
+import fs from 'fs';
+import path from 'path';
+
+const css = fs.readFileSync(
+  path.resolve(path.dirname(new URL(import.meta.url).pathname), '../../../css/display.css'),
+  'utf8'
+);
+
+const INFIXES = ['', '-sm', '-md', '-lg', '-xl'];
+
+// Check for the `ion-hide-*` classes
+// TODO(FW-6697): remove all `ion-hide-*` asserts
+assert(css.includes('.ion-hide'), 'CSS should include .ion-hide class');
+
+const HIDE_VALUES = [
+  'up',
+  'down'
+];
+
+for (const value of HIDE_VALUES) {
+  for (const infix of INFIXES) {
+    assert(
+      css.includes(`.ion-hide${infix}-${value}`),
+      `CSS should include .ion-hide${infix}-${value} class`
+    );
+  }
+}
+
+const DISPLAY_VALUES = [
+  'none',
+  'inline',
+  'inline-block',
+  'block',
+  'flex',
+  'inline-flex',
+  'grid',
+  'inline-grid',
+  'table',
+  'table-cell',
+  'table-row'
+];
+
+// Check for the base and responsive `ion-display-*` classes
+for (const value of DISPLAY_VALUES) {
+  for (const infix of INFIXES) {
+    assert(
+      css.includes(`.ion-display${infix}-${value}`),
+      `CSS should include .ion-display${infix}-${value} class`
+    );
+  }
+}
+
+console.log("All display.css tests pass.");