diff --git a/src/frontend/src/primitives/Field.tsx b/src/frontend/src/primitives/Field.tsx index ad96f9cb..e4de3987 100644 --- a/src/frontend/src/primitives/Field.tsx +++ b/src/frontend/src/primitives/Field.tsx @@ -25,11 +25,31 @@ const FieldWrapper = styled('div', { marginBottom: 'textfield', minWidth: 0, }, + variants: { + noMargin: { + true: { + marginBottom: 0, + }, + }, + fullWidth: { + true: { + width: '100%', + }, + }, + }, }) const StyledLabel = styled(Label, { base: { display: 'block', + fontSize: '12px', + }, + variants: { + center: { + true: { + textAlign: 'center', + }, + }, }, }) @@ -80,6 +100,8 @@ type FieldProps = ( ) & { label: string description?: string + wrapperProps?: React.ComponentProps + labelProps?: React.ComponentProps } /** @@ -104,7 +126,7 @@ export const Field = ({ }: FieldProps) => { const LabelAndDescription = ( <> - {label} + {label} {description} ) @@ -118,7 +140,7 @@ export const Field = ({ if (type === 'text') { return ( - + ({ if (type === 'checkbox') { return ( - + ({ if (type === 'checkboxGroup') { return ( - + ({ if (type === 'radioGroup') { return ( - + ({ if (type === 'select') { return ( - +