Try Form Field code mode

jpmorganchase · May 20, 2024 · f9a2a31 · f9a2a31
1 parent c79bad7
commit f9a2a31
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 36 deletions.
diff --git a/packages/copy-manager/ui-src/view/AdvancedView.tsx b/packages/copy-manager/ui-src/view/AdvancedView.tsx
@@ -3,10 +3,9 @@ import {
   Checkbox,
   FlexItem,
   FlexLayout,
-  StackLayout,
-} from "@salt-ds/core";
+  StackLayout, FormFieldLabel } from "@salt-ds/core";
 import { ExportIcon, RefreshIcon, TargetIcon } from "@salt-ds/icons";
-import { Dropdown, FormField, Input } from "@salt-ds/lab";
+import { Dropdown, FormField as FormField, Input } from "@salt-ds/lab";
 import React, { useCallback, useEffect, useState } from "react";
 import {
   convertToCsvDataUri,
@@ -225,24 +224,17 @@ export const AdvancedView = () => {
         </FlexItem>
 
         <FlexLayout align="end" gap={1}>
-          <FormField label="Region" style={{ width: 52 }}>
-            <Input value={region} onChange={(_, value) => setRegion(value)} />
+          <FormField style={{ width: 52 }}>
+            <FormFieldLabel>Region</FormFieldLabel>
+            <Input value={region} onChange={(_, value) => setRegion(value)}/>
           </FormField>
-          <FormField label="Lang" style={{ width: 48 }}>
-            <Input
-              value={language}
-              onChange={(_, value) => setLanguage(value)}
-            />
+          <FormField style={{ width: 48 }}>
+            <FormFieldLabel>Lang</FormFieldLabel>
+            <Input value={language} onChange={(_, value) => setLanguage(value)}/>
           </FormField>
-          <FormField label="Format" style={{ width: 64 }}>
-            <Dropdown
-              source={EXPORT_FORMATS}
-              selected={selectedExportFormat}
-              onSelectionChange={(_, selected) =>
-                selected && setSelectedExportFormat(selected)
-              }
-              // width={64}
-            />
+          <FormField style={{ width: 64 }}>
+            <FormFieldLabel>Format</FormFieldLabel>
+            <Dropdown source={EXPORT_FORMATS} selected={selectedExportFormat} onSelectionChange={(_, selected) => selected && setSelectedExportFormat(selected)}/>
           </FormField>
           <Button
             disabled={exportButtonDisabled}

diff --git a/packages/copy-manager/ui-src/view/SimpleView.tsx b/packages/copy-manager/ui-src/view/SimpleView.tsx
@@ -4,9 +4,8 @@ import {
   FileDropZone,
   FileDropZoneIcon,
   FileDropZoneTrigger,
-  StackLayout,
-} from "@salt-ds/core";
-import { Dropdown, FormField } from "@salt-ds/lab";
+  StackLayout, FormFieldLabel } from "@salt-ds/core";
+import { Dropdown, FormField as FormField } from "@salt-ds/lab";
 import React, { useCallback, useEffect, useState } from "react";
 import {
   DEFAULT_LANG,
@@ -132,20 +131,9 @@ export const SimpleView = () => {
         </StackLayout>
       )}
       {revisionsAvailable && (
-        <FormField
-          label="Version"
-          variant="secondary"
-          className="language-formField"
-          fullWidth={false}
-        >
-          <Dropdown
-            source={csvLangs}
-            selected={selectedLang}
-            onSelectionChange={(_, selected) =>
-              selected && setSelectedLang(selected)
-            }
-            ListProps={{ displayedItemCount: 3 }}
-          />
+        <FormField variant="secondary" className="language-formField" fullWidth={false}>
+          <FormFieldLabel>Version</FormFieldLabel>
+          <Dropdown source={csvLangs} selected={selectedLang} onSelectionChange={(_, selected) => selected && setSelectedLang(selected)} ListProps={{ displayedItemCount: 3 }}/>
         </FormField>
       )}
       <Button onClick={onUpdateCsv} disabled={!revisionsAvailable}>