From 147beba1bceb812d254484c11ed461d56d2fcc9b Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <randall-krauskopf@github.com>
Date: Thu, 10 Oct 2024 14:19:10 -0500
Subject: [PATCH 1/3] initial commit

---
 packages/react/src/Placeholder/Placeholder.module.css | 8 ++++++++
 packages/react/src/{ => Placeholder}/Placeholder.tsx  | 9 +++------
 2 files changed, 11 insertions(+), 6 deletions(-)
 create mode 100644 packages/react/src/Placeholder/Placeholder.module.css
 rename packages/react/src/{ => Placeholder}/Placeholder.tsx (73%)

diff --git a/packages/react/src/Placeholder/Placeholder.module.css b/packages/react/src/Placeholder/Placeholder.module.css
new file mode 100644
index 00000000000..e7cc5128677
--- /dev/null
+++ b/packages/react/src/Placeholder/Placeholder.module.css
@@ -0,0 +1,8 @@
+.Box_0 {
+  display: grid;
+  place-items: center;
+  background: var(--bgColor-inset);
+  border-radius: var(--borderRadius-medium);
+  border: var(--borderWidth-thin) solid;
+  border-color: var(--borderColor-muted);
+}
diff --git a/packages/react/src/Placeholder.tsx b/packages/react/src/Placeholder/Placeholder.tsx
similarity index 73%
rename from packages/react/src/Placeholder.tsx
rename to packages/react/src/Placeholder/Placeholder.tsx
index a2616629f4a..c5980cdcc16 100644
--- a/packages/react/src/Placeholder.tsx
+++ b/packages/react/src/Placeholder/Placeholder.tsx
@@ -1,6 +1,8 @@
 import {Box} from '.'
 import React from 'react'
 
+import styles from './Placeholder.module.css'
+
 /** Private component used to render placeholders in storybook and documentation examples  */
 export const Placeholder: React.FC<
   React.PropsWithChildren<{
@@ -16,13 +18,8 @@ export const Placeholder: React.FC<
       sx={{
         width: width ?? '100%',
         height,
-        display: 'grid',
-        placeItems: 'center',
-        bg: 'canvas.inset',
-        borderRadius: 2,
-        border: '1px solid',
-        borderColor: 'border.subtle',
       }}
+      className={styles.Box_0}
     >
       {label}
     </Box>

From aadccbf94c3b142d949e12f68afc6338c5f4ac74 Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <randall-krauskopf@github.com>
Date: Thu, 10 Oct 2024 14:38:02 -0500
Subject: [PATCH 2/3] migrate sx -> style prop, linting

---
 packages/react/src/Placeholder/Placeholder.module.css | 2 +-
 packages/react/src/Placeholder/Placeholder.tsx        | 9 +--------
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/Placeholder/Placeholder.module.css b/packages/react/src/Placeholder/Placeholder.module.css
index e7cc5128677..f850f8303fc 100644
--- a/packages/react/src/Placeholder/Placeholder.module.css
+++ b/packages/react/src/Placeholder/Placeholder.module.css
@@ -2,7 +2,7 @@
   display: grid;
   place-items: center;
   background: var(--bgColor-inset);
-  border-radius: var(--borderRadius-medium);
   border: var(--borderWidth-thin) solid;
   border-color: var(--borderColor-muted);
+  border-radius: var(--borderRadius-medium);
 }
diff --git a/packages/react/src/Placeholder/Placeholder.tsx b/packages/react/src/Placeholder/Placeholder.tsx
index c5980cdcc16..b6407c3cfd6 100644
--- a/packages/react/src/Placeholder/Placeholder.tsx
+++ b/packages/react/src/Placeholder/Placeholder.tsx
@@ -13,14 +13,7 @@ export const Placeholder: React.FC<
   }>
 > = ({width, height, id, label}) => {
   return (
-    <Box
-      id={id}
-      sx={{
-        width: width ?? '100%',
-        height,
-      }}
-      className={styles.Box_0}
-    >
+    <Box id={id} className={styles.Box_0} style={{width: width ?? '100%', height}}>
       {label}
     </Box>
   )

From 9fe6c6d03d7b59aeca210641d76c1a398a686027 Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <randall-krauskopf@github.com>
Date: Fri, 11 Oct 2024 09:41:11 -0500
Subject: [PATCH 3/3] small fixes

---
 packages/react/src/Placeholder/Placeholder.tsx | 2 +-
 packages/react/src/Placeholder/index.ts        | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)
 create mode 100644 packages/react/src/Placeholder/index.ts

diff --git a/packages/react/src/Placeholder/Placeholder.tsx b/packages/react/src/Placeholder/Placeholder.tsx
index b6407c3cfd6..ca4353a70d9 100644
--- a/packages/react/src/Placeholder/Placeholder.tsx
+++ b/packages/react/src/Placeholder/Placeholder.tsx
@@ -1,4 +1,4 @@
-import {Box} from '.'
+import Box from '../Box'
 import React from 'react'
 
 import styles from './Placeholder.module.css'
diff --git a/packages/react/src/Placeholder/index.ts b/packages/react/src/Placeholder/index.ts
new file mode 100644
index 00000000000..83fe985871a
--- /dev/null
+++ b/packages/react/src/Placeholder/index.ts
@@ -0,0 +1 @@
+export {Placeholder} from './Placeholder'