Merge branch 'next' into FW-6389-textarea

Author: brandyscarney

core/api.txt

@@ -185,6 +185,7 @@ ion-app,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-app,method,setFocus,setFocus(elements: HTMLElement[]) => Promise<void>
 
 ion-avatar,shadow
+ion-avatar,prop,disabled,boolean,false,false,false
 ion-avatar,prop,mode,"ios" | "md",undefined,false,false
 ion-avatar,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 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
 ion-checkbox,event,ionBlur,void,true
 ion-checkbox,event,ionChange,CheckboxChangeEventDetail<any>,true
 ion-checkbox,event,ionFocus,void,true
+ion-checkbox,css-prop,--border-color,ionic
 ion-checkbox,css-prop,--border-color,ios
 ion-checkbox,css-prop,--border-color,md
+ion-checkbox,css-prop,--border-color-checked,ionic
 ion-checkbox,css-prop,--border-color-checked,ios
 ion-checkbox,css-prop,--border-color-checked,md
+ion-checkbox,css-prop,--border-radius,ionic
 ion-checkbox,css-prop,--border-radius,ios
 ion-checkbox,css-prop,--border-radius,md
+ion-checkbox,css-prop,--border-style,ionic
 ion-checkbox,css-prop,--border-style,ios
 ion-checkbox,css-prop,--border-style,md
+ion-checkbox,css-prop,--border-width,ionic
 ion-checkbox,css-prop,--border-width,ios
 ion-checkbox,css-prop,--border-width,md
 ion-checkbox,css-prop,--checkbox-background,ios
 ion-checkbox,css-prop,--checkbox-background,md
+ion-checkbox,css-prop,--checkbox-background-checked,ionic
 ion-checkbox,css-prop,--checkbox-background-checked,ios
 ion-checkbox,css-prop,--checkbox-background-checked,md
+ion-checkbox,css-prop,--checkmark-color,ionic
 ion-checkbox,css-prop,--checkmark-color,ios
 ion-checkbox,css-prop,--checkmark-color,md
+ion-checkbox,css-prop,--checkmark-height,ionic
+ion-checkbox,css-prop,--checkmark-width,ionic
 ion-checkbox,css-prop,--checkmark-width,ios
 ion-checkbox,css-prop,--checkmark-width,md
+ion-checkbox,css-prop,--focus-ring-color,ionic
+ion-checkbox,css-prop,--focus-ring-offset,ionic
+ion-checkbox,css-prop,--focus-ring-width,ionic
+ion-checkbox,css-prop,--size,ionic
 ion-checkbox,css-prop,--size,ios
 ion-checkbox,css-prop,--size,md
+ion-checkbox,css-prop,--transition,ionic
 ion-checkbox,css-prop,--transition,ios
 ion-checkbox,css-prop,--transition,md
 ion-checkbox,part,container
@@ -730,6 +745,22 @@ ion-datetime-button,prop,mode,"ios" | "md",undefined,false,false
 ion-datetime-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-datetime-button,part,native
 
+ion-divider,shadow
+ion-divider,prop,inset,boolean,false,false,false
+ion-divider,prop,spacing,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall" | undefined,'xxsmall',false,true
+ion-divider,css-prop,--margin-bottom,ionic
+ion-divider,css-prop,--margin-bottom,ios
+ion-divider,css-prop,--margin-bottom,md
+ion-divider,css-prop,--margin-top,ionic
+ion-divider,css-prop,--margin-top,ios
+ion-divider,css-prop,--margin-top,md
+ion-divider,css-prop,--padding-end,ionic
+ion-divider,css-prop,--padding-end,ios
+ion-divider,css-prop,--padding-end,md
+ion-divider,css-prop,--padding-start,ionic
+ion-divider,css-prop,--padding-start,ios
+ion-divider,css-prop,--padding-start,md
+
 ion-fab,shadow
 ion-fab,prop,activated,boolean,false,false,false
 ion-fab,prop,edge,boolean,false,false,false
@@ -953,7 +984,6 @@ ion-input,css-prop,--border-width,md
 ion-input,css-prop,--color,ionic
 ion-input,css-prop,--color,ios
 ion-input,css-prop,--color,md
-ion-input,css-prop,--highlight-color-focused,ionic
 ion-input,css-prop,--highlight-color-focused,ios
 ion-input,css-prop,--highlight-color-focused,md
 ion-input,css-prop,--highlight-color-invalid,ionic
@@ -962,7 +992,6 @@ ion-input,css-prop,--highlight-color-invalid,md
 ion-input,css-prop,--highlight-color-valid,ionic
 ion-input,css-prop,--highlight-color-valid,ios
 ion-input,css-prop,--highlight-color-valid,md
-ion-input,css-prop,--highlight-height,ionic
 ion-input,css-prop,--highlight-height,ios
 ion-input,css-prop,--highlight-height,md
 ion-input,css-prop,--padding-bottom,ionic
@@ -989,9 +1018,6 @@ ion-input,css-prop,--placeholder-font-weight,md
 ion-input,css-prop,--placeholder-opacity,ionic
 ion-input,css-prop,--placeholder-opacity,ios
 ion-input,css-prop,--placeholder-opacity,md
-ion-input,css-prop,--text-color-invalid,ionic
-ion-input,css-prop,--text-color-invalid,ios
-ion-input,css-prop,--text-color-invalid,md
 
 ion-input-password-toggle,shadow
 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

@@ -343,6 +343,10 @@ export namespace Components {
         "theme"?: "ios" | "md" | "ionic";
     }
     interface IonAvatar {
+        /**
+          * If `true`, the user cannot interact with the avatar.
+         */
+        "disabled": boolean;
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -1160,6 +1164,16 @@ export namespace Components {
          */
         "theme"?: "ios" | "md" | "ionic";
     }
+    interface IonDivider {
+        /**
+          * If `true`, the divider will have horizontal margins By default, it's `false`
+         */
+        "inset": boolean;
+        /**
+          * 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"`.
+         */
+        "spacing"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+    }
     interface IonFab {
         /**
           * 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 {
         prototype: HTMLIonDatetimeButtonElement;
         new (): HTMLIonDatetimeButtonElement;
     };
+    interface HTMLIonDividerElement extends Components.IonDivider, HTMLStencilElement {
+    }
+    var HTMLIonDividerElement: {
+        prototype: HTMLIonDividerElement;
+        new (): HTMLIonDividerElement;
+    };
     interface HTMLIonFabElement extends Components.IonFab, HTMLStencilElement {
     }
     var HTMLIonFabElement: {
@@ -5395,6 +5415,7 @@ declare global {
         "ion-content": HTMLIonContentElement;
         "ion-datetime": HTMLIonDatetimeElement;
         "ion-datetime-button": HTMLIonDatetimeButtonElement;
+        "ion-divider": HTMLIonDividerElement;
         "ion-fab": HTMLIonFabElement;
         "ion-fab-button": HTMLIonFabButtonElement;
         "ion-fab-list": HTMLIonFabListElement;
@@ -5759,6 +5780,10 @@ declare namespace LocalJSX {
         "theme"?: "ios" | "md" | "ionic";
     }
     interface IonAvatar {
+        /**
+          * If `true`, the user cannot interact with the avatar.
+         */
+        "disabled"?: boolean;
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -6611,6 +6636,16 @@ declare namespace LocalJSX {
          */
         "theme"?: "ios" | "md" | "ionic";
     }
+    interface IonDivider {
+        /**
+          * If `true`, the divider will have horizontal margins By default, it's `false`
+         */
+        "inset"?: boolean;
+        /**
+          * 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"`.
+         */
+        "spacing"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+    }
     interface IonFab {
         /**
           * 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 {
         "ion-content": IonContent;
         "ion-datetime": IonDatetime;
         "ion-datetime-button": IonDatetimeButton;
+        "ion-divider": IonDivider;
         "ion-fab": IonFab;
         "ion-fab-button": IonFabButton;
         "ion-fab-list": IonFabList;
@@ -9626,6 +9662,7 @@ declare module "@stencil/core" {
             "ion-content": LocalJSX.IonContent & JSXBase.HTMLAttributes<HTMLIonContentElement>;
             "ion-datetime": LocalJSX.IonDatetime & JSXBase.HTMLAttributes<HTMLIonDatetimeElement>;
             "ion-datetime-button": LocalJSX.IonDatetimeButton & JSXBase.HTMLAttributes<HTMLIonDatetimeButtonElement>;
+            "ion-divider": LocalJSX.IonDivider & JSXBase.HTMLAttributes<HTMLIonDividerElement>;
             "ion-fab": LocalJSX.IonFab & JSXBase.HTMLAttributes<HTMLIonFabElement>;
             "ion-fab-button": LocalJSX.IonFabButton & JSXBase.HTMLAttributes<HTMLIonFabButtonElement>;
             "ion-fab-list": LocalJSX.IonFabList & JSXBase.HTMLAttributes<HTMLIonFabListElement>;

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

@@ -171,3 +171,9 @@
 :host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:empty) {
   transform: translate(globals.$ion-scale-100, calc(globals.$ion-scale-100));
 }
+
+// Avatar Disabled
+// --------------------------------------------------
+:host(.avatar-disabled)::before {
+  @include globals.disabled-state();
+}

core/src/components/avatar/avatar.tsx

@@ -40,6 +40,11 @@ export class Avatar implements ComponentInterface {
    */
   @Prop() shape?: 'soft' | 'round' | 'rectangular';
 
+  /**
+   * If `true`, the user cannot interact with the avatar.
+   */
+  @Prop() disabled = false;
+
   get hasImage() {
     return !!this.el.querySelector('ion-img') || !!this.el.querySelector('img');
   }
@@ -81,6 +86,7 @@ export class Avatar implements ComponentInterface {
   }
 
   render() {
+    const { hasImage, hasIcon, disabled } = this;
     const theme = getIonTheme(this);
     const size = this.getSize();
     const shape = this.getShape();
@@ -91,8 +97,9 @@ export class Avatar implements ComponentInterface {
           [theme]: true,
           [`avatar-${size}`]: size !== undefined,
           [`avatar-${shape}`]: shape !== undefined,
-          [`avatar-image`]: this.hasImage,
-          [`avatar-icon`]: this.hasIcon,
+          [`avatar-image`]: hasImage,
+          [`avatar-icon`]: hasIcon,
+          [`avatar-disabled`]: disabled,
         }}
       >
         <slot></slot>

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

@@ -0,0 +1,27 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * Avatar does not test RTL behaviors.
+ * Usages of Avatar in slots are tested in components that use Avatar.
+ */
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('avatar: states'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setContent(
+        ` 
+        <div id="container"> 
+          <ion-avatar disabled> AV </ion-avatar>
+          <ion-avatar disabled>
+            <img src="/src/components/avatar/test/avatar.svg" />
+          </ion-avatar>
+        </div> 
+      `,
+        config
+      );
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`avatar-disabled`));
+    });
+  });
+});

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

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Avatar - States</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Avatar - States</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <h3>Disabled</h3>
+        <ion-avatar disabled>AV</ion-avatar>
+        <ion-avatar disabled>
+          <img src="/src/components/avatar/test/avatar.svg" />
+        </ion-avatar>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

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

@@ -51,15 +51,15 @@
 // Badge Empty (hint)
 // --------------------------------------------------
 
-:host([vertical]) {
+:host([vertical]:not(.in-tab-button)) {
   @include position(null, 0, null, null);
   position: absolute;
 }
 
-:host(:empty.badge-vertical-top) {
+:host(:not(.in-tab-button):empty.badge-vertical-top) {
   top: 0;
 }
 
-:host(:empty.badge-vertical-bottom) {
+:host(:not(.in-tab-button):empty.badge-vertical-bottom) {
   bottom: 0;
 }