ui-core: add narrow input style

This new style can be used for narrow forms like stdcm.

Signed-off-by: SharglutDev <[email protected]>

Author: SharglutDev

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,6 +34,7 @@ const FieldWrapper = ({
   disabled,
   statusWithMessage,
   statusIconPosition = 'next-to-field',
+  narrow = false,
   small = false,
   className,
   children,
@@ -37,7 +43,7 @@ const FieldWrapper = ({
   const statusClassname = statusWithMessage ? { [statusWithMessage.status]: true } : {};
 
   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 && (

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 = [],
@@ -88,6 +89,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         required={required}
         small={small}
         statusIconPosition={statusWithMessage?.tooltip ? 'before-status-message' : undefined}
+        narrow={narrow}
         className={cx('input-field-wrapper', inputFieldWrapperClassname)}
         onCloseStatusMessage={onCloseStatusMessage}
       >

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,
   },
 };
 

ui-core/src/stories/Input.stories.tsx

@@ -188,6 +188,21 @@ export const TooltipErrorInput: Story = {
   },
 };
 
+export const TooltipWarningNarrowInput: Story = {
+  args: {
+    label: 'Name',
+    type: 'text',
+    value: 'This is a narrow input',
+    statusWithMessage: {
+      tooltip: 'left',
+      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',

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;

ui-core/src/styles/inputs/fieldWrapper.css

@@ -22,6 +22,10 @@
     @apply bg-error-5;
   }
 
+  &.narrow {
+    padding: 0;
+  }
+
   .custom-field {
     position: relative;