fix(radio): add name attribute to all radio buttons (#612)

IgniteUI · Jan 23, 2024 · 16600b5 · 16600b5
1 parent 188ab75
commit 16600b5
Show file tree

Hide file tree

Showing 17 changed files with 59 additions and 59 deletions.
diff --git a/samples/grids/list/overview/App.razor b/samples/grids/list/overview/App.razor
@@ -3,9 +3,9 @@
 
 <div class="container vertical">
     <IgbRadioGroup Alignment="@RadioGroupAlignment.Horizontal">
-        <IgbRadio Value="Small" label-position="after" Change="OnRadioOptionClick">Small</IgbRadio>
-        <IgbRadio Value="Medium" label-position="after" Change="OnRadioOptionClick">Medium</IgbRadio>
-        <IgbRadio Value="Large" label-position="after" Checked="true" Change="OnRadioOptionClick">Large</IgbRadio>
+        <IgbRadio name="size" Value="Small" label-position="after" Change="OnRadioOptionClick">Small</IgbRadio>
+        <IgbRadio name="size" Value="Medium" label-position="after" Change="OnRadioOptionClick">Medium</IgbRadio>
+        <IgbRadio name="size" Value="Large" label-position="after" Checked="true" Change="OnRadioOptionClick">Large</IgbRadio>
     </IgbRadioGroup>
 
     <IgbList style="margin-top: 10px;" Size="@ListSize">

diff --git a/samples/inputs/button/size/App.razor b/samples/inputs/button/size/App.razor
@@ -17,9 +17,9 @@
 
 <div class="container vertical">
     <IgbRadioGroup id="radioGroup" Alignment="RadioGroupAlignment.Horizontal" >
-        <IgbRadio Value="small" LabelPosition="RadioLabelPosition.After" @onclick="OnSmallClick">Small</IgbRadio>
-        <IgbRadio Value="medium" LabelPosition="RadioLabelPosition.After" @onclick="OnMediumClick">Medium</IgbRadio>
-        <IgbRadio Value="large" LabelPosition="RadioLabelPosition.After" Checked="true" @onclick="OnLargeClick">Large</IgbRadio>
+        <IgbRadio name="size" Value="small" LabelPosition="RadioLabelPosition.After" @onclick="OnSmallClick">Small</IgbRadio>
+        <IgbRadio name="size" Value="medium" LabelPosition="RadioLabelPosition.After" @onclick="OnMediumClick">Medium</IgbRadio>
+        <IgbRadio name="size" Value="large" LabelPosition="RadioLabelPosition.After" Checked="true" @onclick="OnLargeClick">Large</IgbRadio>
     </IgbRadioGroup>
 
     <div class="buttonContainer">

diff --git a/samples/inputs/input/size/App.razor b/samples/inputs/input/size/App.razor
@@ -12,9 +12,9 @@
     </style>
 
     <IgbRadioGroup id="radioGroup" Alignment="@RadioGroupAlignment.Horizontal">
-        <IgbRadio Value="Small" LabelPosition="@RadioLabelPosition.After" Change="@OnRadioOptionClick">Small</IgbRadio>
-        <IgbRadio Value="Medium" LabelPosition="@RadioLabelPosition.After" Checked="true" Change="@OnRadioOptionClick">Medium</IgbRadio>
-        <IgbRadio Value="Large" LabelPosition="@RadioLabelPosition.After" Change="@OnRadioOptionClick">Large</IgbRadio>
+        <IgbRadio name="size" Value="Small" LabelPosition="@RadioLabelPosition.After" Change="@OnRadioOptionClick">Small</IgbRadio>
+        <IgbRadio name="size" Value="Medium" LabelPosition="@RadioLabelPosition.After" Checked="true" Change="@OnRadioOptionClick">Medium</IgbRadio>
+        <IgbRadio name="size" Value="Large" LabelPosition="@RadioLabelPosition.After" Change="@OnRadioOptionClick">Large</IgbRadio>
     </IgbRadioGroup>
 
     <IgbInput DisplayType="@InputType.Text" Size="@InputSize" Label="Required" Value="This input is required" Required="true" />

diff --git a/samples/inputs/radio/alignment/App.razor b/samples/inputs/radio/alignment/App.razor
@@ -4,10 +4,10 @@
 
 <div class="container vertical" style="width: 26.875rem; height: 1.5rem; border: 1px solid gainsboro">
     <IgbRadioGroup Alignment="RadioGroupAlignment.Horizontal">
-        <IgbRadio>Apple</IgbRadio>
-        <IgbRadio Checked="true">Banana</IgbRadio>
-        <IgbRadio>Mango</IgbRadio>
-        <IgbRadio>Orange</IgbRadio>
+        <IgbRadio name="fruit">Apple</IgbRadio>
+        <IgbRadio name="fruit" Checked="true">Banana</IgbRadio>
+        <IgbRadio name="fruit">Mango</IgbRadio>
+        <IgbRadio name="fruit">Orange</IgbRadio>
     </IgbRadioGroup>
 </div>
 

diff --git a/samples/inputs/radio/disabled/App.razor b/samples/inputs/radio/disabled/App.razor
@@ -4,10 +4,10 @@
 <div class="container vertical" >
     <div style="width: 25rem; border: 1px solid gainsboro">
         <IgbRadioGroup>
-            <IgbRadio>Apple</IgbRadio>
-            <IgbRadio Disabled="true">Banana</IgbRadio>
-            <IgbRadio>Mango</IgbRadio>
-            <IgbRadio>Orange</IgbRadio>
+            <IgbRadio name="fruit">Apple</IgbRadio>
+            <IgbRadio name="fruit" Disabled="true">Banana</IgbRadio>
+            <IgbRadio name="fruit">Mango</IgbRadio>
+            <IgbRadio name="fruit">Orange</IgbRadio>
         </IgbRadioGroup>
     </div>
 </div>

diff --git a/samples/inputs/radio/group/App.razor b/samples/inputs/radio/group/App.razor
@@ -4,10 +4,10 @@
 <div class="container vertical">
     <div style="width: 25rem; border: 1px solid gainsboro">
         <IgbRadioGroup>
-            <IgbRadio>Apple</IgbRadio>
-            <IgbRadio Checked="true">Banana</IgbRadio>
-            <IgbRadio>Mango</IgbRadio>
-            <IgbRadio>Orange</IgbRadio>
+            <IgbRadio name="fruit">Apple</IgbRadio>
+            <IgbRadio name="fruit" Checked="true">Banana</IgbRadio>
+            <IgbRadio name="fruit">Mango</IgbRadio>
+            <IgbRadio name="fruit">Orange</IgbRadio>
         </IgbRadioGroup>
     </div>
 </div>

diff --git a/samples/inputs/radio/label/App.razor b/samples/inputs/radio/label/App.razor
@@ -4,10 +4,10 @@
 
 <div class="container vertical">
     <IgbRadioGroup>
-        <IgbRadio LabelPosition="RadioLabelPosition.Before" Value="apple">Apple</IgbRadio>
+        <IgbRadio name="fruit" LabelPosition="RadioLabelPosition.Before" Value="apple">Apple</IgbRadio>
         <div style="display: flex; align-items: center">
             <span id="radio-label">Label</span>
-            <IgbRadio LabelPosition="RadioLabelPosition.Before"
+            <IgbRadio name="fruit" LabelPosition="RadioLabelPosition.Before"
                        AriaLabelledby="radio-label"
                        Value="orange"></IgbRadio>
         </div>

diff --git a/samples/inputs/radio/styling/App.razor b/samples/inputs/radio/styling/App.razor
@@ -15,10 +15,10 @@
             }
         </style>
         <IgbRadioGroup>
-            <IgbRadio>Apple</IgbRadio>
-            <IgbRadio Checked="true">Banana</IgbRadio>
-            <IgbRadio>Mango</IgbRadio>
-            <IgbRadio>Orange</IgbRadio>
+            <IgbRadio name="fruit">Apple</IgbRadio>
+            <IgbRadio name="fruit" Checked="true">Banana</IgbRadio>
+            <IgbRadio name="fruit">Mango</IgbRadio>
+            <IgbRadio name="fruit">Orange</IgbRadio>
         </IgbRadioGroup>
     </div>
 </div>

diff --git a/samples/layouts/accordion/customization/App.razor b/samples/layouts/accordion/customization/App.razor
@@ -55,7 +55,7 @@
             <IgbRadioGroup>
                 @foreach (var rating in Ratings)
                 {
-                    <IgbRadio Value="@rating.Id" Change="OnRadioChange">
+                    <IgbRadio name="rating" Value="@rating.Id" Change="OnRadioChange">
                         <IgbRating Label="@rating.Label" Value="@rating.Value" Max="5" Size="SizableComponentSize.Small" Readonly="true"></IgbRating>
                     </IgbRadio>
                 }

diff --git a/samples/layouts/stepper/linear/App.razor b/samples/layouts/stepper/linear/App.razor
@@ -32,9 +32,9 @@
             <span slot="title">Payment</span>
 
             <IgbRadioGroup>
-                <IgbRadio Required="true" Value="paypal" Change="OnPaymentChange">PayPal (n@mail.com; 18/02/2021)</IgbRadio>
-                <IgbRadio Required="true" Value="visa" Change="OnPaymentChange">Visa (**** **** **** 1234; 12/23)</IgbRadio>
-                <IgbRadio Required="true" Value="mastercard" Change="OnPaymentChange">MasterCard (**** **** **** 5678; 12/24)</IgbRadio>
+                <IgbRadio name="payment" Required="true" Value="paypal" Change="OnPaymentChange">PayPal (n@mail.com; 18/02/2021)</IgbRadio>
+                <IgbRadio name="payment" Required="true" Value="visa" Change="OnPaymentChange">Visa (**** **** **** 1234; 12/23)</IgbRadio>
+                <IgbRadio name="payment" Required="true" Value="mastercard" Change="OnPaymentChange">MasterCard (**** **** **** 5678; 12/24)</IgbRadio>
             </IgbRadioGroup>
             <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Previous">PREVIOUS</IgbButton>
             <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Next" Disabled="@(IsLinear && !IsValid)">SUBMIT</IgbButton>

diff --git a/samples/layouts/stepper/orientation/App.razor b/samples/layouts/stepper/orientation/App.razor
@@ -7,11 +7,11 @@
             <label>Title position</label>
             <div class="radio-group-container">
                 <IgbRadioGroup Alignment="RadioGroupAlignment.Horizontal">
-                    <IgbRadio Value="top" Change="onTitlePositionChange">Top</IgbRadio>
-                    <IgbRadio Value="bottom" Change="onTitlePositionChange">Bottom</IgbRadio>
-                    <IgbRadio Value="start" Change="onTitlePositionChange">Start</IgbRadio>
-                    <IgbRadio Value="end" Change="onTitlePositionChange">End</IgbRadio>
-                    <IgbRadio Value="" Checked="true" Change="onTitlePositionChange">Default</IgbRadio>
+                    <IgbRadio name="alignment" Value="top" Change="onTitlePositionChange">Top</IgbRadio>
+                    <IgbRadio name="alignment" Value="bottom" Change="onTitlePositionChange">Bottom</IgbRadio>
+                    <IgbRadio name="alignment" Value="start" Change="onTitlePositionChange">Start</IgbRadio>
+                    <IgbRadio name="alignment" Value="end" Change="onTitlePositionChange">End</IgbRadio>
+                    <IgbRadio name="alignment" Value="" Checked="true" Change="onTitlePositionChange">Default</IgbRadio>
                 </IgbRadioGroup>
             </div>
         </div>
@@ -20,8 +20,8 @@
             <label>Orientation</label>
             <div class="radio-group-container">
                 <IgbRadioGroup Alignment="RadioGroupAlignment.Horizontal">
-                    <IgbRadio Value="horizontal" Checked="true" Change="onOrientationChange">Horizontal</IgbRadio>
-                    <IgbRadio Value="vertical" Change="onOrientationChange">Vertical</IgbRadio>
+                    <IgbRadio name="orientation" Value="horizontal" Checked="true" Change="onOrientationChange">Horizontal</IgbRadio>
+                    <IgbRadio name="orientation" Value="vertical" Change="onOrientationChange">Vertical</IgbRadio>
                 </IgbRadioGroup>
             </div>
         </div>

diff --git a/samples/layouts/stepper/overview/App.razor b/samples/layouts/stepper/overview/App.razor
@@ -61,8 +61,8 @@
                     }
                     <label>Does this business operate outside the United States?<span class="required">*</span></label>
                     <IgbRadioGroup>
-                        <IgbRadio Required="true" Value="yes" Change="OnBusinessRadioChange">Yes.</IgbRadio>
-                        <IgbRadio Required="true" Value="no" Change="OnBusinessRadioChange">No.</IgbRadio>                
+                        <IgbRadio name="flag" Required="true" Value="yes" Change="OnBusinessRadioChange">Yes.</IgbRadio>
+                        <IgbRadio name="flag" Required="true" Value="no" Change="OnBusinessRadioChange">No.</IgbRadio>                
                     </IgbRadioGroup>
                 </div>
                 <div class="selected-card-wrapper">

diff --git a/samples/layouts/stepper/steptypes/App.razor b/samples/layouts/stepper/steptypes/App.razor
@@ -5,9 +5,9 @@
    <label>Step type</label>
    <div class="radio-group-container">
         <IgbRadioGroup Alignment="RadioGroupAlignment.Horizontal">
-            <IgbRadio Value="indicator" Change="onStepTypeChange">Indicator</IgbRadio>
-            <IgbRadio Value="title" Change="onStepTypeChange">Title</IgbRadio>
-            <IgbRadio Value="full" Checked="true" Change="onStepTypeChange">Full</IgbRadio>
+            <IgbRadio name="type" Value="indicator" Change="onStepTypeChange">Indicator</IgbRadio>
+            <IgbRadio name="type" Value="title" Change="onStepTypeChange">Title</IgbRadio>
+            <IgbRadio name="type" Value="full" Checked="true" Change="onStepTypeChange">Full</IgbRadio>
         </IgbRadioGroup>
    </div>  
 

diff --git a/samples/layouts/tabs/alignment/App.razor b/samples/layouts/tabs/alignment/App.razor
@@ -4,10 +4,10 @@
 <div class="container vertical">
 
     <IgbRadioGroup Alignment=@RadioGroupAlignment.Horizontal>
-        <IgbRadio Value="Start" label-position="after" Checked=true Change="OnRadioOptionClick">Start</IgbRadio>
-        <IgbRadio Value="Center" label-position="after" Change="OnRadioOptionClick">Center</IgbRadio>
-        <IgbRadio Value="End" label-position="after" Change="OnRadioOptionClick">End</IgbRadio>
-        <IgbRadio Value="Justify" label-position="after" Change="OnRadioOptionClick">Justify</IgbRadio>
+        <IgbRadio name="alignment" Value="Start" label-position="after" Checked=true Change="OnRadioOptionClick">Start</IgbRadio>
+        <IgbRadio name="alignment" Value="Center" label-position="after" Change="OnRadioOptionClick">Center</IgbRadio>
+        <IgbRadio name="alignment" Value="End" label-position="after" Change="OnRadioOptionClick">End</IgbRadio>
+        <IgbRadio name="alignment" Value="Justify" label-position="after" Change="OnRadioOptionClick">Justify</IgbRadio>
     </IgbRadioGroup>
 
     <IgbTabs Alignment=@TabAlignment>

diff --git a/samples/menus/nav-drawer/add-positions-navbar/App.razor b/samples/menus/nav-drawer/add-positions-navbar/App.razor
@@ -20,10 +20,10 @@
 
     <div id="content" style="width: 100%">
         <IgbRadioGroup id="radio-group" Alignment="RadioGroupAlignment.Horizontal">
-            <IgbRadio Value="Start" LabelPosition="RadioLabelPosition.After" Checked="true" Change="OnRadioOptionClick">Start</IgbRadio>
-            <IgbRadio Value="End" LabelPosition="RadioLabelPosition.After" Change="OnRadioOptionClick">End</IgbRadio>
-            <IgbRadio Value="Top" LabelPosition="RadioLabelPosition.After" Change="OnRadioOptionClick">Top</IgbRadio>
-            <IgbRadio Value="Bottom" LabelPosition="RadioLabelPosition.After" Change="OnRadioOptionClick">Bottom</IgbRadio>
+            <IgbRadio name="position" Value="Start" LabelPosition="RadioLabelPosition.After" Checked="true" Change="OnRadioOptionClick">Start</IgbRadio>
+            <IgbRadio name="position" Value="End" LabelPosition="RadioLabelPosition.After" Change="OnRadioOptionClick">End</IgbRadio>
+            <IgbRadio name="position" Value="Top" LabelPosition="RadioLabelPosition.After" Change="OnRadioOptionClick">Top</IgbRadio>
+            <IgbRadio name="position" Value="Bottom" LabelPosition="RadioLabelPosition.After" Change="OnRadioOptionClick">Bottom</IgbRadio>
         </IgbRadioGroup>
 
         <IgbNavbar>

diff --git a/samples/scheduling/calendar/formatting/App.razor b/samples/scheduling/calendar/formatting/App.razor
@@ -3,11 +3,11 @@
 
 <div class="container vertical">
     <IgbRadioGroup Alignment="RadioGroupAlignment.Horizontal">
-        <IgbRadio Value="en" Checked="true" Change="OnRadioOptionClick">EN</IgbRadio>
-        <IgbRadio Value="de" Change="OnRadioOptionClick">DE</IgbRadio>
-        <IgbRadio Value="fr" Change="OnRadioOptionClick">FR</IgbRadio>
-        <IgbRadio Value="ar" Change="OnRadioOptionClick">AR</IgbRadio>
-        <IgbRadio Value="ja" Change="OnRadioOptionClick">JA</IgbRadio>
+        <IgbRadio name="lang" Value="en" Checked="true" Change="OnRadioOptionClick">EN</IgbRadio>
+        <IgbRadio name="lang" Value="de" Change="OnRadioOptionClick">DE</IgbRadio>
+        <IgbRadio name="lang" Value="fr" Change="OnRadioOptionClick">FR</IgbRadio>
+        <IgbRadio name="lang" Value="ar" Change="OnRadioOptionClick">AR</IgbRadio>
+        <IgbRadio name="lang" Value="ja" Change="OnRadioOptionClick">JA</IgbRadio>
     </IgbRadioGroup>
 
     <div style="width: 25rem; border: 1px solid gainsboro;">

diff --git a/samples/scheduling/calendar/size/App.razor b/samples/scheduling/calendar/size/App.razor
@@ -3,9 +3,9 @@
 
 <div class="container vertical">
     <IgbRadioGroup Alignment="@RadioGroupAlignment.Horizontal">
-        <IgbRadio Value="Small" label-position="after" Change="OnRadioOptionClick">Small</IgbRadio>
-        <IgbRadio Value="Medium" label-position="after" Change="OnRadioOptionClick">Medium</IgbRadio>
-        <IgbRadio Value="Large" label-position="after" Checked="true" Change="OnRadioOptionClick">Large</IgbRadio>
+        <IgbRadio name="size" Value="Small" label-position="after" Change="OnRadioOptionClick">Small</IgbRadio>
+        <IgbRadio name="size" Value="Medium" label-position="after" Change="OnRadioOptionClick">Medium</IgbRadio>
+        <IgbRadio name="size" Value="Large" label-position="after" Checked="true" Change="OnRadioOptionClick">Large</IgbRadio>
     </IgbRadioGroup>
 
     <div style="width: 25rem; border: 1px solid gainsboro;">