install dev build

.github/CODEOWNERS

@@ -21,22 +21,65 @@
 /packages/angular-server @sean-perkins @thetaPC
 /packages/angular/test @thetaPC
 
+## React
+
+/packages/react/ @amandaejohnston
+/packages/react-router @amandaejohnston
+/packages/react/test-app/
+/packages/react-router/test-app/
+
 ## Vue
 
-/packages/vue/ @thetaPC
+/packages/vue/ @liamdebeasi @thetaPC
 /packages/vue-router/ @liamdebeasi @thetaPC
 /packages/vue/test/ @thetaPC
 /packages/vue-router/__tests__ @thetaPC
 
 # Components
 
-/core/src/components/datetime/ @sean-perkins
+/core/src/components/accordion/ @liamdebeasi
+/core/src/components/accordion-group/ @liamdebeasi
+
+/core/src/components/checkbox/ @amandaejohnston
+
+/core/src/components/datetime/ @liamdebeasi @amandaejohnston @sean-perkins
+/core/src/components/datetime-button/ @liamdebeasi
+
+/core/src/components/item/ @brandyscarney
+
+/core/src/components/menu/ @amandaejohnston
+/core/src/components/menu-toggle/ @amandaejohnston
 
 /core/src/components/nav/ @sean-perkins
 /core/src/components/nav-link/ @sean-perkins
 
+/core/src/components/picker-internal/ @liamdebeasi
+/core/src/components/picker-column-internal/ @liamdebeasi
+
+/core/src/components/radio/ @amandaejohnston
+/core/src/components/radio-group/ @amandaejohnston
+
+/core/src/components/refresher/ @liamdebeasi
+/core/src/components/refresher-content/ @liamdebeasi
+
+/core/src/components/searchbar/ @brandyscarney
+
+/core/src/components/segment/ @brandyscarney
+/core/src/components/segment-button/ @brandyscarney
+
+/core/src/components/skeleton-text/ @brandyscarney
+
 # Utilities
 
+/core/src/utils/animation/ @liamdebeasi
 /core/src/utils/content/ @sean-perkins
 /core/src/utils/gesture/ @liamdebeasi
 /core/src/utils/input-shims/ @liamdebeasi
+/core/src/utils/keyboard/ @liamdebeasi
+/core/src/utils/logging/ @amandaejohnston
+/core/src/utils/sanitization/ @liamdebeasi
+/core/src/utils/tap-click/ @liamdebeasi
+/core/src/utils/transition/ @liamdebeasi
+
+/core/src/css/ @brandyscarney
+/core/src/themes/ @brandyscarney

.github/workflows/assign-issues.yml

@@ -13,6 +13,6 @@ jobs:
       - name: 'Auto-assign issue'
         uses: pozil/auto-assign-issue@edee9537367a8fbc625d27f9e10aa8bad47b8723 # v1.13.0
         with:
-          assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, thetaPC
+          assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, mapsandapps, thetaPC
           numOfAssignee: 1
           allowSelfAssign: false

.github/workflows/release-ionic.yml

@@ -41,8 +41,8 @@ jobs:
       uses: ./.github/workflows/actions/upload-archive
       with:
         name: ionic-docs
-        output: packages/docs/DocsBuild.zip
-        paths: packages/docs/core.json packages/docs/core.d.ts
+        output: docs/DocsBuild.zip
+        paths: docs/core.json docs/core.d.ts
 
   release-docs:
     needs: [release-core]
@@ -53,7 +53,7 @@ jobs:
       uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-docs
-        path: ./packages/docs
+        path: ./docs
         filename: DocsBuild.zip
     - uses: ./.github/workflows/actions/publish-npm
       with:
@@ -61,7 +61,7 @@ jobs:
         tag: ${{ inputs.tag }}
         version: ${{ inputs.version }}
         preid: ${{ inputs.preid }}
-        working-directory: 'packages/docs'
+        working-directory: 'docs'
         token: ${{ secrets.NPM_TOKEN }}
 
   release-angular:

CHANGELOG.md

@@ -3,29 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
-
-
-### Bug Fixes
-
-* **button:** activated outline button in toolbar no longer blends into background on MD dark mode ([#29216](https://github.com/ionic-team/ionic-framework/issues/29216)) ([ee5da7a](https://github.com/ionic-team/ionic-framework/commit/ee5da7a747c0a0b420c5e371a9fe9ec4938d179e))
-* **popover:** viewport can be scrolled if no content present ([#29215](https://github.com/ionic-team/ionic-framework/issues/29215)) ([f08759c](https://github.com/ionic-team/ionic-framework/commit/f08759c2b8256ff66f8d1901bd8e0be4617db262)), closes [#29211](https://github.com/ionic-team/ionic-framework/issues/29211)
-
-
-
-
-
-## [7.8.2](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v7.8.2) (2024-03-27)
-
-
-### Bug Fixes
-
-* **searchbar:** autocapitalize is initialized correctly ([#29197](https://github.com/ionic-team/ionic-framework/issues/29197)) ([8ad66c0](https://github.com/ionic-team/ionic-framework/commit/8ad66c03d777edcab19c97cba696b171acc2d2e8)), closes [#29193](https://github.com/ionic-team/ionic-framework/issues/29193)
-
-
-
-
-
 ## [7.8.1](https://github.com/ionic-team/ionic-framework/compare/v7.8.0...v7.8.1) (2024-03-20)
 
 

core/CHANGELOG.md

@@ -3,29 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
-
-
-### Bug Fixes
-
-* **button:** activated outline button in toolbar no longer blends into background on MD dark mode ([#29216](https://github.com/ionic-team/ionic-framework/issues/29216)) ([ee5da7a](https://github.com/ionic-team/ionic-framework/commit/ee5da7a747c0a0b420c5e371a9fe9ec4938d179e))
-* **popover:** viewport can be scrolled if no content present ([#29215](https://github.com/ionic-team/ionic-framework/issues/29215)) ([f08759c](https://github.com/ionic-team/ionic-framework/commit/f08759c2b8256ff66f8d1901bd8e0be4617db262)), closes [#29211](https://github.com/ionic-team/ionic-framework/issues/29211)
-
-
-
-
-
-## [7.8.2](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v7.8.2) (2024-03-27)
-
-
-### Bug Fixes
-
-* **searchbar:** autocapitalize is initialized correctly ([#29197](https://github.com/ionic-team/ionic-framework/issues/29197)) ([8ad66c0](https://github.com/ionic-team/ionic-framework/commit/8ad66c03d777edcab19c97cba696b171acc2d2e8)), closes [#29193](https://github.com/ionic-team/ionic-framework/issues/29193)
-
-
-
-
-
 ## [7.8.1](https://github.com/ionic-team/ionic-framework/compare/v7.8.0...v7.8.1) (2024-03-20)
 
 

core/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "7.8.3",
+  "version": "7.8.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.8.3",
+      "version": "7.8.1",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^4.12.2",
@@ -27,7 +27,7 @@
         "@stencil/angular-output-target": "^0.8.4",
         "@stencil/react-output-target": "^0.5.3",
         "@stencil/sass": "^3.0.9",
-        "@stencil/vue-output-target": "^0.8.7",
+        "@stencil/vue-output-target": "^0.0.1-dev.11711372539.10de27e3",
         "@types/jest": "^29.5.6",
         "@types/node": "^14.6.0",
         "@typescript-eslint/eslint-plugin": "^6.7.2",
@@ -633,9 +633,9 @@
       "dev": true
     },
     "node_modules/@capacitor/core": {
-      "version": "5.7.4",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.4.tgz",
-      "integrity": "sha512-iZBgvx3o4amzKv5ttA+QHB6i7cxK+/mYpCQd1tnSdipg6ZkvfBhg1HkzhEqHk+I7MNur+QwgYDZho9+ycHRwOw==",
+      "version": "5.7.3",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.3.tgz",
+      "integrity": "sha512-xEuQmP+h0tugl2N+qRcdrUavZydvTnnmtvqu/OtCBb/bKZo2PDRFft7MxuQRE2GxXs6kLy3cvwzhDAHB3a+9mw==",
       "dev": true,
       "dependencies": {
         "tslib": "^2.1.0"
@@ -1793,9 +1793,9 @@
       }
     },
     "node_modules/@stencil/vue-output-target": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.8.tgz",
-      "integrity": "sha512-xrpz92lmTuLgwY9CLgl2Q14+zBXfBuXiRS6uXFPfeaFo0pe+do8cZitOOQ8i8tcoCa/tAqgD9B9CD+yQehSIGg==",
+      "version": "0.0.1-dev.11711372539.10de27e3",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.0.1-dev.11711372539.10de27e3.tgz",
+      "integrity": "sha512-TOF8daeP3pztr7mvKOZc9y+MULV3ZFpEtJMO/oVxy7EOxrOV8ZgbfsDMGE9g1UY8YZAhOZCfPUgiL4NcMqYY/Q==",
       "dev": true,
       "peerDependencies": {
         "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
@@ -10416,9 +10416,9 @@
       "dev": true
     },
     "@capacitor/core": {
-      "version": "5.7.4",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.4.tgz",
-      "integrity": "sha512-iZBgvx3o4amzKv5ttA+QHB6i7cxK+/mYpCQd1tnSdipg6ZkvfBhg1HkzhEqHk+I7MNur+QwgYDZho9+ycHRwOw==",
+      "version": "5.7.3",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.3.tgz",
+      "integrity": "sha512-xEuQmP+h0tugl2N+qRcdrUavZydvTnnmtvqu/OtCBb/bKZo2PDRFft7MxuQRE2GxXs6kLy3cvwzhDAHB3a+9mw==",
       "dev": true,
       "requires": {
         "tslib": "^2.1.0"
@@ -11248,9 +11248,9 @@
       "requires": {}
     },
     "@stencil/vue-output-target": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.8.tgz",
-      "integrity": "sha512-xrpz92lmTuLgwY9CLgl2Q14+zBXfBuXiRS6uXFPfeaFo0pe+do8cZitOOQ8i8tcoCa/tAqgD9B9CD+yQehSIGg==",
+      "version": "0.0.1-dev.11711372539.10de27e3",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.0.1-dev.11711372539.10de27e3.tgz",
+      "integrity": "sha512-TOF8daeP3pztr7mvKOZc9y+MULV3ZFpEtJMO/oVxy7EOxrOV8ZgbfsDMGE9g1UY8YZAhOZCfPUgiL4NcMqYY/Q==",
       "dev": true,
       "requires": {}
     },

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.8.3",
+  "version": "7.8.1",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -49,7 +49,7 @@
     "@stencil/angular-output-target": "^0.8.4",
     "@stencil/react-output-target": "^0.5.3",
     "@stencil/sass": "^3.0.9",
-    "@stencil/vue-output-target": "^0.8.7",
+    "@stencil/vue-output-target": "^0.0.1-dev.11711372539.10de27e3",
     "@types/jest": "^29.5.6",
     "@types/node": "^14.6.0",
     "@typescript-eslint/eslint-plugin": "^6.7.2",

core/src/components/button/button.ios.scss

@@ -212,12 +212,3 @@
 :host(.button-solid.ion-color.ion-activated) .button-native::after {
   background: #{current-color(shade)};
 }
-
-
-// Activated Button in Toolbar
-// --------------------------------------------------
-
-:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
-  background: var(--ion-toolbar-color, var(--color));
-  color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
-}

core/src/components/button/button.md.scss

@@ -160,12 +160,3 @@
     background: #{current-color(base)};
   }
 }
-
-
-// Activated Button in Toolbar
-// --------------------------------------------------
-
-:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
-  background: var(--ion-toolbar-background, var(--color));
-  color: #{var(--ion-toolbar-color, var(--background), ion-color(primary, contrast))};
-}

core/src/components/button/button.scss

@@ -331,3 +331,11 @@ ion-ripple-effect {
   background: #{var(--ion-toolbar-color, var(--background))};
   color: #{var(--ion-toolbar-background, var(--color))};
 }
+
+// Activated Button in Toolbar
+// --------------------------------------------------
+
+:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
+  background: var(--ion-toolbar-color, var(--color));
+  color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
+}

core/src/components/popover/popover.scss

@@ -101,6 +101,8 @@
   display: flex;
 
   flex-direction: column;
+
+  overflow: hidden;
 }
 
 // Nested Popovers

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

@@ -48,98 +48,6 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
  * Translucent popovers are only available on iOS
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('popover: scrolling'), async () => {
-    test.beforeEach(({ skip }) => {
-      test.info().annotations.push({
-        type: 'issue',
-        description: 'https://github.com/ionic-team/ionic-framework/issues/29211',
-      });
-      // We are testing if Ionic sets overflow is set correctly on elements,
-      // so we do not need to test across browsers
-      skip.browser('webkit', 'Behavior does not vary across browsers');
-      skip.browser('firefox', 'Behavior does not vary across browsers');
-    });
-    test('should scroll to bottom without IonContent', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          ion-popover {
-            --height: 150px;
-          }
-        </style>
-        <ion-popover>
-          <p>Text</p>
-          <p>Text</p>
-          <p>Text</p>
-          <p>Text</p>
-          <p>Text</p>
-          <p>Text</p>
-          <p>Text</p>
-          <p>Text</p>
-          <p>Text</p>
-          <p>Text</p>
-        </ion-popover>
-      `,
-        config
-      );
-
-      const popover = page.locator('ion-popover');
-      const viewport = popover.locator('.popover-viewport');
-      const p = popover.locator('p');
-      const lastP = await p.last();
-
-      await popover.evaluate((el: HTMLIonPopoverElement) => el.present());
-
-      await expect(lastP).not.toBeInViewport();
-
-      // hover over viewport and scroll to bottom
-      await viewport.hover();
-      await page.mouse.wheel(0, 500);
-
-      await expect(lastP).toBeInViewport();
-    });
-    test('should scroll to bottom with IonContent', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          ion-popover {
-            --height: 150px;
-          }
-        </style>
-        <ion-popover>
-          <ion-content>
-            <p>Text</p>
-            <p>Text</p>
-            <p>Text</p>
-            <p>Text</p>
-            <p>Text</p>
-            <p>Text</p>
-            <p>Text</p>
-            <p>Text</p>
-            <p>Text</p>
-            <p>Text</p>
-          </ion-content>
-        </ion-popover>
-      `,
-        config
-      );
-
-      const popover = page.locator('ion-popover');
-      const content = popover.locator('ion-content');
-      const p = popover.locator('p');
-      const lastP = await p.last();
-
-      await popover.evaluate((el: HTMLIonPopoverElement) => el.present());
-
-      await expect(lastP).not.toBeInViewport();
-
-      // hover over viewport and scroll to bottom
-      await content.hover();
-      await page.mouse.wheel(0, 500);
-
-      await expect(lastP).toBeInViewport();
-    });
-  });
   test.describe(title('popover: translucent variants'), async () => {
     let popoverFixture!: PopoverFixture;
     test.beforeEach(async ({ page }) => {

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

@@ -1,160 +1,14 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ themes: ['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
-      );
-
-      const header = page.locator('ion-header');
-      await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-only`));
-    });
-  });
-});
-
-configs({ themes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
+configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('toolbar: basic'), () => {
-    test('should truncate long title with ellipsis', async ({ page }) => {
-      await page.setContent(
-        `
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
-            </ion-toolbar>
-          </ion-header>
-        `,
-        config
-      );
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/toolbar/test/basic`, config);
 
+      // capture both header toolbars at once, but don't include all the white space in the ion-content
       const header = page.locator('ion-header');
-      await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-long-text`));
-    });
-
-    test('should not have visual regressions with icon-only buttons', async ({ page }) => {
-      await page.setContent(
-        `
-          <ion-header>
-            <ion-toolbar>
-              <ion-buttons slot="secondary">
-                <ion-button>
-                  <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-                </ion-button>
-                <ion-button>
-                  <ion-icon slot="icon-only" name="search"></ion-icon>
-                </ion-button>
-              </ion-buttons>
-              <ion-buttons slot="primary">
-                <ion-button color="secondary">
-                  <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-                </ion-button>
-              </ion-buttons>
-              <ion-title>Toolbar</ion-title>
-            </ion-toolbar>
-            <ion-toolbar>
-              <ion-buttons slot="secondary">
-                <ion-button class="ion-activated">
-                  <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-                </ion-button>
-                <ion-button class="ion-activated">
-                  <ion-icon slot="icon-only" name="search"></ion-icon>
-                </ion-button>
-              </ion-buttons>
-              <ion-buttons slot="primary">
-                <ion-button color="secondary" class="ion-activated">
-                  <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-                </ion-button>
-              </ion-buttons>
-              <ion-title>Activated Buttons</ion-title>
-            </ion-toolbar>
-          </ion-header>
-        `,
-        config
-      );
-
-      const header = page.locator('ion-header');
-      await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-icon-buttons`));
-    });
-
-    test('should not have visual regressions with buttons with icons and text', async ({ page }) => {
-      await page.setContent(
-        `
-          <ion-header>
-            <ion-toolbar>
-              <ion-buttons slot="secondary">
-                <ion-button fill="solid">
-                  <ion-icon slot="start" name="person-circle"></ion-icon>
-                  Solid
-                </ion-button>
-              </ion-buttons>
-              <ion-title>Solid</ion-title>
-              <ion-buttons slot="primary">
-                <ion-button fill="solid" color="secondary">
-                  Help
-                  <ion-icon slot="end" name="help-circle"></ion-icon>
-                </ion-button>
-              </ion-buttons>
-            </ion-toolbar>
-            <ion-toolbar>
-              <ion-buttons slot="secondary">
-                <ion-button fill="solid" class="ion-activated">
-                  <ion-icon slot="start" name="person-circle"></ion-icon>
-                  Solid
-                </ion-button>
-              </ion-buttons>
-              <ion-title>Solid Activated</ion-title>
-              <ion-buttons slot="primary">
-                <ion-button fill="solid" color="secondary" class="ion-activated">
-                  Help
-                  <ion-icon slot="end" name="help-circle"></ion-icon>
-                </ion-button>
-              </ion-buttons>
-            </ion-toolbar>
-            <ion-toolbar>
-              <ion-buttons slot="secondary">
-                <ion-button fill="outline">
-                  <ion-icon slot="start" name="star"></ion-icon>
-                  Star
-                </ion-button>
-              </ion-buttons>
-              <ion-title>Outline</ion-title>
-              <ion-buttons slot="primary">
-                <ion-button color="secondary" fill="outline">
-                  Info
-                  <ion-icon slot="end" name="information-circle"></ion-icon>
-                </ion-button>
-              </ion-buttons>
-            </ion-toolbar>
-            <ion-toolbar>
-              <ion-buttons slot="secondary">
-                <ion-button fill="outline" class="ion-activated">
-                  <ion-icon slot="start" name="star"></ion-icon>
-                  Star
-                </ion-button>
-              </ion-buttons>
-              <ion-title>Outline Activated</ion-title>
-              <ion-buttons slot="primary">
-                <ion-button color="secondary" fill="outline" class="ion-activated">
-                  Info
-                  <ion-icon slot="end" name="information-circle"></ion-icon>
-                </ion-button>
-              </ion-buttons>
-            </ion-toolbar>
-          </ion-header>
-        `,
-        config
-      );
-
-      const header = page.locator('ion-header');
-      await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-icon-buttons`));
+      await expect(header).toHaveScreenshot(screenshot(`toolbar-basic`));
     });
   });
 });