From 6f8e2a9d7140e23915ea28ba9a245bfede67ed89 Mon Sep 17 00:00:00 2001
From: vincentiusvin <54709710+vincentiusvin@users.noreply.github.com>
Date: Sun, 28 Aug 2022 21:18:42 +0700
Subject: [PATCH] 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                    | 13 ++++++++++++-
 tgui/packages/tgui/components/LabeledList.tsx       |  8 +++++++-
 .../tgui/styles/components/LabeledList.scss         |  2 +-
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/tgui/docs/component-reference.md b/tgui/docs/component-reference.md
index bccdc59661d..cfdca94a3c4 100644
--- a/tgui/docs/component-reference.md
+++ b/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.
 
diff --git a/tgui/packages/tgui/components/LabeledList.tsx b/tgui/packages/tgui/components/LabeledList.tsx
index 2ceeafe2774..283c0a2b912 100644
--- a/tgui/packages/tgui/components/LabeledList.tsx
+++ b/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>
diff --git a/tgui/packages/tgui/styles/components/LabeledList.scss b/tgui/packages/tgui/styles/components/LabeledList.scss
index 9a0a82d0378..94adf932549 100644
--- a/tgui/packages/tgui/styles/components/LabeledList.scss
+++ b/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;