src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -1,6 +1,7 @@
 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,4 +1,3 @@
-import { MenuAlt2Icon, MenuAlt3Icon, MenuIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { XPositionReference } from '../../Enums/XPositionReference';
 import IProperties from '../../Interfaces/IProperties';
@@ -108,33 +107,11 @@ 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: (
+          { text: 'Center', value: XPositionReference.Center.toString() },
-              <div title='Left' aria-label='left' className='radio-button-icon'>
+          { text: 'Right', value: XPositionReference.Right.toString() }
-                <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,4 +1,3 @@
-import { MenuAlt2Icon, MenuIcon, MenuAlt3Icon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { XPositionReference } from '../../Enums/XPositionReference';
 import IProperties from '../../Interfaces/IProperties';
@@ -102,33 +101,11 @@ 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: (
+          { text: 'Center', value: XPositionReference.Center.toString() },
-              <div title='Left' aria-label='left' className='radio-button-icon'>
+          { text: 'Right', value: XPositionReference.Right.toString() }
-                <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,7 +5,6 @@ interface IRadioGroupButtonsProps {
   name: string
   value?: string
   defaultValue?: string
-  inputClassName: string
   labelText: string
   inputGroups: IInputGroup[]
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
@@ -14,40 +13,30 @@ interface IRadioGroupButtonsProps {
 export const RadioGroupButtons: React.FunctionComponent<IRadioGroupButtonsProps> = (props) => {
   let inputGroups;
   if (props.value !== undefined) {
-    // dynamic
     inputGroups = props.inputGroups.map((inputGroup) => (
-      <div key={inputGroup.value}>
+      <label key={inputGroup.value}>
         <input
-          id={inputGroup.value}
           type='radio'
           name={props.name}
-          className={`peer m-2 ${props.inputClassName}`}
           value={inputGroup.value}
           checked={props.value === inputGroup.value}
           onChange={props.onChange}
         />
-        <label htmlFor={inputGroup.value} className='text-gray-400 peer-checked:text-blue-500'>
+        {inputGroup.text}
-          {inputGroup.text}
+      </label>
-        </label>
-      </div>
-
     ));
   } else {
-    // static
     inputGroups = props.inputGroups.map((inputGroup) => (
-      <div key={inputGroup.value}>
+      <label key={inputGroup.value}>
         <input
-          id={inputGroup.value}
           type='radio'
           name={props.name}
-          className={`peer m-2 ${props.inputClassName}`}
           value={inputGroup.value}
           defaultChecked={props.defaultValue === inputGroup.value}
+          onChange={props.onChange}
         />
-        <label htmlFor={inputGroup.value} className='text-gray-400 peer-checked:text-blue-500'>
+        {inputGroup.text}
-          {inputGroup.text}
+      </label>
-        </label>
-      </div>
     ));
   }
 
@@ -56,9 +45,7 @@ export const RadioGroupButtons: React.FunctionComponent<IRadioGroupButtonsProps>
       <label>
         {props.labelText}
       </label>
-      <div id='XPositionReference'
+      <div id='XPositionReference'>
-        className='flex flex-col'
-      >
         { inputGroups }
       </div>
     </>

src/Interfaces/IInputGroup.ts

@@ -1,6 +1,4 @@
-import React from 'react';
-
 export interface IInputGroup {
-  text: React.ReactNode
+  text: string
   value: string
 }

src/index.scss

@@ -46,10 +46,6 @@
     @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