change position prop

Author: BenOsodrac

core/api.txt

@@ -314,7 +314,7 @@ 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,mode,"ios" | "md",undefined,false,false
-ion-badge,prop,position,"bottom-right" | "static" | "top-right",'static',false,false
+ion-badge,prop,position,"bottom" | "top" | undefined,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

core/src/components.d.ts

@@ -429,9 +429,9 @@ export namespace Components {
          */
         "mode"?: "ios" | "md";
         /**
-          * Set to `"top-right"` to position the badge on top right absolute position of the parent element. Set to `"bottom-right"` to position the badge on bottom right absolute position of the parent element.  Defaults to `"static"`.
+          * Set to `"top"` to position the badge on top right absolute position of the parent element. Set to `"bottom"` to position the badge on bottom right absolute position of the parent element.
          */
-        "position": 'top-right' | 'bottom-right' | 'static';
+        "position"?: 'top' | 'bottom';
         /**
           * Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
          */
@@ -5797,9 +5797,9 @@ declare namespace LocalJSX {
          */
         "mode"?: "ios" | "md";
         /**
-          * Set to `"top-right"` to position the badge on top right absolute position of the parent element. Set to `"bottom-right"` to position the badge on bottom right absolute position of the parent element.  Defaults to `"static"`.
+          * Set to `"top"` to position the badge on top right absolute position of the parent element. Set to `"bottom"` to position the badge on bottom right absolute position of the parent element.
          */
-        "position"?: 'top-right' | 'bottom-right' | 'static';
+        "position"?: 'top' | 'bottom';
         /**
           * Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
          */

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

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

core/src/components/badge/badge.ionic.scss

@@ -154,7 +154,7 @@
   --padding-end: 0;
 }
 
-:host(:empty:not(.badge-static)) {
+:host(:empty[position])  {
   border: globals.$ion-border-size-025 globals.$ion-border-style-solid globals.$ion-bg-surface-inverse;
 }
 

core/src/components/badge/badge.tsx

@@ -48,12 +48,10 @@ export class Badge implements ComponentInterface {
   @Prop() size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 
   /**
-   * Set to `"top-right"` to position the badge on top right absolute position of the parent element.
-   * Set to `"bottom-right"` to position the badge on bottom right absolute position of the parent element.
-   *
-   * Defaults to `"static"`.
+   * Set to `"top"` to position the badge on top right absolute position of the parent element.
+   * Set to `"bottom"` to position the badge on bottom right absolute position of the parent element.
    */
-  @Prop() position: 'top-right' | 'bottom-right' | 'static' = 'static';
+  @Prop() position?: 'top' | 'bottom';
 
   private getShape(): string | undefined {
     const theme = getIonTheme(this);
@@ -97,7 +95,7 @@ export class Badge implements ComponentInterface {
           [theme]: true,
           [`badge-${shape}`]: shape !== undefined,
           [`badge-${size}`]: size !== undefined,
-          [`badge-${this.position}`]: true,
+          [`badge-${this.position}`]: this.position !== undefined,
         })}
       >
         <slot></slot>