refactor(field): migrate layout components to sanity ui - phase 1

[vicmeow]

NOTE: Do not merge before AFTER the next release 👍

Description

First phase of migrating components in @sanity/field to sanity ui and styled-components.
These are smaller changes with minimal visual changes.

I did not touch the PopoverDialog in the change list yet, will do that in another phase.

What to review

Make sure that things still look ok visually in the changes panel. I've attached screenshots for an overview.

Error boundary

Before

After

Change list, tooltip, breadcrumbs

Before (left) and after (right)

Notes for release

• Migrated components in @sanity/field to Sanity UI and styled-components

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

test-studio – ./

🔍 Inspect: https://vercel.com/sanity-io/test-studio/CsTR96JLbKvs8Lrv5qCruDbN3bpo
✅ Preview: https://test-studio-git-chore-ch1237field-implement-sanity-ui.sanity.build

perf-studio – ./

🔍 Inspect: https://vercel.com/sanity-io/perf-studio/6nu3kHtytq9CYzg4FUrpPGssf4hG
✅ Preview: https://perf-studio-git-chore-ch1237field-implement-sanity-ui.sanity.build

[mariuslundgard]

Really nice work here! I only have concerns about RevertIcon and ErrorOutlineIcon. The other ones are optional nitpicks and praise 🙌

[mariuslundgard]

Nitpick: I think it would look good to use muted on this Text. So the headline is a little darker than the copy below it.

[vicmeow]

Good thinking!

[vicmeow]

Looks kind of funny 🤔

[mariuslundgard]

Agreed, but let’s fix the theme (in another PR, as mentioned in catch-up)

[mariuslundgard]

Nice detail to extend the TooltipProps here 👍

[mariuslundgard]

Nitpick (perhaps for a separate PR): I believe we could make this more reusable by creating a styled component here. Something like:

const UserColoredCard = styled(Card)<{$color: {background: string, text: string}}>`
  --card-bg-color: ${props => props.$color.background};
  --card-fg-color: ${props => props.$color.text};
  --card-muted-fg-color: ${props => props.$color.text};
`

And using it like:

<UserColoredCard $color={color} style={{borderRadius: 'calc(23px / 2)'}}>
  ...
</UserColoredCard>

[mariuslundgard]

You did correct by converting font-weight: 600 to semibold, but actually medium would be best so the these headers look similar to the field headers in the form.

[vicmeow]

the field headers are also using semibold tho? 🤔

sanity/packages/@sanity/base/src/components/formField/FormFieldHeaderText.tsx

Line 33 in 9f38c5a

<Text as="label" htmlFor={inputId} weight="semibold" size={1}>

[mariuslundgard]

Ah true, then why do they look lighter ... 🤔

[mariuslundgard]

LGTM ✨

[vicmeow]

I figured it out! It was applied in another component (with strong)

[vicmeow]

Do not merge before AFTER the next release 👍