diff --git a/src/components/ui/FieldSet/FieldSet.styles.tsx b/src/components/ui/FieldSet/FieldSet.styles.tsx index 36106b4..634a9b5 100644 --- 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 index 76c7a0b..7cc69ca 100644 --- 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 = ( {Icon ? : null} @@ -14,7 +16,7 @@ export const FieldSet = (props: FieldSetProps): React.ReactElement => { ); return ( - + {labelComponent} {children} diff --git a/src/components/ui/FieldSet/FieldSet.types.tsx b/src/components/ui/FieldSet/FieldSet.types.tsx index a7a1ecd..b698f50 100644 --- 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; };