ui-core: add narrow input style

This new style can be used for narrow forms like stdcm. Add tooltip by default in statusWithMessage if narrow is present. Throw an error if narrow and required are true at the same time. Signed-off-by: SharglutDev <[email protected]>
OpenRailAssociation · Jan 23, 2025 · 2bda78d · 2bda78d
1 parent 194165d
commit 2bda78d
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 3 deletions.
diff --git a/ui-core/src/components/inputs/FieldWrapper.tsx b/ui-core/src/components/inputs/FieldWrapper.tsx
@@ -15,6 +15,11 @@ export type FieldWrapperProps = {
   disabled?: boolean;
   statusWithMessage?: StatusWithMessage;
   statusIconPosition?: 'next-to-field' | 'before-status-message';
+  /**
+   * Input without any wrapper padding.
+   * Should not be used with required or statusWithMessage with no tooltip.
+   */
+  narrow?: boolean;
   small?: boolean;
   children?: React.ReactNode;
   className?: string;
@@ -29,15 +34,21 @@ const FieldWrapper = ({
   disabled,
   statusWithMessage,
   statusIconPosition = 'next-to-field',
+  narrow = false,
   small = false,
   className,
   children,
   onCloseStatusMessage,
 }: FieldWrapperProps) => {
   const statusClassname = statusWithMessage ? { [statusWithMessage.status]: true } : {};
+  const defaultTooltip: StatusWithMessage['tooltip'] = narrow ? 'left' : undefined;
+
+  if (narrow && required) {
+    throw new Error('narrow should not be used with required for now. This breaks the input UI.');
+  }
 
   return (
-    <div className={cx('feed-back', statusClassname, className, { small: small })}>
+    <div className={cx('feed-back', statusClassname, className, { small, narrow })}>
       <div className="custom-field">
         {/* LABEL AND HINT */}
         {label && (
@@ -68,7 +79,10 @@ const FieldWrapper = ({
         {statusWithMessage && (
           <StatusMessage
             small={small}
-            statusWithMessage={statusWithMessage}
+            statusWithMessage={{
+              ...statusWithMessage,
+              tooltip: statusWithMessage?.tooltip ?? defaultTooltip,
+            }}
             showIcon={statusIconPosition === 'before-status-message'}
             onClose={onCloseStatusMessage}
           />

diff --git a/ui-core/src/components/inputs/Input.tsx b/ui-core/src/components/inputs/Input.tsx
@@ -66,6 +66,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       disabled = false,
       readOnly = false,
       statusWithMessage,
+      narrow,
       inputFieldWrapperClassname = '',
       small = false,
       withIcons = [],
@@ -87,7 +88,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         disabled={disabled}
         required={required}
         small={small}
-        statusIconPosition={statusWithMessage?.tooltip ? 'before-status-message' : undefined}
+        statusIconPosition={
+          statusWithMessage?.tooltip || narrow ? 'before-status-message' : undefined
+        }
+        narrow={narrow}
         className={cx('input-field-wrapper', inputFieldWrapperClassname)}
         onCloseStatusMessage={onCloseStatusMessage}
       >

diff --git a/ui-core/src/stories/ComboBox.stories.tsx b/ui-core/src/stories/ComboBox.stories.tsx
@@ -67,6 +67,15 @@ export const Default: Story = {
   args: {
     label: 'Your name',
     type: 'text',
+    narrow: false,
+  },
+};
+
+export const Narrow: Story = {
+  args: {
+    label: 'Your name',
+    type: 'text',
+    narrow: true,
   },
 };
 

diff --git a/ui-core/src/stories/Input.stories.tsx b/ui-core/src/stories/Input.stories.tsx
@@ -188,6 +188,20 @@ export const TooltipErrorInput: Story = {
   },
 };
 
+export const TooltipWarningNarrowInput: Story = {
+  args: {
+    label: 'Name',
+    type: 'text',
+    value: 'This is a narrow input',
+    statusWithMessage: {
+      status: 'warning',
+      message:
+        "My wrapper doesn't have any padding. Don't use me with 'required' or 'statusWithMessage' with no tooltip.",
+    },
+    narrow: true,
+  },
+};
+
 export const TooltipInfoInput: Story = {
   args: {
     label: 'Name',

diff --git a/ui-core/src/styles/inputs/comboBox.css b/ui-core/src/styles/inputs/comboBox.css
@@ -22,6 +22,12 @@
       0px 3px 5px -2px rgba(0, 0, 0, 0.1);
   }
 
+  &:has(.narrow) .suggestions-list {
+    top: calc(100% - 7px);
+    left: 0;
+    width: calc(100% - 4px);
+  }
+
   .suggestion-item {
     padding: 0.688rem 1.188rem 0.813rem;
     cursor: pointer;

diff --git a/ui-core/src/styles/inputs/fieldWrapper.css b/ui-core/src/styles/inputs/fieldWrapper.css
@@ -22,6 +22,10 @@
     @apply bg-error-5;
   }
 
+  &.narrow {
+    padding: 0;
+  }
+
   .custom-field {
     position: relative;