feat: FormField component

[jordmccord]

Adds FormField and the Form Field child components

[skip-native]

[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)			Oct 23, 2024 10:16am
web-ui	⬜️ Ignored (Inspect)	Visit Preview		Oct 23, 2024 10:16am

[linear]

UWDS-1631 Build Form Field

[changeset-bot]

🦋 Changeset detected

Latest commit: a4ddc32

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@utilitywarehouse/native-ui	Minor

Not sure what this means? Click here to learn what changesets are.

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

[github-actions]

🖥️ Native UI - Storybook Preview

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

• Preview: https://native-9yra8i85g-cx-content-capability.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 08cd80d

[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 🙌🏻