@tactics/toddle-styleguide 1.3.0 → 1.3.2

package/src/components/templates/popover/popover.styles.d.ts

@@ -1,8 +1,11 @@
 export function Stylesheet(): {
   element: {
+    width: string;
+    height: string;
     zIndex: number;
     top: number;
     left: number;
     position: 'absolute';
+    alignItems: 'center';
   };
 };

package/src/components/templates/popover/popover.styles.js

@@ -10,5 +10,6 @@ export const Stylesheet = () =>
       top: 0,
       left: 0,
       position: 'absolute',
+      alignItems: 'center',
     },
   });

package/src/components/templates/popover-action/popover-action.component.tsx

@@ -4,6 +4,7 @@ import {Backdrop} from '../../atoms/backdrop/backdrop.component';
 import {Stylesheet} from './popover-action.styles';
 import {Swipe} from '../../molecules/swipe/swipe.component';
 import {ThemeCtx} from '../../../context/theme.context';
+import {Foreground} from '../popover/components';
 
 type PopOverActionProps = {
   isVisible: boolean;
@@ -103,8 +104,12 @@ export const PopOverAction = ({
   const transform = [{translateY: translateY}];
 
   return (
-    <View style={styles.element} pointerEvents={isVisible ? 'auto' : 'none'}>
+    <View
+      style={styles.element}
+      pointerEvents={isVisible ? 'box-none' : 'none'}
+    >
       <Backdrop isVisible={isVisible} touchBackDrop={touchBackDrop} />
+
       <Animated.View
         style={[
           styles.slidePanelContainer,

package/src/components/templates/popover-action/popover-action.styles.d.ts

@@ -6,18 +6,20 @@ export function Stylesheet(context: any): {
     left: number;
     top: number;
     zIndex: number;
+    alignItems: 'center';
   };
   slidePanelContainer: {
     position: 'relative';
     display: 'flex';
     flex: number;
+    width: string;
+    maxWidth: number;
+    alignSelf: 'center';
     alignItems: 'stretch';
     paddingLeft: number;
     paddingTop: number;
     paddingRight: number;
     paddingBottom: number;
-    marginLeft: number;
-    marginRight: number;
     borderTopLeftRadius: number;
     borderTopRightRadius: number;
     zIndex: number;

package/src/components/templates/popover-action/popover-action.styles.js

@@ -11,18 +11,20 @@ export const Stylesheet = (context) =>
       left: 0,
       top: 0,
       zIndex: 1000,
+      alignItems: 'center',
     },
     slidePanelContainer: {
       position: 'relative',
       display: 'flex',
       flex: 1,
+      width: '90%',
+      maxWidth: 768,
+      alignSelf: 'center',
       alignItems: 'stretch',
       paddingLeft: Scale.m,
       paddingTop: Scale.xl,
       paddingRight: Scale.m,
       paddingBottom: Scale.m,
-      marginLeft: Scale.m,
-      marginRight: Scale.m,
       borderTopLeftRadius: Scale.l,
       borderTopRightRadius: Scale.l,
       zIndex: 1004,