feat(status): ion status feature poc

core/api.txt

@@ -313,10 +313,12 @@ ion-backdrop,event,ionBackdropTap,void,true
 
 ion-badge,shadow
 ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-badge,prop,hintPosition,"bottom-right" | "top-right",'top-right',false,false
 ion-badge,prop,mode,"ios" | "md",undefined,false,false
 ion-badge,prop,shape,"round | rectangular" | "soft" | undefined,undefined,false,false
 ion-badge,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | undefined,undefined,false,false
 ion-badge,prop,theme,"ios" | "md" | "ionic",undefined,false,false
+ion-badge,prop,useAsHint,boolean,false,false,false
 ion-badge,css-prop,--background,ionic
 ion-badge,css-prop,--background,ios
 ion-badge,css-prop,--background,md
@@ -2181,6 +2183,14 @@ ion-split-pane,css-prop,--side-width,ionic
 ion-split-pane,css-prop,--side-width,ios
 ion-split-pane,css-prop,--side-width,md
 
+ion-status-hint,shadow
+ion-status-hint,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-status-hint,prop,mode,"ios" | "md",undefined,false,false
+ion-status-hint,prop,position,"bottom-right" | "static" | "top-right",'static',false,false
+ion-status-hint,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
+ion-status-hint,prop,size,"large" | "medium" | "small" | undefined,undefined,false,false
+ion-status-hint,prop,theme,"ios" | "md" | "ionic",undefined,false,false
+
 ion-tab,shadow
 ion-tab,prop,component,Function | HTMLElement | null | string | undefined,undefined,false,false
 ion-tab,prop,mode,"ios" | "md",undefined,false,false

core/src/components.d.ts

@@ -424,6 +424,7 @@ export namespace Components {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        "hintPosition": 'top-right' | 'bottom-right';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -440,6 +441,7 @@ export namespace Components {
           * The theme determines the visual appearance of the component.
          */
         "theme"?: "ios" | "md" | "ionic";
+        "useAsHint": boolean;
     }
     interface IonBreadcrumb {
         /**
@@ -3425,6 +3427,26 @@ export namespace Components {
          */
         "when": string | boolean;
     }
+    interface IonStatusHint {
+        "color"?: Color;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        "position": 'top-right' | 'bottom-right' | 'static';
+        /**
+          * Set to `"soft"` for an hint with slightly rounded corners, `"round"` for an hint with fully rounded corners, or `"rectangular"` for an hint without rounded corners.  Defaults to `"round"`.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * Set to `"small"` for a compact size. Set to `"medium"` for the default height and width. Set to `"large"` for a larger size.  Defaults to `"small"`.
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+    }
     interface IonTab {
         "active": boolean;
         /**
@@ -5151,6 +5173,12 @@ declare global {
         prototype: HTMLIonSplitPaneElement;
         new (): HTMLIonSplitPaneElement;
     };
+    interface HTMLIonStatusHintElement extends Components.IonStatusHint, HTMLStencilElement {
+    }
+    var HTMLIonStatusHintElement: {
+        prototype: HTMLIonStatusHintElement;
+        new (): HTMLIonStatusHintElement;
+    };
     interface HTMLIonTabElement extends Components.IonTab, HTMLStencilElement {
     }
     var HTMLIonTabElement: {
@@ -5395,6 +5423,7 @@ declare global {
         "ion-skeleton-text": HTMLIonSkeletonTextElement;
         "ion-spinner": HTMLIonSpinnerElement;
         "ion-split-pane": HTMLIonSplitPaneElement;
+        "ion-status-hint": HTMLIonStatusHintElement;
         "ion-tab": HTMLIonTabElement;
         "ion-tab-bar": HTMLIonTabBarElement;
         "ion-tab-button": HTMLIonTabButtonElement;
@@ -5784,6 +5813,7 @@ declare namespace LocalJSX {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        "hintPosition"?: 'top-right' | 'bottom-right';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -5800,6 +5830,7 @@ declare namespace LocalJSX {
           * The theme determines the visual appearance of the component.
          */
         "theme"?: "ios" | "md" | "ionic";
+        "useAsHint"?: boolean;
     }
     interface IonBreadcrumb {
         /**
@@ -8868,6 +8899,26 @@ declare namespace LocalJSX {
          */
         "when"?: string | boolean;
     }
+    interface IonStatusHint {
+        "color"?: Color;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        "position"?: 'top-right' | 'bottom-right' | 'static';
+        /**
+          * Set to `"soft"` for an hint with slightly rounded corners, `"round"` for an hint with fully rounded corners, or `"rectangular"` for an hint without rounded corners.  Defaults to `"round"`.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * Set to `"small"` for a compact size. Set to `"medium"` for the default height and width. Set to `"large"` for a larger size.  Defaults to `"small"`.
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+    }
     interface IonTab {
         "active"?: boolean;
         /**
@@ -9464,6 +9515,7 @@ declare namespace LocalJSX {
         "ion-skeleton-text": IonSkeletonText;
         "ion-spinner": IonSpinner;
         "ion-split-pane": IonSplitPane;
+        "ion-status-hint": IonStatusHint;
         "ion-tab": IonTab;
         "ion-tab-bar": IonTabBar;
         "ion-tab-button": IonTabButton;
@@ -9566,6 +9618,7 @@ declare module "@stencil/core" {
             "ion-skeleton-text": LocalJSX.IonSkeletonText & JSXBase.HTMLAttributes<HTMLIonSkeletonTextElement>;
             "ion-spinner": LocalJSX.IonSpinner & JSXBase.HTMLAttributes<HTMLIonSpinnerElement>;
             "ion-split-pane": LocalJSX.IonSplitPane & JSXBase.HTMLAttributes<HTMLIonSplitPaneElement>;
+            "ion-status-hint": LocalJSX.IonStatusHint & JSXBase.HTMLAttributes<HTMLIonStatusHintElement>;
             "ion-tab": LocalJSX.IonTab & JSXBase.HTMLAttributes<HTMLIonTabElement>;
             "ion-tab-bar": LocalJSX.IonTabBar & JSXBase.HTMLAttributes<HTMLIonTabBarElement>;
             "ion-tab-button": LocalJSX.IonTabButton & JSXBase.HTMLAttributes<HTMLIonTabButtonElement>;

core/src/components/badge/badge.common.scss

@@ -48,6 +48,13 @@
   color: #{color.current-color(contrast)};
 }
 
-:host(:empty) {
+:host(:empty):not(.badge-hint) {
   display: none;
 }
+
+ion-avatar ::slotted(ion-badge) {
+  position: absolute;
+  right: 0;
+
+  font-size: var(--ion-font-size-275, 0.6875rem);
+}

core/src/components/badge/badge.tsx

@@ -47,6 +47,10 @@ export class Badge implements ComponentInterface {
    */
   @Prop() size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 
+  @Prop() useAsHint: boolean = false;
+
+  @Prop() hintPosition: 'top-right' | 'bottom-right' = 'top-right';
+
   private getShape(): string | undefined {
     const theme = getIonTheme(this);
     const { shape } = this;
@@ -63,11 +67,12 @@ export class Badge implements ComponentInterface {
     return shape;
   }
 
+
   private getSize(): string | undefined {
     const theme = getIonTheme(this);
-    const { size } = this;
+    const { size, useAsHint } = this;
 
-    // TODO(ROU-10747): Remove theme check when sizes are defined for all themes.
+    // TODO: Remove theme check when sizes are defined for all themes.
     if (theme !== 'ionic') {
       return undefined;
     }
@@ -76,9 +81,14 @@ export class Badge implements ComponentInterface {
       return 'small';
     }
 
+    if (useAsHint && size && !['small', 'medium', 'large'].includes(size)) {
+      return 'small';
+    }
+
     return size;
   }
 
+
   render() {
     const shape = this.getShape();
     const size = this.getSize();
@@ -89,6 +99,8 @@ export class Badge implements ComponentInterface {
           [theme]: true,
           [`badge-${shape}`]: shape !== undefined,
           [`badge-${size}`]: size !== undefined,
+          ['badge-hint']: this.useAsHint,
+          [`badge-hint-${this.hintPosition}`]: this.useAsHint,
         })}
       >
         <slot></slot>

core/src/components/button/button.common.scss

@@ -304,4 +304,4 @@ ion-ripple-effect {
 :host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
   background: #{var(--ion-toolbar-color, var(--background))};
   color: #{var(--ion-toolbar-background, var(--color))};
-}
+}

core/src/components/status-hint/status-hint.ionic.scss

@@ -0,0 +1,91 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "../../themes/functions.color" as color;
+
+// Ionic Badge
+// --------------------------------------------------
+
+:host {
+  --background: #{globals.ion-color(primary, base)};
+  --color: #{globals.ion-color(primary, contrast)};
+
+  display: inline-flex;
+
+  position: static;
+
+  align-items: center;
+  justify-content: center;
+
+  font-size: globals.$ion-font-size-275;
+
+  overflow: hidden;
+}
+
+:host(.ion-color) {
+    background: #{color.current-color(base)};
+    color: #{color.current-color(contrast)};
+}
+
+// Hint Positions
+// --------------------------------------------------
+:host(.hint-top-right),
+:host(.hint-bottom-right) {
+    position: absolute;
+    right: 0;
+
+    border-width: globals.$ion-border-size-025;
+    border-style: globals.$ion-border-style-solid;
+    border-color: #fff;
+}
+
+:host(.hint-top-right) {
+    top: 0;
+}
+
+:host(.hint-bottom-right) {
+    bottom: 0;
+}
+
+// Hint Shapes
+// --------------------------------------------------
+
+/* Soft */
+:host(.hint-soft) {
+  @include globals.border-radius(globals.$ion-border-radius-200);
+}
+
+:host(.hint-small.hint-soft) {
+  @include globals.border-radius(globals.$ion-border-radius-100);
+}
+
+/* Round  */
+:host(.hint-round) {
+  @include globals.border-radius(globals.$ion-border-radius-full);
+}
+
+/* Rectangular */
+:host(.hint-rectangular) {
+  @include globals.border-radius(globals.$ion-border-radius-0);
+}
+
+// Hint Sizes
+// --------------------------------------------------
+
+/* Small status-hint */
+:host(.hint-small) {
+  width: globals.$ion-scale-200;
+  height: globals.$ion-scale-200;
+
+  transform: translateX(-50%);
+}
+
+/* Small status-hint */
+:host(.hint-medium) {
+  width: globals.$ion-scale-300;
+  height: globals.$ion-scale-300;
+}
+
+/* Large status-hint */
+:host(.hint-large) {
+  width: globals.$ion-scale-400;
+  height: globals.$ion-scale-400;
+}