style(popover): expose padding prop for Popover component (#262)

Co-authored-by: Ján Hamara <jan.hamara@free-now.com>
freenowtech · Jul 21, 2022 · 6aecdd6 · 6aecdd6
1 parent a08842d
commit 6aecdd6
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
@@ -72,6 +72,10 @@ interface PopoverProps {
      * Popover content (can be any valid React Element or component containing React Elements)
      */
     content: React.ReactNode;
+    /**
+     * Popover content padding
+     */
+    padding?: string | number;
     /**
      * Optional: Specify the Popover content placement (it changes automatically if the Popover content cannot fit inside the viewport with the selected placement)
      */
@@ -97,6 +101,7 @@ interface PopoverProps {
 const Popover: React.FC<PopoverProps> = ({
     children,
     content = '',
+    padding = undefined,
     placement = 'bottom-start',
     offset = 5,
     isOpen = false,
@@ -233,7 +238,7 @@ const Popover: React.FC<PopoverProps> = ({
                     {...attributes.popper}
                 >
                     <PopoverContentWrapper ref={popoverContentRef}>
-                        <PopoverContent>{content}</PopoverContent>
+                        <PopoverContent padding={padding}>{content}</PopoverContent>
                     </PopoverContentWrapper>
                 </PopoverContentContainer>
             )}

diff --git a/src/components/Popover/PopoverContent.tsx b/src/components/Popover/PopoverContent.tsx
@@ -4,20 +4,28 @@ import styled from 'styled-components';
 import { Spaces } from '../../essentials';
 import { Card } from '../Card/Card';
 
+const DEFAULT_PADDING = Spaces[2];
+
 interface PopoverContentProps {
     /**
      * Popover content (can be any valid React Element or component)
      */
     children: React.ReactNode;
+    /**
+     * Popover content padding
+     */
+    padding: string | number;
 }
 
-const PopoverContentContainer = styled(Card)`
+const PopoverContentContainer = styled(Card)<{ padding: string | number }>`
     display: block;
-    padding: ${Spaces[2]};
+    padding: ${props => props.padding};
 `;
 
-export const PopoverContent = ({ children }: PopoverContentProps): React.ReactElement => (
+export const PopoverContent = ({ padding = DEFAULT_PADDING, children }: PopoverContentProps): React.ReactElement => (
     <>
-        <PopoverContentContainer level={200}>{children}</PopoverContentContainer>
+        <PopoverContentContainer padding={padding} level={200}>
+            {children}
+        </PopoverContentContainer>
     </>
 );
diff --git a/src/components/Popover/docs/Popover.mdx b/src/components/Popover/docs/Popover.mdx
@@ -113,6 +113,21 @@ The Popover supports:
 ```
 <br/>
 
+### With No Padding
+
+<ItemWrapper>
+    <Popover content={'There is no padding...'} padding={0}>
+        <Button size='small' variant="secondary"><SettingsIcon size={20} style={{marginRight: 5}} /> Manage Booking</Button>
+    </Popover>
+</ItemWrapper>
+
+```jsx
+<Popover content={'There is no padding...'} padding={0}>
+    <Button size='small' variant="secondary"><SettingsIcon size={20} /> Manage Booking</Button>
+</Popover>
+```
+<br/>
+
 ## Playground
 
 <Playground>