add scrollable codefield #309

NilFoundation · Jul 4, 2024 · 2765027 · 2765027
1 parent 135ffa0
commit 2765027
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/src/components/codefield/CodeField.stories.mdx b/src/components/codefield/CodeField.stories.mdx
@@ -48,6 +48,19 @@ export const EditableTemplate = (args) => {
   >
     {EditableTemplate.bind({})}
   </Story>
+  <Story
+    name="With fixed height"
+    args={{
+      code: `--cost <cost of the request> \\`,
+      displayCopy: true,
+      height: 200,
+    }}
+    parameters={getFigmaParameters(
+      "https://www.figma.com/file/YjE625ScDMf2ILjWB1sTMc/System?type=design&node-id=223-8049&mode=design&t=P3rN3pHdOl7FkE44-0"
+    )}
+  >
+    {Template.bind({})}
+  </Story>
 </Canvas>
 
 <ArgsTable of={CodeField} />

diff --git a/src/components/codefield/CodeField.tsx b/src/components/codefield/CodeField.tsx
@@ -26,6 +26,7 @@ export type CodeFieldProps = {
   readOnly?: ReactCodeMirrorProps["readOnly"];
   onChange?: ReactCodeMirrorProps["onChange"];
   size?: CODE_FIELD_SIZE;
+  height?: number;
 } & HTMLAttributes<HTMLDivElement>;
 
 const CodeFieldRenderFunction: ForwardRefRenderFunction<HTMLDivElement, CodeFieldProps> = (
@@ -42,6 +43,7 @@ const CodeFieldRenderFunction: ForwardRefRenderFunction<HTMLDivElement, CodeFiel
     readOnly = true,
     onChange,
     size = CODE_FIELD_SIZE.medium,
+    height,
     ...rest
   },
   ref
@@ -68,7 +70,7 @@ const CodeFieldRenderFunction: ForwardRefRenderFunction<HTMLDivElement, CodeFiel
         onChange={onChange}
         theme={getCodeMirrorTheme(themeOverrides)}
         basicSetup={getCodeMirrorBasicSetup(showLineNumbers, editable)}
-        className={css(s.codemirrorStyles)}
+        className={css(s.getCodemirrorStyles(height))}
       />
       {displayCopy && (
         <MemoizedCopyButton

diff --git a/src/components/codefield/styles.ts b/src/components/codefield/styles.ts
@@ -11,7 +11,7 @@ const getContainerStyles = (size: CODE_FIELD_SIZE): StyleObject => ({
   ...expandProperty("padding", "24px"),
   display: "flex",
   justifyContent: "space-between",
-  alignItems: "center",
+  alignItems: "flex-start",
   flexWrap: "nowrap",
   gap: "16px",
   ...expandProperty("transition", "background 0.15s"),
@@ -21,14 +21,17 @@ const getContainerStyles = (size: CODE_FIELD_SIZE): StyleObject => ({
   fontSize: size === CODE_FIELD_SIZE.small ? "14px" : "16px",
 });
 
-const codemirrorStyles: StyleObject = {
+const getCodemirrorStyles = (height?: number): StyleObject => ({
   minWidth: 0,
+  height: height ? `${height}px` : "auto",
+  overflow: height ? "scroll" : "auto",
+  flexGrow: 1,
   ":focus-within .cm-editor": {
     outline: "none",
   },
-};
+});
 
 export const styles = {
   getContainerStyles,
-  codemirrorStyles,
+  getCodemirrorStyles,
 };