mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
chore(): sync with main
This commit is contained in:
Liam DeBeasi
8
.github/COMPONENT-GUIDE.md
vendored
8
.github/COMPONENT-GUIDE.md
vendored
@@ -141,7 +141,7 @@ Style the `ion-activated` class based on the spec for that element:
|
||||
}
|
||||
```
|
||||
|
||||
> Order is important! Activated should be before the focused & hover states.
|
||||
> Order is important! Activated should be after the focused & hover states.
|
||||
|
||||
|
||||
#### User Customization
|
||||
@@ -307,7 +307,7 @@ Style the `:hover` based on the spec for that element:
|
||||
}
|
||||
```
|
||||
|
||||
> Order is important! Hover should be after the activated and focused states.
|
||||
> Order is important! Hover should be before the activated state.
|
||||
|
||||
|
||||
#### User Customization
|
||||
@@ -729,7 +729,7 @@ For example, if you wanted `transform-origin` to be RTL-aware, you would use the
|
||||
@include transform-origin(start, center);
|
||||
```
|
||||
|
||||
This would output `transform-origin: left center` in LTR mode and `transform-origin: right center` in RTL mode.
|
||||
This would output `transform-origin: left center` in LTR mode and `transform-origin: right center` in RTL mode.
|
||||
|
||||
These mixins depend on the `:host-context` pseudo-class when used inside of shadow components, which is not supported in WebKit. As a result, these mixins will not work in Safari for macOS and iOS when applied to shadow components.
|
||||
|
||||
@@ -753,4 +753,4 @@ class={{
|
||||
:host(.my-cmp-rtl) {
|
||||
transform-origin: right center;
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
37
.github/ISSUE_TEMPLATE/bug_report.yml
vendored
37
.github/ISSUE_TEMPLATE/bug_report.yml
vendored
@@ -1,8 +1,10 @@
|
||||
name: 🐛 Bug Report
|
||||
description: Create a report to help us improve Ionic Framework
|
||||
title: 'bug: '
|
||||
|
||||
body:
|
||||
- type: checkboxes
|
||||
id: prerequisites
|
||||
attributes:
|
||||
label: Prerequisites
|
||||
description: Please ensure you have completed all of the following.
|
||||
@@ -13,46 +15,67 @@ body:
|
||||
required: true
|
||||
- label: I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.
|
||||
required: true
|
||||
- type: checkboxes
|
||||
|
||||
- type: dropdown
|
||||
id: affected-versions
|
||||
attributes:
|
||||
label: Ionic Framework Version
|
||||
description: Please select which versions of Ionic Framework this issue impacts. For Ionic Framework 1.x issues, please use https://github.com/ionic-team/ionic-v1. For Ionic Framework 2.x and 3.x issues, please use https://github.com/ionic-team/ionic-v3.
|
||||
description: Which version(s) of Ionic Framework does this issue impact? For Ionic Framework 1.x issues, please use https://github.com/ionic-team/ionic-v1. For Ionic Framework 2.x and 3.x issues, please use https://github.com/ionic-team/ionic-v3.
|
||||
options:
|
||||
- label: v4.x
|
||||
- label: v5.x
|
||||
- label: v6.x
|
||||
- label: v7.x
|
||||
- label: Nightly
|
||||
- v4.x
|
||||
- v5.x
|
||||
- v6.x
|
||||
- v7.x
|
||||
- Nightly
|
||||
multiple: true
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: current-behavior
|
||||
attributes:
|
||||
label: Current Behavior
|
||||
description: A clear description of what the bug is and how it manifests.
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: expected-behavior
|
||||
attributes:
|
||||
label: Expected Behavior
|
||||
description: A clear description of what you expected to happen.
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: steps-to-reproduce
|
||||
attributes:
|
||||
label: Steps to Reproduce
|
||||
description: Please explain the steps required to duplicate this issue.
|
||||
placeholder: |
|
||||
1.
|
||||
2.
|
||||
3.
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: input
|
||||
id: reproduction-url
|
||||
attributes:
|
||||
label: Code Reproduction URL
|
||||
description: Please reproduce this issue in a blank Ionic Framework starter application and provide a link to the repo. Try out our [Getting Started Wizard](https://ionicframework.com/start#basics) to quickly spin up an Ionic Framework starter app. This is the best way to ensure this issue is triaged quickly. Issues without a code reproduction may be closed if the Ionic Team cannot reproduce the issue you are reporting.
|
||||
placeholder: https://github.com/...
|
||||
|
||||
- type: textarea
|
||||
id: ionic-info
|
||||
attributes:
|
||||
label: Ionic Info
|
||||
description: Please run `ionic info` from within your Ionic Framework project directory and paste the output below.
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: additional-information
|
||||
attributes:
|
||||
label: Additional Information
|
||||
description: List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, etc.
|
||||
|
||||
14
.github/ISSUE_TEMPLATE/feature_request.yml
vendored
14
.github/ISSUE_TEMPLATE/feature_request.yml
vendored
@@ -2,7 +2,9 @@ name: 💡 Feature Request
|
||||
description: Suggest an idea for Ionic Framework
|
||||
title: 'feat: '
|
||||
body:
|
||||
|
||||
- type: checkboxes
|
||||
id: prerequisites
|
||||
attributes:
|
||||
label: Prerequisites
|
||||
description: Please ensure you have completed all of the following.
|
||||
@@ -13,31 +15,43 @@ body:
|
||||
required: true
|
||||
- label: I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: description
|
||||
attributes:
|
||||
label: Describe the Feature Request
|
||||
description: A clear and concise description of what the feature does.
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: use-case
|
||||
attributes:
|
||||
label: Describe the Use Case
|
||||
description: A clear and concise use case for what problem this feature would solve.
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: proposed-solution
|
||||
attributes:
|
||||
label: Describe Preferred Solution
|
||||
description: A clear and concise description of what you how you want this feature to be added to Ionic Framework.
|
||||
|
||||
- type: textarea
|
||||
id: alternatives-considered
|
||||
attributes:
|
||||
label: Describe Alternatives
|
||||
description: A clear and concise description of any alternative solutions or features you have considered.
|
||||
|
||||
- type: textarea
|
||||
id: related-code
|
||||
attributes:
|
||||
label: Related Code
|
||||
description: If you are able to illustrate the feature request with an example, please provide a sample Ionic Framework application. Try out our [Getting Started Wizard](https://ionicframework.com/start#basics) to quickly spin up an Ionic Framework starter app.
|
||||
|
||||
- type: textarea
|
||||
id: additional-information
|
||||
attributes:
|
||||
label: Additional Information
|
||||
description: List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to implement, Stack Overflow links, forum links, etc.
|
||||
|
||||
17
CHANGELOG.md
17
CHANGELOG.md
@@ -3,6 +3,20 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [6.6.1](https://github.com/ionic-team/ionic-framework/compare/v6.6.0...v6.6.1) (2023-03-08)
|
||||
|
||||
* **angular:** keepContentsMounted modal is sized correctly ([#26917](https://github.com/ionic-team/ionic-framework/issues/26917)) ([8d184c8](https://github.com/ionic-team/ionic-framework/commit/8d184c8c1b91dba9d6d5bbaf1b4a8480b75a3572)), closes [#26916](https://github.com/ionic-team/ionic-framework/issues/26916)
|
||||
* **button:** show correct activated state for ios ([#26900](https://github.com/ionic-team/ionic-framework/issues/26900)) ([67815cc](https://github.com/ionic-team/ionic-framework/commit/67815ccbf4650ecbbc6c79d5063ab5ba50cb358c)), closes [#22468](https://github.com/ionic-team/ionic-framework/issues/22468)
|
||||
* **datetime-button:** time-only values are parsed ([#26852](https://github.com/ionic-team/ionic-framework/issues/26852)) ([f54fc18](https://github.com/ionic-team/ionic-framework/commit/f54fc188843af52e723e06402e01ef92717e541f)), closes [#26851](https://github.com/ionic-team/ionic-framework/issues/26851)
|
||||
* **datetime:** resolve import error in stencil apps ([#26909](https://github.com/ionic-team/ionic-framework/issues/26909)) ([48c45af](https://github.com/ionic-team/ionic-framework/commit/48c45afdb6ca7dad0a1f2a6d3ece6df8ba23eb69)), closes [#26908](https://github.com/ionic-team/ionic-framework/issues/26908)
|
||||
* **menu, split-pane:** ssr does not fail on null customElements check ([#26854](https://github.com/ionic-team/ionic-framework/issues/26854)) ([451d220](https://github.com/ionic-team/ionic-framework/commit/451d2204e79a4a10c1eb829ab0bd75c137b02475)), closes [#24714](https://github.com/ionic-team/ionic-framework/issues/24714)
|
||||
* **modal:** avoid chrome memory leak bug ([#26911](https://github.com/ionic-team/ionic-framework/issues/26911)) ([a3f8e28](https://github.com/ionic-team/ionic-framework/commit/a3f8e281721f6ef8c9479f5870198b7a009daabd))
|
||||
* **react:** inline overlays dismiss when parent component unmounts ([#26245](https://github.com/ionic-team/ionic-framework/issues/26245)) ([c0e1bf9](https://github.com/ionic-team/ionic-framework/commit/c0e1bf92c4487c2ec8a117957cf84a2ce00f5fd8)), closes [#25775](https://github.com/ionic-team/ionic-framework/issues/25775) [#26185](https://github.com/ionic-team/ionic-framework/issues/26185)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-beta.6...v7.0.0-rc.0) (2023-03-01)
|
||||
|
||||
**Note:** Version bump only for package ionic-framework
|
||||
@@ -11,7 +25,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.6](https://github.com/ionic-team/ionic-framework/compare/v6.6.0...v7.0.0-beta.6) (2023-03-01)
|
||||
# [7.0.0-beta.6](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-beta.5...v7.0.0-beta.6) (2023-03-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
@@ -35,7 +49,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
||||
| `$button-ios-border-radius` | `10px` | `14px` |
|
||||
| `$button-ios-large-height` | `2.8em` | `3.1em` |
|
||||
| `$button-ios-large-border-radius` | `12px` | `16px` |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -3,6 +3,18 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [6.6.1](https://github.com/ionic-team/ionic/compare/v6.6.0...v6.6.1) (2023-03-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **angular:** keepContentsMounted modal is sized correctly ([#26917](https://github.com/ionic-team/ionic/issues/26917)) ([8d184c8](https://github.com/ionic-team/ionic/commit/8d184c8c1b91dba9d6d5bbaf1b4a8480b75a3572)), closes [#26916](https://github.com/ionic-team/ionic/issues/26916)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.0.0-rc.0](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.6...v7.0.0-rc.0) (2023-03-01)
|
||||
|
||||
**Note:** Version bump only for package @ionic/angular
|
||||
@@ -11,7 +23,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.6](https://github.com/ionic-team/ionic/compare/v6.6.0...v7.0.0-beta.6) (2023-03-01)
|
||||
# [7.0.0-beta.6](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.5...v7.0.0-beta.6) (2023-03-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
@@ -61,6 +73,14 @@ The dev-preview `environmentInjector` property has been removed from `ion-tabs`
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.4](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.3...v7.0.0-beta.4) (2023-02-22)
|
||||
|
||||
**Note:** Version bump only for package @ionic/angular
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [6.5.6](https://github.com/ionic-team/ionic/compare/v6.5.5...v6.5.6) (2023-02-22)
|
||||
|
||||
**Note:** Version bump only for package @ionic/angular
|
||||
|
||||
@@ -79,7 +79,7 @@ export declare interface IonModal extends Components.IonModal {
|
||||
@Component({
|
||||
selector: 'ion-modal',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `<div class="ion-page" *ngIf="isCmpOpen || keepContentsMounted">
|
||||
template: `<div class="ion-delegate-host ion-page" *ngIf="isCmpOpen || keepContentsMounted">
|
||||
<ng-container [ngTemplateOutlet]="template"></ng-container>
|
||||
</div>`,
|
||||
inputs: [
|
||||
|
||||
@@ -27,6 +27,12 @@ describe('overlays - keepContentsMounted', () => {
|
||||
|
||||
cy.get('ion-modal ion-content').should('exist');
|
||||
});
|
||||
|
||||
it('should has ion-delegate-host on mount', () => {
|
||||
cy.visit('/keep-contents-mounted');
|
||||
|
||||
cy.get('ion-modal .ion-delegate-host').should('exist');
|
||||
});
|
||||
})
|
||||
describe('popover', () => {
|
||||
it('should not mount component if false', () => {
|
||||
|
||||
@@ -3,6 +3,21 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [6.6.1](https://github.com/ionic-team/ionic/compare/v6.6.0...v6.6.1) (2023-03-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **button:** show correct activated state for ios ([#26900](https://github.com/ionic-team/ionic/issues/26900)) ([67815cc](https://github.com/ionic-team/ionic/commit/67815ccbf4650ecbbc6c79d5063ab5ba50cb358c)), closes [#22468](https://github.com/ionic-team/ionic/issues/22468)
|
||||
* **datetime-button:** time-only values are parsed ([#26852](https://github.com/ionic-team/ionic/issues/26852)) ([f54fc18](https://github.com/ionic-team/ionic/commit/f54fc188843af52e723e06402e01ef92717e541f)), closes [#26851](https://github.com/ionic-team/ionic/issues/26851)
|
||||
* **datetime:** resolve import error in stencil apps ([#26909](https://github.com/ionic-team/ionic/issues/26909)) ([48c45af](https://github.com/ionic-team/ionic/commit/48c45afdb6ca7dad0a1f2a6d3ece6df8ba23eb69)), closes [#26908](https://github.com/ionic-team/ionic/issues/26908)
|
||||
* **menu, split-pane:** ssr does not fail on null customElements check ([#26854](https://github.com/ionic-team/ionic/issues/26854)) ([451d220](https://github.com/ionic-team/ionic/commit/451d2204e79a4a10c1eb829ab0bd75c137b02475)), closes [#24714](https://github.com/ionic-team/ionic/issues/24714)
|
||||
* **modal:** avoid chrome memory leak bug ([#26911](https://github.com/ionic-team/ionic/issues/26911)) ([a3f8e28](https://github.com/ionic-team/ionic/commit/a3f8e281721f6ef8c9479f5870198b7a009daabd))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.0.0-rc.0](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.6...v7.0.0-rc.0) (2023-03-01)
|
||||
|
||||
**Note:** Version bump only for package @ionic/core
|
||||
@@ -11,7 +26,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.6](https://github.com/ionic-team/ionic/compare/v6.6.0...v7.0.0-beta.6) (2023-03-01)
|
||||
# [7.0.0-beta.6](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.5...v7.0.0-beta.6) (2023-03-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
@@ -37,215 +52,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.5](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.4...v7.0.0-beta.5) (2023-02-27)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **content:** adjust transition shadow to match new iOS version ([#26839](https://github.com/ionic-team/ionic/issues/26839)) ([f006e4b](https://github.com/ionic-team/ionic/commit/f006e4bc09fcdcb5a34da4e17eb6037bf1e2445c))
|
||||
* **form:** shadow components using aria-labelledby do not use modern syntax ([#26836](https://github.com/ionic-team/ionic/issues/26836)) ([fcfdd9e](https://github.com/ionic-team/ionic/commit/fcfdd9e9ba9969947d8b9dfefbea4522d08753ed)), closes [#26829](https://github.com/ionic-team/ionic/issues/26829)
|
||||
* **scroll-padding:** correct padding is added ([#26810](https://github.com/ionic-team/ionic/issues/26810)) ([eefd17d](https://github.com/ionic-team/ionic/commit/eefd17d492f2fe24639cf20603fac04d6eb94e3f)), closes [#26803](https://github.com/ionic-team/ionic/issues/26803)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **searchbar:** ionInput now emits value payload ([#26831](https://github.com/ionic-team/ionic/issues/26831)) ([865f8de](https://github.com/ionic-team/ionic/commit/865f8de9dc2d533b08730846f8d76bf165e8bc1d)), closes [#26828](https://github.com/ionic-team/ionic/issues/26828)
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* **searchbar:** The `detail` payload for the `ionInput` event now on `ion-searchbar` contains an object with the current `value` as well as the native event that triggered `ionInput`.
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.4](https://github.com/ionic-team/ionic/compare/v6.5.6...v7.0.0-beta.4) (2023-02-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **checkbox:** screen readers announce state correctly ([#26817](https://github.com/ionic-team/ionic/issues/26817)) ([7312b06](https://github.com/ionic-team/ionic/commit/7312b0696d6b9ceb2e4518cad2ab29d45d2eddbe)), closes [#25740](https://github.com/ionic-team/ionic/issues/25740)
|
||||
* **select:** emit single ionChange event for popover option selection ([#26796](https://github.com/ionic-team/ionic/issues/26796)) ([7578aa3](https://github.com/ionic-team/ionic/commit/7578aa3c598451b6df1cf1eca26ad288c0526121)), closes [#26789](https://github.com/ionic-team/ionic/issues/26789)
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.3](https://github.com/ionic-team/ionic/compare/v6.5.4...v7.0.0-beta.3) (2023-02-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **checkbox, radio:** label is announced once on ios ([#26770](https://github.com/ionic-team/ionic/issues/26770)) ([87bc749](https://github.com/ionic-team/ionic/commit/87bc7490404b0406b511833a85b686f1db791f66)), closes [#26769](https://github.com/ionic-team/ionic/issues/26769)
|
||||
* **form:** legacy deprecation is logged correctly ([#26784](https://github.com/ionic-team/ionic/issues/26784)) ([180ee63](https://github.com/ionic-team/ionic/commit/180ee63ff7d93f8800756d732e565123a59bcd3a))
|
||||
* **many:** resolve import errors with stencil apps ([#26781](https://github.com/ionic-team/ionic/issues/26781)) ([1eea054](https://github.com/ionic-team/ionic/commit/1eea054c127146999302888180fd1585e1021783)), closes [#26778](https://github.com/ionic-team/ionic/issues/26778)
|
||||
* **range:** allow overflow on range bar container ([#26751](https://github.com/ionic-team/ionic/issues/26751)) ([edf696c](https://github.com/ionic-team/ionic/commit/edf696cac9e4a35545750f99bcd49a87ec504905))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **textarea:** add legacy prop ([#26783](https://github.com/ionic-team/ionic/issues/26783)) ([f7f6f1d](https://github.com/ionic-team/ionic/commit/f7f6f1d9f9ffd30afbdccfb558bd73f42b112715))
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.2](https://github.com/ionic-team/ionic/compare/v6.5.3...v7.0.0-beta.2) (2023-02-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **input, textarea:** bottom content is rendered correctly ([#26739](https://github.com/ionic-team/ionic/issues/26739)) ([39009ac](https://github.com/ionic-team/ionic/commit/39009ac6eff0e51707efc3ef3981e1b7614eb2e3)), closes [#26737](https://github.com/ionic-team/ionic/issues/26737)
|
||||
* **input:** update disabled opacity of md input ([#26514](https://github.com/ionic-team/ionic/issues/26514)) ([90f4995](https://github.com/ionic-team/ionic/commit/90f4995aa63c730d3feb1fc88582f034153c9b9c))
|
||||
* **radio:** remove radio min-height sizing ([#26719](https://github.com/ionic-team/ionic/issues/26719)) ([2a6bba0](https://github.com/ionic-team/ionic/commit/2a6bba0cb60666a4a97da427fa7d179aab49f148))
|
||||
* **range:** assign auto increment id by default ([#26740](https://github.com/ionic-team/ionic/issues/26740)) ([92b06f2](https://github.com/ionic-team/ionic/commit/92b06f2eb6f6980561c584193cb70157bedec12b))
|
||||
|
||||
|
||||
### Performance Improvements
|
||||
|
||||
* **gesture:** reduce delay with adding and removing activated states ([#26741](https://github.com/ionic-team/ionic/issues/26741)) ([4cff442](https://github.com/ionic-team/ionic/commit/4cff442c4f25596e76a674f18e79d0531a464fbf)), closes [#23691](https://github.com/ionic-team/ionic/issues/23691)
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* **range:** The `name` property on `ion-range` defaults to `ion-r-${rangeIds++}` where `rangeIds` is a number that is incremented for every instance of the component.
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.1](https://github.com/ionic-team/ionic/compare/v6.5.2...v7.0.0-beta.1) (2023-02-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **input, textarea, select:** do not show highlight in item ([#26689](https://github.com/ionic-team/ionic/issues/26689)) ([16b60a6](https://github.com/ionic-team/ionic/commit/16b60a612c1c8053cec3509749ad9e9b185b93be)), closes [#26687](https://github.com/ionic-team/ionic/issues/26687)
|
||||
* **many:** legacy form control does not warn when using aria-labelledby ([#26699](https://github.com/ionic-team/ionic/issues/26699)) ([63f8525](https://github.com/ionic-team/ionic/commit/63f8525284abf2792305aebb27b9b439a8921bcf)), closes [#26698](https://github.com/ionic-team/ionic/issues/26698)
|
||||
* **textarea:** textarea wrapper inherits height ([#26707](https://github.com/ionic-team/ionic/issues/26707)) ([e6c7c57](https://github.com/ionic-team/ionic/commit/e6c7c574665897d8fd2184797bc4017f688a2b0e))
|
||||
|
||||
|
||||
### Reverts
|
||||
|
||||
* revert base components feature ([#26692](https://github.com/ionic-team/ionic/issues/26692)) ([b78b454](https://github.com/ionic-team/ionic/commit/b78b454e089462afa866972b97bb06faa84bd319))
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **accordion-group:** do not adjust incorrect values ([#26086](https://github.com/ionic-team/ionic/issues/26086)) ([e2cbeeb](https://github.com/ionic-team/ionic/commit/e2cbeeb8ace969d49e16ccdc496adc559e40b1f2))
|
||||
* **action-sheet:** container animates in correctly ([#26347](https://github.com/ionic-team/ionic/issues/26347)) ([1e855e7](https://github.com/ionic-team/ionic/commit/1e855e7699a0b5c3792a9ef84e863df6fe552437)), closes [#25368](https://github.com/ionic-team/ionic/issues/25368)
|
||||
* **angular:** inline overlays are exported ([#26333](https://github.com/ionic-team/ionic/issues/26333)) ([f23fb34](https://github.com/ionic-team/ionic/commit/f23fb342b279cd4646b432dd420b457f6c41ac12))
|
||||
* **angular:** null values are not converted to falsy value ([#26341](https://github.com/ionic-team/ionic/issues/26341)) ([ce2e37b](https://github.com/ionic-team/ionic/commit/ce2e37b1a172722630953dcb9560f334048c5b72))
|
||||
* **back-button:** update style for ios spec ([#26395](https://github.com/ionic-team/ionic/issues/26395)) ([1a840c4](https://github.com/ionic-team/ionic/commit/1a840c43e90a65a910877599f6a2d52ccc65db6b)), closes [#26393](https://github.com/ionic-team/ionic/issues/26393)
|
||||
* **breadcrumb:** add aria-label to collapsed indicator ([#26615](https://github.com/ionic-team/ionic/issues/26615)) ([f8a2c79](https://github.com/ionic-team/ionic/commit/f8a2c7948894e82b1bc41fa45e1716bc733b087c))
|
||||
* **card-header:** reverse order of title and subtitle on ios ([#26084](https://github.com/ionic-team/ionic/issues/26084)) ([2080890](https://github.com/ionic-team/ionic/commit/2080890c11539938dd96c0f2ed08785100112587))
|
||||
* **datetime:** do not report timezone in ionChange ([#26183](https://github.com/ionic-team/ionic/issues/26183)) ([3fb4caf](https://github.com/ionic-team/ionic/commit/3fb4caf21ffac12f765c4c80bf1850e05d211c6a)), closes [#25577](https://github.com/ionic-team/ionic/issues/25577)
|
||||
* **datetime:** haptics are enabled only on ios ([#26370](https://github.com/ionic-team/ionic/issues/26370)) ([8eec197](https://github.com/ionic-team/ionic/commit/8eec1974da3dd4820d29126f17d1e14b5132c9f4)), closes [#25508](https://github.com/ionic-team/ionic/issues/25508)
|
||||
* **input, searchbar, select, textarea:** placeholder has improved contrast ([#26486](https://github.com/ionic-team/ionic/issues/26486)) ([6c82435](https://github.com/ionic-team/ionic/commit/6c824350257fce45ce3b8c166a864efe6789c505))
|
||||
* **input, textarea:** inputs now scroll into view when tapping labels ([#25848](https://github.com/ionic-team/ionic/issues/25848)) ([cb265d6](https://github.com/ionic-team/ionic/commit/cb265d6cc6d4890608d2873a5726f5d7d37adae6))
|
||||
* **input, textarea:** padding is now added to content so inputs scroll above keyboard ([#25849](https://github.com/ionic-team/ionic/issues/25849)) ([ba6b539](https://github.com/ionic-team/ionic/commit/ba6b5396754151d884fa276a7227facd28a431df)), closes [#18532](https://github.com/ionic-team/ionic/issues/18532)
|
||||
* **input:** clearOnEdit clears input when user initially types ([#26005](https://github.com/ionic-team/ionic/issues/26005)) ([bf5e118](https://github.com/ionic-team/ionic/commit/bf5e1183135d1d56a7ba0f63723724521f9d51d0))
|
||||
* **input:** highlight color does not apply to text ([#26352](https://github.com/ionic-team/ionic/issues/26352)) ([e6f2a1f](https://github.com/ionic-team/ionic/commit/e6f2a1f6a17df4c7718375d70afedcb42de4430c))
|
||||
* **input:** label receives focus when floating or stacked ([#26574](https://github.com/ionic-team/ionic/issues/26574)) ([162c3f0](https://github.com/ionic-team/ionic/commit/162c3f076a06dd0e5f97d6647255d67e7f4f3416))
|
||||
* **input:** min height is set on host ([#26495](https://github.com/ionic-team/ionic/issues/26495)) ([0cd6e91](https://github.com/ionic-team/ionic/commit/0cd6e918e83ff4c2cdc41e1e9da05fefe6ca5c84))
|
||||
* **item:** align iOS font size to spec ([#26445](https://github.com/ionic-team/ionic/issues/26445)) ([eea91bb](https://github.com/ionic-team/ionic/commit/eea91bbbe1a4ccc4797742ee4e2c320dba6d9517))
|
||||
* **item:** ios mode has correct padding ([#26511](https://github.com/ionic-team/ionic/issues/26511)) ([96147ec](https://github.com/ionic-team/ionic/commit/96147ec1b0fcfd31e48d450201fc32b58105dea7))
|
||||
* **many:** component wrappers inherit height ([#26611](https://github.com/ionic-team/ionic/issues/26611)) ([e612253](https://github.com/ionic-team/ionic/commit/e612253fc6297b92855b44810cb7531917b9318e))
|
||||
* **overlays:** dismiss on keydown to avoid chrome for windows and firefox bug ([#25811](https://github.com/ionic-team/ionic/issues/25811)) ([a1ec9aa](https://github.com/ionic-team/ionic/commit/a1ec9aabd806964206010000294b8781c516c4f3)), closes [#25802](https://github.com/ionic-team/ionic/issues/25802)
|
||||
* **overlays:** triggerController warns about missing triggers ([#26651](https://github.com/ionic-team/ionic/issues/26651)) ([a7c2c55](https://github.com/ionic-team/ionic/commit/a7c2c555f34795a3a9349987141eef929ad88807))
|
||||
* **range:** range matches iOS design specification ([#25873](https://github.com/ionic-team/ionic/issues/25873)) ([da05ffe](https://github.com/ionic-team/ionic/commit/da05ffe462b36ce6fd6cdaeb25cf0f8f4b0e7ef2)), closes [#25872](https://github.com/ionic-team/ionic/issues/25872)
|
||||
* **segment:** click event triggers ionChange ([#26162](https://github.com/ionic-team/ionic/issues/26162)) ([70781e4](https://github.com/ionic-team/ionic/commit/70781e4c9f93e8e58917083da43536389ac5332e))
|
||||
* **select:** chevron icon is now an ionicon ([#26484](https://github.com/ionic-team/ionic/issues/26484)) ([0823c09](https://github.com/ionic-team/ionic/commit/0823c09d9c5f4f07a847fecfd3d3c1915eeb1ddf))
|
||||
* **select:** modern component takes up full line ([#26670](https://github.com/ionic-team/ionic/issues/26670)) ([4d24b32](https://github.com/ionic-team/ionic/commit/4d24b328e2021f0d14b278df7535c9bdb9851952))
|
||||
* **textarea:** add correct state styles ([#26676](https://github.com/ionic-team/ionic/issues/26676)) ([1e1d3fb](https://github.com/ionic-team/ionic/commit/1e1d3fbddca3bb83233322d42979ae68b26c11a5))
|
||||
* **textarea:** clearOnEdit clears textarea when user initially types ([#26006](https://github.com/ionic-team/ionic/issues/26006)) ([f7176bb](https://github.com/ionic-team/ionic/commit/f7176bbb44c230d6f20b023942c577236e676b02))
|
||||
* **textarea:** render icon for clearing input ([3271ecf](https://github.com/ionic-team/ionic/commit/3271ecf1dec4f9baf238ea94e4047f2c26835b4b))
|
||||
* **toggle:** emitStyles only fires with legacy control ([#26507](https://github.com/ionic-team/ionic/issues/26507)) ([ec9f8cd](https://github.com/ionic-team/ionic/commit/ec9f8cd5f1228e321b1c44aa0081c3c507278a8c))
|
||||
|
||||
|
||||
### Code Refactoring
|
||||
|
||||
* **config:** remove stencil extras ([#26461](https://github.com/ionic-team/ionic/issues/26461)) ([bd4027b](https://github.com/ionic-team/ionic/commit/bd4027b0fa1494c58e4ab7c804acfa053c63113a))
|
||||
* **core:** remove global hidden attribute ([#25829](https://github.com/ionic-team/ionic/issues/25829)) ([f5a6b5a](https://github.com/ionic-team/ionic/commit/f5a6b5a4c434167cafd9060911ccbfda2a89734c)), closes [#17583](https://github.com/ionic-team/ionic/issues/17583)
|
||||
* **modal:** remove swipeToClose in favor of canDismiss ([#26050](https://github.com/ionic-team/ionic/issues/26050)) ([1f3ddf2](https://github.com/ionic-team/ionic/commit/1f3ddf2370c29f0fd2dd96aa9b3927ef96bdc5ae))
|
||||
* **picker:** remove refresh key ([#26340](https://github.com/ionic-team/ionic/issues/26340)) ([0fbcc5b](https://github.com/ionic-team/ionic/commit/0fbcc5b9a97861dc31742db80b187d077a0d6750))
|
||||
* **types:** remove overlay attribute interfaces ([#26181](https://github.com/ionic-team/ionic/issues/26181)) ([322a1db](https://github.com/ionic-team/ionic/commit/322a1dbcd00fc1f3db17fb9fb46ba91ba164acd3))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **accordion:** ionChange will only emit from user committed changes ([#25922](https://github.com/ionic-team/ionic/issues/25922)) ([4eea9fa](https://github.com/ionic-team/ionic/commit/4eea9fa5c07d2a48bf5d224cd9b9e63453125b77))
|
||||
* **action-sheet:** use action sheet overlay inline ([#26172](https://github.com/ionic-team/ionic/issues/26172)) ([92b763a](https://github.com/ionic-team/ionic/commit/92b763a538f1c935e10d90c3f4af1debf1cab2c3))
|
||||
* **alert:** add ability to use alert inline ([#26316](https://github.com/ionic-team/ionic/issues/26316)) ([08c0a55](https://github.com/ionic-team/ionic/commit/08c0a5520a4f9be19d88644df26f4d38587985fa))
|
||||
* **base-components:** add ability to remove ios and md theme ([#26669](https://github.com/ionic-team/ionic/issues/26669)) ([18f109c](https://github.com/ionic-team/ionic/commit/18f109c7dae97d4e74bee9b72a341aeafd95b222))
|
||||
* **checkbox:** component can be used outside ion-item ([#26518](https://github.com/ionic-team/ionic/issues/26518)) ([9d52e70](https://github.com/ionic-team/ionic/commit/9d52e703610d0211667f0152e6c2b90ec6f13198))
|
||||
* **checkbox:** ionChange fires on user interaction ([#25923](https://github.com/ionic-team/ionic/issues/25923)) ([a6b2629](https://github.com/ionic-team/ionic/commit/a6b2629ede9f2b0e16343b9afabf68eb53cacc17))
|
||||
* **datetime:** ionChange will only emit from user committed changes ([#26083](https://github.com/ionic-team/ionic/issues/26083)) ([cc2af20](https://github.com/ionic-team/ionic/commit/cc2af202a95c049c9dd11ffd50c0dec3c84bf3c0)), closes [#20873](https://github.com/ionic-team/ionic/issues/20873) [#24452](https://github.com/ionic-team/ionic/issues/24452)
|
||||
* **input, textarea:** change default debounce to undefined ([#26073](https://github.com/ionic-team/ionic/issues/26073)) ([c45d054](https://github.com/ionic-team/ionic/commit/c45d05476b34648b59dc8d407a8a1c9f8bd4f409))
|
||||
* **input, textarea:** ionInput and ionChange pass event and value ([#26176](https://github.com/ionic-team/ionic/issues/26176)) ([eea6ba9](https://github.com/ionic-team/ionic/commit/eea6ba996ce0f71546f5a14109d0d279400a27e5))
|
||||
* **input, toggle:** add escape hatch property ([#26416](https://github.com/ionic-team/ionic/issues/26416)) ([1278a29](https://github.com/ionic-team/ionic/commit/1278a292f37a27533b07b78f1be6d266b37976c7))
|
||||
* **input:** component can be used outside of ion-item ([#26283](https://github.com/ionic-team/ionic/issues/26283)) ([44472ae](https://github.com/ionic-team/ionic/commit/44472aeb9f12585d7b5d40b5721d4281b66b5004)), closes [#20153](https://github.com/ionic-team/ionic/issues/20153) [#19084](https://github.com/ionic-team/ionic/issues/19084) [#22736](https://github.com/ionic-team/ionic/issues/22736)
|
||||
* **input:** debounce controls the timing to delay the ionInput event ([#25969](https://github.com/ionic-team/ionic/issues/25969)) ([35041b2](https://github.com/ionic-team/ionic/commit/35041b2f3c99135d292500a662b889bdaaec6876))
|
||||
* **input:** ionChange will only emit from user committed changes ([#25858](https://github.com/ionic-team/ionic/issues/25858)) ([8732b7b](https://github.com/ionic-team/ionic/commit/8732b7bdb76320d5eeba1121ac5f5eefa343526f)), closes [#20106](https://github.com/ionic-team/ionic/issues/20106) [#20061](https://github.com/ionic-team/ionic/issues/20061)
|
||||
* **loading:** use loading overlay inline ([#26153](https://github.com/ionic-team/ionic/issues/26153)) ([34ca337](https://github.com/ionic-team/ionic/commit/34ca337b8af27b144fb44428c8ed8cf07fc79bfc))
|
||||
* **picker:** add ability to use picker inline ([#26336](https://github.com/ionic-team/ionic/issues/26336)) ([c0a8501](https://github.com/ionic-team/ionic/commit/c0a85016572956149ed4f01109f11154d7b5cb57))
|
||||
* **radio-group:** ionChange will only emit from user committed changes ([#26223](https://github.com/ionic-team/ionic/issues/26223)) ([c299d36](https://github.com/ionic-team/ionic/commit/c299d3666aae96d0e67ce4d2c70efbe95bee81da))
|
||||
* **radio:** component can be used outside of ion-item ([#26582](https://github.com/ionic-team/ionic/issues/26582)) ([9761b0a](https://github.com/ionic-team/ionic/commit/9761b0a092e50ac4cc9176b6bcd5b9d29a5b22b3))
|
||||
* **range:** component can be used outside of ion-item ([#26479](https://github.com/ionic-team/ionic/issues/26479)) ([49baad8](https://github.com/ionic-team/ionic/commit/49baad8ee6cfe7e26068f4c9954d4a59d343b339))
|
||||
* **range:** ionChange will only emit from user committed changes ([#26089](https://github.com/ionic-team/ionic/issues/26089)) ([d1fb7b0](https://github.com/ionic-team/ionic/commit/d1fb7b039b8e11e9d9ede850f90b977a46b52de8))
|
||||
* **searchbar:** ionChange will only emit from user committed changes ([#26026](https://github.com/ionic-team/ionic/issues/26026)) ([b052d3b](https://github.com/ionic-team/ionic/commit/b052d3b2622b795cde102591f0191338e15b14a0))
|
||||
* **segment:** ionChange will only emit from user committed changes ([#25934](https://github.com/ionic-team/ionic/issues/25934)) ([a03c8af](https://github.com/ionic-team/ionic/commit/a03c8afb3dc4e6672beae680c61c89477478f28b))
|
||||
* **select:** component can be used outside ion-item ([#26572](https://github.com/ionic-team/ionic/issues/26572)) ([02640b5](https://github.com/ionic-team/ionic/commit/02640b5795c4fb8a46f0cdc8903f2a08abfa9135))
|
||||
* **select:** ionChange will only emit from user committed changes ([#26066](https://github.com/ionic-team/ionic/issues/26066)) ([34c4137](https://github.com/ionic-team/ionic/commit/34c41378682a202d4fab11aad171df7f55f4c243))
|
||||
* **slides:** remove ion-slide, ion-slides, and IonicSwiper module ([#25868](https://github.com/ionic-team/ionic/issues/25868)) ([d478e03](https://github.com/ionic-team/ionic/commit/d478e03914fed15766c893738d6386d7623d066d))
|
||||
* **textarea:** component can be used outside of ion-item ([#26674](https://github.com/ionic-team/ionic/issues/26674)) ([8d3edd0](https://github.com/ionic-team/ionic/commit/8d3edd049dfdb2a781d80da810a5bee3b490b7b6))
|
||||
* **textarea:** ionChange will only emit from user committed changes ([#25953](https://github.com/ionic-team/ionic/issues/25953)) ([68bae80](https://github.com/ionic-team/ionic/commit/68bae80a51dae70c4cd7e598c1f2eabb025f173e))
|
||||
* **toast:** add ability to use toast inline ([#26215](https://github.com/ionic-team/ionic/issues/26215)) ([003de44](https://github.com/ionic-team/ionic/commit/003de44d9283d23ecfdf1ab5fada2b7a372a4ca9))
|
||||
* **toggle:** component can be used outside of ion-item ([#26357](https://github.com/ionic-team/ionic/issues/26357)) ([c74901c](https://github.com/ionic-team/ionic/commit/c74901c973c153ce1954646ef7944f7db193ea28)), closes [#25570](https://github.com/ionic-team/ionic/issues/25570) [#23213](https://github.com/ionic-team/ionic/issues/23213)
|
||||
* **toggle:** ionChange will only emit from user committed changes ([#26078](https://github.com/ionic-team/ionic/issues/26078)) ([85d3bd9](https://github.com/ionic-team/ionic/commit/85d3bd99be3ae0f33a480e256381f7125f3389fd))
|
||||
* **virtual-scroll:** remove virtual scroll component ([#25808](https://github.com/ionic-team/ionic/issues/25808)) ([1eb6fd0](https://github.com/ionic-team/ionic/commit/1eb6fd04d7f8c7ccd7dac08d085dc90d9f6283cc))
|
||||
|
||||
|
||||
### Performance Improvements
|
||||
|
||||
* **item:** remove delegatesFocus patch for iOS 13 ([#25822](https://github.com/ionic-team/ionic/issues/25822)) ([ee3467c](https://github.com/ionic-team/ionic/commit/ee3467c9f1aa415ff6bda19e460b5c3482b94efc))
|
||||
* **many:** reduce delay when performing overlay or page transitions ([#26189](https://github.com/ionic-team/ionic/issues/26189)) ([30e3a14](https://github.com/ionic-team/ionic/commit/30e3a1485d9bc94b31c297bdd05fa847b4bcfb56)), closes [#24346](https://github.com/ionic-team/ionic/issues/24346)
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* **config:** The supported version of Firefox for Ionic v7 has changed to Firefox v70+
|
||||
* **input, searchbar, select, textarea:** The default value for the `--placeholder-opacity` CSS Variable on `ion-input`, `ion-searchbar`, `ion-select`, and `ion-textarea` has been updated to `0.6`.
|
||||
* **select:** The `icon` CSS Shadow Part for `ion-select` now targets an `ion-icon` component.
|
||||
* **datetime:** The haptics when swiping the wheel picker are now enabled only on iOS.
|
||||
* **toggle:** The `--background` and `--background-checked` variables have been renamed to `--track-background` and `--track-background-checked`, respectively.
|
||||
* **angular:** Datetime:
|
||||
|
||||
Passing the empty string to the `value` property will now error as it is not a valid ISO-8601 value.
|
||||
|
||||
Angular:
|
||||
|
||||
`null` values on form components will no longer be converted to the empty string (`''`) or `false`. This impacts `ion-checkbox`, `ion-datetime`, `ion-input`, `ion-radio`, `ion-radio-group`, ion-range`, `ion-searchbar`, `ion-segment`, `ion-select`, `ion-textarea`, and `ion-toggle`.
|
||||
* **picker:** The `refresh` key has been removed from the `PickerColumn` interface. Developers should use the `columns` property to refresh the `ion-picker` view.
|
||||
* **input, textarea:** The `detail` payload for the `ionInput` event on `ion-input` and `ion-textarea` now contains an object with the current `value` as well as the native event that triggered `ionInput`.
|
||||
* **datetime:** Datetime no longer incorrectly reports the time zone when `value` is updated. Datetime does not manage time zones, so any time zone information provided is ignored.
|
||||
* **types:** `ActionSheetAttributes`, `AlertAttributes`, `AlertTextareaAttributes`, `AlertInputAttributes`, `LoadingAttributes`, `ModalAttributes`, `PickerAttributes`, `PopoverAttributes`, and `ToastAttributes` have been removed. Developers should use `{ [key: string]: any }` instead.
|
||||
* **card-header:** - The card header has ben changed to a flex container with direction set to `column` (top to bottom). In `ios` mode the direction is set to `column-reverse` which results in the subtitle displaying on top of the title.
|
||||
* **accordion-group:** Accordion Group no longer automatically adjusts the `value` property when passed an array and `multiple="false"`. Developers should update their apps to ensure they are using the API correctly.
|
||||
* **select:** `ionChange` is no longer emitted when the `value` of `ion-select` is modified externally. `ionChange` is only emitted from user committed changes, such as confirming a selected option in the select's overlay.
|
||||
* **modal:** - The `swipeToClose` property has been removed in favor of `canDismiss`.
|
||||
- The `canDismiss` property now defaults to `true` and can no longer be set to `undefined`.
|
||||
* **checkbox:** `ionChange` is no longer emitted when the `checked` property of `ion-checkbox` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the checkbox.
|
||||
* **accordion:** `ionChange` is no longer emitted when the `value` of `ion-accordion-group` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the accordion header.
|
||||
* **core:** The `[hidden]` attribute has been removed from Ionic's global stylesheet. The `[hidden]` attribute can continue to be used, but developers will get the [native `hidden` implementation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) instead. The main difference is that the native implementation is easier to override using `display` than Ionic's implementation.
|
||||
|
||||
Developers can add the following CSS to their global stylesheet if they need the old behavior:
|
||||
|
||||
```css
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
```
|
||||
* **overlays:** Ionic now listens on the `keydown` event instead of the `keyup` event when determining when to dismiss overlays via the "Escape" key. Any applications that were listening on `keyup` to suppress this behavior should listen on `keydown` instead.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [6.6.0](https://github.com/ionic-team/ionic/compare/v6.5.7...v6.6.0) (2023-03-01)
|
||||
|
||||
2
core/src/components.d.ts
vendored
2
core/src/components.d.ts
vendored
@@ -5807,7 +5807,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"onDidDismiss"?: (event: IonModalCustomEvent<OverlayEventDetail>) => void;
|
||||
/**
|
||||
* Emitted after the modal has presented. Shorthand for ionModalWillDismiss.
|
||||
* Emitted after the modal has presented. Shorthand for ionModalDidPresent.
|
||||
*/
|
||||
"onDidPresent"?: (event: IonModalCustomEvent<void>) => void;
|
||||
/**
|
||||
|
||||
@@ -72,6 +72,7 @@
|
||||
|
||||
:host(.button-clear) {
|
||||
--background-activated: transparent;
|
||||
--background-activated-opacity: 0;
|
||||
--background-focused: #{ion-color(primary, base)};
|
||||
--background-hover: transparent;
|
||||
--background-focused-opacity: .1;
|
||||
@@ -129,25 +130,6 @@
|
||||
}
|
||||
|
||||
|
||||
// iOS Button Activated
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.button-clear.ion-activated) {
|
||||
opacity: #{$button-ios-clear-opacity-activated};
|
||||
}
|
||||
|
||||
:host(.button-outline.ion-activated.ion-color) .button-native {
|
||||
color: current-color(contrast);
|
||||
|
||||
&::after {
|
||||
background: current-color(base);
|
||||
}
|
||||
}
|
||||
|
||||
:host(.button-solid.ion-color.ion-activated) .button-native::after {
|
||||
background: #{current-color(shade)};
|
||||
}
|
||||
|
||||
// iOS Button Focused
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -164,14 +146,16 @@
|
||||
background: #{current-color(shade)};
|
||||
}
|
||||
|
||||
|
||||
// iOS Button Hover
|
||||
// --------------------------------------------------
|
||||
|
||||
@media (any-hover: hover) {
|
||||
// Clear and outline buttons use opacity so set
|
||||
// background to transparent
|
||||
:host(.button-clear:hover),
|
||||
:host(.button-outline:hover) {
|
||||
// background to transparent, but this shouldn't
|
||||
// apply on top of activated
|
||||
:host(.button-clear:not(.ion-activated):hover),
|
||||
:host(.button-outline:not(.ion-activated):hover) {
|
||||
opacity: #{$button-ios-clear-opacity-hover};
|
||||
}
|
||||
|
||||
@@ -190,10 +174,31 @@
|
||||
}
|
||||
|
||||
// Solid buttons inside of a toolbar should use a tint of the current
|
||||
// background so use white to tint it
|
||||
:host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native::after {
|
||||
// background so use white to tint it, but this should not apply
|
||||
// when activated
|
||||
:host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color):not(.ion-activated)) .button-native::after {
|
||||
background: #fff;
|
||||
|
||||
opacity: 0.10;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Button Activated
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.button-clear.ion-activated) {
|
||||
opacity: #{$button-ios-clear-opacity-activated};
|
||||
}
|
||||
|
||||
:host(.button-outline.ion-activated.ion-color) .button-native {
|
||||
color: current-color(contrast);
|
||||
|
||||
&::after {
|
||||
background: current-color(base);
|
||||
}
|
||||
}
|
||||
|
||||
:host(.button-solid.ion-color.ion-activated) .button-native::after {
|
||||
background: #{current-color(shade)};
|
||||
}
|
||||
|
||||
@@ -246,17 +246,6 @@ ion-ripple-effect {
|
||||
@include button-state();
|
||||
}
|
||||
|
||||
// Button Activated
|
||||
:host(.ion-activated) {
|
||||
color: var(--color-activated);
|
||||
}
|
||||
|
||||
:host(.ion-activated) .button-native::after {
|
||||
background: var(--background-activated);
|
||||
|
||||
opacity: var(--background-activated-opacity);
|
||||
}
|
||||
|
||||
// Button Focused
|
||||
:host(.ion-focused) {
|
||||
color: var(--color-focused);
|
||||
@@ -281,6 +270,17 @@ ion-ripple-effect {
|
||||
}
|
||||
}
|
||||
|
||||
// Button Activated
|
||||
:host(.ion-activated) {
|
||||
color: var(--color-activated);
|
||||
}
|
||||
|
||||
:host(.ion-activated) .button-native::after {
|
||||
background: var(--background-activated);
|
||||
|
||||
opacity: var(--background-activated-opacity);
|
||||
}
|
||||
|
||||
|
||||
// Button Colors
|
||||
// --------------------------------------------------
|
||||
@@ -305,6 +305,7 @@ ion-ripple-effect {
|
||||
color: current-color(base);
|
||||
}
|
||||
|
||||
|
||||
// Button in Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -320,3 +321,11 @@ ion-ripple-effect {
|
||||
background: #{var(--ion-toolbar-color, var(--background))};
|
||||
color: #{var(--ion-toolbar-background, var(--color))};
|
||||
}
|
||||
|
||||
// Activated Button in Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
|
||||
background: var(--ion-toolbar-color, var(--color));
|
||||
color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
|
||||
}
|
||||
|
||||
@@ -48,6 +48,7 @@
|
||||
:host-context(.ion-color)::slotted(*) .button-outline {
|
||||
--color-activated: #{current-color(base)};
|
||||
--color-focused: #{current-color(contrast)};
|
||||
--background-activated: #{current-color(contrast)};
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { printIonError } from '@utils/logging';
|
||||
|
||||
import { printIonError } from '../../../utils/logging';
|
||||
import type {
|
||||
DatetimeHighlight,
|
||||
DatetimeHighlightCallback,
|
||||
|
||||
@@ -294,7 +294,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
|
||||
|
||||
/**
|
||||
* Emitted after the modal has presented.
|
||||
* Shorthand for ionModalWillDismiss.
|
||||
* Shorthand for ionModalDidPresent.
|
||||
*/
|
||||
@Event({ eventName: 'didPresent' }) didPresentShorthand!: EventEmitter<void>;
|
||||
|
||||
|
||||
@@ -75,6 +75,7 @@ test.describe('modal: rendering', () => {
|
||||
await ionModalDidPresent.next();
|
||||
|
||||
const modal = await page.locator('ion-modal');
|
||||
await expect(modal).toHaveClass(/show-modal/);
|
||||
|
||||
await page.setIonViewport();
|
||||
|
||||
@@ -87,6 +88,7 @@ test.describe('modal: rendering', () => {
|
||||
await ionModalWillDismiss.next();
|
||||
await ionModalDidDismiss.next();
|
||||
|
||||
await expect(modal).not.toHaveClass(/show-modal/);
|
||||
await expect(modal).toBeHidden();
|
||||
};
|
||||
|
||||
|
||||
@@ -23,13 +23,7 @@ test.describe('popover: dismissOnSelect', async () => {
|
||||
await expect(popover).toBeVisible();
|
||||
});
|
||||
|
||||
test('should not dismiss a popover when clicking a click trigger', async ({ page, skip }) => {
|
||||
// TODO FW-1486
|
||||
skip.browser(
|
||||
'firefox',
|
||||
'Parent popover disappears when click trigger is clicked. Cannot replicate locally. Needs further investigation.'
|
||||
);
|
||||
|
||||
test('should not dismiss a popover when clicking a click trigger', async ({ page }) => {
|
||||
const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
|
||||
|
||||
await openPopover(page, 'click-trigger');
|
||||
|
||||
@@ -18,7 +18,11 @@
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Toolbar</ion-title>
|
||||
<ion-title> Toolbar </ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-title> This is the title that never ends. It just goes on and on my friend. </ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
@@ -35,11 +39,7 @@
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Subheader</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
|
||||
<ion-title> Toolbar </ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
@@ -56,11 +56,135 @@
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
|
||||
<ion-title> This is a long title with buttons. It just goes on and on my friend. </ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button color="secondary">
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Defaults</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button class="ion-activated">
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button class="ion-activated">
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button color="secondary" class="ion-activated">
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Defaults.activated</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button fill="solid">
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="solid">
|
||||
<ion-icon slot="start" name="person-circle"></ion-icon>
|
||||
Solid
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Solid</ion-title>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="solid" color="secondary">
|
||||
Help
|
||||
<ion-icon slot="end" name="help-circle"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button href="#" fill="solid" class="ion-activated">
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="solid" class="ion-activated">
|
||||
<ion-icon slot="start" name="person-circle"></ion-icon>
|
||||
Solid
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Solid Activated</ion-title>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="solid" color="secondary" class="ion-activated">
|
||||
Help
|
||||
<ion-icon slot="end" name="help-circle"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button fill="outline">
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="outline">
|
||||
<ion-icon slot="start" name="star"></ion-icon>
|
||||
Star
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button color="secondary" fill="outline">
|
||||
Info
|
||||
<ion-icon slot="end" name="information-circle"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Outline</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button fill="outline" class="ion-activated">
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated">
|
||||
<ion-icon slot="start" name="star"></ion-icon>
|
||||
Star
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button color="secondary" fill="outline" class="ion-activated">
|
||||
Info
|
||||
<ion-icon slot="end" name="information-circle"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Outline.activated</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button> Go Back </ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button href="#"> Edit </ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Text Only</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content" fullscreen="true"> Content </ion-content>
|
||||
<ion-content id="content" fullscreen="true" class="ion-padding">
|
||||
<h1>Content</h1>
|
||||
|
||||
<p>Here's a small text description for the content. Nothing more, nothing less.</p>
|
||||
</ion-content>
|
||||
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 41 KiB |
@@ -23,10 +23,8 @@
|
||||
<ion-button fill="solid" color="danger">
|
||||
<ion-icon slot="icon-only" name="add"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="outline">Outline</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="clear">Clear</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
@@ -36,147 +34,140 @@
|
||||
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button fill="solid" color="danger">
|
||||
<ion-icon slot="icon-only" name="add"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="solid">Solid</ion-button>
|
||||
<ion-button fill="clear">Clear</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="clear">Clear</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="clear" class="ion-focused">Clear</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated">Clear</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Secondary</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="tertiary">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button fill="solid" color="danger">
|
||||
<ion-icon slot="icon-only" name="add"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="outline">Outline</ion-button>
|
||||
<ion-button fill="solid">Solid</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="clear">Clear</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="solid" class="ion-focused">Solid</ion-button>
|
||||
<ion-button fill="solid" class="ion-activated">Solid</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Tertiary</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="success">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button fill="solid" color="danger">
|
||||
<ion-icon slot="icon-only" name="add"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="solid">Solid</ion-button>
|
||||
<ion-button fill="outline">Outline</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="clear">Clear</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="outline" class="ion-focused">Outline</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated">Outline</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Success</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="warning">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button fill="solid" color="danger">
|
||||
<ion-icon slot="icon-only" name="add"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="outline">Outline</ion-button>
|
||||
<ion-button fill="clear">Clear</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="clear">Clear</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="clear" class="ion-focused">Clear</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated">Clear</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Warning</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="danger">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button fill="solid" color="danger">
|
||||
<ion-icon slot="icon-only" name="add"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="solid">Solid</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="clear">Clear</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="solid" class="ion-focused">Solid</ion-button>
|
||||
<ion-button fill="solid" class="ion-activated">Solid</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Danger</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="light">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button fill="solid" color="danger">
|
||||
<ion-icon slot="icon-only" name="add"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="solid">Solid</ion-button>
|
||||
<ion-button fill="outline">Outline</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="outline">Outline</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="outline" class="ion-focused">Outline</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated">Outline</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Light</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="medium">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button fill="solid" color="danger">
|
||||
<ion-icon slot="icon-only" name="add"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="solid">Solid</ion-button>
|
||||
<ion-button fill="clear">Clear</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="clear">Clear</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="clear" class="ion-focused">Clear</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated">Clear</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Medium</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="dark">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button fill="solid" color="danger">
|
||||
<ion-icon slot="icon-only" name="add"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="solid">Solid</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="clear">Clear</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="solid" class="ion-focused">Solid</ion-button>
|
||||
<ion-button fill="solid" class="ion-activated">Solid</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Dark</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<hr />
|
||||
|
||||
<ion-toolbar class="custom-toolbar">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button fill="solid" color="danger">
|
||||
<ion-icon slot="icon-only" name="add"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="solid">Solid</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="clear">Clear</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Custom</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar class="custom-toolbar">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button fill="clear">Clear</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="clear" class="ion-focused">Clear</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated">Clear</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Custom</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar class="custom-toolbar">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button fill="solid">Solid</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="solid" class="ion-focused">Solid</ion-button>
|
||||
<ion-button fill="solid" class="ion-activated">Solid</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Custom</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar class="custom-toolbar">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button fill="outline">Outline</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="outline" class="ion-focused">Outline</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated">Outline</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Custom</ion-title>
|
||||
</ion-toolbar>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
@@ -5,8 +5,8 @@ test.describe('toolbar: colors', () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.goto(`/src/components/toolbar/test/colors`);
|
||||
|
||||
// only capture the container to avoid extra white space
|
||||
const container = page.locator('#toolbars');
|
||||
await expect(container).toHaveScreenshot(`toolbar-colors-${page.getSnapshotSettings()}.png`);
|
||||
await page.setIonViewport();
|
||||
|
||||
await expect(page).toHaveScreenshot(`toolbar-colors-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
});
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 40 KiB |
@@ -91,8 +91,12 @@ html.ios ion-modal ion-toolbar {
|
||||
* Note 2: This should only apply to non-card and
|
||||
* non-sheet modals. Card and sheet modals have their
|
||||
* own criteria for displaying backdrops/box shadows.
|
||||
*
|
||||
* Do not use :not(.overlay-hidden) in place of
|
||||
* .show-modal because that triggers a memory
|
||||
* leak in Blink: https://bugs.chromium.org/p/chromium/issues/detail?id=1418768
|
||||
*/
|
||||
ion-modal.modal-default:not(.overlay-hidden) ~ ion-modal.modal-default {
|
||||
ion-modal.modal-default.show-modal ~ ion-modal.modal-default {
|
||||
--backdrop-opacity: 0;
|
||||
--box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -90,7 +90,7 @@
|
||||
<ion-button fill="outline">Outline</ion-button>
|
||||
</ion-buttons>
|
||||
|
||||
<ion-title>Lists</ion-title>
|
||||
<ion-title>Default Buttons</ion-title>
|
||||
|
||||
<ion-buttons slot="primary">
|
||||
<ion-back-button color="secondary" default-href="/"></ion-back-button>
|
||||
@@ -101,6 +101,7 @@
|
||||
<ion-button color="secondary" fill="outline">Outline</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button class="ion-focused" default-href="/"></ion-back-button>
|
||||
@@ -111,7 +112,7 @@
|
||||
<ion-button class="ion-focused" fill="outline">Outline</ion-button>
|
||||
</ion-buttons>
|
||||
|
||||
<ion-title>Lists</ion-title>
|
||||
<ion-title>Focused Buttons</ion-title>
|
||||
|
||||
<ion-buttons slot="primary">
|
||||
<ion-back-button color="secondary" class="ion-focused" default-href="/"></ion-back-button>
|
||||
@@ -122,6 +123,29 @@
|
||||
<ion-button color="secondary" class="ion-focused" fill="outline">Outline</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button class="ion-activated" default-href="/"></ion-back-button>
|
||||
<ion-menu-button class="ion-activated" auto-hide="false"></ion-menu-button>
|
||||
<ion-button class="ion-activated">Default</ion-button>
|
||||
<ion-button class="ion-activated" fill="solid">Solid</ion-button>
|
||||
<ion-button class="ion-activated" fill="clear">Clear</ion-button>
|
||||
<ion-button class="ion-activated" fill="outline">Outline</ion-button>
|
||||
</ion-buttons>
|
||||
|
||||
<ion-title>Activated Buttons</ion-title>
|
||||
|
||||
<ion-buttons slot="primary">
|
||||
<ion-back-button color="secondary" class="ion-activated" default-href="/"></ion-back-button>
|
||||
<ion-menu-button color="secondary" class="ion-activated" auto-hide="false"></ion-menu-button>
|
||||
<ion-button color="secondary" class="ion-activated">Default</ion-button>
|
||||
<ion-button color="secondary" class="ion-activated" fill="solid">Solid</ion-button>
|
||||
<ion-button color="secondary" class="ion-activated" fill="clear">Clear</ion-button>
|
||||
<ion-button color="secondary" class="ion-activated" fill="outline">Outline</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-segment value="default" class="theme-picker">
|
||||
<ion-segment-button value="default">
|
||||
|
||||
@@ -3,6 +3,15 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [6.6.1](https://github.com/ionic-team/ionic-docs/compare/v6.6.0...v6.6.1) (2023-03-08)
|
||||
|
||||
|
||||
**Note:** Version bump only for package @ionic/docs
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.0.0-rc.0](https://github.com/ionic-team/ionic-docs/compare/v7.0.0-beta.6...v7.0.0-rc.0) (2023-03-01)
|
||||
|
||||
**Note:** Version bump only for package @ionic/docs
|
||||
@@ -11,16 +20,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.6](https://github.com/ionic-team/ionic-docs/compare/v6.6.0...v7.0.0-beta.6) (2023-03-01)
|
||||
|
||||
**Note:** Version bump only for package @ionic/docs
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.5](https://github.com/ionic-team/ionic-docs/compare/v7.0.0-beta.4...v7.0.0-beta.5) (2023-02-27)
|
||||
# [7.0.0-beta.6](https://github.com/ionic-team/ionic-docs/compare/v7.0.0-beta.5...v7.0.0-beta.6) (2023-03-01)
|
||||
|
||||
**Note:** Version bump only for package @ionic/docs
|
||||
|
||||
@@ -44,6 +44,22 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.5](https://github.com/ionic-team/ionic-docs/compare/v7.0.0-beta.4...v7.0.0-beta.5) (2023-02-27)
|
||||
|
||||
**Note:** Version bump only for package @ionic/docs
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.4](https://github.com/ionic-team/ionic-docs/compare/v7.0.0-beta.3...v7.0.0-beta.4) (2023-02-22)
|
||||
|
||||
**Note:** Version bump only for package @ionic/docs
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [6.5.6](https://github.com/ionic-team/ionic-docs/compare/v6.5.5...v6.5.6) (2023-02-22)
|
||||
|
||||
**Note:** Version bump only for package @ionic/docs
|
||||
|
||||
@@ -3,6 +3,14 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [6.6.1](https://github.com/ionic-team/ionic/compare/v6.6.0...v6.6.1) (2023-03-08)
|
||||
|
||||
**Note:** Version bump only for package @ionic/angular-server
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.0.0-rc.0](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.6...v7.0.0-rc.0) (2023-03-01)
|
||||
|
||||
**Note:** Version bump only for package @ionic/angular-server
|
||||
@@ -11,7 +19,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.6](https://github.com/ionic-team/ionic/compare/v6.6.0...v7.0.0-beta.6) (2023-03-01)
|
||||
# [7.0.0-beta.6](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.5...v7.0.0-beta.6) (2023-03-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
@@ -56,6 +64,14 @@ The dev-preview `environmentInjector` property has been removed from `ion-tabs`
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.4](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.3...v7.0.0-beta.4) (2023-02-22)
|
||||
|
||||
**Note:** Version bump only for package @ionic/angular-server
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [6.5.6](https://github.com/ionic-team/ionic/compare/v6.5.5...v6.5.6) (2023-02-22)
|
||||
|
||||
**Note:** Version bump only for package @ionic/angular-server
|
||||
|
||||
@@ -3,6 +3,17 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [6.6.1](https://github.com/ionic-team/ionic/compare/v6.6.0...v6.6.1) (2023-03-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **react:** inline overlays dismiss when parent component unmounts ([#26245](https://github.com/ionic-team/ionic/issues/26245)) ([c0e1bf9](https://github.com/ionic-team/ionic/commit/c0e1bf92c4487c2ec8a117957cf84a2ce00f5fd8)), closes [#25775](https://github.com/ionic-team/ionic/issues/25775) [#26185](https://github.com/ionic-team/ionic/issues/26185)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.0.0-rc.0](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.6...v7.0.0-rc.0) (2023-03-01)
|
||||
|
||||
**Note:** Version bump only for package @ionic/react-router
|
||||
@@ -11,12 +22,9 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.6](https://github.com/ionic-team/ionic/compare/v6.6.0...v7.0.0-beta.6) (2023-03-01)
|
||||
# [7.0.0-beta.6](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.5...v7.0.0-beta.6) (2023-03-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **angular:** devs can import ionic/angular styles in css ([#26875](https://github.com/ionic-team/ionic/issues/26875)) ([0d2fac2](https://github.com/ionic-team/ionic/commit/0d2fac2eefd610271fbbbecc36e844b6b289dfee))
|
||||
**Note:** Version bump only for package @ionic/react-router
|
||||
|
||||
|
||||
|
||||
@@ -46,6 +54,14 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.4](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.3...v7.0.0-beta.4) (2023-02-22)
|
||||
|
||||
**Note:** Version bump only for package @ionic/react-router
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [6.5.6](https://github.com/ionic-team/ionic/compare/v6.5.5...v6.5.6) (2023-02-22)
|
||||
|
||||
**Note:** Version bump only for package @ionic/react-router
|
||||
|
||||
@@ -3,6 +3,17 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [6.6.1](https://github.com/ionic-team/ionic/compare/v6.6.0...v6.6.1) (2023-03-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **react:** inline overlays dismiss when parent component unmounts ([#26245](https://github.com/ionic-team/ionic/issues/26245)) ([c0e1bf9](https://github.com/ionic-team/ionic/commit/c0e1bf92c4487c2ec8a117957cf84a2ce00f5fd8)), closes [#25775](https://github.com/ionic-team/ionic/issues/25775) [#26185](https://github.com/ionic-team/ionic/issues/26185)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.0.0-rc.0](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.6...v7.0.0-rc.0) (2023-03-01)
|
||||
|
||||
**Note:** Version bump only for package @ionic/react
|
||||
@@ -11,12 +22,9 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.6](https://github.com/ionic-team/ionic/compare/v6.6.0...v7.0.0-beta.6) (2023-03-01)
|
||||
# [7.0.0-beta.6](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.5...v7.0.0-beta.6) (2023-03-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **angular:** devs can import ionic/angular styles in css ([#26875](https://github.com/ionic-team/ionic/issues/26875)) ([0d2fac2](https://github.com/ionic-team/ionic/commit/0d2fac2eefd610271fbbbecc36e844b6b289dfee))
|
||||
**Note:** Version bump only for package @ionic/react
|
||||
|
||||
|
||||
|
||||
@@ -56,6 +64,14 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.4](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.3...v7.0.0-beta.4) (2023-02-22)
|
||||
|
||||
**Note:** Version bump only for package @ionic/react
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [6.5.6](https://github.com/ionic-team/ionic/compare/v6.5.5...v6.5.6) (2023-02-22)
|
||||
|
||||
**Note:** Version bump only for package @ionic/react
|
||||
|
||||
@@ -3,6 +3,15 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
|
||||
## [6.6.1](https://github.com/ionic-team/ionic/compare/v6.6.0...v6.6.1) (2023-03-08)
|
||||
|
||||
**Note:** Version bump only for package @ionic/vue-router
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.0.0-rc.0](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.6...v7.0.0-rc.0) (2023-03-01)
|
||||
|
||||
**Note:** Version bump only for package @ionic/vue-router
|
||||
@@ -11,7 +20,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.6](https://github.com/ionic-team/ionic/compare/v6.6.0...v7.0.0-beta.6) (2023-03-01)
|
||||
# [7.0.0-beta.6](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.5...v7.0.0-beta.6) (2023-03-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
@@ -46,6 +55,14 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.4](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.3...v7.0.0-beta.4) (2023-02-22)
|
||||
|
||||
**Note:** Version bump only for package @ionic/vue-router
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [6.5.6](https://github.com/ionic-team/ionic/compare/v6.5.5...v6.5.6) (2023-02-22)
|
||||
|
||||
**Note:** Version bump only for package @ionic/vue-router
|
||||
|
||||
@@ -3,6 +3,14 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [6.6.1](https://github.com/ionic-team/ionic/compare/v6.6.0...v6.6.1) (2023-03-08)
|
||||
|
||||
**Note:** Version bump only for package @ionic/vue
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.0.0-rc.0](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.6...v7.0.0-rc.0) (2023-03-01)
|
||||
|
||||
**Note:** Version bump only for package @ionic/vue
|
||||
@@ -11,12 +19,9 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.6](https://github.com/ionic-team/ionic/compare/v6.6.0...v7.0.0-beta.6) (2023-03-01)
|
||||
# [7.0.0-beta.6](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.5...v7.0.0-beta.6) (2023-03-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **angular:** devs can import ionic/angular styles in css ([#26875](https://github.com/ionic-team/ionic/issues/26875)) ([0d2fac2](https://github.com/ionic-team/ionic/commit/0d2fac2eefd610271fbbbecc36e844b6b289dfee))
|
||||
**Note:** Version bump only for package @ionic/vue]
|
||||
|
||||
|
||||
|
||||
@@ -56,6 +61,14 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.4](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.3...v7.0.0-beta.4) (2023-02-22)
|
||||
|
||||
**Note:** Version bump only for package @ionic/vue
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [6.5.6](https://github.com/ionic-team/ionic/compare/v6.5.5...v6.5.6) (2023-02-22)
|
||||
|
||||
**Note:** Version bump only for package @ionic/vue
|
||||
|
||||
Reference in New Issue
Block a user