Skip to content
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

Create Form and TextInput components #33

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+142 −0
Open

Create Form and TextInput components #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4c5cc3c
Create Form and TextInput components
rgodha24 Mar 8, 2025
cbf7423
nits
rgodha24 Mar 8, 2025
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
23 changes: 23 additions & 0 deletions src/components/BogForm/BogForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { Form } from 'radix-ui';
import styles from './styles.module.css';
import BogButton from '../BogButton/BogButton';
import type { FormEventHandler } from 'react';

export interface BogFormProps {
onSubmit: FormEventHandler<HTMLFormElement>;
submitLabel?: string;
style?: React.CSSProperties;
className?: string;
children: React.ReactNode;
}

export function BogForm({ onSubmit, submitLabel, style, className, children }: BogFormProps) {
return (
<Form.Root onSubmit={onSubmit} className={`${className} ${styles.root}`} style={style}>
{children}
<Form.Submit asChild>
<BogButton type="submit">{submitLabel || 'Submit'}</BogButton>
</Form.Submit>
</Form.Root>
);
}
8 changes: 8 additions & 0 deletions src/components/BogForm/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
@layer base {
.root {
flex-direction: column;
display: flex;
row-gap: 1rem;
padding: 1rem;
}
}
62 changes: 62 additions & 0 deletions src/components/BogTextInput/BogTextInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { Form } from 'radix-ui';
import styles from './styles.module.css';

export interface BogTextInputProps {
multiline?: boolean;
type?: 'text' | 'email' | 'password' | 'tel' | 'search';
name: string;
label: string;
placeholder?: string;
required?: boolean;
disabled?: boolean;

style?: React.CSSProperties;
className?: string;
}

export function BogTextInput({
type = 'text',
name,
label,
multiline = false,
placeholder,
required = false,
disabled = false,
style,
className,
}: BogTextInputProps) {
return (
<Form.Field name={name} className={className} style={style}>
<div className="flex flex-row gap-x-2 text-paragraph-2">
<Form.Label>{label}</Form.Label>
<Form.Message match="valueMissing" className="text-status-red-text">
Please enter a value for {label}
</Form.Message>
<Form.Message match="typeMismatch" className="text-status-red-text">
Please provide a valid {label}
</Form.Message>
</div>
<Form.Control asChild>
Copy link
Contributor

Choose a reason for hiding this comment

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

I'd like a little bit more vertical space between the stuff above the text input (label and messages) and the textbox itself please :)

{multiline ? (
<textarea
name={name}
placeholder={placeholder}
required={required}
disabled={disabled}
rows={4}
className={`${styles.input} text-paragraph-2`}
/>
) : (
<input
name={name}
type={type}
placeholder={placeholder}
required={required}
disabled={disabled}
className={`${styles.input} text-paragraph-2`}
Copy link
Contributor

Choose a reason for hiding this comment

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

Can you style the placeholder text on both of these inputs like the Figma? I think there is a ::placeholder CSS selector, and it would just be setting the font to text-paragraph-2 and the color to var(--color-grey-stroke-strong)

/>
)}
</Form.Control>
</Form.Field>
);
}
19 changes: 19 additions & 0 deletions src/components/BogTextInput/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
@layer base {
.input {
width: 100%;
padding: 0.5rem;
background-color: var(--color-solid-bg-sunken);
border-radius: 0.5rem;
border: 1px solid var(--color-grey-stroke-weak);
&:hover {
border-color: var(--color-brand-stroke-strong);
}
&:focus {
outline: none;
border-color: var(--color-brand-stroke-strong);
}
Comment on lines +11 to +14
Copy link

Choose a reason for hiding this comment

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

style: Consider adding a focus ring or box-shadow for better accessibility and visual feedback on focus

Suggested change
&:focus {
outline: none;
border-color: var(--color-brand-stroke-strong);
}
&:focus {
outline: none;
border-color: var(--color-brand-stroke-strong);
box-shadow: 0 0 0 2px var(--color-brand-stroke-weak);
}

Copy link
Contributor

Choose a reason for hiding this comment

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

Yeah, this isn't in the Figma, but would you mind adding this. Obviously, not your mistake, I just think it looks better and it's something the designers should have put in initially.

&:disabled {
color: var(--color-grey-off-state);
Copy link
Contributor

Choose a reason for hiding this comment

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

For disabled, can we make the hover state not change the border and the cursor be 'not-allowed'

}
}
}
30 changes: 30 additions & 0 deletions src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import BogButton from '../components/BogButton/BogButton';
import { BogRadioItem } from '@/components/BogRadioItem/BogRadioItem';
import { useState } from 'react';
import BogCheckbox from '@/components/BogCheckbox/BogCheckbox';
import { BogForm } from '@/components/BogForm/BogForm';
import { BogTextInput } from '@/components/BogTextInput/BogTextInput';

export default function Home() {
const icons = [
Expand Down Expand Up @@ -206,6 +208,34 @@ export default function Home() {
*/}
<div className="flex flex-col items-center justify-between border-grey-stroke-strong border-solid rounded-sm border-2 mb-8">
<h3 className="self-start ml-4 text-heading-3">Forms:</h3>
<BogForm
className="w-full px-4"
onSubmit={(e) => {
e.preventDefault();
const data = Object.fromEntries(new FormData(e.currentTarget));
console.log(data);
Copy link

Choose a reason for hiding this comment

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

style: Remove console.log before production

Copy link
Contributor

@Nathan-Papa Nathan-Papa Mar 8, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Yeah, thanks for leaving this behind for testing, but can you get rid of the log? If possible, could the event handler for the form on this page just be to clear all inputs on the form?

}}
>
<BogTextInput name="name" label="Name" placeholder="Enter your name" />
<BogTextInput name="email" label="Email" placeholder="Enter your email" type="email" />
<BogTextInput
name="password"
label="Password"
placeholder="Enter your password"
type="password"
required
/>
<BogTextInput name="phone" label="Phone" placeholder="Enter your phone number" type="tel" disabled />
<BogTextInput multiline name="message" label="Message" placeholder="Enter your message" />
<BogCheckbox label="Checkbox" name="checkbox" />
{/* you have to include a `name` prop when using BogRadioGroup in a form! */}
<BogRadioGroup name="radio">
<BogRadioItem label="Option 1" value={'1'} />
<BogRadioItem label="Option 2" value={'2'} />
<BogRadioItem label="Option 3" value={'3'} />
<BogRadioItem label="Option 4" value={'4'} />
</BogRadioGroup>
</BogForm>
</div>

{/* Temp placeholder for style */}
Expand Down