refactor(field): migrate slug diff to @sanity/ui

Author: vicmeow

packages/@sanity/field/src/types/slug/diff/SlugFieldDiff.css

@@ -2,16 +2,13 @@ import React from 'react'
 import {DiffComponent, DiffFromTo, ObjectDiff} from '../../../diff'
 import {SlugPreview} from '../preview'
 
-import styles from './SlugFieldDiff.css'
-
 interface Slug {
   current?: string
 }
 
 export const SlugFieldDiff: DiffComponent<ObjectDiff<Slug>> = ({diff, schemaType}) => {
   return (
     <DiffFromTo
-      cardClassName={styles.card}
       layout="inline"
       diff={diff}
       schemaType={schemaType}

packages/@sanity/field/src/types/slug/diff/SlugFieldDiff.tsx

@@ -1,9 +1,21 @@
+import {Box} from '@sanity/ui'
 import React from 'react'
+import styled from 'styled-components'
+import {Slug} from '@sanity/types'
 import {PreviewComponent} from '../../../preview/types'
-import {Slug} from '../types'
+
+const SlugWrapper = styled.div`
+  display: inline-block;
+  word-break: break-all;
+  white-space: pre-wrap;
+`
 
 export const SlugPreview: PreviewComponent<Slug> = (props) => {
   const {value} = props
 
-  return <>{value.current}</>
+  return (
+    <Box as={SlugWrapper} paddingX={2} paddingY={1}>
+      {value.current}
+    </Box>
+  )
 }