Vertical alignment for tgui button content (#62525)

Adds a verticalAlign prop for buttons that will wrap the content and icons in it in a flexbox and center/flex-end them. Made this an optional prop so it doesn't break browsers with bricked flexboxes.

Co-authored-by: Aleksej Komarov <stylemistake@gmail.com>

tgui/docs/component-reference.md

@@ -229,6 +229,10 @@ the baseline alignment.
 over the button.
 - `children: any` - Content to render inside the button.
 - `onClick: function` - Called when element is clicked.
+- `verticalAlign: string` - Align content vertically.
+  - `top` - align content to the ceiling of the button box.
+  - `middle` - align content on the middle of the button box.
+  - `bottom` - align content on the ground of the button box.
 
 ### `Button.Checkbox`
 

tgui/packages/tgui/components/Button.js

@@ -35,6 +35,7 @@ export const Button = props => {
     children,
     onclick,
     onClick,
+    verticalAlign,
     ...rest
   } = props;
   const hasContent = !!(content || children);
@@ -67,6 +68,7 @@ export const Button = props => {
         circular && 'Button--circular',
         compact && 'Button--compact',
         iconPosition && 'Button--iconPosition--' + iconPosition,
+        verticalAlign && 'Button--verticalAlign--' + verticalAlign,
         (color && typeof color === 'string')
           ? 'Button--color--' + color
           : 'Button--color--default',
@@ -94,22 +96,26 @@ export const Button = props => {
         }
       }}
       {...computeBoxProps(rest)}>
-      {(icon && iconPosition !== 'right') && (
-        <Icon
-          name={icon}
-          color={iconColor}
-          rotation={iconRotation}
-          spin={iconSpin} />
-      )}
-      {content}
-      {children}
-      {(icon && iconPosition === 'right') && (
-        <Icon
-          name={icon}
-          color={iconColor}
-          rotation={iconRotation}
-          spin={iconSpin} />
-      )}
+      <div className={fluid && 'Button__content--fluid'}>
+        {icon && iconPosition !== 'right' && (
+          <Icon
+            name={icon}
+            color={iconColor}
+            rotation={iconRotation}
+            spin={iconSpin}
+          />
+        )}
+        {content}
+        {children}
+        {icon && iconPosition === 'right' && (
+          <Icon
+            name={icon}
+            color={iconColor}
+            rotation={iconRotation}
+            spin={iconSpin}
+          />
+        )}
+      </div>
     </div>
   );
 

tgui/packages/tgui/styles/components/Button.scss

@@ -45,6 +45,7 @@ $bg-map: colors.$bg-map !default;
 .Button {
   position: relative;
   display: inline-block;
+  display: inline-flex;
   line-height: 1.667em;
   padding: 0 0.5em;
   margin-right: base.em(2px);
@@ -90,6 +91,7 @@ $bg-map: colors.$bg-map !default;
 
 .Button--fluid {
   display: block;
+  display: flex;
   margin-left: 0;
   margin-right: 0;
 }
@@ -134,3 +136,19 @@ $bg-map: colors.$bg-map !default;
 .Button--selected {
   @include button-color($color-selected);
 }
+
+.Button--verticalAlign--top {
+  align-items: flex-start;
+}
+
+.Button--verticalAlign--middle {
+  align-items: center;
+}
+
+.Button--verticalAlign--bottom {
+  align-items: flex-end;
+}
+
+.Button__content--fluid {
+  flex: 1;
+}