From 7b2d7070fe3eff0e4d45951c1431b2efb0be4635 Mon Sep 17 00:00:00 2001
From: BoSen29 <54361737+BoSen29@users.noreply.github.com>
Date: Sun, 26 Jan 2020 05:24:07 +0100
Subject: [PATCH] Fixes #1453 (#1483)

---
 .../Components/ud-button.jsx                  | 12 +---
 .../Scripts/button.ps1                        | 36 ++++++++++-
 src/UniversalDashboard/Help/New-UDButton.md   | 63 +++++++++++++++++++
 3 files changed, 101 insertions(+), 10 deletions(-)

diff --git a/src/UniversalDashboard.Materialize/Components/ud-button.jsx b/src/UniversalDashboard.Materialize/Components/ud-button.jsx
index 95c0a5b3..46fb5d1f 100644
--- a/src/UniversalDashboard.Materialize/Components/ud-button.jsx
+++ b/src/UniversalDashboard.Materialize/Components/ud-button.jsx
@@ -7,14 +7,13 @@ export default class UDButton extends React.Component {
         super(props);
 
         this.state = {
-            backgroundColor: this.props.backgroundColor,
-            fontColor: this.props.fontColor,
             floating: this.props.floating,
             flat: this.props.flat,
             icon: this.props.icon,
             text: this.props.text,
             disabled: this.props.disabled,
-            hidden: this.props.hidden      
+            hidden: this.props.hidden,      
+            style: this.props.style
         }
     }
 
@@ -64,11 +63,6 @@ export default class UDButton extends React.Component {
             return null;
         }
 
-        var style = {
-            backgroundColor: this.state.backgroundColor,
-            color: this.state.fontColor
-        }
-
         var icon = null; 
         if (this.state.icon) {
             icon = <UdIcon icon={this.state.icon} style={{marginRight: this.state.floating || !this.state.text ? 'unset' : '5px'}}/>
@@ -81,7 +75,7 @@ export default class UDButton extends React.Component {
                     flat={this.state.flat} 
                     disabled={this.state.disabled}
                     floating={this.state.floating} 
-                    style={style}
+                    style={this.state.style}
                 >
                     {icon}
                     {this.state.text}
diff --git a/src/UniversalDashboard.Materialize/Scripts/button.ps1 b/src/UniversalDashboard.Materialize/Scripts/button.ps1
index 622a5df0..90ad28b5 100644
--- a/src/UniversalDashboard.Materialize/Scripts/button.ps1
+++ b/src/UniversalDashboard.Materialize/Scripts/button.ps1
@@ -20,7 +20,15 @@ function New-UDButton {
         [Parameter()] 
         [UniversalDashboard.Models.DashboardColor]$FontColor,
         [Parameter()]
-        [Switch]$Disabled
+        [Switch]$Disabled,
+        [Parameter()]
+        [Hashtable]$Style,
+        [Parameter()]
+        [string]
+        $Height,
+        [Parameter()]
+        [string]
+        $Width
     )
 
     if ($null -ne $OnClick) {
@@ -32,6 +40,31 @@ function New-UDButton {
         }
     }
 
+    if ((!($Style.BackgroundColor)) -and ($BackgroundColor)) {
+        $Style += @{BackgroundColor = $BackgroundColor.HtmlColor}
+    }
+    if ((!($Style.Color)) -and ($FontColor)) {
+        $Style += @{Color = $FontColor.HtmlColor}
+    }
+    if ((!($Style.Width)) -and ($Width)) {
+        #check if the width is numerical, to append with "px" or if it is string, and not to be appended
+        if ($Width -match "^[\d\.]+$") {
+            $Style += @{Width = "$($Width)px"}
+        }
+        else {
+            $Style += @{Width = $Width}
+        }
+    }
+    if ((!($Style.Heigth)) -and ($Height)) {
+        #check if the width is numerical, to append with "px" or if it is string, and not to be appended
+        if ($Height -match "^[\d\.]+$") {
+            $Style += @{Height = "$($Height)px"}
+        }
+        else {
+            $Style += @{Height = $Height}
+        }
+    }
+
     if ($PSBoundParameters.ContainsKey("Icon")) {
         $IconName = [UniversalDashboard.Models.FontAwesomeIconsExtensions]::GetIconName($Icon)
     }
@@ -50,5 +83,6 @@ function New-UDButton {
         text = $Text 
         backgroundColor = $BackgroundColor.HtmlColor 
         fontColor = $FontColor.HtmlColor
+        style = $Style
     }
 }
\ No newline at end of file
diff --git a/src/UniversalDashboard/Help/New-UDButton.md b/src/UniversalDashboard/Help/New-UDButton.md
index 09f77aee..66f69ccc 100644
--- a/src/UniversalDashboard/Help/New-UDButton.md
+++ b/src/UniversalDashboard/Help/New-UDButton.md
@@ -67,6 +67,24 @@ New-UDButton -Text "Button" -OnClick {
 
 Creats a button that shows a toast message when clicked. 
 
+### Button sizes
+````
+New-UDButton -Text "Big" -Height 300 -Width "100"
+````
+
+Creates a button with height of 300px and 100% width. 
+Note: the "px" will be appended automatically if not specified.
+
+### Custom styles
+````
+New-UDButton -Text "Custom" -Style @{
+    Font-Size = 36 px
+    Height = 300 px
+}
+````
+
+Creates a button, with font-size 36 and height of 300 pixels. Will be prioritized over the -height param.
+
 ## PARAMETERS
 
 ### -BackgroundColor
@@ -206,6 +224,51 @@ Accept pipeline input: False
 Accept wildcard characters: False
 ```
 
+### -Height
+Sets the height, either by pixel or percentage.
+
+```yaml
+Type: String
+Parameter Sets: (All)
+Aliases: 
+
+Required: False
+Position: Named
+Default value: None
+Accept pipeline input: False
+Accept wildcard characters: False
+```
+
+### -Width
+Sets the width, either by pixel or percentage.
+
+```yaml
+Type: String
+Parameter Sets: (All)
+Aliases: 
+
+Required: False
+Position: Named
+Default value: None
+Accept pipeline input: False
+Accept wildcard characters: False
+```
+
+### -Style
+Sets the style of the button, will be prioritized over the other stylespecific parameters, ie -height.
+
+```yaml
+Type: Hashtable
+Parameter Sets: (All)
+Aliases: 
+
+Required: False
+Position: Named
+Default value: None
+Accept pipeline input: False
+Accept wildcard characters: False
+```
+
 ### -Text
 The test to display on the button.