diff --git a/striker-ui/components/OutlinedInputWithLabel.tsx b/striker-ui/components/OutlinedInputWithLabel.tsx index 7572b41e..05ca4c9d 100644 --- a/striker-ui/components/OutlinedInputWithLabel.tsx +++ b/striker-ui/components/OutlinedInputWithLabel.tsx @@ -19,6 +19,7 @@ import OutlinedInputLabel, { } from './OutlinedInputLabel'; type OutlinedInputWithLabelOptionalProps = { + fillRow?: boolean; formControlProps?: Partial; helpMessageBoxProps?: Partial; id?: string; @@ -45,6 +46,7 @@ const OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS: Required< OutlinedInputWithLabelOptionalProps, 'onChange' | 'onHelp' | 'onHelpAppend' > = { + fillRow: false, formControlProps: {}, helpMessageBoxProps: {}, id: '', @@ -58,6 +60,7 @@ const OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS: Required< }; const OutlinedInputWithLabel: FC = ({ + fillRow: isFillRow = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.fillRow, formControlProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.formControlProps, helpMessageBoxProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.helpMessageBoxProps, id = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.id, @@ -73,10 +76,15 @@ const OutlinedInputWithLabel: FC = ({ onHelpAppend, value = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.value, }) => { + const { sx: formControlSx, ...restFormControlProps } = formControlProps; const { text: helpText = '' } = helpMessageBoxProps; const [isShowHelp, setIsShowHelp] = useState(false); + const formControlWidth = useMemo( + () => (isFillRow ? '100%' : undefined), + [isFillRow], + ); const isShowHelpButton: boolean = useMemo( () => onHelp !== undefined || helpText.length > 0, [helpText, onHelp], @@ -101,7 +109,10 @@ const OutlinedInputWithLabel: FC = ({ const handleHelp = useMemo(createHelpHandler, [createHelpHandler]); return ( - + {label}