feat: FormField component

[jordmccord]

Adds FormField and the Form Field child components

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
native-ui	⬜️ Ignored (Inspect)			Jul 16, 2024 2:19pm
web-ui	⬜️ Ignored (Inspect)	Visit Preview		Jul 16, 2024 2:19pm

[linear]

UWDS-1631 Build Form Field

[changeset-bot]

⚠️ No Changeset found

Latest commit: 0503e17

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

🖥️ Native UI - Storybook Preview

Visit the Storybook preview URL to see the changes in action.

• Preview: https://native-3e84b1r79-uwds.vercel.app

📱 Appetize Previews

You can view the apps using the link above and choosing the device from the top action bar. Alternatively you can use the direct links below.

• Android
• iOS

---

Last updated from commit 8526a59

[robphoenix]

nitpick: I remember this being a PITA in the past when we first added TextField to Web UI; but specifying different border colours results in a pixelated 45 degree cut on the corners rather than the straight cut in the designs.

Native UI Input corner...

Web UI TextField corner...

To resolve this Web UI uses the :before & :after pseudo classes. Not sure if you can do the same in RN, or if it's even necessary 🤷🏻

[jordmccord]

@robphoenix Not quite sure what to google as the issue 😅🤔. Off the top of my head the only way would be to add two elements as pseudo-elements don't exist in RN e.g:

<Input sx={{ position: 'relative' }}>
  <Box
    sx={{
      position: 'absolute',
      bottom: -2,
      left: -2,
      width: 2,
      height: 2,
      backgroundColor: '$grey500',
      zIndex: 1,
    }}
  />
  <InputField placeholder={placeholder} type={type} />
  <Box
    sx={{
      position: 'absolute',
      bottom: -2,
      right: -2,
      width: 2,
      height: 2,
      backgroundColor: '$grey500',
      zIndex: 1,
    }}
  />
</Input>

[robphoenix]

Yeah, makes sense, nice solution 🙌🏻