diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 915776e762..12f9f4516d 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -13,73 +13,7 @@ * @ionic-team/framework -# Frameworks - -## Angular - -/packages/angular/ @sean-perkins @thetaPC -/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/ @liamdebeasi @thetaPC -/packages/vue-router/ @liamdebeasi @thetaPC -/packages/vue/test/ @thetaPC -/packages/vue-router/__tests__ @thetaPC - -# Components - -/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/ @liamdebeasi -/core/src/components/picker-column/ @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 diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index c565dcac8c..29910b7b2b 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -25,7 +25,7 @@ Issue number: resolves # If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. - 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. + 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> diff --git a/.github/workflows/assign-issues.yml b/.github/workflows/assign-issues.yml index da273a8c4b..b0fc3ee99e 100644 --- a/.github/workflows/assign-issues.yml +++ b/.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, mapsandapps, thetaPC + assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, thetaPC numOfAssignee: 1 allowSelfAssign: false diff --git a/.github/workflows/release-ionic.yml b/.github/workflows/release-ionic.yml index 4532d49955..4be91285a4 100644 --- a/.github/workflows/release-ionic.yml +++ b/.github/workflows/release-ionic.yml @@ -41,8 +41,8 @@ jobs: uses: ./.github/workflows/actions/upload-archive with: name: ionic-docs - output: docs/DocsBuild.zip - paths: docs/core.json docs/core.d.ts + output: packages/docs/DocsBuild.zip + paths: packages/docs/core.json packages/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: ./docs + path: ./packages/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: 'docs' + working-directory: 'packages/docs' token: ${{ secrets.NPM_TOKEN }} release-angular: diff --git a/CHANGELOG.md b/CHANGELOG.md index bf16a543ed..62a8d92890 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,67 @@ 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) + + + + + +# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27) + +**Note:** Version bump only for package ionic-framework + + + + + +# [8.0.0-beta.4](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.3...v8.0.0-beta.4) (2024-03-27) + + +### Bug Fixes + +* **angular:** schematics account for new theme files ([#29185](https://github.com/ionic-team/ionic-framework/issues/29185)) ([b0a10df](https://github.com/ionic-team/ionic-framework/commit/b0a10dfa56a65ee3905cc2c3d48d2221a42f222f)) + + +### Code Refactoring + +* **haptics:** remove cordova haptics support ([#29186](https://github.com/ionic-team/ionic-framework/issues/29186)) ([9efeb0a](https://github.com/ionic-team/ionic-framework/commit/9efeb0ad31aadee5f5ae542641d928ecf93fe82a)) +* **searchbar:** autocapitalize defaults to off ([#29107](https://github.com/ionic-team/ionic-framework/issues/29107)) ([6e477b7](https://github.com/ionic-team/ionic-framework/commit/6e477b743e41b2b37627c8208901704f599b762a)) + + +### Features + +* **button:** add circular shape as round ([#29161](https://github.com/ionic-team/ionic-framework/issues/29161)) ([44529f0](https://github.com/ionic-team/ionic-framework/commit/44529f0a62f1b1ce42750a20f19e829b2789febd)) +* **input:** add input-password-toggle component ([#29175](https://github.com/ionic-team/ionic-framework/issues/29175)) ([6c500fd](https://github.com/ionic-team/ionic-framework/commit/6c500fd6b2e2553c11fcddc9d86ac9a29f76e172)) +* remove css animations support for ionic animations ([#29123](https://github.com/ionic-team/ionic-framework/issues/29123)) ([892594d](https://github.com/ionic-team/ionic-framework/commit/892594de0665e8fc5c8a737d292812842ea03d64)) + + +### BREAKING CHANGES + +* **searchbar:** The `autocapitalize` property on Searchbar now defaults to `'off'`. +* **haptics:** Support for the Cordova Haptics plugin has been removed. Components that integrate with haptics, such as `ion-picker` and `ion-toggle`, will continue to function but will no longer play haptics in Cordova environments. Developers should migrate to Capacitor to continue to have haptics in these components. + + + + + +## [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) + + + + + # [8.0.0-beta.3](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.2...v8.0.0-beta.3) (2024-03-20) diff --git a/README.md b/README.md index 3ca6f6ca97..091377a155 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ Ionic Framework is released under the MIT license. - + PRs welcome! @@ -38,7 +38,7 @@ Documentation · - Contribute + Contribute · Blog
@@ -88,7 +88,7 @@ The Ionic Conference App is a full featured Ionic app. It is the perfect startin ### Contributing Thanks for your interest in contributing! Read up on our guidelines for -[contributing](https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md) +[contributing](https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md) and then look through our issues with a [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) label. diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md index c4b3a79ed9..f36658520d 100644 --- a/core/CHANGELOG.md +++ b/core/CHANGELOG.md @@ -3,6 +3,63 @@ 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) + + + + + +# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27) + +**Note:** Version bump only for package @ionic/core + + + + + +# [8.0.0-beta.4](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.3...v8.0.0-beta.4) (2024-03-27) + + +### Code Refactoring + +* **haptics:** remove cordova haptics support ([#29186](https://github.com/ionic-team/ionic-framework/issues/29186)) ([9efeb0a](https://github.com/ionic-team/ionic-framework/commit/9efeb0ad31aadee5f5ae542641d928ecf93fe82a)) +* **searchbar:** autocapitalize defaults to off ([#29107](https://github.com/ionic-team/ionic-framework/issues/29107)) ([6e477b7](https://github.com/ionic-team/ionic-framework/commit/6e477b743e41b2b37627c8208901704f599b762a)) + + +### Features + +* **button:** add circular shape as round ([#29161](https://github.com/ionic-team/ionic-framework/issues/29161)) ([44529f0](https://github.com/ionic-team/ionic-framework/commit/44529f0a62f1b1ce42750a20f19e829b2789febd)) +* **input:** add input-password-toggle component ([#29175](https://github.com/ionic-team/ionic-framework/issues/29175)) ([6c500fd](https://github.com/ionic-team/ionic-framework/commit/6c500fd6b2e2553c11fcddc9d86ac9a29f76e172)) +* remove css animations support for ionic animations ([#29123](https://github.com/ionic-team/ionic-framework/issues/29123)) ([892594d](https://github.com/ionic-team/ionic-framework/commit/892594de0665e8fc5c8a737d292812842ea03d64)) + + +### BREAKING CHANGES + +* **searchbar:** The `autocapitalize` property on Searchbar now defaults to `'off'`. +* **haptics:** Support for the Cordova Haptics plugin has been removed. Components that integrate with haptics, such as `ion-picker` and `ion-toggle`, will continue to function but will no longer play haptics in Cordova environments. Developers should migrate to Capacitor to continue to have haptics in these components. + + + + + +## [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) + + + + + # [8.0.0-beta.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v8.0.0-beta.3) (2024-03-20) diff --git a/core/api.txt b/core/api.txt index 58d155d52e..8ebc72865c 100644 --- a/core/api.txt +++ b/core/api.txt @@ -282,6 +282,7 @@ ion-card,prop,mode,"ios" | "md",undefined,false,false ion-card,prop,rel,string | undefined,undefined,false,false ion-card,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-card,prop,routerDirection,"back" | "forward" | "root",'forward',false,false +ion-card,prop,shape,"rectangular" | "round" | undefined,undefined,false,true ion-card,prop,target,string | undefined,undefined,false,false ion-card,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-card,prop,type,"button" | "reset" | "submit",'button',false,false @@ -388,6 +389,7 @@ ion-col,css-prop,--ion-grid-columns ion-content,shadow ion-content,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true +ion-content,prop,fixedSlotPlacement,"after" | "before",'after',false,false ion-content,prop,forceOverscroll,boolean | undefined,undefined,false,false ion-content,prop,fullscreen,boolean,false,false,false ion-content,prop,mode,"ios" | "md",undefined,false,false @@ -599,6 +601,7 @@ ion-input,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "h ion-input,prop,autocorrect,"off" | "on",'off',false,false ion-input,prop,autofocus,boolean,false,false,false ion-input,prop,clearInput,boolean,false,false,false +ion-input,prop,clearInputIcon,string | undefined,undefined,false,false ion-input,prop,clearOnEdit,boolean | undefined,undefined,false,false ion-input,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true ion-input,prop,counter,boolean,false,false,false diff --git a/core/package-lock.json b/core/package-lock.json index 7ac901fb03..30005a9858 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ionic/core", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/core", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "license": "MIT", "dependencies": { "@stencil/core": "^4.12.2", @@ -612,9 +612,9 @@ "dev": true }, "node_modules/@capacitor/core": { - "version": "5.7.3", - "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.3.tgz", - "integrity": "sha512-xEuQmP+h0tugl2N+qRcdrUavZydvTnnmtvqu/OtCBb/bKZo2PDRFft7MxuQRE2GxXs6kLy3cvwzhDAHB3a+9mw==", + "version": "5.7.4", + "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.4.tgz", + "integrity": "sha512-iZBgvx3o4amzKv5ttA+QHB6i7cxK+/mYpCQd1tnSdipg6ZkvfBhg1HkzhEqHk+I7MNur+QwgYDZho9+ycHRwOw==", "dev": true, "dependencies": { "tslib": "^2.1.0" @@ -1832,9 +1832,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.12.6", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.6.tgz", - "integrity": "sha512-15JO2TdaxGVKNdLZb/2TtDa+juj3XGD/V0y/disgdzYYSnajgSh06nwODfdHz9eTUh1Hisz+KIo857I1rCZrfg==", + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.14.0.tgz", + "integrity": "sha512-+s0u/KsNolXZ7tC2hEMgMA3jaNaqOhZvYKwSzjQbc0Wv+cB481Isxzo7ifgEWRYqsJzNSyqhO6cyu/EJrGGTdg==", "bin": { "stencil": "bin/stencil" }, @@ -1866,9 +1866,9 @@ } }, "node_modules/@stencil/vue-output-target": { - "version": "0.8.7", - "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.7.tgz", - "integrity": "sha512-hgOzbKKgLdCFrhLpmaw/qQrPSXl6hZ09K+j3p/iWh3esq6sxnwuW1PJKLniwkT4Z/JlDIk6stGPGQYi+WE5I2Q==", + "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==", "dev": true, "peerDependencies": { "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0" @@ -10947,9 +10947,9 @@ "dev": true }, "@capacitor/core": { - "version": "5.7.3", - "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.3.tgz", - "integrity": "sha512-xEuQmP+h0tugl2N+qRcdrUavZydvTnnmtvqu/OtCBb/bKZo2PDRFft7MxuQRE2GxXs6kLy3cvwzhDAHB3a+9mw==", + "version": "5.7.4", + "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.4.tgz", + "integrity": "sha512-iZBgvx3o4amzKv5ttA+QHB6i7cxK+/mYpCQd1tnSdipg6ZkvfBhg1HkzhEqHk+I7MNur+QwgYDZho9+ycHRwOw==", "dev": true, "requires": { "tslib": "^2.1.0" @@ -11826,9 +11826,9 @@ "requires": {} }, "@stencil/core": { - "version": "4.12.6", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.6.tgz", - "integrity": "sha512-15JO2TdaxGVKNdLZb/2TtDa+juj3XGD/V0y/disgdzYYSnajgSh06nwODfdHz9eTUh1Hisz+KIo857I1rCZrfg==" + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.14.0.tgz", + "integrity": "sha512-+s0u/KsNolXZ7tC2hEMgMA3jaNaqOhZvYKwSzjQbc0Wv+cB481Isxzo7ifgEWRYqsJzNSyqhO6cyu/EJrGGTdg==" }, "@stencil/react-output-target": { "version": "0.5.3", @@ -11845,9 +11845,9 @@ "requires": {} }, "@stencil/vue-output-target": { - "version": "0.8.7", - "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.7.tgz", - "integrity": "sha512-hgOzbKKgLdCFrhLpmaw/qQrPSXl6hZ09K+j3p/iWh3esq6sxnwuW1PJKLniwkT4Z/JlDIk6stGPGQYi+WE5I2Q==", + "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==", "dev": true, "requires": {} }, diff --git a/core/package.json b/core/package.json index e1dc1b29c0..0d22b38770 100644 --- a/core/package.json +++ b/core/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/core", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "description": "Base components for Ionic", "keywords": [ "ionic", @@ -79,7 +79,7 @@ "build.tokens": "node ./scripts/tokens.js && npm run lint.sass.fix", "clean": "node scripts/clean.js", "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css", - "css.sass": "sass --embed-sources src/css:./css", + "css.sass": "sass --embed-sources --style compressed src/css:./css", "eslint": "eslint src", "lint": "npm run lint.ts && npm run lint.sass && npm run prettier -- --write --cache", "lint.fix": "npm run lint.ts.fix && npm run lint.sass.fix && npm run prettier -- --write --cache", diff --git a/core/scripts/readme.md b/core/scripts/readme.md index 1611f4bccd..2b5b55f748 100644 --- a/core/scripts/readme.md +++ b/core/scripts/readme.md @@ -1,44 +1,4 @@ -## Build +# Core Scripts -### 1. Clone ionic - - git@github.com:ionic-team/ionic.git - cd ionic - -### 2. Run `npm install` - - cd core - npm install - - -Notice that `@ionic/core` lives in `core`. - -### 3. Run `npm start` - -Make sure you are inside the `core` directory. - - npm start - -With the `dev` command, Ionic components will be built with [Stencil](https://stenciljs.com/), changes to source files are watched, a local http server will startup, and http://localhost:3333/ will open in a browser. - -### 4. Preview - -Navigate to http://localhost:3333/src/components/. Each component has small e2e apps found in the `test` directory, for example: http://localhost:3333/src/components/button/test/basic - -As changes are made in an editor to source files, the e2e app will live-reload. - -## How to contribute - -1. `npm start` allows you to modify the components and have live reloading, just like another ionic app. - -2. When everything looks good, run `npm run validate` to verify the tests linter and production build passes. - - -# Deploy - -1. `npm run prepare.deploy` -2. Review/update changelog -3. Commit updates using the package name and version number as the commit message. -4. `npm run deploy` -5. :tada: +This file has been moved to [/docs/core/testing/preview-changes.md](/docs/core/testing/preview-changes.md). diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 348b2add35..7983b2e161 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -618,6 +618,10 @@ export namespace Components { * When using a router, it specifies the transition direction when navigating to another page using `href`. */ "routerDirection": RouterDirection; + /** + * Set to `"round"` for a card with more rounded corners, or `"rectangular"` for a card without rounded corners. + */ + "shape"?: 'round' | 'rectangular'; /** * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. */ @@ -870,6 +874,10 @@ export namespace Components { * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). */ "color"?: Color; + /** + * Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to `'before'`. + */ + "fixedSlotPlacement": 'after' | 'before'; /** * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting. */ @@ -1346,6 +1354,10 @@ export namespace Components { * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. */ "clearInput": boolean; + /** + * The icon to use for the clear button. Only applies when `clearInput` is set to `true`. + */ + "clearInputIcon"?: string; /** * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. */ @@ -5838,6 +5850,10 @@ declare namespace LocalJSX { * When using a router, it specifies the transition direction when navigating to another page using `href`. */ "routerDirection"?: RouterDirection; + /** + * Set to `"round"` for a card with more rounded corners, or `"rectangular"` for a card without rounded corners. + */ + "shape"?: 'round' | 'rectangular'; /** * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. */ @@ -6102,6 +6118,10 @@ declare namespace LocalJSX { * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). */ "color"?: Color; + /** + * Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to `'before'`. + */ + "fixedSlotPlacement"?: 'after' | 'before'; /** * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting. */ @@ -6586,6 +6606,10 @@ declare namespace LocalJSX { * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. */ "clearInput"?: boolean; + /** + * The icon to use for the clear button. Only applies when `clearInput` is set to `true`. + */ + "clearInputIcon"?: string; /** * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. */ diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss index d157e0cc88..669edc7f5f 100644 --- a/core/src/components/button/button.ios.scss +++ b/core/src/components/button/button.ios.scss @@ -149,7 +149,20 @@ } ::slotted(ion-icon[slot="icon-only"]) { - font-size: 1.125em; + /** + * The values were provided through a native iOS app. + * min font size: 15px, default font size: 18px, max font size: 43px + * + * Since the `ion-button` uses `rem` for the font size, we can't + * just pass the desired icon font size in `em` to the ` + * dynamic-font-clamp`. Instead, we need to adjust the base size + * to account for the ion-button` font size. + * + * For example, if the default font size of `ion-button` is 16px + * (derived from rem), then the base size can use the default font + * size of the icon. + */ + font-size: dynamic-font-clamp(0.84, 18px, 2.39, 1em); } :host(.button-small.button-has-icon-only) { @@ -157,11 +170,23 @@ min-width: clamp(23px, 2.16em, 54px); // TODO(FW-6053): replace em value with the min-height variable. min-height: clamp(23px, 2.16em, 54px); - } :host(.button-small) ::slotted(ion-icon[slot="icon-only"]) { - font-size: 1.4em; + /** + * The values were provided through a native iOS app. + * min font size: 12px, default font size: 17px, max font size: 40px + * + * Since the `ion-button` uses `rem` for the font size, we can't + * just pass the desired icon font size in `em` to the ` + * dynamic-font-clamp`. Instead, we need to adjust the base size + * to account for the ion-button` font size. + * + * For example, if the default font size of `ion-button` is 13px + * (derived from rem) and the default font size of the icon is + * 17px, then the base size would need to be increased. + */ + font-size: dynamic-font-clamp(0.58, 20.93px, 1.92, 1em); } :host(.button-large.button-has-icon-only) { @@ -172,7 +197,20 @@ } :host(.button-large) ::slotted(ion-icon[slot="icon-only"]) { - font-size: 1em; + /** + * The values were provided through a native iOS app. + * min font size: 15px, default font size: 18px, max font size: 43px + * + * Since the `ion-button` uses `rem` for the font size, we can't + * just pass the desired icon font size in `em` to the ` + * dynamic-font-clamp`. Instead, we need to adjust the base size + * to account for the ion-button` font size. + * + * For example, if the default font size of `ion-button` is 20px + * (derived from rem) and the default font size of the icon is + * 18px, then the base size would need to be decreased. + */ + font-size: dynamic-font-clamp(1.05, 14.4px, 2.99, 1em); } // iOS Button Focused @@ -247,3 +285,12 @@ :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))}; +} diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss index b73065a2a0..c541d5b34b 100644 --- a/core/src/components/button/button.md.scss +++ b/core/src/components/button/button.md.scss @@ -142,7 +142,21 @@ } ::slotted(ion-icon[slot="icon-only"]) { - font-size: 1.6em; + /** + * The values were provided through MD design, + * large and small are based on the iOS sizes. + * min font size: 15px, default font size: 22.4px, max font size: 43px + * + * Since the `ion-button` uses `rem` for the font size, we can't + * just pass the desired icon font size in `em` to the ` + * dynamic-font-clamp`. Instead, we need to adjust the base size + * to account for the ion-button` font size. + * + * For example, if the default font size of `ion-button` is 14px + * (derived from rem) and the default font size of the icon is + * 22.4px, then the base size would need to be increased. + */ + font-size: dynamic-font-clamp(0.59, 25.6px, 1.68, 1em); } :host(.button-small.button-has-icon-only) { @@ -153,7 +167,21 @@ } :host(.button-small) ::slotted(ion-icon[slot="icon-only"]) { - font-size: 1.23em; + /** + * The values were provided through MD design, + * large and small are based on the iOS sizes. + * min font size: 12px, default font size: 16px, max font size: 40px + * + * Since the `ion-button` uses `rem` for the font size, we can't + * just pass the desired icon font size in `em` to the ` + * dynamic-font-clamp`. Instead, we need to adjust the base size + * to account for the ion-button` font size. + * + * For example, if the default font size of `ion-button` is 13px + * (derived from rem) and the default font size of the icon is + * 16px, then the base size would need to be increased. + */ + font-size: dynamic-font-clamp(0.66, 19.7px, 2.05, 1em); } :host(.button-large.button-has-icon-only) { @@ -164,7 +192,21 @@ } :host(.button-large) ::slotted(ion-icon[slot="icon-only"]) { - font-size: 1.4em; + /** + * The values were provided through MD design, + * large and small are based on the iOS sizes. + * min font size: 15px, default font size: 28px, max font size: 43px + * + * Since the `ion-button` uses `rem` for the font size, we can't + * just pass the desired icon font size in `em` to the ` + * dynamic-font-clamp`. Instead, we need to adjust the base size + * to account for the ion-button` font size. + * + * For example, if the default font size of `ion-button` is 20px + * (derived from rem) and the default font size of the icon is + * 28px, then the base size would need to be increased. + */ + font-size: dynamic-font-clamp(0.67, 22.4px, 1.92, 1em); } // Material Design Button: Hover @@ -196,3 +238,12 @@ 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))}; +} diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss index 99c187beac..acb57319b4 100644 --- a/core/src/components/button/button.scss +++ b/core/src/components/button/button.scss @@ -325,11 +325,3 @@ 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))}; -} diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Chrome-linux.png index dd26d65fe1..e97152993d 100644 Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Firefox-linux.png index 381c1c8650..e50cab32bc 100644 Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Safari-linux.png index 5d58d23a10..b3d7a18230 100644 Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Chrome-linux.png index e7f22e0438..59cd954c4c 100644 Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Firefox-linux.png index 26d658853e..ae08b4294a 100644 Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Safari-linux.png index 4632a4cab8..ff3d616e4c 100644 Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Safari-linux.png index 61670430f7..ca19dbabff 100644 Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Safari-linux.png index effa8dfac4..ce8d1dfe21 100644 Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Safari-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Chrome-linux.png index 8ddf3c4d2c..556ec23e11 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Firefox-linux.png index 740dc013de..1f5088849b 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Safari-linux.png index 23366f1336..1c36a133c9 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Chrome-linux.png index 0d4f2cedcc..23e3f7c891 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Firefox-linux.png index dfced59ebb..1cd6e3d2c0 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Safari-linux.png index 64abd2f067..a13bf52845 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Chrome-linux.png index 662c58ce0b..97edfd5f15 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Firefox-linux.png index 626798b2ba..b9ef4ecddd 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Safari-linux.png index 77a49a72a1..8990d8923d 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Chrome-linux.png index 59cddc74d5..8991db1534 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Firefox-linux.png index 46a0045606..df18062cb6 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Safari-linux.png index 0cff4c94b5..be1a35da11 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Chrome-linux.png index 462ae469f4..7163200538 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png index 5b90f069bd..d3a4acb8d0 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Safari-linux.png index 98fcc46aea..340373c07d 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Safari-linux.png index f56460f727..4dddfcee33 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/card.ionic.scss b/core/src/components/card/card.ionic.scss new file mode 100755 index 0000000000..0b14ff67d1 --- /dev/null +++ b/core/src/components/card/card.ionic.scss @@ -0,0 +1,28 @@ +@use "../../foundations/ionic.vars.scss" as tokens; +@use "../../themes/ionic.mixins" as mixins; + +// Ionic Card +// -------------------------------------------------- + +:host { + --background: #{tokens.$ionic-color-neutral-0}; + --border-radius: #{tokens.$ionic-border-radius-rounded-small}; + + @include mixins.padding(tokens.$ionic-space-base); + @include mixins.border-radius(var(--border-radius)); + + display: block; + + border: #{tokens.$ionic-border-size-small} solid #{tokens.$ionic-color-neutral-50}; + + background: var(--background); + color: var(--color); +} + +:host(.card-round) { + --border-radius: #{tokens.$ionic-border-radius-rounded-large}; +} + +:host(.card-rectangular) { + --border-radius: #{tokens.$ionic-border-radius-square}; +} diff --git a/core/src/components/card/card.tsx b/core/src/components/card/card.tsx index 4ac9f15c6a..d408ebe4cb 100644 --- a/core/src/components/card/card.tsx +++ b/core/src/components/card/card.tsx @@ -20,7 +20,7 @@ import type { RouterDirection } from '../router/utils/interface'; styleUrls: { ios: 'card.ios.scss', md: 'card.md.scss', - ionic: 'card.md.scss', + ionic: 'card.ionic.scss', }, shadow: true, }) @@ -82,6 +82,11 @@ export class Card implements ComponentInterface, AnchorInterface, ButtonInterfac */ @Prop() routerAnimation: AnimationBuilder | undefined; + /** + * Set to `"round"` for a card with more rounded corners, or `"rectangular"` for a card without rounded corners. + */ + @Prop({ reflect: true }) shape?: 'round' | 'rectangular'; + /** * Specifies where to display the linked URL. * Only applies when an `href` is provided. @@ -131,12 +136,16 @@ export class Card implements ComponentInterface, AnchorInterface, ButtonInterfac } render() { + const { shape } = this; + const theme = getIonTheme(this); return ( { + test.describe(title('card: shape'), () => { + test.describe('default', () => { + test('should not have visual regressions', async ({ page }) => { + await page.goto(`/src/components/card/test/shape`, config); + + const container = page.locator('#default'); + + await expect(container).toHaveScreenshot(screenshot(`card-default`)); + }); + }); + + test.describe('round', () => { + test('should not have visual regressions', async ({ page }) => { + await page.goto(`/src/components/card/test/shape`, config); + + const container = page.locator('#round'); + + await expect(container).toHaveScreenshot(screenshot(`card-round`)); + }); + }); + + test.describe('rectangular', () => { + test('should not have visual regressions', async ({ page }) => { + await page.goto(`/src/components/card/test/shape`, config); + + const container = page.locator('#rectangular'); + + await expect(container).toHaveScreenshot(screenshot(`card-rectangular`)); + }); + }); + }); +}); diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..48fc3a8a76 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..49f04ac1d2 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b517e82218 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..8474b78598 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a6637e561b Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..44afba1111 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6e775bcbde Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..5a30fe5d1f Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..c82f6975b5 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/index.html b/core/src/components/card/test/shape/index.html new file mode 100644 index 0000000000..03f7662693 --- /dev/null +++ b/core/src/components/card/test/shape/index.html @@ -0,0 +1,85 @@ + + + + + Card - Shape + + + + + + + + + + + + + + + + Card - Shape + + + + +

Default

+
+ + + Card Subtitle + Card Title + + + + Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week + in the woods. Wash your spirit clean. + + +
+

Round

+
+ + + Card Subtitle + Card Title + + + + Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week + in the woods. Wash your spirit clean. + + +
+ +

Rectangular

+
+ + + Card Subtitle + Card Title + + + + Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week + in the woods. Wash your spirit clean. + + +
+ + + + diff --git a/core/src/components/card/test/theme-ionic/index.html b/core/src/components/card/test/theme-ionic/index.html new file mode 100644 index 0000000000..1535fb2c6f --- /dev/null +++ b/core/src/components/card/test/theme-ionic/index.html @@ -0,0 +1,78 @@ + + + + + + Card - Theme Ionic + + + + + + + + + + + + + + + Card - Ionic + + + + +

Preview options

+ +

+ + default + Round + Rectangular + +

+ +
+ + + Card Subtitle + Card Title + + + + Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week + in the woods. Wash your spirit clean. + + +
+ + + + + + diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx index 4ca9ed62c6..9fa629574f 100644 --- a/core/src/components/content/content.tsx +++ b/core/src/components/content/content.tsx @@ -78,6 +78,15 @@ export class Content implements ComponentInterface { */ @Prop() fullscreen = false; + /** + * Controls where the fixed content is placed relative to the main content + * in the DOM. This can be used to control the order in which fixed elements + * receive keyboard focus. + * For example, if a FAB in the fixed slot should receive keyboard focus before + * the main page content, set this property to `'before'`. + */ + @Prop() fixedSlotPlacement: 'after' | 'before' = 'after'; + /** * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. * If the content exceeds the bounds of ionContent, nothing will change. @@ -425,7 +434,7 @@ export class Content implements ComponentInterface { } render() { - const { isMainContent, scrollX, scrollY, el } = this; + const { fixedSlotPlacement, isMainContent, scrollX, scrollY, el } = this; const rtl = isRTL(el) ? 'rtl' : 'ltr'; const theme = getIonTheme(this); const mode = getIonMode(this, theme); @@ -449,6 +458,9 @@ export class Content implements ComponentInterface { }} >
(this.backgroundContentEl = el)} id="background-content" part="background">
+ + {fixedSlotPlacement === 'before' ? : null} +
) : null} - + {fixedSlotPlacement === 'after' ? : null} ); } diff --git a/core/src/components/content/test/content.spec.ts b/core/src/components/content/test/content.spec.ts new file mode 100644 index 0000000000..4dcf7f3e0a --- /dev/null +++ b/core/src/components/content/test/content.spec.ts @@ -0,0 +1,31 @@ +import { newSpecPage } from '@stencil/core/testing'; + +import { Content } from '../content'; + +describe('content: fixed slot placement', () => { + it('should should fixed slot after content', async () => { + const page = await newSpecPage({ + components: [Content], + html: '', + }); + + const content = page.body.querySelector('ion-content')!; + const fixedSlot = content.shadowRoot!.querySelector('slot[name="fixed"]')!; + const scrollEl = content.shadowRoot!.querySelector('[part="scroll"]')!; + + expect(fixedSlot.nextElementSibling).not.toBe(scrollEl); + }); + + it('should should fixed slot before content', async () => { + const page = await newSpecPage({ + components: [Content], + html: ``, + }); + + const content = page.body.querySelector('ion-content')!; + const fixedSlot = content.shadowRoot!.querySelector('slot[name="fixed"]')!; + const scrollEl = content.shadowRoot!.querySelector('[part="scroll"]')!; + + expect(fixedSlot.nextElementSibling).toBe(scrollEl); + }); +}); diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index a051707098..6f51d074de 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -543,7 +543,7 @@ export class Datetime implements ComponentInterface { } if (closeOverlay) { - this.closeParentOverlay(); + this.closeParentOverlay(CONFIRM_ROLE); } } @@ -568,7 +568,7 @@ export class Datetime implements ComponentInterface { this.ionCancel.emit(); if (closeOverlay) { - this.closeParentOverlay(); + this.closeParentOverlay(CANCEL_ROLE); } } @@ -618,13 +618,13 @@ export class Datetime implements ComponentInterface { return Array.isArray(activeParts) ? activeParts[0] : activeParts; }; - private closeParentOverlay = () => { + private closeParentOverlay = (role: string) => { const popoverOrModal = this.el.closest('ion-modal, ion-popover') as | HTMLIonModalElement | HTMLIonPopoverElement | null; if (popoverOrModal) { - popoverOrModal.dismiss(); + popoverOrModal.dismiss(undefined, role); } }; @@ -2647,5 +2647,7 @@ export class Datetime implements ComponentInterface { } let datetimeIds = 0; +const CANCEL_ROLE = 'datetime-cancel'; +const CONFIRM_ROLE = 'datetime-confirm'; const WHEEL_ITEM_PART = 'wheel-item'; const WHEEL_ITEM_ACTIVE_PART = `active`; diff --git a/core/src/components/datetime/test/overlay-roles/datetime.e2e.ts b/core/src/components/datetime/test/overlay-roles/datetime.e2e.ts new file mode 100644 index 0000000000..2c7f9b1f8d --- /dev/null +++ b/core/src/components/datetime/test/overlay-roles/datetime.e2e.ts @@ -0,0 +1,41 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => { + test.describe(title('datetime: overlay roles'), () => { + test.beforeEach(async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + }); + test('should pass role to overlay when calling confirm method', async ({ page }) => { + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + const modal = page.locator('ion-modal'); + const datetime = page.locator('ion-datetime'); + + await modal.evaluate((el: HTMLIonModalElement) => el.present()); + + await datetime.evaluate((el: HTMLIonDatetimeElement) => el.confirm(true)); + + await ionModalDidDismiss.next(); + expect(ionModalDidDismiss).toHaveReceivedEventDetail({ data: undefined, role: 'datetime-confirm' }); + }); + test('should pass role to overlay when calling cancel method', async ({ page }) => { + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + const modal = page.locator('ion-modal'); + const datetime = page.locator('ion-datetime'); + + await modal.evaluate((el: HTMLIonModalElement) => el.present()); + + await datetime.evaluate((el: HTMLIonDatetimeElement) => el.cancel(true)); + + await ionModalDidDismiss.next(); + expect(ionModalDidDismiss).toHaveReceivedEventDetail({ data: undefined, role: 'datetime-cancel' }); + }); + }); +}); diff --git a/core/src/components/datetime/test/overlay-roles/index.html b/core/src/components/datetime/test/overlay-roles/index.html new file mode 100644 index 0000000000..c229f4872a --- /dev/null +++ b/core/src/components/datetime/test/overlay-roles/index.html @@ -0,0 +1,66 @@ + + + + + Datetime - Overlay Roles + + + + + + + + + + + + Datetime - Overlay Roles + + + + Present Modal + + + + + diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 24a3551fd0..97d51935a7 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -94,6 +94,11 @@ export class Input implements ComponentInterface { */ @Prop() clearInput = false; + /** + * The icon to use for the clear button. Only applies when `clearInput` is set to `true`. + */ + @Prop() clearInputIcon?: string; + /** * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. */ @@ -683,12 +688,15 @@ export class Input implements ComponentInterface { } render() { - const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus } = this; + const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus, clearInputIcon } = this; const theme = getIonTheme(this); const value = this.getValue(); const inItem = hostContext('ion-item', this.el); const shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem; + const defaultClearIcon = theme === 'ios' ? closeCircle : closeSharp; + const clearIconData = clearInputIcon ?? defaultClearIcon; + const hasValue = this.hasValue(); const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null; @@ -786,7 +794,7 @@ export class Input implements ComponentInterface { }} onClick={this.clearTextInput} > - + )} diff --git a/core/src/components/input/test/input.spec.ts b/core/src/components/input/test/input.spec.ts index ce52d4540a..245e7dd492 100644 --- a/core/src/components/input/test/input.spec.ts +++ b/core/src/components/input/test/input.spec.ts @@ -99,3 +99,19 @@ describe('input: label rendering', () => { expect(labelText.textContent).toBe('Label Prop Text'); }); }); + +// https://github.com/ionic-team/ionic-framework/issues/26974 +describe('input: clear icon', () => { + it('should render custom icon', async () => { + const page = await newSpecPage({ + components: [Input], + html: ` + + `, + }); + + const icon = page.body.querySelector('ion-input ion-icon')!; + + expect(icon.getAttribute('icon')).toBe('foo'); + }); +}); diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png index 770e0c652d..f11e0f51ef 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Firefox-linux.png index 1cdfcd8854..196333c09a 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png index a590c0ba1f..18e11aae11 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png index f7f6a26efb..3200bbdce4 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Firefox-linux.png index 22d3d3f24b..189ab25df8 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png index 79eb585174..b9bb2b2bea 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png index 2225e3fe0c..916838f815 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Firefox-linux.png index 48e4f420f6..721cb14b88 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Safari-linux.png index ddd83d8d1b..a61791694c 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png index f225b7516b..73e553a9cf 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Firefox-linux.png index 8d311895bb..fbf6bdee3b 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png index 13c715aa8f..3e40b653e8 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Chrome-linux.png index 6d704b6987..9c0501ad91 100644 Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Firefox-linux.png index 76f65167b1..9e820d4224 100644 Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Safari-linux.png index b584c99992..0dac9ac872 100644 Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Chrome-linux.png index e0c3f694f4..e5f96acf60 100644 Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Firefox-linux.png index c8d7d6da90..2f544ff2cf 100644 Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Safari-linux.png index 07ea2cb150..c059563bd1 100644 Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Chrome-linux.png index f7d541a7e7..52f6ad5b78 100644 Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Firefox-linux.png index 6892db02e1..0ccc7e7a2a 100644 Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Safari-linux.png index 4c88ad917d..d9f9d2d6e0 100644 Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Chrome-linux.png index cfbbcbe8c0..c857d85f59 100644 Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Firefox-linux.png index 3e0038f7d2..ddee48745e 100644 Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Safari-linux.png index f9dc7ddd4d..2a4791e46b 100644 Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/popover/popover.scss b/core/src/components/popover/popover.scss index 4181df6e69..ecd8acf2dc 100644 --- a/core/src/components/popover/popover.scss +++ b/core/src/components/popover/popover.scss @@ -101,8 +101,6 @@ display: flex; flex-direction: column; - - overflow: hidden; } // Nested Popovers diff --git a/core/src/components/popover/test/basic/popover.e2e.ts b/core/src/components/popover/test/basic/popover.e2e.ts index 81b76364f2..f05291ee2a 100644 --- a/core/src/components/popover/test/basic/popover.e2e.ts +++ b/core/src/components/popover/test/basic/popover.e2e.ts @@ -48,6 +48,98 @@ 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( + ` + + +

Text

+

Text

+

Text

+

Text

+

Text

+

Text

+

Text

+

Text

+

Text

+

Text

+ + `, + 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( + ` + + + +

Text

+

Text

+

Text

+

Text

+

Text

+

Text

+

Text

+

Text

+

Text

+

Text

+ + + `, + 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 }) => { diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx index 43ef7d0de2..ed10a04c8d 100644 --- a/core/src/components/searchbar/searchbar.tsx +++ b/core/src/components/searchbar/searchbar.tsx @@ -608,7 +608,7 @@ export class Searchbar implements ComponentInterface { } render() { - const { cancelButtonText } = this; + const { cancelButtonText, autocapitalize } = this; const animated = this.animated && config.getBoolean('animated', true); const theme = getIonTheme(this); const clearIcon = this.clearIcon || (theme === 'ios' ? closeCircle : closeSharp); @@ -670,7 +670,7 @@ export class Searchbar implements ComponentInterface { placeholder={this.placeholder} type={this.type} value={this.getValue()} - autoCapitalize={this.autocapitalize} + autoCapitalize={autocapitalize === 'default' ? undefined : autocapitalize} autoComplete={this.autocomplete} autoCorrect={this.autocorrect} spellcheck={this.spellcheck} diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts b/core/src/components/toolbar/test/basic/toolbar.e2e.ts index d830dc0360..7b4006e652 100644 --- a/core/src/components/toolbar/test/basic/toolbar.e2e.ts +++ b/core/src/components/toolbar/test/basic/toolbar.e2e.ts @@ -1,14 +1,160 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -configs().forEach(({ title, screenshot, config }) => { - test.describe(title('toolbar: basic'), () => { - test('should not have visual regressions', async ({ page }) => { - await page.goto(`/src/components/toolbar/test/basic`, config); +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( + ` + + + Toolbar + + + `, + 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`)); + await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-only`)); + }); + }); +}); + +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( + ` + + + This is the title that never ends. It just goes on and on my friend. + + + `, + config + ); + + 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( + ` + + + + + + + + + + + + + + + + Toolbar + + + + + + + + + + + + + + + + Activated Buttons + + + `, + 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( + ` + + + + + + Solid + + + Solid + + + Help + + + + + + + + + Solid + + + Solid Activated + + + Help + + + + + + + + + Star + + + Outline + + + Info + + + + + + + + + Star + + + Outline Activated + + + Info + + + + + + `, + config + ); + + const header = page.locator('ion-header'); + await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-icon-buttons`)); }); }); }); diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..01be216977 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..bd8506ab73 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..4efd44f93c Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-dark-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..53aebb13cf Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-dark-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..5dcd70f8ec Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-dark-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a6f6aeb4ad Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..9bdf0314f3 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..6b1a8bad52 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..91a7a9df5f Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-dark-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..35a37fafb2 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-dark-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..80875903ea Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-dark-Mobile-Safari-linux.png new file mode 100644 index 0000000000..1c3c6ed5c1 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3fcb558541 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..56bc640376 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..8142a3a0c8 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ce914cfa62 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..3e9fca3e3a Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Safari-linux.png new file mode 100644 index 0000000000..57ac1e9be5 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..f33d6a9074 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..421473b84d Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ca757637dc Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..7acae28d94 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f84c082990 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Safari-linux.png new file mode 100644 index 0000000000..5384ad8da6 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3dd02b1c42 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..8fc324d77d Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b4d2fa5689 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-dark-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..74247563f6 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-dark-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..1e79779980 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-dark-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a7f7e0b065 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..097841b0ea Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..1d790da051 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..29037128e7 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-dark-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e51ca1671c Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-dark-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..0d0fa4aef1 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-dark-Mobile-Safari-linux.png new file mode 100644 index 0000000000..4c8ae62524 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a5bbb70ed3 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..2ffd4bd15c Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ba689cc457 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..32f16f04b1 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..c01d60f5d1 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Safari-linux.png new file mode 100644 index 0000000000..0adecd6740 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..363c367eba Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..5f3d8e5723 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..3b74fc212d Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..514bb26a5d Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..001c97e515 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Safari-linux.png new file mode 100644 index 0000000000..1b6ed9862e Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c7c5360ec0 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a3eb4173f6 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..4a2aa1e9f9 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..14d31807d8 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..648fb1f17f Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ff11df2724 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..19bea56aec Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..85e3871f18 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..9ad39e8cd9 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c61a531501 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..1a5805b1fe Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Safari-linux.png new file mode 100644 index 0000000000..34af5138ae Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..8901d6470b Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..7d79ccd74f Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..c29cfcaee5 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..fd49cfcb21 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..e39cd26263 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Safari-linux.png new file mode 100644 index 0000000000..1a2ccbd06b Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..b8e0ce1502 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..4f74ba8201 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b7680904be Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3b2b7dd16a Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..aef28839d1 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Safari-linux.png new file mode 100644 index 0000000000..94bcaa8fb4 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..1195c918e4 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..9179568089 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..4273fcad22 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-dark-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e936b8101d Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-dark-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..cda87d3773 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-dark-Mobile-Safari-linux.png new file mode 100644 index 0000000000..2d823b2053 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..15597094fd Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..fdaca073fe Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..e1556aca9a Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ce6d840b40 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..4158561868 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Safari-linux.png new file mode 100644 index 0000000000..3aefab3b8c Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Safari-linux.png differ diff --git a/core/src/css/core.scss b/core/src/css/core.scss index 34b2379282..ae76ad3ad9 100644 --- a/core/src/css/core.scss +++ b/core/src/css/core.scss @@ -393,3 +393,30 @@ ion-input input::-webkit-date-and-time-value { width: 320px; min-height: 320px; } + +/** + * If a popover has a child ion-content (or class equivalent) then the .popover-viewport element + * should not be scrollable to ensure the inner content does scroll. However, if the popover + * does not have a child ion-content (or class equivalent) then the .popover-viewport element + * should remain scrollable. This code exists globally because popover targets + * .popover-viewport using ::slotted which only supports simple selectors. + * + * Note that we do not need to account for .ion-content-scroll-host here because that + * class should always be placed within ion-content even if ion-content is not scrollable. + */ +.popover-viewport:has(> ion-content) { + overflow: hidden; +} + +/** + * :has has cross-browser support, but it is still relatively new. As a result, + * we should fallback to the old behavior for environments that do not support :has. + * Developers can explicitly enable this behavior by setting overflow: visible + * on .popover-viewport if they know they are not going to use an ion-content. + * TODO FW-6106 Remove this + */ +@supports not selector(:has(> ion-content)) { + .popover-viewport { + overflow: hidden; + } +} diff --git a/core/src/foundations/README.md b/core/src/foundations/README.md new file mode 100644 index 0000000000..4cb3b51002 --- /dev/null +++ b/core/src/foundations/README.md @@ -0,0 +1,100 @@ +# Ionic Design Tokens + +## What are Design Tokens? + +Design Tokens are an abstract and universal language to store Design System values, creating a single source of truth that is tech-agnostic and easily scalable and extendable for various outputs such as CSS, SCSS, iOS, Android, JSON, and more. Typically stored in JSON format, they facilitate seamless scalability for integration with any language or Design Tool like Figma or Sketch. + +Design tokens represent small, repeated design decisions that make up a design system's visual style. Tokens replace static values, like hex codes representing colors, with descriptive and intuitive names. + +## Design Tokens Architecture + +The Ionic Design Tokens are stored on `core/src/foundations/_design-tokens.json`. + +Currently, five categories of tokens are stored: + +- Colors +- Font +- Space +- Border +- Elevation + +Using [Style Dictionary](https://amzn.github.io/style-dictionary/), these tokens generate 3 files inside `core/src/foundations`: + +- `ionic.root.scss` - native CSS Custom Properties inside a `:root` element. +- `ionic.vars.scss` - SCSS variables, based on the native ones, that are used internally on all CSS/SCSS code. +- `ionic.utility.scss` - list of utility classes based on each Design Token. + +This refers, more or less, to what's known as System Tokens, which are decisions that systematize the design language for a specific theme or context. + +Currently, Reference Tokens and Component Tokens are not used. Instead we are defining a base architecture for system tokens, that will inform the `:root` and global SCSS variables, and then we let the SCSS architecture propagate that to the Components. + +## Format + +The latest [W3C Design Tokens Format](https://design-tokens.github.io/community-group/format/) was adhered to, this is a recent effort to normalize the nomenclature of Design Tokens. + +The nomenclature has the following structure: `type - type variation - modifier name - $value` + +Example: + +```json +{ + "color": { + "$type": "color", + "primary": { + "10": { + "$value": "#f7faff" + } + } + } +} +``` + +The `tokens.js` script, responsible for generating CSS and SCSS variables along with utility classes, will follow the same nomenclature: `prefix - CSS property name - type variation - modifier name`. + +Examples: + +CSS Custom Property: + +```css +--ionic-color-primary-10 +``` + +SCSS Variable: + +```scss +$ionic-color-primary-10 +``` + +Utility class: + +```css +.ionic-color-primary-10 +``` + +## When to change the Design Tokens + +It's not expected that the `design-tokens.json` needs to be changed frequently. This represents the base of all the Ionic Design System and any change to the json file should be taken carefully, synced with the UX/UI Team and reviewed by other devs. + +Adding new tokens is more or less risk free. However, changing values will result in visual breaking changes and renaming tokens might cause the build to be broken. + +## How to change the Design Tokens + +Using `npm run build.tokens` will generate the `ionic.root.scss`, `ionic.vars.scss`, and `ionic.utility.scss` files with the updated values that come from the `design-tokens.json`. + +Design Tokens will also be generated automatically with the `npm run build` command. This ensures that if someone modifies the JSON without running the build tokens command, the changes will be applied correctly. + +## How to use + +It's very important to highlight that only the Ionic Theme supports these tokens and they should not be used for md/ios themes. + +Within the component scope, variables from these global tokens should always be used. There should be no hardcoded values on component scope that relate to any of the existing tokens. + +Example (Chip Component): + +```scss +@use '../../foundations/ionic.vars.scss' as tokens; + +:host { + --background: #{tokens.$ionic-color-neutral-10}; +} +``` diff --git a/core/src/foundations/_design-tokens.json b/core/src/foundations/_design-tokens.json index 0d05b5a7a6..a312d9c814 100644 --- a/core/src/foundations/_design-tokens.json +++ b/core/src/foundations/_design-tokens.json @@ -43,6 +43,9 @@ "$value": "#303d60" }, "neutral": { + "0": { + "$value": "#ffffff" + }, "10": { "$value": "#f5f5f5" }, diff --git a/core/src/foundations/ionic.root.scss b/core/src/foundations/ionic.root.scss index fcbfb42a20..bca3fe373b 100644 --- a/core/src/foundations/ionic.root.scss +++ b/core/src/foundations/ionic.root.scss @@ -17,6 +17,7 @@ --ionic-color-primary-900: #010408; --ionic-color-primary: #1068eb; --ionic-color-secondary: #303d60; + --ionic-color-neutral-0: #ffffff; --ionic-color-neutral-10: #f5f5f5; --ionic-color-neutral-50: #e7e7e7; --ionic-color-neutral-100: #dadada; diff --git a/core/src/foundations/ionic.utility.scss b/core/src/foundations/ionic.utility.scss index 8f0edddfe4..67974a5cda 100644 --- a/core/src/foundations/ionic.utility.scss +++ b/core/src/foundations/ionic.utility.scss @@ -84,6 +84,12 @@ .ionic-background-color-secondary { background-color: $ionic-color-secondary; } +.ionic-color-neutral-0 { + color: $ionic-color-neutral-0; +} +.ionic-background-color-neutral-0 { + background-color: $ionic-color-neutral-0; +} .ionic-color-neutral-10 { color: $ionic-color-neutral-10; } diff --git a/core/src/foundations/ionic.vars.scss b/core/src/foundations/ionic.vars.scss index f85bd12968..68e75d070d 100644 --- a/core/src/foundations/ionic.vars.scss +++ b/core/src/foundations/ionic.vars.scss @@ -16,6 +16,7 @@ $ionic-color-primary-800: var(--ionic-color-primary-800, #061935); $ionic-color-primary-900: var(--ionic-color-primary-900, #010408); $ionic-color-primary: var(--ionic-color-primary, #1068eb); $ionic-color-secondary: var(--ionic-color-secondary, #303d60); +$ionic-color-neutral-0: var(--ionic-color-neutral-0, #ffffff); $ionic-color-neutral-10: var(--ionic-color-neutral-10, #f5f5f5); $ionic-color-neutral-50: var(--ionic-color-neutral-50, #e7e7e7); $ionic-color-neutral-100: var(--ionic-color-neutral-100, #dadada); diff --git a/core/src/themes/test/css-variables/css/dark.css b/core/src/themes/test/css-variables/css/dark.css new file mode 100644 index 0000000000..6082882391 --- /dev/null +++ b/core/src/themes/test/css-variables/css/dark.css @@ -0,0 +1,155 @@ +/* + * Dark Colors + * ------------------------------------------- + */ + +body { + --ion-color-primary: #428cff; + --ion-color-primary-rgb: 66, 140, 255; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #3a7be0; + --ion-color-primary-tint: #5598ff; + + --ion-color-secondary: #50c8ff; + --ion-color-secondary-rgb: 80, 200, 255; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #46b0e0; + --ion-color-secondary-tint: #62ceff; + + --ion-color-tertiary: #6a64ff; + --ion-color-tertiary-rgb: 106, 100, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #5d58e0; + --ion-color-tertiary-tint: #7974ff; + + --ion-color-success: #2fdf75; + --ion-color-success-rgb: 47, 223, 117; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #29c467; + --ion-color-success-tint: #44e283; + + --ion-color-warning: #ffd534; + --ion-color-warning-rgb: 255, 213, 52; + --ion-color-warning-contrast: #000000; + --ion-color-warning-contrast-rgb: 0, 0, 0; + --ion-color-warning-shade: #e0bb2e; + --ion-color-warning-tint: #ffd948; + + --ion-color-danger: #ff4961; + --ion-color-danger-rgb: 255, 73, 97; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #e04055; + --ion-color-danger-tint: #ff5b71; + + --ion-color-dark: #f4f5f8; + --ion-color-dark-rgb: 244, 245, 248; + --ion-color-dark-contrast: #000000; + --ion-color-dark-contrast-rgb: 0, 0, 0; + --ion-color-dark-shade: #d7d8da; + --ion-color-dark-tint: #f5f6f9; + + --ion-color-medium: #989aa2; + --ion-color-medium-rgb: 152, 154, 162; + --ion-color-medium-contrast: #000000; + --ion-color-medium-contrast-rgb: 0, 0, 0; + --ion-color-medium-shade: #86888f; + --ion-color-medium-tint: #a2a4ab; + + --ion-color-light: #222428; + --ion-color-light-rgb: 34, 36, 40; + --ion-color-light-contrast: #ffffff; + --ion-color-light-contrast-rgb: 255, 255, 255; + --ion-color-light-shade: #1e2023; + --ion-color-light-tint: #383a3e; +} + +/* + * iOS Dark Theme + * ------------------------------------------- + */ + +.ios body { + --ion-background-color: #000000; + --ion-background-color-rgb: 0, 0, 0; + + --ion-text-color: #ffffff; + --ion-text-color-rgb: 255, 255, 255; + + --ion-color-step-50: #0d0d0d; + --ion-color-step-100: #1a1a1a; + --ion-color-step-150: #262626; + --ion-color-step-200: #333333; + --ion-color-step-250: #404040; + --ion-color-step-300: #4d4d4d; + --ion-color-step-350: #595959; + --ion-color-step-400: #666666; + --ion-color-step-450: #737373; + --ion-color-step-500: #808080; + --ion-color-step-550: #8c8c8c; + --ion-color-step-600: #999999; + --ion-color-step-650: #a6a6a6; + --ion-color-step-700: #b3b3b3; + --ion-color-step-750: #bfbfbf; + --ion-color-step-800: #cccccc; + --ion-color-step-850: #d9d9d9; + --ion-color-step-900: #e6e6e6; + --ion-color-step-950: #f2f2f2; + + --ion-item-background: #000000; + + --ion-card-background: #1c1c1d; +} + +.ios ion-modal { + --ion-background-color: var(--ion-color-step-100); + --ion-toolbar-background: var(--ion-color-step-150); + --ion-toolbar-border-color: var(--ion-color-step-250); +} + +/* + * Material Design Dark Theme + * ------------------------------------------- + */ + +.md body { + --ion-background-color: #121212; + --ion-background-color-rgb: 18, 18, 18; + + --ion-text-color: #ffffff; + --ion-text-color-rgb: 255, 255, 255; + + --ion-border-color: #222222; + + --ion-color-step-50: #1e1e1e; + --ion-color-step-100: #2a2a2a; + --ion-color-step-150: #363636; + --ion-color-step-200: #414141; + --ion-color-step-250: #4d4d4d; + --ion-color-step-300: #595959; + --ion-color-step-350: #656565; + --ion-color-step-400: #717171; + --ion-color-step-450: #7d7d7d; + --ion-color-step-500: #898989; + --ion-color-step-550: #949494; + --ion-color-step-600: #a0a0a0; + --ion-color-step-650: #acacac; + --ion-color-step-700: #b8b8b8; + --ion-color-step-750: #c4c4c4; + --ion-color-step-800: #d0d0d0; + --ion-color-step-850: #dbdbdb; + --ion-color-step-900: #e7e7e7; + --ion-color-step-950: #f3f3f3; + + --ion-item-background: #1e1e1e; + + --ion-toolbar-background: #1f1f1f; + + --ion-tab-bar-background: #1f1f1f; + + --ion-card-background: #1e1e1e; +} diff --git a/core/src/utils/test/playwright/docs/README.md b/core/src/utils/test/playwright/docs/README.md index b3a30efe7c..02797e2ab3 100644 --- a/core/src/utils/test/playwright/docs/README.md +++ b/core/src/utils/test/playwright/docs/README.md @@ -1,11 +1,3 @@ # Ionic E2E Tests Guide -This directory contains information on how to get the most out of Ionic's E2E test infrastructure when writing tests. - -## Directory - -| Directory | Description | -| - | - | -| [Usage Instructions](./usage-instructions.md) | How to run tests and update screenshots | -| [Best Practices](./best-practices.md) | Contains information on conventions to follow as well as pitfalls to avoid when writing tests | -| [API](./api.md) | Documents the custom functionality that has been built on top of Playwright | \ No newline at end of file +Refer to the [Core Testing documentation](/docs/core/testing/README.md) in order to build and run the e2e tests. diff --git a/core/stencil.config.ts b/core/stencil.config.ts index 2485eafb23..cdc5e76fe4 100644 --- a/core/stencil.config.ts +++ b/core/stencil.config.ts @@ -231,7 +231,7 @@ export const config: Config = { }, { type: 'docs-json', - file: '../docs/core.json' + file: '../packages/docs/core.json' }, { type: 'dist-hydrate-script' diff --git a/.github/CONTRIBUTING.md b/docs/CONTRIBUTING.md similarity index 93% rename from .github/CONTRIBUTING.md rename to docs/CONTRIBUTING.md index e20ec3194f..c6324e90a1 100644 --- a/.github/CONTRIBUTING.md +++ b/docs/CONTRIBUTING.md @@ -1,10 +1,11 @@ # Contributing -Thanks for your interest in contributing to the Ionic Framework! :tada: +Thanks for your interest in contributing to the Ionic Framework! 🎉 - [Contributing Etiquette](#contributing-etiquette) - [Creating an Issue](#creating-an-issue) * [Creating a Good Code Reproduction](#creating-a-good-code-reproduction) +- [Using VS Code on Windows](#using-vs-code-on-windows) - [Creating a Pull Request](#creating-a-pull-request) * [Requirements](#requirements) * [Setup](#setup) @@ -81,6 +82,19 @@ Without a reliable code reproduction, it is unlikely we will be able to resolve * **No secret code needed:** Creating a minimal reproduction of the issue prevents you from having to publish any proprietary code used in your project. * **Get help fixing the issue:** If we can reliably reproduce an issue, there is a good chance we will be able to address it. +## Using VS Code on Windows + +To contribute on Windows, do the following: + +- Configure VS Code to read/save files using line breaks (LF) instead of carriage returns (CRLF). Set it globally by navigating to: Settings -> Text Editor -> Files -> Eol. Set to `\n`. + + - You can optionally use the following settings in your `.vscode/settings.json`: + ```json + { "files.eol": "\n" } + ``` + +- Check that the Git setting `core.autocrlf` is set to `false`: run `git config -l | grep autocrlf`. Switch it to false using: `git config --global core.autocrlf false`. +- If you've already cloned the `ionic-framework` repo, the files may already be cached as LF. To undo this, you need to clean the cache files of the repository. Run the following (make sure you stage or commit your changes first): `git rm --cached -r .` then `git reset --hard`. ## Creating a Pull Request @@ -246,6 +260,14 @@ npm install file:/~/ionic-vue-router-7.0.1.tgz #### Lint Changes +> [!IMPORTANT] +> If you are using a Windows machine, you will need to configure your local development environment to use the correct line endings. +> - Check that the Git setting `core.autocrlf` is set to `false`: run `git config -l | grep autocrlf`. Switch it to false using: `git config --global core.autocrlf false`. +> - If you've already cloned the `ionic-docs` repo, the files may already be cached as LF. To undo this, you need to clean the cache files of the repository. Run the following (make sure you stage or commit your changes first): `git rm --cached -r .` then `git reset --hard`. + + + + 1. Run `npm run lint` to lint the TypeScript and Sass. 2. If there are lint errors, run `npm run lint.fix` to automatically fix any errors. Repeat step 1 to ensure the errors have been fixed, and manually fix them if not. 3. To lint and fix only TypeScript errors, run `npm run lint.ts` and `npm run lint.ts.fix`, respectively. diff --git a/docs/README.md b/docs/README.md index a6fdf0642d..85cbbc9422 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,7 +1,36 @@ -# @ionic/docs +

+ Ionic Logo +

-This package publishes the JSON data used to build the [Ionic API documentation](https://ionicframework.com/docs/api). +

+ Ionic Framework Developer Resources +

-## License +

+ This documentation includes guidelines on contributing, coding conventions, best practices, testing steps, and more. It should serve as a collective resource for all documentation related to developing Ionic Framework. +

-* [MIT](https://raw.githubusercontent.com/ionic-team/ionic/main/LICENSE) \ No newline at end of file +## What is Ionic Framework? + +Ionic Framework is an open source app development toolkit for building modern, fast, top-quality cross-platform native and Progressive Web Apps from a single codebase with JavaScript and the Web. + +It is based on Web Components, which enables significant performance, usability, and feature improvements alongside support for popular web frameworks like Angular, React, and Vue. + +## Guides + +| Guide | Description | +| ----------------------------------------| ---------------------------------------------------------------------------------------- | +| [Contributing](./CONTRIBUTING.md) | How to contribute including creating pull requests, commit message guidelines, and more. | +| [Component Guide](./component-guide.md) | Guidelines for implementing component states, accessibility, and more. | +| [Sass Guidelines](./sass-guidelines.md) | Outlines scenarios where Sass members and comments should be used. | + +## Packages + +| Project | Package | Documentation | Guides | +| ---------------- | -------------------------------------------------------------------------- | ---------------------------------| ----------------------------------------------------------------- | +| **Core** | [`@ionic/core`](https://www.npmjs.com/package/@ionic/core) | [Readme](core/README.md) | [Testing](core/testing/README.md) | +| **Angular** | [`@ionic/angular`](https://www.npmjs.com/package/@ionic/angular) | [Readme](angular/README.md) | [Testing](angular/testing.md) | +| **React** | [`@ionic/react`](https://www.npmjs.com/package/@ionic/react) | [Readme](react/README.md) | [Testing](react/testing.md) | +| **React Router** | [`@ionic/react-router`](https://www.npmjs.com/package/@ionic/react-router) | [Readme](react-router/README.md) | [Testing](react-router/testing.md) | +| **Vue** | [`@ionic/vue`](https://www.npmjs.com/package/@ionic/vue) | [Readme](vue/README.md) | [Testing](vue/testing.md) | +| **Vue Router** | [`@ionic/vue-router`](https://www.npmjs.com/package/@ionic/vue-router) | [Readme](vue-router/README.md) | [Testing](vue-router/testing.md) | diff --git a/docs/_config.yml b/docs/_config.yml new file mode 100644 index 0000000000..7b20f622ba --- /dev/null +++ b/docs/_config.yml @@ -0,0 +1,2 @@ +name: Ionic Framework +include: [ CONTRIBUTING.md ] diff --git a/docs/angular/README.md b/docs/angular/README.md new file mode 100644 index 0000000000..357afb4123 --- /dev/null +++ b/docs/angular/README.md @@ -0,0 +1,11 @@ +# Ionic Angular + +The [@ionic/angular](https://www.npmjs.com/package/@ionic/angular) package builds on top of [@ionic/core](https://www.npmjs.com/package/@ionic/core) components. + +## Contributing + +See our [Contributing Guide](/docs/CONTRIBUTING.md). + +## Testing + +Refer to the [Angular Testing documentation](./testing.md) for testing the Angular package. diff --git a/docs/angular/testing.md b/docs/angular/testing.md new file mode 100644 index 0000000000..dee9678da7 --- /dev/null +++ b/docs/angular/testing.md @@ -0,0 +1,118 @@ +# Angular Testing + +Ionic Framework supports multiple versions of Angular. As a result, we need to verify that Ionic works correctly with each of these Angular versions. + +## Syncing Local Changes + +The Angular test app supports syncing your locally built changes for validation. + +1. Build the `core` and `packages/angular` directories using `npm run build`. +2. [Build the Angular test app](#test-app-build-structure). +3. Navigate to the built test app directory (e.g. `packages/angular/test/build/ng14`). +4. Install dependencies using `npm install`. +5. Sync your local changes using `npm run sync`. + +From here you can either build the application or start a local dev server. When re-syncing changes, you will need to [wipe or disable the application cache](#application-cache). + +## Application Cache + +Angular CLI creates a cache of several files on disk by default in the `.angular` directory. This decreases the time taken to build the test application. However, the cache makes it difficult to quickly sync and check local changes of Ionic. As a result, the `.angular` cache is disabled by default in the test app projects. + +See https://angular.io/cli/cache for more information. + +### Disable Cache + +```shell +ng cache disable +``` + +> [!NOTE] +> You may need to manually remove the `.angular` directory once after running this command. + +### Enable Cache + +```shell +ng cache enable +``` + +> [!NOTE] +> You will need to delete the `.angular` cache and restart the dev server every time you want to sync local changes of Ionic. + +## Test App Build Structure + +> [!NOTE] +> Please confirm your current directory as `packages/angular/test` before proceeding with any of the following commands. + +Unlike other test applications, these test apps are broken up into multiple directories. These directories are then combined to create a single application. This allows us to share common application code, tests, etc so that each app is being tested the same way. Below details the different pieces that help create a single test application. + +**apps** - This directory contains partial applications for each version of Angular we want to test. Typically these directories contain new `package.json` files, `angular.json` files, and more. If you have code that is specific to a particular version of Angular, put it in this directory. + +**base** - This directory contains the base application that each test app will use. This is where tests, application logic, and more live. If you have code that needs to be run on every test app, put it in this directory. + +**build** - When the `apps` and `base` directories are merged, the final result is put in this directory. The `build` directory should never be committed to git. + +**build.sh** - This is the script that merges the `apps` and `base` directories and places the built application in the `build` directory. + +Usage: + +```shell +# Build a test app using apps/ng14 as a reference +./build.sh ng14 +``` + +## How to modify test apps + +To add new tests, components, or pages, modify the `base` project. This ensures that tests are run for every tested version. + +If you want to add a version-specific change, add the change inside of the appropriate projects in `apps`. Be sure to replicate the directory structure. For example, if you are adding a new E2E test file called `test.spec.ts` in `apps/ng14`, make sure you place the file in `apps/ng14/e2e/src/test.spec.ts`. + +### Version-specific tests + +If you need to add E2E tests that are only run on a specific version of the JS Framework, replicate the `VersionTest` component on each partial application. This ensures that tests for framework version X do not get run for framework version Y. + +### Testing Lazy Loaded Ionic Components + +Tests for lazy loaded Ionic UI components should only be added under the `/lazy` route. This ensures the `IonicModule` is added. + +### Testing Standalone Ionic Components + +Tests for standalone Ionic UI components should only be added under the `/standalone` route. This allows for an isolated environment where the lazy loaded `IonicModule` is not initialized. The standalone components use Stencil's custom element bundle instead of the lazy loaded bundle. If `IonicModule` is initialized then the Stencil components will fall back to using the lazy loaded implementation instead of the custom elements bundle implementation. + +## Adding New Test Apps + +As we add support for new versions of Angular, we will also need to update this directory to test against new applications. The following steps can serve as a guide for adding new apps: + +1. Navigate to the built app for the most recent version of Angular that Ionic tests. +2. Update the application by following the steps on https://update.angular.io/. +3. Make note of any files that changed during the upgrade (`package.json`, `package-lock.json`, `angular.json`, etc). +4. Copy the changed files to a new directory in `apps`. +5. Add a new entry to the matrix for `test-core-angular` in `./github/workflows/build.yml`. This will allow the new test app to run against all PRs. +6. Commit these changes and push. + +Example: + +In this example, we are going to add the Angular 14 test app. + +1. Build the Angular 13 test app using `./build.sh ng13`. +2. Navigate to `build/ng13`. +3. Perform the upgrade steps on https://update.angular.io/. The "From" field should say "13.0" and the "To" field should say "14.0". + +Note: You may encounter some other peer dependency issues not covered by the Angular Upgrade Guide. These peer dependency issues can be resolved manually by updating the installed version of each dependency. + +4. Observe that the output of the Angular upgrade indicates that the following files were modified: + +`angular.json` +`package-lock.json` +`package.json` +`tsconfig.json` +`src/app/form/form.component.ts` +`src/app/modal-example/modal-example.component.ts` + +5. Create a directory in `apps` named `ng14`. +6. Copy the modified files to the `apps/ng14` directory. +7. Open `./github/workflows/build.yml` and find the `test-angular-e2e` job. +8. Find the `apps` field under `matrix`. +9. Add "ng14" to the `apps` field. +10. Open `./github/workflows/stencil-nightly.yml` and find the `test-angular-e2e` job. +11. Repeat steps 8 and 9. +12. Commit these changes and push. diff --git a/.github/COMPONENT-GUIDE.md b/docs/component-guide.md similarity index 99% rename from .github/COMPONENT-GUIDE.md rename to docs/component-guide.md index d4bf6454b4..543d420e48 100644 --- a/.github/COMPONENT-GUIDE.md +++ b/docs/component-guide.md @@ -729,7 +729,7 @@ To work around this, you should set an RTL class on the host of your component a ... diff --git a/docs/core/README.md b/docs/core/README.md new file mode 100644 index 0000000000..17e99262d3 --- /dev/null +++ b/docs/core/README.md @@ -0,0 +1,11 @@ +# Ionic Core + +The [@ionic/core](https://www.npmjs.com/package/@ionic/core) package contains the Web Components that make up the reusable UI building blocks of Ionic Framework. These components are designed to be used in traditional frontend view libraries/frameworks (such as React, Angular, or Vue), or on their own through traditional JavaScript in the browser. + +## Contributing + +See our [Contributing Guide](/docs/CONTRIBUTING.md). + +## Testing + +Refer to the [Core Testing documentation](./testing/README.md) for testing the Core package. diff --git a/docs/core/testing/README.md b/docs/core/testing/README.md new file mode 100644 index 0000000000..bdf96b4007 --- /dev/null +++ b/docs/core/testing/README.md @@ -0,0 +1,13 @@ + +# Core Testing + +## Directory + +| Directory | Description | +| --------------------------------------------- | --------------------------------------------------------------------------------------------- | +| [Preview Changes](./preview-changes.md) | Steps on building core and previewing changes | +| [Usage Instructions](./usage-instructions.md) | How to run tests and update screenshots | +| [Best Practices](./best-practices.md) | Contains information on conventions to follow as well as pitfalls to avoid when writing tests | +| [API](./api.md) | Documents the custom functionality that has been built on top of Playwright | + + diff --git a/core/src/utils/test/playwright/docs/api.md b/docs/core/testing/api.md similarity index 100% rename from core/src/utils/test/playwright/docs/api.md rename to docs/core/testing/api.md diff --git a/core/src/utils/test/playwright/docs/best-practices.md b/docs/core/testing/best-practices.md similarity index 100% rename from core/src/utils/test/playwright/docs/best-practices.md rename to docs/core/testing/best-practices.md diff --git a/docs/core/testing/preview-changes.md b/docs/core/testing/preview-changes.md new file mode 100644 index 0000000000..e1fc4a6f87 --- /dev/null +++ b/docs/core/testing/preview-changes.md @@ -0,0 +1,29 @@ +# Preview Changes + +## Build + +### 1. Clone ionic + + git clone https://github.com/ionic-team/ionic-framework.git + cd ionic-framework + +### 2. Run `npm install` + + cd core + npm install + +Notice that `@ionic/core` lives in `core`. + +### 3. Run `npm start` + +Make sure you are inside the `core` directory. + + npm start + +With the `start` command, Ionic components will be built with [Stencil](https://stenciljs.com/), changes to source files are watched, a local http server will startup, and [http://localhost:3333/](http://localhost:3333/) will open in a browser. + +### 4. Preview + +Navigate to [http://localhost:3333/src/components/](http://localhost:3333/src/components/). Each component has small e2e apps found in the `test` directory, for example: [http://localhost:3333/src/components/button/test/basic](http://localhost:3333/src/components/button/test/basic) + +As changes are made in an editor to source files, the e2e app will live-reload. diff --git a/core/src/utils/test/playwright/docs/usage-instructions.md b/docs/core/testing/usage-instructions.md similarity index 100% rename from core/src/utils/test/playwright/docs/usage-instructions.md rename to docs/core/testing/usage-instructions.md diff --git a/docs/react-router/README.md b/docs/react-router/README.md new file mode 100644 index 0000000000..4ef96223a6 --- /dev/null +++ b/docs/react-router/README.md @@ -0,0 +1,11 @@ +# Ionic React Router + +The [@ionic/react-router](https://www.npmjs.com/package/@ionic/react-router) package is the routing integration for [@ionic/react](https://www.npmjs.com/package/@ionic/react). It uses the [React Router](https://github.com/remix-run/react-router) library beneath the surface. + +## Contributing + +See our [Contributing Guide](/docs/CONTRIBUTING.md). + +## Testing + +Refer to the [React Router Testing documentation](./testing.md) for testing the React Router package. diff --git a/docs/react-router/testing.md b/docs/react-router/testing.md new file mode 100644 index 0000000000..d0dd1f4944 --- /dev/null +++ b/docs/react-router/testing.md @@ -0,0 +1,55 @@ +# React Router Testing + +Ionic Framework supports multiple versions of React Router. As a result, we need to verify that Ionic works correctly with each of these React Router versions. + +## Syncing Local Changes + +The React test app supports syncing your locally built changes for validation. + +1. Build the `@ionic/core`, `@ionic/react`, and `@ionic/react-router` projects using `npm run build`. +2. [Build the React test app](#test-app-build-structure). +3. Navigate to the built test app. +4. Install dependencies using `npm install`. +5. Sync your local changes using `npm run sync`. + +From here you can either build the application or start a local dev server. When re-syncing changes, you will need to wipe the build cache in `node_modules/.cache` and restart the dev server/re-build. + +## Test App Build Structure + +Unlike other test applications, these test apps are broken up into multiple directories. These directories are then combined to create a single application. This allows us to share common application code, tests, etc so that each app is being tested the same way. Below details the different pieces that help create a single test application. + +**apps** - This directory contains partial applications for each version of React we want to test. Typically these directories contain new `package.json` files, `cypress.config.ts` files, and more. If you have code that is specific to a particular version of React, put it in this directory. + +**base** - This directory contains the base application that each test app will use. This is where tests, application logic, and more live. If you have code that needs to be run on every test app, put it in this directory. + +**build** - When the `apps` and `base` directories are merged, the final result is put in this directory. The `build` directory should never be committed to git. + +**build.sh** - This is the script that merges the `apps` and `base` directories and places the built application in the `build` directory. + +Usage: + +```shell +# Build a test app using apps/reactrouter5 as a reference +./build.sh reactrouter5 +``` + +## How to modify test apps + +To add new tests, components, or pages, modify the `base` project. This ensures that tests are run for every tested version. + +If you want to add a version-specific change, add the change inside of the appropriate projects in `apps`. Be sure to replicate the directory structure. For example, if you are adding a new E2E test file called `test.e2e.ts` in `apps/reactrouter5`, make sure you place the file in `apps/react17/tests/e2e/test.e2e.ts`. + +### Version-specific tests + +If you need to add E2E tests that are only run on a specific version of the JS Framework, replicate the `VersionTest` component on each partial application. This ensures that tests for framework version X do not get run for framework version Y. + +## Adding New Test Apps + +As we add support for new versions of React Router, we will also need to update this directory to test against new applications. The following steps can serve as a guide for adding new apps: + +1. Navigate to the built app for the most recent version of React Router that Ionic tests. +2. Update the application to the latest version of React Router. +3. Make note of any files that changed during the upgrade (`package.json`, `package-lock.json`, etc). +4. Copy the changed files to a new directory in `apps`. +5. Add a new entry to the matrix for `test-react-router-e2e` in `./github/workflows/build.yml`. This will allow the new test app to run against all PRs. +6. Commit these changes and push. diff --git a/docs/react/README.md b/docs/react/README.md new file mode 100644 index 0000000000..12d33523d8 --- /dev/null +++ b/docs/react/README.md @@ -0,0 +1,11 @@ +# Ionic React + +The [@ionic/react](https://www.npmjs.com/package/@ionic/react) package builds on top of [@ionic/core](https://www.npmjs.com/package/@ionic/core) components. + +## Contributing + +See our [Contributing Guide](/docs/CONTRIBUTING.md). + +## Testing + +Refer to the [React Testing documentation](./testing.md) for testing the React package. diff --git a/docs/react/testing.md b/docs/react/testing.md new file mode 100644 index 0000000000..1c9da9c682 --- /dev/null +++ b/docs/react/testing.md @@ -0,0 +1,55 @@ +# React Testing + +Ionic Framework supports multiple versions of React. As a result, we need to verify that Ionic works correctly with each of these React versions. + +## Syncing Local Changes + +The React test app supports syncing your locally built changes for validation. + +1. Build the `core`, `packages/react`, and `packages/react-router` directories using `npm run build`. +2. [Build the React test app](#test-app-build-structure). +3. Navigate to the built test app. +4. Install dependencies using `npm install`. +5. Sync your local changes using `npm run sync`. + +From here you can either build the application or start a local dev server. When re-syncing changes, you will need to wipe the build cache in `node_modules/.cache` and restart the dev server/re-build. + +## Test App Build Structure + +Unlike other test applications, these test apps are broken up into multiple directories. These directories are then combined to create a single application. This allows us to share common application code, tests, etc so that each app is being tested the same way. Below details the different pieces that help create a single test application. + +**apps** - This directory contains partial applications for each version of React we want to test. Typically these directories contain new `package.json` files, `cypress.config.ts` files, and more. If you have code that is specific to a particular version of React, put it in this directory. + +**base** - This directory contains the base application that each test app will use. This is where tests, application logic, and more live. If you have code that needs to be run on every test app, put it in this directory. + +**build** - When the `apps` and `base` directories are merged, the final result is put in this directory. The `build` directory should never be committed to git. + +**build.sh** - This is the script that merges the `apps` and `base` directories and places the built application in the `build` directory. + +Usage: + +```shell +# Build a test app using apps/react17 as a reference +./build.sh react17 +``` + +## How to modify test apps + +To add new tests, components, or pages, modify the `base` project. This ensures that tests are run for every tested version. + +If you want to add a version-specific change, add the change inside of the appropriate projects in `apps`. Be sure to replicate the directory structure. For example, if you are adding a new E2E test file called `test.e2e.ts` in `apps/react17`, make sure you place the file in `apps/react17/tests/e2e/test.e2e.ts`. + +### Version-specific tests + +If you need to add E2E tests that are only run on a specific version of the JS Framework, replicate the `VersionTest` component on each partial application. This ensures that tests for framework version X do not get run for framework version Y. + +## Adding New Test Apps + +As we add support for new versions of React, we will also need to update this directory to test against new applications. The following steps can serve as a guide for adding new apps: + +1. Navigate to the built app for the most recent version of React that Ionic tests. +2. Update the application to the latest version of React. +3. Make note of any files that changed during the upgrade (`package.json`, `package-lock.json`, etc). +4. Copy the changed files to a new directory in `apps`. +5. Add a new entry to the matrix for `test-react-e2e` in `./github/workflows/build.yml`. This will allow the new test app to run against all PRs. +6. Commit these changes and push. diff --git a/docs/sass-guidelines.md b/docs/sass-guidelines.md new file mode 100644 index 0000000000..d97ec11dac --- /dev/null +++ b/docs/sass-guidelines.md @@ -0,0 +1,685 @@ +# Sass Guidelines + +- [Definitions](#definitions) +- [Scope](#scope) +- [Historical Usage](#historical-usage) +- [Current Usage](#current-usage) +- [Recommended Usage](#recommended-usage) + * [Comments](#comments) + * [Variables](#variables) + + [✅ Global](#-global) + + [✅ Theming](#-theming) + + [✅ Reusable values](#-reusable-values) + + [✅ Media queries](#-media-queries) + + [✅ Dynamic calculations](#-dynamic-calculations) + + [🚫 Consistency](#-consistency) + + [🚫 Text Alignment](#-text-alignment) + + [🚫 Structural Changes](#-structural-changes) + + [🚫 Font Properties](#-font-properties) + +## Definitions + +**Sass:** An extension to CSS that reduces the repetition in CSS and allows developers to use shared functions, mixins and variables. [^1] + +**Members:** Refers to variables, functions and mixins in Sass. + +## Scope + +Sass provides members that make it easier to reuse code throughout the Ionic Framework repository. Variables hold values that can be used by other stylesheets. Mixins define reusable blocks of styles that can be included in other selectors. Functions allow the manipulation of values and can perform calculations. + +The purpose of this document is to identify the scenarios in which Sass variables should be used. + +## Historical Usage + +In Ionic Framework v1 through v3, the project was built with Sass variables that developers could change at runtime. While the default values were provided by Ionic Framework, anyone developing with it could override these values to rebuild the Ionic Framework CSS with their own values. [^2] + +Due to this, Ionic Framework documented the Sass variables as part of the public API using `@prop` comments as early as [v2.0.0](https://github.com/ionic-team/ionic-framework/blob/v2.0.0/src/components/alert/alert.ios.scss): + +```scss +// alert.ios.scss + +/// @prop - Max width of the alert +$alert-ios-max-width: 270px !default; + +/// @prop - Border radius of the alert +$alert-ios-border-radius: 13px !default; +``` + +If a Sass variable was deprecated or hidden from the public API, the `@prop` comment would be removed, or it would never be added, as seen in [v3.9.2](https://github.com/ionic-team/ionic-framework/blob/v3.9.2/src/components/alert/alert.ios.scss#L18-L19): + +```scss +// alert.ios.scss + +// deprecated +$alert-ios-head-padding: null !default; +``` + +To ensure proper documentation of variables for customizing Ionic Framework, Sass variables were added for components even if they were not used multiple times within the same component or elsewhere: + +```scss +// alert.ios.scss + +/// @prop - Text color of the label for the checked radio alert +$alert-ios-radio-label-text-color-checked: $alert-ios-button-text-color !default; + +.alert-ios [aria-checked=true] .alert-radio-label { + color: $alert-ios-radio-label-text-color-checked; +} +``` + +## Current Usage + +The abundance of Sass variables currently in Ionic Framework is a result of their historical usage, being used to rebuild the CSS and customize Ionic Framework components. + +The comments for Sass variables are also still visible today in [v7.7.0](https://github.com/ionic-team/ionic-framework/blob/v7.7.0/core/src/components/alert/alert.ios.vars.scss), even though they are no longer used by any documentation generators: + +```scss +// alert.ios.vars.scss + +/// @prop - Max width of the alert +$alert-ios-max-width: dynamic-font-clamp(1, 270px, 1.2) !default; + +/// @prop - Border radius of the alert +$alert-ios-border-radius: 13px !default; +``` + +These comments aren't necessary when the naming describes its use thoroughly. The comments for the variables above do not need to be there, as it is fairly obvious what they are used for. + +However, the comment for the following variable might be helpful in explaining where it is used because on first glance it reads like it could be used for a sub title inside of a title: + +```scss +// action-sheet.ios.vars.scss + +/// @prop - Font weight of the action sheet title when it has a sub title +$action-sheet-ios-title-with-sub-title-font-weight: 600 !default; +``` + +It could be argued though that the comment doesn't really help, as seeing the variable in use will explain its purpose the best. Additionally, this is an example of a variable that isn't necessary, given it is only used in one place, which is why it is so specific in the first place. + +## Recommended Usage + +There are two things that need to be outlined here: when we should use comments and when we should use variables. The sections below detail the recommended usage for each of these. + +### Comments + +We should update the comments for Sass variables in one of the following ways: + +1. If we don't intend to ever publicly document the Sass variables again, we should update the comments to remove the syntax that was added for documentation generation: + ```diff + // alert.ios.vars.scss + + -/// @prop - Border radius of the alert + +// Border radius of the alert + $alert-ios-border-radius: 13px !default; + ``` + +2. If we don't find the comments to be helpful, and want to stick with keeping the variable names specific, we should remove the comments entirely: + ```diff + // alert.ios.vars.scss + + -/// @prop - Border radius of the alert + $alert-ios-border-radius: 13px !default; + ``` + +3. If we find the comments to be helpful for certain variables or situations, like when there are math calculations involved, we should keep only the comments that are necessary to explain what is going on: + ```diff + -/// @prop - Height of the alert button + /** + * We want the height of the button to + * scale with the text so the next never runs + * into the edge of the button. We change the height + * instead of adding padding because we would need to offset + * the height the padding and the border. Since the border uses + * a hairline (<1px) width, this will cause subpixel rendering + * differences across browsers. + */ + $alert-ios-button-height: dynamic-font-min(1, 44px) !default; + ``` + +### Variables + +The table below outlines the recommended approach for when to use Sass variables. Each scenario links to a section that explains it in more detail. + +| | Scenario | +| ---| ---------------------------------------------------------------| +| ✅ | [Global](#white_check_mark-global) | +| ✅ | [Theming](#white_check_mark-theming) | +| ✅ | [Reusable values](#white_check_mark-reusable-values) | +| ✅ | [Media queries](#white_check_mark-media-queries) | +| ✅ | [Dynamic calculations](#white_check_mark-dynamic-calculations) | +| 🚫 | [Consistency](#no_entry_sign-consistency) | +| 🚫 | [Text Alignment](#no_entry_sign-text-alignment) | +| 🚫 | [Structural Changes](#no_entry_sign-structural-changes) | +| 🚫 | [Font Properties](#no_entry_sign-font-properties) | + +#### ✅ Global + +Global variables that are used in multiple places include `font-family`, `z-index`, and `opacity`. These should continue to be set in variables as they affect multiple components that use them. + +Example of global variables: + +```scss +// ionic.globals.scss + +$font-family-base: var(--ion-font-family, inherit) !default; + +$hairlines-width: .55px !default; + +$placeholder-opacity: 0.6 !default; +``` + +#### ✅ Theming + +Storing colors and other design-related values makes it easy to update an entire theme by modifying a few variables. + +Example of theme variables: + +```scss +// ionic.theme.default.scss + +$background-color-value: #fff !default; +$background-color-rgb-value: 255, 255, 255 !default; + +$text-color-value: #000 !default; +$text-color-rgb-value: 0, 0, 0 !default; + +$background-color: var(--ion-background-color, $background-color-value) !default; +$background-color-rgb: var(--ion-background-color-rgb, $background-color-rgb-value) !default; +$text-color: var(--ion-text-color, $text-color-value) !default; +$text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value) !default; +``` + +```scss +// ionic.theme.default.ios.scss + +$backdrop-ios-color: var(--ion-backdrop-color, #000) !default; +$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-color-step-100, #f9f9f9)) !default; +``` + +#### ✅ Reusable values + +Use variables for values that are repeated throughout stylesheets, such as spacing, `border-radius`, `font-size`, or any other value used in multiple places. A value should only be considered reusable if it is used more than once and related among the elements it is being applied to in some way. For instance, a value is not considered related if it changes a common property, such as border style. While many components use `border-style: solid`, it does not need to be stored unless these components will require updates with design changes. Currently, the border styles have consistently been set to `solid`, with the exception of `none` for a CSS reset. + +Example of reusable values: + + + + + + + + + + + + + + + + + + + + +
Do ✅
+ +```scss +// alert.ios.vars.scss + +/// @prop - Padding end of the alert head +$alert-ios-head-padding-end: 16px !default; + +/// @prop - Padding start of the alert head +$alert-ios-head-padding-start: $alert-ios-head-padding-end !default; +``` + +```scss +// alert.ios.scss + +.alert-head { + padding-top: 12px; + padding-inline-end: $alert-ios-head-padding-end; + padding-bottom: 7px; + padding-inline-start: $alert-ios-head-padding-start; +} +``` + +
Don't :x:
+ +```scss +// alert.ios.vars.scss + +/// @prop - Padding top of the alert head +$alert-ios-head-padding-top: 12px !default; + +/// @prop - Padding bottom of the alert head +$alert-ios-head-padding-bottom: 7px !default; +``` + +```scss +// alert.ios.scss + +.alert-head { + padding-top: $alert-ios-head-padding-top; + padding-bottom: $alert-ios-head-padding-bottom; +} +``` + +
+ +If a value is shared among multiple components, it should be made into a [global variable](#white_check_mark-global) instead of importing the variable from a specific component. For example, variables that are shared between list components (item, item divider, list header) should be defined in a global theme file: + + + + + + + + + + + + + + + + + + + + +
Do ✅
+ +```scss +// ionic.theme.default.md.scss + +$global-md-item-padding-end: 16px; +$global-md-item-padding-start: $global-md-item-padding-end; +``` + +```scss +// item.md.vars.scss + +@import "../../themes/ionic.globals.md"; + +/// @prop - Padding end for the item content +$item-md-padding-end: $global-md-item-padding-end !default; + +/// @prop - Padding start for the item content +$item-md-padding-start: $global-md-item-padding-start !default; +``` + +```scss +// item-divider.md.vars.scss + +@import "../../themes/ionic.globals.md"; + +/// @prop - Padding start for the divider +$item-divider-md-padding-start: $global-md-item-padding-start !default; + +/// @prop - Padding end for the divider +$item-divider-md-padding-end: $global-md-item-padding-end !default; +``` + +
Don't :x:
+ +```scss +// item.md.vars.scss + +@import "../../themes/ionic.globals.md"; + +/// @prop - Padding end for the item content +$item-md-padding-end: 16px !default; + +/// @prop - Padding start for the item content +$item-md-padding-start: 16px !default; +``` + +```scss +// item-divider.md.vars.scss + +@import "../../themes/ionic.globals.md"; +@import "../item/item.md.vars"; + +/// @prop - Padding start for the divider +$item-divider-md-padding-start: $item-md-padding-start !default; + +/// @prop - Padding end for the divider +$item-divider-md-padding-end: $item-md-padding-end !default; +``` + +
+ +> [!TIP] +> The names of the global variables are just an example. We do not currently have a naming convention for global variables. + +#### ✅ Media queries + +Define breakpoints for responsive design to allow easy adjustments as needed. + +Example of breakpoints used by media queries: + +```scss +// ionic.globals.scss + +// The minimum dimensions at which your layout will change, +// adapting to different screen sizes, for use in media queries +$screen-breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px +) !default; +``` + +#### ✅ Dynamic calculations + +Variables can be useful for dynamic calculations, such as storing a base font size in a variable and then using it in calculations for other font sizes or spacing values. Variables should not be used for storing a function call, even if the function itself has dynamic calculations. + + + + + + + + + + + + + + + + + + + + +
Do ✅
+ +```scss +// chip.vars.scss + +/// @prop - Unitless font size of the chip before scaling +$chip-base-font-size: 14; + +/// @prop - Font size of the chip in rem before scaling +$chip-base-font-size-rem: #{math.div($chip-base-font-size, 16)}rem; + +/// @prop - Size of an icon within a chip (in em to scale as the font size of the chip scales) +$chip-icon-size: math.div(20em, $chip-base-font-size); + +/// @prop - Size of an avatar within a chip (in em to scale as the font size of the chip scales) +$chip-avatar-size: math.div(24em, $chip-base-font-size); +``` + +
Don't :x:
+ +```scss +// alert.vars.scss + +/// @prop - Font size of the alert button +$alert-button-font-size: dynamic-font(14px) !default; +``` + +
+ +#### 🚫 Consistency + +While we usually aim for consistency across different modes, this isn't always necessary when dealing with Sass variables. If certain styles are present in one mode but absent in another, there's no need to include a Sass variable for the mode lacking those styles. + +For example, the color of the label changes when focused in `md` mode. However, in `ios`, the label does not receive different styling when focused, therefore it does not require the same styles or a Sass variable defined: + + + + + + + + + + + + + + + + + + + + +
Do ✅
+ +```scss +// label.md.vars.scss + +/// @prop - Text color of the stacked/floating label when it is focused +$label-md-text-color-focused: ion-color(primary, base) !default; +``` + +```scss +// label.md.scss + +:host-context(.ion-focused).label-stacked:not(.ion-color), +:host-context(.ion-focused).label-floating:not(.ion-color), +:host-context(.item-has-focus).label-stacked:not(.ion-color), +:host-context(.item-has-focus).label-floating:not(.ion-color) { + color: $label-md-text-color-focused; +} +``` + +
Don't :x:
+ +```scss +// label.ios.vars.scss + +/// @prop - Text color of the stacked/floating label when it is focused +$label-ios-text-color-focused: null !default; +``` + +```scss +// label.ios.scss + +:host-context(.ion-focused).label-stacked:not(.ion-color), +:host-context(.ion-focused).label-floating:not(.ion-color), +:host-context(.item-has-focus).label-stacked:not(.ion-color), +:host-context(.item-has-focus).label-floating:not(.ion-color) { + color: $label-ios-text-color-focused; +} +``` + +
+ +#### 🚫 Text Alignment + +A text alignment property should not be stored in a Sass variable, even if it is used in multiple places. This is because the alignment may be tied to a specific design, and the design may change, causing them to become disconnected. + + + + + + + + + + + + + +
Do ✅Don't :x:
+ +```scss +// action-sheet.ios.scss + +:host { + text-align: center; +} + +.action-sheet-title { + text-align: center; +} +``` + + + +```scss +// action-sheet.ios.vars.scss + +/// @prop - Text align of the action sheet +$action-sheet-ios-text-align: center !default; +``` + +```scss +// action-sheet.ios.scss + +:host { + text-align: $action-sheet-ios-text-align; +} + +.action-sheet-title { + text-align: $action-sheet-ios-text-align; +} +``` + +
+ + +#### 🚫 Structural Changes + +Variables should not be used when they are structural changes of an element. This includes `display` properties, `flex` properties, `grid` properties, and more. + + + + + + + + + + + + + + + + + + + + +
Do ✅
+ +```scss +// alert.ios.scss + +.alert-button-group { + flex-wrap: wrap; +} + +.alert-button { + flex: 1 1 auto; +} +``` + +
Don't :x:
+ + +```scss +// alert.ios.vars.scss + +/// @prop - Flex wrap of the alert button group +$alert-ios-button-group-flex-wrap: wrap !default; + +/// @prop - Flex of the alert button +$alert-ios-button-flex: 1 1 auto !default; +``` + +```scss +// alert.ios.scss + +.alert-button-group { + flex-wrap: $alert-ios-button-group-flex-wrap; +} + +.alert-button { + flex: $alert-ios-button-flex; +} +``` + +
+ +#### 🚫 Font Properties + +We shouldn't use variables for changing things such as `font-size` or `font-weight`, as these are not changed based on a theme and do not need to be updated globally. When updating the `font-size` and `font-weight` for these elements, it will always be done on a case-by-case basis: + + + + + + + + + + + + + + + + + + + + +
Do ✅
+ +```scss +// action-sheet.ios.scss + +.action-sheet-title { + font-size: dynamic-font-min(1, 13px); + font-weight: 400; +} + +.action-sheet-sub-title { + font-size: dynamic-font-min(1, 13px); + font-weight: 400; +} +``` + +
Don't :x:
+ +```scss +// action-sheet.ios.vars.scss + +/// @prop - Font size of the action sheet title +$action-sheet-ios-title-font-size: dynamic-font-min(1, 13px) !default; + +/// @prop - Font weight of the action sheet title +$action-sheet-ios-title-font-weight: 400 !default; + +/// @prop - Font size of the action sheet sub title +$action-sheet-ios-sub-title-font-size: dynamic-font-min(1, 13px) !default; +``` + +```scss +// action-sheet.ios.scss + +.action-sheet-title { + font-size: $action-sheet-ios-title-font-size; + font-weight: $action-sheet-ios-title-font-weight; +} + +.action-sheet-sub-title { + font-size: $action-sheet-ios-sub-title-font-size; + font-weight: $action-sheet-ios-title-font-weight; +} +``` + +
+ +[^1]: Sass Documentation, https://sass-lang.com/documentation/ + +[^2]: Ionic Framework v3 Documentation - Theming - Overriding Ionic Variables, https://ionicframework.com/docs/v3/theming/overriding-ionic-variables/ diff --git a/docs/vue-router/README.md b/docs/vue-router/README.md new file mode 100644 index 0000000000..28494eda92 --- /dev/null +++ b/docs/vue-router/README.md @@ -0,0 +1,11 @@ +# Ionic Vue Router + +The [@ionic/vue-router](https://www.npmjs.com/package/@ionic/vue-router) package is the routing integration for [@ionic/vue](https://www.npmjs.com/package/@ionic/vue). It uses the [Vue Router](https://router.vuejs.org/) library beneath the surface. + +## Contributing + +See our [Contributing Guide](/docs/CONTRIBUTING.md). + +## Testing + +Refer to the [Vue Router Testing documentation](./testing.md) for testing the Vue Router package. diff --git a/docs/vue-router/testing.md b/docs/vue-router/testing.md new file mode 100644 index 0000000000..f633a009fc --- /dev/null +++ b/docs/vue-router/testing.md @@ -0,0 +1,7 @@ +# Vue Router Testing + +## Tests + +* Tests are found in the `__tests__` directory and use Jest. +* Tests can be run using `npm run test.spec` +* Bug fix and feature PRs should have new tests verifying the PR functionality. diff --git a/docs/vue/README.md b/docs/vue/README.md new file mode 100644 index 0000000000..aa5628d039 --- /dev/null +++ b/docs/vue/README.md @@ -0,0 +1,11 @@ +# Ionic Vue + +The [@ionic/vue](https://www.npmjs.com/package/@ionic/vue) package builds on top of [@ionic/core](https://www.npmjs.com/package/@ionic/core) components. + +## Contributing + +See our [Contributing Guide](/docs/CONTRIBUTING.md). + +## Testing + +Refer to the [Vue Testing documentation](./testing.md) for testing the Vue package. diff --git a/docs/vue/testing.md b/docs/vue/testing.md new file mode 100644 index 0000000000..268628f2ea --- /dev/null +++ b/docs/vue/testing.md @@ -0,0 +1,58 @@ +# Vue Testing + +Ionic Framework supports multiple versions of Vue. As a result, we need to verify that Ionic works correctly with each of these Vue versions. + +## Syncing Local Changes + +The Vue test app supports syncing your locally built changes for validation. + +1. [Build](../README.md#building) the `core`, `packages/vue`, and `packages/vue-router` projects using `npm run build`. +2. [Build the Vue test app](#test-app-build-structure). +3. Navigate to the built test app directory (e.g. `packages/vue/test/build/vue3`). +4. Install dependencies using `npm install`. +5. Sync your local changes using `npm run sync`. + +From here you can either build the application or start a local dev server. When re-syncing changes, you will need to wipe the build cache in `node_modules/.cache` and restart the dev server/re-build. + +## Test App Build Structure + +> [!NOTE] +> Please confirm your current directory as `packages/vue/test` before proceeding with any of the following commands. + +Unlike other test applications, these test apps are broken up into multiple directories. These directories are then combined to create a single application. This allows us to share common application code, tests, etc so that each app is being tested the same way. Below details the different pieces that help create a single test application. + +**apps** - This directory contains partial applications for each version of Vue we want to test. Typically these directories contain new `package.json` files, `jest.config.js` files, and more. If you have code that is specific to a particular version of Vue, put it in this directory. + +**base** - This directory contains the base application that each test app will use. This is where tests, application logic, and more live. If you have code that needs to be run on every test app, put it in this directory. + +**build** - When the `apps` and `base` directories are merged, the final result is put in this directory. The `build` directory should never be committed to git. + +**build.sh** - This is the script that merges the `apps` and `base` directories and places the built application in the `build` directory. + +Usage: + +```shell +# Build a test app using apps/vue3 as a reference +./build.sh vue3 +``` + +## How to modify test apps + +To add new tests, components, or pages, modify the `base` project. This ensures that tests are run for every tested version. + +If you want to add a version-specific change, add the change inside of the appropriate projects in `apps`. Be sure to replicate the directory structure. For example, if you are adding a new E2E test file called `test.e2e.ts` in `apps/vue3`, make sure you place the file in `apps/vue3/tests/e2e/test.e2e.ts`. + +### Version-specific tests + +If you need to add E2E tests that are only run on a specific version of the JS Framework, replicate the `VersionTest` component on each partial application. This ensures that tests for framework version X do not get run for framework version Y. + +## Adding New Test Apps + +As we add support for new versions of Vue, we will also need to update this directory to test against new applications. The following steps can serve as a guide for adding new apps: + +1. Navigate to the built app for the most recent version of Vue that Ionic tests. +2. Update the application to the latest version of Vue. +3. Make note of any files that changed during the upgrade (`package.json`, `package-lock.json`, etc). +4. Copy the changed files to a new directory in `apps`. +5. Add a new entry to the matrix for `test-core-vue` in `./github/workflows/build.yml`. This will allow the new test app to run against all PRs. +6. Commit these changes and push. diff --git a/lerna.json b/lerna.json index 8baba19c5a..0ba99590a8 100644 --- a/lerna.json +++ b/lerna.json @@ -1,8 +1,7 @@ { "packages": [ "core", - "docs", "packages/*" ], - "version": "8.0.0-beta.3" + "version": "8.0.0-rc.0" } diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md index 50f6d49578..2a0793e2ad 100644 --- a/packages/angular-server/CHANGELOG.md +++ b/packages/angular-server/CHANGELOG.md @@ -3,6 +3,38 @@ 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) + +**Note:** Version bump only for package @ionic/angular-server + + + + + +# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27) + +**Note:** Version bump only for package @ionic/angular-server + + + + + +# [8.0.0-beta.4](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.3..v8.0.0-beta.4) (2024-03-27) + +**Note:** Version bump only for package @ionic/angular-server + + + + + +## [7.8.2](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v7.8.2) (2024-03-27) + +**Note:** Version bump only for package @ionic/angular-server + + + + + # [8.0.0-beta.3](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.2...v8.0.0-beta.3) (2024-03-20) **Note:** Version bump only for package @ionic/angular-server diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json index 656f9b4b14..3e6beeff5e 100644 --- a/packages/angular-server/package-lock.json +++ b/packages/angular-server/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/angular-server", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/angular-server", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "license": "MIT", "dependencies": { - "@ionic/core": "^8.0.0-beta.3" + "@ionic/core": "8.0.0-rc.0" }, "devDependencies": { "@angular-eslint/eslint-plugin": "^16.0.0", @@ -1119,9 +1119,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "8.0.0-dev.11709632212.139b6f63", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-dev.11709632212.139b6f63.tgz", - "integrity": "sha512-NV/dwHkL+8TDT6cyslJoAJTEPD8Er+CEtA900DUZAe13Y5JntW4eWrH9uWKfhL4ZxAKaug/KdjoENXaa7TPc0A==", + "version": "8.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-rc.0.tgz", + "integrity": "sha512-aVHHI9Nl4F54ME9mmHNNluZdAP40kTQOoMhcWWVgOvvkKTFY5pVyQI/CLQEkIEp0Q+bBOqVcHlMDYtCPnuqS1w==", "dependencies": { "@stencil/core": "^4.12.2", "ionicons": "^7.2.2", @@ -7011,9 +7011,9 @@ "dev": true }, "@ionic/core": { - "version": "8.0.0-dev.11709632212.139b6f63", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-dev.11709632212.139b6f63.tgz", - "integrity": "sha512-NV/dwHkL+8TDT6cyslJoAJTEPD8Er+CEtA900DUZAe13Y5JntW4eWrH9uWKfhL4ZxAKaug/KdjoENXaa7TPc0A==", + "version": "8.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-rc.0.tgz", + "integrity": "sha512-aVHHI9Nl4F54ME9mmHNNluZdAP40kTQOoMhcWWVgOvvkKTFY5pVyQI/CLQEkIEp0Q+bBOqVcHlMDYtCPnuqS1w==", "requires": { "@stencil/core": "^4.12.2", "ionicons": "^7.2.2", diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json index fd20d6fc14..c50e5e6031 100644 --- a/packages/angular-server/package.json +++ b/packages/angular-server/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular-server", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "description": "Angular SSR Module for Ionic", "keywords": [ "ionic", @@ -62,6 +62,6 @@ }, "prettier": "@ionic/prettier-config", "dependencies": { - "@ionic/core": "^8.0.0-beta.3" + "@ionic/core": "8.0.0-rc.0" } } diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md index efc4c9024e..8875681996 100644 --- a/packages/angular/CHANGELOG.md +++ b/packages/angular/CHANGELOG.md @@ -3,6 +3,46 @@ 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) + +**Note:** Version bump only for package @ionic/angular + + + + + +# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27) + +**Note:** Version bump only for package @ionic/angular + + + + + +# [8.0.0-beta.4](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.3...v8.0.0-beta.4) (2024-03-27) + + +### Bug Fixes + +* **angular:** schematics account for new theme files ([#29185](https://github.com/ionic-team/ionic-framework/issues/29185)) ([b0a10df](https://github.com/ionic-team/ionic-framework/commit/b0a10dfa56a65ee3905cc2c3d48d2221a42f222f)) + + +### Features + +* **input:** add input-password-toggle component ([#29175](https://github.com/ionic-team/ionic-framework/issues/29175)) ([6c500fd](https://github.com/ionic-team/ionic-framework/commit/6c500fd6b2e2553c11fcddc9d86ac9a29f76e172)) + + + + + +## [7.8.2](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v7.8.2) (2024-03-27) + +**Note:** Version bump only for package @ionic/angular + + + + + # [8.0.0-beta.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v8.0.0-beta.3) (2024-03-20) **Note:** Version bump only for package @ionic/angular diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json index 667111c6f5..fcc6728288 100644 --- a/packages/angular/package-lock.json +++ b/packages/angular/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/angular", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/angular", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "license": "MIT", "dependencies": { - "@ionic/core": "^8.0.0-beta.3", + "@ionic/core": "8.0.0-rc.0", "ionicons": "^7.0.0", "jsonc-parser": "^3.0.0", "tslib": "^2.3.0" @@ -1398,9 +1398,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "8.0.0-dev.11709632212.139b6f63", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-dev.11709632212.139b6f63.tgz", - "integrity": "sha512-NV/dwHkL+8TDT6cyslJoAJTEPD8Er+CEtA900DUZAe13Y5JntW4eWrH9uWKfhL4ZxAKaug/KdjoENXaa7TPc0A==", + "version": "8.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-rc.0.tgz", + "integrity": "sha512-aVHHI9Nl4F54ME9mmHNNluZdAP40kTQOoMhcWWVgOvvkKTFY5pVyQI/CLQEkIEp0Q+bBOqVcHlMDYtCPnuqS1w==", "dependencies": { "@stencil/core": "^4.12.2", "ionicons": "^7.2.2", @@ -9820,9 +9820,9 @@ "dev": true }, "@ionic/core": { - "version": "8.0.0-dev.11709632212.139b6f63", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-dev.11709632212.139b6f63.tgz", - "integrity": "sha512-NV/dwHkL+8TDT6cyslJoAJTEPD8Er+CEtA900DUZAe13Y5JntW4eWrH9uWKfhL4ZxAKaug/KdjoENXaa7TPc0A==", + "version": "8.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-rc.0.tgz", + "integrity": "sha512-aVHHI9Nl4F54ME9mmHNNluZdAP40kTQOoMhcWWVgOvvkKTFY5pVyQI/CLQEkIEp0Q+bBOqVcHlMDYtCPnuqS1w==", "requires": { "@stencil/core": "^4.12.2", "ionicons": "^7.2.2", diff --git a/packages/angular/package.json b/packages/angular/package.json index 384cf3636d..586c546ee3 100644 --- a/packages/angular/package.json +++ b/packages/angular/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "description": "Angular specific wrappers for @ionic/core", "keywords": [ "ionic", @@ -47,7 +47,7 @@ } }, "dependencies": { - "@ionic/core": "^8.0.0-beta.3", + "@ionic/core": "8.0.0-rc.0", "ionicons": "^7.0.0", "jsonc-parser": "^3.0.0", "tslib": "^2.3.0" diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index c4142fecb0..7cf8f94816 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -399,14 +399,14 @@ export declare interface IonButtons extends Components.IonButtons {} @ProxyCmp({ - inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'theme', 'type'] + inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'target', 'theme', 'type'] }) @Component({ selector: 'ion-card', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'theme', 'type'], + inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'target', 'theme', 'type'], }) export class IonCard { protected el: HTMLElement; @@ -594,7 +594,7 @@ export declare interface IonCol extends Components.IonCol {} @ProxyCmp({ - inputs: ['color', 'forceOverscroll', 'fullscreen', 'mode', 'scrollEvents', 'scrollX', 'scrollY', 'theme'], + inputs: ['color', 'fixedSlotPlacement', 'forceOverscroll', 'fullscreen', 'mode', 'scrollEvents', 'scrollX', 'scrollY', 'theme'], methods: ['getScrollElement', 'scrollToTop', 'scrollToBottom', 'scrollByPoint', 'scrollToPoint'] }) @Component({ @@ -602,7 +602,7 @@ export declare interface IonCol extends Components.IonCol {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'forceOverscroll', 'fullscreen', 'mode', 'scrollEvents', 'scrollX', 'scrollY', 'theme'], + inputs: ['color', 'fixedSlotPlacement', 'forceOverscroll', 'fullscreen', 'mode', 'scrollEvents', 'scrollX', 'scrollY', 'theme'], }) export class IonContent { protected el: HTMLElement; @@ -957,7 +957,7 @@ export declare interface IonInfiniteScrollContent extends Components.IonInfinite @ProxyCmp({ - inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'spellcheck', 'step', 'theme', 'type', 'value'], + inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearInputIcon', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'spellcheck', 'step', 'theme', 'type', 'value'], methods: ['setFocus', 'getInputElement'] }) @Component({ @@ -965,7 +965,7 @@ export declare interface IonInfiniteScrollContent extends Components.IonInfinite changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'spellcheck', 'step', 'theme', 'type', 'value'], + inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearInputIcon', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'spellcheck', 'step', 'theme', 'type', 'value'], }) export class IonInput { protected el: HTMLElement; diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index 2acc29d6c2..456d1db1ba 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -493,14 +493,14 @@ export declare interface IonButtons extends Components.IonButtons {} @ProxyCmp({ defineCustomElementFn: defineIonCard, - inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'theme', 'type'] + inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'target', 'theme', 'type'] }) @Component({ selector: 'ion-card', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'theme', 'type'], + inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'target', 'theme', 'type'], standalone: true }) export class IonCard { @@ -661,7 +661,7 @@ export declare interface IonCol extends Components.IonCol {} @ProxyCmp({ defineCustomElementFn: defineIonContent, - inputs: ['color', 'forceOverscroll', 'fullscreen', 'mode', 'scrollEvents', 'scrollX', 'scrollY', 'theme'], + inputs: ['color', 'fixedSlotPlacement', 'forceOverscroll', 'fullscreen', 'mode', 'scrollEvents', 'scrollX', 'scrollY', 'theme'], methods: ['getScrollElement', 'scrollToTop', 'scrollToBottom', 'scrollByPoint', 'scrollToPoint'] }) @Component({ @@ -669,7 +669,7 @@ export declare interface IonCol extends Components.IonCol {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'forceOverscroll', 'fullscreen', 'mode', 'scrollEvents', 'scrollX', 'scrollY', 'theme'], + inputs: ['color', 'fixedSlotPlacement', 'forceOverscroll', 'fullscreen', 'mode', 'scrollEvents', 'scrollX', 'scrollY', 'theme'], standalone: true }) export class IonContent { diff --git a/packages/angular/test/README.md b/packages/angular/test/README.md index 3f8fa53018..e761e14621 100644 --- a/packages/angular/test/README.md +++ b/packages/angular/test/README.md @@ -1,118 +1,3 @@ # Angular E2E Test Apps -Ionic Framework supports multiple versions of Angular. As a result, we need to verify that Ionic works correctly with each of these Angular versions. - -## Syncing Local Changes - -The Angular test app supports syncing your locally built changes for validation. - -1. Build the `core` and `packages/angular` directories using `npm run build`. -2. [Build the Angular test app](#test-app-build-structure). -3. Navigate to the built test app directory (e.g. `packages/angular/test/build/ng17`). -4. Install dependencies using `npm install`. -5. Sync your local changes using `npm run sync`. - -From here you can either build the application or start a local dev server. When re-syncing changes, you will need to [wipe or disable the application cache](#application-cache). - -## Application Cache - -Angular CLI creates a cache of several files on disk by default in the `.angular` directory. This decreases the time taken to build the test application. However, the cache makes it difficult to quickly sync and check local changes of Ionic. As a result, the `.angular` cache is disabled by default in the test app projects. - -See https://angular.io/cli/cache for more information. - -### Disable Cache - -```shell -ng cache disable -``` - -> [!NOTE] -> You may need to manually remove the `.angular` directory once after running this command. - -### Enable Cache - -```shell -ng cache enable -``` - -> [!NOTE] -> You will need to delete the `.angular` cache and restart the dev server every time you want to sync local changes of Ionic. - -## Test App Build Structure - -> [!NOTE] -> Please confirm your current directory as `packages/angular/test` before proceeding with any of the following commands. - -Unlike other test applications, these test apps are broken up into multiple directories. These directories are then combined to create a single application. This allows us to share common application code, tests, etc so that each app is being tested the same way. Below details the different pieces that help create a single test application. - -**apps** - This directory contains partial applications for each version of Angular we want to test. Typically these directories contain new `package.json` files, `angular.json` files, and more. If you have code that is specific to a particular version of Angular, put it in this directory. - -**base** - This directory contains the base application that each test app will use. This is where tests, application logic, and more live. If you have code that needs to be run on every test app, put it in this directory. - -**build** - When the `apps` and `base` directories are merged, the final result is put in this directory. The `build` directory should never be committed to git. - -**build.sh** - This is the script that merges the `apps` and `base` directories and places the built application in the `build` directory. - -Usage: - -```shell -# Build a test app using apps/ng17 as a reference -./build.sh ng17 -``` - -## How to modify test apps - -To add new tests, components, or pages, modify the `base` project. This ensures that tests are run for every tested version. - -If you want to add a version-specific change, add the change inside of the appropriate projects in `apps`. Be sure to replicate the directory structure. For example, if you are adding a new E2E test file called `test.spec.ts` in `apps/ng17`, make sure you place the file in `apps/ng17/e2e/src/test.spec.ts`. - -### Version-specific tests - -If you need to add E2E tests that are only run on a specific version of the JS Framework, replicate the `VersionTest` component on each partial application. This ensures that tests for framework version X do not get run for framework version Y. - -### Testing Lazy Loaded Ionic Components - -Tests for lazy loaded Ionic UI components should only be added under the `/lazy` route. This ensures the `IonicModule` is added. - -### Testing Standalone Ionic Components - -Tests for standalone Ionic UI components should only be added under the `/standalone` route. This allows for an isolated environment where the lazy loaded `IonicModule` is not initialized. The standalone components use Stencil's custom element bundle instead of the lazy loaded bundle. If `IonicModule` is initialized then the Stencil components will fall back to using the lazy loaded implementation instead of the custom elements bundle implementation. - -## Adding New Test Apps - -As we add support for new versions of Angular, we will also need to update this directory to test against new applications. The following steps can serve as a guide for adding new apps: - -1. Navigate to the built app for the most recent version of Angular that Ionic tests. -2. Update the application by following the steps on https://update.angular.io/. -3. Make note of any files that changed during the upgrade (`package.json`, `package-lock.json`, `angular.json`, etc). -4. Copy the changed files to a new directory in `apps`. -5. Add a new entry to the matrix for `test-core-angular` in `./github/workflows/build.yml`. This will allow the new test app to run against all PRs. -6. Commit these changes and push. - -Example: - -In this example, we are going to add the Angular 14 test app. - -1. Build the Angular 13 test app using `./build.sh ng13`. -2. Navigate to `build/ng13`. -3. Perform the upgrade steps on https://update.angular.io/. The "From" field should say "13.0" and the "To" field should say "14.0". - -Note: You may encounter some other peer dependency issues not covered by the Angular Upgrade Guide. These peer dependency issues can be resolved manually by updating the installed version of each dependency. - -4. Observe that the output of the Angular upgrade indicates that the following files were modified: - -`angular.json` -`package-lock.json` -`package.json` -`tsconfig.json` -`src/app/form/form.component.ts` -`src/app/modal-example/modal-example.component.ts` - -5. Create a directory in `apps` named `ng14`. -6. Copy the modified files to the `apps/ng14` directory. -7. Open `./github/workflows/build.yml` and find the `test-angular-e2e` job. -8. Find the `apps` field under `matrix`. -9. Add "ng14" to the `apps` field. -10. Open `./github/workflows/stencil-nightly.yml` and find the `test-angular-e2e` job. -11. Repeat steps 8 and 9. -12. Commit these changes and push. +Refer to the [Angular Testing documentation](/docs/angular/testing.md) in order to build and run the test app. diff --git a/docs/.gitignore b/packages/docs/.gitignore similarity index 100% rename from docs/.gitignore rename to packages/docs/.gitignore diff --git a/docs/.npmignore b/packages/docs/.npmignore similarity index 100% rename from docs/.npmignore rename to packages/docs/.npmignore diff --git a/docs/.npmrc b/packages/docs/.npmrc similarity index 100% rename from docs/.npmrc rename to packages/docs/.npmrc diff --git a/docs/CHANGELOG.md b/packages/docs/CHANGELOG.md similarity index 97% rename from docs/CHANGELOG.md rename to packages/docs/CHANGELOG.md index 01ad324fdc..d6d419ad7e 100644 --- a/docs/CHANGELOG.md +++ b/packages/docs/CHANGELOG.md @@ -3,6 +3,38 @@ 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) + +**Note:** Version bump only for package @ionic/docs + + + + + +# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27) + +**Note:** Version bump only for package @ionic/docs + + + + + +# [8.0.0-beta.4](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.3...v8.0.0-beta.4) (2024-03-27) + +**Note:** Version bump only for package @ionic/docs + + + + + +## [7.8.2](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v7.8.2) (2024-03-27) + +**Note:** Version bump only for package @ionic/docs + + + + + # [8.0.0-beta.3](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.2...v8.0.0-beta.3) (2024-03-20) **Note:** Version bump only for package @ionic/docs diff --git a/packages/docs/README.md b/packages/docs/README.md new file mode 100644 index 0000000000..a6fdf0642d --- /dev/null +++ b/packages/docs/README.md @@ -0,0 +1,7 @@ +# @ionic/docs + +This package publishes the JSON data used to build the [Ionic API documentation](https://ionicframework.com/docs/api). + +## License + +* [MIT](https://raw.githubusercontent.com/ionic-team/ionic/main/LICENSE) \ No newline at end of file diff --git a/docs/package-lock.json b/packages/docs/package-lock.json similarity index 72% rename from docs/package-lock.json rename to packages/docs/package-lock.json index c6fc15073c..93354021bc 100644 --- a/docs/package-lock.json +++ b/packages/docs/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ionic/docs", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/docs", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "license": "MIT" } } diff --git a/docs/package.json b/packages/docs/package.json similarity index 94% rename from docs/package.json rename to packages/docs/package.json index f627ed0257..880d0774c0 100644 --- a/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/docs", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "description": "Pre-packaged API documentation for the Ionic docs.", "main": "core.json", "types": "core.d.ts", diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md index 61a1427818..360af50598 100644 --- a/packages/react-router/CHANGELOG.md +++ b/packages/react-router/CHANGELOG.md @@ -3,6 +3,38 @@ 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) + +**Note:** Version bump only for package @ionic/react-router + + + + + +# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27) + +**Note:** Version bump only for package @ionic/react-router + + + + + +# [8.0.0-beta.4](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.3...v8.0.0-beta.4) (2024-03-27) + +**Note:** Version bump only for package @ionic/react-router + + + + + +## [7.8.2](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v7.8.2) (2024-03-27) + +**Note:** Version bump only for package @ionic/react-router + + + + + # [8.0.0-beta.3](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.2...v8.0.0-beta.3) (2024-03-20) **Note:** Version bump only for package @ionic/react-router diff --git a/packages/react-router/README.md b/packages/react-router/README.md index 3f723796c6..2f48cca404 100644 --- a/packages/react-router/README.md +++ b/packages/react-router/README.md @@ -1,2 +1,2 @@ -## @ionic/react-router (beta) +# @ionic/react-router diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json index 1d0d13ccee..cca4e115d2 100644 --- a/packages/react-router/package-lock.json +++ b/packages/react-router/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/react-router", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/react-router", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "license": "MIT", "dependencies": { - "@ionic/react": "^8.0.0-beta.3", + "@ionic/react": "8.0.0-rc.0", "tslib": "*" }, "devDependencies": { @@ -238,9 +238,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "8.0.0-dev.11709632212.139b6f63", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-dev.11709632212.139b6f63.tgz", - "integrity": "sha512-NV/dwHkL+8TDT6cyslJoAJTEPD8Er+CEtA900DUZAe13Y5JntW4eWrH9uWKfhL4ZxAKaug/KdjoENXaa7TPc0A==", + "version": "8.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-rc.0.tgz", + "integrity": "sha512-aVHHI9Nl4F54ME9mmHNNluZdAP40kTQOoMhcWWVgOvvkKTFY5pVyQI/CLQEkIEp0Q+bBOqVcHlMDYtCPnuqS1w==", "dependencies": { "@stencil/core": "^4.12.2", "ionicons": "^7.2.2", @@ -414,11 +414,11 @@ } }, "node_modules/@ionic/react": { - "version": "8.0.0-dev.11709632212.139b6f63", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.0.0-dev.11709632212.139b6f63.tgz", - "integrity": "sha512-icDGVmmKsXsmDSsq82TxqUDmDrmqf2yzwBaQ4Hj9IHHmWWXF8NRwQCdUDKhs/na3BdtzdG7LGjodLtpAt3T0wg==", + "version": "8.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.0.0-rc.0.tgz", + "integrity": "sha512-cypiJOd0nTNy7EYm6JoDG2FiLeQiYe+nhsDgN0e2JcZqkq2ngeVs1jTxeG8t9/b/x8naNIQGh9i/rNJ1Vme+6Q==", "dependencies": { - "@ionic/core": "8.0.0-dev.11709632212.139b6f63", + "@ionic/core": "8.0.0-rc.0", "ionicons": "^7.0.0", "tslib": "*" }, @@ -667,9 +667,9 @@ ] }, "node_modules/@stencil/core": { - "version": "4.13.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.13.0.tgz", - "integrity": "sha512-gg+gtBWekQ08mDja8GVAUHNu+rrFhQaKZDvfhnS3l/5JbYiJddTimuDPPhuc0sR0JZL1iRdJTJSa+JbvmnQ1cQ==", + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.14.0.tgz", + "integrity": "sha512-+s0u/KsNolXZ7tC2hEMgMA3jaNaqOhZvYKwSzjQbc0Wv+cB481Isxzo7ifgEWRYqsJzNSyqhO6cyu/EJrGGTdg==", "bin": { "stencil": "bin/stencil" }, @@ -2425,9 +2425,9 @@ } }, "node_modules/ionicons": { - "version": "7.3.0", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.3.0.tgz", - "integrity": "sha512-l9quySYi+o4T6mFzhKRyU/1nKc2Zs0zxs7jWcq9iVRhRPQondV11jYqLTed0lVVXHfGrBCfnedKl9D6BCnA1UQ==", + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.3.1.tgz", + "integrity": "sha512-1boG4EQTBBpQ4/0PU60Yi78Iw/k8iNtKu9c0NmsbzHGnWAcwpiovG9Wi/rk5UlF+DC+CR4XDCxKo91YqvAxkww==", "dependencies": { "@stencil/core": "^4.0.3" } @@ -4057,9 +4057,9 @@ "dev": true }, "@ionic/core": { - "version": "8.0.0-dev.11709632212.139b6f63", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-dev.11709632212.139b6f63.tgz", - "integrity": "sha512-NV/dwHkL+8TDT6cyslJoAJTEPD8Er+CEtA900DUZAe13Y5JntW4eWrH9uWKfhL4ZxAKaug/KdjoENXaa7TPc0A==", + "version": "8.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-rc.0.tgz", + "integrity": "sha512-aVHHI9Nl4F54ME9mmHNNluZdAP40kTQOoMhcWWVgOvvkKTFY5pVyQI/CLQEkIEp0Q+bBOqVcHlMDYtCPnuqS1w==", "requires": { "@stencil/core": "^4.12.2", "ionicons": "^7.2.2", @@ -4163,11 +4163,11 @@ "requires": {} }, "@ionic/react": { - "version": "8.0.0-dev.11709632212.139b6f63", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.0.0-dev.11709632212.139b6f63.tgz", - "integrity": "sha512-icDGVmmKsXsmDSsq82TxqUDmDrmqf2yzwBaQ4Hj9IHHmWWXF8NRwQCdUDKhs/na3BdtzdG7LGjodLtpAt3T0wg==", + "version": "8.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.0.0-rc.0.tgz", + "integrity": "sha512-cypiJOd0nTNy7EYm6JoDG2FiLeQiYe+nhsDgN0e2JcZqkq2ngeVs1jTxeG8t9/b/x8naNIQGh9i/rNJ1Vme+6Q==", "requires": { - "@ionic/core": "8.0.0-dev.11709632212.139b6f63", + "@ionic/core": "8.0.0-rc.0", "ionicons": "^7.0.0", "tslib": "*" } @@ -4304,9 +4304,9 @@ "optional": true }, "@stencil/core": { - "version": "4.13.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.13.0.tgz", - "integrity": "sha512-gg+gtBWekQ08mDja8GVAUHNu+rrFhQaKZDvfhnS3l/5JbYiJddTimuDPPhuc0sR0JZL1iRdJTJSa+JbvmnQ1cQ==" + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.14.0.tgz", + "integrity": "sha512-+s0u/KsNolXZ7tC2hEMgMA3jaNaqOhZvYKwSzjQbc0Wv+cB481Isxzo7ifgEWRYqsJzNSyqhO6cyu/EJrGGTdg==" }, "@types/estree": { "version": "1.0.4", @@ -5584,9 +5584,9 @@ } }, "ionicons": { - "version": "7.3.0", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.3.0.tgz", - "integrity": "sha512-l9quySYi+o4T6mFzhKRyU/1nKc2Zs0zxs7jWcq9iVRhRPQondV11jYqLTed0lVVXHfGrBCfnedKl9D6BCnA1UQ==", + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.3.1.tgz", + "integrity": "sha512-1boG4EQTBBpQ4/0PU60Yi78Iw/k8iNtKu9c0NmsbzHGnWAcwpiovG9Wi/rk5UlF+DC+CR4XDCxKo91YqvAxkww==", "requires": { "@stencil/core": "^4.0.3" } diff --git a/packages/react-router/package.json b/packages/react-router/package.json index ef45877253..11d297aba2 100644 --- a/packages/react-router/package.json +++ b/packages/react-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react-router", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "description": "React Router wrapper for @ionic/react", "keywords": [ "ionic", @@ -36,7 +36,7 @@ "dist/" ], "dependencies": { - "@ionic/react": "^8.0.0-beta.3", + "@ionic/react": "8.0.0-rc.0", "tslib": "*" }, "peerDependencies": { diff --git a/packages/react-router/test/README.md b/packages/react-router/test/README.md index 22e912cedb..d072e40617 100644 --- a/packages/react-router/test/README.md +++ b/packages/react-router/test/README.md @@ -1,55 +1,3 @@ # React Router E2E Test Apps -Ionic Framework supports multiple versions of React Router. As a result, we need to verify that Ionic works correctly with each of these React Router versions. - -## Syncing Local Changes - -The React test app supports syncing your locally built changes for validation. - -1. Build the `@ionic/core`, `@ionic/react`, and `@ionic/react-router` projects using `npm run build`. -2. [Build the React test app](#test-app-build-structure). -3. Navigate to the built test app. -4. Install dependencies using `npm install`. -5. Sync your local changes using `npm run sync`. - -From here you can either build the application or start a local dev server. When re-syncing changes, you will need to wipe the build cache in `node_modules/.cache` and restart the dev server/re-build. - -## Test App Build Structure - -Unlike other test applications, these test apps are broken up into multiple directories. These directories are then combined to create a single application. This allows us to share common application code, tests, etc so that each app is being tested the same way. Below details the different pieces that help create a single test application. - -**apps** - This directory contains partial applications for each version of React we want to test. Typically these directories contain new `package.json` files, `cypress.config.ts` files, and more. If you have code that is specific to a particular version of React, put it in this directory. - -**base** - This directory contains the base application that each test app will use. This is where tests, application logic, and more live. If you have code that needs to be run on every test app, put it in this directory. - -**build** - When the `apps` and `base` directories are merged, the final result is put in this directory. The `build` directory should never be committed to git. - -**build.sh** - This is the script that merges the `apps` and `base` directories and places the built application in the `build` directory. - -Usage: - -```shell -# Build a test app using apps/reactrouter5 as a reference -./build.sh reactrouter5 -``` - -## How to modify test apps - -To add new tests, components, or pages, modify the `base` project. This ensures that tests are run for every tested version. - -If you want to add a version-specific change, add the change inside of the appropriate projects in `apps`. Be sure to replicate the directory structure. For example, if you are adding a new E2E test file called `test.e2e.ts` in `apps/reactrouter5`, make sure you place the file in `apps/react17/tests/e2e/test.e2e.ts`. - -### Version-specific tests - -If you need to add E2E tests that are only run on a specific version of the JS Framework, replicate the `VersionTest` component on each partial application. This ensures that tests for framework version X do not get run for framework version Y. - -## Adding New Test Apps - -As we add support for new versions of React Router, we will also need to update this directory to test against new applications. The following steps can serve as a guide for adding new apps: - -1. Navigate to the built app for the most recent version of React Router that Ionic tests. -2. Update the application to the latest version of React Router. -3. Make note of any files that changed during the upgrade (`package.json`, `package-lock.json`, etc). -4. Copy the changed files to a new directory in `apps`. -5. Add a new entry to the matrix for `test-react-router-e2e` in `./github/workflows/build.yml`. This will allow the new test app to run against all PRs. -6. Commit these changes and push. +Refer to the [React Router Testing documentation](/docs/react-router/testing.md) in order to build and run the test app. diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 8682e501ce..358f971413 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -3,6 +3,41 @@ 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) + +**Note:** Version bump only for package @ionic/react + + + + + +# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27) + +**Note:** Version bump only for package @ionic/react + + + + + +# [8.0.0-beta.4](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.3...v8.0.0-beta.4) (2024-03-27) + + +### Features + +* **input:** add input-password-toggle component ([#29175](https://github.com/ionic-team/ionic-framework/issues/29175)) ([6c500fd](https://github.com/ionic-team/ionic-framework/commit/6c500fd6b2e2553c11fcddc9d86ac9a29f76e172)) + + + + + +## [7.8.2](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v7.8.2) (2024-03-27) + +**Note:** Version bump only for package @ionic/react + + + + + # [8.0.0-beta.3](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.2...v8.0.0-beta.3) (2024-03-20) **Note:** Version bump only for package @ionic/react diff --git a/packages/react/README.md b/packages/react/README.md index 83119c9346..9cba7b4864 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -1,4 +1,4 @@ -## @ionic/react +# @ionic/react These are React specific building blocks on top of [@ionic/core](https://www.npmjs.com/package/@ionic/core) components/services. diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json index 154682be43..e99562e5a7 100644 --- a/packages/react/package-lock.json +++ b/packages/react/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/react", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/react", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "license": "MIT", "dependencies": { - "@ionic/core": "^8.0.0-beta.3", + "@ionic/core": "8.0.0-rc.0", "ionicons": "^7.0.0", "tslib": "*" }, @@ -798,9 +798,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "8.0.0-dev.11709632212.139b6f63", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-dev.11709632212.139b6f63.tgz", - "integrity": "sha512-NV/dwHkL+8TDT6cyslJoAJTEPD8Er+CEtA900DUZAe13Y5JntW4eWrH9uWKfhL4ZxAKaug/KdjoENXaa7TPc0A==", + "version": "8.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-rc.0.tgz", + "integrity": "sha512-aVHHI9Nl4F54ME9mmHNNluZdAP40kTQOoMhcWWVgOvvkKTFY5pVyQI/CLQEkIEp0Q+bBOqVcHlMDYtCPnuqS1w==", "dependencies": { "@stencil/core": "^4.12.2", "ionicons": "^7.2.2", @@ -13035,9 +13035,9 @@ "dev": true }, "@ionic/core": { - "version": "8.0.0-dev.11709632212.139b6f63", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-dev.11709632212.139b6f63.tgz", - "integrity": "sha512-NV/dwHkL+8TDT6cyslJoAJTEPD8Er+CEtA900DUZAe13Y5JntW4eWrH9uWKfhL4ZxAKaug/KdjoENXaa7TPc0A==", + "version": "8.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-rc.0.tgz", + "integrity": "sha512-aVHHI9Nl4F54ME9mmHNNluZdAP40kTQOoMhcWWVgOvvkKTFY5pVyQI/CLQEkIEp0Q+bBOqVcHlMDYtCPnuqS1w==", "requires": { "@stencil/core": "^4.12.2", "ionicons": "^7.2.2", diff --git a/packages/react/package.json b/packages/react/package.json index a108faac2a..c06031b716 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "description": "React specific wrapper for @ionic/core", "keywords": [ "ionic", @@ -39,7 +39,7 @@ "css/" ], "dependencies": { - "@ionic/core": "^8.0.0-beta.3", + "@ionic/core": "8.0.0-rc.0", "ionicons": "^7.0.0", "tslib": "*" }, diff --git a/packages/react/test/README.md b/packages/react/test/README.md index e0b8efa371..b398f18b65 100644 --- a/packages/react/test/README.md +++ b/packages/react/test/README.md @@ -1,55 +1,3 @@ # React E2E Test Apps -Ionic Framework supports multiple versions of React. As a result, we need to verify that Ionic works correctly with each of these React versions. - -## Syncing Local Changes - -The React test app supports syncing your locally built changes for validation. - -1. Build the `core`, `packages/react`, and `packages/react-router` directories using `npm run build`. -2. [Build the React test app](#test-app-build-structure). -3. Navigate to the built test app. -4. Install dependencies using `npm install`. -5. Sync your local changes using `npm run sync`. - -From here you can either build the application or start a local dev server. When re-syncing changes, you will need to wipe the build cache in `node_modules/.cache` and restart the dev server/re-build. - -## Test App Build Structure - -Unlike other test applications, these test apps are broken up into multiple directories. These directories are then combined to create a single application. This allows us to share common application code, tests, etc so that each app is being tested the same way. Below details the different pieces that help create a single test application. - -**apps** - This directory contains partial applications for each version of React we want to test. Typically these directories contain new `package.json` files, `cypress.config.ts` files, and more. If you have code that is specific to a particular version of React, put it in this directory. - -**base** - This directory contains the base application that each test app will use. This is where tests, application logic, and more live. If you have code that needs to be run on every test app, put it in this directory. - -**build** - When the `apps` and `base` directories are merged, the final result is put in this directory. The `build` directory should never be committed to git. - -**build.sh** - This is the script that merges the `apps` and `base` directories and places the built application in the `build` directory. - -Usage: - -```shell -# Build a test app using apps/react17 as a reference -./build.sh react17 -``` - -## How to modify test apps - -To add new tests, components, or pages, modify the `base` project. This ensures that tests are run for every tested version. - -If you want to add a version-specific change, add the change inside of the appropriate projects in `apps`. Be sure to replicate the directory structure. For example, if you are adding a new E2E test file called `test.e2e.ts` in `apps/react17`, make sure you place the file in `apps/react17/tests/e2e/test.e2e.ts`. - -### Version-specific tests - -If you need to add E2E tests that are only run on a specific version of the JS Framework, replicate the `VersionTest` component on each partial application. This ensures that tests for framework version X do not get run for framework version Y. - -## Adding New Test Apps - -As we add support for new versions of React, we will also need to update this directory to test against new applications. The following steps can serve as a guide for adding new apps: - -1. Navigate to the built app for the most recent version of React that Ionic tests. -2. Update the application to the latest version of React. -3. Make note of any files that changed during the upgrade (`package.json`, `package-lock.json`, etc). -4. Copy the changed files to a new directory in `apps`. -5. Add a new entry to the matrix for `test-react-e2e` in `./github/workflows/build.yml`. This will allow the new test app to run against all PRs. -6. Commit these changes and push. +Refer to the [React Testing documentation](/docs/react/testing.md) in order to build and run the test app. diff --git a/packages/react/test/base/README.md b/packages/react/test/base/README.md index 10e49c2b06..7988565fb6 100644 --- a/packages/react/test/base/README.md +++ b/packages/react/test/base/README.md @@ -1,47 +1,3 @@ # React Test App -## Getting Started - -### Setup - -Make sure you are using the latest versions of node and npm. If you do not have these, [download the installer](https://nodejs.org/) for the LTS version of Node.js. This is the best way to also [install npm](https://blog.npmjs.org/post/85484771375/how-to-install-npm#_=_). - -### Building Dependencies - -Navigate to the `core`, `packages/react` and `packages/react-router` directories and build each of them: - -```bash -npm i -npm run build -``` - -Then, install dependencies from this directory for this test app: - -``` -npm i -``` - -### Syncing Changes - -When making changes to the React package, run the following from this directory to sync the changes: - -```bash -npm run sync -``` - -### Previewing App - -To preview this app locally, run the following from this directory: - -```bash -npm start -``` - -### Running Tests - -To run the e2e tests, run the following from this directory: - -``` -npm run build -npm run e2e -``` +Refer to the [React Testing documentation](/docs/react/testing.md) in order to build and run the test app. diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md index 2fdd41054b..9d38f5aeca 100644 --- a/packages/vue-router/CHANGELOG.md +++ b/packages/vue-router/CHANGELOG.md @@ -3,6 +3,38 @@ 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) + +**Note:** Version bump only for package @ionic/vue-router + + + + + +# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27) + +**Note:** Version bump only for package @ionic/vue-router + + + + + +# [8.0.0-beta.4](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.3...v8.0.0-beta.4) (2024-03-27) + +**Note:** Version bump only for package @ionic/vue-router + + + + + +## [7.8.2](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v7.8.2) (2024-03-27) + +**Note:** Version bump only for package @ionic/vue-router + + + + + # [8.0.0-beta.3](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.2...v8.0.0-beta.3) (2024-03-20) **Note:** Version bump only for package @ionic/vue-router diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json index 839cf0c579..4122b614f3 100644 --- a/packages/vue-router/package-lock.json +++ b/packages/vue-router/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/vue-router", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/vue-router", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "license": "MIT", "dependencies": { - "@ionic/vue": "^8.0.0-beta.3" + "@ionic/vue": "8.0.0-rc.0" }, "devDependencies": { "@ionic/eslint-config": "^0.3.0", @@ -661,9 +661,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "8.0.0-dev.11709632212.139b6f63", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-dev.11709632212.139b6f63.tgz", - "integrity": "sha512-NV/dwHkL+8TDT6cyslJoAJTEPD8Er+CEtA900DUZAe13Y5JntW4eWrH9uWKfhL4ZxAKaug/KdjoENXaa7TPc0A==", + "version": "8.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-rc.0.tgz", + "integrity": "sha512-aVHHI9Nl4F54ME9mmHNNluZdAP40kTQOoMhcWWVgOvvkKTFY5pVyQI/CLQEkIEp0Q+bBOqVcHlMDYtCPnuqS1w==", "dependencies": { "@stencil/core": "^4.12.2", "ionicons": "^7.2.2", @@ -852,11 +852,11 @@ } }, "node_modules/@ionic/vue": { - "version": "8.0.0-dev.11709632212.139b6f63", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.0.0-dev.11709632212.139b6f63.tgz", - "integrity": "sha512-PRaqMKnm0vNjCcFBf6vh5vTXypoUJPiWTKVkhrbKyQX3/uqpOuRhU+7YRl5KLdH0ljaILiQDVJGnJJjz7cgLTA==", + "version": "8.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.0.0-rc.0.tgz", + "integrity": "sha512-U7dNrpq2PAPih5XcM2bom7MFXGlXL5OOV2uAjcykcOf5Cogw6PZ9wBOgpPW7cxwmZYy9MwJKmcjOnMLl2OZ1KQ==", "dependencies": { - "@ionic/core": "8.0.0-dev.11709632212.139b6f63", + "@ionic/core": "8.0.0-rc.0", "ionicons": "^7.0.0" } }, @@ -1508,9 +1508,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.13.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.13.0.tgz", - "integrity": "sha512-gg+gtBWekQ08mDja8GVAUHNu+rrFhQaKZDvfhnS3l/5JbYiJddTimuDPPhuc0sR0JZL1iRdJTJSa+JbvmnQ1cQ==", + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.14.0.tgz", + "integrity": "sha512-+s0u/KsNolXZ7tC2hEMgMA3jaNaqOhZvYKwSzjQbc0Wv+cB481Isxzo7ifgEWRYqsJzNSyqhO6cyu/EJrGGTdg==", "bin": { "stencil": "bin/stencil" }, @@ -4279,9 +4279,9 @@ } }, "node_modules/ionicons": { - "version": "7.3.0", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.3.0.tgz", - "integrity": "sha512-l9quySYi+o4T6mFzhKRyU/1nKc2Zs0zxs7jWcq9iVRhRPQondV11jYqLTed0lVVXHfGrBCfnedKl9D6BCnA1UQ==", + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.3.1.tgz", + "integrity": "sha512-1boG4EQTBBpQ4/0PU60Yi78Iw/k8iNtKu9c0NmsbzHGnWAcwpiovG9Wi/rk5UlF+DC+CR4XDCxKo91YqvAxkww==", "dependencies": { "@stencil/core": "^4.0.3" } @@ -7878,9 +7878,9 @@ "dev": true }, "@ionic/core": { - "version": "8.0.0-dev.11709632212.139b6f63", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-dev.11709632212.139b6f63.tgz", - "integrity": "sha512-NV/dwHkL+8TDT6cyslJoAJTEPD8Er+CEtA900DUZAe13Y5JntW4eWrH9uWKfhL4ZxAKaug/KdjoENXaa7TPc0A==", + "version": "8.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-rc.0.tgz", + "integrity": "sha512-aVHHI9Nl4F54ME9mmHNNluZdAP40kTQOoMhcWWVgOvvkKTFY5pVyQI/CLQEkIEp0Q+bBOqVcHlMDYtCPnuqS1w==", "requires": { "@stencil/core": "^4.12.2", "ionicons": "^7.2.2", @@ -7993,11 +7993,11 @@ "requires": {} }, "@ionic/vue": { - "version": "8.0.0-dev.11709632212.139b6f63", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.0.0-dev.11709632212.139b6f63.tgz", - "integrity": "sha512-PRaqMKnm0vNjCcFBf6vh5vTXypoUJPiWTKVkhrbKyQX3/uqpOuRhU+7YRl5KLdH0ljaILiQDVJGnJJjz7cgLTA==", + "version": "8.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.0.0-rc.0.tgz", + "integrity": "sha512-U7dNrpq2PAPih5XcM2bom7MFXGlXL5OOV2uAjcykcOf5Cogw6PZ9wBOgpPW7cxwmZYy9MwJKmcjOnMLl2OZ1KQ==", "requires": { - "@ionic/core": "8.0.0-dev.11709632212.139b6f63", + "@ionic/core": "8.0.0-rc.0", "ionicons": "^7.0.0" } }, @@ -8461,9 +8461,9 @@ } }, "@stencil/core": { - "version": "4.13.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.13.0.tgz", - "integrity": "sha512-gg+gtBWekQ08mDja8GVAUHNu+rrFhQaKZDvfhnS3l/5JbYiJddTimuDPPhuc0sR0JZL1iRdJTJSa+JbvmnQ1cQ==" + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.14.0.tgz", + "integrity": "sha512-+s0u/KsNolXZ7tC2hEMgMA3jaNaqOhZvYKwSzjQbc0Wv+cB481Isxzo7ifgEWRYqsJzNSyqhO6cyu/EJrGGTdg==" }, "@tootallnate/once": { "version": "2.0.0", @@ -10515,9 +10515,9 @@ } }, "ionicons": { - "version": "7.3.0", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.3.0.tgz", - "integrity": "sha512-l9quySYi+o4T6mFzhKRyU/1nKc2Zs0zxs7jWcq9iVRhRPQondV11jYqLTed0lVVXHfGrBCfnedKl9D6BCnA1UQ==", + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.3.1.tgz", + "integrity": "sha512-1boG4EQTBBpQ4/0PU60Yi78Iw/k8iNtKu9c0NmsbzHGnWAcwpiovG9Wi/rk5UlF+DC+CR4XDCxKo91YqvAxkww==", "requires": { "@stencil/core": "^4.0.3" } diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json index 6d6a516f60..9746bdb707 100644 --- a/packages/vue-router/package.json +++ b/packages/vue-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue-router", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "description": "Vue Router integration for @ionic/vue", "scripts": { "test.spec": "jest", @@ -44,7 +44,7 @@ }, "homepage": "https://github.com/ionic-team/ionic#readme", "dependencies": { - "@ionic/vue": "^8.0.0-beta.3" + "@ionic/vue": "8.0.0-rc.0" }, "devDependencies": { "@ionic/eslint-config": "^0.3.0", diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md index 6ad0600ee5..303bbf9c34 100644 --- a/packages/vue/CHANGELOG.md +++ b/packages/vue/CHANGELOG.md @@ -3,6 +3,41 @@ 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) + +**Note:** Version bump only for package @ionic/vue + + + + + +# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27) + +**Note:** Version bump only for package @ionic/vue + + + + + +# [8.0.0-beta.4](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.3...v8.0.0-beta.4) (2024-03-27) + + +### Features + +* **input:** add input-password-toggle component ([#29175](https://github.com/ionic-team/ionic-framework/issues/29175)) ([6c500fd](https://github.com/ionic-team/ionic-framework/commit/6c500fd6b2e2553c11fcddc9d86ac9a29f76e172)) + + + + + +## [7.8.2](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v7.8.2) (2024-03-27) + +**Note:** Version bump only for package @ionic/vue + + + + + # [8.0.0-beta.3](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.2...v8.0.0-beta.3) (2024-03-20) **Note:** Version bump only for package @ionic/vue diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json index fb77af06a2..b53f166398 100644 --- a/packages/vue/package-lock.json +++ b/packages/vue/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/vue", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/vue", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "license": "MIT", "dependencies": { - "@ionic/core": "^8.0.0-beta.3", + "@ionic/core": "8.0.0-rc.0", "ionicons": "^7.0.0" }, "devDependencies": { @@ -208,9 +208,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "8.0.0-dev.11709632212.139b6f63", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-dev.11709632212.139b6f63.tgz", - "integrity": "sha512-NV/dwHkL+8TDT6cyslJoAJTEPD8Er+CEtA900DUZAe13Y5JntW4eWrH9uWKfhL4ZxAKaug/KdjoENXaa7TPc0A==", + "version": "8.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-rc.0.tgz", + "integrity": "sha512-aVHHI9Nl4F54ME9mmHNNluZdAP40kTQOoMhcWWVgOvvkKTFY5pVyQI/CLQEkIEp0Q+bBOqVcHlMDYtCPnuqS1w==", "dependencies": { "@stencil/core": "^4.12.2", "ionicons": "^7.2.2", @@ -3959,9 +3959,9 @@ "dev": true }, "@ionic/core": { - "version": "8.0.0-dev.11709632212.139b6f63", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-dev.11709632212.139b6f63.tgz", - "integrity": "sha512-NV/dwHkL+8TDT6cyslJoAJTEPD8Er+CEtA900DUZAe13Y5JntW4eWrH9uWKfhL4ZxAKaug/KdjoENXaa7TPc0A==", + "version": "8.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0-rc.0.tgz", + "integrity": "sha512-aVHHI9Nl4F54ME9mmHNNluZdAP40kTQOoMhcWWVgOvvkKTFY5pVyQI/CLQEkIEp0Q+bBOqVcHlMDYtCPnuqS1w==", "requires": { "@stencil/core": "^4.12.2", "ionicons": "^7.2.2", diff --git a/packages/vue/package.json b/packages/vue/package.json index 6629e79280..edb475b937 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue", - "version": "8.0.0-beta.3", + "version": "8.0.0-rc.0", "description": "Vue specific wrapper for @ionic/core", "scripts": { "eslint": "eslint src", @@ -66,7 +66,7 @@ "vue-router": "^4.0.16" }, "dependencies": { - "@ionic/core": "^8.0.0-beta.3", + "@ionic/core": "8.0.0-rc.0", "ionicons": "^7.0.0" }, "vetur": { diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 56fbc533be..ed4815b72e 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -184,6 +184,7 @@ export const IonCard = /*@__PURE__*/ defineContainer('ion-card', de 'rel', 'routerDirection', 'routerAnimation', + 'shape', 'target' ]); @@ -263,6 +264,7 @@ export const IonCol = /*@__PURE__*/ defineContainer('ion-col', defin export const IonContent = /*@__PURE__*/ defineContainer('ion-content', defineIonContent, [ 'color', 'fullscreen', + 'fixedSlotPlacement', 'forceOverscroll', 'scrollX', 'scrollY', @@ -403,6 +405,7 @@ export const IonInput = /*@__PURE__*/ defineContainer [!NOTE] -> Please confirm your current directory as `packages/vue/test` before proceeding with any of the following commands. - -Unlike other test applications, these test apps are broken up into multiple directories. These directories are then combined to create a single application. This allows us to share common application code, tests, etc so that each app is being tested the same way. Below details the different pieces that help create a single test application. - -**apps** - This directory contains partial applications for each version of Vue we want to test. Typically these directories contain new `package.json` files, `jest.config.js` files, and more. If you have code that is specific to a particular version of Vue, put it in this directory. - -**base** - This directory contains the base application that each test app will use. This is where tests, application logic, and more live. If you have code that needs to be run on every test app, put it in this directory. - -**build** - When the `apps` and `base` directories are merged, the final result is put in this directory. The `build` directory should never be committed to git. - -**build.sh** - This is the script that merges the `apps` and `base` directories and places the built application in the `build` directory. - -Usage: - -```shell -# Build a test app using apps/vue3 as a reference -./build.sh vue3 -``` - -## How to modify test apps - -To add new tests, components, or pages, modify the `base` project. This ensures that tests are run for every tested version. - -If you want to add a version-specific change, add the change inside of the appropriate projects in `apps`. Be sure to replicate the directory structure. For example, if you are adding a new E2E test file called `test.e2e.ts` in `apps/vue3`, make sure you place the file in `apps/vue3/tests/e2e/test.e2e.ts`. - -### Version-specific tests - -If you need to add E2E tests that are only run on a specific version of the JS Framework, replicate the `VersionTest` component on each partial application. This ensures that tests for framework version X do not get run for framework version Y. - -## Adding New Test Apps - -As we add support for new versions of Vue, we will also need to update this directory to test against new applications. The following steps can serve as a guide for adding new apps: - -1. Navigate to the built app for the most recent version of Vue that Ionic tests. -2. Update the application to the latest version of Vue. -3. Make note of any files that changed during the upgrade (`package.json`, `package-lock.json`, etc). -4. Copy the changed files to a new directory in `apps`. -5. Add a new entry to the matrix for `test-core-vue` in `./github/workflows/build.yml`. This will allow the new test app to run against all PRs. -6. Commit these changes and push. +Refer to the [Vue Testing documentation](/docs/vue/testing.md) in order to build and run the test app.