Merge branch 'main' into icon-binocs

.github/CONTRIBUTING.md

@@ -50,7 +50,7 @@ Please see our [Contributor Code of Conduct](./CODE_OF_CONDUCT.md) for informati
 
 1. Run `npm start` from the root directory to start a local version of the icon test.
 2. Modify the icon test as needed in the `index.html` file.
-
+3. If you are modifying icons, you can run `npm run build.files` to re-run the SVG optimization script to verify there are no changes after optimizing the SVG.
 
 <!-- #### Building Changes
 

.github/workflows/actions/test-e2e/action.yml

@@ -55,10 +55,8 @@ runs:
         npx playwright test --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
         git add src/\*.png --force
         mkdir updated-screenshots
-        echo 'made dir'
         rsync -R --progress $(git diff --name-only --cached) updated-screenshots
-        echo 'copied images'
-        if [ -d updated-screenshots ]; then
+        if [ "$(ls -A updated-screenshots)" ]; then
           echo "hasUpdatedScreenshots=$(echo 'true')" >> $GITHUB_OUTPUT
           cd updated-screenshots
           ls

playwright.config.ts

@@ -52,14 +52,7 @@ const config: PlaywrightTestConfig = {
      * Maximum time expect() should wait for the condition to be met.
      * For example in `await expect(locator).toHaveText();`
      */
-    timeout: 5000,
-    toMatchSnapshot: {
-      /**
-       * Increases the maximum allowed pixel difference to account
-       * for slight browser rendering inconsistencies.
-       */
-      maxDiffPixelRatio: 0.02
-    }
+    timeout: 5000
   },
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,

scripts/build.ts

@@ -51,6 +51,16 @@ async function optimizeSvgs(srcSvgData: SvgData[]) {
             if (!Array.isArray(params.attrs)) {
               params.attrs = [params.attrs];
             }
+
+            /**
+             * All host SVG elements must have
+             * the ionicons class otherwise styles
+             * will not apply.
+             */
+            if (item.elem === 'svg') {
+              item.class.add('ionicon');
+            }
+
             if (item.isElem()) {
               item.eachAttr((attr) => {
                 if (attr.name === 'fill') {
@@ -165,14 +175,8 @@ async function optimizeSvg(
   const srcSvgContent = await fs.readFile(svgData.srcFilePath, 'utf8');
 
   const optimizedSvg = await optimizePass.optimize(srcSvgContent, { path: svgData.srcFilePath });
-
-  const optimizedCode = optimizedSvg.data.replace(
-    /<svg (.*?)>/,
-    `<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">`,
-  );
-
-  const webComponentSvg = await webComponentPass.optimize(optimizedCode, { path: svgData.srcFilePath });
-  const sourceSvg = await sourcePass.optimize(optimizedCode, { path: svgData.srcFilePath });
+  const webComponentSvg = await webComponentPass.optimize(optimizedSvg.data, { path: svgData.srcFilePath });
+  const sourceSvg = await sourcePass.optimize(optimizedSvg.data, { path: svgData.srcFilePath });
 
   svgData.optimizedSvgContent = webComponentSvg.data;
 

src/components/icon/test/icon.e2e.ts

@@ -8,7 +8,7 @@ test.describe('icon: basic', () => {
     // Wait for all SVGs to be lazily loaded before taking screenshots
     await page.waitForLoadState('networkidle');
 
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(`icon-diff.png`);
+    await expect(page).toHaveScreenshot(`icon-diff.png`, { fullPage: true });
   });
 
   test('some icons should flip when rtl', async ({ page }) => {

src/components/test/dynamic-type/icon.e2e.ts

@@ -13,7 +13,7 @@ test.describe('icon: dynamic type', () => {
 
     const icons = page.locator('#icons');
 
-    expect(await icons.screenshot()).toMatchSnapshot(`icon-dynamic-type-diff.png`);
+    await expect(icons).toHaveScreenshot(`icon-dynamic-type-diff.png`);
   });
 
 });