Merge pull request #16 from gisce/fix/adjust-fieldset-borders

gisce · Jan 8, 2025 · 2781011 · 2781011
2 parents 9f91d59 + f72b8a1
commit 2781011
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 11 deletions.
diff --git a/src/components/ui/FieldSet/FieldSet.styles.tsx b/src/components/ui/FieldSet/FieldSet.styles.tsx
@@ -1,19 +1,41 @@
 import styled from "styled-components";
 
-export const FieldSetElement = styled.fieldset`
+export const FieldSetElement = styled.fieldset<{ borderRadius?: string }>`
   padding: 0.5rem;
-  border-color: #D9D9D9;
+  border-color: #d9d9d9;
   border-width: 1px;
   border-style: solid;
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
+  border-radius: ${(props) => props.borderRadius || "5px"};
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji" !important;
 `;
+
 export const Legend = styled.legend`
   all: initial;
   padding-left: 0.5em;
   padding-right: 0.5em;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  font-family:
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji";
   font-size: 0.85rem;
 `;
diff --git a/src/components/ui/FieldSet/FieldSet.tsx b/src/components/ui/FieldSet/FieldSet.tsx
@@ -1,11 +1,13 @@
 import React, { useState } from "react";
 import { FieldSetElement, Legend } from "./FieldSet.styles";
 import { FieldSetProps } from "./FieldSet.types";
-import { Space } from "antd";
+import { Space, theme } from "antd";
+
+const { useToken } = theme;
 
 export const FieldSet = (props: FieldSetProps): React.ReactElement => {
-  const { label, children, icon: Icon } = props;
-  const [isOpen, setIsOpen] = useState(true);
+  const { label, children, icon: Icon, borderRadius } = props;
+  const { token } = useToken();
   const labelComponent = (
     <Space>
       {Icon ? <Icon /> : null}
@@ -14,7 +16,7 @@ export const FieldSet = (props: FieldSetProps): React.ReactElement => {
   );
 
   return (
-    <FieldSetElement>
+    <FieldSetElement borderRadius={`${borderRadius || token.borderRadius}px`}>
       <Legend>{labelComponent}</Legend>
       {children}
     </FieldSetElement>

diff --git a/src/components/ui/FieldSet/FieldSet.types.tsx b/src/components/ui/FieldSet/FieldSet.types.tsx
@@ -2,4 +2,5 @@ export type FieldSetProps = {
   label: string;
   children: any;
   icon?: React.ElementType | undefined;
+  borderRadius?: string;
 };