feat(radio): component can be used outside of ion-item (#26582)

angular/src/directives/proxies.ts

@@ -1515,13 +1515,13 @@ export declare interface IonRadio extends Components.IonRadio {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['color', 'disabled', 'mode', 'name', 'value']
+  inputs: ['color', 'disabled', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value']
 })
 @Component({
   selector: 'ion-radio',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['color', 'disabled', 'mode', 'name', 'value']
+  inputs: ['color', 'disabled', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value']
 })
 export class IonRadio {
   protected el: HTMLElement;

core/api.txt

@@ -1004,6 +1004,9 @@ ion-progress-bar,part,track
 ion-radio,shadow
 ion-radio,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-radio,prop,disabled,boolean,false,false,false
+ion-radio,prop,justify,"end" | "space-between" | "start",'space-between',false,false
+ion-radio,prop,labelPlacement,"end" | "fixed" | "start",'start',false,false
+ion-radio,prop,legacy,boolean | undefined,undefined,false,false
 ion-radio,prop,mode,"ios" | "md",undefined,false,false
 ion-radio,prop,name,string,this.inputId,false,false
 ion-radio,prop,value,any,undefined,false,false

core/src/components.d.ts

@@ -2158,6 +2158,18 @@ export namespace Components {
           * If `true`, the user cannot interact with the radio.
          */
         "disabled": boolean;
+        /**
+          * How to pack the label and radio within a line. `'start'`: The label and radio will appear on the left in LTR and on the right in RTL. `'end'`: The label and radio will appear on the right in LTR and on the left in RTL. `'space-between'`: The label and radio will appear on opposite ends of the line with space between the two elements.
+         */
+        "justify": 'start' | 'end' | 'space-between';
+        /**
+          * Where to place the label relative to the radio. `'start'`: The label will appear to the left of the radio in LTR and to the right in RTL. `'end'`: The label will appear to the right of the radio in LTR and to the left in RTL. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+         */
+        "labelPlacement": 'start' | 'end' | 'fixed';
+        /**
+          * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
+         */
+        "legacy"?: boolean;
         /**
           * The mode determines which platform styles to use.
          */
@@ -6066,6 +6078,18 @@ declare namespace LocalJSX {
           * If `true`, the user cannot interact with the radio.
          */
         "disabled"?: boolean;
+        /**
+          * How to pack the label and radio within a line. `'start'`: The label and radio will appear on the left in LTR and on the right in RTL. `'end'`: The label and radio will appear on the right in LTR and on the left in RTL. `'space-between'`: The label and radio will appear on opposite ends of the line with space between the two elements.
+         */
+        "justify"?: 'start' | 'end' | 'space-between';
+        /**
+          * Where to place the label relative to the radio. `'start'`: The label will appear to the left of the radio in LTR and to the right in RTL. `'end'`: The label will appear to the right of the radio in LTR and to the left in RTL. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+         */
+        "labelPlacement"?: 'start' | 'end' | 'fixed';
+        /**
+          * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
+         */
+        "legacy"?: boolean;
         /**
           * The mode determines which platform styles to use.
          */

core/src/components/radio/radio.ios.scss

@@ -6,11 +6,19 @@
 
 :host {
   --color-checked: #{ion-color(primary, base)};
+}
 
+// TODO FW-3125: Remove styles
+:host(.legacy-radio) {
   width: $radio-ios-icon-width;
   height: $radio-ios-icon-height;
 }
 
+// TODO FW-3125: Move styles to :host selector
+:host(:not(.legacy-radio)) {
+  min-height: 42px;
+}
+
 :host(.ion-color.radio-checked) .radio-inner {
   border-color: current-color(base);
 }
@@ -19,7 +27,6 @@
   @include margin-horizontal(0, null);
 }
 
-
 // iOS Radio Checkmark: Checked
 // -----------------------------------------
 
@@ -38,15 +45,13 @@
   border-color: var(--color-checked);
 }
 
-
 // iOS Radio: Disabled
 // -----------------------------------------
 
 :host(.radio-disabled) {
   opacity: $radio-ios-disabled-opacity;
 }
 
-
 // iOS Radio: Keyboard Focus
 // -----------------------------------------
 
@@ -63,20 +68,37 @@
   background: $radio-ios-background-color-focused;
 
   content: "";
-  opacity: .2;
+  opacity: 0.2;
 }
 
-
 // iOS Radio Within An Item
 // -----------------------------------------
 
-:host(.in-item) {
-  @include margin($radio-ios-item-end-margin-top, $radio-ios-item-end-margin-end, $radio-ios-item-end-margin-bottom, $radio-ios-item-end-margin-start);
+:host(.in-item.legacy-radio) {
+  @include margin(
+    $radio-ios-item-end-margin-top,
+    $radio-ios-item-end-margin-end,
+    $radio-ios-item-end-margin-bottom,
+    $radio-ios-item-end-margin-start
+  );
 
   display: block;
   position: static;
 }
 
-:host(.in-item[slot="start"]) {
-  @include margin($radio-ios-item-start-margin-top, $radio-ios-item-start-margin-end, $radio-ios-item-start-margin-bottom, $radio-ios-item-start-margin-start);
+:host(.in-item.legacy-radio[slot="start"]) {
+  @include margin(
+    $radio-ios-item-start-margin-top,
+    $radio-ios-item-start-margin-end,
+    $radio-ios-item-start-margin-bottom,
+    $radio-ios-item-start-margin-start
+  );
+}
+
+// Radio Native Wrapper
+// ----------------------------------------------------------------
+
+.native-wrapper .radio-icon {
+  width: $radio-ios-icon-width;
+  height: $radio-ios-icon-height;
 }

core/src/components/radio/radio.md.scss

@@ -10,11 +10,19 @@
   --border-width: #{$radio-md-icon-border-width};
   --border-style: #{$radio-md-icon-border-style};
   --border-radius: #{$radio-md-icon-border-radius};
+}
 
+// TODO FW-3125: Remove this style
+:host(.legacy-radio) {
   width: $radio-md-icon-width;
   height: $radio-md-icon-height;
 }
 
+// TODO FW-3125: Move styles to :host selector
+:host(:not(.legacy-radio)) {
+  min-height: 46px;
+}
+
 :host(.ion-color) .radio-inner {
   background: current-color(base);
 }
@@ -35,7 +43,6 @@
   border-color: var(--color);
 }
 
-
 // Material Design Radio Inner Circle: Unchecked
 // -----------------------------------------
 
@@ -52,23 +59,20 @@
   background: var(--color-checked);
 }
 
-
 // Material Design Radio Outer Circle: Checked
 // -----------------------------------------
 
 :host(.radio-checked) .radio-icon {
   border-color: var(--color-checked);
 }
 
-
 // Material Design Radio Inner Circle: Checked
 // -----------------------------------------
 
 :host(.radio-checked) .radio-inner {
   transform: scale3d(1, 1, 1);
 }
 
-
 // Material Design Radio: Disabled
 // -----------------------------------------
 
@@ -77,13 +81,15 @@
   opacity: $radio-md-disabled-opacity;
 }
 
-
 // Material Design Radio: Keyboard Focus
 // -----------------------------------------
 
+:host(.ion-focused.legacy-radio) .radio-icon::after {
+  @include position(-12px, null, null, -12px);
+}
+
 :host(.ion-focused) .radio-icon::after {
   @include border-radius(var(--inner-border-radius));
-  @include position(-12px, null, null, -12px);
 
   display: block;
   position: absolute;
@@ -94,20 +100,37 @@
   background: $radio-md-background-color-focused;
 
   content: "";
-  opacity: .2;
+  opacity: 0.2;
 }
 
-
 // Material Design Radio Within An Item
 // -----------------------------------------
 
-:host(.in-item) {
-  @include margin($radio-md-item-end-margin-top, $radio-md-item-end-margin-end, $radio-md-item-end-margin-bottom, $radio-md-item-end-margin-start);
+:host(.in-item.legacy-radio) {
+  @include margin(
+    $radio-md-item-end-margin-top,
+    $radio-md-item-end-margin-end,
+    $radio-md-item-end-margin-bottom,
+    $radio-md-item-end-margin-start
+  );
 
   display: block;
   position: static;
 }
 
-:host(.in-item[slot="start"]) {
-  @include margin($radio-md-item-start-margin-top, $radio-md-item-start-margin-end, $radio-md-item-start-margin-bottom, $radio-md-item-start-margin-start);
+:host(.in-item.legacy-radio[slot="start"]) {
+  @include margin(
+    $radio-md-item-start-margin-top,
+    $radio-md-item-start-margin-end,
+    $radio-md-item-start-margin-bottom,
+    $radio-md-item-start-margin-start
+  );
+}
+
+// Radio Native Wrapper
+// ----------------------------------------------------------------
+
+.native-wrapper .radio-icon {
+  width: $radio-md-icon-width;
+  height: $radio-md-icon-height;
 }