diff --git a/.github/workflows/actions/test-core-clean-build/action.yml b/.github/workflows/actions/test-core-clean-build/action.yml index ae41a8924f9..f7b55d7465e 100644 --- a/.github/workflows/actions/test-core-clean-build/action.yml +++ b/.github/workflows/actions/test-core-clean-build/action.yml @@ -13,15 +13,6 @@ runs: path: ./core filename: CoreBuild.zip - name: Check Diff - run: | - git diff --exit-code || { - echo -e "\033[1;31m⚠️ Error: Differences Detected ⚠️\033[0m" - echo -e "\033[1;31mThere are uncommitted changes between the build outputs from CI and your branch.\033[0m" - echo -e "\033[1;31mPlease ensure you have followed these steps:\033[0m" - echo -e "\033[1;31m1. Run 'npm run build' locally to generate the latest build output.\033[0m" - echo -e "\033[1;31m2. Commit and push all necessary changes to your branch.\033[0m" - echo -e "\033[1;31m3. Compare and validate the differences before proceeding.\033[0m" - exit 1 - } + run: git diff --exit-code shell: bash working-directory: ./core diff --git a/CHANGELOG.md b/CHANGELOG.md index 1849a4c122b..2c440cb5a2b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,19 +3,6 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -## [7.3.1](https://github.com/ionic-team/ionic-framework/compare/v7.3.0...v7.3.1) (2023-08-23) - - -### Bug Fixes - -* **angular:** ionTabsWillChange is fired before tab activation ([#27991](https://github.com/ionic-team/ionic-framework/issues/27991)) ([bbfb8f8](https://github.com/ionic-team/ionic-framework/commit/bbfb8f81a61475d7e73b63743db5d6a0cd979d21)), closes [#27212](https://github.com/ionic-team/ionic-framework/issues/27212) -* **input, textarea:** clearOnEdit does not clear when pressing Tab ([#28005](https://github.com/ionic-team/ionic-framework/issues/28005)) ([444acc1](https://github.com/ionic-team/ionic-framework/commit/444acc1f1bca348b62dfb398067cc087529f67f1)), closes [#27746](https://github.com/ionic-team/ionic-framework/issues/27746) -* **react:** avoid multiple invocations of onDidDismiss and onWillPresent ([#28020](https://github.com/ionic-team/ionic-framework/issues/28020)) ([0ac3df3](https://github.com/ionic-team/ionic-framework/commit/0ac3df3f378bdefc3a927adc798ebd9ec7a54fee)), closes [#28010](https://github.com/ionic-team/ionic-framework/issues/28010) - - - - - # [7.3.0](https://github.com/ionic-team/ionic-framework/compare/v7.2.4...v7.3.0) (2023-08-16) diff --git a/README.md b/README.md index 3ca6f6ca97a..c3790ca4950 100644 --- a/README.md +++ b/README.md @@ -55,7 +55,7 @@ | Project | Package | Version | Downloads| Links | | ------- | ------- | ------- | -------- |:-----:| | **Core** | [`@ionic/core`](https://www.npmjs.com/package/@ionic/core) | [![version](https://img.shields.io/npm/v/@ionic/core/latest.svg)](https://www.npmjs.com/package/@ionic/core) | NPM Downloads | [`README.md`](core/README.md) -| **Angular** | [`@ionic/angular`](https://www.npmjs.com/package/@ionic/angular) | [![version](https://img.shields.io/npm/v/@ionic/angular/latest.svg)](https://www.npmjs.com/package/@ionic/angular) | NPM Downloads | [`README.md`](packages/angular/README.md) +| **Angular** | [`@ionic/angular`](https://www.npmjs.com/package/@ionic/angular) | [![version](https://img.shields.io/npm/v/@ionic/angular/latest.svg)](https://www.npmjs.com/package/@ionic/angular) | NPM Downloads | [`README.md`](angular/README.md) | **Vue** | [`@ionic/vue`](https://www.npmjs.com/package/@ionic/vue) | [![version](https://img.shields.io/npm/v/@ionic/vue/latest.svg)](https://www.npmjs.com/package/@ionic/vue) | NPM Downloads | [`README.md`](packages/vue/README.md) | **React** | [`@ionic/react`](https://www.npmjs.com/package/@ionic/react) | [![version](https://img.shields.io/npm/v/@ionic/react/latest.svg)](https://www.npmjs.com/package/@ionic/react) | NPM Downloads |[`README.md`](packages/react/README.md) diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md index 47f747d30a3..39ff4c72962 100644 --- a/core/CHANGELOG.md +++ b/core/CHANGELOG.md @@ -3,17 +3,6 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -## [7.3.1](https://github.com/ionic-team/ionic-framework/compare/v7.3.0...v7.3.1) (2023-08-23) - - -### Bug Fixes - -* **input, textarea:** clearOnEdit does not clear when pressing Tab ([#28005](https://github.com/ionic-team/ionic-framework/issues/28005)) ([444acc1](https://github.com/ionic-team/ionic-framework/commit/444acc1f1bca348b62dfb398067cc087529f67f1)), closes [#27746](https://github.com/ionic-team/ionic-framework/issues/27746) - - - - - # [7.3.0](https://github.com/ionic-team/ionic-framework/compare/v7.2.4...v7.3.0) (2023-08-16) diff --git a/core/api.txt b/core/api.txt index 47b1307e5ae..75efc2fd3be 100644 --- a/core/api.txt +++ b/core/api.txt @@ -289,12 +289,13 @@ ion-card-title,prop,mode,"ios" | "md",undefined,false,false ion-card-title,css-prop,--color ion-checkbox,shadow +ion-checkbox,prop,align,"center" | "start",'center',false,false ion-checkbox,prop,checked,boolean,false,false,false ion-checkbox,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true ion-checkbox,prop,disabled,boolean,false,false,false ion-checkbox,prop,indeterminate,boolean,false,false,false ion-checkbox,prop,justify,"end" | "space-between" | "start",'space-between',false,false -ion-checkbox,prop,labelPlacement,"end" | "fixed" | "start",'start',false,false +ion-checkbox,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false ion-checkbox,prop,legacy,boolean | undefined,undefined,false,false ion-checkbox,prop,mode,"ios" | "md",undefined,false,false ion-checkbox,prop,name,string,this.inputId,false,false @@ -1008,10 +1009,11 @@ ion-progress-bar,part,stream ion-progress-bar,part,track ion-radio,shadow +ion-radio,prop,align,"center" | "start",'center',false,false ion-radio,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true ion-radio,prop,disabled,boolean,false,false,false ion-radio,prop,justify,"end" | "space-between" | "start",'space-between',false,false -ion-radio,prop,labelPlacement,"end" | "fixed" | "start",'start',false,false +ion-radio,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false ion-radio,prop,legacy,boolean | undefined,undefined,false,false ion-radio,prop,mode,"ios" | "md",undefined,false,false ion-radio,prop,name,string,this.inputId,false,false @@ -1038,7 +1040,7 @@ ion-range,prop,debounce,number | undefined,undefined,false,false ion-range,prop,disabled,boolean,false,false,false ion-range,prop,dualKnobs,boolean,false,false,false ion-range,prop,label,string | undefined,undefined,false,false -ion-range,prop,labelPlacement,"end" | "fixed" | "start",'start',false,false +ion-range,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false ion-range,prop,legacy,boolean | undefined,undefined,false,false ion-range,prop,max,number,100,false,false ion-range,prop,min,number,0,false,false @@ -1478,12 +1480,13 @@ ion-toast,part,icon ion-toast,part,message ion-toggle,shadow +ion-toggle,prop,align,"center" | "start",'center',false,false ion-toggle,prop,checked,boolean,false,false,false ion-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true ion-toggle,prop,disabled,boolean,false,false,false ion-toggle,prop,enableOnOffLabels,boolean | undefined,config.get('toggleOnOffLabels'),false,false ion-toggle,prop,justify,"end" | "space-between" | "start",'space-between',false,false -ion-toggle,prop,labelPlacement,"end" | "fixed" | "start",'start',false,false +ion-toggle,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false ion-toggle,prop,legacy,boolean | undefined,undefined,false,false ion-toggle,prop,mode,"ios" | "md",undefined,false,false ion-toggle,prop,name,string,this.inputId,false,false diff --git a/core/package-lock.json b/core/package-lock.json index 9aed29cc886..5757cca1ae8 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/core", - "version": "7.3.1", + "version": "7.3.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/core", - "version": "7.3.1", + "version": "7.3.0", "license": "MIT", "dependencies": { - "@stencil/core": "^4.1.0", + "@stencil/core": "^4.0.3", "ionicons": "7.1.0", "tslib": "^2.1.0" }, @@ -22,7 +22,7 @@ "@ionic/eslint-config": "^0.3.0", "@ionic/prettier-config": "^2.0.0", "@jest/core": "^27.5.1", - "@playwright/test": "^1.37.1", + "@playwright/test": "^1.37.0", "@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-virtual": "^2.0.3", "@stencil/angular-output-target": "^0.7.1", @@ -1541,13 +1541,13 @@ } }, "node_modules/@playwright/test": { - "version": "1.37.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.37.1.tgz", - "integrity": "sha512-bq9zTli3vWJo8S3LwB91U0qDNQDpEXnw7knhxLM0nwDvexQAwx9tO8iKDZSqqneVq+URd/WIoz+BALMqUTgdSg==", + "version": "1.37.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.37.0.tgz", + "integrity": "sha512-181WBLk4SRUyH1Q96VZl7BP6HcK0b7lbdeKisn3N/vnjitk+9HbdlFz/L5fey05vxaAhldIDnzo8KUoy8S3mmQ==", "dev": true, "dependencies": { "@types/node": "*", - "playwright-core": "1.37.1" + "playwright-core": "1.37.0" }, "bin": { "playwright": "cli.js" @@ -1634,9 +1634,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", - "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==", + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.0.3.tgz", + "integrity": "sha512-uWaH4tQ16So1feRu4tD0gupDEnzhRatS3Jp9uYkYlqjhx5BQ/ox5CTP+lxboochqkLlvkmXvhH9SsEV+UTsYTA==", "bin": { "stencil": "bin/stencil" }, @@ -8194,9 +8194,9 @@ } }, "node_modules/playwright-core": { - "version": "1.37.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.37.1.tgz", - "integrity": "sha512-17EuQxlSIYCmEMwzMqusJ2ztDgJePjrbttaefgdsiqeLWidjYz9BxXaTaZWxH1J95SHGk6tjE+dwgWILJoUZfA==", + "version": "1.37.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.37.0.tgz", + "integrity": "sha512-1c46jhTH/myQw6sesrcuHVtLoSNfJv8Pfy9t3rs6subY7kARv0HRw5PpyfPYPpPtQvBOmgbE6K+qgYUpj81LAA==", "dev": true, "bin": { "playwright-core": "cli.js" @@ -11455,14 +11455,14 @@ } }, "@playwright/test": { - "version": "1.37.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.37.1.tgz", - "integrity": "sha512-bq9zTli3vWJo8S3LwB91U0qDNQDpEXnw7knhxLM0nwDvexQAwx9tO8iKDZSqqneVq+URd/WIoz+BALMqUTgdSg==", + "version": "1.37.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.37.0.tgz", + "integrity": "sha512-181WBLk4SRUyH1Q96VZl7BP6HcK0b7lbdeKisn3N/vnjitk+9HbdlFz/L5fey05vxaAhldIDnzo8KUoy8S3mmQ==", "dev": true, "requires": { "@types/node": "*", "fsevents": "2.3.2", - "playwright-core": "1.37.1" + "playwright-core": "1.37.0" } }, "@rollup/plugin-node-resolve": { @@ -11524,9 +11524,9 @@ "requires": {} }, "@stencil/core": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", - "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==" + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.0.3.tgz", + "integrity": "sha512-uWaH4tQ16So1feRu4tD0gupDEnzhRatS3Jp9uYkYlqjhx5BQ/ox5CTP+lxboochqkLlvkmXvhH9SsEV+UTsYTA==" }, "@stencil/react-output-target": { "version": "0.5.3", @@ -16332,9 +16332,9 @@ } }, "playwright-core": { - "version": "1.37.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.37.1.tgz", - "integrity": "sha512-17EuQxlSIYCmEMwzMqusJ2ztDgJePjrbttaefgdsiqeLWidjYz9BxXaTaZWxH1J95SHGk6tjE+dwgWILJoUZfA==", + "version": "1.37.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.37.0.tgz", + "integrity": "sha512-1c46jhTH/myQw6sesrcuHVtLoSNfJv8Pfy9t3rs6subY7kARv0HRw5PpyfPYPpPtQvBOmgbE6K+qgYUpj81LAA==", "dev": true }, "postcss": { diff --git a/core/package.json b/core/package.json index fd46ff517cd..be0ef2bb51a 100644 --- a/core/package.json +++ b/core/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/core", - "version": "7.3.1", + "version": "7.3.0", "description": "Base components for Ionic", "keywords": [ "ionic", @@ -31,7 +31,7 @@ "loader/" ], "dependencies": { - "@stencil/core": "^4.1.0", + "@stencil/core": "^4.0.3", "ionicons": "7.1.0", "tslib": "^2.1.0" }, @@ -44,7 +44,7 @@ "@ionic/eslint-config": "^0.3.0", "@ionic/prettier-config": "^2.0.0", "@jest/core": "^27.5.1", - "@playwright/test": "^1.37.1", + "@playwright/test": "^1.37.0", "@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-virtual": "^2.0.3", "@stencil/angular-output-target": "^0.7.1", diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 1cd7c27747f..e362b63b5e9 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -602,6 +602,10 @@ export namespace Components { "mode"?: "ios" | "md"; } interface IonCheckbox { + /** + * How to pack the label and control along the cross axis. `"start"`: The label and control will appear at the top of the container. `"center"`: The label and control will appear at the center of the container. + */ + "align": 'start' | 'center'; /** * If `true`, the checkbox is selected. */ @@ -623,9 +627,9 @@ export namespace Components { */ "justify": 'start' | 'end' | 'space-between'; /** - * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). + * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `align` property. */ - "labelPlacement": 'start' | 'end' | 'fixed'; + "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked'; /** * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt checkboxes in to the modern form markup when they are using either the `aria-label` attribute or have text in the default slot. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup. */ @@ -2216,6 +2220,10 @@ export namespace Components { "value": number; } interface IonRadio { + /** + * How to pack the label and control along the cross axis. `"start"`: The label and control will appear at the top of the container. `"center"`: The label and control will appear at the center of the container. + */ + "align": 'start' | 'center'; /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). */ @@ -2229,9 +2237,9 @@ export namespace Components { */ "justify": 'start' | 'end' | 'space-between'; /** - * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). + * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `align` property. */ - "labelPlacement": 'start' | 'end' | 'fixed'; + "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked'; /** * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup. */ @@ -2291,9 +2299,9 @@ export namespace Components { */ "label"?: string; /** - * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). + * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the range regardless of the direction. The alignment of the label can be controlled with the `align` property. */ - "labelPlacement": 'start' | 'end' | 'fixed'; + "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked'; /** * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup. */ @@ -3165,6 +3173,10 @@ export namespace Components { "trigger": string | undefined; } interface IonToggle { + /** + * How to pack the label and control along the cross axis. `"start"`: The label and control will appear at the top of the container. `"center"`: The label and control will appear at the center of the container. + */ + "align": 'start' | 'center'; /** * If `true`, the toggle is selected. */ @@ -3186,9 +3198,9 @@ export namespace Components { */ "justify": 'start' | 'end' | 'space-between'; /** - * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). + * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `align` property. */ - "labelPlacement": 'start' | 'end' | 'fixed'; + "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked'; /** * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup. */ @@ -4625,6 +4637,10 @@ declare namespace LocalJSX { "mode"?: "ios" | "md"; } interface IonCheckbox { + /** + * How to pack the label and control along the cross axis. `"start"`: The label and control will appear at the top of the container. `"center"`: The label and control will appear at the center of the container. + */ + "align"?: 'start' | 'center'; /** * If `true`, the checkbox is selected. */ @@ -4646,9 +4662,9 @@ declare namespace LocalJSX { */ "justify"?: 'start' | 'end' | 'space-between'; /** - * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). + * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `align` property. */ - "labelPlacement"?: 'start' | 'end' | 'fixed'; + "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked'; /** * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt checkboxes in to the modern form markup when they are using either the `aria-label` attribute or have text in the default slot. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup. */ @@ -6226,6 +6242,10 @@ declare namespace LocalJSX { "value"?: number; } interface IonRadio { + /** + * How to pack the label and control along the cross axis. `"start"`: The label and control will appear at the top of the container. `"center"`: The label and control will appear at the center of the container. + */ + "align"?: 'start' | 'center'; /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). */ @@ -6239,9 +6259,9 @@ declare namespace LocalJSX { */ "justify"?: 'start' | 'end' | 'space-between'; /** - * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). + * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `align` property. */ - "labelPlacement"?: 'start' | 'end' | 'fixed'; + "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked'; /** * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup. */ @@ -6319,9 +6339,9 @@ declare namespace LocalJSX { */ "label"?: string; /** - * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). + * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the range regardless of the direction. The alignment of the label can be controlled with the `align` property. */ - "labelPlacement"?: 'start' | 'end' | 'fixed'; + "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked'; /** * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup. */ @@ -7298,6 +7318,10 @@ declare namespace LocalJSX { "trigger"?: string | undefined; } interface IonToggle { + /** + * How to pack the label and control along the cross axis. `"start"`: The label and control will appear at the top of the container. `"center"`: The label and control will appear at the center of the container. + */ + "align"?: 'start' | 'center'; /** * If `true`, the toggle is selected. */ @@ -7319,9 +7343,9 @@ declare namespace LocalJSX { */ "justify"?: 'start' | 'end' | 'space-between'; /** - * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). + * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `align` property. */ - "labelPlacement"?: 'start' | 'end' | 'fixed'; + "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked'; /** * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup. */ diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index a0c3c4570f3..73fe417fca8 100644 --- a/core/src/components/button/button.tsx +++ b/core/src/components/button/button.tsx @@ -153,15 +153,6 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf */ @Event() ionBlur!: EventEmitter; - /** - * This is responsible for rendering a hidden native - * button element inside the associated form. This allows - * users to submit a form by pressing "Enter" when a text - * field inside of the form is focused. The native button - * rendered inside of `ion-button` is in the Shadow DOM - * and therefore does not participate in form submission - * which is why the following code is necessary. - */ private renderHiddenButton() { const formEl = (this.formEl = this.findForm()); if (formEl) { @@ -332,13 +323,6 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf fill = this.inToolbar || this.inListHeader ? 'clear' : 'solid'; } - /** - * We call renderHiddenButton in the render function to account - * for any properties being set async. For example, changing the - * "type" prop from "button" to "submit" after the component has - * loaded would warrant the hidden button being added to the - * associated form. - */ { type !== 'button' && this.renderHiddenButton(); } diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss index 9f2b6269ea4..f6f57c07a51 100644 --- a/core/src/components/checkbox/checkbox.scss +++ b/core/src/components/checkbox/checkbox.scss @@ -82,8 +82,6 @@ flex-grow: 1; - align-items: center; - height: inherit; cursor: inherit; @@ -108,6 +106,14 @@ @include margin($checkbox-item-label-margin-top, null, $checkbox-item-label-margin-bottom, null); } +:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper { + @include margin($checkbox-item-label-margin-top, null, $form-control-label-margin, null); +} + +:host(.in-item.checkbox-label-placement-stacked) .native-wrapper { + @include margin(null, null, $checkbox-item-label-margin-bottom, null); +} + /** * If no label text is placed into the slot * then the element should be hidden otherwise @@ -181,6 +187,16 @@ input { justify-content: end; } +// Align Items +// --------------------------------------------- + +:host(.checkbox-align-start) .checkbox-wrapper { + align-items: start; +} + +:host(.checkbox-align-center) .checkbox-wrapper { + align-items: center; +} // Label Placement - Start // ---------------------------------------------------------------- @@ -248,6 +264,25 @@ input { max-width: 200px; } +// Label Placement - Stacked +// ---------------------------------------------------------------- + +/** + * Label is on top of the checkbox. + */ +:host(.checkbox-label-placement-stacked) .checkbox-wrapper { + flex-direction: column; +} + +:host(.checkbox-label-placement-stacked) .label-text-wrapper { + /** + * The margin between the label and + * the checkbox should be on the bottom + * when the label sits at the top. + */ + @include margin(null, 0, $form-control-label-margin, 0); +} + // Checked / Indeterminate Checkbox // --------------------------------------------- diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx index 08cfc581ff5..741ace1291b 100644 --- a/core/src/components/checkbox/checkbox.tsx +++ b/core/src/components/checkbox/checkbox.tsx @@ -81,8 +81,9 @@ export class Checkbox implements ComponentInterface { * `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. * `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). + * `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `align` property. */ - @Prop() labelPlacement: 'start' | 'end' | 'fixed' = 'start'; + @Prop() labelPlacement: 'start' | 'end' | 'fixed' | 'stacked' = 'start'; /** * How to pack the label and checkbox within a line. @@ -95,6 +96,13 @@ export class Checkbox implements ComponentInterface { */ @Prop() justify: 'start' | 'end' | 'space-between' = 'space-between'; + /** + * How to pack the label and control along the cross axis. + * `"start"`: The label and control will appear at the top of the container. + * `"center"`: The label and control will appear at the center of the container. + */ + @Prop() align: 'start' | 'center' = 'center'; + // TODO(FW-3100): remove this /** * Set the `legacy` property to `true` to forcibly use the legacy form control markup. @@ -224,6 +232,7 @@ export class Checkbox implements ComponentInterface { labelPlacement, name, value, + align, } = this; const mode = getIonMode(this); const path = getSVGPath(mode, indeterminate); @@ -240,6 +249,7 @@ export class Checkbox implements ComponentInterface { 'checkbox-indeterminate': indeterminate, interactive: true, [`checkbox-justify-${justify}`]: true, + [`checkbox-align-${align}`]: true, [`checkbox-label-placement-${labelPlacement}`]: true, })} > diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts b/core/src/components/checkbox/test/item/checkbox.e2e.ts index 7162857e857..e022fde5f36 100644 --- a/core/src/components/checkbox/test/item/checkbox.e2e.ts +++ b/core/src/components/checkbox/test/item/checkbox.e2e.ts @@ -71,3 +71,22 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co }); }); }); + +configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('checkbox: stacked label in item'), () => { + test('should render margins correctly when using stacked label in item', async ({ page }) => { + await page.setContent( + ` + + + Enable Notifications + + + `, + config + ); + const list = page.locator('ion-list'); + expect(await list.screenshot()).toMatchSnapshot(screenshot(`checkbox-stacked-label-in-item`)); + }); + }); +}); diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..c001293cd30 Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..86359e9da99 Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..23f85a5d4b9 Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/item/index.html b/core/src/components/checkbox/test/item/index.html index 156e3ca6dca..99bb77adb99 100644 --- a/core/src/components/checkbox/test/item/index.html +++ b/core/src/components/checkbox/test/item/index.html @@ -137,6 +137,27 @@

Justify Space Between

+

Placement Stacked

+
+
+

Align Start

+ + + Enable Notifications + + +
+ +
+

Align Center

+ + + Enable Notifications + + +
+
+

States

diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts b/core/src/components/checkbox/test/label/checkbox.e2e.ts index 38cef8b5bfe..231be46f9fa 100644 --- a/core/src/components/checkbox/test/label/checkbox.e2e.ts +++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts @@ -138,5 +138,31 @@ configs().forEach(({ title, screenshot, config }) => { expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-label-fixed-justify-space-between`)); }); }); + + test.describe('checkbox: stacked placement', () => { + test('should align the label to the start of the container in the stacked position', async ({ page }) => { + await page.setContent( + ` + This is a long label + `, + config + ); + + const checkbox = page.locator('ion-checkbox'); + expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-label-stacked-align-start`)); + }); + + test('should align the label to the center of the container in the stacked position', async ({ page }) => { + await page.setContent( + ` + This is a long label + `, + config + ); + + const checkbox = page.locator('ion-checkbox'); + expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-label-stacked-align-center`)); + }); + }); }); }); diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..37e19cc4844 Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..806038db5b5 Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f46af6f6196 Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..419901e23de Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..806038db5b5 Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-rtl-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f46af6f6196 Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..7c328c1bdeb Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..1881022673f Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..2d95661f2ef Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-rtl-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..71dc43aa06c Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-rtl-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..1881022673f Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-rtl-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..2d95661f2ef Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..4dc9eceaa7f Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f31eeedf374 Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..74686aa4d6e Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..706e55244ba Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..1b9cdcaa08a Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..36adfd60645 Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..3f1da1652a4 Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..aa6852de06b Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..da52015591e Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..13181ad80d7 Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..50a976a5433 Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f5fcb75c04e Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/label/index.html b/core/src/components/checkbox/test/label/index.html index cdc9a913d27..6c3131e9ff5 100644 --- a/core/src/components/checkbox/test/label/index.html +++ b/core/src/components/checkbox/test/label/index.html @@ -104,6 +104,19 @@

Justify Space Between

Enable Notifications
+ +

Placement Stacked

+
+
+

Align Start

+ Enable Notifications +
+ +
+

Align Center

+ Enable Notifications +
+
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 6498eeffa4e..44dec367e4c 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -532,7 +532,7 @@ export class Input implements ComponentInterface { * Clear the input if the control has not been previously cleared during focus. * Do not clear if the user hitting enter to submit a form. */ - if (!this.didInputClearOnEdit && this.hasValue() && ev.key !== 'Enter' && ev.key !== 'Tab') { + if (!this.didInputClearOnEdit && this.hasValue() && ev.key !== 'Enter') { this.value = ''; this.emitInputChange(ev); } diff --git a/core/src/components/input/test/basic/index.html b/core/src/components/input/test/basic/index.html deleted file mode 100644 index 9ab5c6ecab1..00000000000 --- a/core/src/components/input/test/basic/index.html +++ /dev/null @@ -1,57 +0,0 @@ - - - - - Input - Basic - - - - - - - - - - - - - - Input - Basic - - - - -
-
-

Default

- -
-
- - - - diff --git a/core/src/components/input/test/clear-on-edit/input.e2e.ts b/core/src/components/input/test/clear-on-edit/input.e2e.ts deleted file mode 100644 index e6686902782..00000000000 --- a/core/src/components/input/test/clear-on-edit/input.e2e.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { expect } from '@playwright/test'; -import { test, configs } from '@utils/test/playwright'; - -configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { - test.describe(title('input: clearOnEdit'), () => { - test('should clear when typed into', async ({ page }) => { - await page.setContent(``, config); - - const ionInput = await page.spyOnEvent('ionInput'); - - const input = page.locator('ion-input'); - await input.locator('input').type('h'); - - await ionInput.next(); - - await expect(input).toHaveJSProperty('value', 'h'); - }); - - test('should not clear when enter is pressed', async ({ page }) => { - await page.setContent(``, config); - - const input = page.locator('ion-input'); - await input.locator('input').focus(); - - await page.keyboard.press('Enter'); - await page.waitForChanges(); - - await expect(input).toHaveJSProperty('value', 'abc'); - }); - - test('should not clear when tab is pressed', async ({ page }) => { - await page.setContent(``, config); - - const input = page.locator('ion-input'); - await input.locator('input').focus(); - - await page.keyboard.press('Tab'); - await page.waitForChanges(); - - await expect(input).toHaveJSProperty('value', 'abc'); - }); - }); -}); diff --git a/core/src/components/picker/picker-interface.ts b/core/src/components/picker/picker-interface.ts index 6a01a8d437a..4ddb18c3261 100644 --- a/core/src/components/picker/picker-interface.ts +++ b/core/src/components/picker/picker-interface.ts @@ -27,9 +27,6 @@ export interface PickerButton { export interface PickerColumn { name: string; align?: string; - /** - * Changing this value allows the initial value of a picker column to be set. - */ selectedIndex?: number; prevSelected?: number; prefix?: string; diff --git a/core/src/components/radio/radio.scss b/core/src/components/radio/radio.scss index 3fe60536809..8545845cddd 100644 --- a/core/src/components/radio/radio.scss +++ b/core/src/components/radio/radio.scss @@ -96,8 +96,6 @@ input { flex-grow: 1; - align-items: center; - height: inherit; min-height: inherit; @@ -127,6 +125,14 @@ input { @include margin($radio-item-label-margin-top, null, $radio-item-label-margin-bottom, null); } +:host(.in-item.radio-label-placement-stacked) .label-text-wrapper { + @include margin($radio-item-label-margin-top, null, $form-control-label-margin, null); +} + +:host(.in-item.radio-label-placement-stacked) .native-wrapper { + @include margin(null, null, $radio-item-label-margin-bottom, null); +} + /** * If no label text is placed into the slot * then the element should be hidden otherwise @@ -160,6 +166,17 @@ input { justify-content: end; } +// Radio Align +// -------------------------------------------------- + +:host(.radio-align-start) .radio-wrapper { + align-items: start; +} + +:host(.radio-align-center) .radio-wrapper { + align-items: center; +} + // Radio Label Placement - Start // ---------------------------------------------------------------- @@ -222,3 +239,22 @@ input { width: 100px; min-width: 100px; } + +// Radio Label Placement - Stacked +// ---------------------------------------------------------------- + +/** + * Label is on top of the radio. + */ +:host(.radio-label-placement-stacked) .radio-wrapper { + flex-direction: column; +} + +:host(.radio-label-placement-stacked) .label-text-wrapper { + /** + * The margin between the label and + * the radio should be on the bottom + * when the label sits on top. + */ + @include margin(null, 0, $form-control-label-margin, 0); +} diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx index d6618dcffe6..725f86081f2 100644 --- a/core/src/components/radio/radio.tsx +++ b/core/src/components/radio/radio.tsx @@ -84,8 +84,9 @@ export class Radio implements ComponentInterface { * `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. * `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). + * `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `align` property. */ - @Prop() labelPlacement: 'start' | 'end' | 'fixed' = 'start'; + @Prop() labelPlacement: 'start' | 'end' | 'fixed' | 'stacked' = 'start'; // TODO FW-3125: Remove the legacy property and implementation /** @@ -110,6 +111,13 @@ export class Radio implements ComponentInterface { */ @Prop() justify: 'start' | 'end' | 'space-between' = 'space-between'; + /** + * How to pack the label and control along the cross axis. + * `"start"`: The label and control will appear at the top of the container. + * `"center"`: The label and control will appear at the center of the container. + */ + @Prop() align: 'start' | 'center' = 'center'; + /** * Emitted when the styles change. * @internal @@ -250,7 +258,7 @@ export class Radio implements ComponentInterface { } private renderRadio() { - const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex } = this; + const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, align } = this; const mode = getIonMode(this); const inItem = hostContext('ion-item', el); @@ -265,6 +273,7 @@ export class Radio implements ComponentInterface { 'radio-checked': checked, 'radio-disabled': disabled, [`radio-justify-${justify}`]: true, + [`radio-align-${align}`]: true, [`radio-label-placement-${labelPlacement}`]: true, // Focus and active styling should not apply when the radio is in an item 'ion-activatable': !inItem, diff --git a/core/src/components/radio/test/item/index.html b/core/src/components/radio/test/item/index.html index 42235e41155..bf0f015345e 100644 --- a/core/src/components/radio/test/item/index.html +++ b/core/src/components/radio/test/item/index.html @@ -155,6 +155,31 @@

Justify Space Between

+

Placement Stacked

+
+
+

Align Start

+ + + + Enable Notifications + + + +
+ +
+

Align Center

+ + + + Enable Notifications + + + +
+
+

States

diff --git a/core/src/components/radio/test/item/radio.e2e.ts b/core/src/components/radio/test/item/radio.e2e.ts index 63fd8f6cb75..d49ad88ac2f 100644 --- a/core/src/components/radio/test/item/radio.e2e.ts +++ b/core/src/components/radio/test/item/radio.e2e.ts @@ -59,4 +59,23 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co expect(await list.screenshot()).toMatchSnapshot(screenshot(`radio-long-label-in-item`)); }); }); + + test.describe(title('radio: stacked label in item'), () => { + test('should render margins correctly when using stacked label in item', async ({ page }) => { + await page.setContent( + ` + + + + Enable Notifications + + + + `, + config + ); + const list = page.locator('ion-list'); + expect(await list.screenshot()).toMatchSnapshot(screenshot(`radio-stacked-label-in-item`)); + }); + }); }); diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..dcb5a8e57ec Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f36462dc96f Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..23484ce60ab Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio/test/label-placement/index.html b/core/src/components/radio/test/label-placement/index.html index ccc77dd8382..6e3bc982806 100644 --- a/core/src/components/radio/test/label-placement/index.html +++ b/core/src/components/radio/test/label-placement/index.html @@ -122,6 +122,23 @@

Justify Space Between

+ +

Placement Stacked

+
+
+

Align Start

+ + Enable Notifications + +
+ +
+

Align Center

+ + Enable Notifications + +
+
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts b/core/src/components/radio/test/label-placement/radio.e2e.ts index ad62842b310..e5d7693fde3 100644 --- a/core/src/components/radio/test/label-placement/radio.e2e.ts +++ b/core/src/components/radio/test/label-placement/radio.e2e.ts @@ -137,5 +137,35 @@ configs().forEach(({ title, screenshot, config }) => { expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-label-fixed-justify-space-between`)); }); }); + + test.describe('radio: stacked placement', () => { + test('should align the label to the start of the container in the stacked position', async ({ page }) => { + await page.setContent( + ` + + This is a long label + + `, + config + ); + + const radio = page.locator('ion-radio'); + expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-label-stacked-align-start`)); + }); + + test('should align the label to the center of the container in the stacked position', async ({ page }) => { + await page.setContent( + ` + + This is a long label + + `, + config + ); + + const radio = page.locator('ion-radio'); + expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-label-stacked-align-center`)); + }); + }); }); }); diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..56a8d8d76a1 Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..40afe9ca8c2 Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..eb0dc10c514 Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..f0c45cae1b0 Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..40afe9ca8c2 Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-rtl-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..eb0dc10c514 Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..3612ecef975 Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..bcec60d5208 Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..4c29bd41966 Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-rtl-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..44f6f661304 Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-rtl-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..bcec60d5208 Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-rtl-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..4c29bd41966 Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..ab009694dcd Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..5b1cd7323c9 Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..583d78de963 Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..ae0812273a0 Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b5840591a4c Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..720f955206e Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..45dd5620fdf Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..081aca65b66 Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..76e13ebd3f4 Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..e7b41480ec5 Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..a2924ac40f8 Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..20580e4d1d0 Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/range.ios.scss b/core/src/components/range/range.ios.scss index d1b57b17761..2b8e5ceb1d8 100644 --- a/core/src/components/range/range.ios.scss +++ b/core/src/components/range/range.ios.scss @@ -34,10 +34,31 @@ @include margin(0, 0, 0, 16px); } -:host(.range-has-pin) { +:host(.range-has-pin:not(.range-label-placement-stacked)) { + /** + * The pin should not overlap any elements that are + * above the range. By adding padding to the top of the + * range, it provides a buffer for the pin to move into + * when it is pressed. + * + * The padding is not included when the label is stacked + * because the pin is below the label. + * It still requires a buffer to prevent the pin from + * overlapping the range. The buffer is added to the + * bottom of the range label instead of the host. + */ @include padding($range-ios-padding-vertical + $range-ios-pin-font-size, null, null, null); } +:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper { + /** + * The pin should not overlap the stacked label. By adding + * margin to the bottom of the label, it provides a buffer + * for the pin to move into when it is pressed. + */ + @include margin(null, null, $range-ios-padding-vertical + $range-ios-pin-font-size, null); +} + .range-bar-active { bottom: 0; diff --git a/core/src/components/range/range.md.scss b/core/src/components/range/range.md.scss index 6fb2a4a9f8a..b5b534527a3 100644 --- a/core/src/components/range/range.md.scss +++ b/core/src/components/range/range.md.scss @@ -52,10 +52,31 @@ @include margin(0, 0, 0, 14px); } -:host(.range-has-pin) { +:host(.range-has-pin:not(.range-label-placement-stacked)) { + /** + * The pin should not overlap any elements that are + * above the range. By adding padding to the top of the + * range, it provides a buffer for the pin to move into + * when it is pressed. + * + * The padding is not included when the label is stacked + * because the pin is below the label. + * It still requires a buffer to prevent the pin from + * overlapping the range. The buffer is added to the + * bottom of the range label instead of the host. + */ @include padding($range-md-padding-vertical + $range-md-pin-font-size + $range-md-pin-padding-vertical, null, null, null); } +:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper { + /** + * The pin should not overlap the stacked label. By adding + * margin to the bottom of the label, it provides a buffer + * for the pin to move into when it is pressed. + */ + @include margin(null, null, $range-md-padding-vertical + $range-md-pin-font-size + $range-md-pin-padding-vertical, null); +} + .range-bar-active { bottom: 0; diff --git a/core/src/components/range/range.scss b/core/src/components/range/range.scss index 500b0a05660..1688660cc3f 100644 --- a/core/src/components/range/range.scss +++ b/core/src/components/range/range.scss @@ -308,3 +308,24 @@ min-width: 100px; max-width: 200px; } + +// Range Label Placement - Stacked +// ---------------------------------------------------------------- + +/** + * Label is on top of the range. + */ +:host(.range-label-placement-stacked) .range-wrapper { + flex-direction: column; + + align-items: normal; +} + +:host(.range-label-placement-stacked) .label-text-wrapper { + /** + * The margin between the label and + * the range should be on the bottom + * when the label sits on top. + */ + @include margin(null, 0, $form-control-label-margin, 0); +} diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx index 04bc1f07983..072e91e7ea6 100644 --- a/core/src/components/range/range.tsx +++ b/core/src/components/range/range.tsx @@ -228,8 +228,9 @@ export class Range implements ComponentInterface { * `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. * `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). + * `"stacked"`: The label will appear above the range regardless of the direction. The alignment of the label can be controlled with the `align` property. */ - @Prop() labelPlacement: 'start' | 'end' | 'fixed' = 'start'; + @Prop() labelPlacement: 'start' | 'end' | 'fixed' | 'stacked' = 'start'; /** * Set the `legacy` property to `true` to forcibly use the legacy form control markup. diff --git a/core/src/components/range/test/label/index.html b/core/src/components/range/test/label/index.html index c4c4b4c6b68..770eec0ff38 100644 --- a/core/src/components/range/test/label/index.html +++ b/core/src/components/range/test/label/index.html @@ -65,6 +65,12 @@

Placement Fixed

Temperature +
+

Placement Stacked

+ + Temperature + +

Label Property

@@ -81,6 +87,10 @@

Placement End

Placement Fixed

+
+

Placement Stacked

+ +

Slotted Items

@@ -109,6 +119,14 @@

Placement Fixed

+
+

Placement Stacked

+ + Temperature + + + +
diff --git a/core/src/components/range/test/label/range.e2e.ts b/core/src/components/range/test/label/range.e2e.ts index dac0fbc4430..c58d0db872d 100644 --- a/core/src/components/range/test/label/range.e2e.ts +++ b/core/src/components/range/test/label/range.e2e.ts @@ -58,6 +58,22 @@ configs().forEach(({ title, screenshot, config }) => { expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-no-items-fixed`)); }); + test('should render label above the range slider', async ({ page }) => { + await page.setContent( + ` +
+ + Volume + +
+ `, + config + ); + + const range = page.locator('#container'); + + expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-no-items-stacked`)); + }); }); test.describe('range: start and end items', () => { @@ -124,6 +140,22 @@ configs().forEach(({ title, screenshot, config }) => { expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-items-fixed`)); }); + test('should render label above the range slider', async ({ page }) => { + await page.setContent( + ` + + + + Volume + + `, + config + ); + + const range = page.locator('ion-range'); + + expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-items-stacked`)); + }); }); test.describe('range: label prop', () => { @@ -150,6 +182,21 @@ configs().forEach(({ title, screenshot, config }) => { expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-label-prop-fixed`)); }); + + test('should render label above the range slider', async ({ page }) => { + await page.setContent( + ` +
+ +
+ `, + config + ); + + const range = page.locator('#container'); + + expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-label-prop-stacked`)); + }); }); }); }); @@ -171,4 +218,28 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-label-truncate`)); }); }); + + test.describe(title('range: with pin'), () => { + test.fixme('should render pin below a stacked label', async ({ page }) => { + await page.setContent( + ` +
+ + Volume + +
+ `, + config + ); + + const container = page.locator('#container'); + const range = page.locator('ion-range'); + const knob = range.locator('.range-knob-handle'); + + // Force the pin to show + await knob.evaluate((el: HTMLElement) => el.classList.add('ion-focused')); + + expect(await container.screenshot()).toMatchSnapshot(screenshot(`range-stacked-pin`)); + }); + }); }); diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..d6c57814950 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..fafc74042cb Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ab7b17d8e5c Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..1f077b6b221 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..9216f2aebe2 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..4b176348d5f Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..c837e4da2db Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..cf2469b3e30 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ce937208897 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..38db504dab2 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..088b74ae2ee Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..cd1c46e4905 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..ab2cc24df1e Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..48ece92daba Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..9ca5c86a769 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..82343f5c4f8 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..0a9255fd2d2 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..57e4c5815d4 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..9d38a5c4862 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b8731e5ad24 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..824dbb466b0 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..6286d0da191 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..9ec8619f7d6 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..2675711d4b8 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..ab2cc24df1e Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..48ece92daba Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..9ca5c86a769 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..82343f5c4f8 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..0a9255fd2d2 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..57e4c5815d4 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..9d38a5c4862 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b8731e5ad24 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..824dbb466b0 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..6286d0da191 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..9ec8619f7d6 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..2675711d4b8 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-stacked-pin-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-stacked-pin-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..74a54ab8b71 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-stacked-pin-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-stacked-pin-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-stacked-pin-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..13a8581026c Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-stacked-pin-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-stacked-pin-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-stacked-pin-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..15f58c27f92 Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-stacked-pin-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/clear-on-edit/textarea.e2e.ts b/core/src/components/textarea/test/clear-on-edit/textarea.e2e.ts deleted file mode 100644 index f085f46ee8b..00000000000 --- a/core/src/components/textarea/test/clear-on-edit/textarea.e2e.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { expect } from '@playwright/test'; -import { test, configs } from '@utils/test/playwright'; - -configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { - test.describe(title('textarea: clearOnEdit'), () => { - test('should clear when typed into', async ({ page }) => { - await page.setContent( - ``, - config - ); - - const ionInput = await page.spyOnEvent('ionInput'); - - const textarea = page.locator('ion-textarea'); - await textarea.locator('textarea').type('h'); - - await ionInput.next(); - - await expect(textarea).toHaveJSProperty('value', 'h'); - }); - - test('should not clear when tab is pressed', async ({ page }) => { - await page.setContent( - ``, - config - ); - - const textarea = page.locator('ion-textarea'); - await textarea.locator('textarea').focus(); - - await page.keyboard.press('Tab'); - await page.waitForChanges(); - - await expect(textarea).toHaveJSProperty('value', 'abc'); - }); - }); -}); diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index e2bb7e1a57e..b49ad7cb9d3 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -434,7 +434,7 @@ export class Textarea implements ComponentInterface { /** * Check if we need to clear the text input if clearOnEdit is enabled */ - private checkClearOnEdit(ev: KeyboardEvent) { + private checkClearOnEdit(ev: Event) { if (!this.clearOnEdit) { return; } @@ -442,7 +442,7 @@ export class Textarea implements ComponentInterface { * Clear the textarea if the control has not been previously cleared * during focus. */ - if (!this.didTextareaClearOnEdit && this.hasValue() && ev.key !== 'Tab') { + if (!this.didTextareaClearOnEdit && this.hasValue()) { this.value = ''; this.emitInputChange(ev); } @@ -501,7 +501,7 @@ export class Textarea implements ComponentInterface { this.ionBlur.emit(ev); }; - private onKeyDown = (ev: KeyboardEvent) => { + private onKeyDown = (ev: Event) => { this.checkClearOnEdit(ev); }; diff --git a/core/src/components/toggle/test/item/index.html b/core/src/components/toggle/test/item/index.html index e954e7db11d..cbf492e2380 100644 --- a/core/src/components/toggle/test/item/index.html +++ b/core/src/components/toggle/test/item/index.html @@ -135,6 +135,27 @@

Justify Space Between

+

Placement Stacked

+
+
+

Align Start

+ + + Enable Notifications + + +
+ +
+

Align Center

+ + + Enable Notifications + + +
+
+

Multiline Label

diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts b/core/src/components/toggle/test/item/toggle.e2e.ts index d7651ae0ea8..a46c09ced6a 100644 --- a/core/src/components/toggle/test/item/toggle.e2e.ts +++ b/core/src/components/toggle/test/item/toggle.e2e.ts @@ -69,5 +69,24 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co const list = page.locator('ion-list'); expect(await list.screenshot()).toMatchSnapshot(screenshot(`toggle-long-label-in-item`)); }); + + test.describe(title('toggle: stacked label in item'), () => { + test('should render margins correctly when using stacked label in item', async ({ page }) => { + await page.setContent( + ` + + + + Enable Notifications + + + + `, + config + ); + const list = page.locator('ion-list'); + expect(await list.screenshot()).toMatchSnapshot(screenshot(`toggle-stacked-label-in-item`)); + }); + }); }); }); diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..038d77d315f Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..e37abf1dbbc Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..7bd1bb50cdd Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/label/index.html b/core/src/components/toggle/test/label/index.html index d7797fc9f71..4550113f754 100644 --- a/core/src/components/toggle/test/label/index.html +++ b/core/src/components/toggle/test/label/index.html @@ -102,6 +102,19 @@

Justify Space Between

Enable Notifications
+ +

Placement Stacked

+
+
+

Align Start

+ Enable Notifications +
+ +
+

Align Center

+ Enable Notifications +
+
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts b/core/src/components/toggle/test/label/toggle.e2e.ts index 1166477fcf0..f5984c1dfa7 100644 --- a/core/src/components/toggle/test/label/toggle.e2e.ts +++ b/core/src/components/toggle/test/label/toggle.e2e.ts @@ -126,4 +126,30 @@ configs().forEach(({ title, screenshot, config }) => { expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-label-fixed-justify-space-between`)); }); }); + + test.describe(title('toggle: stacked placement'), () => { + test('should align the label to the start of the container in the stacked position', async ({ page }) => { + await page.setContent( + ` + This is a long label + `, + config + ); + + const toggle = page.locator('ion-toggle'); + expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-label-stacked-align-start`)); + }); + + test('should align the label to the center of the container in the stacked position', async ({ page }) => { + await page.setContent( + ` + This is a long label + `, + config + ); + + const toggle = page.locator('ion-toggle'); + expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-label-stacked-align-center`)); + }); + }); }); diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..586b78039cc Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..9bc6663f5b7 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..a6390159ca5 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..0228d1ec1aa Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..038694a328c Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..2ef2d0b46e5 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..882cee4f319 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..5fed5eb61ef Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..a0745bc65f8 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..9e920a54e33 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..578638a2b70 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..815aa1c5fe1 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..49aa1b58642 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..794b26be7ba Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f8ad91a87fc Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..88f8d5e76dd Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..caeef73cbf8 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..189463ded11 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..ab562b70419 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..be40a287154 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f69fde5c310 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..1d92fe66932 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b50cc8d3c18 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..8279226208b Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.scss index ef10a951784..ec826c75da2 100644 --- a/core/src/components/toggle/toggle.scss +++ b/core/src/components/toggle/toggle.scss @@ -94,8 +94,6 @@ input { flex-grow: 1; - align-items: center; - height: inherit; transition: background-color 15ms linear; @@ -125,6 +123,14 @@ input { @include margin($toggle-item-label-margin-top, null, $toggle-item-label-margin-bottom, null); } +:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper { + @include margin($toggle-item-label-margin-top, null, $form-control-label-margin, null); +} + +:host(.in-item.toggle-label-placement-stacked) .native-wrapper { + @include margin(null, null, $toggle-item-label-margin-bottom, null); +} + /** * If no label text is placed into the slot * then the element should be hidden otherwise @@ -158,12 +164,24 @@ input { justify-content: end; } +// Toggle Align +// -------------------------------------------------- + + +:host(.toggle-align-start) .toggle-wrapper { + align-items: start; +} + +:host(.toggle-align-center) .toggle-wrapper { + align-items: center; +} + // Toggle Label Placement - Start // ---------------------------------------------------------------- /** * Label is on the left of the input in LTR and - * on the right in RTL. + * on the right in RTL.c */ :host(.toggle-label-placement-start) .toggle-wrapper { flex-direction: row; @@ -222,6 +240,25 @@ input { max-width: 200px; } +// Toggle Label Placement - Stacked +// ---------------------------------------------------------------- + +/** + * Label is on top of the toggle. + */ +:host(.toggle-label-placement-stacked) .toggle-wrapper { + flex-direction: column; +} + +:host(.toggle-label-placement-stacked) .label-text-wrapper { + /** + * The margin between the label and + * the toggle should be on the bottom + * when the label sits on top. + */ + @include margin(null, 0, $form-control-label-margin, 0); +} + // Toggle Background Track: Unchecked // -------------------------------------------------- diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx index bc5316e7ad3..011658d9fa5 100644 --- a/core/src/components/toggle/toggle.tsx +++ b/core/src/components/toggle/toggle.tsx @@ -90,8 +90,9 @@ export class Toggle implements ComponentInterface { * `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. * `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). + * `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `align` property. */ - @Prop() labelPlacement: 'start' | 'end' | 'fixed' = 'start'; + @Prop() labelPlacement: 'start' | 'end' | 'fixed' | 'stacked' = 'start'; /** * Set the `legacy` property to `true` to forcibly use the legacy form control markup. @@ -115,6 +116,13 @@ export class Toggle implements ComponentInterface { */ @Prop() justify: 'start' | 'end' | 'space-between' = 'space-between'; + /** + * How to pack the label and control along the cross axis. + * `"start"`: The label and control will appear at the top of the container. + * `"center"`: The label and control will appear at the center of the container. + */ + @Prop() align: 'start' | 'center' = 'center'; + /** * Emitted when the user switches the toggle on or off. Does not emit * when programmatically changing the value of the `checked` property. @@ -319,7 +327,7 @@ export class Toggle implements ComponentInterface { } private renderToggle() { - const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name } = this; + const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, align } = this; const mode = getIonMode(this); const value = this.getValue(); @@ -336,6 +344,7 @@ export class Toggle implements ComponentInterface { 'toggle-checked': checked, 'toggle-disabled': disabled, [`toggle-justify-${justify}`]: true, + [`toggle-align-${align}`]: true, [`toggle-label-placement-${labelPlacement}`]: true, [`toggle-${rtl}`]: true, })} diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 6e839b9d0a7..ea824c59143 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -3,14 +3,6 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -## [7.3.1](https://github.com/ionic-team/ionic-framework/compare/v7.3.0...v7.3.1) (2023-08-23) - -**Note:** Version bump only for package @ionic/docs - - - - - # [7.3.0](https://github.com/ionic-team/ionic-framework/compare/v7.2.4...v7.3.0) (2023-08-16) **Note:** Version bump only for package @ionic/docs diff --git a/docs/package-lock.json b/docs/package-lock.json index 368464d68f2..9aa4b113f67 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ionic/docs", - "version": "7.3.1", + "version": "7.3.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/docs", - "version": "7.3.1", + "version": "7.3.0", "license": "MIT" } } diff --git a/docs/package.json b/docs/package.json index f8ba02d5a59..a0f04f52b47 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/docs", - "version": "7.3.1", + "version": "7.3.0", "description": "Pre-packaged API documentation for the Ionic docs.", "main": "core.json", "types": "core.d.ts", diff --git a/lerna.json b/lerna.json index 7e0e1026f21..1585c6ac922 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ "docs", "packages/*" ], - "version": "7.3.1" + "version": "7.3.0" } diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md index e03e1b4a7a4..ec13f8471d0 100644 --- a/packages/angular-server/CHANGELOG.md +++ b/packages/angular-server/CHANGELOG.md @@ -3,14 +3,6 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -## [7.3.1](https://github.com/ionic-team/ionic-framework/compare/v7.3.0...v7.3.1) (2023-08-23) - -**Note:** Version bump only for package @ionic/angular-server - - - - - # [7.3.0](https://github.com/ionic-team/ionic-framework/compare/v7.2.4...v7.3.0) (2023-08-16) **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 8a33a755d7c..a3b4df6bc07 100644 --- a/packages/angular-server/package-lock.json +++ b/packages/angular-server/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/angular-server", - "version": "7.3.1", + "version": "7.3.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/angular-server", - "version": "7.3.1", + "version": "7.3.0", "license": "MIT", "dependencies": { - "@ionic/core": "^7.3.1" + "@ionic/core": "^7.3.0" }, "devDependencies": { "@angular-eslint/eslint-plugin": "^14.0.0", @@ -1060,19 +1060,19 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.1.tgz", - "integrity": "sha512-RdSJsFYx2oJ08duw+DMWVAfzjxlnA+o1saX5gOLSjP5SpwP7FqURFfXrFHIFN2vIKbeqUZTZjQwPHnrFsX04dQ==", + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.0.tgz", + "integrity": "sha512-DPHG0U44O4WcknXa+x3JR/G/5ySxqCS5S8w65PZUQBYA657L4zkaGOvZpObP1MtiBLj9kG7c6Ae6xgJjrU7tyQ==", "dependencies": { - "@stencil/core": "^4.1.0", + "@stencil/core": "^4.0.3", "ionicons": "7.1.0", "tslib": "^2.1.0" } }, "node_modules/@ionic/core/node_modules/@stencil/core": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", - "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.0.5.tgz", + "integrity": "sha512-0nZRvvhjjOKsQFGX0pKiDtOS/5IiL7HRxtLqpIxHAxXKLs9ZcomTsdOwl12m/qjx2AtQReOfP8+x8jLOBNMOIQ==", "bin": { "stencil": "bin/stencil" }, @@ -7342,19 +7342,19 @@ "dev": true }, "@ionic/core": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.1.tgz", - "integrity": "sha512-RdSJsFYx2oJ08duw+DMWVAfzjxlnA+o1saX5gOLSjP5SpwP7FqURFfXrFHIFN2vIKbeqUZTZjQwPHnrFsX04dQ==", + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.0.tgz", + "integrity": "sha512-DPHG0U44O4WcknXa+x3JR/G/5ySxqCS5S8w65PZUQBYA657L4zkaGOvZpObP1MtiBLj9kG7c6Ae6xgJjrU7tyQ==", "requires": { - "@stencil/core": "^4.1.0", + "@stencil/core": "^4.0.3", "ionicons": "7.1.0", "tslib": "^2.1.0" }, "dependencies": { "@stencil/core": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", - "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==" + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.0.5.tgz", + "integrity": "sha512-0nZRvvhjjOKsQFGX0pKiDtOS/5IiL7HRxtLqpIxHAxXKLs9ZcomTsdOwl12m/qjx2AtQReOfP8+x8jLOBNMOIQ==" } } }, diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json index b3be622d8f9..f1bc3d12032 100644 --- a/packages/angular-server/package.json +++ b/packages/angular-server/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular-server", - "version": "7.3.1", + "version": "7.3.0", "description": "Angular SSR Module for Ionic", "keywords": [ "ionic", @@ -61,6 +61,6 @@ }, "prettier": "@ionic/prettier-config", "dependencies": { - "@ionic/core": "^7.3.1" + "@ionic/core": "^7.3.0" } } diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md index aa820675a75..fa82b32572b 100644 --- a/packages/angular/CHANGELOG.md +++ b/packages/angular/CHANGELOG.md @@ -3,17 +3,6 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -## [7.3.1](https://github.com/ionic-team/ionic-framework/compare/v7.3.0...v7.3.1) (2023-08-23) - - -### Bug Fixes - -* **angular:** ionTabsWillChange is fired before tab activation ([#27991](https://github.com/ionic-team/ionic-framework/issues/27991)) ([bbfb8f8](https://github.com/ionic-team/ionic-framework/commit/bbfb8f81a61475d7e73b63743db5d6a0cd979d21)), closes [#27212](https://github.com/ionic-team/ionic-framework/issues/27212) - - - - - # [7.3.0](https://github.com/ionic-team/ionic-framework/compare/v7.2.4...v7.3.0) (2023-08-16) **Note:** Version bump only for package @ionic/angular diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json index 0770143aebf..76bfb1895e6 100644 --- a/packages/angular/package-lock.json +++ b/packages/angular/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/angular", - "version": "7.3.1", + "version": "7.3.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/angular", - "version": "7.3.1", + "version": "7.3.0", "license": "MIT", "dependencies": { - "@ionic/core": "^7.3.1", + "@ionic/core": "^7.3.0", "ionicons": "^7.0.0", "jsonc-parser": "^3.0.0", "tslib": "^2.3.0" @@ -1227,19 +1227,19 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.1.tgz", - "integrity": "sha512-RdSJsFYx2oJ08duw+DMWVAfzjxlnA+o1saX5gOLSjP5SpwP7FqURFfXrFHIFN2vIKbeqUZTZjQwPHnrFsX04dQ==", + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.0.tgz", + "integrity": "sha512-DPHG0U44O4WcknXa+x3JR/G/5ySxqCS5S8w65PZUQBYA657L4zkaGOvZpObP1MtiBLj9kG7c6Ae6xgJjrU7tyQ==", "dependencies": { - "@stencil/core": "^4.1.0", + "@stencil/core": "^4.0.3", "ionicons": "7.1.0", "tslib": "^2.1.0" } }, "node_modules/@ionic/core/node_modules/@stencil/core": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", - "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.0.5.tgz", + "integrity": "sha512-0nZRvvhjjOKsQFGX0pKiDtOS/5IiL7HRxtLqpIxHAxXKLs9ZcomTsdOwl12m/qjx2AtQReOfP8+x8jLOBNMOIQ==", "bin": { "stencil": "bin/stencil" }, @@ -8104,19 +8104,19 @@ "dev": true }, "@ionic/core": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.1.tgz", - "integrity": "sha512-RdSJsFYx2oJ08duw+DMWVAfzjxlnA+o1saX5gOLSjP5SpwP7FqURFfXrFHIFN2vIKbeqUZTZjQwPHnrFsX04dQ==", + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.0.tgz", + "integrity": "sha512-DPHG0U44O4WcknXa+x3JR/G/5ySxqCS5S8w65PZUQBYA657L4zkaGOvZpObP1MtiBLj9kG7c6Ae6xgJjrU7tyQ==", "requires": { - "@stencil/core": "^4.1.0", + "@stencil/core": "^4.0.3", "ionicons": "7.1.0", "tslib": "^2.1.0" }, "dependencies": { "@stencil/core": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", - "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==" + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.0.5.tgz", + "integrity": "sha512-0nZRvvhjjOKsQFGX0pKiDtOS/5IiL7HRxtLqpIxHAxXKLs9ZcomTsdOwl12m/qjx2AtQReOfP8+x8jLOBNMOIQ==" } } }, diff --git a/packages/angular/package.json b/packages/angular/package.json index 7841d9e1249..ec8c10144fb 100644 --- a/packages/angular/package.json +++ b/packages/angular/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular", - "version": "7.3.1", + "version": "7.3.0", "description": "Angular specific wrappers for @ionic/core", "keywords": [ "ionic", @@ -47,7 +47,7 @@ } }, "dependencies": { - "@ionic/core": "^7.3.1", + "@ionic/core": "^7.3.0", "ionicons": "^7.0.0", "jsonc-parser": "^3.0.0", "tslib": "^2.3.0" diff --git a/packages/angular/src/directives/navigation/ion-router-outlet.ts b/packages/angular/src/directives/navigation/ion-router-outlet.ts index 118c2fd7b69..c54eaa17f3e 100644 --- a/packages/angular/src/directives/navigation/ion-router-outlet.ts +++ b/packages/angular/src/directives/navigation/ion-router-outlet.ts @@ -30,7 +30,7 @@ import { Config } from '../../providers/config'; import { NavController } from '../../providers/nav-controller'; import { StackController } from './stack-controller'; -import { RouteView, StackDidChangeEvent, StackWillChangeEvent, getUrl, isTabSwitch } from './stack-utils'; +import { RouteView, getUrl } from './stack-utils'; // TODO(FW-2827): types @@ -66,11 +66,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit { */ @Input() name = PRIMARY_OUTLET; - /** @internal */ - @Output() stackWillChange = new EventEmitter(); - /** @internal */ - @Output() stackDidChange = new EventEmitter(); - + @Output() stackEvents = new EventEmitter(); // eslint-disable-next-line @angular-eslint/no-output-rename @Output('activate') activateEvents = new EventEmitter(); // eslint-disable-next-line @angular-eslint/no-output-rename @@ -308,16 +304,9 @@ export class IonRouterOutlet implements OnDestroy, OnInit { */ this.navCtrl.setTopOutlet(this); - const leavingView = this.stackCtrl.getActiveView(); - - this.stackWillChange.emit({ - enteringView, - tabSwitch: isTabSwitch(enteringView, leavingView), - }); - this.stackCtrl.setActive(enteringView).then((data) => { this.activateEvents.emit(cmpRef.instance); - this.stackDidChange.emit(data); + this.stackEvents.emit(data); }); } diff --git a/packages/angular/src/directives/navigation/ion-tabs.ts b/packages/angular/src/directives/navigation/ion-tabs.ts index 08ce66d36fc..1fa8965218b 100644 --- a/packages/angular/src/directives/navigation/ion-tabs.ts +++ b/packages/angular/src/directives/navigation/ion-tabs.ts @@ -16,19 +16,14 @@ import { NavController } from '../../providers/nav-controller'; import { IonTabBar } from '../proxies'; import { IonRouterOutlet } from './ion-router-outlet'; -import { StackDidChangeEvent, StackWillChangeEvent } from './stack-utils'; +import { StackEvent } from './stack-utils'; @Component({ selector: 'ion-tabs', template: `
- +
`, @@ -67,13 +62,7 @@ export class IonTabs implements AfterContentInit, AfterContentChecked { @ContentChild(IonTabBar, { static: false }) tabBar: IonTabBar | undefined; @ContentChildren(IonTabBar) tabBars: QueryList; - /** - * Emitted before the tab view is changed. - */ @Output() ionTabsWillChange = new EventEmitter<{ tab: string }>(); - /** - * Emitted after the tab view is changed. - */ @Output() ionTabsDidChange = new EventEmitter<{ tab: string }>(); private tabBarSlot = 'bottom'; @@ -91,19 +80,10 @@ export class IonTabs implements AfterContentInit, AfterContentChecked { /** * @internal */ - onStackWillChange({ enteringView, tabSwitch }: StackWillChangeEvent): void { - const stackId = enteringView.stackId; - if (tabSwitch && stackId !== undefined) { + onPageSelected(detail: StackEvent): void { + const stackId = detail.enteringView.stackId; + if (detail.tabSwitch && stackId !== undefined) { this.ionTabsWillChange.emit({ tab: stackId }); - } - } - - /** - * @internal - */ - onStackDidChange({ enteringView, tabSwitch }: StackDidChangeEvent): void { - const stackId = enteringView.stackId; - if (tabSwitch && stackId !== undefined) { if (this.tabBar) { this.tabBar.selectedTab = stackId; } diff --git a/packages/angular/src/directives/navigation/stack-controller.ts b/packages/angular/src/directives/navigation/stack-controller.ts index 673ff34d020..93520c0a667 100644 --- a/packages/angular/src/directives/navigation/stack-controller.ts +++ b/packages/angular/src/directives/navigation/stack-controller.ts @@ -8,7 +8,7 @@ import { NavController } from '../../providers/nav-controller'; import { RouteView, - StackDidChangeEvent, + StackEvent, computeStackId, destroyView, getUrl, @@ -61,7 +61,7 @@ export class StackController { return view; } - setActive(enteringView: RouteView): Promise { + setActive(enteringView: RouteView): Promise { const consumeResult = this.navCtrl.consumeTransition(); let { direction, animation, animationBuilder } = consumeResult; const leavingView = this.activeView; @@ -224,13 +224,6 @@ export class StackController { return this.activeView ? this.activeView.stackId : undefined; } - /** - * @internal - */ - getActiveView(): RouteView | undefined { - return this.activeView; - } - hasRunningTask(): boolean { return this.runningTask !== undefined; } diff --git a/packages/angular/src/directives/navigation/stack-utils.ts b/packages/angular/src/directives/navigation/stack-utils.ts index dda4ecac7bd..ae33e03ce7a 100644 --- a/packages/angular/src/directives/navigation/stack-utils.ts +++ b/packages/angular/src/directives/navigation/stack-utils.ts @@ -79,23 +79,10 @@ export const destroyView = (view: RouteView | undefined): void => { } }; -export interface StackWillChangeEvent { - enteringView: RouteView; - /** - * `true` if the event is trigged as a result of a switch - * between tab navigation stacks. - */ - tabSwitch: boolean; -} - -export interface StackDidChangeEvent { +export interface StackEvent { enteringView: RouteView; direction: RouterDirection; animation: NavDirection | undefined; - /** - * `true` if the event is trigged as a result of a switch - * between tab navigation stacks. - */ tabSwitch: boolean; } diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index 7429a4cc60d..e2b98579334 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -529,14 +529,14 @@ export declare interface IonCardTitle extends Components.IonCardTitle {} @ProxyCmp({ - inputs: ['checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'] + inputs: ['align', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'] }) @Component({ selector: 'ion-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'], + inputs: ['align', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'], }) export class IonCheckbox { protected el: HTMLElement; @@ -1558,14 +1558,14 @@ export declare interface IonProgressBar extends Components.IonProgressBar {} @ProxyCmp({ - inputs: ['color', 'disabled', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'] + inputs: ['align', 'color', 'disabled', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'] }) @Component({ selector: 'ion-radio', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'disabled', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'], + inputs: ['align', 'color', 'disabled', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'], }) export class IonRadio { protected el: HTMLElement; @@ -2319,14 +2319,14 @@ Shorthand for ionToastDidDismiss. @ProxyCmp({ - inputs: ['checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'] + inputs: ['align', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'] }) @Component({ selector: 'ion-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'], + inputs: ['align', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'], }) export class IonToggle { protected el: HTMLElement; diff --git a/packages/angular/src/directives/validators/index.ts b/packages/angular/src/directives/validators/index.ts deleted file mode 100644 index 50edda4ec57..00000000000 --- a/packages/angular/src/directives/validators/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './max-validator'; -export * from './min-validator'; diff --git a/packages/angular/src/directives/validators/max-validator.ts b/packages/angular/src/directives/validators/max-validator.ts deleted file mode 100644 index be316f3dcaa..00000000000 --- a/packages/angular/src/directives/validators/max-validator.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Directive, forwardRef, Provider } from '@angular/core'; -import { MaxValidator, NG_VALIDATORS } from '@angular/forms'; - -/** - * @description - * Provider which adds `MaxValidator` to the `NG_VALIDATORS` multi-provider list. - */ -export const ION_MAX_VALIDATOR: Provider = { - provide: NG_VALIDATORS, - useExisting: forwardRef(() => IonMaxValidator), - multi: true, -}; - -@Directive({ - selector: - 'ion-input[type=number][max][formControlName],ion-input[type=number][max][formControl],ion-input[type=number][max][ngModel]', - providers: [ION_MAX_VALIDATOR], - // eslint-disable-next-line @angular-eslint/no-host-metadata-property - host: { '[attr.max]': '_enabled ? max : null' }, -}) -// eslint-disable-next-line @angular-eslint/directive-class-suffix -export class IonMaxValidator extends MaxValidator {} diff --git a/packages/angular/src/directives/validators/min-validator.ts b/packages/angular/src/directives/validators/min-validator.ts deleted file mode 100644 index bce1f0b0663..00000000000 --- a/packages/angular/src/directives/validators/min-validator.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Directive, forwardRef, Provider } from '@angular/core'; -import { MinValidator, NG_VALIDATORS } from '@angular/forms'; - -/** - * @description - * Provider which adds `MinValidator` to the `NG_VALIDATORS` multi-provider list. - */ -export const ION_MIN_VALIDATOR: Provider = { - provide: NG_VALIDATORS, - useExisting: forwardRef(() => IonMinValidator), - multi: true, -}; - -@Directive({ - selector: - 'ion-input[type=number][min][formControlName],ion-input[type=number][min][formControl],ion-input[type=number][min][ngModel]', - providers: [ION_MIN_VALIDATOR], - // eslint-disable-next-line @angular-eslint/no-host-metadata-property - host: { '[attr.min]': '_enabled ? min : null' }, -}) -// eslint-disable-next-line @angular-eslint/directive-class-suffix -export class IonMinValidator extends MinValidator {} diff --git a/packages/angular/src/index.ts b/packages/angular/src/index.ts index fb0daa2a4dc..b92167e481a 100644 --- a/packages/angular/src/index.ts +++ b/packages/angular/src/index.ts @@ -17,7 +17,6 @@ export { NavParams } from './directives/navigation/nav-params'; export { IonModal } from './directives/overlays/modal'; export { IonPopover } from './directives/overlays/popover'; export * from './directives/proxies'; -export * from './directives/validators'; // PROVIDERS export { AngularDelegate } from './providers/angular-delegate'; diff --git a/packages/angular/src/ionic-module.ts b/packages/angular/src/ionic-module.ts index b8c7f5c2279..32ad4eaa4de 100644 --- a/packages/angular/src/ionic-module.ts +++ b/packages/angular/src/ionic-module.ts @@ -22,7 +22,6 @@ import { import { IonModal } from './directives/overlays/modal'; import { IonPopover } from './directives/overlays/popover'; import { DIRECTIVES } from './directives/proxies-list'; -import { IonMaxValidator, IonMinValidator } from './directives/validators'; import { AngularDelegate } from './providers/angular-delegate'; import { ConfigToken } from './providers/config'; import { ModalController } from './providers/modal-controller'; @@ -50,10 +49,6 @@ const DECLARATIONS = [ NavDelegate, RouterLinkDelegateDirective, RouterLinkWithHrefDelegateDirective, - - // validators - IonMinValidator, - IonMaxValidator, ]; @NgModule({ diff --git a/packages/angular/test/base/e2e/src/form.spec.ts b/packages/angular/test/base/e2e/src/form.spec.ts index 10d5be71328..39995f2f5a2 100644 --- a/packages/angular/test/base/e2e/src/form.spec.ts +++ b/packages/angular/test/base/e2e/src/form.spec.ts @@ -30,8 +30,6 @@ describe('Form', () => { toggle: false, input: '', input2: 'Default Value', - inputMin: 1, - inputMax: 1, checkbox: false }); }); @@ -57,8 +55,6 @@ describe('Form', () => { toggle: false, input: 'Some value', input2: 'Default Value', - inputMin: 1, - inputMax: 1, checkbox: false }); }); @@ -71,8 +67,6 @@ describe('Form', () => { toggle: true, input: '', input2: 'Default Value', - inputMin: 1, - inputMax: 1, checkbox: false }); }); @@ -85,8 +79,6 @@ describe('Form', () => { toggle: false, input: '', input2: 'Default Value', - inputMin: 1, - inputMax: 1, checkbox: true }); }); @@ -107,8 +99,6 @@ describe('Form', () => { toggle: true, input: '', input2: 'Default Value', - inputMin: 1, - inputMax: 1, checkbox: false }); cy.get('ion-checkbox').click(); @@ -118,39 +108,10 @@ describe('Form', () => { toggle: true, input: '', input2: 'Default Value', - inputMin: 1, - inputMax: 1, checkbox: true }); }); }); - - describe('validators', () => { - - it('ion-input should error with min set', () => { - const control = cy.get('form ion-input[formControlName="inputMin"]'); - - control.should('have.class', 'ng-valid'); - - control.type('{backspace}0'); - - control.within(() => cy.get('input').blur()); - - control.should('have.class', 'ng-invalid'); - }); - - it('ion-input should error with max set', () => { - const control = cy.get('form ion-input[formControlName="inputMax"]'); - - control.should('have.class', 'ng-valid'); - - control.type('2'); - control.within(() => cy.get('input').blur()); - - control.should('have.class', 'ng-invalid'); - }); - - }); }); function testStatus(status) { diff --git a/packages/angular/test/base/src/app/form/form.component.html b/packages/angular/test/base/src/app/form/form.component.html index f5891cb19ff..4ba9b9621fa 100644 --- a/packages/angular/test/base/src/app/form/form.component.html +++ b/packages/angular/test/base/src/app/form/form.component.html @@ -1,12 +1,15 @@ - Forms test + + Forms test +
+ DateTime @@ -26,16 +29,13 @@ - Toggle + + Toggle + - + Set Input Touched @@ -45,20 +45,11 @@ - Checkbox - - - - Min - - 
errors: {{ profileForm.controls['inputMin'].errors | json }}
+ + Checkbox + - - Max - - 
errors: {{ profileForm.controls['inputMax'].errors | json }}
-

Form Status: {{ profileForm.status }} @@ -67,15 +58,18 @@ Form value: {{ profileForm.value | json }}

- Form Submit: {{ submitted }} + Form Submit: {{submitted}}

Mark all as touched Submit +
- Outside form - {{ outsideToggle.value }} + + Outside form + + {{outsideToggle.value}}

diff --git a/packages/angular/test/base/src/app/form/form.component.ts b/packages/angular/test/base/src/app/form/form.component.ts index 131237632c0..ec10f31cbb3 100644 --- a/packages/angular/test/base/src/app/form/form.component.ts +++ b/packages/angular/test/base/src/app/form/form.component.ts @@ -18,8 +18,6 @@ export class FormComponent { toggle: [false], input: ['', Validators.required], input2: ['Default Value'], - inputMin: [1, Validators.min(1)], - inputMax: [1, Validators.max(1)], checkbox: [false] }, { updateOn: typeof (window as any) !== 'undefined' && window.location.hash === '#blur' ? 'blur' : 'change' diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md index d64e47ef421..de6131b3254 100644 --- a/packages/react-router/CHANGELOG.md +++ b/packages/react-router/CHANGELOG.md @@ -3,14 +3,6 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -## [7.3.1](https://github.com/ionic-team/ionic-framework/compare/v7.3.0...v7.3.1) (2023-08-23) - -**Note:** Version bump only for package @ionic/react-router - - - - - # [7.3.0](https://github.com/ionic-team/ionic-framework/compare/v7.2.4...v7.3.0) (2023-08-16) **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 12b7a184ad5..e48d53a46f4 100644 --- a/packages/react-router/package-lock.json +++ b/packages/react-router/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/react-router", - "version": "7.3.1", + "version": "7.3.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/react-router", - "version": "7.3.1", + "version": "7.3.0", "license": "MIT", "dependencies": { - "@ionic/react": "^7.3.1", + "@ionic/react": "^7.3.0", "tslib": "*" }, "devDependencies": { @@ -205,11 +205,11 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.1.tgz", - "integrity": "sha512-RdSJsFYx2oJ08duw+DMWVAfzjxlnA+o1saX5gOLSjP5SpwP7FqURFfXrFHIFN2vIKbeqUZTZjQwPHnrFsX04dQ==", + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.0.tgz", + "integrity": "sha512-DPHG0U44O4WcknXa+x3JR/G/5ySxqCS5S8w65PZUQBYA657L4zkaGOvZpObP1MtiBLj9kG7c6Ae6xgJjrU7tyQ==", "dependencies": { - "@stencil/core": "^4.1.0", + "@stencil/core": "^4.0.3", "ionicons": "7.1.0", "tslib": "^2.1.0" } @@ -401,11 +401,11 @@ } }, "node_modules/@ionic/react": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.3.1.tgz", - "integrity": "sha512-X1n81R85mprFqwqNiISiqrzYWbMJm0chPxJZkVOzFwuWG7fKDKY1vigNvm5eI/lOTbfC2xjJZOYwuHAxHi3BoQ==", + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.3.0.tgz", + "integrity": "sha512-7fBlCpCX1QT18v1BwSh41d1KQpMLLWtUTr7RmxbQi1QhGxWbqkMNPK9a6Dr4Z1sYQI7J75o6biWtNmAqCF370g==", "dependencies": { - "@ionic/core": "7.3.1", + "@ionic/core": "7.3.0", "ionicons": "^7.0.0", "tslib": "*" }, @@ -486,9 +486,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", - "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.0.5.tgz", + "integrity": "sha512-0nZRvvhjjOKsQFGX0pKiDtOS/5IiL7HRxtLqpIxHAxXKLs9ZcomTsdOwl12m/qjx2AtQReOfP8+x8jLOBNMOIQ==", "bin": { "stencil": "bin/stencil" }, @@ -3663,11 +3663,11 @@ "dev": true }, "@ionic/core": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.1.tgz", - "integrity": "sha512-RdSJsFYx2oJ08duw+DMWVAfzjxlnA+o1saX5gOLSjP5SpwP7FqURFfXrFHIFN2vIKbeqUZTZjQwPHnrFsX04dQ==", + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.0.tgz", + "integrity": "sha512-DPHG0U44O4WcknXa+x3JR/G/5ySxqCS5S8w65PZUQBYA657L4zkaGOvZpObP1MtiBLj9kG7c6Ae6xgJjrU7tyQ==", "requires": { - "@stencil/core": "^4.1.0", + "@stencil/core": "^4.0.3", "ionicons": "7.1.0", "tslib": "^2.1.0" }, @@ -3786,11 +3786,11 @@ "requires": {} }, "@ionic/react": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.3.1.tgz", - "integrity": "sha512-X1n81R85mprFqwqNiISiqrzYWbMJm0chPxJZkVOzFwuWG7fKDKY1vigNvm5eI/lOTbfC2xjJZOYwuHAxHi3BoQ==", + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.3.0.tgz", + "integrity": "sha512-7fBlCpCX1QT18v1BwSh41d1KQpMLLWtUTr7RmxbQi1QhGxWbqkMNPK9a6Dr4Z1sYQI7J75o6biWtNmAqCF370g==", "requires": { - "@ionic/core": "7.3.1", + "@ionic/core": "7.3.0", "ionicons": "^7.0.0", "tslib": "*" } @@ -3844,9 +3844,9 @@ } }, "@stencil/core": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", - "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==" + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.0.5.tgz", + "integrity": "sha512-0nZRvvhjjOKsQFGX0pKiDtOS/5IiL7HRxtLqpIxHAxXKLs9ZcomTsdOwl12m/qjx2AtQReOfP8+x8jLOBNMOIQ==" }, "@types/estree": { "version": "0.0.39", diff --git a/packages/react-router/package.json b/packages/react-router/package.json index a77ca009bcf..789a353ea47 100644 --- a/packages/react-router/package.json +++ b/packages/react-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react-router", - "version": "7.3.1", + "version": "7.3.0", "description": "React Router wrapper for @ionic/react", "keywords": [ "ionic", @@ -37,7 +37,7 @@ "dist/" ], "dependencies": { - "@ionic/react": "^7.3.1", + "@ionic/react": "^7.3.0", "tslib": "*" }, "peerDependencies": { diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 22d6d0360ba..369f40dfbc1 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -3,17 +3,6 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -## [7.3.1](https://github.com/ionic-team/ionic-framework/compare/v7.3.0...v7.3.1) (2023-08-23) - - -### Bug Fixes - -* **react:** avoid multiple invocations of onDidDismiss and onWillPresent ([#28020](https://github.com/ionic-team/ionic-framework/issues/28020)) ([0ac3df3](https://github.com/ionic-team/ionic-framework/commit/0ac3df3f378bdefc3a927adc798ebd9ec7a54fee)), closes [#28010](https://github.com/ionic-team/ionic-framework/issues/28010) - - - - - # [7.3.0](https://github.com/ionic-team/ionic-framework/compare/v7.2.4...v7.3.0) (2023-08-16) **Note:** Version bump only for package @ionic/react diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json index 66c48107a27..52088dc7300 100644 --- a/packages/react/package-lock.json +++ b/packages/react/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/react", - "version": "7.3.1", + "version": "7.3.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/react", - "version": "7.3.1", + "version": "7.3.0", "license": "MIT", "dependencies": { - "@ionic/core": "^7.3.1", + "@ionic/core": "^7.3.0", "ionicons": "^7.0.0", "tslib": "*" }, @@ -697,19 +697,19 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.1.tgz", - "integrity": "sha512-RdSJsFYx2oJ08duw+DMWVAfzjxlnA+o1saX5gOLSjP5SpwP7FqURFfXrFHIFN2vIKbeqUZTZjQwPHnrFsX04dQ==", + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.0.tgz", + "integrity": "sha512-DPHG0U44O4WcknXa+x3JR/G/5ySxqCS5S8w65PZUQBYA657L4zkaGOvZpObP1MtiBLj9kG7c6Ae6xgJjrU7tyQ==", "dependencies": { - "@stencil/core": "^4.1.0", + "@stencil/core": "^4.0.3", "ionicons": "7.1.0", "tslib": "^2.1.0" } }, "node_modules/@ionic/core/node_modules/@stencil/core": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", - "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.0.5.tgz", + "integrity": "sha512-0nZRvvhjjOKsQFGX0pKiDtOS/5IiL7HRxtLqpIxHAxXKLs9ZcomTsdOwl12m/qjx2AtQReOfP8+x8jLOBNMOIQ==", "bin": { "stencil": "bin/stencil" }, @@ -11778,19 +11778,19 @@ "dev": true }, "@ionic/core": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.1.tgz", - "integrity": "sha512-RdSJsFYx2oJ08duw+DMWVAfzjxlnA+o1saX5gOLSjP5SpwP7FqURFfXrFHIFN2vIKbeqUZTZjQwPHnrFsX04dQ==", + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.0.tgz", + "integrity": "sha512-DPHG0U44O4WcknXa+x3JR/G/5ySxqCS5S8w65PZUQBYA657L4zkaGOvZpObP1MtiBLj9kG7c6Ae6xgJjrU7tyQ==", "requires": { - "@stencil/core": "^4.1.0", + "@stencil/core": "^4.0.3", "ionicons": "7.1.0", "tslib": "^2.1.0" }, "dependencies": { "@stencil/core": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", - "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==" + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.0.5.tgz", + "integrity": "sha512-0nZRvvhjjOKsQFGX0pKiDtOS/5IiL7HRxtLqpIxHAxXKLs9ZcomTsdOwl12m/qjx2AtQReOfP8+x8jLOBNMOIQ==" } } }, diff --git a/packages/react/package.json b/packages/react/package.json index 90edc60d4e9..de7ead19b2a 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react", - "version": "7.3.1", + "version": "7.3.0", "description": "React specific wrapper for @ionic/core", "keywords": [ "ionic", @@ -41,7 +41,7 @@ "css/" ], "dependencies": { - "@ionic/core": "^7.3.1", + "@ionic/core": "^7.3.0", "ionicons": "^7.0.0", "tslib": "*" }, diff --git a/packages/react/scripts/sync.sh b/packages/react/scripts/sync.sh index 2c2e4a58173..1675071ac07 100644 --- a/packages/react/scripts/sync.sh +++ b/packages/react/scripts/sync.sh @@ -2,11 +2,8 @@ set -e -# Delete old packages -rm -f *.tgz - -# Pack @ionic/core -npm pack ../../core - -# Install Dependencies -npm install *.tgz --no-save +# Copy core dist +rm -rf node_modules/@ionic/core/dist node_modules/@ionic/core/components +cp -a ../../core/dist node_modules/@ionic/core/dist +cp -a ../../core/components node_modules/@ionic/core/components +cp -a ../../core/package.json node_modules/@ionic/core/package.json diff --git a/packages/react/src/components/createInlineOverlayComponent.tsx b/packages/react/src/components/createInlineOverlayComponent.tsx index 65f1711cbb7..38679e85150 100644 --- a/packages/react/src/components/createInlineOverlayComponent.tsx +++ b/packages/react/src/components/createInlineOverlayComponent.tsx @@ -63,14 +63,7 @@ export const createInlineOverlayComponent = ( componentDidUpdate(prevProps: IonicReactInternalProps) { const node = this.ref.current! as HTMLElement; - /** - * onDidDismiss and onWillPresent have manual implementations that - * will invoke the original handler. We need to filter those out - * so they don't get attached twice and called twice. - */ - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { onDidDismiss, onWillPresent, ...cProps } = this.props; - attachProps(node, cProps, prevProps); + attachProps(node, this.props, prevProps); } componentWillUnmount() { diff --git a/packages/react/test/base/src/pages/overlay-components/ActionSheetComponent.tsx b/packages/react/test/base/src/pages/overlay-components/ActionSheetComponent.tsx index b7efc95b6f1..0c67f13e59e 100644 --- a/packages/react/test/base/src/pages/overlay-components/ActionSheetComponent.tsx +++ b/packages/react/test/base/src/pages/overlay-components/ActionSheetComponent.tsx @@ -1,11 +1,10 @@ +import React from 'react'; import { IonButton, IonContent, IonPage, IonActionSheet } from '@ionic/react'; -import React, { useState } from 'react'; +import { useState } from 'react'; const ActionSheetComponent: React.FC = () => { const [message, setMessage] = useState(''); const [show, setShow] = useState(false); - const [willPresentCount, setWillPresentCount] = useState(0); - const [didDismissCount, setDidDismissCount] = useState(0); return ( @@ -27,13 +26,7 @@ const ActionSheetComponent: React.FC = () => { }, ]} header="Action Sheet" - onWillPresent={() => { - setWillPresentCount(willPresentCount + 1); - }} - onDidDismiss={() => { - setDidDismissCount(didDismissCount + 1); - setShow(false); - }} + onDidDismiss={() => setShow(false)} /> setShow(true)}> Show ActionSheet @@ -48,8 +41,6 @@ const ActionSheetComponent: React.FC = () => { Show ActionSheet, hide after 250 mss

{message}
-
onWillPresent count: {willPresentCount}
-
onDidDismiss count: {didDismissCount}
); diff --git a/packages/react/test/base/tests/e2e/specs/overlay-components/IonActionSheet.cy.ts b/packages/react/test/base/tests/e2e/specs/overlay-components/IonActionSheet.cy.ts index bb5bf412089..07a91f4e454 100644 --- a/packages/react/test/base/tests/e2e/specs/overlay-components/IonActionSheet.cy.ts +++ b/packages/react/test/base/tests/e2e/specs/overlay-components/IonActionSheet.cy.ts @@ -17,19 +17,11 @@ describe('IonActionSheet', () => { }); it('display action and call dismiss to close it', () => { - cy.get('ion-content').contains('onWillPresent count: 0'); - cy.get('ion-content').contains('onDidDismiss count: 0'); - - // show action sheet + //show action sheet cy.get('ion-button').contains('Show ActionSheet, hide after 250 ms').click(); cy.get('ion-action-sheet').contains('Action Sheet'); - // verify action sheet is hidden + //verify action sheet is hidden cy.get('ion-action-sheet').should('not.be.visible'); - - // verify lifecycle events are called once - cy.get('ion-content').contains('onWillPresent count: 1'); - cy.get('ion-content').contains('onDidDismiss count: 0'); }); - }); diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md index 119369d972e..4b1c3916c13 100644 --- a/packages/vue-router/CHANGELOG.md +++ b/packages/vue-router/CHANGELOG.md @@ -3,14 +3,6 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -## [7.3.1](https://github.com/ionic-team/ionic-framework/compare/v7.3.0...v7.3.1) (2023-08-23) - -**Note:** Version bump only for package @ionic/vue-router - - - - - # [7.3.0](https://github.com/ionic-team/ionic-framework/compare/v7.2.4...v7.3.0) (2023-08-16) **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 59701de5cdc..9cd308af353 100644 --- a/packages/vue-router/package-lock.json +++ b/packages/vue-router/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/vue-router", - "version": "7.3.1", + "version": "7.3.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/vue-router", - "version": "7.3.1", + "version": "7.3.0", "license": "MIT", "dependencies": { - "@ionic/vue": "^7.3.1" + "@ionic/vue": "^7.3.0" }, "devDependencies": { "@ionic/eslint-config": "^0.3.0", @@ -660,11 +660,11 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.1.tgz", - "integrity": "sha512-RdSJsFYx2oJ08duw+DMWVAfzjxlnA+o1saX5gOLSjP5SpwP7FqURFfXrFHIFN2vIKbeqUZTZjQwPHnrFsX04dQ==", + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.0.tgz", + "integrity": "sha512-DPHG0U44O4WcknXa+x3JR/G/5ySxqCS5S8w65PZUQBYA657L4zkaGOvZpObP1MtiBLj9kG7c6Ae6xgJjrU7tyQ==", "dependencies": { - "@stencil/core": "^4.1.0", + "@stencil/core": "^4.0.3", "ionicons": "7.1.0", "tslib": "^2.1.0" } @@ -871,11 +871,11 @@ } }, "node_modules/@ionic/vue": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.3.1.tgz", - "integrity": "sha512-URxNXLYo4gh0riQlHiCoGDo7GqEqbVJi/1gMamM3tGBQHCMNZdm9IDfIDYjHY4L3dVi5pF+szl/b4p2lsIV3hw==", + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.3.0.tgz", + "integrity": "sha512-fbWcwGBFvH+04gFWdVoENqr2DiFAXucSdbDotI93wjmdAvg/H1RQEAMuJAVccCpb9fTKVkpZQwpKwS4z6IoQIw==", "dependencies": { - "@ionic/core": "7.3.1", + "@ionic/core": "7.3.0", "ionicons": "^7.0.0" } }, @@ -1323,9 +1323,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", - "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.0.5.tgz", + "integrity": "sha512-0nZRvvhjjOKsQFGX0pKiDtOS/5IiL7HRxtLqpIxHAxXKLs9ZcomTsdOwl12m/qjx2AtQReOfP8+x8jLOBNMOIQ==", "bin": { "stencil": "bin/stencil" }, @@ -6807,9 +6807,9 @@ } }, "node_modules/tslib": { - "version": "2.6.2", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", - "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz", + "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==" }, "node_modules/tsutils": { "version": "3.21.0", @@ -7697,11 +7697,11 @@ "dev": true }, "@ionic/core": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.1.tgz", - "integrity": "sha512-RdSJsFYx2oJ08duw+DMWVAfzjxlnA+o1saX5gOLSjP5SpwP7FqURFfXrFHIFN2vIKbeqUZTZjQwPHnrFsX04dQ==", + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.0.tgz", + "integrity": "sha512-DPHG0U44O4WcknXa+x3JR/G/5ySxqCS5S8w65PZUQBYA657L4zkaGOvZpObP1MtiBLj9kG7c6Ae6xgJjrU7tyQ==", "requires": { - "@stencil/core": "^4.1.0", + "@stencil/core": "^4.0.3", "ionicons": "7.1.0", "tslib": "^2.1.0" }, @@ -7829,11 +7829,11 @@ "requires": {} }, "@ionic/vue": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.3.1.tgz", - "integrity": "sha512-URxNXLYo4gh0riQlHiCoGDo7GqEqbVJi/1gMamM3tGBQHCMNZdm9IDfIDYjHY4L3dVi5pF+szl/b4p2lsIV3hw==", + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.3.0.tgz", + "integrity": "sha512-fbWcwGBFvH+04gFWdVoENqr2DiFAXucSdbDotI93wjmdAvg/H1RQEAMuJAVccCpb9fTKVkpZQwpKwS4z6IoQIw==", "requires": { - "@ionic/core": "7.3.1", + "@ionic/core": "7.3.0", "ionicons": "^7.0.0" } }, @@ -8192,9 +8192,9 @@ } }, "@stencil/core": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", - "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==" + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.0.5.tgz", + "integrity": "sha512-0nZRvvhjjOKsQFGX0pKiDtOS/5IiL7HRxtLqpIxHAxXKLs9ZcomTsdOwl12m/qjx2AtQReOfP8+x8jLOBNMOIQ==" }, "@tootallnate/once": { "version": "2.0.0", @@ -12220,9 +12220,9 @@ } }, "tslib": { - "version": "2.6.2", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", - "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz", + "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==" }, "tsutils": { "version": "3.21.0", diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json index 9c1900bfd74..5a0ae72286b 100644 --- a/packages/vue-router/package.json +++ b/packages/vue-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue-router", - "version": "7.3.1", + "version": "7.3.0", "description": "Vue Router integration for @ionic/vue", "scripts": { "test.spec": "jest", @@ -45,7 +45,7 @@ }, "homepage": "https://github.com/ionic-team/ionic#readme", "dependencies": { - "@ionic/vue": "^7.3.1" + "@ionic/vue": "^7.3.0" }, "devDependencies": { "@ionic/eslint-config": "^0.3.0", diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md index f07feffbcbc..9c056b0a372 100644 --- a/packages/vue/CHANGELOG.md +++ b/packages/vue/CHANGELOG.md @@ -3,14 +3,6 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -## [7.3.1](https://github.com/ionic-team/ionic-framework/compare/v7.3.0...v7.3.1) (2023-08-23) - -**Note:** Version bump only for package @ionic/vue - - - - - # [7.3.0](https://github.com/ionic-team/ionic-framework/compare/v7.2.4...v7.3.0) (2023-08-16) **Note:** Version bump only for package @ionic/vue diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json index 783079332c0..6579db25e40 100644 --- a/packages/vue/package-lock.json +++ b/packages/vue/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/vue", - "version": "7.3.1", + "version": "7.3.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/vue", - "version": "7.3.1", + "version": "7.3.0", "license": "MIT", "dependencies": { - "@ionic/core": "^7.3.1", + "@ionic/core": "^7.3.0", "ionicons": "^7.0.0" }, "devDependencies": { @@ -207,11 +207,11 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.1.tgz", - "integrity": "sha512-RdSJsFYx2oJ08duw+DMWVAfzjxlnA+o1saX5gOLSjP5SpwP7FqURFfXrFHIFN2vIKbeqUZTZjQwPHnrFsX04dQ==", + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.0.tgz", + "integrity": "sha512-DPHG0U44O4WcknXa+x3JR/G/5ySxqCS5S8w65PZUQBYA657L4zkaGOvZpObP1MtiBLj9kG7c6Ae6xgJjrU7tyQ==", "dependencies": { - "@stencil/core": "^4.1.0", + "@stencil/core": "^4.0.3", "ionicons": "7.1.0", "tslib": "^2.1.0" } @@ -423,9 +423,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", - "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.0.5.tgz", + "integrity": "sha512-0nZRvvhjjOKsQFGX0pKiDtOS/5IiL7HRxtLqpIxHAxXKLs9ZcomTsdOwl12m/qjx2AtQReOfP8+x8jLOBNMOIQ==", "bin": { "stencil": "bin/stencil" }, @@ -3746,11 +3746,11 @@ "dev": true }, "@ionic/core": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.1.tgz", - "integrity": "sha512-RdSJsFYx2oJ08duw+DMWVAfzjxlnA+o1saX5gOLSjP5SpwP7FqURFfXrFHIFN2vIKbeqUZTZjQwPHnrFsX04dQ==", + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.0.tgz", + "integrity": "sha512-DPHG0U44O4WcknXa+x3JR/G/5ySxqCS5S8w65PZUQBYA657L4zkaGOvZpObP1MtiBLj9kG7c6Ae6xgJjrU7tyQ==", "requires": { - "@stencil/core": "^4.1.0", + "@stencil/core": "^4.0.3", "ionicons": "7.1.0", "tslib": "^2.1.0" }, @@ -3885,9 +3885,9 @@ } }, "@stencil/core": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", - "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==" + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.0.5.tgz", + "integrity": "sha512-0nZRvvhjjOKsQFGX0pKiDtOS/5IiL7HRxtLqpIxHAxXKLs9ZcomTsdOwl12m/qjx2AtQReOfP8+x8jLOBNMOIQ==" }, "@types/json-schema": { "version": "7.0.11", diff --git a/packages/vue/package.json b/packages/vue/package.json index 55d02a3302e..d2ab6c75194 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue", - "version": "7.3.1", + "version": "7.3.0", "description": "Vue specific wrapper for @ionic/core", "scripts": { "eslint": "eslint src", @@ -66,7 +66,7 @@ "vue-router": "^4.0.16" }, "dependencies": { - "@ionic/core": "^7.3.1", + "@ionic/core": "^7.3.0", "ionicons": "^7.0.0" }, "vetur": { diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 5e134feb166..0e733052100 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -212,6 +212,7 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer