Lets LabeledList.Item's label wrap if they want. Docs the rest of the props. (#69459)

* Adds wrap toggle

* Documentation

* Less ambiguity

tgui/docs/component-reference.md

@@ -665,7 +665,18 @@ to perform some sort of action), there is a way to do that:
 **Props:**
 
 - `label: string|InfernoNode` - Item label.
-- `color: string` - Sets the color of the text.
+- `labelWrap: boolean` - Lets the label wrap and makes it not take the minimum width.
+- `labelColor: string` - Sets the color of the label.
+- `color: string` - Sets the color of the content text.
+- `textAlign: string` - Align the content text.
+  - `left` (default)
+  - `center`
+  - `right`
+- `verticalAlign: string` - Align both the label and the content vertically.
+  - `baseline` (default)
+  - `top`
+  - `middle`
+  - `bottom`
 - `buttons: any` - Buttons to render aside the content.
 - `children: any` - Content of this labeled item.
 

tgui/packages/tgui/components/LabeledList.tsx

@@ -24,6 +24,7 @@ type LabeledListItemProps = {
   className?: string | BooleanLike;
   label?: string | InfernoNode | BooleanLike;
   labelColor?: string | BooleanLike;
+  labelWrap?: boolean;
   color?: string | BooleanLike;
   textAlign?: string | BooleanLike;
   buttons?: InfernoNode;
@@ -38,6 +39,7 @@ const LabeledListItem = (props: LabeledListItemProps) => {
     className,
     label,
     labelColor = 'label',
+    labelWrap,
     color,
     textAlign,
     buttons,
@@ -50,7 +52,11 @@ const LabeledListItem = (props: LabeledListItemProps) => {
       <Box
         as="td"
         color={labelColor}
-        className={classes(['LabeledList__cell', 'LabeledList__label'])}
+        className={classes([
+          'LabeledList__cell',
+          // Kinda flipped because we want nowrap as default. Cleaner CSS this way though.
+          !labelWrap && 'LabeledList__label--nowrap',
+        ])}
         verticalAlign={verticalAlign}>
         {label ? (typeof label === 'string' ? label + ':' : label) : null}
       </Box>

tgui/packages/tgui/styles/components/LabeledList.scss

@@ -34,7 +34,7 @@
   text-align: left;
 }
 
-.LabeledList__label {
+.LabeledList__label--nowrap {
   width: 1%;
   white-space: nowrap;
   min-width: 5em;