ec8def0cb1
Being able to define the Field to be compact and fullWidth at the same time was misleading. We need to be able to set the Switch component fullWidth if needed, while by default it is compact. This change makes possible the fullWidth props to override compact mode.
43 lines
1020 B
TypeScript
43 lines
1020 B
TypeScript
import React, { PropsWithChildren } from "react";
|
|
import classNames from "classnames";
|
|
|
|
export type FieldState = "success" | "error" | "default";
|
|
|
|
export type FieldProps = {
|
|
state?: FieldState | undefined;
|
|
text?: string | undefined;
|
|
rightText?: string | undefined;
|
|
fullWidth?: boolean | undefined;
|
|
compact?: boolean | undefined;
|
|
className?: string | undefined;
|
|
};
|
|
|
|
type Props = FieldProps & PropsWithChildren;
|
|
|
|
export const Field = ({
|
|
children,
|
|
state = "default",
|
|
text,
|
|
rightText,
|
|
fullWidth,
|
|
compact,
|
|
className,
|
|
}: Props) => {
|
|
return (
|
|
<div
|
|
className={classNames("c__field", "c__field--" + state, className, {
|
|
"c__field--full-width": fullWidth,
|
|
"c__field--compact": compact && !fullWidth,
|
|
})}
|
|
>
|
|
{children}
|
|
{(text || rightText) && (
|
|
<div className="c__field__footer">
|
|
<span className="c__field__text">{text}</span>
|
|
<span className="c__field__text__right">{rightText}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|