basic button inputs

guiEditor/src/components/propertyTab/propertyTab.scss

@@ -532,6 +532,29 @@
         }  
     }
 
+    .numeric {
+        padding-left: $line-padding-left;
+        height: 30px;
+        display: grid;
+        grid-template-columns: 1fr 120px auto;
+
+        .numeric-label {
+            grid-column: 1;
+            display: flex;
+            align-items: center;
+        }
+
+        .number {                        
+            display: flex;
+            align-items: center;
+            grid-column: 2;
+            height: 10px;
+            .input {
+                width: calc(100% - 5px);
+                height: 10px;
+            }
+        }
+    }
     
     .checkBoxLine {
         padding-left: $line-padding-left;

guiEditor/src/diagram/properties/buttonGuiPropertyComponent copy.tsx

@@ -5,17 +5,40 @@ import { IPropertyComponentProps } from './propertyComponentProps';
 import { CheckBoxLineComponent } from '../../sharedComponents/checkBoxLineComponent';
 import { TransformBlock } from 'babylonjs/Materials/Node/Blocks/transformBlock';
 import { GeneralPropertyTabComponent } from './genericNodePropertyComponent';
+import { ColorPickerLineComponent } from '../../sharedComponents/colorPickerComponent';
+import { TextLineComponent } from '../../sharedComponents/textLineComponent';
+import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
+import { NumericInputComponent } from '../../sharedComponents/numericInputComponent';
 
 export class ButtonPropertyTabComponent extends React.Component<IPropertyComponentProps> {
     constructor(props: IPropertyComponentProps) {
-        super(props)
+        super(props);
+        this.button = this.props.guiBlock as BABYLON.GUI.Button;
     }
 
+    private button : BABYLON.GUI.Button;
+
     render() {
         return (
             <>                
                 <GeneralPropertyTabComponent globalState={this.props.globalState} block={this.props.block}/>
-                <LineContainerComponent title="PROPERTIES">
+                <LineContainerComponent title="PROPERTIES"> 
+                <TextInputLineComponent globalState={this.props.globalState} label="Button Text" value={this.button.textBlock?.text}
+                onChange={evt =>{
+                    if(this.button.textBlock) this.button.textBlock.text = evt;
+                }}>
+                </TextInputLineComponent>
+                <NumericInputComponent globalState={this.props.globalState} label="Width" value={this.button.widthInPixels} 
+                onChange={evt =>{
+                   this.button.widthInPixels = evt;
+                }}>
+
+                </NumericInputComponent>
+                <NumericInputComponent globalState={this.props.globalState} label="Height" value={this.button.heightInPixels} 
+                onChange={evt =>{
+                   this.button.heightInPixels = evt;
+                }}>
+                </NumericInputComponent>
                 </LineContainerComponent>            
             </>
         );