feat!: add BorderedTextField; migrate fields to ControlPresentation

.react-compiler.rec.json

@@ -1,30 +1,30 @@
 {
-    "recordVersion": 1,
-    "react-compiler-version": "1.0.0",
-    "files": {
-        "src/checkbox-field/checkbox-field.tsx": {
-            "CompileError": 1
-        },
-        "src/checkbox-field/use-fork-ref.ts": {
-            "CompileError": 1
-        },
-        "src/components/keyboard-shortcut/keyboard-shortcut.tsx": {
-            "CompileError": 1
-        },
-        "src/hooks/use-previous/use-previous.ts": {
-            "CompileError": 1
-        },
-        "src/menu/menu.tsx": {
-            "CompileError": 2
-        },
-        "src/tabs/tabs.tsx": {
-            "CompileError": 4
-        },
-        "src/tooltip/tooltip.tsx": {
-            "CompileError": 1
-        },
-        "src/utils/common-helpers.ts": {
-            "CompileError": 2
-        }
+  "recordVersion": 1,
+  "react-compiler-version": "1.0.0",
+  "files": {
+    "src/checkbox-field/checkbox-field.tsx": {
+      "CompileError": 1
+    },
+    "src/checkbox-field/use-fork-ref.ts": {
+      "CompileError": 1
+    },
+    "src/components/keyboard-shortcut/keyboard-shortcut.tsx": {
+      "CompileError": 1
+    },
+    "src/hooks/use-previous/use-previous.ts": {
+      "CompileError": 1
+    },
+    "src/menu/menu.tsx": {
+      "CompileError": 2
+    },
+    "src/tabs/tabs.tsx": {
+      "CompileError": 4
+    },
+    "src/tooltip/tooltip.tsx": {
+      "CompileError": 1
+    },
+    "src/utils/common-helpers.ts": {
+      "CompileError": 2
     }
-}
+  }
+}

src/base-field/base-field.module.css

@@ -2,68 +2,29 @@
     --reactist-field-label-padding-bottom: 6px;
     --reactist-field-label-line-height: inherit;
 }
+
 .container {
     font-family: var(--reactist-font-family);
+    display: flex;
+    flex-direction: column;
 }
 
 .container label {
     letter-spacing: -0.15px;
+    padding-bottom: var(--reactist-field-label-padding-bottom);
+    line-height: var(--reactist-field-label-line-height);
 }
 
-.container label,
 .container .auxiliaryLabel {
+    text-align: right;
     padding-bottom: var(--reactist-field-label-padding-bottom);
     line-height: var(--reactist-field-label-line-height);
 }
 
-.container.bordered {
-    border-radius: var(--reactist-border-radius-large);
-    border: 1px solid var(--reactist-inputs-idle);
-    padding: var(--reactist-spacing-small);
-    padding-bottom: var(--reactist-spacing-xsmall);
-    overflow: clip;
-}
-
-.container.bordered label {
-    /* so that clicking in blank areas to the right of the label will focus the field element */
-    flex-grow: 1;
-    /* to convey that clicking in blank area to the right of the label places focus on the text field */
-    cursor: text;
-}
-
-.container.bordered label span {
-    /* overrides the cursor set above, so that hovering over the non-blank parts of the label stay unaffected */
-    cursor: default;
-}
-
-.container.bordered:hover {
-    border-color: var(--reactist-inputs-hover) !important;
-}
-
-.container.bordered:focus-within {
-    border-color: var(--reactist-inputs-focus) !important;
-}
-
-.container.bordered.error {
-    border-color: var(--reactist-inputs-alert) !important;
-}
-
-.container.bordered .primaryLabel {
-    font-weight: 500;
-}
-
-.container.bordered .auxiliaryLabel {
-    font-size: var(--reactist-font-size-caption);
-}
-
-.container:not(.bordered) .primaryLabel {
+.container .primaryLabel {
     font-weight: var(--reactist-font-weight-strong);
 }
 
-.container:not(.bordered) .auxiliaryLabel {
-    font-size: var(--reactist-font-size-body);
-}
-
 .container input,
 .container textarea,
 .container select {
@@ -75,7 +36,7 @@
 }
 
 .auxiliaryLabel {
-    text-align: right;
+    font-size: var(--reactist-font-size-body);
 }
 
 .loadingIcon {