diff --git a/CHANGELOG.md b/CHANGELOG.md index 8ee6fbc890..8abb306a74 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12) + + +### Bug Fixes + +* **refresher:** show when content is fullscreen ([#29608](https://github.com/ionic-team/ionic-framework/issues/29608)) ([5cdfac8](https://github.com/ionic-team/ionic-framework/commit/5cdfac89f5389cb3009427183f7034ba05788bc2)), closes [#18714](https://github.com/ionic-team/ionic-framework/issues/18714) + + + + + ## [8.2.1](https://github.com/ionic-team/ionic-framework/compare/v8.2.0...v8.2.1) (2024-06-05) * **react:** export InputInputEventDetail type ([#29512](https://github.com/ionic-team/ionic-framework/issues/29512)) ([624ceba](https://github.com/ionic-team/ionic-framework/commit/624ceba2e128bb13a3afe4c35883f603f5488d0e)), closes [#29518](https://github.com/ionic-team/ionic-framework/issues/29518) diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md index 40a59a742c..b51e62cf8d 100644 --- a/core/CHANGELOG.md +++ b/core/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12) + + +### Bug Fixes + +* **refresher:** show when content is fullscreen ([#29608](https://github.com/ionic-team/ionic-framework/issues/29608)) ([5cdfac8](https://github.com/ionic-team/ionic-framework/commit/5cdfac89f5389cb3009427183f7034ba05788bc2)), closes [#18714](https://github.com/ionic-team/ionic-framework/issues/18714) + + + + + ## [8.2.1](https://github.com/ionic-team/ionic-framework/compare/v8.2.0...v8.2.1) (2024-06-05) **Note:** Version bump only for package @ionic/core diff --git a/core/Dockerfile b/core/Dockerfile index ac5bbe3bf7..901fdf2e05 100644 --- a/core/Dockerfile +++ b/core/Dockerfile @@ -1,5 +1,5 @@ # Get Playwright -FROM mcr.microsoft.com/playwright:v1.44.0 +FROM mcr.microsoft.com/playwright:v1.44.1 # Set the working directory WORKDIR /ionic diff --git a/core/api.txt b/core/api.txt index c2928a8988..cbbf71f936 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1105,6 +1105,7 @@ ion-item-option,prop,expandable,boolean,false,false,false ion-item-option,prop,href,string | undefined,undefined,false,false ion-item-option,prop,mode,"ios" | "md",undefined,false,false ion-item-option,prop,rel,string | undefined,undefined,false,false +ion-item-option,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false ion-item-option,prop,target,string | undefined,undefined,false,false ion-item-option,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-item-option,prop,type,"button" | "reset" | "submit",'button',false,false @@ -1146,6 +1147,7 @@ ion-list,none ion-list,prop,inset,boolean,false,false,false ion-list,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false ion-list,prop,mode,"ios" | "md",undefined,false,false +ion-list,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false ion-list,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-list,method,closeSlidingItems,closeSlidingItems() => Promise diff --git a/core/package-lock.json b/core/package-lock.json index 2988458890..c5fbc031e4 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ionic/core", - "version": "8.2.1", + "version": "8.2.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/core", - "version": "8.2.1", + "version": "8.2.2", "license": "MIT", "dependencies": { "@stencil/core": "^4.17.2", @@ -19,6 +19,7 @@ "@capacitor/haptics": "^6.0.0", "@capacitor/keyboard": "^6.0.0", "@capacitor/status-bar": "^6.0.0", + "@clack/prompts": "^0.7.0", "@ionic/eslint-config": "^0.3.0", "@ionic/prettier-config": "^2.0.0", "@playwright/test": "^1.39.0", @@ -57,12 +58,12 @@ "dev": true }, "node_modules/@axe-core/playwright": { - "version": "4.9.0", - "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.9.0.tgz", - "integrity": "sha512-Q1Lz75dNsX38jof+aev7RficDMdH/HLOLySkDdXR0fUoeFcLdw4UNgDO2CNNP4CTpoesEdfYRdd6VmDXjhBgbA==", + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.9.1.tgz", + "integrity": "sha512-8m4WZbZq7/aq7ZY5IG8GqV+ZdvtGn/iJdom+wBg+iv/3BAOBIfNQtIu697a41438DzEEyptXWmC3Xl5Kx/o9/g==", "dev": true, "dependencies": { - "axe-core": "~4.9.0" + "axe-core": "~4.9.1" }, "peerDependencies": { "playwright-core": ">= 1.0.0" @@ -674,6 +675,43 @@ "@capacitor/core": "^6.0.0" } }, + "node_modules/@clack/core": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.3.4.tgz", + "integrity": "sha512-H4hxZDXgHtWTwV3RAVenqcC4VbJZNegbBjlPvzOzCouXtS2y3sDvlO3IsbrPNWuLWPPlYVYPghQdSF64683Ldw==", + "dev": true, + "dependencies": { + "picocolors": "^1.0.0", + "sisteransi": "^1.0.5" + } + }, + "node_modules/@clack/prompts": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.7.0.tgz", + "integrity": "sha512-0MhX9/B4iL6Re04jPrttDm+BsP8y6mS7byuv0BvXgdXhbV5PdlsHt55dvNsuBCPZ7xq1oTAOOuotR9NFbQyMSA==", + "bundleDependencies": [ + "is-unicode-supported" + ], + "dev": true, + "dependencies": { + "@clack/core": "^0.3.3", + "is-unicode-supported": "*", + "picocolors": "^1.0.0", + "sisteransi": "^1.0.5" + } + }, + "node_modules/@clack/prompts/node_modules/is-unicode-supported": { + "version": "1.3.0", + "dev": true, + "inBundle": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -1764,12 +1802,12 @@ } }, "node_modules/@playwright/test": { - "version": "1.44.0", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.0.tgz", - "integrity": "sha512-rNX5lbNidamSUorBhB4XZ9SQTjAqfe5M+p37Z8ic0jPFBMo5iCtQz1kRWkEMg+rYOKSlVycpQmpqjSFq7LXOfg==", + "version": "1.44.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.1.tgz", + "integrity": "sha512-1hZ4TNvD5z9VuhNJ/walIjvMVvYkZKf71axoF/uiAqpntQJXpG64dlXhoDXE3OczPuTuvjf/M5KWFg5VAVUS3Q==", "dev": true, "dependencies": { - "playwright": "1.44.0" + "playwright": "1.44.1" }, "bin": { "playwright": "cli.js" @@ -2776,9 +2814,9 @@ } }, "node_modules/axe-core": { - "version": "4.9.0", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.0.tgz", - "integrity": "sha512-H5orY+M2Fr56DWmMFpMrq5Ge93qjNdPVqzBv5gWK3aD1OvjBEJlEzxf09z93dGVQeI0LiW+aCMIx1QtShC/zUw==", + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.1.tgz", + "integrity": "sha512-QbUdXJVTpvUTHU7871ppZkdOLBeGUKBQWHkHrvN2V9IQWGMt61zf3B45BtzjxEJzYuj0JBjBZP/hmYS/R9pmAw==", "dev": true, "engines": { "node": ">=4" @@ -8498,12 +8536,12 @@ } }, "node_modules/playwright": { - "version": "1.44.0", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.0.tgz", - "integrity": "sha512-F9b3GUCLQ3Nffrfb6dunPOkE5Mh68tR7zN32L4jCk4FjQamgesGay7/dAAe1WaMEGV04DkdJfcJzjoCKygUaRQ==", + "version": "1.44.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.1.tgz", + "integrity": "sha512-qr/0UJ5CFAtloI3avF95Y0L1xQo6r3LQArLIg/z/PoGJ6xa+EwzrwO5lpNr/09STxdHuUoP2mvuELJS+hLdtgg==", "dev": true, "dependencies": { - "playwright-core": "1.44.0" + "playwright-core": "1.44.1" }, "bin": { "playwright": "cli.js" @@ -8516,9 +8554,9 @@ } }, "node_modules/playwright-core": { - "version": "1.44.0", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.0.tgz", - "integrity": "sha512-ZTbkNpFfYcGWohvTTl+xewITm7EOuqIqex0c7dNZ+aXsbrLj0qI8XlGKfPpipjm0Wny/4Lt4CJsWJk1stVS5qQ==", + "version": "1.44.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.1.tgz", + "integrity": "sha512-wh0JWtYTrhv1+OSsLPgFzGzt67Y7BE/ZS3jEqgGBlp2ppp1ZDj8c+9IARNW4dwf1poq5MgHreEM2KV/GuR4cFA==", "dev": true, "bin": { "playwright-core": "cli.js" @@ -10779,12 +10817,12 @@ }, "dependencies": { "@axe-core/playwright": { - "version": "4.9.0", - "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.9.0.tgz", - "integrity": "sha512-Q1Lz75dNsX38jof+aev7RficDMdH/HLOLySkDdXR0fUoeFcLdw4UNgDO2CNNP4CTpoesEdfYRdd6VmDXjhBgbA==", + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.9.1.tgz", + "integrity": "sha512-8m4WZbZq7/aq7ZY5IG8GqV+ZdvtGn/iJdom+wBg+iv/3BAOBIfNQtIu697a41438DzEEyptXWmC3Xl5Kx/o9/g==", "dev": true, "requires": { - "axe-core": "~4.9.0" + "axe-core": "~4.9.1" } }, "@babel/code-frame": { @@ -11237,6 +11275,35 @@ "dev": true, "requires": {} }, + "@clack/core": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.3.4.tgz", + "integrity": "sha512-H4hxZDXgHtWTwV3RAVenqcC4VbJZNegbBjlPvzOzCouXtS2y3sDvlO3IsbrPNWuLWPPlYVYPghQdSF64683Ldw==", + "dev": true, + "requires": { + "picocolors": "^1.0.0", + "sisteransi": "^1.0.5" + } + }, + "@clack/prompts": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.7.0.tgz", + "integrity": "sha512-0MhX9/B4iL6Re04jPrttDm+BsP8y6mS7byuv0BvXgdXhbV5PdlsHt55dvNsuBCPZ7xq1oTAOOuotR9NFbQyMSA==", + "dev": true, + "requires": { + "@clack/core": "^0.3.3", + "is-unicode-supported": "*", + "picocolors": "^1.0.0", + "sisteransi": "^1.0.5" + }, + "dependencies": { + "is-unicode-supported": { + "version": "1.3.0", + "bundled": true, + "dev": true + } + } + }, "@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -12014,12 +12081,12 @@ "optional": true }, "@playwright/test": { - "version": "1.44.0", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.0.tgz", - "integrity": "sha512-rNX5lbNidamSUorBhB4XZ9SQTjAqfe5M+p37Z8ic0jPFBMo5iCtQz1kRWkEMg+rYOKSlVycpQmpqjSFq7LXOfg==", + "version": "1.44.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.1.tgz", + "integrity": "sha512-1hZ4TNvD5z9VuhNJ/walIjvMVvYkZKf71axoF/uiAqpntQJXpG64dlXhoDXE3OczPuTuvjf/M5KWFg5VAVUS3Q==", "dev": true, "requires": { - "playwright": "1.44.0" + "playwright": "1.44.1" } }, "@rollup/plugin-node-resolve": { @@ -12721,9 +12788,9 @@ } }, "axe-core": { - "version": "4.9.0", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.0.tgz", - "integrity": "sha512-H5orY+M2Fr56DWmMFpMrq5Ge93qjNdPVqzBv5gWK3aD1OvjBEJlEzxf09z93dGVQeI0LiW+aCMIx1QtShC/zUw==", + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.1.tgz", + "integrity": "sha512-QbUdXJVTpvUTHU7871ppZkdOLBeGUKBQWHkHrvN2V9IQWGMt61zf3B45BtzjxEJzYuj0JBjBZP/hmYS/R9pmAw==", "dev": true }, "babel-jest": { @@ -16917,19 +16984,19 @@ } }, "playwright": { - "version": "1.44.0", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.0.tgz", - "integrity": "sha512-F9b3GUCLQ3Nffrfb6dunPOkE5Mh68tR7zN32L4jCk4FjQamgesGay7/dAAe1WaMEGV04DkdJfcJzjoCKygUaRQ==", + "version": "1.44.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.1.tgz", + "integrity": "sha512-qr/0UJ5CFAtloI3avF95Y0L1xQo6r3LQArLIg/z/PoGJ6xa+EwzrwO5lpNr/09STxdHuUoP2mvuELJS+hLdtgg==", "dev": true, "requires": { "fsevents": "2.3.2", - "playwright-core": "1.44.0" + "playwright-core": "1.44.1" } }, "playwright-core": { - "version": "1.44.0", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.0.tgz", - "integrity": "sha512-ZTbkNpFfYcGWohvTTl+xewITm7EOuqIqex0c7dNZ+aXsbrLj0qI8XlGKfPpipjm0Wny/4Lt4CJsWJk1stVS5qQ==", + "version": "1.44.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.1.tgz", + "integrity": "sha512-wh0JWtYTrhv1+OSsLPgFzGzt67Y7BE/ZS3jEqgGBlp2ppp1ZDj8c+9IARNW4dwf1poq5MgHreEM2KV/GuR4cFA==", "dev": true }, "postcss": { diff --git a/core/package.json b/core/package.json index 9e00e3b542..5a6912c75e 100644 --- a/core/package.json +++ b/core/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/core", - "version": "8.2.1", + "version": "8.2.2", "description": "Base components for Ionic", "keywords": [ "ionic", @@ -41,6 +41,7 @@ "@capacitor/haptics": "^6.0.0", "@capacitor/keyboard": "^6.0.0", "@capacitor/status-bar": "^6.0.0", + "@clack/prompts": "^0.7.0", "@ionic/eslint-config": "^0.3.0", "@ionic/prettier-config": "^2.0.0", "@playwright/test": "^1.39.0", @@ -102,7 +103,8 @@ "docker.build": "docker build -t ionic-playwright .", "test.e2e.docker": "npm run docker.build && node ./scripts/docker.mjs", "test.e2e.docker.update-snapshots": "npm run test.e2e.docker -- --update-snapshots", - "test.e2e.docker.ci": "npm run docker.build && CI=true node ./scripts/docker.mjs" + "test.e2e.docker.ci": "npm run docker.build && CI=true node ./scripts/docker.mjs", + "test.e2e.script": "node scripts/testing/e2e-script.mjs" }, "author": "Ionic Team", "license": "MIT", diff --git a/core/scripts/testing/e2e-script.mjs b/core/scripts/testing/e2e-script.mjs new file mode 100644 index 0000000000..794447bf61 --- /dev/null +++ b/core/scripts/testing/e2e-script.mjs @@ -0,0 +1,260 @@ +// The purpose of this script is to provide a way run the E2E tests +// without having the developer to manually run multiple commands based +// on the desired end result. +// E.g. update the local ground truths for a specific component or +// open the Playwright report after running the E2E tests. + +import { + intro, + outro, + confirm, + spinner, + isCancel, + cancel, + text, + log, +} from '@clack/prompts'; +import { exec, spawn } from 'child_process'; +import fs from 'node:fs'; +import { setTimeout as sleep } from 'node:timers/promises'; +import util from 'node:util'; +import color from 'picocolors'; + +async function main() { + const execAsync = util.promisify(exec); + const cleanUpFiles = async () => { + // Clean up the local ground truths. + const cleanUp = spinner(); + + // Inform the user that the local ground truths are being cleaned up. + cleanUp.start('Restoring local ground truths'); + + // Reset the local ground truths. + await execAsync('git reset -- src/**/*-linux.png').catch((error) => { + cleanUp.stop('Failed to reset local ground truths'); + console.error(error); + return process.exit(0); + }); + + // Restore the local ground truths. + await execAsync('git restore -- src/**/*-linux.png').catch((error) => { + cleanUp.stop('Failed to restore local ground truths'); + console.error(error); + return process.exit(0); + }); + + // Inform the user that the local ground truths have been cleaned up. + cleanUp.stop('Local ground truths have been restored to their original state in order to avoid committing them.'); + }; + + intro(color.inverse(' Update Local Ground Truths')); + + // Ask user for the component name they want to test. + const componentValue = await text({ + message: 'Enter the component or path you want to test (e.g. chip, src/components/chip)', + placeholder: 'Empty for all components', + }); + + // User cancelled the operation with `Ctrl+C` or `CMD+C`. + if (isCancel(componentValue)) { + cancel('Operation cancelled'); + return process.exit(0); + } + + // Ask user if they want to update their local ground truths. + const shouldUpdateTruths = await confirm({ + message: 'Do you want to update your local ground truths?', + }); + + // User cancelled the operation with `Ctrl+C` or `CMD+C`. + if (isCancel(shouldUpdateTruths)) { + cancel('Operation cancelled'); + return process.exit(0); + } + + if (shouldUpdateTruths) { + const defaultBaseBranch = 'main'; + + // Ask user for the base branch. + let baseBranch = await text({ + message: 'Enter the base branch name:', + placeholder: `default: ${defaultBaseBranch}`, + }) + + // User cancelled the operation with `Ctrl+C` or `CMD+C`. + if (isCancel(baseBranch)) { + cancel('Operation cancelled'); + return process.exit(0); + } + + // User didn't provide a base branch. + if (!baseBranch) { + baseBranch = defaultBaseBranch; + } + + /** + * The provided base branch needs to be fetched. + * This ensures that the local base branch is up-to-date with the + * remote base branch. Otherwise, there might be errors stating that + * certain files don't exist in the local base branch. + */ + const fetchBaseBranch = spinner(); + + // Inform the user that the base branch is being fetched. + fetchBaseBranch.start(`Fetching "${baseBranch}" to have the latest changes`); + + // Fetch the base branch. + await execAsync(`git fetch origin ${baseBranch}`).catch((error) => { + fetchBaseBranch.stop(`Failed to fetch "${baseBranch}"`); + console.error(error); + return process.exit(0); + }); + + // Inform the user that the base branch has been fetched. + fetchBaseBranch.stop(`Fetched "${baseBranch}"`); + + + const updateGroundTruth = spinner(); + + // Inform the user that the local ground truths are being updated. + updateGroundTruth.start('Updating local ground truths'); + + // Check if user provided an existing file or directory. + const isValidLocation = fs.existsSync(componentValue); + + // User provided an existing file or directory. + if (isValidLocation) { + const stats = fs.statSync(componentValue); + + // User provided a file as the component. + // ex: `componentValue` = `src/components/chip/test/basic/chip.e2e.ts` + if (stats.isFile()) { + // Update the local ground truths for the provided path. + await execAsync(`git checkout origin/${baseBranch} -- ${componentValue}-snapshots/*-linux.png`).catch((error) => { + updateGroundTruth.stop('Failed to update local ground truths'); + console.error(error); + return process.exit(0); + }); + } + + // User provided a directory as the component. + // ex: `componentValue` = `src/components/chip` + if (stats.isDirectory()) { + // Update the local ground truths for the provided directory. + await execAsync(`git checkout origin/${baseBranch} -- ${componentValue}/test/*/*.e2e.ts-snapshots/*-linux.png`).catch((error) => { + updateGroundTruth.stop('Failed to update local ground truths'); + console.error(error); + return process.exit(0); + }); + } + } + // User provided a component name as the component. + // ex: `componentValue` = `chip` + else if (componentValue) { + // Update the local ground truths for the provided component. + await execAsync(`git checkout origin/${baseBranch} -- src/components/${componentValue}/test/*/${componentValue}.e2e.ts-snapshots/*-linux.png`).catch((error) => { + updateGroundTruth.stop('Failed to update local ground truths'); + console.error(error); + return process.exit(0); + }); + } + // User provided an empty string. + else { + // Update the local ground truths for all components. + await execAsync(`git checkout origin/${baseBranch} -- src/components/*/test/*/*.e2e.ts-snapshots/*-linux.png`).catch((error) => { + updateGroundTruth.stop('Failed to update local ground truths'); + console.error(error); + return process.exit(0); + }); + } + + // Inform the user that the local ground truths have been updated. + updateGroundTruth.stop('Updated local ground truths'); + } + + const buildCore = spinner(); + + // Inform the user that the core is being built. + buildCore.start('Building core'); + + /** + * Build core + * Otherwise, the uncommitted changes will not be reflected in the tests because: + * - popping the stash doesn't trigger a re-render even if `npm start` is running + * - app is not running the `npm start` command + */ + await execAsync('npm run build').catch((error) => { + // Clean up the local ground truths. + cleanUpFiles(); + + buildCore.stop('Failed to build core'); + console.error(error); + return process.exit(0); + }); + + buildCore.stop('Built core'); + + const runE2ETests = spinner(); + + // Inform the user that the E2E tests are being run. + runE2ETests.start('Running E2E tests'); + + // User provided a component value. + if (componentValue) { + await execAsync(`npm run test.e2e.docker.ci ${componentValue}`).catch((error) => { + // Clean up the local ground truths. + cleanUpFiles(); + + runE2ETests.stop('Failed to run E2E tests'); + console.error(error); + return process.exit(0); + }); + } else { + await execAsync('npm run test.e2e.docker.ci').catch((error) => { + // Clean up the local ground truths. + cleanUpFiles(); + + runE2ETests.stop('Failed to run E2E tests'); + console.error(error); + return process.exit(0); + }); + } + + runE2ETests.stop('Ran E2E tests'); + + // Clean up the local ground truths. + await cleanUpFiles(); + + // Ask user if they want to open the Playwright report. + const shouldOpenReport = await confirm({ + message: 'Do you want to open the Playwright report?', + }); + + // User cancelled the operation with `Ctrl+C` or `CMD+C`. + if (isCancel(shouldOpenReport)) { + cancel('Operation cancelled'); + return process.exit(0); + } + + // User chose to open the Playwright report. + if (shouldOpenReport) { + // Use spawn to display the server information and the key to quit the server. + spawn('npx', ['playwright', 'show-report'], { + stdio: 'inherit', + }); + } else { + // Inform the user that the Playwright report can be opened by running the following command. + log.info('If you change your mind, you can open the Playwright report by running the following command:'); + log.info(color.bold('npx playwright show-report')); + } + + if (shouldOpenReport) { + outro("You're all set! Don't forget to quit serving the Playwright report when you're done."); + } else { + outro("You're all set!"); + } + + await sleep(1000); +} + +main().catch(console.error); diff --git a/core/scripts/tokens/utilities.js b/core/scripts/tokens/utilities.js index 480228dec0..b554f71ac3 100644 --- a/core/scripts/tokens/utilities.js +++ b/core/scripts/tokens/utilities.js @@ -69,12 +69,13 @@ function generateTypographyValue(prop, dictionary) { const fontWeightMap = getTypeMap(dictionary, 'font-weight'); const lineHeightMap = getTypeMap(dictionary, 'line-height'); const letterSpacingMap = getTypeMap(dictionary, 'letter-spacing'); + const fontStyle = prop.attributes.item?.toLowerCase() === 'italic' ? 'italic' : 'normal'; // This exact format is needed so that it compiles the tokens with the expected lint rules return ` $${variablesPrefix}-${prop.name}: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-${fontSizeMap[typography.fontSize]}, + font-style: ${fontStyle}, font-weight: $ionic-font-weight-${fontWeightMap[typography.fontWeight]}, letter-spacing: $ionic-letter-spacing-${letterSpacingMap[typography.letterSpacing] || 0}, line-height: $ionic-line-height-${lineHeightMap[typography.lineHeight]}, @@ -114,12 +115,13 @@ function generateTypographyUtilityClass(prop, dictionary) { const fontWeightMap = getTypeMap(dictionary, 'font-weight'); const lineHeightMap = getTypeMap(dictionary, 'line-height'); const letterSpacingMap = getTypeMap(dictionary, 'letter-spacing'); + const fontStyle = prop.attributes.item?.toLowerCase() === 'italic' ? 'italic' : 'normal'; // This exact format is needed so that it compiles the tokens with the expected lint rules return ` .${variablesPrefix}-${prop.name} { - font-family: $ionic-font-family; font-size: $ionic-font-size-${fontSizeMap[typography.fontSize]}; + font-style: ${fontStyle}; font-weight: $ionic-font-weight-${fontWeightMap[typography.fontWeight]}; letter-spacing: $ionic-letter-spacing-${letterSpacingMap[typography.letterSpacing] || 0}; line-height: $ionic-line-height-${lineHeightMap[typography.lineHeight]}; diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 8b44d6d181..d6784edbbf 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1657,6 +1657,10 @@ export namespace Components { * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). */ "rel": string | undefined; + /** + * Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes. + */ + "shape"?: 'soft' | 'round' | 'rectangular'; /** * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. */ @@ -1755,6 +1759,10 @@ export namespace Components { * The mode determines the platform behaviors of the component. */ "mode"?: "ios" | "md"; + /** + * Set to `"soft"` for slightly rounded corners, `"round"` for fully rounded corners, or `"rectangular"` for no rounded corners. Defaults to `"round"` for the `ionic` theme when inset is `true` defaults to `"rectangular"` for the `ionic` theme when inset is `false`, undefined for all other themes. + */ + "shape"?: 'soft' | 'round' | 'rectangular'; /** * The theme determines the visual appearance of the component. */ @@ -6957,6 +6965,10 @@ declare namespace LocalJSX { * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). */ "rel"?: string | undefined; + /** + * Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes. + */ + "shape"?: 'soft' | 'round' | 'rectangular'; /** * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. */ @@ -7045,6 +7057,10 @@ declare namespace LocalJSX { * The mode determines the platform behaviors of the component. */ "mode"?: "ios" | "md"; + /** + * Set to `"soft"` for slightly rounded corners, `"round"` for fully rounded corners, or `"rectangular"` for no rounded corners. Defaults to `"round"` for the `ionic` theme when inset is `true` defaults to `"rectangular"` for the `ionic` theme when inset is `false`, undefined for all other themes. + */ + "shape"?: 'soft' | 'round' | 'rectangular'; /** * The theme determines the visual appearance of the component. */ diff --git a/core/src/components/header/header.scss b/core/src/components/header/header.common.scss similarity index 75% rename from core/src/components/header/header.scss rename to core/src/components/header/header.common.scss index 7cb29aefa5..e336423792 100644 --- a/core/src/components/header/header.scss +++ b/core/src/components/header/header.common.scss @@ -1,5 +1,3 @@ -@import "../../themes/native/native.globals"; - // Header // -------------------------------------------------- @@ -10,8 +8,6 @@ ion-header { order: -1; width: 100%; - - z-index: $z-index-toolbar; } ion-header ion-toolbar:first-of-type { diff --git a/core/src/components/header/header.ionic.scss b/core/src/components/header/header.ionic.scss new file mode 100644 index 0000000000..014fe8486d --- /dev/null +++ b/core/src/components/header/header.ionic.scss @@ -0,0 +1,10 @@ +@use "./header.common"; +@use "../../themes/ionic/ionic.globals.scss" as globals; + +// Ionic Header +// -------------------------------------------------- + +ion-header { + box-shadow: #{globals.$ionic-elevation-200}; + z-index: 10; +} diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss index c8f9bd25d5..a48fd5b228 100644 --- a/core/src/components/header/header.ios.scss +++ b/core/src/components/header/header.ios.scss @@ -1,4 +1,4 @@ -@import "./header"; +@import "./header.native"; @import "./header.ios.vars"; // iOS Header diff --git a/core/src/components/header/header.md.scss b/core/src/components/header/header.md.scss index 96cf48f92c..49d700192e 100644 --- a/core/src/components/header/header.md.scss +++ b/core/src/components/header/header.md.scss @@ -1,4 +1,4 @@ -@import "./header"; +@import "./header.native"; @import "./header.md.vars"; // Material Design Header diff --git a/core/src/components/header/header.native.scss b/core/src/components/header/header.native.scss new file mode 100644 index 0000000000..9c10aadffe --- /dev/null +++ b/core/src/components/header/header.native.scss @@ -0,0 +1,9 @@ +@import "./header.common"; +@import "../../themes/native/native.globals"; + +// Header +// -------------------------------------------------- + +ion-header { + z-index: $z-index-toolbar; +} diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx index c8bf3af6ed..7972542f51 100644 --- a/core/src/components/header/header.tsx +++ b/core/src/components/header/header.tsx @@ -26,7 +26,7 @@ import { styleUrls: { ios: 'header.ios.scss', md: 'header.md.scss', - ionic: 'header.md.scss', + ionic: 'header.ionic.scss', }, }) export class Header implements ComponentInterface { diff --git a/core/src/components/header/test/basic/header.e2e.ts b/core/src/components/header/test/basic/header.e2e.ts index 67f3be9217..7941424a1d 100644 --- a/core/src/components/header/test/basic/header.e2e.ts +++ b/core/src/components/header/test/basic/header.e2e.ts @@ -1,22 +1,31 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -configs().forEach(({ title, screenshot, config }) => { +configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test.describe(title('header: rendering'), () => { test('should not have visual regressions with basic header', async ({ page }) => { await page.setContent( ` - - - Header - Default - - + + +
+ + + Header - Default + + +
`, config ); - const header = page.locator('ion-header'); - await expect(header).toHaveScreenshot(screenshot(`header-diff`)); + const container = page.locator('.container'); + await expect(container).toHaveScreenshot(screenshot(`header-diff`)); }); }); }); diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..17749a6590 Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..d06c7e1d97 Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..1d05ccb932 Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Chrome-linux.png index a19ad269a6..ba3cc588c2 100644 Binary files a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Firefox-linux.png index 55ea7993f9..e355aa2c09 100644 Binary files a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Safari-linux.png index f431465c92..ddea176f11 100644 Binary files a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Chrome-linux.png index d40a3be222..ef35714957 100644 Binary files a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Firefox-linux.png index 03a66cbbfa..bebf0a4983 100644 Binary files a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Safari-linux.png index fa758fa560..a5384aeaa5 100644 Binary files a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-option/item-option.ionic.scss b/core/src/components/item-option/item-option.ionic.scss new file mode 100644 index 0000000000..883096fc74 --- /dev/null +++ b/core/src/components/item-option/item-option.ionic.scss @@ -0,0 +1,65 @@ +@use "../../themes/ionic/ionic.globals.scss" as globals; +@import "./item-option"; + +// Ionic Item Option +// -------------------------------------------------- + +:host { + @include globals.padding(0); + + min-width: globals.$ionic-scale-1600; + height: globals.$ionic-scale-1600; + + font-size: globals.$ionic-font-size-350; + font-weight: globals.$ionic-font-weight-medium; + + line-height: globals.$ionic-line-height-500; +} + +.button-native { + @include globals.padding(globals.$ionic-space-200); +} + +::slotted([slot="top"]) { + @include globals.margin(0, 0, globals.$ionic-space-100, 0); +} + +::slotted([slot="bottom"]) { + @include globals.margin(globals.$ionic-space-100, 0, 0, 0); +} + +::slotted([slot="start"]) { + @include margin(0, globals.$ionic-space-100, 0, 0); +} + +::slotted([slot="end"]) { + @include margin(0, 0, 0, globals.$ionic-space-100); +} + +::slotted(ion-icon), +::slotted([slot="icon-only"]) { + @include globals.margin(0); + + width: globals.$ionic-scale-500; + + min-width: initial; + height: globals.$ionic-scale-500; +} + +// Item Option Shapes +// -------------------------------------------------- + +/* Round */ +:host(.item-option-round) { + @include globals.border-radius(globals.$ionic-border-radius-300); +} + +/* Soft */ +:host(.item-option-soft) { + @include globals.border-radius(globals.$ionic-border-radius-200); +} + +/* Rectangular */ +:host(.item-option-rectangular) { + @include globals.border-radius(globals.$ionic-border-radius-0); +} diff --git a/core/src/components/item-option/item-option.tsx b/core/src/components/item-option/item-option.tsx index fb6ad4a1f4..de6e1164ba 100644 --- a/core/src/components/item-option/item-option.tsx +++ b/core/src/components/item-option/item-option.tsx @@ -24,7 +24,7 @@ import type { Color } from '../../interface'; styleUrls: { ios: 'item-option.ios.scss', md: 'item-option.md.scss', - ionic: 'item-option.md.scss', + ionic: 'item-option.ionic.scss', }, shadow: true, }) @@ -80,6 +80,15 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn */ @Prop() type: 'submit' | 'reset' | 'button' = 'button'; + /** + * Set to `"rectangular"` for non-rounded corners. + * Set to `"soft"` for slightly rounded corners. + * Set to `"round"` for fully rounded corners. + * + * Defaults to `"round"` for the `ionic` theme, undefined for all other themes. + */ + @Prop() shape?: 'soft' | 'round' | 'rectangular'; + private onClick = (ev: Event) => { const el = (ev.target as HTMLElement).closest('ion-item-option'); if (el) { @@ -87,10 +96,28 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn } }; + private getShape(): string | undefined { + const theme = getIonTheme(this); + const { shape } = this; + + // TODO(ROU-10841): Remove theme check when shapes are defined for all themes. + if (theme !== 'ionic') { + return undefined; + } + + if (shape === undefined) { + return 'round'; + } + + return shape; + } + render() { const { disabled, expandable, href } = this; const TagType = href === undefined ? 'button' : ('a' as any); const theme = getIonTheme(this); + const shape = this.getShape(); + const attrs = TagType === 'button' ? { type: this.type } @@ -105,6 +132,7 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn onClick={this.onClick} class={createColorClasses(this.color, { [theme]: true, + [`item-option-${shape}`]: shape !== undefined, 'item-option-disabled': disabled, 'item-option-expandable': expandable, 'ion-activatable': true, diff --git a/core/src/components/item-options/item-options.ionic.scss b/core/src/components/item-options/item-options.ionic.scss new file mode 100644 index 0000000000..872709b4da --- /dev/null +++ b/core/src/components/item-options/item-options.ionic.scss @@ -0,0 +1,37 @@ +@use "../../themes/ionic/ionic.globals.scss" as globals; +@import "./item-options"; + +// Ionic Item Options +// -------------------------------------------------- + +.item-options-ionic { + align-items: center; + + gap: globals.$ionic-space-100; +} + +/* stylelint-disable property-disallowed-list */ +[dir="ltr"] .item-options-start ion-item-option:last-child, +[dir="rtl"] .item-options-start ion-item-option:first-child { + margin-right: globals.$ionic-space-200; +} + +[dir="ltr"] .item-options-start ion-item-option:first-child, +[dir="rtl"] .item-options-start ion-item-option:last-child { + margin-left: calc(globals.$ionic-space-200 + var(--ion-safe-area-left, 0)); + + padding-left: initial; +} + +[dir="ltr"] .item-options-end ion-item-option:first-child, +[dir="rtl"] .item-options-end ion-item-option:last-child { + margin-left: globals.$ionic-space-200; +} + +[dir="ltr"] .item-options-end ion-item-option:last-child, +[dir="rtl"] .item-options-end ion-item-option:first-child { + margin-right: calc(globals.$ionic-space-200 + var(--ion-safe-area-right, 0)); + + padding-right: initial; +} +/* stylelint-enable property-disallowed-list */ diff --git a/core/src/components/item-options/item-options.tsx b/core/src/components/item-options/item-options.tsx index 859fa5125b..d25c30d4bc 100644 --- a/core/src/components/item-options/item-options.tsx +++ b/core/src/components/item-options/item-options.tsx @@ -14,7 +14,7 @@ import type { Side } from '../menu/menu-interface'; styleUrls: { ios: 'item-options.ios.scss', md: 'item-options.md.scss', - ionic: 'item-options.md.scss', + ionic: 'item-options.ionic.scss', }, }) export class ItemOptions implements ComponentInterface { diff --git a/core/src/components/item-sliding/test/icons/index.html b/core/src/components/item-sliding/test/icons/index.html index 853fccf379..f77b4a21d0 100644 --- a/core/src/components/item-sliding/test/icons/index.html +++ b/core/src/components/item-sliding/test/icons/index.html @@ -33,7 +33,7 @@ - + @@ -43,14 +43,14 @@ Icons in Start Slot - - - More - - + Archive + + + Save + @@ -59,14 +59,14 @@ Icons in End Slot - - - More - - + Archive + + + Save + @@ -75,14 +75,18 @@ Icons in Top Slot - - - More + + + Delete - + Archive + + + Save + @@ -91,14 +95,18 @@ Icons in Bottom Slot - - - More + + + Delete - + Archive + + + Save + diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts index 215457391e..910baa4216 100644 --- a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts +++ b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts @@ -8,7 +8,7 @@ import { configs, test, dragElementBy } from '@utils/test/playwright'; * It is important to test all modes to ensure that the * child components are being rendered correctly. */ -configs().forEach(({ title, screenshot, config }) => { +configs({ modes: ['ionic-md', 'ios', 'md'] }).forEach(({ title, screenshot, config }) => { test.describe(title('item-sliding: icons'), () => { test('should not have visual regressions', async ({ page }) => { await page.goto(`/src/components/item-sliding/test/icons`, config); diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ac3984a194 Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..6c209472d5 Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..9ec35872bc Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..d8e8002ec6 Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..e0da75aa51 Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..3a84ff17c8 Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Chrome-linux.png index dd86081fd3..0f2effbc6c 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Firefox-linux.png index 2549f16cbf..65b6391fb7 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Safari-linux.png index f45f1bdaf5..a27c7766bc 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Chrome-linux.png index b28e2111b4..f03550abb9 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Firefox-linux.png index 0d0a6da1b4..ac780b9ad2 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Safari-linux.png index 54d39948db..7381ddf005 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Chrome-linux.png index 40658654f7..2621617db8 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Firefox-linux.png index 080ccf9bbd..b7261feeeb 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Safari-linux.png index cc5b896ada..1014d561ea 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Chrome-linux.png index 1faaf54147..b580339cde 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Firefox-linux.png index bd417f7418..da280e65cd 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Safari-linux.png index 792af8ecb8..cebb74cea6 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e7ae836370 Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..e311c5f213 Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..cc89525f1e Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..0f5ec5e195 Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..8f14e9d01e Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..8877fe0363 Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Chrome-linux.png index 816d389fd0..26bfa1bb06 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Firefox-linux.png index 1d0ef31853..25c145e12a 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Safari-linux.png index 86f38513c1..3bf4611d76 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Chrome-linux.png index 321f26529c..abf27c303b 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Firefox-linux.png index 152b1824bf..377809b626 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Safari-linux.png index a0cea47645..b17c190fbf 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Chrome-linux.png index 1a07e7acf7..92e6cd3259 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Firefox-linux.png index f06ea820e4..a0723798f0 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Safari-linux.png index 6cb8de94de..f8603d2cea 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Chrome-linux.png index e9db8127a5..73df01c6d5 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Firefox-linux.png index fe818a0a70..2c74e19d4f 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Safari-linux.png index 441c59564a..9bba518ba2 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..08d635aff5 Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..89f45d88ab Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ca82d5616c Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..1c10d5c272 Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..c400f94e41 Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..0f49259ef8 Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Chrome-linux.png index cd418e391b..5862aaa6c8 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Firefox-linux.png index 1406265e42..0e141632a7 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Safari-linux.png index 77593762d4..fa5432e86e 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Chrome-linux.png index 8e42bb1022..ed9690ff53 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Firefox-linux.png index 6bb3630fb5..e5256733cf 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Safari-linux.png index bfa71435c6..ad6084378b 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Chrome-linux.png index 450a014d3f..a70a4f9c50 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Firefox-linux.png index 41c88056b7..93b94ec59c 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Safari-linux.png index 89bc5c4dac..5d3aea410f 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Chrome-linux.png index 29c4c056ae..5c6176d436 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Firefox-linux.png index 390007cb5f..aa42bf4bd2 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Safari-linux.png index ef0b7f8255..4a9fdb7fed 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..05d0411830 Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..dde082200a Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..282d6c4d36 Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..d33139344a Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..e72ff37cb9 Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..7ba159e3aa Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Chrome-linux.png index 386d91d208..c414c78ddb 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Firefox-linux.png index deb8c30b81..dad017915f 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Safari-linux.png index c527b03a62..77bd96d6f0 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Chrome-linux.png index 5019b9103d..b6805b0102 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Firefox-linux.png index 82f3f7271d..7558146759 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Safari-linux.png index 1b7c8015e8..a2f51787ad 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Chrome-linux.png index 1a239efdf9..2108a0a01e 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Firefox-linux.png index 58e5da8d0a..d3330755e7 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Safari-linux.png index 4d70bb718d..c6844a7136 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Chrome-linux.png index 8f70b819fb..80a2f8e11a 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Firefox-linux.png index d0efa53595..4858288bc4 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Safari-linux.png index 2d3ce7b4bb..d08327bc41 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..7d1dfbfcf9 Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..98138b7503 Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..9a1a07e598 Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..406e3cfe55 Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..e3a59da21e Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..7d33c96a16 Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Chrome-linux.png index 99b226652c..381c62186e 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Firefox-linux.png index a1d45c3780..ec8a065912 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Safari-linux.png index 9c8918d78d..f13d56d697 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Chrome-linux.png index 8eeb4b9053..dbad705989 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Firefox-linux.png index a8b7f8127a..c7e1a97be7 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Safari-linux.png index 626762a11d..c5abbbcab9 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Chrome-linux.png index da47587ac9..d4fbf9e636 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Firefox-linux.png index 0738e2c0a7..f76599de9a 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Safari-linux.png index ff9297177d..c922a80c9e 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Chrome-linux.png index 4cd3ef3c52..ca1834c241 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Firefox-linux.png index 59f775889f..01575198a3 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Safari-linux.png index 4e6c5d7aa8..14b0886060 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/shapes/index.html b/core/src/components/item-sliding/test/shapes/index.html new file mode 100644 index 0000000000..f9b70019cb --- /dev/null +++ b/core/src/components/item-sliding/test/shapes/index.html @@ -0,0 +1,110 @@ + + + + + Item Sliding - Shapes + + + + + + + + + + + + + Item Sliding - Shapes + + + + + + + + Default + + + + + Delete + + + + Archive + + + + Save + + + + + + + Round + + + + + Delete + + + + Archive + + + + Save + + + + + + + Soft + + + + + Delete + + + + Archive + + + + Save + + + + + + + Rectangular + + + + + Delete + + + + Archive + + + + Save + + + + + + + + diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts new file mode 100644 index 0000000000..6010e8e526 --- /dev/null +++ b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts @@ -0,0 +1,30 @@ +import { expect } from '@playwright/test'; +import { configs, test, dragElementBy } from '@utils/test/playwright'; + +/** + * The shapes on the `item-option` do not vary by direction + * when they are not being dragged. + */ +configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('item-sliding: shapes'), () => { + test('should not have visual regressions when not expanded', async ({ page }) => { + await page.goto(`/src/components/item-sliding/test/shapes`, config); + + const itemIDs = ['round', 'soft', 'rectangular']; + for (const itemID of itemIDs) { + const item = page.locator(`#${itemID}`); + + /** + * Negative dragByX value to drag element from the right to the left + * to reveal the options on the right side. + */ + const dragByX = -150; + + await dragElementBy(item, page, dragByX); + await page.waitForChanges(); + + await expect(item).toHaveScreenshot(screenshot(`item-sliding-${itemID}`)); + } + }); + }); +}); diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..491c2e9d52 Binary files /dev/null and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..bced0dcfef Binary files /dev/null and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..bd88d1ad2a Binary files /dev/null and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..7d1dfbfcf9 Binary files /dev/null and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..98138b7503 Binary files /dev/null and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..9a1a07e598 Binary files /dev/null and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..7d3053e1aa Binary files /dev/null and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..edba932af9 Binary files /dev/null and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..e2ef49bc96 Binary files /dev/null and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/list/list.ionic.scss b/core/src/components/list/list.ionic.scss new file mode 100644 index 0000000000..45f33fccec --- /dev/null +++ b/core/src/components/list/list.ionic.scss @@ -0,0 +1,123 @@ +@use "../../themes/ionic/ionic.globals.scss" as globals; +@import "./list.ionic.vars.scss"; + +// Ionic List +// -------------------------------------------------- + +ion-list { + @include globals.margin(0); + @include globals.padding(0); + + display: block; + + contain: content; + list-style-type: none; +} + +// Ionic Inset List +// -------------------------------------------------- + +.list-ionic.list-inset { + @include globals.margin(globals.$ionic-space-100); +} + +// Ionic Shapes +// +// The border radius is applied to the list, excluding +// the header. The header is styled to appear as if +// it is above the list. +// +// This makes the border radius appear to be applied +// to the first element in the list (skips the header) +// and the last element in the list. These elements +// can be either `ion-item` or `ion-item-sliding`. +// -------------------------------------------------- + +.list-ionic:has(ion-list-header) { + /* Round */ + &.list-round { + /** + * Only apply the border radius to the bottom of the list. + * The top of the list should not have a border radius because + * that would include the header. + */ + @include globals.border-radius(initial, initial, $list-ionic-border-radius-round, $list-ionic-border-radius-round); + } + + // Target the first element in the list after the header + &.list-round ion-list-header + * { + /** + * Only apply the border radius to the top of the first element. + * The bottom of the first element should not have a border radius + * because that would not look connected to the rest. + */ + @include globals.border-radius($list-ionic-border-radius-round, $list-ionic-border-radius-round, initial, initial); + } + + /* Soft */ + &.list-soft { + /** + * Only apply the border radius to the bottom of the list. + * The top of the list should not have a border radius because + * that would include the header. + */ + @include globals.border-radius(initial, initial, $list-ionic-border-radius-soft, $list-ionic-border-radius-soft); + } + + // Target the first element in the list after the header + &.list-soft ion-list-header + * { + /** + * Only apply the border radius to the top of the first element. + * The bottom of the first element should not have a border radius + * because that would not look connected to the rest. + */ + @include globals.border-radius($list-ionic-border-radius-soft, $list-ionic-border-radius-soft, initial, initial); + } + + /* Rectangular */ + &.list-rectangular { + /** + * Only apply the border radius to the bottom of the list. + * The top of the list should not have a border radius because + * that would include the header. + */ + @include globals.border-radius( + initial, + initial, + $list-ionic-border-radius-rectangular, + $list-ionic-border-radius-rectangular + ); + } + + // Target the first element in the list after the header + &.list-rectangular ion-list-header + * { + /** + * Only apply the border radius to the top of the first element. + * The bottom of the first element should not have a border radius + * because that would not look connected to the rest. + */ + @include globals.border-radius( + $list-ionic-border-radius-rectangular, + $list-ionic-border-radius-rectangular, + initial, + initial + ); + } +} + +.list-ionic:not(:has(ion-list-header)) { + /* Round */ + &.list-round { + @include globals.border-radius($list-ionic-border-radius-round); + } + + /* Soft */ + &.list-soft { + @include globals.border-radius($list-ionic-border-radius-soft); + } + + /* Rectangular */ + &.list-rectangular { + @include globals.border-radius($list-ionic-border-radius-rectangular); + } +} diff --git a/core/src/components/list/list.ionic.vars.scss b/core/src/components/list/list.ionic.vars.scss new file mode 100644 index 0000000000..af02803d2d --- /dev/null +++ b/core/src/components/list/list.ionic.vars.scss @@ -0,0 +1,11 @@ +// Ionic List +// -------------------------------------------------- + +/// @prop - Round border radius of the list +$list-ionic-border-radius-round: globals.$ionic-border-radius-400; + +/// @prop - Soft border radius of the list +$list-ionic-border-radius-soft: globals.$ionic-border-radius-200; + +/// @prop - Rectangular border radius of the list +$list-ionic-border-radius-rectangular: globals.$ionic-border-radius-0; diff --git a/core/src/components/list/list.md.scss b/core/src/components/list/list.md.scss index fcedfb3df0..3d39598ec1 100644 --- a/core/src/components/list/list.md.scss +++ b/core/src/components/list/list.md.scss @@ -32,8 +32,8 @@ * These selectors ensure the last item in the list * has the correct border. * We need to consider the following scenarios: - 1. The last item in a list as long as it is not the only item. - 2. The item in the last item-sliding in a list. + * 1. The last item in a list as long as it is not the only item. + * 2. The item in the last item-sliding in a list. * Note that we do not select "ion-item-sliding ion-item:last-of-type" * because that will cause the borders to disappear on * items in an item-sliding when the item is the last diff --git a/core/src/components/list/list.tsx b/core/src/components/list/list.tsx index 01e2970af1..c684debf22 100644 --- a/core/src/components/list/list.tsx +++ b/core/src/components/list/list.tsx @@ -12,7 +12,7 @@ import { getIonTheme } from '../../global/ionic-global'; styleUrls: { ios: 'list.ios.scss', md: 'list.md.scss', - ionic: 'list.md.scss', + ionic: 'list.ionic.scss', }, }) export class List implements ComponentInterface { @@ -28,6 +28,19 @@ export class List implements ComponentInterface { */ @Prop() inset = false; + /** + * Set to `"soft"` for slightly rounded corners, + * `"round"` for fully rounded corners, + * or `"rectangular"` for no rounded corners. + * + * Defaults to `"round"` for the `ionic` theme + * when inset is `true` + * defaults to `"rectangular"` for the `ionic` + * theme when inset is `false`, + * undefined for all other themes. + */ + @Prop() shape?: 'soft' | 'round' | 'rectangular'; + /** * If `ion-item-sliding` are used inside the list, this method closes * any open sliding item. @@ -43,9 +56,31 @@ export class List implements ComponentInterface { return false; } + private getShape(): string | undefined { + const theme = getIonTheme(this); + const { shape, inset } = this; + + // TODO(ROU-10831): Remove theme check when shapes are defined for all themes. + if (theme !== 'ionic') { + return undefined; + } + + if (shape === undefined && inset) { + return 'round'; + } + + if (shape === undefined) { + return 'rectangular'; + } + + return shape; + } + render() { const theme = getIonTheme(this); + const shape = this.getShape(); const { lines, inset } = this; + return ( ); diff --git a/core/src/components/list/test/inset/index.html b/core/src/components/list/test/inset/index.html index 674bf441bf..23f3f9a227 100644 --- a/core/src/components/list/test/inset/index.html +++ b/core/src/components/list/test/inset/index.html @@ -2,7 +2,7 @@ - List - Basic + List - Inset + + + + List - Shape + + + + + + + + + + + + + + List - Shape + + + + + + + Default with inset + + + + Title +

Subtitle

+ + + + + Title +

Subtitle

+ + + + + Title +

Subtitle

+ + + + + + + Default without inset + + + + Title +

Subtitle

+ + + + + Title +

Subtitle

+ + + + + Title +

Subtitle

+ + + + + + + Round + + + + Title +

Subtitle

+ + + + + Title +

Subtitle

+ + + + + Title +

Subtitle

+ + + + + + + Soft + + + + Title +

Subtitle

+ + + + + Title +

Subtitle

+ + + + + Title +

Subtitle

+ + + + + + + Rectangular + + + + Title +

Subtitle

+ + + + + Title +

Subtitle

+ + + + + Title +

Subtitle

+ + + + + + + diff --git a/core/src/components/list/test/shape/list.e2e.ts b/core/src/components/list/test/shape/list.e2e.ts new file mode 100644 index 0000000000..76ca85311e --- /dev/null +++ b/core/src/components/list/test/shape/list.e2e.ts @@ -0,0 +1,237 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('list: shape'), () => { + test.describe(title('shape: round'), () => { + test('should render without header', async ({ page }) => { + await page.setContent( + ` + + + +
+ + + + Title +

Subtitle

+ + + + + Title +

Subtitle

+ + + +
+ + `, + config + ); + + const listWrapper = page.locator('.wrapper'); + + await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-round-without-header`)); + }); + + test('should render with header', async ({ page }) => { + await page.setContent( + ` + + + +
+ + + Header + + + + Title +

Subtitle

+ + + + + Title +

Subtitle

+ + + +
+ + `, + config + ); + + const listWrapper = page.locator('.wrapper'); + + await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-round-with-header`)); + }); + }); + + test.describe(title('shape: soft'), () => { + test('should render without header', async ({ page }) => { + await page.setContent( + ` + + + +
+ + + + Title +

Subtitle

+ + + + + Title +

Subtitle

+ + + +
+ + `, + config + ); + + const listWrapper = page.locator('.wrapper'); + + await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-soft-without-header`)); + }); + + test('should render with header', async ({ page }) => { + await page.setContent( + ` + + + +
+ + + Header + + + + Title +

Subtitle

+ + + + + Title +

Subtitle

+ + + +
+ + `, + config + ); + + const listWrapper = page.locator('.wrapper'); + + await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-soft-with-header`)); + }); + }); + + test.describe(title('shape: rectangular'), () => { + test('should render without header', async ({ page }) => { + await page.setContent( + ` + + + +
+ + + + Title +

Subtitle

+ + + + + Title +

Subtitle

+ + + +
+ + `, + config + ); + + const listWrapper = page.locator('.wrapper'); + + await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-rectangular-without-header`)); + }); + + test('should render with header', async ({ page }) => { + await page.setContent( + ` + + + +
+ + + Header + + + + Title +

Subtitle

+ + + + + Title +

Subtitle

+ + + +
+ + `, + config + ); + + const listWrapper = page.locator('.wrapper'); + + await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-rectangular-with-header`)); + }); + }); + }); +}); diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..f3039a0c47 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..8a2accbc18 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..0818396f82 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6671f1edb1 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..38b505d156 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..157aa1752e Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..61cb177d20 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..06e249745e Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..299c5efc7a Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..7eb060bf2c Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..d26173f292 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..74e0082398 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..1f7eab3c87 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..04da21ddcd Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..4aaf13c234 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..0a7b87f19b Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..20a428d208 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..7664d9c617 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx index 0d17f05821..63a637efe9 100644 --- a/core/src/components/refresher/refresher.tsx +++ b/core/src/components/refresher/refresher.tsx @@ -50,6 +50,7 @@ export class Refresher implements ComponentInterface { private pointerDown = false; private needsCompletion = false; private didRefresh = false; + private contentFullscreen = false; private lastVelocityY = 0; private elementToTransform?: HTMLElement; private animations: Animation[] = []; @@ -478,6 +479,12 @@ export class Refresher implements ComponentInterface { * Query the background content element from the host ion-content element directly. */ this.backgroundContentEl = await contentEl.getBackgroundElement(); + /** + * Check if the content element is fullscreen to apply the correct styles + * when the refresher is refreshing. Otherwise, the refresher will be + * hidden because it is positioned behind the background content element. + */ + this.contentFullscreen = contentEl.fullscreen; if (await shouldUseNativeRefresher(this.el, getIonMode(this))) { this.setupNativeRefresher(contentEl); @@ -580,6 +587,15 @@ export class Refresher implements ComponentInterface { this.progress = 0; this.state = RefresherState.Inactive; this.memoizeOverflowStyle(); + + /** + * If the content is fullscreen, then we need to + * set the offset-top style on the background content + * element to ensure that the refresher is shown. + */ + if (this.contentFullscreen && this.backgroundContentEl) { + this.backgroundContentEl.style.setProperty('--offset-top', '0px'); + } } private onMove(detail: GestureDetail) { @@ -737,6 +753,18 @@ export class Refresher implements ComponentInterface { * user can scroll again. */ this.setCss(0, '0ms', false, '', true); + + /** + * Reset the offset-top style on the background content + * when the refresher is no longer refreshing and the + * content is fullscreen. + * + * This ensures that the behavior of background content + * does not change when refreshing is complete. + */ + if (this.contentFullscreen && this.backgroundContentEl) { + this.backgroundContentEl?.style.removeProperty('--offset-top'); + } }, 600); // reset the styles on the scroll element diff --git a/core/src/components/refresher/test/fullscreen/index.html b/core/src/components/refresher/test/fullscreen/index.html new file mode 100644 index 0000000000..be1b30f7b0 --- /dev/null +++ b/core/src/components/refresher/test/fullscreen/index.html @@ -0,0 +1,103 @@ + + + + + Refresher - Basic + + + + + + + + + + + + + + + Pull To Refresh + + + + + + + + + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim + fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce + augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada + mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia + mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere + pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, + aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, + pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida + malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. + Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero + odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, + vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in + odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. + Etiam lobortis tristique maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum + et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue + faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis + venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean + sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id + molestie sed, pretium vitae turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et + sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit + amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. + Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan + condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt + libero finibus at. Mauris condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce + mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse + enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin + justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur + libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, + vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam + neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + + + + + + diff --git a/core/src/components/refresher/test/fullscreen/refresher.e2e.ts b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts new file mode 100644 index 0000000000..789f036a8c --- /dev/null +++ b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts @@ -0,0 +1,84 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +import { pullToRefresh } from '../test.utils'; + +/** + * This behavior does not vary across directions. + */ +configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => { + test.describe(title('refresher: fullscreen content'), () => { + test.beforeEach(async ({ page }) => { + /** + * Do not call `complete()` from `ion-refresher` in this test. + * This will allow the refresher to "pause" while refreshing. + * By pausing, the test can verify that the refresher is + * completely visible when the content is fullscreen. + */ + await page.setContent( + ` + + + Pull To Refresh + + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + + `, + config + ); + }); + + // Bug only occurs with the legacy refresher. + test.describe('legacy refresher', () => { + test('should display when content is fullscreen', async ({ page, browserName }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/18714', + }); + + const refresher = page.locator('ion-refresher'); + + await pullToRefresh(page); + + if (browserName === 'firefox') { + /** + * The drag is highlighting the text in Firefox for + * some reason. + * + * Clicking the mouse will remove the highlight and + * be more consistent with other browsers. This + * does not happen in Firefox, just when running + * in Playwright. + */ + await page.mouse.click(0, 0); + } + + await expect(refresher).toHaveScreenshot(screenshot('refresher-legacy-content-fullscreen')); + }); + }); + }); +}); diff --git a/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6eff146a19 Binary files /dev/null and b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f98533116d Binary files /dev/null and b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Safari-linux.png b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ac4ba98e19 Binary files /dev/null and b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Chrome-linux.png b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..251cbbc71c Binary files /dev/null and b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Firefox-linux.png b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..0c8d2d9fb0 Binary files /dev/null and b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Safari-linux.png b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..45ce09639f Binary files /dev/null and b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/css/ionic/core.ionic.scss b/core/src/css/ionic/core.ionic.scss index b51f53a54d..84eeec048f 100644 --- a/core/src/css/ionic/core.ionic.scss +++ b/core/src/css/ionic/core.ionic.scss @@ -1,6 +1,6 @@ @use "../../themes/ionic/ionic.globals.scss" as globals; -// Ionic Font Family +// Ionic Font // -------------------------------------------------- :root { @@ -10,7 +10,6 @@ html { --ionic-dynamic-font: -apple-system-body; - font-family: #{globals.$ionic-font-family}; } body { diff --git a/core/src/css/ionic/typography.ionic.scss b/core/src/css/ionic/typography.ionic.scss index 6e87435699..afbe10f65d 100644 --- a/core/src/css/ionic/typography.ionic.scss +++ b/core/src/css/ionic/typography.ionic.scss @@ -1,91 +1,35 @@ @use "../../themes/ionic/ionic.globals.scss" as globals; +// TODO(ROU-10833): add font loading solution here, as a @font-face, base64 or cdn html { font-family: globals.$ionic-font-family; } body { - font-weight: globals.$ionic-font-weight-regular; - font-size: globals.$ionic-font-size-350; - - line-height: globals.$ionic-line-height-600; + @include globals.typography(globals.$ionic-body-md-regular); } -/* Composite utility classes for html headings and font classes, that aggregate size and weight, based on tokens*/ -h1, -.ionic-heading1, -h2, -.ionic-heading2, -h3, -.ionic-heading3, -h4, -.ionic-heading4, -h5, -.ionic-heading5, -h6, -.ionic-heading6 { - color: globals.$ionic-color-neutral-900; - - font-weight: globals.$ionic-font-weight-semi-bold; +/* Override html headings based on heading tokens */ +h1 { + @include globals.typography(globals.$ionic-heading-h1-regular); } -h1, -.ionic-heading1 { - font-size: #{globals.$ionic-font-size-700}; - - line-height: globals.$ionic-line-height-900; +h2 { + @include globals.typography(globals.$ionic-heading-h2-regular); } -h2, -.ionic-heading2 { - font-size: globals.$ionic-font-size-800; - - line-height: globals.$ionic-line-height-800; +h3 { + @include globals.typography(globals.$ionic-heading-h3-regular); } -h3, -.ionic-heading3 { - font-size: globals.$ionic-font-size-600; - - line-height: globals.$ionic-line-height-800; +h4 { + @include globals.typography(globals.$ionic-heading-h4-regular); } -h4, -.ionic-heading4 { - font-size: globals.$ionic-font-size-550; - - line-height: globals.$ionic-line-height-700; +h5 { + @include globals.typography(globals.$ionic-heading-h5-regular); } -h5, -.ionic-heading5 { - font-size: globals.$ionic-font-size-500; - - line-height: globals.$ionic-line-height-700; -} - -h6, -.ionic-heading6 { - font-size: globals.$ionic-font-size-450; - - line-height: globals.$ionic-line-height-600; -} - -.ionic-display-s { - font-size: globals.$ionic-font-size-800; - font-weight: globals.$ionic-font-weight-regular; - - line-height: globals.$ionic-line-height-500; -} - -.ionic-display-m { - font-size: globals.$ionic-font-size-900; - font-weight: globals.$ionic-font-weight-regular; - - line-height: globals.$ionic-line-height-600; -} - -/* Common */ -.ionic-font-italic { - font-style: italic; +h6 { + @include globals.typography(globals.$ionic-heading-h6-regular); } diff --git a/core/src/css/test/typography/basic/index.html b/core/src/css/test/typography/basic/index.html new file mode 100644 index 0000000000..1a2f1173b6 --- /dev/null +++ b/core/src/css/test/typography/basic/index.html @@ -0,0 +1,120 @@ + + + + + Typography - Display Tokens + + + + + + + + + + + + + + + + Typography - Display Tokens + + + + +
+ Display + lg +

display-lg-regular

+

display-lg-light

+ sm +

display-sm-regular

+

display-sm-light

+
+
+
+ Headings + h1 +

heading-h1-regular

+

heading-h1-medium

+

heading-h1-semi-bold

+

heading-h1-bold

+ h2 +

heading-h2-regular

+

heading-h2-medium

+

heading-h2-semi-bold

+

heading-h2-bold

+ h3 +

heading-h3-regular

+

heading-h3-medium

+

heading-h3-semi-bold

+

heading-h3-bold

+ h4 +

heading-h4-regular

+

heading-h4-medium

+

heading-h4-semi-bold

+

heading-h4-bold

+ h5 +

heading-h5-regular

+

heading-h5-medium

+

heading-h5-semi-bold

+

heading-h5-bold

+ h6 +

heading-h6-regular

+

heading-h6-medium

+

heading-h6-semi-bold

+

heading-h6-bold

+
+
+
+ Body + sm +

ionic-body-sm-regular

+

ionic-body-sm-medium

+

ionic-body-sm-semi-bold

+

ionic-body-sm-bold

+

ionic-body-sm-link

+

ionic-body-sm-italic

+ md +

ionic-body-md-regular

+

ionic-body-md-medium

+

ionic-body-md-semi-bold

+

ionic-body-md-bold

+

ionic-body-md-link

+

ionic-body-md-italic

+ lg +

ionic-body-lg-regular

+

ionic-body-lg-medium

+

ionic-body-lg-semi-bold

+

ionic-body-lg-bold

+

ionic-body-lg-link

+

ionic-body-lg-italic

+
+
+
+ Action +

ionic-action-sm

+

ionic-action-md

+

ionic-action-lg

+

ionic-action-xl

+
+
+
+ Overline +

ionic-overline-regular

+

ionic-overline-medium

+

ionic-overline-semi-bold

+

ionic-overline-bold

+
+ + + + diff --git a/core/src/css/test/typography/basic/typography.e2e.ts b/core/src/css/test/typography/basic/typography.e2e.ts index bf9343dc52..2904bbcb35 100644 --- a/core/src/css/test/typography/basic/typography.e2e.ts +++ b/core/src/css/test/typography/basic/typography.e2e.ts @@ -1,112 +1,14 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -/** - * Typography styles are only available in the Ionic theme - */ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { - test.describe(title('typography: global styles'), () => { - test('should apply the globals styles for each semantic tag', async ({ page }) => { - await page.setContent( - ` - - -
-

H1: The quick brown fox jumps over the lazy dog

-

H2: The quick brown fox jumps over the lazy dog

-

H3: The quick brown fox jumps over the lazy dog

-

H4: The quick brown fox jumps over the lazy dog

-
H5: The quick brown fox jumps over the lazy dog
-
H6: The quick brown fox jumps over the lazy dog
-

Tag_P FontLarge: The quick brown fox jumps over the lazy dog

-

Tag_None FontMedium: The quick brown fox jumps over the lazydog

-

Tag_Span FontSmall: The quick brown fox jumps over the lazy dog

-
- `, - config - ); + test.describe(title('Typography: basic'), () => { + test('should not have visual regressions', async ({ page }) => { + await page.goto(`/src/css/test/typography/basic`, config); - const div = page.locator('div'); - await expect(div).toHaveScreenshot(screenshot(`ionic-semantic-global-styles`)); - }); + await page.setIonViewport(); - test('should apply the utility classes for each heading', async ({ page }) => { - await page.setContent( - ` - - -
-

Tag H1 - Style Heading 2 - Font Light

-

Tag H2 - Style Heading 3 - Font Light

-

Tag H3 - Style Heading 4 - Font Regular

-

Tag H4 - Style Heading 5 - Font Medium

-
Tag H5 - Style Heading 6 - Font Semibold
-
Tag H6 - Style Heading 1 - Font Bold
-
- `, - config - ); - - const div = page.locator('div'); - await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-semantic-tags`)); - }); - - test('should apply the heading classes on ion-text element', async ({ page }) => { - await page.setContent( - ` - - -
-

Utility class 'ionic-heading1'

-

Utility class 'ionic-heading2'

-

Utility class 'ionic-heading3'

-

Utility class 'ionic-heading4'

-

Utility class 'ionic-heading5'

-

Utility class 'ionic-heading6'

-
- `, - config - ); - - const div = page.locator('div'); - await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-headings`)); - }); - - test('should apply the utility classes for font weights', async ({ page }) => { - await page.setContent( - ` - - -
-

Utility class 'ionic-font-light'

-

Utility class 'ionic-font-regular'

-

Utility class 'ionic-font-medium'

-

Utility class 'ionic-font-semibold'

-

Utility class 'ionic-font-bold'

-
- `, - config - ); - - const div = page.locator('div'); - await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-font-weights`)); - }); - - test('should apply the utility classes for font display', async ({ page }) => { - await page.setContent( - ` - - -
-

Utility class 'ionic-display-s'

-

Utility class 'ionic-display-m'

-
- `, - config - ); - - const div = page.locator('div'); - await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-font-displays`)); + await expect(page).toHaveScreenshot(screenshot(`ionic-typography-basic-styles`)); }); }); }); diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 901a474a93..0000000000 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index abe3fdfc8f..0000000000 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index cab9f0a1f2..0000000000 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..8e2a362a4d Binary files /dev/null and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..74bb1c30dd Binary files /dev/null and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..1ffe6a3f74 Binary files /dev/null and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-displays-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-displays-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index a7b8c698fc..0000000000 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-displays-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-displays-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-displays-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index acf5c987fb..0000000000 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-displays-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-displays-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-displays-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index 8c62f65f00..0000000000 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-displays-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 315434f81d..0000000000 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index 6dab853f18..0000000000 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index 58d1fa9721..0000000000 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 132c963072..0000000000 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index f3b42387c2..0000000000 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index 2abebaf5ca..0000000000 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 6e6f25a18a..0000000000 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index 7c8e1322f5..0000000000 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index 58082b3879..0000000000 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/foundations/ionic.utility.scss b/core/src/foundations/ionic.utility.scss index 4e7db48775..213b6ca918 100644 --- a/core/src/foundations/ionic.utility.scss +++ b/core/src/foundations/ionic.utility.scss @@ -1961,8 +1961,8 @@ } .ionic-display-sm-regular { - font-family: $ionic-font-family; font-size: $ionic-font-size-800; + font-style: normal; font-weight: $ionic-font-weight-regular; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-1100; @@ -1971,8 +1971,8 @@ } .ionic-display-sm-light { - font-family: $ionic-font-family; font-size: $ionic-font-size-800; + font-style: normal; font-weight: $ionic-font-weight-light; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-1100; @@ -1980,19 +1980,9 @@ text-decoration: none; } -.ionic-display-lg-light { - font-family: $ionic-font-family; - font-size: $ionic-font-size-900; - font-weight: $ionic-font-weight-light; - letter-spacing: $ionic-letter-spacing-0; - line-height: $ionic-line-height-1200; - text-transform: none; - text-decoration: none; -} - .ionic-display-lg-regular { - font-family: $ionic-font-family; font-size: $ionic-font-size-900; + font-style: normal; font-weight: $ionic-font-weight-regular; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-1200; @@ -2000,9 +1990,19 @@ text-decoration: none; } +.ionic-display-lg-light { + font-size: $ionic-font-size-900; + font-style: normal; + font-weight: $ionic-font-weight-light; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-1200; + text-transform: none; + text-decoration: none; +} + .ionic-heading-h1-regular { - font-family: $ionic-font-family; font-size: $ionic-font-size-700; + font-style: normal; font-weight: $ionic-font-weight-regular; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-900; @@ -2011,9 +2011,9 @@ } .ionic-heading-h1-medium { - font-family: $ionic-font-family; font-size: $ionic-font-size-700; - font-weight: $ionic-font-weight-bold; + font-style: normal; + font-weight: $ionic-font-weight-medium; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-900; text-transform: none; @@ -2021,9 +2021,9 @@ } .ionic-heading-h1-semi-bold { - font-family: $ionic-font-family; - font-size: $ionic-font-size-700; - font-weight: $ionic-font-weight-bold; + font-size: $ionic-font-size-600; + font-style: normal; + font-weight: $ionic-font-weight-semi-bold; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-900; text-transform: none; @@ -2031,8 +2031,8 @@ } .ionic-heading-h1-bold { - font-family: $ionic-font-family; font-size: $ionic-font-size-700; + font-style: normal; font-weight: $ionic-font-weight-bold; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-900; @@ -2041,8 +2041,8 @@ } .ionic-heading-h2-regular { - font-family: $ionic-font-family; font-size: $ionic-font-size-650; + font-style: normal; font-weight: $ionic-font-weight-regular; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-900; @@ -2051,8 +2051,8 @@ } .ionic-heading-h2-medium { - font-family: $ionic-font-family; font-size: $ionic-font-size-650; + font-style: normal; font-weight: $ionic-font-weight-medium; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-900; @@ -2061,9 +2061,9 @@ } .ionic-heading-h2-semi-bold { - font-family: $ionic-font-family; font-size: $ionic-font-size-650; - font-weight: $ionic-font-weight-bold; + font-style: normal; + font-weight: $ionic-font-weight-semi-bold; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-900; text-transform: none; @@ -2071,8 +2071,8 @@ } .ionic-heading-h2-bold { - font-family: $ionic-font-family; font-size: $ionic-font-size-650; + font-style: normal; font-weight: $ionic-font-weight-bold; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-900; @@ -2081,8 +2081,8 @@ } .ionic-heading-h3-regular { - font-family: $ionic-font-family; font-size: $ionic-font-size-600; + font-style: normal; font-weight: $ionic-font-weight-regular; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-800; @@ -2090,19 +2090,9 @@ text-decoration: none; } -.ionic-heading-h3-semi-bold { - font-family: $ionic-font-family; - font-size: $ionic-font-size-600; - font-weight: $ionic-font-weight-bold; - letter-spacing: $ionic-letter-spacing-0; - line-height: $ionic-line-height-800; - text-transform: none; - text-decoration: none; -} - .ionic-heading-h3-medium { - font-family: $ionic-font-family; font-size: $ionic-font-size-600; + font-style: normal; font-weight: $ionic-font-weight-medium; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-800; @@ -2110,9 +2100,19 @@ text-decoration: none; } -.ionic-heading-h3-bold { - font-family: $ionic-font-family; +.ionic-heading-h3-semi-bold { font-size: $ionic-font-size-600; + font-style: normal; + font-weight: $ionic-font-weight-semi-bold; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-800; + text-transform: none; + text-decoration: none; +} + +.ionic-heading-h3-bold { + font-size: $ionic-font-size-600; + font-style: normal; font-weight: $ionic-font-weight-bold; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-800; @@ -2121,8 +2121,8 @@ } .ionic-heading-h4-regular { - font-family: $ionic-font-family; font-size: $ionic-font-size-550; + font-style: normal; font-weight: $ionic-font-weight-regular; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-700; @@ -2131,8 +2131,8 @@ } .ionic-heading-h4-medium { - font-family: $ionic-font-family; font-size: $ionic-font-size-550; + font-style: normal; font-weight: $ionic-font-weight-medium; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-700; @@ -2141,9 +2141,9 @@ } .ionic-heading-h4-semi-bold { - font-family: $ionic-font-family; font-size: $ionic-font-size-550; - font-weight: $ionic-font-weight-bold; + font-style: normal; + font-weight: $ionic-font-weight-semi-bold; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-700; text-transform: none; @@ -2151,8 +2151,8 @@ } .ionic-heading-h4-bold { - font-family: $ionic-font-family; font-size: $ionic-font-size-550; + font-style: normal; font-weight: $ionic-font-weight-bold; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-700; @@ -2161,8 +2161,8 @@ } .ionic-heading-h5-regular { - font-family: $ionic-font-family; font-size: $ionic-font-size-500; + font-style: normal; font-weight: $ionic-font-weight-regular; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-700; @@ -2171,8 +2171,8 @@ } .ionic-heading-h5-medium { - font-family: $ionic-font-family; font-size: $ionic-font-size-500; + font-style: normal; font-weight: $ionic-font-weight-medium; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-700; @@ -2181,9 +2181,9 @@ } .ionic-heading-h5-semi-bold { - font-family: $ionic-font-family; font-size: $ionic-font-size-500; - font-weight: $ionic-font-weight-bold; + font-style: normal; + font-weight: $ionic-font-weight-semi-bold; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-700; text-transform: none; @@ -2191,8 +2191,8 @@ } .ionic-heading-h5-bold { - font-family: $ionic-font-family; font-size: $ionic-font-size-500; + font-style: normal; font-weight: $ionic-font-weight-bold; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-700; @@ -2201,8 +2201,8 @@ } .ionic-heading-h6-regular { - font-family: $ionic-font-family; font-size: $ionic-font-size-450; + font-style: normal; font-weight: $ionic-font-weight-regular; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-700; @@ -2211,8 +2211,8 @@ } .ionic-heading-h6-medium { - font-family: $ionic-font-family; font-size: $ionic-font-size-450; + font-style: normal; font-weight: $ionic-font-weight-medium; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-700; @@ -2221,9 +2221,9 @@ } .ionic-heading-h6-semi-bold { - font-family: $ionic-font-family; font-size: $ionic-font-size-450; - font-weight: $ionic-font-weight-bold; + font-style: normal; + font-weight: $ionic-font-weight-semi-bold; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-700; text-transform: none; @@ -2231,8 +2231,8 @@ } .ionic-heading-h6-bold { - font-family: $ionic-font-family; font-size: $ionic-font-size-450; + font-style: normal; font-weight: $ionic-font-weight-bold; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-700; @@ -2240,129 +2240,9 @@ text-decoration: none; } -.ionic-body-sm-regular { - font-family: $ionic-font-family; - font-size: $ionic-font-size-300; - font-weight: $ionic-font-weight-regular; - letter-spacing: $ionic-letter-spacing-0; - line-height: $ionic-line-height-400; - text-transform: none; - text-decoration: none; -} - -.ionic-body-sm-medium { - font-family: $ionic-font-family; - font-size: $ionic-font-size-300; - font-weight: $ionic-font-weight-medium; - letter-spacing: $ionic-letter-spacing-0; - line-height: $ionic-line-height-400; - text-transform: none; - text-decoration: none; -} - -.ionic-body-sm-semi-bold { - font-family: $ionic-font-family; - font-size: $ionic-font-size-300; - font-weight: $ionic-font-weight-bold; - letter-spacing: $ionic-letter-spacing-0; - line-height: $ionic-line-height-400; - text-transform: none; - text-decoration: none; -} - -.ionic-body-sm-bold { - font-family: $ionic-font-family; - font-size: $ionic-font-size-300; - font-weight: $ionic-font-weight-bold; - letter-spacing: $ionic-letter-spacing-0; - line-height: $ionic-line-height-400; - text-transform: none; - text-decoration: none; -} - -.ionic-body-sm-link { - font-family: $ionic-font-family; - font-size: $ionic-font-size-300; - font-weight: $ionic-font-weight-regular; - letter-spacing: $ionic-letter-spacing-0; - line-height: $ionic-line-height-400; - text-transform: none; - text-decoration: underline; -} - -.ionic-body-sm-italic { - font-family: $ionic-font-family; - font-size: $ionic-font-size-300; - font-weight: $ionic-font-weight-regular; - letter-spacing: $ionic-letter-spacing-0; - line-height: $ionic-line-height-400; - text-transform: none; - text-decoration: none; -} - -.ionic-body-md-medium { - font-family: $ionic-font-family; - font-size: $ionic-font-size-350; - font-weight: $ionic-font-weight-medium; - letter-spacing: $ionic-letter-spacing-0; - line-height: $ionic-line-height-600; - text-transform: none; - text-decoration: none; -} - -.ionic-body-md-semi-bold { - font-family: $ionic-font-family; - font-size: $ionic-font-size-350; - font-weight: $ionic-font-weight-bold; - letter-spacing: $ionic-letter-spacing-0; - line-height: $ionic-line-height-600; - text-transform: none; - text-decoration: none; -} - -.ionic-body-md-bold { - font-family: $ionic-font-family; - font-size: $ionic-font-size-350; - font-weight: $ionic-font-weight-bold; - letter-spacing: $ionic-letter-spacing-0; - line-height: $ionic-line-height-600; - text-transform: none; - text-decoration: none; -} - -.ionic-body-md-regular { - font-family: $ionic-font-family; - font-size: $ionic-font-size-350; - font-weight: $ionic-font-weight-regular; - letter-spacing: $ionic-letter-spacing-0; - line-height: $ionic-line-height-600; - text-transform: none; - text-decoration: none; -} - -.ionic-body-md-link { - font-family: $ionic-font-family; - font-size: $ionic-font-size-350; - font-weight: $ionic-font-weight-regular; - letter-spacing: $ionic-letter-spacing-0; - line-height: $ionic-line-height-600; - text-transform: none; - text-decoration: underline; -} - -.ionic-body-md-italic { - font-family: $ionic-font-family; - font-size: $ionic-font-size-350; - font-weight: $ionic-font-weight-regular; - letter-spacing: $ionic-letter-spacing-0; - line-height: $ionic-line-height-600; - text-transform: none; - text-decoration: none; -} - .ionic-body-lg-regular { - font-family: $ionic-font-family; font-size: $ionic-font-size-400; + font-style: normal; font-weight: $ionic-font-weight-regular; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-600; @@ -2371,8 +2251,8 @@ } .ionic-body-lg-medium { - font-family: $ionic-font-family; font-size: $ionic-font-size-400; + font-style: normal; font-weight: $ionic-font-weight-medium; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-600; @@ -2381,9 +2261,9 @@ } .ionic-body-lg-semi-bold { - font-family: $ionic-font-family; font-size: $ionic-font-size-400; - font-weight: $ionic-font-weight-bold; + font-style: normal; + font-weight: $ionic-font-weight-semi-bold; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-600; text-transform: none; @@ -2391,8 +2271,8 @@ } .ionic-body-lg-bold { - font-family: $ionic-font-family; font-size: $ionic-font-size-400; + font-style: normal; font-weight: $ionic-font-weight-bold; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-600; @@ -2401,8 +2281,8 @@ } .ionic-body-lg-link { - font-family: $ionic-font-family; font-size: $ionic-font-size-400; + font-style: normal; font-weight: $ionic-font-weight-regular; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-600; @@ -2411,8 +2291,8 @@ } .ionic-body-lg-italic { - font-family: $ionic-font-family; font-size: $ionic-font-size-400; + font-style: italic; font-weight: $ionic-font-weight-regular; letter-spacing: $ionic-letter-spacing-0; line-height: $ionic-line-height-600; @@ -2420,19 +2300,129 @@ text-decoration: none; } -.ionic-action-sm { - font-family: $ionic-font-family; - font-size: $ionic-font-size-300; - font-weight: $ionic-font-weight-medium; - letter-spacing: $ionic-letter-spacing-1; - line-height: $ionic-line-height-400; +.ionic-body-md-regular { + font-size: $ionic-font-size-350; + font-style: normal; + font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-600; text-transform: none; text-decoration: none; } -.ionic-action-md { - font-family: $ionic-font-family; +.ionic-body-md-medium { font-size: $ionic-font-size-350; + font-style: normal; + font-weight: $ionic-font-weight-medium; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-600; + text-transform: none; + text-decoration: none; +} + +.ionic-body-md-semi-bold { + font-size: $ionic-font-size-350; + font-style: normal; + font-weight: $ionic-font-weight-semi-bold; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-600; + text-transform: none; + text-decoration: none; +} + +.ionic-body-md-bold { + font-size: $ionic-font-size-350; + font-style: normal; + font-weight: $ionic-font-weight-bold; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-600; + text-transform: none; + text-decoration: none; +} + +.ionic-body-md-link { + font-size: $ionic-font-size-350; + font-style: normal; + font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-600; + text-transform: none; + text-decoration: underline; +} + +.ionic-body-md-italic { + font-size: $ionic-font-size-350; + font-style: italic; + font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-600; + text-transform: none; + text-decoration: none; +} + +.ionic-body-sm-regular { + font-size: $ionic-font-size-300; + font-style: normal; + font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-500; + text-transform: none; + text-decoration: none; +} + +.ionic-body-sm-medium { + font-size: $ionic-font-size-300; + font-style: normal; + font-weight: $ionic-font-weight-medium; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-500; + text-transform: none; + text-decoration: none; +} + +.ionic-body-sm-semi-bold { + font-size: $ionic-font-size-300; + font-style: normal; + font-weight: $ionic-font-weight-semi-bold; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-500; + text-transform: none; + text-decoration: none; +} + +.ionic-body-sm-bold { + font-size: $ionic-font-size-300; + font-style: normal; + font-weight: $ionic-font-weight-bold; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-500; + text-transform: none; + text-decoration: none; +} + +.ionic-body-sm-link { + font-size: $ionic-font-size-300; + font-style: normal; + font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-500; + text-transform: none; + text-decoration: underline; +} + +.ionic-body-sm-italic { + font-size: $ionic-font-size-300; + font-style: italic; + font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-500; + text-transform: none; + text-decoration: none; +} + +.ionic-action-xl { + font-size: $ionic-font-size-500; + font-style: normal; font-weight: $ionic-font-weight-medium; letter-spacing: $ionic-letter-spacing-1; line-height: $ionic-line-height-600; @@ -2441,8 +2431,8 @@ } .ionic-action-lg { - font-family: $ionic-font-family; font-size: $ionic-font-size-400; + font-style: normal; font-weight: $ionic-font-weight-medium; letter-spacing: $ionic-letter-spacing-1; line-height: $ionic-line-height-600; @@ -2450,53 +2440,63 @@ text-decoration: none; } -.ionic-action-xl { - font-family: $ionic-font-family; - font-size: $ionic-font-size-500; +.ionic-action-md { + font-size: $ionic-font-size-350; + font-style: normal; font-weight: $ionic-font-weight-medium; letter-spacing: $ionic-letter-spacing-1; - line-height: $ionic-line-height-600; + line-height: $ionic-line-height-500; + text-transform: none; + text-decoration: none; +} + +.ionic-action-sm { + font-size: $ionic-font-size-300; + font-style: normal; + font-weight: $ionic-font-weight-medium; + letter-spacing: $ionic-letter-spacing-1; + line-height: $ionic-line-height-500; text-transform: none; text-decoration: none; } .ionic-overline-regular { - font-family: $ionic-font-family; font-size: $ionic-font-size-300; + font-style: normal; font-weight: $ionic-font-weight-regular; letter-spacing: $ionic-letter-spacing-2; - line-height: $ionic-line-height-400; - text-transform: none; + line-height: $ionic-line-height-500; + text-transform: uppercase; text-decoration: none; } .ionic-overline-medium { - font-family: $ionic-font-family; font-size: $ionic-font-size-300; + font-style: normal; font-weight: $ionic-font-weight-medium; letter-spacing: $ionic-letter-spacing-2; - line-height: $ionic-line-height-400; - text-transform: none; + line-height: $ionic-line-height-500; + text-transform: uppercase; text-decoration: none; } .ionic-overline-semi-bold { - font-family: $ionic-font-family; font-size: $ionic-font-size-300; - font-weight: $ionic-font-weight-bold; + font-style: normal; + font-weight: $ionic-font-weight-semi-bold; letter-spacing: $ionic-letter-spacing-2; - line-height: $ionic-line-height-400; - text-transform: none; + line-height: $ionic-line-height-500; + text-transform: uppercase; text-decoration: none; } .ionic-overline-bold { - font-family: $ionic-font-family; font-size: $ionic-font-size-300; + font-style: normal; font-weight: $ionic-font-weight-bold; letter-spacing: $ionic-letter-spacing-2; - line-height: $ionic-line-height-400; - text-transform: none; + line-height: $ionic-line-height-500; + text-transform: uppercase; text-decoration: none; } diff --git a/core/src/foundations/ionic.vars.scss b/core/src/foundations/ionic.vars.scss index 6c316623aa..f08892a3c1 100644 --- a/core/src/foundations/ionic.vars.scss +++ b/core/src/foundations/ionic.vars.scss @@ -653,8 +653,8 @@ $ionic-state-hover: var(--ionic-state-hover, rgba(36, 36, 36, 0.04)); $ionic-state-pressed: var(--ionic-state-pressed, rgba(36, 36, 36, 0.08)); $ionic-display-sm-regular: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-800, + font-style: normal, font-weight: $ionic-font-weight-regular, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-1100, @@ -663,8 +663,8 @@ $ionic-display-sm-regular: ( ); $ionic-display-sm-light: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-800, + font-style: normal, font-weight: $ionic-font-weight-light, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-1100, @@ -672,19 +672,9 @@ $ionic-display-sm-light: ( text-decoration: none, ); -$ionic-display-lg-light: ( - font-family: $ionic-font-family, - font-size: $ionic-font-size-900, - font-weight: $ionic-font-weight-light, - letter-spacing: $ionic-letter-spacing-0, - line-height: $ionic-line-height-1200, - text-transform: none, - text-decoration: none, -); - $ionic-display-lg-regular: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-900, + font-style: normal, font-weight: $ionic-font-weight-regular, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-1200, @@ -692,9 +682,19 @@ $ionic-display-lg-regular: ( text-decoration: none, ); +$ionic-display-lg-light: ( + font-size: $ionic-font-size-900, + font-style: normal, + font-weight: $ionic-font-weight-light, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-1200, + text-transform: none, + text-decoration: none, +); + $ionic-heading-h1-regular: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-700, + font-style: normal, font-weight: $ionic-font-weight-regular, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-900, @@ -703,9 +703,9 @@ $ionic-heading-h1-regular: ( ); $ionic-heading-h1-medium: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-700, - font-weight: $ionic-font-weight-bold, + font-style: normal, + font-weight: $ionic-font-weight-medium, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-900, text-transform: none, @@ -713,9 +713,9 @@ $ionic-heading-h1-medium: ( ); $ionic-heading-h1-semi-bold: ( - font-family: $ionic-font-family, - font-size: $ionic-font-size-700, - font-weight: $ionic-font-weight-bold, + font-size: $ionic-font-size-600, + font-style: normal, + font-weight: $ionic-font-weight-semi-bold, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-900, text-transform: none, @@ -723,8 +723,8 @@ $ionic-heading-h1-semi-bold: ( ); $ionic-heading-h1-bold: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-700, + font-style: normal, font-weight: $ionic-font-weight-bold, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-900, @@ -733,8 +733,8 @@ $ionic-heading-h1-bold: ( ); $ionic-heading-h2-regular: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-650, + font-style: normal, font-weight: $ionic-font-weight-regular, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-900, @@ -743,8 +743,8 @@ $ionic-heading-h2-regular: ( ); $ionic-heading-h2-medium: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-650, + font-style: normal, font-weight: $ionic-font-weight-medium, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-900, @@ -753,9 +753,9 @@ $ionic-heading-h2-medium: ( ); $ionic-heading-h2-semi-bold: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-650, - font-weight: $ionic-font-weight-bold, + font-style: normal, + font-weight: $ionic-font-weight-semi-bold, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-900, text-transform: none, @@ -763,8 +763,8 @@ $ionic-heading-h2-semi-bold: ( ); $ionic-heading-h2-bold: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-650, + font-style: normal, font-weight: $ionic-font-weight-bold, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-900, @@ -773,8 +773,8 @@ $ionic-heading-h2-bold: ( ); $ionic-heading-h3-regular: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-600, + font-style: normal, font-weight: $ionic-font-weight-regular, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-800, @@ -782,19 +782,9 @@ $ionic-heading-h3-regular: ( text-decoration: none, ); -$ionic-heading-h3-semi-bold: ( - font-family: $ionic-font-family, - font-size: $ionic-font-size-600, - font-weight: $ionic-font-weight-bold, - letter-spacing: $ionic-letter-spacing-0, - line-height: $ionic-line-height-800, - text-transform: none, - text-decoration: none, -); - $ionic-heading-h3-medium: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-600, + font-style: normal, font-weight: $ionic-font-weight-medium, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-800, @@ -802,9 +792,19 @@ $ionic-heading-h3-medium: ( text-decoration: none, ); -$ionic-heading-h3-bold: ( - font-family: $ionic-font-family, +$ionic-heading-h3-semi-bold: ( font-size: $ionic-font-size-600, + font-style: normal, + font-weight: $ionic-font-weight-semi-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-800, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h3-bold: ( + font-size: $ionic-font-size-600, + font-style: normal, font-weight: $ionic-font-weight-bold, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-800, @@ -813,8 +813,8 @@ $ionic-heading-h3-bold: ( ); $ionic-heading-h4-regular: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-550, + font-style: normal, font-weight: $ionic-font-weight-regular, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-700, @@ -823,8 +823,8 @@ $ionic-heading-h4-regular: ( ); $ionic-heading-h4-medium: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-550, + font-style: normal, font-weight: $ionic-font-weight-medium, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-700, @@ -833,9 +833,9 @@ $ionic-heading-h4-medium: ( ); $ionic-heading-h4-semi-bold: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-550, - font-weight: $ionic-font-weight-bold, + font-style: normal, + font-weight: $ionic-font-weight-semi-bold, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-700, text-transform: none, @@ -843,8 +843,8 @@ $ionic-heading-h4-semi-bold: ( ); $ionic-heading-h4-bold: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-550, + font-style: normal, font-weight: $ionic-font-weight-bold, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-700, @@ -853,8 +853,8 @@ $ionic-heading-h4-bold: ( ); $ionic-heading-h5-regular: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-500, + font-style: normal, font-weight: $ionic-font-weight-regular, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-700, @@ -863,8 +863,8 @@ $ionic-heading-h5-regular: ( ); $ionic-heading-h5-medium: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-500, + font-style: normal, font-weight: $ionic-font-weight-medium, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-700, @@ -873,9 +873,9 @@ $ionic-heading-h5-medium: ( ); $ionic-heading-h5-semi-bold: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-500, - font-weight: $ionic-font-weight-bold, + font-style: normal, + font-weight: $ionic-font-weight-semi-bold, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-700, text-transform: none, @@ -883,8 +883,8 @@ $ionic-heading-h5-semi-bold: ( ); $ionic-heading-h5-bold: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-500, + font-style: normal, font-weight: $ionic-font-weight-bold, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-700, @@ -893,8 +893,8 @@ $ionic-heading-h5-bold: ( ); $ionic-heading-h6-regular: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-450, + font-style: normal, font-weight: $ionic-font-weight-regular, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-700, @@ -903,8 +903,8 @@ $ionic-heading-h6-regular: ( ); $ionic-heading-h6-medium: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-450, + font-style: normal, font-weight: $ionic-font-weight-medium, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-700, @@ -913,9 +913,9 @@ $ionic-heading-h6-medium: ( ); $ionic-heading-h6-semi-bold: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-450, - font-weight: $ionic-font-weight-bold, + font-style: normal, + font-weight: $ionic-font-weight-semi-bold, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-700, text-transform: none, @@ -923,8 +923,8 @@ $ionic-heading-h6-semi-bold: ( ); $ionic-heading-h6-bold: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-450, + font-style: normal, font-weight: $ionic-font-weight-bold, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-700, @@ -932,129 +932,9 @@ $ionic-heading-h6-bold: ( text-decoration: none, ); -$ionic-body-sm-regular: ( - font-family: $ionic-font-family, - font-size: $ionic-font-size-300, - font-weight: $ionic-font-weight-regular, - letter-spacing: $ionic-letter-spacing-0, - line-height: $ionic-line-height-400, - text-transform: none, - text-decoration: none, -); - -$ionic-body-sm-medium: ( - font-family: $ionic-font-family, - font-size: $ionic-font-size-300, - font-weight: $ionic-font-weight-medium, - letter-spacing: $ionic-letter-spacing-0, - line-height: $ionic-line-height-400, - text-transform: none, - text-decoration: none, -); - -$ionic-body-sm-semi-bold: ( - font-family: $ionic-font-family, - font-size: $ionic-font-size-300, - font-weight: $ionic-font-weight-bold, - letter-spacing: $ionic-letter-spacing-0, - line-height: $ionic-line-height-400, - text-transform: none, - text-decoration: none, -); - -$ionic-body-sm-bold: ( - font-family: $ionic-font-family, - font-size: $ionic-font-size-300, - font-weight: $ionic-font-weight-bold, - letter-spacing: $ionic-letter-spacing-0, - line-height: $ionic-line-height-400, - text-transform: none, - text-decoration: none, -); - -$ionic-body-sm-link: ( - font-family: $ionic-font-family, - font-size: $ionic-font-size-300, - font-weight: $ionic-font-weight-regular, - letter-spacing: $ionic-letter-spacing-0, - line-height: $ionic-line-height-400, - text-transform: none, - text-decoration: underline, -); - -$ionic-body-sm-italic: ( - font-family: $ionic-font-family, - font-size: $ionic-font-size-300, - font-weight: $ionic-font-weight-regular, - letter-spacing: $ionic-letter-spacing-0, - line-height: $ionic-line-height-400, - text-transform: none, - text-decoration: none, -); - -$ionic-body-md-medium: ( - font-family: $ionic-font-family, - font-size: $ionic-font-size-350, - font-weight: $ionic-font-weight-medium, - letter-spacing: $ionic-letter-spacing-0, - line-height: $ionic-line-height-600, - text-transform: none, - text-decoration: none, -); - -$ionic-body-md-semi-bold: ( - font-family: $ionic-font-family, - font-size: $ionic-font-size-350, - font-weight: $ionic-font-weight-bold, - letter-spacing: $ionic-letter-spacing-0, - line-height: $ionic-line-height-600, - text-transform: none, - text-decoration: none, -); - -$ionic-body-md-bold: ( - font-family: $ionic-font-family, - font-size: $ionic-font-size-350, - font-weight: $ionic-font-weight-bold, - letter-spacing: $ionic-letter-spacing-0, - line-height: $ionic-line-height-600, - text-transform: none, - text-decoration: none, -); - -$ionic-body-md-regular: ( - font-family: $ionic-font-family, - font-size: $ionic-font-size-350, - font-weight: $ionic-font-weight-regular, - letter-spacing: $ionic-letter-spacing-0, - line-height: $ionic-line-height-600, - text-transform: none, - text-decoration: none, -); - -$ionic-body-md-link: ( - font-family: $ionic-font-family, - font-size: $ionic-font-size-350, - font-weight: $ionic-font-weight-regular, - letter-spacing: $ionic-letter-spacing-0, - line-height: $ionic-line-height-600, - text-transform: none, - text-decoration: underline, -); - -$ionic-body-md-italic: ( - font-family: $ionic-font-family, - font-size: $ionic-font-size-350, - font-weight: $ionic-font-weight-regular, - letter-spacing: $ionic-letter-spacing-0, - line-height: $ionic-line-height-600, - text-transform: none, - text-decoration: none, -); - $ionic-body-lg-regular: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-400, + font-style: normal, font-weight: $ionic-font-weight-regular, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-600, @@ -1063,8 +943,8 @@ $ionic-body-lg-regular: ( ); $ionic-body-lg-medium: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-400, + font-style: normal, font-weight: $ionic-font-weight-medium, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-600, @@ -1073,9 +953,9 @@ $ionic-body-lg-medium: ( ); $ionic-body-lg-semi-bold: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-400, - font-weight: $ionic-font-weight-bold, + font-style: normal, + font-weight: $ionic-font-weight-semi-bold, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-600, text-transform: none, @@ -1083,8 +963,8 @@ $ionic-body-lg-semi-bold: ( ); $ionic-body-lg-bold: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-400, + font-style: normal, font-weight: $ionic-font-weight-bold, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-600, @@ -1093,8 +973,8 @@ $ionic-body-lg-bold: ( ); $ionic-body-lg-link: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-400, + font-style: normal, font-weight: $ionic-font-weight-regular, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-600, @@ -1103,8 +983,8 @@ $ionic-body-lg-link: ( ); $ionic-body-lg-italic: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-400, + font-style: italic, font-weight: $ionic-font-weight-regular, letter-spacing: $ionic-letter-spacing-0, line-height: $ionic-line-height-600, @@ -1112,19 +992,129 @@ $ionic-body-lg-italic: ( text-decoration: none, ); -$ionic-action-sm: ( - font-family: $ionic-font-family, - font-size: $ionic-font-size-300, - font-weight: $ionic-font-weight-medium, - letter-spacing: $ionic-letter-spacing-1, - line-height: $ionic-line-height-400, +$ionic-body-md-regular: ( + font-size: $ionic-font-size-350, + font-style: normal, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-600, text-transform: none, text-decoration: none, ); -$ionic-action-md: ( - font-family: $ionic-font-family, +$ionic-body-md-medium: ( font-size: $ionic-font-size-350, + font-style: normal, + font-weight: $ionic-font-weight-medium, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-600, + text-transform: none, + text-decoration: none, +); + +$ionic-body-md-semi-bold: ( + font-size: $ionic-font-size-350, + font-style: normal, + font-weight: $ionic-font-weight-semi-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-600, + text-transform: none, + text-decoration: none, +); + +$ionic-body-md-bold: ( + font-size: $ionic-font-size-350, + font-style: normal, + font-weight: $ionic-font-weight-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-600, + text-transform: none, + text-decoration: none, +); + +$ionic-body-md-link: ( + font-size: $ionic-font-size-350, + font-style: normal, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-600, + text-transform: none, + text-decoration: underline, +); + +$ionic-body-md-italic: ( + font-size: $ionic-font-size-350, + font-style: italic, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-600, + text-transform: none, + text-decoration: none, +); + +$ionic-body-sm-regular: ( + font-size: $ionic-font-size-300, + font-style: normal, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-500, + text-transform: none, + text-decoration: none, +); + +$ionic-body-sm-medium: ( + font-size: $ionic-font-size-300, + font-style: normal, + font-weight: $ionic-font-weight-medium, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-500, + text-transform: none, + text-decoration: none, +); + +$ionic-body-sm-semi-bold: ( + font-size: $ionic-font-size-300, + font-style: normal, + font-weight: $ionic-font-weight-semi-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-500, + text-transform: none, + text-decoration: none, +); + +$ionic-body-sm-bold: ( + font-size: $ionic-font-size-300, + font-style: normal, + font-weight: $ionic-font-weight-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-500, + text-transform: none, + text-decoration: none, +); + +$ionic-body-sm-link: ( + font-size: $ionic-font-size-300, + font-style: normal, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-500, + text-transform: none, + text-decoration: underline, +); + +$ionic-body-sm-italic: ( + font-size: $ionic-font-size-300, + font-style: italic, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-500, + text-transform: none, + text-decoration: none, +); + +$ionic-action-xl: ( + font-size: $ionic-font-size-500, + font-style: normal, font-weight: $ionic-font-weight-medium, letter-spacing: $ionic-letter-spacing-1, line-height: $ionic-line-height-600, @@ -1133,8 +1123,8 @@ $ionic-action-md: ( ); $ionic-action-lg: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-400, + font-style: normal, font-weight: $ionic-font-weight-medium, letter-spacing: $ionic-letter-spacing-1, line-height: $ionic-line-height-600, @@ -1142,52 +1132,62 @@ $ionic-action-lg: ( text-decoration: none, ); -$ionic-action-xl: ( - font-family: $ionic-font-family, - font-size: $ionic-font-size-500, +$ionic-action-md: ( + font-size: $ionic-font-size-350, + font-style: normal, font-weight: $ionic-font-weight-medium, letter-spacing: $ionic-letter-spacing-1, - line-height: $ionic-line-height-600, + line-height: $ionic-line-height-500, + text-transform: none, + text-decoration: none, +); + +$ionic-action-sm: ( + font-size: $ionic-font-size-300, + font-style: normal, + font-weight: $ionic-font-weight-medium, + letter-spacing: $ionic-letter-spacing-1, + line-height: $ionic-line-height-500, text-transform: none, text-decoration: none, ); $ionic-overline-regular: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-300, + font-style: normal, font-weight: $ionic-font-weight-regular, letter-spacing: $ionic-letter-spacing-2, - line-height: $ionic-line-height-400, - text-transform: none, + line-height: $ionic-line-height-500, + text-transform: uppercase, text-decoration: none, ); $ionic-overline-medium: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-300, + font-style: normal, font-weight: $ionic-font-weight-medium, letter-spacing: $ionic-letter-spacing-2, - line-height: $ionic-line-height-400, - text-transform: none, + line-height: $ionic-line-height-500, + text-transform: uppercase, text-decoration: none, ); $ionic-overline-semi-bold: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-300, - font-weight: $ionic-font-weight-bold, + font-style: normal, + font-weight: $ionic-font-weight-semi-bold, letter-spacing: $ionic-letter-spacing-2, - line-height: $ionic-line-height-400, - text-transform: none, + line-height: $ionic-line-height-500, + text-transform: uppercase, text-decoration: none, ); $ionic-overline-bold: ( - font-family: $ionic-font-family, font-size: $ionic-font-size-300, + font-style: normal, font-weight: $ionic-font-weight-bold, letter-spacing: $ionic-letter-spacing-2, - line-height: $ionic-line-height-400, - text-transform: none, + line-height: $ionic-line-height-500, + text-transform: uppercase, text-decoration: none, ); diff --git a/core/src/foundations/tokens/text.styles.tokens.json b/core/src/foundations/tokens/text.styles.tokens.json index fffb0ad2fb..38d18ffeb1 100644 --- a/core/src/foundations/tokens/text.styles.tokens.json +++ b/core/src/foundations/tokens/text.styles.tokens.json @@ -1,682 +1,682 @@ { - "Display": { - "SM": { - "Regular": { + "display": { + "sm": { + "regular": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "32px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.800}", "fontWeight": 400, - "letterSpacing": "0%", - "lineHeight": "44px", + "letterSpacing": "{letter-spacing.0}", + "lineHeight": "{line-height.1100}", "textTransform": "none", "textDecoration": "none" } }, - "Light": { + "light": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "32px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.800}", "fontWeight": 300, - "letterSpacing": "0%", - "lineHeight": "44px", + "letterSpacing": "{letter-spacing.0}", + "lineHeight": "{line-height.1100}", "textTransform": "none", "textDecoration": "none" } } }, - "LG": { - "Light": { + "lg": { + "regular": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "36px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.900}", + "fontWeight": 400, + "letterSpacing": "{letter-spacing.0}", + "lineHeight": "{line-height.1200}", + "textTransform": "none", + "textDecoration": "none" + } + }, + "light": { + "$type": "typography", + "$value": { + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.900}", "fontWeight": 300, - "letterSpacing": "0%", - "lineHeight": "48px", - "textTransform": "none", - "textDecoration": "none" - } - }, - "Regular": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontSize": "36px", - "fontWeight": 400, - "letterSpacing": "0%", - "lineHeight": "48px", + "letterSpacing": "{letter-spacing.0}", + "lineHeight": "{line-height.1200}", "textTransform": "none", "textDecoration": "none" } } } }, - "Heading": { - "H1": { - "Regular": { + "heading": { + "h1": { + "regular": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "28px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.700}", "fontWeight": 400, "letterSpacing": "0%", - "lineHeight": "36px", + "lineHeight": "{line-height.900}", "textTransform": "none", "textDecoration": "none" } }, - "Medium": { + "medium": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "28px", - "fontWeight": 700, + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.700}", + "fontWeight": 500, "letterSpacing": "0%", - "lineHeight": "36px", + "lineHeight": "{line-height.900}", "textTransform": "none", "textDecoration": "none" } }, - "Semi Bold": { + "semi bold": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "28px", - "fontWeight": 700, + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.600}", + "fontWeight": 600, "letterSpacing": "0%", - "lineHeight": "36px", + "lineHeight": "{line-height.900}", "textTransform": "none", "textDecoration": "none" } }, - "Bold": { + "bold": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "28px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.700}", "fontWeight": 700, "letterSpacing": "0%", - "lineHeight": "36px", + "lineHeight": "{line-height.900}", "textTransform": "none", "textDecoration": "none" } } }, - "H2": { - "Regular": { + "h2": { + "regular": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "26px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.650}", "fontWeight": 400, "letterSpacing": "0%", - "lineHeight": "36px", + "lineHeight": "{line-height.900}", "textTransform": "none", "textDecoration": "none" } }, - "Medium": { + "medium": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "26px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.650}", "fontWeight": 500, "letterSpacing": "0%", - "lineHeight": "36px", + "lineHeight": "{line-height.900}", "textTransform": "none", "textDecoration": "none" } }, - "Semi Bold": { + "semi bold": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "26px", - "fontWeight": 700, + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.650}", + "fontWeight": 600, "letterSpacing": "0%", - "lineHeight": "36px", + "lineHeight": "{line-height.900}", "textTransform": "none", "textDecoration": "none" } }, - "Bold": { + "bold": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "26px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.650}", "fontWeight": 700, "letterSpacing": "0%", - "lineHeight": "36px", + "lineHeight": "{line-height.900}", "textTransform": "none", "textDecoration": "none" } } }, - "H3": { - "Regular": { + "h3": { + "regular": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "24px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.600}", "fontWeight": 400, "letterSpacing": "0%", - "lineHeight": "32px", + "lineHeight": "{line-height.800}", "textTransform": "none", "textDecoration": "none" } }, - "Semi Bold": { + "medium": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "24px", - "fontWeight": 700, - "letterSpacing": "0%", - "lineHeight": "32px", - "textTransform": "none", - "textDecoration": "none" - } - }, - "Medium": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontSize": "24px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.600}", "fontWeight": 500, "letterSpacing": "0%", - "lineHeight": "32px", + "lineHeight": "{line-height.800}", "textTransform": "none", "textDecoration": "none" } }, - "Bold": { + "semi bold": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "24px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.600}", + "fontWeight": 600, + "letterSpacing": "0%", + "lineHeight": "{line-height.800}", + "textTransform": "none", + "textDecoration": "none" + } + }, + "bold": { + "$type": "typography", + "$value": { + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.600}", "fontWeight": 700, "letterSpacing": "0%", - "lineHeight": "32px", + "lineHeight": "{line-height.800}", "textTransform": "none", "textDecoration": "none" } } }, - "H4": { - "Regular": { + "h4": { + "regular": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "22px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.550}", "fontWeight": 400, "letterSpacing": "0%", - "lineHeight": "28px", + "lineHeight": "{line-height.700}", "textTransform": "none", "textDecoration": "none" } }, - "Medium": { + "medium": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "22px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.550}", "fontWeight": 500, "letterSpacing": "0%", - "lineHeight": "28px", + "lineHeight": "{line-height.700}", "textTransform": "none", "textDecoration": "none" } }, - "Semi Bold": { + "semi bold": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "22px", - "fontWeight": 700, + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.550}", + "fontWeight": 600, "letterSpacing": "0%", - "lineHeight": "28px", + "lineHeight": "{line-height.700}", "textTransform": "none", "textDecoration": "none" } }, - "Bold": { + "bold": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "22px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.550}", "fontWeight": 700, "letterSpacing": "0%", - "lineHeight": "28px", + "lineHeight": "{line-height.700}", "textTransform": "none", "textDecoration": "none" } } }, - "H5": { - "Regular": { + "h5": { + "regular": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "20px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.500}", "fontWeight": 400, "letterSpacing": "0%", - "lineHeight": "28px", + "lineHeight": "{line-height.700}", "textTransform": "none", "textDecoration": "none" } }, - "Medium": { + "medium": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "20px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.500}", "fontWeight": 500, "letterSpacing": "0%", - "lineHeight": "28px", + "lineHeight": "{line-height.700}", "textTransform": "none", "textDecoration": "none" } }, - "Semi Bold": { + "semi bold": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "20px", - "fontWeight": 700, + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.500}", + "fontWeight": 600, "letterSpacing": "0%", - "lineHeight": "28px", + "lineHeight": "{line-height.700}", "textTransform": "none", "textDecoration": "none" } }, - "Bold": { + "bold": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "20px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.500}", "fontWeight": 700, "letterSpacing": "0%", - "lineHeight": "28px", + "lineHeight": "{line-height.700}", "textTransform": "none", "textDecoration": "none" } } }, - "H6": { - "Regular": { + "h6": { + "regular": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "18px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.450}", "fontWeight": 400, "letterSpacing": "0%", - "lineHeight": "28px", + "lineHeight": "{line-height.700}", "textTransform": "none", "textDecoration": "none" } }, - "Medium": { + "medium": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "18px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.450}", "fontWeight": 500, - "letterSpacing": "0%", - "lineHeight": "28px", + "letterSpacing": "{letter-spacing.0}", + "lineHeight": "{line-height.700}", "textTransform": "none", "textDecoration": "none" } }, - "Semi Bold": { + "semi bold": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "18px", - "fontWeight": 700, + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.450}", + "fontWeight": 600, "letterSpacing": "0%", - "lineHeight": "28px", + "lineHeight": "{font-size.700}", "textTransform": "none", "textDecoration": "none" } }, - "Bold": { + "bold": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "18px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.450}", "fontWeight": 700, "letterSpacing": "0%", - "lineHeight": "28px", + "lineHeight": "{line-height.700}", "textTransform": "none", "textDecoration": "none" } } } }, - "Body": { - "SM": { - "Regular": { + "body": { + "lg": { + "regular": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "12px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.400}", "fontWeight": 400, - "letterSpacing": "0%", - "lineHeight": "16px", + "letterSpacing": "{letter-spacing.0}", + "lineHeight": "{line-height.600}", "textTransform": "none", "textDecoration": "none" } }, - "Medium": { + "medium": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "12px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.400}", "fontWeight": 500, - "letterSpacing": "0%", - "lineHeight": "16px", + "letterSpacing": "{letter-spacing.0}", + "lineHeight": "{line-height.600}", "textTransform": "none", "textDecoration": "none" } }, - "Semi Bold": { + "semi bold": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "12px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.400}", + "fontWeight": 600, + "letterSpacing": "{letter-spacing.0}", + "lineHeight": "{line-height.600}", + "textTransform": "none", + "textDecoration": "none" + } + }, + "bold": { + "$type": "typography", + "$value": { + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.400}", "fontWeight": 700, - "letterSpacing": "0%", - "lineHeight": "16px", + "letterSpacing": "{letter-spacing.0}", + "lineHeight": "{line-height.600}", "textTransform": "none", "textDecoration": "none" } }, - "Bold": { + "link": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "12px", - "fontWeight": 700, - "letterSpacing": "0%", - "lineHeight": "16px", - "textTransform": "none", - "textDecoration": "none" - } - }, - "Link": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontSize": "12px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.400}", "fontWeight": 400, - "letterSpacing": "0%", - "lineHeight": "16px", + "letterSpacing": "{letter-spacing.0}", + "lineHeight": "{line-height.600}", "textTransform": "none", "textDecoration": "underline" } }, - "Italic": { + "italic": { "$type": "typography", "$value": { - "fontFamily": "Inter", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.400}", + "fontWeight": 400, + "letterSpacing": "{letter-spacing.0}", + "lineHeight": "{line-height.600}", + "textTransform": "none", + "textDecoration": "none" + } + } + }, + "md": { + "regular": { + "$type": "typography", + "$value": { + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.350}", + "fontWeight": 400, + "letterSpacing": "{letter-spacing.0}", + "lineHeight": "{line-height.600}", + "textTransform": "none", + "textDecoration": "none" + } + }, + "medium": { + "$type": "typography", + "$value": { + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.350}", + "fontWeight": 500, + "letterSpacing": "{letter-spacing.0}", + "lineHeight": "{line-height.600}", + "textTransform": "none", + "textDecoration": "none" + } + }, + "semi bold": { + "$type": "typography", + "$value": { + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.350}", + "fontWeight": 600, + "letterSpacing": "{letter-spacing.0}", + "lineHeight": "{line-height.600}", + "textTransform": "none", + "textDecoration": "none" + } + }, + "bold": { + "$type": "typography", + "$value": { + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.350}", + "fontWeight": 700, + "letterSpacing": "{letter-spacing.0}", + "lineHeight": "{line-height.600}", + "textTransform": "none", + "textDecoration": "none" + } + }, + "link": { + "$type": "typography", + "$value": { + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.350}", + "fontWeight": 400, + "letterSpacing": "{letter-spacing.0}", + "lineHeight": "{line-height.600}", + "textTransform": "none", + "textDecoration": "underline" + } + }, + "italic": { + "$type": "typography", + "$value": { + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.350}", + "fontWeight": 400, + "letterSpacing": "{letter-spacing.0}", + "lineHeight": "{line-height.600}", + "textTransform": "none", + "textDecoration": "none" + } + } + }, + "sm": { + "regular": { + "$type": "typography", + "$value": { + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.300}", + "fontWeight": 400, + "letterSpacing": "{letter-spacing.0}", + "lineHeight": "{line-height.500}", + "textTransform": "none", + "textDecoration": "none" + } + }, + "medium": { + "$type": "typography", + "$value": { + "fontFamily": "{font-family.Inter}", "fontSize": "12px", - "fontWeight": 400, - "letterSpacing": "0%", - "lineHeight": "16px", - "textTransform": "none", - "textDecoration": "none" - } - } - }, - "MD": { - "Medium": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontSize": "14px", "fontWeight": 500, - "letterSpacing": "0%", - "lineHeight": "24px", + "letterSpacing": "{letter-spacing.0}", + "lineHeight": "{line-height.500}", "textTransform": "none", "textDecoration": "none" } }, - "Semi Bold": { + "semi bold": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "14px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.300}", + "fontWeight": 600, + "letterSpacing": "{letter-spacing.0}", + "lineHeight": "{line-height.500}", + "textTransform": "none", + "textDecoration": "none" + } + }, + "bold": { + "$type": "typography", + "$value": { + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.300}", "fontWeight": 700, - "letterSpacing": "0%", - "lineHeight": "24px", + "letterSpacing": "{letter-spacing.0}", + "lineHeight": "{line-height.500}", "textTransform": "none", "textDecoration": "none" } }, - "Bold": { + "link": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "14px", - "fontWeight": 700, - "letterSpacing": "0%", - "lineHeight": "24px", - "textTransform": "none", - "textDecoration": "none" - } - }, - "Regular": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontSize": "14px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.300}", "fontWeight": 400, - "letterSpacing": "0%", - "lineHeight": "24px", - "textTransform": "none", - "textDecoration": "none" - } - }, - "Link": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontSize": "14px", - "fontWeight": 400, - "letterSpacing": "0%", - "lineHeight": "24px", + "letterSpacing": "{letter-spacing.0}", + "lineHeight": "{line-height.500}", "textTransform": "none", "textDecoration": "underline" } }, - "Italic": { + "italic": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "14px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.300}", "fontWeight": 400, - "letterSpacing": "0%", - "lineHeight": "24px", - "textTransform": "none", - "textDecoration": "none" - } - } - }, - "LG": { - "Regular": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontSize": "16px", - "fontWeight": 400, - "letterSpacing": "0%", - "lineHeight": "24px", - "textTransform": "none", - "textDecoration": "none" - } - }, - "Medium": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontSize": "16px", - "fontWeight": 500, - "letterSpacing": "0%", - "lineHeight": "24px", - "textTransform": "none", - "textDecoration": "none" - } - }, - "Semi Bold": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontSize": "16px", - "fontWeight": 700, - "letterSpacing": "0%", - "lineHeight": "24px", - "textTransform": "none", - "textDecoration": "none" - } - }, - "Bold": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontSize": "16px", - "fontWeight": 700, - "letterSpacing": "0%", - "lineHeight": "24px", - "textTransform": "none", - "textDecoration": "none" - } - }, - "Link": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontSize": "16px", - "fontWeight": 400, - "letterSpacing": "0%", - "lineHeight": "24px", - "textTransform": "none", - "textDecoration": "underline" - } - }, - "Italic": { - "$type": "typography", - "$value": { - "fontFamily": "Inter", - "fontSize": "16px", - "fontWeight": 400, - "letterSpacing": "0%", - "lineHeight": "24px", + "letterSpacing": "{letter-spacing.0}", + "lineHeight": "{line-height.500}", "textTransform": "none", "textDecoration": "none" } } } }, - "Action": { - "SM": { + "action": { + "xl": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "12px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.500}", "fontWeight": 500, "letterSpacing": "1%", - "lineHeight": "16px", + "lineHeight": "{line-height.600}", "textTransform": "none", "textDecoration": "none" } }, - "MD": { + "lg": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "14px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.400}", "fontWeight": 500, "letterSpacing": "1%", - "lineHeight": "24px", + "lineHeight": "{line-height.600}", "textTransform": "none", "textDecoration": "none" } }, - "LG": { + "md": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "16px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.350}", "fontWeight": 500, "letterSpacing": "1%", - "lineHeight": "24px", + "lineHeight": "{line-height.500}", "textTransform": "none", "textDecoration": "none" } }, - "XL": { + "sm": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "20px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.300}", "fontWeight": 500, "letterSpacing": "1%", - "lineHeight": "24px", + "lineHeight": "{line-height.500}", "textTransform": "none", "textDecoration": "none" } } }, - "Overline": { - "Regular": { + "overline": { + "regular": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "12px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.300}", "fontWeight": 400, "letterSpacing": "1.5%", - "lineHeight": "16px", - "textTransform": "none", + "lineHeight": "{line-height.500}", + "textTransform": "uppercase", "textDecoration": "none" } }, - "Medium": { + "medium": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "12px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.300}", "fontWeight": 500, "letterSpacing": "1.5%", - "lineHeight": "16px", - "textTransform": "none", + "lineHeight": "{line-height.500}", + "textTransform": "uppercase", "textDecoration": "none" } }, - "Semi Bold": { + "semi bold": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "12px", - "fontWeight": 700, + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.300}", + "fontWeight": 600, "letterSpacing": "1.5%", - "lineHeight": "16px", - "textTransform": "none", + "lineHeight": "{line-height.500}", + "textTransform": "uppercase", "textDecoration": "none" } }, - "Bold": { + "bold": { "$type": "typography", "$value": { - "fontFamily": "Inter", - "fontSize": "12px", + "fontFamily": "{font-family.Inter}", + "fontSize": "{font-size.300}", "fontWeight": 700, "letterSpacing": "1.5%", - "lineHeight": "16px", - "textTransform": "none", + "lineHeight": "{line-height.500}", + "textTransform": "uppercase", "textDecoration": "none" } } } -} \ No newline at end of file +} diff --git a/core/src/themes/ionic/ionic.mixins.scss b/core/src/themes/ionic/ionic.mixins.scss index b154036c66..13c102b335 100644 --- a/core/src/themes/ionic/ionic.mixins.scss +++ b/core/src/themes/ionic/ionic.mixins.scss @@ -22,3 +22,20 @@ pointer-events: none; } + +// Typography mixin to be used with typography scss variables (ionic.vars.scss) +// +// ex: @include typography($ionic-heading-h3-medium); +// +// -------------------------------------------------- +@mixin typography($properties) { + font-family: map-get($properties, font-family); + font-size: map-get($properties, font-size); + font-weight: map-get($properties, font-weight); + + letter-spacing: map-get($properties, letter-spacing); + line-height: map-get($properties, line-height); + + text-decoration: map-get($properties, text-decoration); + text-transform: map-get($properties, text-transform); +} diff --git a/core/src/themes/mixins.scss b/core/src/themes/mixins.scss index 1b7297aef6..3cc5dc1537 100644 --- a/core/src/themes/mixins.scss +++ b/core/src/themes/mixins.scss @@ -112,21 +112,6 @@ opacity: 0; } -// Typography mixin to be used with typography scss variables (ionic.vars.scss) -// -// ex: @include typography($ionic-heading-h3-medium); -// -// -------------------------------------------------- -@mixin typography($properties) { - font-family: map-get($properties, font-family); - font-size: map-get($properties, font-size); - font-weight: map-get($properties, font-weight); - letter-spacing: map-get($properties, letter-spacing); - line-height: map-get($properties, line-height); - text-transform: map-get($properties, text-transform); - text-decoration: map-get($properties, text-decoration); -} - // Font smoothing // -------------------------------------------------- diff --git a/docs/core/testing/usage-instructions.md b/docs/core/testing/usage-instructions.md index ecc51e1b85..692257ba76 100644 --- a/docs/core/testing/usage-instructions.md +++ b/docs/core/testing/usage-instructions.md @@ -198,9 +198,19 @@ Instead, use the [Update Reference Screenshots GitHub Action](https://github.com 1. Click the **Run workflow** dropdown. 2. Select your branch. -3. Click **Run workflow**. +3. Leave the input field blank. +4. Click **Run workflow**. -This workflow will re-run the screenshot tests. Instead of failing any tests with mismatched screenshots, it will take new ground truth screenshots. These ground truth screenshots will be pushed as a single commit to your branch once the workflow is completed. +This workflow will re-run all of the the screenshot tests. Instead of failing any tests with mismatched screenshots, it will take new ground truth screenshots. These ground truth screenshots will be pushed as a single commit to your branch once the workflow is completed. + +If you want to update ground truths for a specific test, you can pass the test file path as an input to the workflow. This is useful when working on a specific component. + +1. Click the **Run workflow** dropdown. +2. Select your branch. +3. Enter the file path in the input field. Example: `src/components/alert/test/basic/` +4. Click **Run workflow**. + +The input field also accepts component names, such as `alert`. You can enter multiple components by separating them with spaces, for example, `alert button`. For a full list of options, refer to Playwright's [Command Line page](https://playwright.dev/docs/test-cli). ### Verifying Screenshot Differences diff --git a/lerna.json b/lerna.json index 8577fb2ee2..16db7744bf 100644 --- a/lerna.json +++ b/lerna.json @@ -3,5 +3,5 @@ "core", "packages/*" ], - "version": "8.2.1" + "version": "8.2.2" } \ No newline at end of file diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md index e80756735b..55191dcfbe 100644 --- a/packages/angular-server/CHANGELOG.md +++ b/packages/angular-server/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12) + +**Note:** Version bump only for package @ionic/angular-server + + + + + ## [8.2.1](https://github.com/ionic-team/ionic-framework/compare/v8.2.0...v8.2.1) (2024-06-05) **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 5055f098bb..0caaef2a74 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.2.1", + "version": "8.2.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/angular-server", - "version": "8.2.1", + "version": "8.2.2", "license": "MIT", "dependencies": { - "@ionic/core": "^8.2.1" + "@ionic/core": "^8.2.2" }, "devDependencies": { "@angular-eslint/eslint-plugin": "^16.0.0", @@ -1119,9 +1119,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.1.tgz", - "integrity": "sha512-nIoCdjzogRmyCoD7UcKUV3LmzkiqDN+TxHhkCTRVeNPFQwC5zuTbYKb714caJ6ixKSDBlDiEaLRIb2zgr57ekw==", + "version": "8.2.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.2.tgz", + "integrity": "sha512-gpWemL5IJjGDJPz6dltHnFyqioRl0sugs2PUXrwPaYwMnTDoRZ6iojYFovCIr5YJN99rHZprOthdcsYR/viGyQ==", "dependencies": { "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", @@ -6953,9 +6953,9 @@ "dev": true }, "@ionic/core": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.1.tgz", - "integrity": "sha512-nIoCdjzogRmyCoD7UcKUV3LmzkiqDN+TxHhkCTRVeNPFQwC5zuTbYKb714caJ6ixKSDBlDiEaLRIb2zgr57ekw==", + "version": "8.2.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.2.tgz", + "integrity": "sha512-gpWemL5IJjGDJPz6dltHnFyqioRl0sugs2PUXrwPaYwMnTDoRZ6iojYFovCIr5YJN99rHZprOthdcsYR/viGyQ==", "requires": { "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json index 218cbd3259..c835d81a5a 100644 --- a/packages/angular-server/package.json +++ b/packages/angular-server/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular-server", - "version": "8.2.1", + "version": "8.2.2", "description": "Angular SSR Module for Ionic", "keywords": [ "ionic", @@ -62,6 +62,6 @@ }, "prettier": "@ionic/prettier-config", "dependencies": { - "@ionic/core": "^8.2.1" + "@ionic/core": "^8.2.2" } } diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md index 92a1c57b4b..ca498b0be9 100644 --- a/packages/angular/CHANGELOG.md +++ b/packages/angular/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12) + +**Note:** Version bump only for package @ionic/angular + + + + + ## [8.2.1](https://github.com/ionic-team/ionic-framework/compare/v8.2.0...v8.2.1) (2024-06-05) **Note:** Version bump only for package @ionic/angular diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json index b459bae91b..936ed58cdc 100644 --- a/packages/angular/package-lock.json +++ b/packages/angular/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/angular", - "version": "8.2.1", + "version": "8.2.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/angular", - "version": "8.2.1", + "version": "8.2.2", "license": "MIT", "dependencies": { - "@ionic/core": "^8.2.1", + "@ionic/core": "^8.2.2", "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.2.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.1.tgz", - "integrity": "sha512-nIoCdjzogRmyCoD7UcKUV3LmzkiqDN+TxHhkCTRVeNPFQwC5zuTbYKb714caJ6ixKSDBlDiEaLRIb2zgr57ekw==", + "version": "8.2.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.2.tgz", + "integrity": "sha512-gpWemL5IJjGDJPz6dltHnFyqioRl0sugs2PUXrwPaYwMnTDoRZ6iojYFovCIr5YJN99rHZprOthdcsYR/viGyQ==", "dependencies": { "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", @@ -9820,9 +9820,9 @@ "dev": true }, "@ionic/core": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.1.tgz", - "integrity": "sha512-nIoCdjzogRmyCoD7UcKUV3LmzkiqDN+TxHhkCTRVeNPFQwC5zuTbYKb714caJ6ixKSDBlDiEaLRIb2zgr57ekw==", + "version": "8.2.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.2.tgz", + "integrity": "sha512-gpWemL5IJjGDJPz6dltHnFyqioRl0sugs2PUXrwPaYwMnTDoRZ6iojYFovCIr5YJN99rHZprOthdcsYR/viGyQ==", "requires": { "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", diff --git a/packages/angular/package.json b/packages/angular/package.json index 3228ee9270..4d807f4f04 100644 --- a/packages/angular/package.json +++ b/packages/angular/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular", - "version": "8.2.1", + "version": "8.2.2", "description": "Angular specific wrappers for @ionic/core", "keywords": [ "ionic", @@ -47,7 +47,7 @@ } }, "dependencies": { - "@ionic/core": "^8.2.1", + "@ionic/core": "^8.2.2", "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 db6c7f8902..22b6abb125 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -1108,14 +1108,14 @@ export declare interface IonItemGroup extends Components.IonItemGroup {} @ProxyCmp({ - inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'theme', 'type'] + inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'shape', 'target', 'theme', 'type'] }) @Component({ selector: 'ion-item-option', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'theme', 'type'], + inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'shape', 'target', 'theme', 'type'], }) export class IonItemOption { protected el: HTMLElement; @@ -1209,7 +1209,7 @@ export declare interface IonLabel extends Components.IonLabel {} @ProxyCmp({ - inputs: ['inset', 'lines', 'mode', 'theme'], + inputs: ['inset', 'lines', 'mode', 'shape', 'theme'], methods: ['closeSlidingItems'] }) @Component({ @@ -1217,7 +1217,7 @@ export declare interface IonLabel extends Components.IonLabel {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['inset', 'lines', 'mode', 'theme'], + inputs: ['inset', 'lines', 'mode', 'shape', 'theme'], }) export class IonList { protected el: HTMLElement; diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index ee91d8f165..ae7046262b 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -1076,14 +1076,14 @@ export declare interface IonItemGroup extends Components.IonItemGroup {} @ProxyCmp({ defineCustomElementFn: defineIonItemOption, - inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'theme', 'type'] + inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'shape', 'target', 'theme', 'type'] }) @Component({ selector: 'ion-item-option', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'theme', 'type'], + inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'shape', 'target', 'theme', 'type'], standalone: true }) export class IonItemOption { @@ -1185,7 +1185,7 @@ export declare interface IonLabel extends Components.IonLabel {} @ProxyCmp({ defineCustomElementFn: defineIonList, - inputs: ['inset', 'lines', 'mode', 'theme'], + inputs: ['inset', 'lines', 'mode', 'shape', 'theme'], methods: ['closeSlidingItems'] }) @Component({ @@ -1193,7 +1193,7 @@ export declare interface IonLabel extends Components.IonLabel {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['inset', 'lines', 'mode', 'theme'], + inputs: ['inset', 'lines', 'mode', 'shape', 'theme'], standalone: true }) export class IonList { diff --git a/packages/docs/CHANGELOG.md b/packages/docs/CHANGELOG.md index 001aba8bd9..fdb16d2d01 100644 --- a/packages/docs/CHANGELOG.md +++ b/packages/docs/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12) + +**Note:** Version bump only for package @ionic/docs + + + + + ## [8.2.1](https://github.com/ionic-team/ionic-framework/compare/v8.2.0...v8.2.1) (2024-06-05) **Note:** Version bump only for package @ionic/docs diff --git a/packages/docs/package-lock.json b/packages/docs/package-lock.json index 71839772be..bcde3f440f 100644 --- a/packages/docs/package-lock.json +++ b/packages/docs/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ionic/docs", - "version": "8.2.1", + "version": "8.2.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/docs", - "version": "8.2.1", + "version": "8.2.2", "license": "MIT" } } diff --git a/packages/docs/package.json b/packages/docs/package.json index 47b61f31dd..818a392c84 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/docs", - "version": "8.2.1", + "version": "8.2.2", "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 8a3328aa09..5a23b753c1 100644 --- a/packages/react-router/CHANGELOG.md +++ b/packages/react-router/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12) + +**Note:** Version bump only for package @ionic/react-router + + + + + ## [8.2.1](https://github.com/ionic-team/ionic-framework/compare/v8.2.0...v8.2.1) (2024-06-05) **Note:** Version bump only for package @ionic/react-router diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json index b66bd62602..0849384a6b 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.2.1", + "version": "8.2.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/react-router", - "version": "8.2.1", + "version": "8.2.2", "license": "MIT", "dependencies": { - "@ionic/react": "^8.2.1", + "@ionic/react": "^8.2.2", "tslib": "*" }, "devDependencies": { @@ -238,9 +238,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.1.tgz", - "integrity": "sha512-nIoCdjzogRmyCoD7UcKUV3LmzkiqDN+TxHhkCTRVeNPFQwC5zuTbYKb714caJ6ixKSDBlDiEaLRIb2zgr57ekw==", + "version": "8.2.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.2.tgz", + "integrity": "sha512-gpWemL5IJjGDJPz6dltHnFyqioRl0sugs2PUXrwPaYwMnTDoRZ6iojYFovCIr5YJN99rHZprOthdcsYR/viGyQ==", "dependencies": { "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", @@ -414,11 +414,11 @@ } }, "node_modules/@ionic/react": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.2.1.tgz", - "integrity": "sha512-2HE5ajIHdBJYR7GFphpNQjBpjGULztm/6sa1Xpk9K440I1v2ipUHdQoZlBMMcM2PQMuBeiMlRmwXgqTAi09/qQ==", + "version": "8.2.2", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.2.2.tgz", + "integrity": "sha512-uf369EYjgEU88u65QdOBaTlEv0fy/v5H6ICpaPHNRHgvppkQSE9uWZitZdeBuXQq8+k9OCo1Wn0vzL3znP3nHA==", "dependencies": { - "@ionic/core": "8.2.1", + "@ionic/core": "8.2.2", "ionicons": "^7.0.0", "tslib": "*" }, @@ -4057,9 +4057,9 @@ "dev": true }, "@ionic/core": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.1.tgz", - "integrity": "sha512-nIoCdjzogRmyCoD7UcKUV3LmzkiqDN+TxHhkCTRVeNPFQwC5zuTbYKb714caJ6ixKSDBlDiEaLRIb2zgr57ekw==", + "version": "8.2.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.2.tgz", + "integrity": "sha512-gpWemL5IJjGDJPz6dltHnFyqioRl0sugs2PUXrwPaYwMnTDoRZ6iojYFovCIr5YJN99rHZprOthdcsYR/viGyQ==", "requires": { "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", @@ -4163,11 +4163,11 @@ "requires": {} }, "@ionic/react": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.2.1.tgz", - "integrity": "sha512-2HE5ajIHdBJYR7GFphpNQjBpjGULztm/6sa1Xpk9K440I1v2ipUHdQoZlBMMcM2PQMuBeiMlRmwXgqTAi09/qQ==", + "version": "8.2.2", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.2.2.tgz", + "integrity": "sha512-uf369EYjgEU88u65QdOBaTlEv0fy/v5H6ICpaPHNRHgvppkQSE9uWZitZdeBuXQq8+k9OCo1Wn0vzL3znP3nHA==", "requires": { - "@ionic/core": "8.2.1", + "@ionic/core": "8.2.2", "ionicons": "^7.0.0", "tslib": "*" } diff --git a/packages/react-router/package.json b/packages/react-router/package.json index 5dde8be880..e0f67b2e8c 100644 --- a/packages/react-router/package.json +++ b/packages/react-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react-router", - "version": "8.2.1", + "version": "8.2.2", "description": "React Router wrapper for @ionic/react", "keywords": [ "ionic", @@ -36,7 +36,7 @@ "dist/" ], "dependencies": { - "@ionic/react": "^8.2.1", + "@ionic/react": "^8.2.2", "tslib": "*" }, "peerDependencies": { diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 89b19b3ff0..f7d1bb9b71 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12) + +**Note:** Version bump only for package @ionic/react + + + + + ## [8.2.1](https://github.com/ionic-team/ionic-framework/compare/v8.2.0...v8.2.1) (2024-06-05) * **react:** export InputInputEventDetail type ([#29512](https://github.com/ionic-team/ionic-framework/issues/29512)) ([624ceba](https://github.com/ionic-team/ionic-framework/commit/624ceba2e128bb13a3afe4c35883f603f5488d0e)), closes [#29518](https://github.com/ionic-team/ionic-framework/issues/29518) diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json index b673c88d50..217cb90b8c 100644 --- a/packages/react/package-lock.json +++ b/packages/react/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/react", - "version": "8.2.1", + "version": "8.2.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/react", - "version": "8.2.1", + "version": "8.2.2", "license": "MIT", "dependencies": { - "@ionic/core": "^8.2.1", + "@ionic/core": "^8.2.2", "ionicons": "^7.0.0", "tslib": "*" }, @@ -798,9 +798,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.1.tgz", - "integrity": "sha512-nIoCdjzogRmyCoD7UcKUV3LmzkiqDN+TxHhkCTRVeNPFQwC5zuTbYKb714caJ6ixKSDBlDiEaLRIb2zgr57ekw==", + "version": "8.2.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.2.tgz", + "integrity": "sha512-gpWemL5IJjGDJPz6dltHnFyqioRl0sugs2PUXrwPaYwMnTDoRZ6iojYFovCIr5YJN99rHZprOthdcsYR/viGyQ==", "dependencies": { "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", @@ -13035,9 +13035,9 @@ "dev": true }, "@ionic/core": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.1.tgz", - "integrity": "sha512-nIoCdjzogRmyCoD7UcKUV3LmzkiqDN+TxHhkCTRVeNPFQwC5zuTbYKb714caJ6ixKSDBlDiEaLRIb2zgr57ekw==", + "version": "8.2.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.2.tgz", + "integrity": "sha512-gpWemL5IJjGDJPz6dltHnFyqioRl0sugs2PUXrwPaYwMnTDoRZ6iojYFovCIr5YJN99rHZprOthdcsYR/viGyQ==", "requires": { "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", diff --git a/packages/react/package.json b/packages/react/package.json index 8b973a58d2..d32b695bdb 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react", - "version": "8.2.1", + "version": "8.2.2", "description": "React specific wrapper for @ionic/core", "keywords": [ "ionic", @@ -39,7 +39,7 @@ "css/" ], "dependencies": { - "@ionic/core": "^8.2.1", + "@ionic/core": "^8.2.2", "ionicons": "^7.0.0", "tslib": "*" }, diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md index 32ca0d31da..44b71ac615 100644 --- a/packages/vue-router/CHANGELOG.md +++ b/packages/vue-router/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12) + +**Note:** Version bump only for package @ionic/vue-router + + + + + ## [8.2.1](https://github.com/ionic-team/ionic-framework/compare/v8.2.0...v8.2.1) (2024-06-05) **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 e52b2709ad..c812b0354a 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.2.1", + "version": "8.2.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/vue-router", - "version": "8.2.1", + "version": "8.2.2", "license": "MIT", "dependencies": { - "@ionic/vue": "^8.2.1" + "@ionic/vue": "^8.2.2" }, "devDependencies": { "@ionic/eslint-config": "^0.3.0", @@ -661,9 +661,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.1.tgz", - "integrity": "sha512-nIoCdjzogRmyCoD7UcKUV3LmzkiqDN+TxHhkCTRVeNPFQwC5zuTbYKb714caJ6ixKSDBlDiEaLRIb2zgr57ekw==", + "version": "8.2.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.2.tgz", + "integrity": "sha512-gpWemL5IJjGDJPz6dltHnFyqioRl0sugs2PUXrwPaYwMnTDoRZ6iojYFovCIr5YJN99rHZprOthdcsYR/viGyQ==", "dependencies": { "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", @@ -852,11 +852,11 @@ } }, "node_modules/@ionic/vue": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.2.1.tgz", - "integrity": "sha512-rMg8LhWUgRYCFU7+tJOzP9Cfxm5k9YqE1pWPyuf8RtvZ8WnaTNx1D5TQK2/RV63kwukyS5zM3eM6M9iWkoHJQw==", + "version": "8.2.2", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.2.2.tgz", + "integrity": "sha512-5xIkEX4UHs4Bm15wqG/xBSxUtWdnHv+eFD3dfYGEVhK+M5hp4Vv+YOhHx6xVLKtdQOC3p+ROCXK+7GmCrAv6KQ==", "dependencies": { - "@ionic/core": "8.2.1", + "@ionic/core": "8.2.2", "ionicons": "^7.0.0" } }, @@ -7878,9 +7878,9 @@ "dev": true }, "@ionic/core": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.1.tgz", - "integrity": "sha512-nIoCdjzogRmyCoD7UcKUV3LmzkiqDN+TxHhkCTRVeNPFQwC5zuTbYKb714caJ6ixKSDBlDiEaLRIb2zgr57ekw==", + "version": "8.2.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.2.tgz", + "integrity": "sha512-gpWemL5IJjGDJPz6dltHnFyqioRl0sugs2PUXrwPaYwMnTDoRZ6iojYFovCIr5YJN99rHZprOthdcsYR/viGyQ==", "requires": { "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", @@ -7993,11 +7993,11 @@ "requires": {} }, "@ionic/vue": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.2.1.tgz", - "integrity": "sha512-rMg8LhWUgRYCFU7+tJOzP9Cfxm5k9YqE1pWPyuf8RtvZ8WnaTNx1D5TQK2/RV63kwukyS5zM3eM6M9iWkoHJQw==", + "version": "8.2.2", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.2.2.tgz", + "integrity": "sha512-5xIkEX4UHs4Bm15wqG/xBSxUtWdnHv+eFD3dfYGEVhK+M5hp4Vv+YOhHx6xVLKtdQOC3p+ROCXK+7GmCrAv6KQ==", "requires": { - "@ionic/core": "8.2.1", + "@ionic/core": "8.2.2", "ionicons": "^7.0.0" } }, diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json index 4428c6a018..37d119aef2 100644 --- a/packages/vue-router/package.json +++ b/packages/vue-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue-router", - "version": "8.2.1", + "version": "8.2.2", "description": "Vue Router integration for @ionic/vue", "scripts": { "test.spec": "jest", @@ -44,7 +44,7 @@ }, "homepage": "https://github.com/ionic-team/ionic-framework#readme", "dependencies": { - "@ionic/vue": "^8.2.1" + "@ionic/vue": "^8.2.2" }, "devDependencies": { "@ionic/eslint-config": "^0.3.0", diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md index 898aa20eea..c8eb9d7d6d 100644 --- a/packages/vue/CHANGELOG.md +++ b/packages/vue/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12) + +**Note:** Version bump only for package @ionic/vue + + + + + ## [8.2.1](https://github.com/ionic-team/ionic-framework/compare/v8.2.0...v8.2.1) (2024-06-05) **Note:** Version bump only for package @ionic/vue diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json index b3fb111fb3..35301971bc 100644 --- a/packages/vue/package-lock.json +++ b/packages/vue/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/vue", - "version": "8.2.1", + "version": "8.2.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/vue", - "version": "8.2.1", + "version": "8.2.2", "license": "MIT", "dependencies": { - "@ionic/core": "^8.2.1", + "@ionic/core": "^8.2.2", "ionicons": "^7.0.0" }, "devDependencies": { @@ -208,9 +208,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.1.tgz", - "integrity": "sha512-nIoCdjzogRmyCoD7UcKUV3LmzkiqDN+TxHhkCTRVeNPFQwC5zuTbYKb714caJ6ixKSDBlDiEaLRIb2zgr57ekw==", + "version": "8.2.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.2.tgz", + "integrity": "sha512-gpWemL5IJjGDJPz6dltHnFyqioRl0sugs2PUXrwPaYwMnTDoRZ6iojYFovCIr5YJN99rHZprOthdcsYR/viGyQ==", "dependencies": { "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", @@ -3959,9 +3959,9 @@ "dev": true }, "@ionic/core": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.1.tgz", - "integrity": "sha512-nIoCdjzogRmyCoD7UcKUV3LmzkiqDN+TxHhkCTRVeNPFQwC5zuTbYKb714caJ6ixKSDBlDiEaLRIb2zgr57ekw==", + "version": "8.2.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.2.tgz", + "integrity": "sha512-gpWemL5IJjGDJPz6dltHnFyqioRl0sugs2PUXrwPaYwMnTDoRZ6iojYFovCIr5YJN99rHZprOthdcsYR/viGyQ==", "requires": { "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", diff --git a/packages/vue/package.json b/packages/vue/package.json index 62bffaa9aa..54addac16c 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue", - "version": "8.2.1", + "version": "8.2.2", "description": "Vue specific wrapper for @ionic/core", "scripts": { "eslint": "eslint src", @@ -66,7 +66,7 @@ "vue-router": "^4.0.16" }, "dependencies": { - "@ionic/core": "^8.2.1", + "@ionic/core": "^8.2.2", "ionicons": "^7.0.0" }, "vetur": { diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 835ca9bbdc..046049ca6d 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -492,7 +492,8 @@ export const IonItemOption = /*@__PURE__*/ defineContainer('i 'href', 'rel', 'target', - 'type' + 'type', + 'shape' ]); @@ -518,7 +519,8 @@ export const IonLabel = /*@__PURE__*/ defineContainer('ion-label', export const IonList = /*@__PURE__*/ defineContainer('ion-list', defineIonList, [ 'lines', - 'inset' + 'inset', + 'shape' ]); diff --git a/packages/vue/test/apps/vue3/package.json b/packages/vue/test/apps/vue3/package.json index 09e9b8fcdf..5a4ec1266b 100644 --- a/packages/vue/test/apps/vue3/package.json +++ b/packages/vue/test/apps/vue3/package.json @@ -19,7 +19,7 @@ "@ionic/vue": "^6.0.12", "@ionic/vue-router": "^6.0.12", "ionicons": "^6.0.4", - "vue": "^3.4.14", + "vue": "3.4.27", "vue-router": "^4.2.5" }, "devDependencies": { diff --git a/renovate.json5 b/renovate.json5 index aebf2bac00..96c4c9b2c6 100644 --- a/renovate.json5 +++ b/renovate.json5 @@ -27,7 +27,8 @@ groupName: "playwright", matchFileNames: [ "core/package.json" - ] + ], + "rangeStrategy": "bump" }, { matchDatasources: ["docker"],