From 42b485f8ad2a719f09d63fb1ece7b4cd1c07099f Mon Sep 17 00:00:00 2001
From: Trevor <7311041+tjuanitas@users.noreply.github.com>
Date: Thu, 30 Jan 2025 12:14:53 -0800
Subject: [PATCH] fix: remove selector from theming (#3879)

* fix: remove selector from theming

* fix: prevent unnecessary insert

---------

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
---
 src/elements/common/theming/ThemingStyles.tsx     |  4 ++--
 src/elements/common/theming/types.ts              |  1 -
 src/elements/common/theming/useCustomTheming.ts   | 10 +++++++---
 src/elements/content-explorer/ContentExplorer.js  |  2 +-
 src/elements/content-picker/ContentPicker.js      |  2 +-
 src/elements/content-preview/ContentPreview.js    |  2 +-
 src/elements/content-sidebar/Sidebar.js           |  2 +-
 src/elements/content-uploader/ContentUploader.tsx |  4 ++--
 8 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/elements/common/theming/ThemingStyles.tsx b/src/elements/common/theming/ThemingStyles.tsx
index dac7a4af4e..b12ac94f49 100644
--- a/src/elements/common/theming/ThemingStyles.tsx
+++ b/src/elements/common/theming/ThemingStyles.tsx
@@ -1,8 +1,8 @@
 import useCustomTheming from './useCustomTheming';
 import { ThemingProps } from './types';
 
-const ThemingStyles = ({ selector, theme }: ThemingProps) => {
-    useCustomTheming({ selector, theme });
+const ThemingStyles = ({ theme }: ThemingProps) => {
+    useCustomTheming({ theme });
 
     return null;
 };
diff --git a/src/elements/common/theming/types.ts b/src/elements/common/theming/types.ts
index dd2e78eb50..d3cdc938a8 100644
--- a/src/elements/common/theming/types.ts
+++ b/src/elements/common/theming/types.ts
@@ -3,6 +3,5 @@ export interface Theme {
 }
 
 export interface ThemingProps {
-    selector?: string;
     theme?: Theme;
 }
diff --git a/src/elements/common/theming/useCustomTheming.ts b/src/elements/common/theming/useCustomTheming.ts
index c1c6ebfb36..c00f66165e 100644
--- a/src/elements/common/theming/useCustomTheming.ts
+++ b/src/elements/common/theming/useCustomTheming.ts
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { convertTokensToCustomProperties } from './utils';
 import { ThemingProps } from './types';
 
-const useCustomTheming = ({ selector, theme = {} }: ThemingProps) => {
+const useCustomTheming = ({ theme = {} }: ThemingProps) => {
     const { tokens } = theme;
 
     const customProperties = convertTokensToCustomProperties(tokens);
@@ -11,15 +11,19 @@ const useCustomTheming = ({ selector, theme = {} }: ThemingProps) => {
         .join(';');
 
     useEffect(() => {
+        if (!styles) {
+            return undefined;
+        }
+
         const styleEl = document.createElement('style');
         document.head.appendChild(styleEl);
 
-        styleEl.sheet.insertRule(`${selector ?? ':root'} { ${styles} }`);
+        styleEl.sheet.insertRule(`:root { ${styles} }`);
 
         return () => {
             document.head.removeChild(styleEl);
         };
-    }, [selector, styles]);
+    }, [styles]);
 };
 
 export default useCustomTheming;
diff --git a/src/elements/content-explorer/ContentExplorer.js b/src/elements/content-explorer/ContentExplorer.js
index 645eabbf5d..ac0b1eb5ba 100644
--- a/src/elements/content-explorer/ContentExplorer.js
+++ b/src/elements/content-explorer/ContentExplorer.js
@@ -1665,7 +1665,7 @@ class ContentExplorer extends Component<Props, State> {
         return (
             <Internationalize language={language} messages={messages}>
                 <div id={this.id} className={styleClassName} ref={measureRef} data-testid="content-explorer">
-                    <ThemingStyles selector={`#${this.id}`} theme={theme} />
+                    <ThemingStyles theme={theme} />
                     <div className="be-app-element" onKeyDown={this.onKeyDown} tabIndex={0}>
                         {!isDefaultViewMetadata && (
                             <>
diff --git a/src/elements/content-picker/ContentPicker.js b/src/elements/content-picker/ContentPicker.js
index 732a3b9125..9a40a0f1cf 100644
--- a/src/elements/content-picker/ContentPicker.js
+++ b/src/elements/content-picker/ContentPicker.js
@@ -1240,7 +1240,7 @@ class ContentPicker extends Component<Props, State> {
         return (
             <Internationalize language={language} messages={messages}>
                 <div id={this.id} className={styleClassName} ref={measureRef} data-testid="content-picker">
-                    <ThemingStyles selector={`#${this.id}`} theme={theme} />
+                    <ThemingStyles theme={theme} />
                     <div className="be-app-element" onKeyDown={this.onKeyDown} tabIndex={0}>
                         <Header
                             view={view}
diff --git a/src/elements/content-preview/ContentPreview.js b/src/elements/content-preview/ContentPreview.js
index 1c1799f247..dda67c1d5b 100644
--- a/src/elements/content-preview/ContentPreview.js
+++ b/src/elements/content-preview/ContentPreview.js
@@ -1332,7 +1332,7 @@ class ContentPreview extends React.PureComponent<Props, State> {
                             onKeyDown={this.onKeyDown}
                             tabIndex={0}
                         >
-                            <ThemingStyles selector={`#${this.id}`} theme={theme} />
+                            <ThemingStyles theme={theme} />
                             {hasHeader && (
                                 <PreviewHeader
                                     file={file}
diff --git a/src/elements/content-sidebar/Sidebar.js b/src/elements/content-sidebar/Sidebar.js
index 1855db5777..9c46ffdc9e 100644
--- a/src/elements/content-sidebar/Sidebar.js
+++ b/src/elements/content-sidebar/Sidebar.js
@@ -327,7 +327,7 @@ class Sidebar extends React.Component<Props, State> {
 
         return (
             <aside id={this.id} className={styleClassName} data-testid="preview-sidebar">
-                <ThemingStyles selector={`#${this.id}`} theme={theme} />
+                <ThemingStyles theme={theme} />
                 {isLoading ? (
                     <div className="bcs-loading">
                         <LoadingIndicator />
diff --git a/src/elements/content-uploader/ContentUploader.tsx b/src/elements/content-uploader/ContentUploader.tsx
index e510957067..df4a59a294 100644
--- a/src/elements/content-uploader/ContentUploader.tsx
+++ b/src/elements/content-uploader/ContentUploader.tsx
@@ -1272,7 +1272,7 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
                 <TooltipProvider>
                     {useUploadsManager ? (
                         <div ref={measureRef} className={styleClassName} id={this.id}>
-                            <ThemingStyles selector={`#${this.id}`} theme={theme} />
+                            <ThemingStyles theme={theme} />
                             <UploadsManager
                                 isDragging={isDraggingItemsToUploadsManager}
                                 isExpanded={isUploadsManagerExpanded}
@@ -1289,7 +1289,7 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
                         </div>
                     ) : (
                         <div ref={measureRef} className={styleClassName} id={this.id}>
-                            <ThemingStyles selector={`#${this.id}`} theme={theme} />
+                            <ThemingStyles theme={theme} />
                             <DroppableContent
                                 addDataTransferItemsToUploadQueue={this.addDroppedItemsToUploadQueue}
                                 addFiles={this.addFilesToUploadQueue}