Update CSS class for the Panel instead of a Row (#272)

* ft added css support for containers and rows

* fix: test for injectGlobal

* fix: added test cases to check classes in document on elements

* Update to Node 20

* fix: use Global instead injectGlobal; rename dt-row-container to dt-container

* fix: Styles updated

* fix: remove options.styles from Text.tsx component for rows

* Update CHANGELOG.md

---------

Co-authored-by: Mikhail Volkov <mikhail@volkovlabs.io>

CHANGELOG.md

@@ -8,6 +8,7 @@
 - Added theme object, notifySuccess & notifyError (#270)
 - Update dependencies and Actions (#271)
 - Replace custom code parameters with Code Parameters Builder (#285)
+- Update CSS class for the Panel instead of a Row (#272)
 
 ## 4.3.0 (2023-12-25)
 

package.json

@@ -62,7 +62,7 @@
     "webpack-livereload-plugin": "^3.0.2"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "license": "Apache-2.0",
   "name": "marcusolsson-dynamictext-panel",

src/components/Text/Text.test.tsx

@@ -56,34 +56,6 @@ describe('Text', () => {
     expect(screen.getByTestId(TEST_IDS.text.content)).toHaveTextContent('Test default content');
   });
 
-  it('Should apply styles', async () => {
-    const styles = `
-      color: red;
-    `;
-    const replaceVariables = jest.fn((str: string) => str);
-    const props: Props = {
-      data: {} as any,
-      options: {
-        ...DEFAULT_OPTIONS,
-        content: 'Test content',
-        defaultContent: 'Test default content',
-        renderMode: RenderMode.EVERY_ROW,
-        styles,
-      },
-      timeRange: {} as any,
-      timeZone: '',
-      replaceVariables,
-      eventBus: {} as any,
-    };
-
-    render(<Text {...props} />);
-
-    expect(replaceVariables).toHaveBeenCalledWith(styles);
-
-    expect(screen.getByTestId(TEST_IDS.text.content)).toBeInTheDocument();
-    expect(screen.getByTestId(TEST_IDS.text.content)).toHaveStyle({ color: 'red' });
-  });
-
   describe('After Render Function', () => {
     it('Should run after render function', async () => {
       const eventBus = {

src/components/Text/Text.tsx

@@ -1,4 +1,4 @@
-import { css, cx } from '@emotion/css';
+import { cx } from '@emotion/css';
 import {
   AlertErrorPayload,
   AlertPayload,
@@ -105,13 +105,7 @@ export const Text: React.FC<Props> = ({
    * Styles
    */
   const styles = useStyles2(getStyles);
-  const className = cx(
-    styles.highlight,
-    styles.frame,
-    css`
-      ${options.styles ? replaceVariables(options.styles) : ''}
-    `
-  );
+  const className = cx(styles.highlight, styles.frame, 'dt-row');
 
   /**
    * Events

src/components/TextPanel/TextPanel.test.tsx

@@ -159,6 +159,47 @@ describe('Panel', () => {
     expect(streamSubscribe).toHaveBeenCalled();
   });
 
+  it('Should apply css for component', async () => {
+    const streamSubscribe = jest.fn(() => ({
+      unsubscribe: jest.fn(),
+    }));
+
+    const eventBus = {
+      getStream: jest.fn(() => ({
+        subscribe: streamSubscribe,
+      })),
+    };
+
+    const replaceVariables = jest.fn((str: string) => str);
+
+    await act(async () =>
+      render(
+        getComponent({
+          options: {
+            ...defaultOptions,
+            defaultContent: 'hello',
+            styles: '.styles-test{}; .dt-row{color:red}',
+          },
+          replaceVariables,
+          data: { series: [] } as any,
+          eventBus: eventBus as any,
+          id: 5,
+        })
+      )
+    );
+
+    expect(replaceVariables).toHaveBeenCalledWith('.styles-test{}; .dt-row{color:red}');
+
+    const panel = screen.getByTestId(TEST_IDS.panel.root);
+    expect(panel).toBeInTheDocument();
+
+    const rowClass = panel.querySelectorAll('.dt-row');
+    expect(rowClass.length).toBeGreaterThan(0);
+
+    expect(screen.getByTestId(TEST_IDS.text.content)).toBeInTheDocument();
+    expect(screen.getByTestId(TEST_IDS.text.content)).toHaveStyle({ color: 'red' });
+  });
+
   describe('Helpers execution', () => {
     const helpers = `
       const subscription = eventBus.subscribe('event', () => {});

src/components/TextPanel/TextPanel.tsx

@@ -118,6 +118,9 @@ export const TextPanel: React.FC<Props> = ({
           <div
             className={cx(
               styles.root,
+              css`
+                ${options.styles ? replaceVariables(options.styles) : ''}
+              `,
               css`
                 flex-grow: 1;
                 overflow: auto;