Merge pull request #377 from chungjac/radiogroup

fix: radiogroup toggle will always stack vertically

Author: dogusata

docs/img/data-model/chatItems/formItemsTooltip.png

@@ -43,14 +43,23 @@ export class RadioGroupInternal extends RadioGroupAbstract {
   constructor (props: RadioGroupProps) {
     StyleLoader.getInstance().load('components/_form-input.scss');
     super();
+    // Only add vertical classes for radiogroup type
+    const isRadioGroup = props.type === 'radiogroup';
     this.radioGroupElement = DomBuilder.getInstance().build({
       type: 'div',
       testId: props.wrapperTestId,
-      classNames: [ 'mynah-form-input', ...(props.classNames ?? []) ],
+      classNames: [
+        'mynah-form-input',
+        ...(props.classNames ?? []),
+        ...(isRadioGroup ? [ 'mynah-form-input-vertical' ] : [])
+      ],
       children:
         props.options?.map((option, index) => ({
           type: 'div',
-          classNames: [ 'mynah-form-input-radio-wrapper' ],
+          classNames: [
+            'mynah-form-input-radio-wrapper',
+            ...(isRadioGroup ? [ 'mynah-form-input-radio-wrapper-vertical' ] : [])
+          ],
           children: [ {
             type: 'label',
             testId: props.optionTestId,

docs/img/data-model/chatItems/options-all-filled.png

@@ -13,7 +13,7 @@
         justify-content: center;
         align-items: center;
         position: relative;
-        gap: var(--mynah-sizing-1);
+        gap: var(--mynah-sizing-2);
         cursor: pointer;
 
         box-sizing: border-box;
@@ -57,7 +57,7 @@
             > .mynah-ui-icon {
                 position: relative;
                 transition: inherit;
-                opacity: 0.25;
+                opacity: 0;
                 font-size: 85%;
                 z-index: var(--mynah-z-2);
             }
@@ -68,3 +68,17 @@
         }
     }
 }
+
+/* Vertical radio group styles */
+.mynah-form-input-vertical {
+    display: flex;
+    flex-direction: column;
+}
+
+.mynah-form-input-radio-wrapper-vertical {
+    display: block;
+
+    &:not(:last-child) {
+        margin-bottom: var(--mynah-sizing-2);
+    }
+}