Skip to content

Commit b7cfd97

Browse files
OS-pedrolourencoOS-pedrolourenco
committed
Merge branch 'refs/heads/next' into ROU-11612
2 parents d8dee22 + b57d432 commit b7cfd97

File tree

481 files changed

+1509
-478
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

481 files changed

+1509
-478
lines changed

‎core/api.txt‎

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,7 @@ ion-app,prop,theme,"ios" | "md" | "ionic",undefined,false,false
185185
ion-app,method,setFocus,setFocus(elements: HTMLElement[]) => Promise<void>
186186

187187
ion-avatar,shadow
188+
ion-avatar,prop,disabled,boolean,false,false,false
188189
ion-avatar,prop,mode,"ios" | "md",undefined,false,false
189190
ion-avatar,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
190191
ion-avatar,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | undefined,undefined,false,false
@@ -548,26 +549,40 @@ ion-checkbox,prop,value,any,'on',false,false
548549
ion-checkbox,event,ionBlur,void,true
549550
ion-checkbox,event,ionChange,CheckboxChangeEventDetail<any>,true
550551
ion-checkbox,event,ionFocus,void,true
552+
ion-checkbox,css-prop,--border-color,ionic
551553
ion-checkbox,css-prop,--border-color,ios
552554
ion-checkbox,css-prop,--border-color,md
555+
ion-checkbox,css-prop,--border-color-checked,ionic
553556
ion-checkbox,css-prop,--border-color-checked,ios
554557
ion-checkbox,css-prop,--border-color-checked,md
558+
ion-checkbox,css-prop,--border-radius,ionic
555559
ion-checkbox,css-prop,--border-radius,ios
556560
ion-checkbox,css-prop,--border-radius,md
561+
ion-checkbox,css-prop,--border-style,ionic
557562
ion-checkbox,css-prop,--border-style,ios
558563
ion-checkbox,css-prop,--border-style,md
564+
ion-checkbox,css-prop,--border-width,ionic
559565
ion-checkbox,css-prop,--border-width,ios
560566
ion-checkbox,css-prop,--border-width,md
561567
ion-checkbox,css-prop,--checkbox-background,ios
562568
ion-checkbox,css-prop,--checkbox-background,md
569+
ion-checkbox,css-prop,--checkbox-background-checked,ionic
563570
ion-checkbox,css-prop,--checkbox-background-checked,ios
564571
ion-checkbox,css-prop,--checkbox-background-checked,md
572+
ion-checkbox,css-prop,--checkmark-color,ionic
565573
ion-checkbox,css-prop,--checkmark-color,ios
566574
ion-checkbox,css-prop,--checkmark-color,md
575+
ion-checkbox,css-prop,--checkmark-height,ionic
576+
ion-checkbox,css-prop,--checkmark-width,ionic
567577
ion-checkbox,css-prop,--checkmark-width,ios
568578
ion-checkbox,css-prop,--checkmark-width,md
579+
ion-checkbox,css-prop,--focus-ring-color,ionic
580+
ion-checkbox,css-prop,--focus-ring-offset,ionic
581+
ion-checkbox,css-prop,--focus-ring-width,ionic
582+
ion-checkbox,css-prop,--size,ionic
569583
ion-checkbox,css-prop,--size,ios
570584
ion-checkbox,css-prop,--size,md
585+
ion-checkbox,css-prop,--transition,ionic
571586
ion-checkbox,css-prop,--transition,ios
572587
ion-checkbox,css-prop,--transition,md
573588
ion-checkbox,part,container
@@ -730,6 +745,22 @@ ion-datetime-button,prop,mode,"ios" | "md",undefined,false,false
730745
ion-datetime-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false
731746
ion-datetime-button,part,native
732747

748+
ion-divider,shadow
749+
ion-divider,prop,inset,boolean,false,false,false
750+
ion-divider,prop,spacing,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall" | undefined,'xxsmall',false,true
751+
ion-divider,css-prop,--margin-bottom,ionic
752+
ion-divider,css-prop,--margin-bottom,ios
753+
ion-divider,css-prop,--margin-bottom,md
754+
ion-divider,css-prop,--margin-top,ionic
755+
ion-divider,css-prop,--margin-top,ios
756+
ion-divider,css-prop,--margin-top,md
757+
ion-divider,css-prop,--padding-end,ionic
758+
ion-divider,css-prop,--padding-end,ios
759+
ion-divider,css-prop,--padding-end,md
760+
ion-divider,css-prop,--padding-start,ionic
761+
ion-divider,css-prop,--padding-start,ios
762+
ion-divider,css-prop,--padding-start,md
763+
733764
ion-fab,shadow
734765
ion-fab,prop,activated,boolean,false,false,false
735766
ion-fab,prop,edge,boolean,false,false,false
@@ -953,7 +984,6 @@ ion-input,css-prop,--border-width,md
953984
ion-input,css-prop,--color,ionic
954985
ion-input,css-prop,--color,ios
955986
ion-input,css-prop,--color,md
956-
ion-input,css-prop,--highlight-color-focused,ionic
957987
ion-input,css-prop,--highlight-color-focused,ios
958988
ion-input,css-prop,--highlight-color-focused,md
959989
ion-input,css-prop,--highlight-color-invalid,ionic
@@ -962,7 +992,6 @@ ion-input,css-prop,--highlight-color-invalid,md
962992
ion-input,css-prop,--highlight-color-valid,ionic
963993
ion-input,css-prop,--highlight-color-valid,ios
964994
ion-input,css-prop,--highlight-color-valid,md
965-
ion-input,css-prop,--highlight-height,ionic
966995
ion-input,css-prop,--highlight-height,ios
967996
ion-input,css-prop,--highlight-height,md
968997
ion-input,css-prop,--padding-bottom,ionic
@@ -989,9 +1018,6 @@ ion-input,css-prop,--placeholder-font-weight,md
9891018
ion-input,css-prop,--placeholder-opacity,ionic
9901019
ion-input,css-prop,--placeholder-opacity,ios
9911020
ion-input,css-prop,--placeholder-opacity,md
992-
ion-input,css-prop,--text-color-invalid,ionic
993-
ion-input,css-prop,--text-color-invalid,ios
994-
ion-input,css-prop,--text-color-invalid,md
9951021

9961022
ion-input-password-toggle,shadow
9971023
ion-input-password-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true

‎core/src/components.d.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -343,6 +343,10 @@ export namespace Components {
343343
"theme"?: "ios" | "md" | "ionic";
344344
}
345345
interface IonAvatar {
346+
/**
347+
* If `true`, the user cannot interact with the avatar.
348+
*/
349+
"disabled": boolean;
346350
/**
347351
* The mode determines the platform behaviors of the component.
348352
*/
@@ -1160,6 +1164,16 @@ export namespace Components {
11601164
*/
11611165
"theme"?: "ios" | "md" | "ionic";
11621166
}
1167+
interface IonDivider {
1168+
/**
1169+
* If `true`, the divider will have horizontal margins By default, it's `false`
1170+
*/
1171+
"inset": boolean;
1172+
/**
1173+
* Set to `"xxsmall"` for the smallest spacing. Set to "xsmall" for very small spacing. Set to `"small"` for small spacing. Set to "medium" for medium spacing. Set to "large" for large spacing. Set to `"xlarge"` for the largest spacing. Defaults to `"xxsmall"`.
1174+
*/
1175+
"spacing"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
1176+
}
11631177
interface IonFab {
11641178
/**
11651179
* If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
@@ -4436,6 +4450,12 @@ declare global {
44364450
prototype: HTMLIonDatetimeButtonElement;
44374451
new (): HTMLIonDatetimeButtonElement;
44384452
};
4453+
interface HTMLIonDividerElement extends Components.IonDivider, HTMLStencilElement {
4454+
}
4455+
var HTMLIonDividerElement: {
4456+
prototype: HTMLIonDividerElement;
4457+
new (): HTMLIonDividerElement;
4458+
};
44394459
interface HTMLIonFabElement extends Components.IonFab, HTMLStencilElement {
44404460
}
44414461
var HTMLIonFabElement: {
@@ -5395,6 +5415,7 @@ declare global {
53955415
"ion-content": HTMLIonContentElement;
53965416
"ion-datetime": HTMLIonDatetimeElement;
53975417
"ion-datetime-button": HTMLIonDatetimeButtonElement;
5418+
"ion-divider": HTMLIonDividerElement;
53985419
"ion-fab": HTMLIonFabElement;
53995420
"ion-fab-button": HTMLIonFabButtonElement;
54005421
"ion-fab-list": HTMLIonFabListElement;
@@ -5759,6 +5780,10 @@ declare namespace LocalJSX {
57595780
"theme"?: "ios" | "md" | "ionic";
57605781
}
57615782
interface IonAvatar {
5783+
/**
5784+
* If `true`, the user cannot interact with the avatar.
5785+
*/
5786+
"disabled"?: boolean;
57625787
/**
57635788
* The mode determines the platform behaviors of the component.
57645789
*/
@@ -6611,6 +6636,16 @@ declare namespace LocalJSX {
66116636
*/
66126637
"theme"?: "ios" | "md" | "ionic";
66136638
}
6639+
interface IonDivider {
6640+
/**
6641+
* If `true`, the divider will have horizontal margins By default, it's `false`
6642+
*/
6643+
"inset"?: boolean;
6644+
/**
6645+
* Set to `"xxsmall"` for the smallest spacing. Set to "xsmall" for very small spacing. Set to `"small"` for small spacing. Set to "medium" for medium spacing. Set to "large" for large spacing. Set to `"xlarge"` for the largest spacing. Defaults to `"xxsmall"`.
6646+
*/
6647+
"spacing"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
6648+
}
66146649
interface IonFab {
66156650
/**
66166651
* If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
@@ -9524,6 +9559,7 @@ declare namespace LocalJSX {
95249559
"ion-content": IonContent;
95259560
"ion-datetime": IonDatetime;
95269561
"ion-datetime-button": IonDatetimeButton;
9562+
"ion-divider": IonDivider;
95279563
"ion-fab": IonFab;
95289564
"ion-fab-button": IonFabButton;
95299565
"ion-fab-list": IonFabList;
@@ -9626,6 +9662,7 @@ declare module "@stencil/core" {
96269662
"ion-content": LocalJSX.IonContent & JSXBase.HTMLAttributes<HTMLIonContentElement>;
96279663
"ion-datetime": LocalJSX.IonDatetime & JSXBase.HTMLAttributes<HTMLIonDatetimeElement>;
96289664
"ion-datetime-button": LocalJSX.IonDatetimeButton & JSXBase.HTMLAttributes<HTMLIonDatetimeButtonElement>;
9665+
"ion-divider": LocalJSX.IonDivider & JSXBase.HTMLAttributes<HTMLIonDividerElement>;
96299666
"ion-fab": LocalJSX.IonFab & JSXBase.HTMLAttributes<HTMLIonFabElement>;
96309667
"ion-fab-button": LocalJSX.IonFabButton & JSXBase.HTMLAttributes<HTMLIonFabButtonElement>;
96319668
"ion-fab-list": LocalJSX.IonFabList & JSXBase.HTMLAttributes<HTMLIonFabListElement>;

‎core/src/components/avatar/avatar.ionic.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,3 +171,9 @@
171171
:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:empty) {
172172
transform: translate(globals.$ion-scale-100, calc(globals.$ion-scale-100));
173173
}
174+
175+
// Avatar Disabled
176+
// --------------------------------------------------
177+
:host(.avatar-disabled)::before {
178+
@include globals.disabled-state();
179+
}

‎core/src/components/avatar/avatar.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,11 @@ export class Avatar implements ComponentInterface {
4040
*/
4141
@Prop() shape?: 'soft' | 'round' | 'rectangular';
4242

43+
/**
44+
* If `true`, the user cannot interact with the avatar.
45+
*/
46+
@Prop() disabled = false;
47+
4348
get hasImage() {
4449
return !!this.el.querySelector('ion-img') || !!this.el.querySelector('img');
4550
}
@@ -81,6 +86,7 @@ export class Avatar implements ComponentInterface {
8186
}
8287

8388
render() {
89+
const { hasImage, hasIcon, disabled } = this;
8490
const theme = getIonTheme(this);
8591
const size = this.getSize();
8692
const shape = this.getShape();
@@ -91,8 +97,9 @@ export class Avatar implements ComponentInterface {
9197
[theme]: true,
9298
[`avatar-${size}`]: size !== undefined,
9399
[`avatar-${shape}`]: shape !== undefined,
94-
[`avatar-image`]: this.hasImage,
95-
[`avatar-icon`]: this.hasIcon,
100+
[`avatar-image`]: hasImage,
101+
[`avatar-icon`]: hasIcon,
102+
[`avatar-disabled`]: disabled,
96103
}}
97104
>
98105
<slot></slot>

‎core/src/components/avatar/test/states/avatar.e2e.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { expect } from '@playwright/test';
2+
import { configs, test } from '@utils/test/playwright';
3+
4+
/**
5+
* Avatar does not test RTL behaviors.
6+
* Usages of Avatar in slots are tested in components that use Avatar.
7+
*/
8+
configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
9+
test.describe(title('avatar: states'), () => {
10+
test('should not have visual regressions', async ({ page }) => {
11+
await page.setContent(
12+
`
13+
<div id="container">
14+
<ion-avatar disabled> AV </ion-avatar>
15+
<ion-avatar disabled>
16+
<img src="/src/components/avatar/test/avatar.svg" />
17+
</ion-avatar>
18+
</div>
19+
`,
20+
config
21+
);
22+
const container = page.locator('#container');
23+
24+
await expect(container).toHaveScreenshot(screenshot(`avatar-disabled`));
25+
});
26+
});
27+
});

‎core/src/components/avatar/test/states/avatar.e2e.ts-snapshots/avatar-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png‎

2.01 KB
Loading

‎core/src/components/avatar/test/states/avatar.e2e.ts-snapshots/avatar-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png‎

2.99 KB
Loading

‎core/src/components/avatar/test/states/avatar.e2e.ts-snapshots/avatar-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png‎

2.15 KB
Loading

‎core/src/components/avatar/test/states/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Avatar - States</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
9+
/>
10+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
11+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12+
<script src="../../../../../scripts/testing/scripts.js"></script>
13+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
14+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
</head>
16+
17+
<body>
18+
<ion-app>
19+
<ion-header>
20+
<ion-toolbar>
21+
<ion-title>Avatar - States</ion-title>
22+
</ion-toolbar>
23+
</ion-header>
24+
25+
<ion-content>
26+
<h3>Disabled</h3>
27+
<ion-avatar disabled>AV</ion-avatar>
28+
<ion-avatar disabled>
29+
<img src="/src/components/avatar/test/avatar.svg" />
30+
</ion-avatar>
31+
</ion-content>
32+
</ion-app>
33+
</body>
34+
</html>

0 commit comments

Comments
 (0)