From f0bfa39f33c1e40201fbb243ce2dabb02fbf2f31 Mon Sep 17 00:00:00 2001
From: Eric NGUYEN <enguyen@techform.fr>
Date: Tue, 16 Aug 2022 14:08:54 +0200
Subject: [PATCH 1/2] RadioGroupButtons: Improve CSS

---
 src/Components/RadioGroupButtons/RadioGroupButtons.tsx | 6 +++++-
 src/Interfaces/IInputGroup.ts                          | 4 +++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/Components/RadioGroupButtons/RadioGroupButtons.tsx b/src/Components/RadioGroupButtons/RadioGroupButtons.tsx
index 76f1433..f007392 100644
--- a/src/Components/RadioGroupButtons/RadioGroupButtons.tsx
+++ b/src/Components/RadioGroupButtons/RadioGroupButtons.tsx
@@ -18,6 +18,7 @@ export const RadioGroupButtons: React.FunctionComponent<IRadioGroupButtonsProps>
         <input
           type='radio'
           name={props.name}
+          className='m-2'
           value={inputGroup.value}
           checked={props.value === inputGroup.value}
           onChange={props.onChange}
@@ -31,6 +32,7 @@ export const RadioGroupButtons: React.FunctionComponent<IRadioGroupButtonsProps>
         <input
           type='radio'
           name={props.name}
+          className='m-2'
           value={inputGroup.value}
           defaultChecked={props.defaultValue === inputGroup.value}
           onChange={props.onChange}
@@ -45,7 +47,9 @@ export const RadioGroupButtons: React.FunctionComponent<IRadioGroupButtonsProps>
       <label>
         {props.labelText}
       </label>
-      <div id='XPositionReference'>
+      <div id='XPositionReference'
+        className='flex flex-col'
+      >
         { inputGroups }
       </div>
     </>
diff --git a/src/Interfaces/IInputGroup.ts b/src/Interfaces/IInputGroup.ts
index eba23cd..dfc9942 100644
--- a/src/Interfaces/IInputGroup.ts
+++ b/src/Interfaces/IInputGroup.ts
@@ -1,4 +1,6 @@
+import React from 'react';
+
 export interface IInputGroup {
-  text: string
+  text: React.ReactNode
   value: string
 }

From 658b9d9cc74b1ae177687a73a83fb07fecb41ddf Mon Sep 17 00:00:00 2001
From: Eric NGUYEN <enguyen@techform.fr>
Date: Tue, 16 Aug 2022 14:47:13 +0200
Subject: [PATCH 2/2] Improve XPositionReference radio input group

---
 .../ElementsSidebar/ElementsSidebar.tsx       |  1 -
 src/Components/Properties/DynamicForm.tsx     | 29 +++++++++++++++++--
 src/Components/Properties/StaticForm.tsx      | 29 +++++++++++++++++--
 .../RadioGroupButtons/RadioGroupButtons.tsx   | 27 +++++++++++------
 src/index.scss                                |  4 +++
 5 files changed, 74 insertions(+), 16 deletions(-)

diff --git a/src/Components/ElementsSidebar/ElementsSidebar.tsx b/src/Components/ElementsSidebar/ElementsSidebar.tsx
index 21eb6b2..98eb071 100644
--- a/src/Components/ElementsSidebar/ElementsSidebar.tsx
+++ b/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';
diff --git a/src/Components/Properties/DynamicForm.tsx b/src/Components/Properties/DynamicForm.tsx
index c604178..0be155d 100644
--- a/src/Components/Properties/DynamicForm.tsx
+++ b/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)}
       />
diff --git a/src/Components/Properties/StaticForm.tsx b/src/Components/Properties/StaticForm.tsx
index 174fd46..f16d196 100644
--- a/src/Components/Properties/StaticForm.tsx
+++ b/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) }
diff --git a/src/Components/RadioGroupButtons/RadioGroupButtons.tsx b/src/Components/RadioGroupButtons/RadioGroupButtons.tsx
index f007392..db6c278 100644
--- a/src/Components/RadioGroupButtons/RadioGroupButtons.tsx
+++ b/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>
     ));
   }
 
diff --git a/src/index.scss b/src/index.scss
index f653990..d9712f5 100644
--- a/src/index.scss
+++ b/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