testing sheet

core/src/components.d.ts

@@ -1460,7 +1460,7 @@ export namespace Components {
          */
         "theme"?: "ios" | "md" | "ionic";
         /**
-          * If `true`, the header will be translucent. Only applies when the theme is `"ios"` or `"ionic"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
+          * If `true`, the header will be translucent. Only applies when the theme is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
           * @default false
          */
         "translucent": boolean;
@@ -7369,7 +7369,7 @@ declare namespace LocalJSX {
          */
         "theme"?: "ios" | "md" | "ionic";
         /**
-          * If `true`, the header will be translucent. Only applies when the theme is `"ios"` or `"ionic"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
+          * If `true`, the header will be translucent. Only applies when the theme is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
           * @default false
          */
         "translucent"?: boolean;

core/src/components/datetime/datetime.ionic.scss

@@ -104,7 +104,6 @@
   --background-activated: #{globals.$ion-primitives-neutral-200};
   --background-hover: #{globals.$ion-primitives-neutral-200};
   --background-hover-opacity: 1;
-  min-height: globals.$ion-scale-1000;
 }
 
 // TODO(ROU-11119): Rewrite this when we replace the ion-button with a native button
@@ -154,8 +153,7 @@
 }
 
 // Selected Day
-.calendar-day.calendar-day-active,
-.calendar-day.calendar-day-active.calendar-day-adjacent-day {
+.calendar-day.calendar-day-active {
   background: globals.$ion-semantics-primary-100;
 }
 
@@ -172,19 +170,8 @@
 }
 
 // Pressed Day
-.calendar-day:active,
-.calendar-day.calendar-day-adjacent-day:active {
-  background: globals.$ion-bg-primary-subtle-press;
-}
-
-// Adjacent Day
-.calendar-day.calendar-day-adjacent-day {
-  color: globals.$ion-text-subtlest;
-}
-
-// Selected Adjacent Day
-.calendar-day.calendar-day-active.calendar-day-adjacent-day {
-  color: globals.$ion-text-default;
+.calendar-day:active {
+  background: globals.$ion-semantics-primary-300;
 }
 
 // Time / Header
@@ -216,6 +203,7 @@
 
 // Calendar / Footer / Action Buttons
 // -----------------------------------
+
 :host .datetime-buttons ion-buttons,
 .datetime-action-buttons .datetime-action-buttons-container {
   flex-flow: column;

core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts

@@ -4,7 +4,7 @@ import { configs, test } from '@utils/test/playwright';
 /**
  * This behavior does not vary across directions
  */
-configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('datetime: show adjacent days'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto('/src/components/datetime/test/show-adjacent-days', config);

core/src/components/header/header.ionic.scss

@@ -17,16 +17,3 @@ ion-toolbar + ion-toolbar {
   --padding-start: #{globals.$ion-space-400};
   --padding-end: #{globals.$ion-space-400};
 }
-
-@supports (backdrop-filter: blur(0)) {
-  .header-background {
-    @include globals.position(0, 0, 0, 0);
-
-    position: absolute;
-
-    backdrop-filter: saturate(180%) blur(globals.$ion-scale-100);
-  }
-  .header-translucent-ionic ion-toolbar {
-    --opacity: 0.7;
-  }
-}

core/src/components/header/header.tsx

@@ -55,7 +55,7 @@ export class Header implements ComponentInterface {
 
   /**
    * If `true`, the header will be translucent.
-   * Only applies when the theme is `"ios"` or `"ionic"` and the device supports
+   * Only applies when the theme is `"ios"` and the device supports
    * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
    *
    * Note: In order to scroll content behind the header, the `fullscreen`
@@ -239,7 +239,7 @@ export class Header implements ComponentInterface {
         }}
         {...inheritedAttributes}
       >
-        {theme !== 'md' && translucent && <div class="header-background"></div>}
+        {theme === 'ios' && translucent && <div class="header-background"></div>}
         <slot></slot>
       </Host>
     );

core/src/components/header/test/fade/header.e2e.ts

@@ -2,9 +2,9 @@ import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
 /**
- * Translucent effect is only available in iOS and Ionic mode.
+ * Translucent effect is only available in iOS mode.
  */
-configs({ modes: ['ios', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('header: fade'), () => {
     test('should not have visual regressions with fade header', async ({ page }) => {
       await page.goto('/src/components/header/test/fade', config);

core/src/components/modal/test/sheet/index.html

@@ -196,10 +196,7 @@
         element.innerHTML = `
       <ion-header>
         <ion-toolbar>
-          <ion-title>Super Modal</ion-title>
-          <ion-buttons slot="end">
-            <ion-button class="dismiss">Dismiss Modal</ion-button>
-          </ion-buttons>
+          Super Modal
         </ion-toolbar>
       </ion-header>
       <ion-content>
@@ -209,7 +206,7 @@
       </ion-content>
       <ion-footer>
         <ion-toolbar>
-          <ion-title>Footer</ion-title>
+          <ion-button>Footer</ion-button>
         </ion-toolbar>
       </ion-footer>
       `;

core/src/components/modal/test/sheet/modal.e2e.ts

@@ -1,31 +1,29 @@
 import { expect } from '@playwright/test';
 import { configs, test, dragElementBy } from '@utils/test/playwright';
 
-configs({ modes: ['ios', 'md', 'ionic-ios', 'ionic-md'], directions: ['ltr'] }).forEach(
-  ({ title, screenshot, config }) => {
-    test.describe(title('sheet modal: rendering'), () => {
-      test('should not have visual regressions', async ({ page }) => {
-        await page.goto('/src/components/modal/test/sheet', config);
-        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('sheet modal: rendering'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto('/src/components/modal/test/sheet', config);
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
 
-        await page.click('#sheet-modal');
+      await page.click('#sheet-modal');
 
-        await ionModalDidPresent.next();
+      await ionModalDidPresent.next();
 
-        await expect(page).toHaveScreenshot(screenshot(`modal-sheet-present`), {
-          /**
-           * Animations must be enabled to capture the screenshot.
-           * By default, animations are disabled with toHaveScreenshot,
-           * and when capturing the screenshot will call animation.finish().
-           * This will cause the modal to close and the screenshot capture
-           * to be invalid.
-           */
-          animations: 'allow',
-        });
+      await expect(page).toHaveScreenshot(screenshot(`modal-sheet-present`), {
+        /**
+         * Animations must be enabled to capture the screenshot.
+         * By default, animations are disabled with toHaveScreenshot,
+         * and when capturing the screenshot will call animation.finish().
+         * This will cause the modal to close and the screenshot capture
+         * to be invalid.
+         */
+        animations: 'allow',
       });
     });
-  }
-);
+  });
+});
 
 configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('sheet modal: half screen rendering'), () => {
@@ -64,7 +62,7 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
   });
 });
 
-configs({ modes: ['ios', 'ionic-ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('sheet modal: backdrop'), () => {
     test.beforeEach(async ({ page }) => {
       await page.goto('/src/components/modal/test/sheet', config);
@@ -177,7 +175,7 @@ configs({ modes: ['ios', 'ionic-ios'], directions: ['ltr'] }).forEach(({ title,
         const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
         const header = page.locator('.modal-sheet ion-header');
 
-        await dragElementBy(header, page, 0, 110);
+        await dragElementBy(header, page, 0, 125);
 
         await ionBreakpointDidChange.next();
 

core/src/components/toolbar/test/basic/toolbar.e2e.ts

@@ -1,29 +1,27 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ modes: ['ios', 'md', 'ionic-md'], palettes: ['light', 'dark'], directions: ['ltr'] }).forEach(
-  ({ title, screenshot, config }) => {
-    test.describe(title('toolbar: basic (LTR only)'), () => {
-      test('should not have visual regressions with text only', async ({ page }) => {
-        await page.setContent(
-          `
+configs({ palettes: ['light', 'dark'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('toolbar: basic (LTR only)'), () => {
+    test('should not have visual regressions with text only', async ({ page }) => {
+      await page.setContent(
+        `
           <ion-header>
             <ion-toolbar>
               <ion-title>Toolbar</ion-title>
             </ion-toolbar>
           </ion-header>
         `,
-          config
-        );
+        config
+      );
 
-        const header = page.locator('ion-header');
-        await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-only`));
-      });
+      const header = page.locator('ion-header');
+      await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-only`));
     });
-  }
-);
+  });
+});
 
-configs({ modes: ['ios', 'md', 'ionic-md'], palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
+configs({ palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('toolbar: basic'), () => {
     test('should truncate long title with ellipsis', async ({ page }) => {
       await page.setContent(
@@ -158,25 +156,5 @@ configs({ modes: ['ios', 'md', 'ionic-md'], palettes: ['light', 'dark'] }).forEa
       const header = page.locator('ion-header');
       await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-icon-buttons`));
     });
-
-    test('should not have visual regressions with text and button inside the content slot', async ({ page }) => {
-      await page.setContent(
-        `
-          <ion-header>
-            <ion-toolbar>
-              <ion-button fill="solid">
-                <ion-icon slot="start" name="person-circle"></ion-icon>
-                Solid
-              </ion-button>
-              <span>Solid</span>
-            </ion-toolbar>
-          </ion-header>
-        `,
-        config
-      );
-
-      const header = page.locator('ion-header');
-      await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-buttons-inside-content`));
-    });
   });
 });