refactor(progress-bar): replace ion-hide

Author: thetaPC

core/src/components/progress-bar/progress-bar.scss

@@ -71,6 +71,10 @@
   overflow: hidden;
 }
 
+.buffer-circles-container-hidden {
+  display: none;
+}
+
 // Extend a bit to overflow. The size of animated distance.
 .buffer-circles {
   /* stylelint-disable property-disallowed-list */

core/src/components/progress-bar/progress-bar.tsx

@@ -120,9 +120,8 @@ const renderProgress = (value: number, buffer: number) => {
      * When finalBuffer === 1, we use display: none
      * instead of removing the element to avoid flickering.
      */
-    // TODO(FW-6697): change `ion-hide` class to `ion-display-none` or another class
     <div
-      class={{ 'buffer-circles-container': true, 'ion-hide': finalBuffer === 1 }}
+      class={{ 'buffer-circles-container': true, 'buffer-circles-container-hidden': finalBuffer === 1 }}
       style={{ transform: `translateX(${finalBuffer * 100}%)` }}
     >
       <div class="buffer-circles-container" style={{ transform: `translateX(-${finalBuffer * 100}%)` }}>

core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts

@@ -17,12 +17,28 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
 
         await page.setIonViewport();
 
-        const progressBar = await page.locator('ion-progress-bar');
+        const progressBar = page.locator('ion-progress-bar');
 
         await progressBar.evaluate((node: HTMLIonProgressBarElement) => (node.value = 0.8));
 
         await expect(progressBar).toHaveScreenshot(screenshot(`progress-bar-buffer-dynamic-value`));
       });
     });
+
+    test.describe('when buffer is 1', () => {
+      test('should hide buffer circles', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-progress-bar value="0.5" buffer="1"></ion-progress-bar>
+        `,
+          config
+        );
+
+        const progressBar = page.locator('ion-progress-bar');
+        const circlesContainer = progressBar.locator('.buffer-circles-container-hidden');
+
+        await expect(circlesContainer).toHaveCSS('display', 'none');
+      });
+    });
   });
 });