front: remove input-wrapper class from input component

This div/class was used to easily display the focus style around the input when focusing it with tab. The focus style is now displayed via a pseudo element. Signed-off-by: SharglutDev <[email protected]>
OpenRailAssociation · Feb 21, 2025 · 409e815 · 409e815
1 parent 661d4e4
commit 409e815
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 57 deletions.
diff --git a/ui-core/src/components/inputs/Input.tsx b/ui-core/src/components/inputs/Input.tsx
@@ -92,62 +92,62 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           statusWithMessage?.tooltip || narrow ? 'before-status-message' : undefined
         }
         narrow={narrow}
-        className={cx('input-field-wrapper', inputFieldWrapperClassname)}
+        className={cx('input-field-wrapper', {
+          inputFieldWrapperClassname,
+          small,
+        })}
         onCloseStatusMessage={onCloseStatusMessage}
       >
+        {leadingContent && (
+          <InputAffix
+            value={leadingContent}
+            type="leading"
+            disabled={disabled}
+            readOnly={readOnly}
+          />
+        )}
         <div
-          className={cx('input-wrapper', {
-            small,
+          className={cx('input-container', {
             'focused-by-tab': isFocusByTab,
           })}
         >
-          {leadingContent && (
-            <InputAffix
-              value={leadingContent}
-              type="leading"
-              disabled={disabled}
-              readOnly={readOnly}
-            />
-          )}
-          <div className="input-container">
-            <input
-              ref={ref}
-              className={cx('input', {
-                'with-leading-only': leadingContent && !trailingContent,
-                'with-trailing-only': trailingContent && !leadingContent,
-                'with-leading-and-trailing': leadingContent && trailingContent,
-                [`with-icons-${withIcons.length}`]: withIcons.length > 0,
-                [statusWithMessage?.status || '']: !!statusWithMessage,
-              })}
-              id={id}
-              type={type}
-              disabled={disabled}
-              readOnly={readOnly}
-              onKeyUp={handleKeyUp}
-              onBlur={handleBlur}
-              {...rest}
-            />
-            <div
-              className={cx('input-icons', {
-                small,
-              })}
-            >
-              {withIcons.map((iconConfig, index) => (
-                <span key={index} className={iconConfig?.className} onClick={iconConfig.action}>
-                  {iconConfig.icon}
-                </span>
-              ))}
-            </div>
+          <input
+            ref={ref}
+            className={cx('input', {
+              'with-leading-only': leadingContent && !trailingContent,
+              'with-trailing-only': trailingContent && !leadingContent,
+              'with-leading-and-trailing': leadingContent && trailingContent,
+              [`with-icons-${withIcons.length}`]: withIcons.length > 0,
+              [statusWithMessage?.status || '']: !!statusWithMessage,
+            })}
+            id={id}
+            type={type}
+            disabled={disabled}
+            readOnly={readOnly}
+            onKeyUp={handleKeyUp}
+            onBlur={handleBlur}
+            {...rest}
+          />
+          <div
+            className={cx('input-icons', {
+              small,
+            })}
+          >
+            {withIcons.map((iconConfig, index) => (
+              <span key={index} className={iconConfig?.className} onClick={iconConfig.action}>
+                {iconConfig.icon}
+              </span>
+            ))}
           </div>
-          {trailingContent && (
-            <InputAffix
-              value={trailingContent}
-              type="trailing"
-              disabled={disabled}
-              readOnly={readOnly}
-            />
-          )}
         </div>
+        {trailingContent && (
+          <InputAffix
+            value={trailingContent}
+            type="trailing"
+            disabled={disabled}
+            readOnly={readOnly}
+          />
+        )}
       </FieldWrapper>
     );
   }

diff --git a/ui-core/src/stories/Input.stories.tsx b/ui-core/src/stories/Input.stories.tsx
@@ -13,6 +13,7 @@ const meta: Meta<typeof Input> = {
     small: false,
     disabled: false,
     readOnly: false,
+    narrow: false,
   },
   decorators: [
     (Story) => (

diff --git a/ui-core/src/styles/inputs/input.css b/ui-core/src/styles/inputs/input.css
@@ -1,13 +1,5 @@
-.input-wrapper {
-  display: flex;
-  align-items: center;
+.input-field-wrapper {
   width: 100%;
-  padding: 0.188rem;
-  margin-left: -0.125rem;
-
-  &.focused-by-tab {
-    box-shadow: 0 0 0 0.0625rem rgba(37, 106, 250, 1) inset;
-  }
 
   &:focus-within {
     .leading-content-wrapper,
@@ -26,6 +18,18 @@
     position: relative;
     width: 100%;
 
+    &.focused-by-tab {
+      &::before {
+        position: absolute;
+        top: -3px;
+        left: -3px;
+        bottom: -3px;
+        right: -3px;
+        content: '';
+        border: 1px solid theme('colors.primary.50');
+      }
+    }
+
     .input {
       text-overflow: ellipsis;
     }

diff --git a/ui-core/src/styles/inputs/label.css b/ui-core/src/styles/inputs/label.css
@@ -1,6 +1,7 @@
 .base-label-wrapper {
   display: flex;
   align-items: center;
+  margin-bottom: 3px;
 
   &.has-hint {
     margin-bottom: 0;