@galaxy-ds/core 2.0.10 → 2.0.12

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-ds/core",
-  "version": "2.0.10",
+  "version": "2.0.12",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-ds/core",
-  "version": "2.0.10",
+  "version": "2.0.12",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",

package/src/Popover/Popover.stories.mdx

@@ -19,16 +19,25 @@ const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
 const open = Boolean(anchorEl);
 return (
   <div>
-    <Button
-      aria-describedby="popver"
-      variant="contained"
-      onClick={handleClick}
-    >
-      Open Popover
-    </Button>
-    <Popover open={open} setAnchorEl={setAnchorEl} anchorEl={anchorEl}>
-      <DateRangePickerExample months={2} />
-    </Popover>
+      <Button
+        aria-describedby="popver"
+        variant="contained"
+        onClick={handleClick}
+      >
+        Open Popover
+      </Button>
+      <Popover
+        sx={{
+          '& .MuiPopover-paper': {
+            border: '1px solid #BEBEBE',
+          },
+        }}
+        open={open}
+        setAnchorEl={setAnchorEl}
+        anchorEl={anchorEl}
+      >
+        <DateRangePickerExample months={2} />
+      </Popover>
   </div>
 );`
         }

package/src/Popover/PopoverExample.tsx

@@ -20,7 +20,16 @@ export const PopoverExample = () => {
       >
         Open Popover
       </Button>
-      <Popover open={open} setAnchorEl={setAnchorEl} anchorEl={anchorEl}>
+      <Popover
+        sx={{
+          '& .MuiPopover-paper': {
+            border: '1px solid #BEBEBE',
+          },
+        }}
+        open={open}
+        setAnchorEl={setAnchorEl}
+        anchorEl={anchorEl}
+      >
         <DateRangePickerExample months={2} />
       </Popover>
     </div>

package/src/Theme/leap/desktop/overrides/index.ts

@@ -16,6 +16,7 @@ export * from './menu';
 export * from './menuItem';
 export * from './menuHeader';
 export * from './outlinedInput';
+export * from './popover';
 export * from './radio';
 export * from './listSubHeader';
 export * from './listItem';

package/src/Theme/leap/desktop/overrides/popover.ts

@@ -0,0 +1,14 @@
+import { Components, Theme } from '@mui/material';
+
+export const popoverOverrides: Components<Theme>['MuiPopover'] = {
+  styleOverrides: {
+    root: () => ({
+      '& .MuiPopover-paper': {
+        borderRadius: '8px',
+      },
+    }),
+  },
+  defaultProps: {
+    elevation: 4,
+  },
+};

package/src/Theme/leap/desktop/overrides/tooltip.ts

@@ -2,14 +2,13 @@ import { Components, Theme } from '@mui/material';
 
 export const tooltipOverrides: Components<Theme>['MuiTooltip'] = {
   styleOverrides: {
-    tooltip: ({theme}) => ({
+    tooltip: ({ theme }) => ({
       fontSize: theme.typography.body2.fontSize,
-      borderRadius: 1,
+      borderRadius: 2,
       color: theme.palette.text.primary,
       backgroundColor: theme.palette.grey[50],
       padding: 3,
-      maxWidth: 'auto',
-      boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.21)',
+      boxShadow: ' 0px 2px 3px 0px #00000040',
       marginTop: 0,
     }),
     tooltipPlacementTop: {
@@ -22,4 +21,4 @@ export const tooltipOverrides: Components<Theme>['MuiTooltip'] = {
       display: 'none',
     },
   },
-};
+};

package/src/Theme/leap/desktop/theme.ts

@@ -91,6 +91,7 @@ import {
   menuItemOverrides,
   menuHeaderOverrides,
   outlinedInputOverrides,
+  popoverOverrides,
   radioOverrides,
   listItemOverrides,
   listItemAvatarOverrides,
@@ -171,11 +172,7 @@ theme = createTheme(theme, {
         elevation: 0,
       },
     },
-    MuiPopover: {
-      defaultProps: {
-        elevation: 4,
-      },
-    },
+    MuiPopover: popoverOverrides,
     MuiRadio: radioOverrides,
     MuiListSubheader: listSubheaderOverrides,
     MuiListItem: listItemOverrides,
@@ -193,6 +190,6 @@ theme = createTheme(theme, {
 });
 
 theme.shadows[3] = '2px 3px 4px 0 rgba(0,0,0,0.5)';
-theme.shadows[4] = '3px 3px 4px rgba(0, 0, 0, 0.4)';
+theme.shadows[4] = '0px 4px 20px 0px #00000036'; //Shadow / Modal Window
 
 export default theme;

package/src/Theme/leap/web/overrides/index.ts

@@ -24,6 +24,7 @@ export * from './listItemText';
 export * from './inputBase';
 export * from './inputLabel';
 export * from './outlinedInput';
+export * from './popover';
 export * from './menu';
 export * from './menuItem';
 export * from './radio';
@@ -39,4 +40,3 @@ export * from './switch';
 export * from './Table/tableCell';
 export * from './Table/tableContainer';
 export * from './Table/tableRow';
-

package/src/Theme/leap/web/overrides/popover.ts

@@ -0,0 +1,14 @@
+import { Components, Theme } from '@mui/material';
+
+export const popoverOverrides: Components<Theme>['MuiPopover'] = {
+  styleOverrides: {
+    root: () => ({
+      '& .MuiPopover-paper': {
+        borderRadius: '8px',
+      },
+    }),
+  },
+  defaultProps: {
+    elevation: 4,
+  },
+};

package/src/Theme/leap/web/overrides/tooltip.ts

@@ -7,7 +7,6 @@ export const tooltipOverrides: Components<Theme>['MuiTooltip'] = {
       borderRadius: 4,
       backgroundColor: theme.palette.grey[800],
       paddingTop: 5,
-      maxWidth: 'auto',
       opacity: '0.9 !important',
     }),
     tooltipPlacementTop: {
@@ -20,4 +19,4 @@ export const tooltipOverrides: Components<Theme>['MuiTooltip'] = {
       color: theme.palette.grey[800],
     }),
   },
-};
+};

package/src/Theme/leap/web/theme.ts

@@ -27,6 +27,7 @@ import {
   menuOverrides,
   menuItemOverrides,
   outlinedInputOverrides,
+  popoverOverrides,
   radioOverrides,
   listItemOverrides,
   listItemAvatarOverrides,
@@ -99,11 +100,7 @@ theme = createTheme(theme, {
     MuiMenuItem: menuItemOverrides,
     MuiListSubheader: listSubheaderOverrides,
     MuiOutlinedInput: outlinedInputOverrides,
-    MuiPopover: {
-      defaultProps: {
-        elevation: 4,
-      },
-    },
+    MuiPopover: popoverOverrides,
     MuiRadio: radioOverrides,
     MuiListItem: listItemOverrides,
     MuiListItemAvatar: listItemAvatarOverrides,
@@ -121,6 +118,6 @@ theme = createTheme(theme, {
 
 // Override shadows
 theme.shadows[3] = '2px 3px 4px 0 rgba(0,0,0,0.15)';
-theme.shadows[4] = '0px 2px 8px 0px rgba(0,0,0,0.15)';
+theme.shadows[4] = '0px 4px 20px 0px #00000036'; //Shadow / Modal Window
 
 export default theme;