Skip to content
Snippets Groups Projects
Unverified Commit 6f3c99e1 authored by Alexander Polyankin's avatar Alexander Polyankin Committed by GitHub
Browse files

Tweak boolean fields in basic action forms (#29165)

parent 71fedd19
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 345 additions and 18 deletions
frontend/src/metabase/core/components/FormCheckBox/FormCheckBox.stories.tsx 0 → 100644
+ 34
− 0
View file @ 6f3c99e1
import React from "react";
import type { ComponentStory } from "@storybook/react";
import Form from "../Form";
import FormProvider from "../FormProvider";
import FormCheckBox from "./FormCheckBox";
export default {
title: "Core/FormCheckBox",
component: FormCheckBox,
};
const Template: ComponentStory<typeof FormCheckBox> = args => {
const initialValues = { value: false };
const handleSubmit = () => undefined;
return (
<FormProvider initialValues={initialValues} onSubmit={handleSubmit}>
<Form>
<FormCheckBox {...args} name="value" />
</Form>
</FormProvider>
);
};
export const Default = Template.bind({});
Default.args = {
title: "Title",
};
export const WithDescription = Template.bind({});
WithDescription.args = {
title: "Title",
description: "Description",
};
frontend/src/metabase/core/components/FormDateInput/FormDateInput.stories.tsx 0 → 100644
+ 34
− 0
View file @ 6f3c99e1
import React from "react";
import type { ComponentStory } from "@storybook/react";
import Form from "../Form";
import FormProvider from "../FormProvider";
import FormDateInput from "./FormDateInput";
export default {
title: "Core/FormDateInput",
component: FormDateInput,
};
const Template: ComponentStory<typeof FormDateInput> = args => {
const initialValues = { value: undefined };
const handleSubmit = () => undefined;
return (
<FormProvider initialValues={initialValues} onSubmit={handleSubmit}>
<Form>
<FormDateInput {...args} name="value" />
</Form>
</FormProvider>
);
};
export const Default = Template.bind({});
Default.args = {
title: "Title",
};
export const WithDescription = Template.bind({});
WithDescription.args = {
title: "Title",
description: "Description",
};
frontend/src/metabase/core/components/FormField/FormField.styled.tsx
+ 11
− 13
View file @ 6f3c99e1
import styled from "@emotion/styled";
import React from "react";
import { color } from "metabase/lib/colors";
import Icon from "metabase/components/Icon";
import { FieldAlignment, FieldOrientation } from "./types";
......@@ -7,9 +6,12 @@ import { FieldAlignment, FieldOrientation } from "./types";
export interface FormCaptionProps {
alignment: FieldAlignment;
orientation: FieldOrientation;
hasDescription: boolean;
}
export const FieldCaption = styled.div<FormCaptionProps>`
align-self: ${props =>
props.orientation !== "vertical" && !props.hasDescription ? "center" : ""};
margin-left: ${props =>
props.orientation === "horizontal" &&
props.alignment === "start" &&
......@@ -38,10 +40,16 @@ export const OptionalTag = styled.span`
margin-left: 0.25rem;
`;
export const FieldLabelContainer = styled.div`
interface FieldLabelContainerProps {
orientation: FieldOrientation;
hasDescription: boolean;
}
export const FieldLabelContainer = styled.div<FieldLabelContainerProps>`
display: flex;
align-items: center;
margin-bottom: 0.5em;
margin-bottom: ${props =>
props.orientation === "vertical" || props.hasDescription ? "0.5em" : ""};
`;
export const FieldLabelError = styled.span`
......@@ -94,13 +102,3 @@ export const FieldRoot = styled.div<FieldRootProps>`
}
}
`;
export const FieldLabelWithContainer = ({
children,
}: {
children: React.ReactNode;
}) => (
<FieldLabelContainer>
<FieldLabel hasError={false}>{children}</FieldLabel>
</FieldLabelContainer>
);
frontend/src/metabase/core/components/FormField/FormField.tsx
+ 13
− 4
View file @ 6f3c99e1
......@@ -42,6 +42,8 @@ const FormField = forwardRef(function FormField(
}: FormFieldProps,
ref: Ref<HTMLDivElement>,
) {
const hasTitle = Boolean(title);
const hasDescription = Boolean(description);
const hasError = Boolean(error);
return (
......@@ -52,10 +54,17 @@ const FormField = forwardRef(function FormField(
orientation={orientation}
>
{alignment === "start" && children}
{(title || description) && (
<FieldCaption alignment={alignment} orientation={orientation}>
<FieldLabelContainer>
{title && (
{(hasTitle || hasDescription) && (
<FieldCaption
alignment={alignment}
orientation={orientation}
hasDescription={hasDescription}
>
<FieldLabelContainer
orientation={orientation}
hasDescription={hasDescription}
>
{hasTitle && (
<FieldLabel hasError={hasError} htmlFor={htmlFor}>
{title}
{hasError && <FieldLabelError>: {error}</FieldLabelError>}
......
frontend/src/metabase/core/components/FormFileInput/FormFileInput.stores.tsx 0 → 100644
+ 34
− 0
View file @ 6f3c99e1
import React from "react";
import type { ComponentStory } from "@storybook/react";
import Form from "../Form";
import FormProvider from "../FormProvider";
import FormFileInput from "./FormFileInput";
export default {
title: "Core/FormFileInput",
component: FormFileInput,
};
const Template: ComponentStory<typeof FormFileInput> = args => {
const initialValues = { value: undefined };
const handleSubmit = () => undefined;
return (
<FormProvider initialValues={initialValues} onSubmit={handleSubmit}>
<Form>
<FormFileInput {...args} name="value" />
</Form>
</FormProvider>
);
};
export const Default = Template.bind({});
Default.args = {
title: "Title",
};
export const WithDescription = Template.bind({});
WithDescription.args = {
title: "Title",
description: "Description",
};
frontend/src/metabase/core/components/FormInput/FormInput.stories.tsx 0 → 100644
+ 34
− 0
View file @ 6f3c99e1
import React from "react";
import type { ComponentStory } from "@storybook/react";
import Form from "../Form";
import FormProvider from "../FormProvider";
import FormInput from "./FormInput";
export default {
title: "Core/FormInput",
component: FormInput,
};
const Template: ComponentStory<typeof FormInput> = args => {
const initialValues = { value: false };
const handleSubmit = () => undefined;
return (
<FormProvider initialValues={initialValues} onSubmit={handleSubmit}>
<Form>
<FormInput {...args} name="value" />
</Form>
</FormProvider>
);
};
export const Default = Template.bind({});
Default.args = {
title: "Title",
};
export const WithDescription = Template.bind({});
WithDescription.args = {
title: "Title",
description: "Description",
};
frontend/src/metabase/core/components/FormNumericInput/FormNumericInput.stories.tsx 0 → 100644
+ 34
− 0
View file @ 6f3c99e1
import React from "react";
import type { ComponentStory } from "@storybook/react";
import Form from "../Form";
import FormProvider from "../FormProvider";
import FormNumericInput from "./FormNumericInput";
export default {
title: "Core/FormNumericInput",
component: FormNumericInput,
};
const Template: ComponentStory<typeof FormNumericInput> = args => {
const initialValues = { value: undefined };
const handleSubmit = () => undefined;
return (
<FormProvider initialValues={initialValues} onSubmit={handleSubmit}>
<Form>
<FormNumericInput {...args} name="value" />
</Form>
</FormProvider>
);
};
export const Default = Template.bind({});
Default.args = {
title: "Title",
};
export const WithDescription = Template.bind({});
WithDescription.args = {
title: "Title",
description: "Description",
};
frontend/src/metabase/core/components/FormRadio/FormRadio.stories.tsx 0 → 100644
+ 40
− 0
View file @ 6f3c99e1
import React from "react";
import type { ComponentStory } from "@storybook/react";
import Form from "../Form";
import FormProvider from "../FormProvider";
import FormRadio from "./FormRadio";
const TEST_OPTIONS = [
{ name: "Line", value: "line" },
{ name: "Area", value: "area" },
{ name: "Bar", value: "bar" },
];
export default {
title: "Core/FormRadio",
component: FormRadio,
};
const Template: ComponentStory<typeof FormRadio> = args => {
const initialValues = { value: undefined };
const handleSubmit = () => undefined;
return (
<FormProvider initialValues={initialValues} onSubmit={handleSubmit}>
<Form>
<FormRadio {...args} name="value" options={TEST_OPTIONS} />
</Form>
</FormProvider>
);
};
export const Default = Template.bind({});
Default.args = {
title: "Title",
};
export const WithDescription = Template.bind({});
WithDescription.args = {
title: "Title",
description: "Description",
};
frontend/src/metabase/core/components/FormSelect/FormSelect.stories.tsx 0 → 100644
+ 42
− 0
View file @ 6f3c99e1
import React from "react";
import type { ComponentStory } from "@storybook/react";
import Form from "../Form";
import FormProvider from "../FormProvider";
import FormSelect from "./FormSelect";
const TEST_OPTIONS = [
{ name: "Line", value: "line" },
{ name: "Area", value: "area" },
{ name: "Bar", value: "bar" },
];
export default {
title: "Core/FormSelect",
component: FormSelect,
};
const Template: ComponentStory<typeof FormSelect> = args => {
const initialValues = { value: undefined };
const handleSubmit = () => undefined;
return (
<FormProvider initialValues={initialValues} onSubmit={handleSubmit}>
<Form>
<FormSelect {...args} name="value" options={TEST_OPTIONS} />
</Form>
</FormProvider>
);
};
export const Default = Template.bind({});
Default.args = {
title: "Title",
placeholder: "Use default",
};
export const WithDescription = Template.bind({});
WithDescription.args = {
title: "Title",
placeholder: "Use default",
description: "Description",
};
frontend/src/metabase/core/components/FormTextArea/FormTextArea.stories.tsx 0 → 100644
+ 34
− 0
View file @ 6f3c99e1
import React from "react";
import type { ComponentStory } from "@storybook/react";
import Form from "../Form";
import FormProvider from "../FormProvider";
import FormTextArea from "./FormTextArea";
export default {
title: "Core/FormTextArea",
component: FormTextArea,
};
const Template: ComponentStory<typeof FormTextArea> = args => {
const initialValues = { value: false };
const handleSubmit = () => undefined;
return (
<FormProvider initialValues={initialValues} onSubmit={handleSubmit}>
<Form>
<FormTextArea {...args} name="value" />
</Form>
</FormProvider>
);
};
export const Default = Template.bind({});
Default.args = {
title: "Title",
};
export const WithDescription = Template.bind({});
WithDescription.args = {
title: "Title",
description: "Description",
};
frontend/src/metabase/core/components/FormToggle/FormToggle.stories.tsx 0 → 100644
+ 34
− 0
View file @ 6f3c99e1
import React from "react";
import type { ComponentStory } from "@storybook/react";
import Form from "../Form";
import FormProvider from "../FormProvider";
import FormToggle from "./FormToggle";
export default {
title: "Core/FormToggle",
component: FormToggle,
};
const Template: ComponentStory<typeof FormToggle> = args => {
const initialValues = { value: false };
const handleSubmit = () => undefined;
return (
<FormProvider initialValues={initialValues} onSubmit={handleSubmit}>
<Form>
<FormToggle {...args} name="value" />
</Form>
</FormProvider>
);
};
export const Default = Template.bind({});
Default.args = {
title: "Title",
};
export const WithDescription = Template.bind({});
WithDescription.args = {
title: "Title",
description: "Description",
};
frontend/src/metabase/dashboard/components/ActionSidebar/ActionSidebar.tsx
+ 1
− 1
View file @ 6f3c99e1
......@@ -109,7 +109,7 @@ export function ActionSidebarFn({
/>
</Form>
</FormProvider>
<FieldLabelContainer>
<FieldLabelContainer orientation="vertical" hasDescription={false}>
<FieldLabel hasError={false}>{t`Action`}</FieldLabel>
</FieldLabelContainer>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment