add className prop to HadronDocument

kpamaran · kpamaran · commit 36342139e25f · 2025-09-12T10:44:53.000-04:00
diff --git a/packages/compass-collection/src/components/mock-data-generator-modal/raw-schema-confirmation-screen.tsx b/packages/compass-collection/src/components/mock-data-generator-modal/raw-schema-confirmation-screen.tsx
@@ -23,16 +23,15 @@ interface RawSchemaConfirmationScreenProps {
   fakerSchemaGenerationStatus: MockDataGeneratorState['status'];
 }
 
-// note: the "> div" selector works around the lack of a className prop on HadronDocument
-const documentContainerStyles = css`
-  background-color: ${palette.gray.light3};
-  border: 1px solid ${palette.gray.light2};
-  border-radius: ${spacing[400]}px;
+const documentContainerStyles = css({
+  backgroundColor: palette.gray.light3,
+  border: `1px solid ${palette.gray.light2}`,
+  borderRadius: spacing[400],
+});
 
-  > div {
-    padding: ${spacing[400]}px ${spacing[900]}px;
-  }
-`;
+const documentStyles = css({
+  padding: `${spacing[400]}px ${spacing[900]}px`,
+});
 
 const descriptionStyles = css({
   marginBottom: spacing[200],
@@ -72,6 +71,7 @@ const RawSchemaConfirmationScreen = ({
           <Body className={descriptionStyles}>{descriptionText}</Body>
           <div className={documentContainerStyles}>
             <DocumentList.Document
+              className={documentStyles}
               editable={false}
               value={
                 new HadronDocument(
diff --git a/packages/compass-components/src/components/document-list/document.tsx b/packages/compass-components/src/components/document-list/document.tsx
@@ -88,6 +88,7 @@ const HadronDocument: React.FunctionComponent<{
   extraGutterWidth?: number;
   onUpdateQuery?: (field: string, value: unknown) => void;
   query?: Record<string, unknown>;
+  className?: string;
 }> = ({
   value: document,
   editable = false,
@@ -96,6 +97,7 @@ const HadronDocument: React.FunctionComponent<{
   extraGutterWidth,
   onUpdateQuery,
   query,
+  className = '',
 }) => {
   const { elements, visibleElements } = useHadronDocument(document);
   const [autoFocus, setAutoFocus] = useState<{
@@ -130,7 +132,7 @@ const HadronDocument: React.FunctionComponent<{
   );
 
   return (
-    <div>
+    <div className={className}>
       <div
         className={hadronDocument}
         data-testid="hadron-document"
