Compare commits
45 Commits
v7.0.6
...
sp/tabs-cs
| Author | SHA1 | Date | |
|---|---|---|---|
|
06406b59ef | ||
|
|
77062b4905 | ||
|
|
31c21f6aad | ||
|
|
3d4e38c425 | ||
|
|
6bbe4c99d2 | ||
|
|
0e7359c07f | ||
|
|
01f99597f7 | ||
|
|
02678f3652 | ||
|
|
e114fe40d0 | ||
|
|
b98470ff85 | ||
|
|
9a89ae7998 | ||
|
|
63b7ad559e | ||
|
|
c75cd9a189 | ||
|
|
69928aa16e | ||
|
|
c1eabb7333 | ||
|
|
134c912992 | ||
|
|
475cd2d7de | ||
|
|
d3dd72fff6 | ||
|
|
75902b9257 | ||
|
|
de1dc6b696 | ||
|
|
07f013c9ac | ||
|
|
6326a3a9c1 | ||
|
|
d71a2edf4c | ||
|
|
a59eefb6a3 | ||
|
|
995a848575 | ||
|
|
ae88c3a25f | ||
|
|
18d16633b3 | ||
|
|
3e17d29fe7 | ||
|
|
70d9854d8d | ||
|
|
9dc126d387 | ||
|
|
13d2d115d4 | ||
|
|
381de0b3d3 | ||
|
|
eb2772c0ce | ||
|
|
e5ae45d32f | ||
|
|
3f07297dff | ||
|
|
3cbc592154 | ||
|
|
921bfae9e6 | ||
|
|
7b7e05aa69 | ||
|
|
0b23814e0b | ||
|
|
b64a03ad48 | ||
|
|
c985237048 | ||
|
|
eabc6f3576 | ||
|
|
7c7fb2b1a3 | ||
|
|
76d428a507 | ||
|
|
e246045987 |
1
.github/dependabot.yml
vendored
@@ -13,3 +13,4 @@ updates:
|
||||
- dependency-name: "@stencil/react-output-target"
|
||||
- dependency-name: "@stencil/sass"
|
||||
- dependency-name: "@stencil/vue-output-target"
|
||||
- dependency-name: "ionicons"
|
||||
|
||||
@@ -4,9 +4,6 @@ runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
with:
|
||||
# Checkout the latest commit in this branch
|
||||
ref: ${{ github.event.pull_request.head.sha }}
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16.x
|
||||
|
||||
3
.github/workflows/build.yml
vendored
@@ -17,9 +17,6 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
with:
|
||||
# Checkout the latest commit in this branch
|
||||
ref: ${{ github.event.pull_request.head.sha }}
|
||||
- uses: ./.github/workflows/actions/build-core
|
||||
|
||||
test-core-clean-build:
|
||||
|
||||
47
CHANGELOG.md
@@ -3,6 +3,53 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **core:** handle uncaught native keyboard exceptions ([#27514](https://github.com/ionic-team/ionic-framework/issues/27514)) ([0e7359c](https://github.com/ionic-team/ionic-framework/commit/0e7359c07f53eccb362ff2bf331396c0376ba6f3)), closes [#27503](https://github.com/ionic-team/ionic-framework/issues/27503)
|
||||
* **react, vue:** inline modals apply ion-page class ([#27481](https://github.com/ionic-team/ionic-framework/issues/27481)) ([02678f3](https://github.com/ionic-team/ionic-framework/commit/02678f3652be5139cf0c17d0f1260c145acd1a48)), closes [#27470](https://github.com/ionic-team/ionic-framework/issues/27470)
|
||||
* **segment:** remove duplicate ripple effect on pointerup ([#27448](https://github.com/ionic-team/ionic-framework/issues/27448)) ([01f9959](https://github.com/ionic-team/ionic-framework/commit/01f99597f71b35a60a70f6d76c1e3e1917978d6d)), closes [#27338](https://github.com/ionic-team/ionic-framework/issues/27338)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.0.8](https://github.com/ionic-team/ionic-framework/compare/v7.0.7...v7.0.8) (2023-05-24)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **many:** update form controls (radio, checkbox, toggle, input, select) to have consistent disabled opacity ([#27396](https://github.com/ionic-team/ionic-framework/issues/27396)) ([995a848](https://github.com/ionic-team/ionic-framework/commit/995a8485751bb4058a59c7e958b1200f8f6539fa)), closes [#27184](https://github.com/ionic-team/ionic-framework/issues/27184)
|
||||
* **picker-column:** correct RTL direction ([#27460](https://github.com/ionic-team/ionic-framework/issues/27460)) ([d3dd72f](https://github.com/ionic-team/ionic-framework/commit/d3dd72fff67b3b437106e187e75f798653d105e2)), closes [#21205](https://github.com/ionic-team/ionic-framework/issues/21205)
|
||||
* **popover:** blur translucent popover in chromium ([#27484](https://github.com/ionic-team/ionic-framework/issues/27484)) ([a59eefb](https://github.com/ionic-team/ionic-framework/commit/a59eefb6a312d338895c46d80320ebe91cccac23)), closes [#22176](https://github.com/ionic-team/ionic-framework/issues/22176)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.0.7](https://github.com/ionic-team/ionic-framework/compare/v7.0.6...v7.0.7) (2023-05-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **accordion:** state updates if value changes ([#27463](https://github.com/ionic-team/ionic-framework/issues/27463)) ([3cbc592](https://github.com/ionic-team/ionic-framework/commit/3cbc592154a2b76cf63dfef67cb63de94dcec887)), closes [#27461](https://github.com/ionic-team/ionic-framework/issues/27461)
|
||||
* **checkbox, radio:** update border colors to match MD2 spec ([#27357](https://github.com/ionic-team/ionic-framework/issues/27357)) ([eabc6f3](https://github.com/ionic-team/ionic-framework/commit/eabc6f357675919dd82bea29a1776c0ca1bf89fd)), closes [#27170](https://github.com/ionic-team/ionic-framework/issues/27170)
|
||||
* **datetime-button:** log error if non-datetime instance is passed ([#27456](https://github.com/ionic-team/ionic-framework/issues/27456)) ([7b7e05a](https://github.com/ionic-team/ionic-framework/commit/7b7e05aa697a51ebfac42f96aa9510d4d96336de))
|
||||
* **footer, tab-bar:** wait for resize before re-showing ([#27417](https://github.com/ionic-team/ionic-framework/issues/27417)) ([70d9854](https://github.com/ionic-team/ionic-framework/commit/70d9854d8df5259ed715e282a6ca40ca3bea6192)), closes [#25990](https://github.com/ionic-team/ionic-framework/issues/25990)
|
||||
* **many:** form controls labels have increased margin ([#27447](https://github.com/ionic-team/ionic-framework/issues/27447)) ([381de0b](https://github.com/ionic-team/ionic-framework/commit/381de0b3d324805161232d8556fffd7022fcd84c)), closes [#27129](https://github.com/ionic-team/ionic-framework/issues/27129)
|
||||
* **picker-column:** dynamically change options ([#27359](https://github.com/ionic-team/ionic-framework/issues/27359)) ([7c7fb2b](https://github.com/ionic-team/ionic-framework/commit/7c7fb2b1a3bf35b123716b2f975231ceb01dcc07)), closes [#21763](https://github.com/ionic-team/ionic-framework/issues/21763)
|
||||
* **picker-column:** prevSelected is set to the correct value ([#27458](https://github.com/ionic-team/ionic-framework/issues/27458)) ([9dc126d](https://github.com/ionic-team/ionic-framework/commit/9dc126d38727c1ca16a75cfa65daab9a630be678)), closes [#21764](https://github.com/ionic-team/ionic-framework/issues/21764)
|
||||
* **select:** floating label covers placeholder when when blurred ([#27446](https://github.com/ionic-team/ionic-framework/issues/27446)) ([921bfae](https://github.com/ionic-team/ionic-framework/commit/921bfae9e68257734a9695cab9245bb335eb88fa)), closes [#27201](https://github.com/ionic-team/ionic-framework/issues/27201)
|
||||
* **select:** modern syntax works with forms ([#27480](https://github.com/ionic-team/ionic-framework/issues/27480)) ([13d2d11](https://github.com/ionic-team/ionic-framework/commit/13d2d115d44f109c3ea2a47bcb518c6090126325)), closes [#27478](https://github.com/ionic-team/ionic-framework/issues/27478)
|
||||
* **spinner:** allow resizing of dots, bubbles, and circles ([#27424](https://github.com/ionic-team/ionic-framework/issues/27424)) ([e5ae45d](https://github.com/ionic-team/ionic-framework/commit/e5ae45d32fde7328a704a6ffa18940106a069fa2)), closes [#18115](https://github.com/ionic-team/ionic-framework/issues/18115)
|
||||
* **tab-button:** use darker text to pass a11y ([#27355](https://github.com/ionic-team/ionic-framework/issues/27355)) ([0b23814](https://github.com/ionic-team/ionic-framework/commit/0b23814e0ba167ee6b2a2e430c47823d312d8c3c))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.0.6](https://github.com/ionic-team/ionic-framework/compare/v7.0.5...v7.0.6) (2023-05-11)
|
||||
|
||||
|
||||
|
||||
@@ -3,6 +3,30 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25)
|
||||
|
||||
**Note:** Version bump only for package @ionic/angular
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.0.8](https://github.com/ionic-team/ionic-framework/compare/v7.0.7...v7.0.8) (2023-05-24)
|
||||
|
||||
**Note:** Version bump only for package @ionic/angular
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.0.7](https://github.com/ionic-team/ionic-framework/compare/v7.0.6...v7.0.7) (2023-05-17)
|
||||
|
||||
**Note:** Version bump only for package @ionic/angular
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.0.6](https://github.com/ionic-team/ionic-framework/compare/v7.0.5...v7.0.6) (2023-05-11)
|
||||
|
||||
|
||||
|
||||
@@ -7,10 +7,10 @@ Ionic Angular specific building blocks on top of [@ionic/core](https://www.npmjs
|
||||
|
||||
* [Ionic Core Components](https://www.npmjs.com/package/@ionic/core)
|
||||
* [Ionic Documentation](https://ionicframework.com/docs/)
|
||||
* [Ionic Discord](https://ionic.link/discord)
|
||||
* [Ionic Forum](https://forum.ionicframework.com/)
|
||||
* [Ionicons](http://ionicons.com/)
|
||||
* [Stencil](https://stenciljs.com/)
|
||||
* [Stencil Worldwide Slack](https://stencil-worldwide.slack.com/)
|
||||
* [Capacitor](https://capacitor.ionicframework.com/)
|
||||
|
||||
|
||||
|
||||
18
angular/package-lock.json
generated
@@ -1,15 +1,15 @@
|
||||
{
|
||||
"name": "@ionic/angular",
|
||||
"version": "7.0.6",
|
||||
"version": "7.0.9",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@ionic/angular",
|
||||
"version": "7.0.6",
|
||||
"version": "7.0.9",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ionic/core": "^7.0.6",
|
||||
"@ionic/core": "^7.0.9",
|
||||
"ionicons": "^7.0.0",
|
||||
"jsonc-parser": "^3.0.0",
|
||||
"tslib": "^2.3.0"
|
||||
@@ -1227,9 +1227,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@ionic/core": {
|
||||
"version": "7.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.5.tgz",
|
||||
"integrity": "sha512-dcuE/PEF+GHsPEsLppUASSwWnzVcxFZE7uPMDzTwUPMOFTTaRgWbPxIly/4/VRbV6GSL6MEcuVVxhEdWjSODTg==",
|
||||
"version": "7.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.9.tgz",
|
||||
"integrity": "sha512-HcDtDUcjYCwQKrPpOOI+FWuMHi0DYbDJCww9qDTW52B6LLXktoPCcCxNI8oiERjabXQNLB38r9yQNDGyrs913w==",
|
||||
"dependencies": {
|
||||
"@stencil/core": "^3.2.2",
|
||||
"ionicons": "^7.1.0",
|
||||
@@ -8104,9 +8104,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"@ionic/core": {
|
||||
"version": "7.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.5.tgz",
|
||||
"integrity": "sha512-dcuE/PEF+GHsPEsLppUASSwWnzVcxFZE7uPMDzTwUPMOFTTaRgWbPxIly/4/VRbV6GSL6MEcuVVxhEdWjSODTg==",
|
||||
"version": "7.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.9.tgz",
|
||||
"integrity": "sha512-HcDtDUcjYCwQKrPpOOI+FWuMHi0DYbDJCww9qDTW52B6LLXktoPCcCxNI8oiERjabXQNLB38r9yQNDGyrs913w==",
|
||||
"requires": {
|
||||
"@stencil/core": "^3.2.2",
|
||||
"ionicons": "^7.1.0",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/angular",
|
||||
"version": "7.0.6",
|
||||
"version": "7.0.9",
|
||||
"description": "Angular specific wrappers for @ionic/core",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
@@ -47,7 +47,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@ionic/core": "^7.0.6",
|
||||
"@ionic/core": "^7.0.9",
|
||||
"ionicons": "^7.0.0",
|
||||
"jsonc-parser": "^3.0.0",
|
||||
"tslib": "^2.3.0"
|
||||
|
||||
5
angular/src/directives/navigation/ion-tabs/ion-tabs.html
Normal file
@@ -0,0 +1,5 @@
|
||||
<ng-content select="[slot=top]"></ng-content>
|
||||
<div class="tabs-inner">
|
||||
<ion-router-outlet #outlet tabs="true" (stackEvents)="onPageSelected($event)"></ion-router-outlet>
|
||||
</div>
|
||||
<ng-content></ng-content>
|
||||
23
angular/src/directives/navigation/ion-tabs/ion-tabs.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
:host {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
contain: layout size style;
|
||||
}
|
||||
|
||||
.tabs-inner {
|
||||
position: relative;
|
||||
|
||||
flex: 1;
|
||||
|
||||
contain: layout size style;
|
||||
}
|
||||
@@ -1,45 +1,14 @@
|
||||
import { Component, ContentChild, EventEmitter, HostListener, Output, ViewChild } from '@angular/core';
|
||||
|
||||
import { NavController } from '../../providers/nav-controller';
|
||||
import { IonTabBar } from '../proxies';
|
||||
|
||||
import { IonRouterOutlet } from './ion-router-outlet';
|
||||
import { StackEvent } from './stack-utils';
|
||||
import { NavController } from '../../../providers/nav-controller';
|
||||
import { IonTabBar } from '../../proxies';
|
||||
import { IonRouterOutlet } from '../ion-router-outlet';
|
||||
import { StackEvent } from '../stack-utils';
|
||||
|
||||
@Component({
|
||||
selector: 'ion-tabs',
|
||||
template: ` <ng-content select="[slot=top]"></ng-content>
|
||||
<div class="tabs-inner">
|
||||
<ion-router-outlet #outlet tabs="true" (stackEvents)="onPageSelected($event)"></ion-router-outlet>
|
||||
</div>
|
||||
<ng-content></ng-content>`,
|
||||
styles: [
|
||||
`
|
||||
:host {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
contain: layout size style;
|
||||
z-index: $z-index-page-container;
|
||||
}
|
||||
.tabs-inner {
|
||||
position: relative;
|
||||
|
||||
flex: 1;
|
||||
|
||||
contain: layout size style;
|
||||
}
|
||||
`,
|
||||
],
|
||||
templateUrl: './ion-tabs.html',
|
||||
styleUrls: ['./ion-tabs.scss'],
|
||||
})
|
||||
// eslint-disable-next-line @angular-eslint/component-class-suffix
|
||||
export class IonTabs {
|
||||
@@ -4,7 +4,7 @@ export { NumericValueAccessorDirective as NumericValueAccessor } from './directi
|
||||
export { RadioValueAccessorDirective as RadioValueAccessor } from './directives/control-value-accessors/radio-value-accessor';
|
||||
export { SelectValueAccessorDirective as SelectValueAccessor } from './directives/control-value-accessors/select-value-accessor';
|
||||
export { TextValueAccessorDirective as TextValueAccessor } from './directives/control-value-accessors/text-value-accessor';
|
||||
export { IonTabs } from './directives/navigation/ion-tabs';
|
||||
export { IonTabs } from './directives/navigation/ion-tabs/ion-tabs';
|
||||
export { IonBackButtonDelegateDirective as IonBackButtonDelegate } from './directives/navigation/ion-back-button';
|
||||
export { NavDelegate } from './directives/navigation/nav-delegate';
|
||||
export { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
|
||||
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
} from './directives/control-value-accessors';
|
||||
import { IonBackButtonDelegateDirective } from './directives/navigation/ion-back-button';
|
||||
import { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
|
||||
import { IonTabs } from './directives/navigation/ion-tabs';
|
||||
import { IonTabs } from './directives/navigation/ion-tabs/ion-tabs';
|
||||
import { NavDelegate } from './directives/navigation/nav-delegate';
|
||||
import {
|
||||
RouterLinkDelegateDirective,
|
||||
|
||||
@@ -83,7 +83,8 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
|
||||
container,
|
||||
component,
|
||||
componentProps,
|
||||
cssClasses
|
||||
cssClasses,
|
||||
this.elementReferenceKey
|
||||
);
|
||||
resolve(el);
|
||||
});
|
||||
@@ -119,7 +120,8 @@ export const attachView = (
|
||||
container: any,
|
||||
component: any,
|
||||
params: any,
|
||||
cssClasses: string[] | undefined
|
||||
cssClasses: string[] | undefined,
|
||||
elementReferenceKey: string | undefined
|
||||
): any => {
|
||||
/**
|
||||
* Wraps the injector with a custom injector that
|
||||
@@ -145,7 +147,23 @@ export const attachView = (
|
||||
|
||||
const instance = componentRef.instance;
|
||||
const hostElement = componentRef.location.nativeElement;
|
||||
|
||||
if (params) {
|
||||
/**
|
||||
* For modals and popovers, a reference to the component is
|
||||
* added to `params` during the call to attachViewToDom. If
|
||||
* a reference using this name is already set, this means
|
||||
* the app is trying to use the name as a component prop,
|
||||
* which will cause collisions.
|
||||
*/
|
||||
if (elementReferenceKey && instance[elementReferenceKey] !== undefined) {
|
||||
console.error(
|
||||
`[Ionic Error]: ${elementReferenceKey} is a reserved property when using ${container.tagName.toLowerCase()}. Rename or remove the "${elementReferenceKey}" property from ${
|
||||
component.name
|
||||
}.`
|
||||
);
|
||||
}
|
||||
|
||||
Object.assign(instance, params);
|
||||
}
|
||||
if (cssClasses) {
|
||||
|
||||
@@ -3,6 +3,52 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **core:** handle uncaught native keyboard exceptions ([#27514](https://github.com/ionic-team/ionic-framework/issues/27514)) ([0e7359c](https://github.com/ionic-team/ionic-framework/commit/0e7359c07f53eccb362ff2bf331396c0376ba6f3)), closes [#27503](https://github.com/ionic-team/ionic-framework/issues/27503)
|
||||
* **segment:** remove duplicate ripple effect on pointerup ([#27448](https://github.com/ionic-team/ionic-framework/issues/27448)) ([01f9959](https://github.com/ionic-team/ionic-framework/commit/01f99597f71b35a60a70f6d76c1e3e1917978d6d)), closes [#27338](https://github.com/ionic-team/ionic-framework/issues/27338)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.0.8](https://github.com/ionic-team/ionic-framework/compare/v7.0.7...v7.0.8) (2023-05-24)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **many:** update form controls (radio, checkbox, toggle, input, select) to have consistent disabled opacity ([#27396](https://github.com/ionic-team/ionic-framework/issues/27396)) ([995a848](https://github.com/ionic-team/ionic-framework/commit/995a8485751bb4058a59c7e958b1200f8f6539fa)), closes [#27184](https://github.com/ionic-team/ionic-framework/issues/27184)
|
||||
* **picker-column:** correct RTL direction ([#27460](https://github.com/ionic-team/ionic-framework/issues/27460)) ([d3dd72f](https://github.com/ionic-team/ionic-framework/commit/d3dd72fff67b3b437106e187e75f798653d105e2)), closes [#21205](https://github.com/ionic-team/ionic-framework/issues/21205)
|
||||
* **popover:** blur translucent popover in chromium ([#27484](https://github.com/ionic-team/ionic-framework/issues/27484)) ([a59eefb](https://github.com/ionic-team/ionic-framework/commit/a59eefb6a312d338895c46d80320ebe91cccac23)), closes [#22176](https://github.com/ionic-team/ionic-framework/issues/22176)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.0.7](https://github.com/ionic-team/ionic-framework/compare/v7.0.6...v7.0.7) (2023-05-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **accordion:** state updates if value changes ([#27463](https://github.com/ionic-team/ionic-framework/issues/27463)) ([3cbc592](https://github.com/ionic-team/ionic-framework/commit/3cbc592154a2b76cf63dfef67cb63de94dcec887)), closes [#27461](https://github.com/ionic-team/ionic-framework/issues/27461)
|
||||
* **checkbox, radio:** update border colors to match MD2 spec ([#27357](https://github.com/ionic-team/ionic-framework/issues/27357)) ([eabc6f3](https://github.com/ionic-team/ionic-framework/commit/eabc6f357675919dd82bea29a1776c0ca1bf89fd)), closes [#27170](https://github.com/ionic-team/ionic-framework/issues/27170)
|
||||
* **datetime-button:** log error if non-datetime instance is passed ([#27456](https://github.com/ionic-team/ionic-framework/issues/27456)) ([7b7e05a](https://github.com/ionic-team/ionic-framework/commit/7b7e05aa697a51ebfac42f96aa9510d4d96336de))
|
||||
* **footer, tab-bar:** wait for resize before re-showing ([#27417](https://github.com/ionic-team/ionic-framework/issues/27417)) ([70d9854](https://github.com/ionic-team/ionic-framework/commit/70d9854d8df5259ed715e282a6ca40ca3bea6192)), closes [#25990](https://github.com/ionic-team/ionic-framework/issues/25990)
|
||||
* **many:** form controls labels have increased margin ([#27447](https://github.com/ionic-team/ionic-framework/issues/27447)) ([381de0b](https://github.com/ionic-team/ionic-framework/commit/381de0b3d324805161232d8556fffd7022fcd84c)), closes [#27129](https://github.com/ionic-team/ionic-framework/issues/27129)
|
||||
* **picker-column:** dynamically change options ([#27359](https://github.com/ionic-team/ionic-framework/issues/27359)) ([7c7fb2b](https://github.com/ionic-team/ionic-framework/commit/7c7fb2b1a3bf35b123716b2f975231ceb01dcc07)), closes [#21763](https://github.com/ionic-team/ionic-framework/issues/21763)
|
||||
* **picker-column:** prevSelected is set to the correct value ([#27458](https://github.com/ionic-team/ionic-framework/issues/27458)) ([9dc126d](https://github.com/ionic-team/ionic-framework/commit/9dc126d38727c1ca16a75cfa65daab9a630be678)), closes [#21764](https://github.com/ionic-team/ionic-framework/issues/21764)
|
||||
* **select:** floating label covers placeholder when when blurred ([#27446](https://github.com/ionic-team/ionic-framework/issues/27446)) ([921bfae](https://github.com/ionic-team/ionic-framework/commit/921bfae9e68257734a9695cab9245bb335eb88fa)), closes [#27201](https://github.com/ionic-team/ionic-framework/issues/27201)
|
||||
* **select:** modern syntax works with forms ([#27480](https://github.com/ionic-team/ionic-framework/issues/27480)) ([13d2d11](https://github.com/ionic-team/ionic-framework/commit/13d2d115d44f109c3ea2a47bcb518c6090126325)), closes [#27478](https://github.com/ionic-team/ionic-framework/issues/27478)
|
||||
* **spinner:** allow resizing of dots, bubbles, and circles ([#27424](https://github.com/ionic-team/ionic-framework/issues/27424)) ([e5ae45d](https://github.com/ionic-team/ionic-framework/commit/e5ae45d32fde7328a704a6ffa18940106a069fa2)), closes [#18115](https://github.com/ionic-team/ionic-framework/issues/18115)
|
||||
* **tab-button:** use darker text to pass a11y ([#27355](https://github.com/ionic-team/ionic-framework/issues/27355)) ([0b23814](https://github.com/ionic-team/ionic-framework/commit/0b23814e0ba167ee6b2a2e430c47823d312d8c3c))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.0.6](https://github.com/ionic-team/ionic-framework/compare/v7.0.5...v7.0.6) (2023-05-11)
|
||||
|
||||
|
||||
|
||||
@@ -101,10 +101,10 @@ const showModal = async () => {
|
||||
## Related
|
||||
|
||||
* [Ionic Documentation](https://ionicframework.com/docs/)
|
||||
* [Ionic Discord](https://ionic.link/discord)
|
||||
* [Ionic Forum](https://forum.ionicframework.com/)
|
||||
* [Ionicons](http://ionicons.com/)
|
||||
* [Stencil](https://stenciljs.com/)
|
||||
* [Stencil Worldwide Slack](https://stencil-worldwide.slack.com/)
|
||||
* [Capacitor](https://capacitor.ionicframework.com/)
|
||||
|
||||
|
||||
|
||||
76
core/package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "7.0.6",
|
||||
"version": "7.0.9",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@ionic/core",
|
||||
"version": "7.0.6",
|
||||
"version": "7.0.9",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@stencil/core": "^3.2.2",
|
||||
@@ -14,17 +14,17 @@
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@axe-core/playwright": "^4.6.1",
|
||||
"@axe-core/playwright": "^4.7.1",
|
||||
"@ionic/eslint-config": "^0.3.0",
|
||||
"@ionic/prettier-config": "^2.0.0",
|
||||
"@jest/core": "^27.5.1",
|
||||
"@playwright/test": "^1.33.0",
|
||||
"@rollup/plugin-node-resolve": "^8.4.0",
|
||||
"@rollup/plugin-virtual": "^2.0.3",
|
||||
"@stencil/angular-output-target": "^0.6.0",
|
||||
"@stencil/angular-output-target": "^0.7.0",
|
||||
"@stencil/react-output-target": "^0.5.0",
|
||||
"@stencil/sass": "^3.0.2",
|
||||
"@stencil/vue-output-target": "^0.8.2",
|
||||
"@stencil/sass": "^3.0.3",
|
||||
"@stencil/vue-output-target": "^0.8.5",
|
||||
"@types/jest": "^27.5.2",
|
||||
"@types/node": "^14.6.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.17.0",
|
||||
@@ -53,12 +53,12 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@axe-core/playwright": {
|
||||
"version": "4.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.6.1.tgz",
|
||||
"integrity": "sha512-XMKP2OzGfGIYpU9G9FgI2ulyjEXQDP6qtZerOwdQ7YC1w4SFgofK3ogSk0qVoy0QI+q6XWLUJMfMMkUwdTR2dA==",
|
||||
"version": "4.7.1",
|
||||
"resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.7.1.tgz",
|
||||
"integrity": "sha512-09UDwLChlGiqw9004QJib6Maesy99EOZ9zsLfhBYAt2s5UwufabnD+MoTAmwe+PCv2Jex9k1taeUhebDwIJKqw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"axe-core": "^4.6.3"
|
||||
"axe-core": "^4.7.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"playwright": ">= 1.0.0"
|
||||
@@ -1585,9 +1585,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@stencil/angular-output-target": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.6.0.tgz",
|
||||
"integrity": "sha512-FqHeRSb125joYzT/jHg3uOz5vKNAg7m3ffI/XXoy2ENC2K9X6NgJp8zuYcqW/o9SlQ8CWuoAv5AiF+tayzDTFA==",
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.0.tgz",
|
||||
"integrity": "sha512-OMK5oQHlMB2MTYMwU28TP1PfjkQWXHnH7f57sWis0XvFPznBtYTHAGCqiCjLM6toPCncEiZYsswZD+rm77QSGQ==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"@stencil/core": "^2.9.0 || ^3.0.0"
|
||||
@@ -1615,18 +1615,18 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@stencil/sass": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.2.tgz",
|
||||
"integrity": "sha512-T8hQreosCjZ6yZ7wJgZBrA1ytL4JMluY1dX6S1a/YgXclanvncvk6nGEpxRVVwRAvtkru0F5Qs+oheiL8nifRA==",
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.3.tgz",
|
||||
"integrity": "sha512-MnRxCbPji4Wr7Ilu22WlEbf1F0gyRGp617ADib0zx2d46aRg/brYdRrhcn8eaANmEXZgT6s8zGh8QO/9LZHN2A==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"@stencil/core": ">=2.0.0 || >=3.0.0-beta.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@stencil/vue-output-target": {
|
||||
"version": "0.8.2",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.2.tgz",
|
||||
"integrity": "sha512-Z+igq/pz7z9bSRH0tVxHvD/m13B6MPM+i2DZRboGt3uyTKeD1vLZQz3BLCfPeBtEXp2Xlz4d18Z8d7c4abFKbg==",
|
||||
"version": "0.8.5",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.5.tgz",
|
||||
"integrity": "sha512-AOse8WGzdH3lYhw+yQ/MYvobcaSOFd7B/xQ+oWv3GZLZpCw5fw+eOfFv1734mdA/Jjx+kWADlgsZ4w+cmiR+ZQ==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"@stencil/core": "^2.9.0 || ^3.0.0"
|
||||
@@ -2571,9 +2571,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/axe-core": {
|
||||
"version": "4.6.3",
|
||||
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.6.3.tgz",
|
||||
"integrity": "sha512-/BQzOX780JhsxDnPpH4ZiyrJAzcd8AfzFPkv+89veFSr1rcMjuq2JDCwypKaPeB6ljHp9KjXhPpjgCvQlWYuqg==",
|
||||
"version": "4.7.1",
|
||||
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.1.tgz",
|
||||
"integrity": "sha512-sCXXUhA+cljomZ3ZAwb8i1p3oOlkABzPy08ZDAoGcYuvtBPlQ1Ytde129ArXyHWDhfeewq7rlx9F+cUx2SSlkg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
@@ -10352,12 +10352,12 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@axe-core/playwright": {
|
||||
"version": "4.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.6.1.tgz",
|
||||
"integrity": "sha512-XMKP2OzGfGIYpU9G9FgI2ulyjEXQDP6qtZerOwdQ7YC1w4SFgofK3ogSk0qVoy0QI+q6XWLUJMfMMkUwdTR2dA==",
|
||||
"version": "4.7.1",
|
||||
"resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.7.1.tgz",
|
||||
"integrity": "sha512-09UDwLChlGiqw9004QJib6Maesy99EOZ9zsLfhBYAt2s5UwufabnD+MoTAmwe+PCv2Jex9k1taeUhebDwIJKqw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"axe-core": "^4.6.3"
|
||||
"axe-core": "^4.7.0"
|
||||
}
|
||||
},
|
||||
"@babel/code-frame": {
|
||||
@@ -11460,9 +11460,9 @@
|
||||
}
|
||||
},
|
||||
"@stencil/angular-output-target": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.6.0.tgz",
|
||||
"integrity": "sha512-FqHeRSb125joYzT/jHg3uOz5vKNAg7m3ffI/XXoy2ENC2K9X6NgJp8zuYcqW/o9SlQ8CWuoAv5AiF+tayzDTFA==",
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.0.tgz",
|
||||
"integrity": "sha512-OMK5oQHlMB2MTYMwU28TP1PfjkQWXHnH7f57sWis0XvFPznBtYTHAGCqiCjLM6toPCncEiZYsswZD+rm77QSGQ==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
@@ -11479,16 +11479,16 @@
|
||||
"requires": {}
|
||||
},
|
||||
"@stencil/sass": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.2.tgz",
|
||||
"integrity": "sha512-T8hQreosCjZ6yZ7wJgZBrA1ytL4JMluY1dX6S1a/YgXclanvncvk6nGEpxRVVwRAvtkru0F5Qs+oheiL8nifRA==",
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.3.tgz",
|
||||
"integrity": "sha512-MnRxCbPji4Wr7Ilu22WlEbf1F0gyRGp617ADib0zx2d46aRg/brYdRrhcn8eaANmEXZgT6s8zGh8QO/9LZHN2A==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"@stencil/vue-output-target": {
|
||||
"version": "0.8.2",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.2.tgz",
|
||||
"integrity": "sha512-Z+igq/pz7z9bSRH0tVxHvD/m13B6MPM+i2DZRboGt3uyTKeD1vLZQz3BLCfPeBtEXp2Xlz4d18Z8d7c4abFKbg==",
|
||||
"version": "0.8.5",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.5.tgz",
|
||||
"integrity": "sha512-AOse8WGzdH3lYhw+yQ/MYvobcaSOFd7B/xQ+oWv3GZLZpCw5fw+eOfFv1734mdA/Jjx+kWADlgsZ4w+cmiR+ZQ==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
@@ -12144,9 +12144,9 @@
|
||||
}
|
||||
},
|
||||
"axe-core": {
|
||||
"version": "4.6.3",
|
||||
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.6.3.tgz",
|
||||
"integrity": "sha512-/BQzOX780JhsxDnPpH4ZiyrJAzcd8AfzFPkv+89veFSr1rcMjuq2JDCwypKaPeB6ljHp9KjXhPpjgCvQlWYuqg==",
|
||||
"version": "4.7.1",
|
||||
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.1.tgz",
|
||||
"integrity": "sha512-sCXXUhA+cljomZ3ZAwb8i1p3oOlkABzPy08ZDAoGcYuvtBPlQ1Ytde129ArXyHWDhfeewq7rlx9F+cUx2SSlkg==",
|
||||
"dev": true
|
||||
},
|
||||
"babel-jest": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "7.0.6",
|
||||
"version": "7.0.9",
|
||||
"description": "Base components for Ionic",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
@@ -36,17 +36,17 @@
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@axe-core/playwright": "^4.6.1",
|
||||
"@axe-core/playwright": "^4.7.1",
|
||||
"@ionic/eslint-config": "^0.3.0",
|
||||
"@ionic/prettier-config": "^2.0.0",
|
||||
"@jest/core": "^27.5.1",
|
||||
"@playwright/test": "^1.33.0",
|
||||
"@rollup/plugin-node-resolve": "^8.4.0",
|
||||
"@rollup/plugin-virtual": "^2.0.3",
|
||||
"@stencil/angular-output-target": "^0.6.0",
|
||||
"@stencil/angular-output-target": "^0.7.0",
|
||||
"@stencil/react-output-target": "^0.5.0",
|
||||
"@stencil/sass": "^3.0.2",
|
||||
"@stencil/vue-output-target": "^0.8.2",
|
||||
"@stencil/sass": "^3.0.3",
|
||||
"@stencil/vue-output-target": "^0.8.5",
|
||||
"@types/jest": "^27.5.2",
|
||||
"@types/node": "^14.6.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.17.0",
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-next) {
|
||||
@include border-radius($accordion-md-border-radius, $accordion-md-border-radius, null, null);
|
||||
}
|
||||
:host(.accordion-group-expand-inset) ::slotted(ion-accordion):first-of-type,
|
||||
|
||||
:host(.accordion-group-expand-inset) ::slotted(ion-accordion):first-of-type {
|
||||
@include margin(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { ComponentInterface } from '@stencil/core';
|
||||
import { Component, Element, Host, Prop, State, h } from '@stencil/core';
|
||||
import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
|
||||
import { chevronDown } from 'ionicons/icons';
|
||||
|
||||
import { config } from '../../global/config';
|
||||
@@ -56,6 +56,10 @@ export class Accordion implements ComponentInterface {
|
||||
* value.
|
||||
*/
|
||||
@Prop() value = `ion-accordion-${accordionIds++}`;
|
||||
@Watch('value')
|
||||
valueChanged() {
|
||||
this.updateState();
|
||||
}
|
||||
|
||||
/**
|
||||
* If `true`, the accordion cannot be interacted with.
|
||||
|
||||
@@ -4,7 +4,7 @@ import { AccordionGroup } from '../../accordion-group/accordion-group.tsx';
|
||||
import { Item } from '../../item/item.tsx';
|
||||
import { Accordion } from '../accordion.tsx';
|
||||
|
||||
it('should open correct accordions', async () => {
|
||||
it('should open correct accordions when accordion group value is set', async () => {
|
||||
const page = await newSpecPage({
|
||||
components: [Item, Accordion, AccordionGroup],
|
||||
html: `
|
||||
@@ -40,6 +40,42 @@ it('should open correct accordions', async () => {
|
||||
expect(accordions[2].classList.contains('accordion-collapsed')).toEqual(true);
|
||||
});
|
||||
|
||||
it('should open correct accordions when accordion value is set', async () => {
|
||||
const page = await newSpecPage({
|
||||
components: [Item, Accordion, AccordionGroup],
|
||||
html: `
|
||||
<ion-accordion-group animated="false" value="first">
|
||||
<ion-accordion>
|
||||
<ion-item slot="header">Label</ion-item>
|
||||
<div slot="content">Content</div>
|
||||
</ion-accordion>
|
||||
<ion-accordion value="second">
|
||||
<ion-item slot="header">Label</ion-item>
|
||||
<div slot="content">Content</div>
|
||||
</ion-accordion>
|
||||
<ion-accordion value="third">
|
||||
<ion-item slot="header">Label</ion-item>
|
||||
<div slot="content">Content</div>
|
||||
</ion-accordion>
|
||||
</ion-accordion-group>
|
||||
`,
|
||||
});
|
||||
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group');
|
||||
const accordions = accordionGroup.querySelectorAll('ion-accordion');
|
||||
|
||||
accordions.forEach((accordion) => {
|
||||
expect(accordion.classList.contains('accordion-collapsed')).toEqual(true);
|
||||
});
|
||||
|
||||
accordions[0].value = 'first';
|
||||
await page.waitForChanges();
|
||||
|
||||
expect(accordions[0].classList.contains('accordion-collapsed')).toEqual(false);
|
||||
expect(accordions[1].classList.contains('accordion-collapsed')).toEqual(true);
|
||||
expect(accordions[2].classList.contains('accordion-collapsed')).toEqual(true);
|
||||
});
|
||||
|
||||
it('should open more than one accordion when multiple="true"', async () => {
|
||||
const page = await newSpecPage({
|
||||
components: [Item, Accordion, AccordionGroup],
|
||||
|
||||
@@ -40,7 +40,8 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
|
||||
|
||||
await didPresent.next();
|
||||
|
||||
const results = await new AxeBuilder({ page }).analyze();
|
||||
// TODO FW-4375
|
||||
const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
|
||||
expect(results.violations).toEqual([]);
|
||||
});
|
||||
|
||||
|
||||
@@ -21,6 +21,9 @@
|
||||
|
||||
// iOS Checkbox: Disabled
|
||||
// -----------------------------------------
|
||||
// The checkbox and label should use the
|
||||
// same opacity and match the other form
|
||||
// controls
|
||||
|
||||
:host(.checkbox-disabled) {
|
||||
opacity: $checkbox-ios-disabled-opacity;
|
||||
|
||||
@@ -54,7 +54,7 @@ $checkbox-ios-checkmark-width: math.div($checkbox-ios-icon-size, 6) +
|
||||
$checkbox-ios-checkmark-height: $checkbox-ios-icon-size * 0.5 !default;
|
||||
|
||||
/// @prop - Opacity of the disabled checkbox
|
||||
$checkbox-ios-disabled-opacity: .3 !default;
|
||||
$checkbox-ios-disabled-opacity: $form-control-ios-disabled-opacity !default;
|
||||
|
||||
/// @prop - Margin top of the left checkbox item
|
||||
$checkbox-ios-item-start-margin-top: 8px !default;
|
||||
|
||||
@@ -40,11 +40,19 @@
|
||||
|
||||
// Material Design Checkbox: Disabled
|
||||
// --------------------------------------------------------
|
||||
// The checkbox itself should use the disabled
|
||||
// opacity set by its spec, while the label
|
||||
// should match the other form controls
|
||||
|
||||
:host(.checkbox-disabled) {
|
||||
:host(.legacy-checkbox.checkbox-disabled),
|
||||
:host(.checkbox-disabled) .label-text-wrapper {
|
||||
opacity: $checkbox-md-disabled-opacity;
|
||||
}
|
||||
|
||||
:host(.checkbox-disabled) .native-wrapper {
|
||||
opacity: $checkbox-md-icon-disabled-opacity;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Checkbox Within An Item
|
||||
// TODO(FW-3100): remove this
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
// Material Design Checkbox
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Opacity of the disabled checkbox
|
||||
$checkbox-md-disabled-opacity: .3 !default;
|
||||
/// @prop - Opacity of the disabled checkbox label
|
||||
$checkbox-md-disabled-opacity: $form-control-md-disabled-opacity !default;
|
||||
|
||||
/// @prop - Background color of the checkbox icon when off
|
||||
$checkbox-md-icon-background-color-off: $item-md-background !default;
|
||||
@@ -38,7 +38,7 @@ $checkbox-md-icon-border-style: solid !default;
|
||||
$checkbox-md-icon-border-radius: 2px !default;
|
||||
|
||||
/// @prop - Border color of the checkbox icon when off
|
||||
$checkbox-md-icon-border-color-off: rgba($text-color-rgb, .51) !default;
|
||||
$checkbox-md-icon-border-color-off: rgb($text-color-rgb, 0.60) !default;
|
||||
|
||||
/// @prop - Border color of the checkbox icon when on
|
||||
$checkbox-md-icon-border-color-on: ion-color(primary, base) !default;
|
||||
@@ -72,3 +72,12 @@ $checkbox-md-item-end-margin-bottom: $checkbox-md-item-end-margin-top !defau
|
||||
|
||||
/// @prop - Margin start of the end checkbox item
|
||||
$checkbox-md-item-end-margin-start: 0 !default;
|
||||
|
||||
/// @prop - Opacity of the disabled checkbox
|
||||
/// This value is used because the checkbox color is set to
|
||||
/// `rgb(0, 0, 0, 0.60)` when enabled and we need it to be
|
||||
/// `rgb(0, 0, 0, 0.38)` when disabled but the disabled
|
||||
/// opacity is applied on top of the transparent color so
|
||||
/// this opacity gets us the equivalent of applying `0.38`
|
||||
/// on top of an opaque checkbox `rgb(0, 0, 0, 1.0)`
|
||||
$checkbox-md-icon-disabled-opacity: 0.63 !default;
|
||||
|
||||
@@ -194,7 +194,7 @@ input {
|
||||
* the checkbox should be on the end
|
||||
* when the label sits at the start.
|
||||
*/
|
||||
@include margin(0, 8px, 0, 0);
|
||||
@include margin(0, $form-control-label-margin, 0, 0);
|
||||
}
|
||||
|
||||
|
||||
@@ -215,7 +215,7 @@ input {
|
||||
* when the label sits at the end.
|
||||
*/
|
||||
:host(.checkbox-label-placement-end) .label-text-wrapper {
|
||||
@include margin(0, 0, 0, 8px);
|
||||
@include margin(0, 0, 0, $form-control-label-margin);
|
||||
}
|
||||
|
||||
|
||||
@@ -228,7 +228,7 @@ input {
|
||||
* the checkbox should be on the end
|
||||
* when the label sits at the start.
|
||||
*/
|
||||
@include margin(0, 8px, 0, 0);
|
||||
@include margin(0, $form-control-label-margin, 0, 0);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -3,42 +3,6 @@ import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
configs().forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('checkbox: basic visual tests'), () => {
|
||||
test('should render unchecked checkbox correctly', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox>Unchecked</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const checkbox = page.locator('ion-checkbox');
|
||||
await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-unchecked`));
|
||||
});
|
||||
|
||||
test('should render checked checkbox correctly', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox checked>Checked</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const checkbox = page.locator('ion-checkbox');
|
||||
await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-checked`));
|
||||
});
|
||||
|
||||
test('should render disabled checkbox correctly', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-checkbox checked disabled>Disabled</ion-checkbox>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const checkbox = page.locator('ion-checkbox');
|
||||
await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-disabled`));
|
||||
});
|
||||
|
||||
test('should render custom checkmark-width correctly', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 865 B After Width: | Height: | Size: 862 B |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |