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>
box · Jan 30, 2025 · 42b485f · 42b485f
1 parent 560fee0
commit 42b485f
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}