Revert "Vertical alignment for tgui button content (#62525)" (#62584)

This reverts commit 8e526a575a.

tgui/docs/component-reference.md

@@ -229,10 +229,6 @@ 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,7 +35,6 @@ export const Button = props => {
     children,
     onclick,
     onClick,
-    verticalAlign,
     ...rest
   } = props;
   const hasContent = !!(content || children);
@@ -68,7 +67,6 @@ 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',
@@ -96,26 +94,22 @@ export const Button = props => {
         }
       }}
       {...computeBoxProps(rest)}>
-      <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>
+      {(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>
   );
 

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

@@ -45,7 +45,6 @@ $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);
@@ -91,7 +90,6 @@ $bg-map: colors.$bg-map !default;
 
 .Button--fluid {
   display: block;
-  display: flex;
   margin-left: 0;
   margin-right: 0;
 }
@@ -136,19 +134,3 @@ $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;
-}