Improve XPositionReference radio input group

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { FixedSizeList as List } from 'react-window';
 import { Properties } from '../Properties/Properties';
-import ContainerProperties from '../../Interfaces/IProperties';
 import { IContainerModel } from '../../Interfaces/IContainerModel';
 import { getDepth, MakeIterator } from '../../utils/itertools';
 import { Menu } from '../Menu/Menu';

src/Components/Properties/DynamicForm.tsx

@@ -1,3 +1,4 @@
+import { MenuAlt2Icon, MenuAlt3Icon, MenuIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { XPositionReference } from '../../Enums/XPositionReference';
 import IProperties from '../../Interfaces/IProperties';
@@ -107,11 +108,33 @@ const DynamicForm: React.FunctionComponent<IDynamicFormProps> = (props) => {
       <RadioGroupButtons
         name='XPositionReference'
         value={props.properties.XPositionReference.toString()}
+        inputClassName='hidden'
         labelText='Horizontal alignment'
         inputGroups={[
-          { text: 'Left', value: XPositionReference.Left.toString() },
-          { text: 'Center', value: XPositionReference.Center.toString() },
-          { text: 'Right', value: XPositionReference.Right.toString() }
+          {
+            text: (
+              <div title='Left' aria-label='left' className='radio-button-icon'>
+                <MenuAlt2Icon className='heroicon' />
+              </div>
+            ),
+            value: XPositionReference.Left.toString()
+          },
+          {
+            text: (
+              <div title='Center' aria-label='center' className='radio-button-icon'>
+                <MenuIcon className='heroicon' />
+              </div>
+            ),
+            value: XPositionReference.Center.toString()
+          },
+          {
+            text: (
+              <div title='Right' aria-label='right' className='radio-button-icon'>
+                <MenuAlt3Icon className='heroicon' />
+              </div>
+            ),
+            value: XPositionReference.Right.toString()
+          }
         ]}
         onChange={(event) => props.onChange('XPositionReference', event.target.value)}
       />

src/Components/Properties/StaticForm.tsx

@@ -1,3 +1,4 @@
+import { MenuAlt2Icon, MenuIcon, MenuAlt3Icon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { XPositionReference } from '../../Enums/XPositionReference';
 import IProperties from '../../Interfaces/IProperties';
@@ -101,11 +102,33 @@ const StaticForm: React.FunctionComponent<IStaticFormProps> = (props) => {
       <RadioGroupButtons
         name='XPositionReference'
         defaultValue={props.properties.XPositionReference.toString()}
+        inputClassName='hidden'
         labelText='Horizontal alignment'
         inputGroups={[
-          { text: 'Left', value: XPositionReference.Left.toString() },
-          { text: 'Center', value: XPositionReference.Center.toString() },
-          { text: 'Right', value: XPositionReference.Right.toString() }
+          {
+            text: (
+              <div title='Left' aria-label='left' className='radio-button-icon'>
+                <MenuAlt2Icon className='heroicon' />
+              </div>
+            ),
+            value: XPositionReference.Left.toString()
+          },
+          {
+            text: (
+              <div title='Center' aria-label='center' className='radio-button-icon'>
+                <MenuIcon className='heroicon' />
+              </div>
+            ),
+            value: XPositionReference.Center.toString()
+          },
+          {
+            text: (
+              <div title='Right' aria-label='right' className='radio-button-icon'>
+                <MenuAlt3Icon className='heroicon' />
+              </div>
+            ),
+            value: XPositionReference.Right.toString()
+          }
         ]}
       />
       { getCSSInputs(props.properties) }

src/Components/RadioGroupButtons/RadioGroupButtons.tsx

@@ -5,6 +5,7 @@ interface IRadioGroupButtonsProps {
   name: string
   value?: string
   defaultValue?: string
+  inputClassName: string
   labelText: string
   inputGroups: IInputGroup[]
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
@@ -13,32 +14,40 @@ interface IRadioGroupButtonsProps {
 export const RadioGroupButtons: React.FunctionComponent<IRadioGroupButtonsProps> = (props) => {
   let inputGroups;
   if (props.value !== undefined) {
+    // dynamic
     inputGroups = props.inputGroups.map((inputGroup) => (
-      <label key={inputGroup.value}>
+      <div key={inputGroup.value}>
         <input
+          id={inputGroup.value}
           type='radio'
           name={props.name}
-          className='m-2'
+          className={`peer m-2 ${props.inputClassName}`}
           value={inputGroup.value}
           checked={props.value === inputGroup.value}
           onChange={props.onChange}
         />
-        {inputGroup.text}
-      </label>
+        <label htmlFor={inputGroup.value} className='text-gray-400 peer-checked:text-blue-500'>
+          {inputGroup.text}
+        </label>
+      </div>
+
     ));
   } else {
+    // static
     inputGroups = props.inputGroups.map((inputGroup) => (
-      <label key={inputGroup.value}>
+      <div key={inputGroup.value}>
         <input
+          id={inputGroup.value}
           type='radio'
           name={props.name}
-          className='m-2'
+          className={`peer m-2 ${props.inputClassName}`}
           value={inputGroup.value}
           defaultChecked={props.defaultValue === inputGroup.value}
-          onChange={props.onChange}
         />
-        {inputGroup.text}
-      </label>
+        <label htmlFor={inputGroup.value} className='text-gray-400 peer-checked:text-blue-500'>
+          {inputGroup.text}
+        </label>
+      </div>
     ));
   }
 

src/index.scss

@@ -46,6 +46,10 @@
     @apply h-full w-full align-middle items-center justify-center
   }
 
+  .radio-button-icon {
+    @apply rounded-md shadow-sm bg-white w-8 cursor-pointer inline-block
+  }
+
   .sidebar-tooltip {
     @apply absolute w-auto p-2 m-2 min-w-max left-14
     rounded-md shadow-md