mirror of
https://github.com/BerriAI/litellm.git
synced 2026-09-06 08:16:43 +00:00
fix(ui): stop checkboxes stretching to the full width of a form field
This commit is contained in:
parent
ec3f8183c3
commit
054acb2223
3 changed files with 18 additions and 3 deletions
|
|
@ -294,6 +294,21 @@ describe("CreateUserButton", () => {
|
|||
});
|
||||
});
|
||||
|
||||
it("lays the send invitation email checkbox out beside its label", async () => {
|
||||
const user = userEvent.setup({ pointerEventsCheck: PointerEventsCheckLevel.Never });
|
||||
renderWithProviders(<CreateUserButton {...defaultProps} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole("button", { name: /\+ invite user/i })).toBeInTheDocument();
|
||||
});
|
||||
await user.click(screen.getByRole("button", { name: /\+ invite user/i }));
|
||||
|
||||
const dialog = screen.getByRole("dialog", { name: /invite user/i });
|
||||
const checkbox = within(dialog).getByRole("checkbox");
|
||||
|
||||
expect(checkbox.closest('[data-slot="field"]')).toHaveAttribute("data-orientation", "horizontal");
|
||||
});
|
||||
|
||||
describe("organizations", () => {
|
||||
it("should send organizations list in POST body when organizations are selected", async () => {
|
||||
const { useOrganizations } = await import("@/app/(dashboard)/hooks/organizations/useOrganizations");
|
||||
|
|
|
|||
|
|
@ -270,7 +270,7 @@ export const CreateUserButton: React.FC<CreateuserProps> = ({
|
|||
);
|
||||
|
||||
const sendInviteEmailField = (
|
||||
<FormField control={form.control} name="send_invite_email" label="Send invitation email">
|
||||
<FormField control={form.control} name="send_invite_email" label="Send invitation email" orientation="horizontal">
|
||||
{({ id, value, onChange, onBlur }) => (
|
||||
<Checkbox id={id} checked={value} onCheckedChange={onChange} onBlur={onBlur} />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -303,7 +303,7 @@ const SSOProviderField = ({ field }: { field: SSOProviderConfig["fields"][number
|
|||
|
||||
if (field.type === "checkbox") {
|
||||
return (
|
||||
<FormField control={control} name={field.name} label={field.label}>
|
||||
<FormField control={control} name={field.name} label={field.label} orientation="horizontal">
|
||||
{({ value, onChange, onBlur, id, ...rest }) => (
|
||||
<Checkbox
|
||||
id={id}
|
||||
|
|
@ -413,7 +413,7 @@ export const MappingToggleField = ({
|
|||
const { control } = useFormContext<SSOSettingsFormValues>();
|
||||
|
||||
return (
|
||||
<FormField control={control} name={name} label={label}>
|
||||
<FormField control={control} name={name} label={label} orientation="horizontal">
|
||||
{({ value, onChange, onBlur, id, ...rest }) => (
|
||||
<Checkbox
|
||||
id={id}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue