fix: range picker

coingaming · Oct 15, 2020 · 15dd445 · 15dd445
1 parent 1c48921
commit 15dd445
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/docs/src/components/code/index.tsx b/docs/src/components/code/index.tsx
@@ -26,7 +26,7 @@ const CodeWrapper = styled.div(
     borderColor: color.beerus[100],
     borderRadius: Utils.rem(radius.small),
     position: 'relative',
-    overflow: 'hidden',
+    // overflow: 'hidden',
     '.prism-code:focus': {
       outline: 'none',
       boxShadow: `inset 0 0 3px ${color.piccolo[100]}`,

diff --git a/packages/components/src/datepicker/DateRangePicker.tsx b/packages/components/src/datepicker/DateRangePicker.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 import { enGB } from 'date-fns/locale';
 
 import { DateRangePickerProps } from './types/props';
@@ -7,6 +8,10 @@ import { getPlaceholder } from './private/helpers/getPlaceholder';
 
 import { Button } from '..';
 
+const Wrapper = styled.div({
+  position: 'relative',
+});
+
 const DateRangePicker: React.FC<DateRangePickerProps> = ({
   startDate,
   endDate,
@@ -21,7 +26,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
     getPlaceholder({ startDate, endDate, range, config, translations })
   );
   return (
-    <>
+    <Wrapper>
       <Button variant="tertiary" onClick={() => setIsOpen(true)}>
         {placeholder}
       </Button>
@@ -38,7 +43,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
           setPlaceholder={setPlaceholder}
         />
       )}
-    </>
+    </Wrapper>
   );
 };
 

diff --git a/packages/components/src/datepicker/private/Picker.tsx b/packages/components/src/datepicker/private/Picker.tsx
@@ -12,9 +12,10 @@ import { Sidebar } from './Sidebar';
 import { InputsPanel } from './InputsPanel';
 
 const PickerContainer = styled.div(
-  ({ theme: { color, space, radius, breakpoint } }) => ({
+  ({ theme: { color, space, radius, breakpoint, zIndex } }) => ({
     width: 'fit-content',
-    // position: 'relative',
+    position: 'absolute',
+    zIndex: zIndex.dialog,
     display: 'grid',
     gridTemplateAreas: `
       "sidebar"
@@ -29,6 +30,7 @@ const PickerContainer = styled.div(
         "inputs  inputs     inputs"
       `,
       gridTemplateColumns: '1fr 2fr 2fr',
+      alignItems: 'baseline',
     },
     paddingBottom: rem(space.default),
     gap: rem(space.default),