fix(theme): add missing shadow to action menus/dropdowns that uses th…

…e Popover component (#146) Signed-off-by: Christoph Jerolimov <[email protected]>
redhat-developer · Dec 9, 2024 · 5ff9b79 · 5ff9b79
1 parent 08d898e
commit 5ff9b79
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 0 deletions.
diff --git a/workspaces/theme/.changeset/fifty-hotels-joke.md b/workspaces/theme/.changeset/fifty-hotels-joke.md
@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-theme': patch
+---
+
+add missing shadow to action menus/dropdowns that uses the Popover component
diff --git a/workspaces/theme/plugins/theme/report.api.md b/workspaces/theme/plugins/theme/report.api.md
@@ -46,6 +46,7 @@ export interface RHDHThemePalette {
     disabledBackground: string;
     paperBackgroundImage: string;
     paperBorderColor: string;
+    popoverBoxShadow: string;
     cardBackgroundColor: string;
     cardBorderColor: string;
     headerBottomBorderColor: string;

diff --git a/workspaces/theme/plugins/theme/src/darkTheme.test.ts b/workspaces/theme/plugins/theme/src/darkTheme.test.ts
@@ -98,6 +98,9 @@ describe('customDarkTheme', () => {
           paperBackgroundImage: 'none',
           paperBorderColor: '#A3A3A3',
 
+          popoverBoxShadow:
+            '0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.48), 0 0 0.25rem 0 rgba(3, 3, 3, 0.24)',
+
           cardBackgroundColor: '#1b1d21',
           cardBorderColor: '#A3A3A3',
 

diff --git a/workspaces/theme/plugins/theme/src/darkTheme.ts b/workspaces/theme/plugins/theme/src/darkTheme.ts
@@ -52,6 +52,10 @@ export const customDarkTheme = (): ThemeConfigPalette => {
         paperBackgroundImage: 'none',
         paperBorderColor: '#A3A3A3',
 
+        // Box shadow from PatternFly 5 (--pf-v5-global--BoxShadow--sm)
+        popoverBoxShadow:
+          '0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.48), 0 0 0.25rem 0 rgba(3, 3, 3, 0.24)',
+
         cardBackgroundColor: '#1b1d21',
         cardBorderColor: '#A3A3A3',
 

diff --git a/workspaces/theme/plugins/theme/src/lightTheme.test.ts b/workspaces/theme/plugins/theme/src/lightTheme.test.ts
@@ -102,6 +102,9 @@ describe('customLightTheme', () => {
           paperBackgroundImage: 'none',
           paperBorderColor: '#C7C7C7',
 
+          popoverBoxShadow:
+            '0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)',
+
           cardBackgroundColor: '#FFF',
           cardBorderColor: '#C7C7C7',
 

diff --git a/workspaces/theme/plugins/theme/src/lightTheme.ts b/workspaces/theme/plugins/theme/src/lightTheme.ts
@@ -56,6 +56,10 @@ export const customLightTheme = (): ThemeConfigPalette => {
         paperBackgroundImage: 'none',
         paperBorderColor: '#C7C7C7',
 
+        // Box shadow from PatternFly 5 (--pf-v5-global--BoxShadow--sm)
+        popoverBoxShadow:
+          '0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)',
+
         cardBackgroundColor: '#FFF',
         cardBorderColor: '#C7C7C7',
 

diff --git a/workspaces/theme/plugins/theme/src/types.ts b/workspaces/theme/plugins/theme/src/types.ts
@@ -25,6 +25,8 @@ export interface RHDHThemePalette {
     paperBackgroundImage: string;
     paperBorderColor: string;
 
+    popoverBoxShadow: string;
+
     cardBackgroundColor: string;
     cardBorderColor: string;
 

diff --git a/workspaces/theme/plugins/theme/src/utils/createComponents.ts b/workspaces/theme/plugins/theme/src/utils/createComponents.ts
@@ -102,6 +102,17 @@ export const createComponents = (themeConfig: ThemeConfig): Components => {
         elevation0: noElevationStyle,
       },
     };
+    components.MuiPopover = {
+      styleOverrides: {
+        paper: {
+          // Box shadow from PatternFly 5 (--pf-v5-global--BoxShadow--sm)
+          boxShadow: general.popoverBoxShadow,
+          // `Popover` has no outline by default, but since we're adding it to the `Paper`
+          // components, this ensures that the `Popover` doesn't has a shadow and an outline.
+          outline: 0,
+        },
+      },
+    };
 
     // Required for MUI v4, not MUI v5
     const elevations = Array.from(