Skip to content

refactor: Add components for styling forms #1169

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Apr 26, 2022
Merged

refactor: Add components for styling forms #1169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c501b6a
Add FormFooter
presleyp Apr 25, 2022
5d6d0c1
Add FullPageForm
presleyp Apr 25, 2022
861969e
Lint
presleyp Apr 25, 2022
369af6b
Make detail optional
presleyp Apr 25, 2022
90283ed
Use Language
presleyp Apr 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions site/src/components/FormFooter/FormFooter.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { ComponentMeta, Story } from "@storybook/react"
import React from "react"
import { FormFooter, FormFooterProps } from "./FormFooter"

export default {
title: "components/FormFooter",
component: FormFooter,
argTypes: {
onCancel: { action: "cancel" },
},
} as ComponentMeta<typeof FormFooter>

const Template: Story<FormFooterProps> = (args) => <FormFooter {...args} />

export const Ready = Template.bind({})
Ready.args = {
isLoading: false,
}

export const Custom = Template.bind({})
Custom.args = {
isLoading: false,
submitLabel: "Create",
}

export const Loading = Template.bind({})
Loading.args = {
isLoading: true,
}
46 changes: 46 additions & 0 deletions site/src/components/FormFooter/FormFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import Button from "@material-ui/core/Button"
import { makeStyles } from "@material-ui/core/styles"
import React from "react"
import { LoadingButton } from "../LoadingButton/LoadingButton"

const Language = {
cancelLabel: "Cancel",
defaultSubmitLabel: "Submit",
}

export interface FormFooterProps {
onCancel: () => void
isLoading: boolean
submitLabel?: string
}

const useStyles = makeStyles(() => ({
footer: {
display: "flex",
flex: "0",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
},
button: {
margin: "1em",
},
}))

export const FormFooter: React.FC<FormFooterProps> = ({
onCancel,
isLoading,
submitLabel = Language.defaultSubmitLabel,
}) => {
const styles = useStyles()
return (
<div className={styles.footer}>
<Button className={styles.button} onClick={onCancel} variant="outlined">
{Language.cancelLabel}
</Button>
<LoadingButton loading={isLoading} className={styles.button} variant="contained" color="primary" type="submit">
{submitLabel}
</LoadingButton>
</div>
)
}
35 changes: 35 additions & 0 deletions site/src/components/FullPageForm/FullPageForm.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import TextField from "@material-ui/core/TextField"
import { action } from "@storybook/addon-actions"
import { ComponentMeta, Story } from "@storybook/react"
import React from "react"
import { FormFooter } from "../FormFooter/FormFooter"
import { Stack } from "../Stack/Stack"
import { FullPageForm, FullPageFormProps } from "./FullPageForm"

export default {
title: "components/FullPageForm",
component: FullPageForm,
} as ComponentMeta<typeof FullPageForm>

const Template: Story<FullPageFormProps> = (args) => (
<FullPageForm {...args}>
<form
onSubmit={(e) => {
e.preventDefault()
}}
>
<Stack>
<TextField fullWidth variant="outlined" label="Field 1" name="field1" />
<TextField fullWidth variant="outlined" label="Field 2" name="field2" />
<FormFooter isLoading={false} onCancel={action("cancel")} />
</Stack>
</form>
</FullPageForm>
)

export const Example = Template.bind({})
Example.args = {
title: "My Form",
detail: "Lorem ipsum dolor",
onCancel: action("cancel"),
}
32 changes: 32 additions & 0 deletions site/src/components/FullPageForm/FullPageForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { makeStyles } from "@material-ui/core/styles"
import React from "react"
import { FormCloseButton } from "../FormCloseButton/FormCloseButton"
import { FormTitle } from "../FormTitle/FormTitle"

export interface FullPageFormProps {
title: string
detail?: React.ReactNode
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Had to read up again to remind myself what exactly is considered as a ReactNode

anything that is renderable inside of JSX, this is NOT the same as what can be rendered by a component!

source

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jsjoeio do you think it's the wrong type? I took it from FormTitle which is where this ends up but I could change it.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh no, sorry, I think it's right. It just surprised me, that's all. I thought detail might have been a string when I first saw the component. Whatever you think is best!

onCancel: () => void
}

const useStyles = makeStyles(() => ({
root: {
maxWidth: "1380px",
width: "100%",
display: "flex",
flexDirection: "column",
alignItems: "center",
},
}))

export const FullPageForm: React.FC<FullPageFormProps> = ({ title, detail, onCancel, children }) => {
const styles = useStyles()
return (
<main className={styles.root}>
<FormTitle title={title} detail={detail} />
<FormCloseButton onClose={onCancel} />

{children}
</main>
)
}