MOON-246: Improve design and truncate long label and helper

Jahia · Dec 11, 2024 · 0604e0f · 0604e0f
1 parent 96b1b6a
commit 0604e0f
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 57 deletions.
diff --git a/src/components/Field/Field.scss b/src/components/Field/Field.scss
@@ -1,36 +1,36 @@
 .moonstone-field {
-    padding-top: var(--spacing-nano);
-    padding-left: var(--spacing-large);
+    padding-left: 32px;
 
     border-left: 3px solid transparent;
-    border-radius: 0 2px 2px 0;
 }
 
 .moonstone-field_error {
     // background-color: var(--color-warning20);
     border-color: var(--color-warning);
 }
 
-.moonstone-field_label {
-    display: flex;
-    gap: var(--spacing-small);
-    max-width: inherit;
-
-    text-overflow: ellipsis;
-    overflow: hidden;
+.moonstone-field_chips {
+    gap: var(--spacing-nano);
+    margin-right: var(--spacing-medium);
+    margin-left: var(--spacing-small);
 }
 
 .moonstone-field_helper {
+    margin-top: 2px;
+    padding-right: calc(var(--spacing-large) + var(--spacing-nano));
+
     color: var(--color-gray_dark_plain60);
-    line-clamp: 2;
 }
 
 .moonstone-field_children {
     gap: var(--spacing-small);
-    width: 100%;
-    padding: var(--spacing-small) 0;
+    margin-top: var(--spacing-small);
 }
 
 .moonstome-field_errorMessage {
     color: var(--color-warning_dark);
 }
+
+.moonstone-field_buttons {
+    gap: var(--spacing-nano);
+}
diff --git a/src/components/Field/Field.tsx b/src/components/Field/Field.tsx
@@ -20,33 +20,42 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(({
             ref={ref}
             className={clsx(
                 'moonstone-field',
+                'flexCol_nowrap',
                 hasError && 'moonstone-field_error',
                 className
             )}
             {...props}
         >
-            <div className={clsx('flexRow_between', 'alignCenter')}>
-                <div className={clsx('moonstone-field_label', 'flexRow')}>
-                    <Typography isNowrap weight="bold">{label}</Typography>
-                    {chips}
+            <div className={clsx('flexRow_nowrap', 'flexFluid', 'alignCenter')}>
+                <div className="flexRow_nowrap flexFluid alignCenter">
+                    <Typography component="label" isNowrap weight="bold">{label}</Typography>
+                    {chips &&
+                        <div className={clsx('moonstone-field_chips', 'flexRow_nowrap')}>
+                            {chips}
+                        </div>
+                    }
                 </div>
                 {buttons &&
-                <div className={clsx('moonstone-field_buttons', 'flexRow_nowrap')}>
-                    {React.Children.map(buttons, button =>
-                    button.props && button.props.children ?
-                    (React.Children.map(button.props.children, btn => {
-                        const key = btn.props.icon ? btn.props.icon.name : btn.props.label;
-                        return (btn && <btn.type key={`btn-${key}`} size="default" {...btn.props}/>);
-                    }
-
-                     )) : (buttons && <buttons.type size="default" {...buttons.props}/>)
-                )}
-                </div>}
+                    <div className={clsx('moonstone-field_buttons', 'flexRow_nowrap')}>
+                        {React.Children.map(buttons, button =>
+                            button.props && button.props.children ?
+                                (React.Children.map(button.props.children, btn => {
+                                    const key = btn.props.icon ? btn.props.icon.name : btn.props.label;
+                                    return (btn && <btn.type key={`btn-${key}`} size="default" {...btn.props}/>);
+                                }
+                                )) :
+                                (buttons && <buttons.type size="default" {...buttons.props}/>)
+                        )}
+                    </div>}
             </div>
+
             <Typography variant="caption" className={clsx('moonstone-field_helper')}>{helper}</Typography>
+
             <div className={clsx('moonstone-field_children', 'flexCol_nowrap')}>
                 {children}
-                {hasError && errorMessage && <Typography className={clsx('moonstome-field_errorMessage')} variant="caption">{errorMessage}</Typography>}
+                {hasError && errorMessage &&
+                    <Typography className={clsx('moonstome-field_errorMessage')} variant="caption">{errorMessage}</Typography>
+                }
             </div>
         </div>
     );

diff --git a/src/components/Field/Field.types.ts b/src/components/Field/Field.types.ts
@@ -6,6 +6,11 @@ export type FieldProps = {
      */
     label: string;
 
+    /**
+     * Field's id
+     */
+    id: string;
+
     /**
      * Additional classname
      */

diff --git a/src/components/Field/FieldBoolean/FieldBoolean.scss b/src/components/Field/FieldBoolean/FieldBoolean.scss
@@ -1,9 +1,11 @@
 .moonstone-fieldBoolean {
     position: relative;
+
+    gap: var(--spacing-nano);
 }
 
-.moonstone-fieldBoolean_children {
+.moonstone-fieldBoolean_checkbox {
     position: absolute;
-    top: var(--spacing-small);
-    left: var(--spacing-nano);
+    top: var(--spacing-nano);
+    left: var(--spacing-small);
 }
diff --git a/src/components/Field/FieldBoolean/FieldBoolean.tsx b/src/components/Field/FieldBoolean/FieldBoolean.tsx
@@ -6,6 +6,7 @@ import type {FieldBooleanProps} from './FieldBoolean.types';
 import {Typography, Checkbox} from '~/components';
 
 export const FieldBoolean = React.forwardRef<HTMLDivElement, FieldBooleanProps>(({
+    id,
     label,
     helper,
     chips,
@@ -22,33 +23,43 @@ export const FieldBoolean = React.forwardRef<HTMLDivElement, FieldBooleanProps>(
             className={clsx(
                 'moonstone-field',
                 'moonstone-fieldBoolean',
+                'flexCol_nowrap',
                 hasError && 'moonstone-field_error',
                 className
             )}
             {...props}
         >
-            <div className={clsx('moonstone-fieldBoolean_children')}>
-                <Checkbox {...checkboxAttributes}/>
-            </div>
-            <div className={clsx('flexRow_between', 'alignCenter')}>
-                <div className={clsx('moonstone-field_label', 'flexRow')}>
-                    <Typography isNowrap weight="bold">{label}</Typography>
-                    {chips}
+            <div className={clsx('flexRow_nowrap', 'flexFluid', 'alignCenter')}>
+                <div className="flexRow_nowrap flexFluid">
+                    <div className='moonstone-fieldBoolean_checkbox'>
+                        <Checkbox {...checkboxAttributes}/>
+                    </div>
+                    <Typography component="label" isNowrap weight="bold">{label}</Typography>
+                    {chips &&
+                        <div className={clsx('moonstone-field_chips', 'flexRow_nowrap')}>
+                            {chips}
+                        </div>
+                    }
                 </div>
                 {buttons &&
-                <div className={clsx('moonstone-field_buttons', 'flexRow_nowrap')}>
-                    {React.Children.map(buttons, button =>
-                    button.props && button.props.children ?
-                    (React.Children.map(button.props.children, btn => {
-                        const key = btn.props.icon ? btn.props.icon.name : btn.props.label;
-                        return (btn && <btn.type key={`btn-${key}`} size="default" {...btn.props}/>);
-                    }
-                     )) : (buttons && <buttons.type size="default" {...buttons.props}/>)
-                )}
-                </div>}
+                    <div className={clsx('moonstone-field_buttons', 'flexRow_nowrap')}>
+                        {React.Children.map(buttons, button =>
+                            button.props && button.props.children ?
+                            (React.Children.map(button.props.children, btn => {
+                                const key = btn.props.icon ? btn.props.icon.name : btn.props.label;
+                                return (btn && <btn.type key={`btn-${key}`} size="default" {...btn.props}/>);
+                            }
+                            )) :
+                            (buttons && <buttons.type size="default" {...buttons.props}/>)
+                        )}
+                    </div>
+                }
             </div>
+
             <Typography className={clsx('moonstone-field_helper')} variant="caption">{helper}</Typography>
-            {hasError && errorMessage && <Typography className={clsx('moonstome-field_errorMessage')} variant="caption">{errorMessage}</Typography>}
+            {hasError && errorMessage &&
+                <Typography className={clsx('moonstome-field_errorMessage')} variant="caption">{errorMessage}</Typography>
+            }
         </div>
     );
 });

diff --git a/src/components/Field/FieldBoolean/FieldBoolean.types.ts b/src/components/Field/FieldBoolean/FieldBoolean.types.ts
@@ -2,11 +2,16 @@ import * as React from 'react';
 import type {CheckboxProps} from '~/components/Checkbox/Checkbox.types';
 
 export type FieldBooleanProps = {
-        /**
+    /**
      * FieldBoolean label
      */
     label: string;
 
+    /**
+     * Field's id
+     */
+    id: string;
+
     /**
      * Additional classname
      */

diff --git a/src/components/Field/FieldSelector/FieldSelector.scss b/src/components/Field/FieldSelector/FieldSelector.scss
@@ -1,6 +1,8 @@
 .moonstone-fieldSelector {
     position: relative;
 
+    gap: var(--spacing-nano);
+
     width: 100%;
 }
 
@@ -9,19 +11,24 @@
     left: calc(var(--spacing-medium) / -1);
 }
 
-.moonstone-fieldSelector_selector {
-    width: 100%;
+// .moonstone-fieldSelector_selector {
+//     width: 100%;
 
-    & > .moonstone-dropdown_container {
-        width: 100%;
-    }
+//     & > .moonstone-dropdown_container {
+//         width: 100%;
+//     }
+// }
+
+.moonstone-dropdown_container {
+    width: 100%;
 }
 
 .moonstome-fieldSelector_errorMessage {
     color: var(--color-warning);
 }
 
 .moonstone-fieldSelector_buttons {
+    gap: var(--spacing-nano);
     width: fit-content;
     min-width: var(--spacing-large);
 }
diff --git a/src/components/Field/FieldSelector/FieldSelector.tsx b/src/components/Field/FieldSelector/FieldSelector.tsx
@@ -26,7 +26,7 @@ export const FieldSelector = React.forwardRef<HTMLDivElement, FieldSelectorProps
             <div className={clsx('moonstone-cardSelector_dragIcon', 'flexRow_between', 'alignCenter')}>
                 {isDraggable && <HandleDrag color="gray" size="big"/>}
             </div>
-            <div className={clsx('moonstone-fieldSelector_selector', 'flexCol_nowrap', 'alignStart')}>
+            <div className={clsx('moonstone-fieldSelector_selector', 'flexCol_nowrap', 'alignStart', 'flexFluid')}>
                 {selector}
             </div>
             <div className={clsx('moonstone-fieldSelector_buttons', 'flexRow_nowrap')}>