refactor(slice-machine-ui): use `Table` from `@prismicio/editor-ui`

[angeloashmore]

Context

DT-2019

The Solution

• Replace use of Table with @prismicio/editor-ui's Table.
• Remove the empty space around the "Repeatable" and "Single" document icons.
• Remove the Table component set.
• Remove the CustomTypesTablePage Vitest tests. The tests broke as a result of this PR, and we already have Playwright tests to cover the page. It isn't worth our time to fix the Vitest version.

Impact / Dependencies

N/A

Checklist before requesting a review

• [x] I hereby declare my code ready for review.
• [ ] If it is a critical feature, I have added tests.
• [ ] The CI is successful.
• [ ] If there could backward compatibility issues, it has been discussed and planned.

Preview

[vercel[bot]]

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

Name	Status	Preview	Updated (UTC)
slice-machine	✅ Ready (Inspect)	Visit Preview	May 21, 2024 1:16am

[linear[bot]]

DT-2019 Use Table component from `editor-ui`

[filip-prismic]

Excellent!

🕵️‍♂️ I've only noticed that the Button's shadow is clipped, but I don't understand why. I don't think this is a blocking issue though.

It is because TableCell has overflow class assigned by default and the outline spans beyond element bounds. Maybe we could provide prop to remove it, bcs in the cell like this you don't need it.

.overflow {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

[angeloashmore]

It is because TableCell has overflow class assigned by default and the outline spans beyond element bounds. Maybe we could provide prop to remove it, bcs in the cell like this you don't need it.

.overflow {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

Exposing a prop that controls the overflow feels like a leaky abstraction. Throwing a different idea out: what if we removed the 16px inline padding and moved it to the first and last cells in a row? That would prevent the overflow clipping.

Unfortunately, it means the first and last column sizes need to increase by 16px, which may have negative consequences:

- <Table columnLayout="28px 1fr 1fr 1fr 40px">
+ <Table columnLayout="44px 1fr 1fr 1fr 56px">

[angeloashmore]

@bapmrl I fixed the issue by increasing the table column by 2px: https://github.com/prismicio/slice-machine/pull/1362/commits/2dc6d5a48fb2c3f8d62697e16d637d6ebaf82f8c

I think it's an okay solution for now. The change is barely visible:

[filip-prismic]

what if we removed the 16px inline padding and moved it to the first and last cells in a row? That would prevent the overflow clipping.

@angeloashmore seems like patch for a problem we should not be dealing with. I would rather ask why the overflow is there for all the columns by default in the first place. Seems weird to me :D

But agree this one shouldn't be a blocker for you and 2px size change is a good enough right now.

[angeloashmore]

@filip-prismic I quickly looked at it closer and I agree; it doesn't seem like the overflow styles are needed. It could be something handled by the cell's children instead.

But let's move forward with the 2px fix for now.