From 218e007234958729a7475c5a523d538e842682cd Mon Sep 17 00:00:00 2001
From: Lukas Senionis <warliukz@gmail.com>
Date: Sat, 17 Sep 2022 16:57:36 +0300
Subject: [PATCH] Fix Field and Item types (#23)

* fix(field): correct and extend FieldProps

* fix(item): correct bottomSeparator in ItemProps

* fix(field): correct field commentary

* feat(field): add comment about inlineWrap
---
 src/deck-components/Field.tsx | 17 ++++++++++-------
 src/deck-components/Item.tsx  |  2 +-
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/deck-components/Field.tsx b/src/deck-components/Field.tsx
index 591486a..ea4c5d4 100644
--- a/src/deck-components/Field.tsx
+++ b/src/deck-components/Field.tsx
@@ -3,17 +3,20 @@ import { findModuleChild } from '../webpack';
 import { FooterLegendProps } from './FooterLegend';
 
 export interface FieldProps extends HTMLAttributes<HTMLDivElement>, FooterLegendProps {
-  label?: string | ReactNode;
-  bottomSeparator?: boolean;
-  description?: string | ReactNode;
+  label?: ReactNode;
+  bottomSeparator?: 'standard' | 'thick' | 'none';
+  description?: ReactNode;
   disabled?: boolean;
   icon?: ReactNode;
-  childrenLayout?: string;
-  childrenContainerWidth?: string;
-  padding?: string;
+  inlineWrap?: 'keep-inline' | 'shift-children-below'; // If label is too long it will move shildren below before starting to wrap label
+  childrenLayout?: 'below' | 'inline';
+  childrenContainerWidth?: 'min' | 'max' | 'fixed'; // Does not work with childrenLayout==='below'
+  spacingBetweenLabelAndChild?: 'none'; // This applies only when childrenLayout==='below' 
+  padding?: 'none' | 'standard' | 'compact';
+  className?: string;
   highlightOnFocus?: boolean;
   indentLevel?: number;
-  verticalAlignment?: string;
+  verticalAlignment?: 'center' | 'none'; // Alligns inline label with children
 }
 
 export const Field = findModuleChild((m) => {
diff --git a/src/deck-components/Item.tsx b/src/deck-components/Item.tsx
index dcdf39c..d2ea67a 100644
--- a/src/deck-components/Item.tsx
+++ b/src/deck-components/Item.tsx
@@ -5,7 +5,7 @@ export interface ItemProps {
   description?: string;
   layout?: 'below' | 'inline';
   icon?: ReactNode;
-  bottomSeparator?: boolean;
+  bottomSeparator?: 'standard' | 'thick' | 'none';
   indentLevel?: number;
   tooltip?: string;
 }