Merge branch 'next' into FW-6252

Author: brandyscarney

core/api.txt

@@ -549,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
@@ -731,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
@@ -954,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
@@ -963,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
@@ -990,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

@@ -1164,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.
@@ -4440,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: {
@@ -5399,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;
@@ -6619,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.
@@ -9532,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;
@@ -9634,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/checkbox/checkbox.scss renamed to core/src/components/checkbox/checkbox.common.scss

@@ -1,14 +1,12 @@
-@import "../../themes/native/native.globals";
-@import "./checkbox.vars.scss";
+@use "../../themes/mixins" as mixins;
 
-// Checkbox
+// Checkbox: Common
 // --------------------------------------------------
 
 :host {
   /**
    * @prop --size: Size of the checkbox icon
    *
-   * @prop --checkbox-background: Background of the checkbox icon
    * @prop --checkbox-background-checked: Background of the checkbox icon when checked
    *
    * @prop --border-color: Border color of the checkbox icon
@@ -22,10 +20,6 @@
    * @prop --checkmark-color: Color of the checkbox checkmark when checked
    * @prop --checkmark-width: Stroke width of the checkbox checkmark
    */
-  --checkbox-background-checked: #{ion-color(primary, base)};
-  --border-color-checked: #{ion-color(primary, base)};
-  --checkmark-color: #{ion-color(primary, contrast)};
-  --transition: none;
 
   display: inline-block;
 
@@ -34,7 +28,6 @@
   cursor: pointer;
 
   user-select: none;
-  z-index: $z-index-item-input;
 }
 
 :host(.in-item) {
@@ -60,12 +53,6 @@
   width: auto;
 }
 
-:host(.ion-color) {
-  --checkbox-background-checked: #{current-color(base)};
-  --border-color-checked: #{current-color(base)};
-  --checkmark-color: #{current-color(contrast)};
-}
-
 .checkbox-wrapper {
   display: flex;
 
@@ -87,21 +74,6 @@
   overflow: hidden;
 }
 
-// Checkboxes that are not slotted inside an item and are not used with a
-// stacked label should have margins equal to those of the label.
-:host(.in-item) .label-text-wrapper,
-:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper {
-  @include margin($checkbox-item-label-margin-top, null, $checkbox-item-label-margin-bottom, null);
-}
-
-:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper {
-  @include margin($checkbox-item-label-margin-top, null, $form-control-label-margin, null);
-}
-
-:host(.in-item.checkbox-label-placement-stacked) .native-wrapper {
-  @include margin(null, null, $checkbox-item-label-margin-bottom, null);
-}
-
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -111,62 +83,31 @@
   display: none;
 }
 
-input {
-  @include visually-hidden();
-}
-
 .native-wrapper {
   display: flex;
 
   align-items: center;
 }
 
 .checkbox-icon {
-  @include border-radius(var(--border-radius));
-
   position: relative;
-
-  width: var(--size);
-  height: var(--size);
-
-  transition: var(--transition);
-
-  border-width: var(--border-width);
-  border-style: var(--border-style);
-  border-color: var(--border-color);
-
-  background: var(--checkbox-background);
-
-  box-sizing: border-box;
 }
 
 .checkbox-icon path {
-  fill: none;
-  stroke: var(--checkmark-color);
-  stroke-width: var(--checkmark-width);
-
   opacity: 0;
 }
 
 // Checkbox Bottom Content
 // ----------------------------------------------------------------
 
 .checkbox-bottom {
-  @include padding(4px, null, null, null);
-
   display: flex;
 
   justify-content: space-between;
 
-  font-size: dynamic-font(12px);
-
   white-space: normal;
 }
 
-:host(.checkbox-label-placement-stacked) .checkbox-bottom {
-  font-size: dynamic-font(16px);
-}
-
 // Checkbox Hint Text
 // ----------------------------------------------------------------
 
@@ -177,14 +118,10 @@ input {
  */
 .checkbox-bottom .error-text {
   display: none;
-
-  color: ion-color(danger, base);
 }
 
 .checkbox-bottom .helper-text {
   display: block;
-
-  color: $text-color-step-300;
 }
 
 :host(.ion-touched.ion-invalid) .checkbox-bottom .error-text {
@@ -206,15 +143,6 @@ input {
   flex-direction: row;
 }
 
-:host(.checkbox-label-placement-start) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the checkbox should be on the end
-   * when the label sits at the start.
-   */
-  @include margin(null, $form-control-label-margin, null, 0);
-}
-
 // Label Placement - End
 // ----------------------------------------------------------------
 
@@ -228,27 +156,9 @@ input {
   justify-content: start;
 }
 
-/**
- * The margin between the label and
- * the checkbox should be on the start
- * when the label sits at the end.
- */
-:host(.checkbox-label-placement-end) .label-text-wrapper {
-  @include margin(null, 0, null, $form-control-label-margin);
-}
-
 // Label Placement - Fixed
 // ----------------------------------------------------------------
 
-:host(.checkbox-label-placement-fixed) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the checkbox should be on the end
-   * when the label sits at the start.
-   */
-  @include margin(null, $form-control-label-margin, null, 0);
-}
-
 /**
  * Label is on the left of the checkbox in LTR and
  * on the right in RTL. Label also has a fixed width.
@@ -273,29 +183,12 @@ input {
   text-align: center;
 }
 
-:host(.checkbox-label-placement-stacked) .label-text-wrapper {
-  @include transform(scale(#{$form-control-label-stacked-scale}));
-
-  /**
-   * The margin between the label and
-   * the checkbox should be on the bottom
-   * when the label sits at the top.
-   */
-  @include margin(null, 0, $form-control-label-margin, 0);
-
-  /**
-   * Label text should not extend
-   * beyond the bounds of the checkbox.
-   */
-  max-width: calc(100% / #{$form-control-label-stacked-scale});
-}
-
 :host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper {
-  @include transform-origin(start, top);
+  @include mixins.transform-origin(start, top);
 }
 
 :host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper {
-  @include transform-origin(center, top);
+  @include mixins.transform-origin(center, top);
 }
 
 // Justify Content
@@ -355,7 +248,6 @@ input {
 
 // Disabled Checkbox
 // ---------------------------------------------
-
 :host(.checkbox-disabled) {
   pointer-events: none;
 }