From 8d528c2d4a73fadcc047da2448e02b324770e2f7 Mon Sep 17 00:00:00 2001
From: Victoria League <vleague@bitwarden.com>
Date: Thu, 29 Feb 2024 15:21:39 -0500
Subject: [PATCH] [CL-170] Fix size of radio group legend (#8154)

---
 .../src/radio-button/radio-button.stories.ts  | 51 ++++++++++---------
 .../radio-button/radio-group.component.html   |  2 +-
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/libs/components/src/radio-button/radio-button.stories.ts b/libs/components/src/radio-button/radio-button.stories.ts
index f9b0079936..534bc4bfa1 100644
--- a/libs/components/src/radio-button/radio-button.stories.ts
+++ b/libs/components/src/radio-button/radio-button.stories.ts
@@ -45,19 +45,19 @@ export const Inline: Story = {
         radio: new FormControl(0),
       }),
     },
-    template: `
+    template: /* HTML */ `
       <form [formGroup]="formObj">
         <bit-radio-group formControlName="radio" aria-label="Example radio group">
           <bit-label>Group of radio buttons</bit-label>
-  
+
           <bit-radio-button id="radio-first" [value]="0">
             <bit-label>First</bit-label>
           </bit-radio-button>
-  
+
           <bit-radio-button id="radio-second" [value]="1">
             <bit-label>Second</bit-label>
           </bit-radio-button>
-  
+
           <bit-radio-button id="radio-third" [value]="2">
             <bit-label>Third</bit-label>
           </bit-radio-button>
@@ -74,26 +74,26 @@ export const InlineHint: Story = {
         radio: new FormControl(0),
       }),
     },
-    template: `
-    <form [formGroup]="formObj">
-      <bit-radio-group formControlName="radio" aria-label="Example radio group">
-        <bit-label>Group of radio buttons</bit-label>
+    template: /* HTML */ `
+      <form [formGroup]="formObj">
+        <bit-radio-group formControlName="radio" aria-label="Example radio group">
+          <bit-label>Group of radio buttons</bit-label>
 
-        <bit-radio-button id="radio-first" [value]="0">
-          <bit-label>First</bit-label>
-        </bit-radio-button>
+          <bit-radio-button id="radio-first" [value]="0">
+            <bit-label>First</bit-label>
+          </bit-radio-button>
 
-        <bit-radio-button id="radio-second" [value]="1">
-          <bit-label>Second</bit-label>
-        </bit-radio-button>
+          <bit-radio-button id="radio-second" [value]="1">
+            <bit-label>Second</bit-label>
+          </bit-radio-button>
 
-        <bit-radio-button id="radio-third" [value]="2">
-          <bit-label>Third</bit-label>
-        </bit-radio-button>
+          <bit-radio-button id="radio-third" [value]="2">
+            <bit-label>Third</bit-label>
+          </bit-radio-button>
 
-        <bit-hint>This is a hint for the radio group</bit-hint>
-      </bit-radio-group>
-    </form>
+          <bit-hint>This is a hint for the radio group</bit-hint>
+        </bit-radio-group>
+      </form>
     `,
   }),
 };
@@ -105,21 +105,22 @@ export const Block: Story = {
         radio: new FormControl(0),
       }),
     },
-    template: `
+
+    template: /* HTML */ `
       <form [formGroup]="formObj">
         <bit-radio-group formControlName="radio" aria-label="Example radio group" [block]="true">
           <bit-label>Group of radio buttons</bit-label>
-  
+
           <bit-radio-button id="radio-first" [value]="0">
             <bit-label>First</bit-label>
             <bit-hint>This is a hint for the first option</bit-hint>
           </bit-radio-button>
-  
+
           <bit-radio-button id="radio-second" [value]="1">
             <bit-label>Second</bit-label>
             <bit-hint>This is a hint for the second option</bit-hint>
           </bit-radio-button>
-  
+
           <bit-radio-button id="radio-third" [value]="2">
             <bit-label>Third</bit-label>
             <bit-hint>This is a hint for the third option</bit-hint>
@@ -137,7 +138,7 @@ export const BlockHint: Story = {
         radio: new FormControl(0),
       }),
     },
-    template: `
+    template: /* HTML */ `
       <form [formGroup]="formObj">
         <bit-radio-group formControlName="radio" aria-label="Example radio group" [block]="true">
           <bit-label>Group of radio buttons</bit-label>
diff --git a/libs/components/src/radio-button/radio-group.component.html b/libs/components/src/radio-button/radio-group.component.html
index 128a723d46..9fc9dd5833 100644
--- a/libs/components/src/radio-button/radio-group.component.html
+++ b/libs/components/src/radio-button/radio-group.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="label">
   <fieldset>
-    <legend class="tw-mb-1 tw-block tw-text-sm tw-font-semibold tw-text-main">
+    <legend class="tw-mb-1 tw-block tw-text-base tw-font-semibold tw-text-main">
       <ng-content select="bit-label"></ng-content>
       <span *ngIf="required" class="tw-text-xs tw-font-normal"> ({{ "required" | i18n }})</span>
     </legend>