refactor(forms): simplify form handling and button behavior (#10441)
Removed redundant handleSave and handleSubmit props in domain settings. Integrated form submission logic directly into form components, ensuring consistent behavior and reducing complexity. Updated button components to explicitly support the "type" attribute for improved accessibility and functionality. --------- Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
co-authored by
Félix Malfait
parent
bfc92fc00d
commit
7abc67c905
@@ -408,18 +408,21 @@ export const Button = ({
|
||||
soon = false,
|
||||
disabled = false,
|
||||
justify = 'flex-start',
|
||||
focus = false,
|
||||
focus: propFocus = false,
|
||||
onClick,
|
||||
to,
|
||||
target,
|
||||
dataTestId,
|
||||
hotkeys,
|
||||
ariaLabel,
|
||||
type,
|
||||
}: ButtonProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
const [isFocused, setIsFocused] = React.useState(propFocus);
|
||||
|
||||
return (
|
||||
<StyledButton
|
||||
fullWidth={fullWidth}
|
||||
@@ -428,7 +431,7 @@ export const Button = ({
|
||||
size={size}
|
||||
position={position}
|
||||
disabled={soon || disabled}
|
||||
focus={focus}
|
||||
focus={isFocused}
|
||||
justify={justify}
|
||||
accent={accent}
|
||||
className={className}
|
||||
@@ -438,6 +441,9 @@ export const Button = ({
|
||||
target={target}
|
||||
data-testid={dataTestId}
|
||||
aria-label={ariaLabel}
|
||||
type={type}
|
||||
onFocus={() => setIsFocused(true)}
|
||||
onBlur={() => setIsFocused(false)}
|
||||
>
|
||||
{Icon && <Icon size={theme.icon.size.sm} />}
|
||||
{title}
|
||||
|
||||
@@ -14,6 +14,7 @@ export type LightButtonProps = {
|
||||
disabled?: boolean;
|
||||
focus?: boolean;
|
||||
onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
||||
type?: React.ComponentProps<'button'>['type'];
|
||||
};
|
||||
|
||||
const StyledButton = styled.button<
|
||||
@@ -82,6 +83,7 @@ export const LightButton = ({
|
||||
accent = 'secondary',
|
||||
disabled = false,
|
||||
focus = false,
|
||||
type = 'button',
|
||||
onClick,
|
||||
}: LightButtonProps) => {
|
||||
const theme = useTheme();
|
||||
@@ -91,6 +93,7 @@ export const LightButton = ({
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
focus={focus && !disabled}
|
||||
type={type}
|
||||
accent={accent}
|
||||
className={className}
|
||||
active={active}
|
||||
|
||||
Reference in New Issue
Block a user