core-components: LogViewer prop className -> classes

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/core-components/api-report.md

@@ -647,7 +647,9 @@ export type LogViewerClassKey =
 
 // @public
 export interface LogViewerProps {
-  className?: string;
+  classes?: {
+    root?: string;
+  };
   text: string;
 }
 

packages/core-components/src/components/LogViewer/LogViewer.tsx

@@ -34,9 +34,11 @@ export interface LogViewerProps {
    */
   text: string;
   /**
-   * The className to apply to the root LogViewer element inside the auto sizer.
+   * Styling overrides for classes within the LogViewer component.
    */
-  className?: string;
+  classes?: {
+    root?: string;
+  };
 }
 
 /**

packages/core-components/src/components/LogViewer/RealLogViewer.tsx

@@ -29,11 +29,11 @@ import { useLogViewerSelection } from './useLogViewerSelection';
 
 export interface RealLogViewerProps {
   text: string;
-  className?: string;
+  classes?: { root?: string };
 }
 
 export function RealLogViewer(props: RealLogViewerProps) {
-  const classes = useStyles();
+  const classes = useStyles({ classes: props.classes });
   const listRef = useRef<FixedSizeList | null>(null);
 
   // The processor keeps state that optimizes appending to the text
@@ -60,10 +60,7 @@ export function RealLogViewer(props: RealLogViewerProps) {
   return (
     <AutoSizer>
       {({ height, width }) => (
-        <div
-          style={{ width, height }}
-          className={classnames(classes.root, props.className)}
-        >
+        <div style={{ width, height }} className={classes.root}>
           <div className={classes.header}>
             <LogViewerControls {...search} />
           </div>