feat(Popover): add maxHeight prop

kiwicom · Apr 26, 2023 · b454d7b · b454d7b
1 parent dbd7e6c
commit b454d7b
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 9 deletions.
diff --git a/docs/src/__examples__/Popover/DEFAULT.tsx b/docs/src/__examples__/Popover/DEFAULT.tsx
@@ -41,6 +41,7 @@ export default {
         { name: "noPadding", type: "boolean", defaultValue: false },
         { name: "fixed", type: "boolean", defaultValue: false },
         { name: "width", type: "text", defaultValue: "" },
+        { name: "maxHeight", type: "text", defaultValue: "" },
         {
           name: "placement",
           type: "select",

diff --git a/packages/orbit-components/src/Popover/Popover.stories.tsx b/packages/orbit-components/src/Popover/Popover.stories.tsx
@@ -428,6 +428,8 @@ export const Playground = () => {
   const dataTest = text("dataTest", "test");
   const placement = select("placement", Object.values(PLACEMENTS), PLACEMENTS.BOTTOM_START);
   const width = text("width", "350px");
+  const maxHeight = text("maxHeight", "");
+  const footerActions = boolean("footerActions", true);
   const noPadding = boolean("noPadding", false);
   const overlapped = boolean("overlapped", false);
   const opened = boolean("opened", true);
@@ -439,6 +441,7 @@ export const Playground = () => {
     <Stack justify="center">
       <Popover
         width={width}
+        maxHeight={maxHeight}
         dataTest={dataTest}
         offset={offset}
         content={content}
@@ -448,12 +451,14 @@ export const Playground = () => {
         opened={opened}
         noFlip={noFlip}
         actions={
-          <Stack direction="row" justify="between">
-            <Button type="secondary" size="small">
-              Cancel
-            </Button>
-            <Button size="small">Done</Button>
-          </Stack>
+          footerActions && (
+            <Stack direction="row" justify="between">
+              <Button type="secondary" size="small">
+                Cancel
+              </Button>
+              <Button size="small">Done</Button>
+            </Stack>
+          )
         }
         overlapped={overlapped}
         onOpen={action("open")}

diff --git a/packages/orbit-components/src/Popover/README.md b/packages/orbit-components/src/Popover/README.md
@@ -31,7 +31,8 @@ Table below contains all types of the props available in the Popover component.
 | opened         | `boolean`                |                     | Prop for programmatically controlling Popover inner state. If `opened` is present open triggers are ignored.                                     |
 | overlapped     | `boolean`                | `false`             | If `true`, the content of Popover will overlap the trigger children.                                                                             |
 | renderInPortal | `boolean`                | `true`              | Optional prop, set it to `false` if you're rendering Popover inside a custom portal, defaults to `true`                                          |
-| width          | `string`                 |                     | Width of popover, if not set the with is set to `auto`.                                                                                          |
+| width          | `string`                 |                     | Width of popover, if undefined, it is set to `auto`.                                                                                             |
+| maxHeight      | `string`                 |                     | The maximum height of the content of the popover, if undefined, it is set to `100%`.                                                             |
 | onClose        | `() => void \| Promise`  |                     | Function for handling onClose.                                                                                                                   |
 | onOpen         | `() => void \| Promise`  |                     | Function for handling onOpen.                                                                                                                    |
 | placement      | [`placement](#placement) | `bottom-start`      | 12 different placements to choose from                                                                                                           |

diff --git a/packages/orbit-components/src/Popover/components/ContentWrapper.tsx b/packages/orbit-components/src/Popover/components/ContentWrapper.tsx
@@ -27,6 +27,7 @@ export interface Props extends Common.Globals {
   referenceElement: HTMLElement | null;
   placement: Placement;
   width?: string;
+  maxHeight?: string;
   noFlip?: boolean;
   allowOverflow?: boolean;
   noPadding?: boolean;
@@ -41,10 +42,11 @@ export interface Props extends Common.Globals {
 }
 
 const StyledContentWrapper = styled.div<{
+  maxHeight?: string;
   windowHeight?: number | null;
   actionsHeight?: number | null;
 }>`
-  ${({ theme, windowHeight, actionsHeight }) => css`
+  ${({ theme, windowHeight, actionsHeight, maxHeight }) => css`
     overflow: auto;
     border-top-left-radius: ${theme.orbit.spaceSmall};
     border-top-right-radius: ${theme.orbit.spaceSmall};
@@ -56,7 +58,7 @@ const StyledContentWrapper = styled.div<{
     bottom: ${actionsHeight || 0}px;
 
     ${mq.largeMobile(css`
-      max-height: 100%;
+      max-height: ${maxHeight || "100%"};
       border-radius: ${theme.orbit.borderRadiusNormal};
       bottom: auto;
       left: auto;
@@ -220,6 +222,7 @@ const PopoverContentWrapper = ({
   onClose,
   labelClose,
   width,
+  maxHeight,
   noFlip,
   offset = { top: 4, left: 0 },
   referenceElement,
@@ -317,6 +320,7 @@ const PopoverContentWrapper = ({
             actionsHeight={actionsHeight}
             ref={scrollingElementRef}
             windowHeight={windowHeight}
+            maxHeight={maxHeight}
           >
             <StyledPopoverPadding noPadding={noPadding}>{children}</StyledPopoverPadding>
           </StyledContentWrapper>

diff --git a/packages/orbit-components/src/Popover/index.js.flow b/packages/orbit-components/src/Popover/index.js.flow
@@ -20,6 +20,7 @@ export type Props = {|
   +placement?: Placement,
   +opened?: boolean,
   +width?: string,
+  +maxHeight?: string,
   +allowOverflow?: boolean,
   +noFlip?: boolean,
   +noPadding?: boolean,

diff --git a/packages/orbit-components/src/Popover/index.tsx b/packages/orbit-components/src/Popover/index.tsx
@@ -30,6 +30,7 @@ const Popover = ({
   allowOverflow,
   noPadding,
   width,
+  maxHeight,
   actions,
   overlapped,
   dataTest,
@@ -136,6 +137,7 @@ const Popover = ({
       noPadding={noPadding}
       actions={actions}
       width={width}
+      maxHeight={maxHeight}
       offset={offset}
       referenceElement={ref.current}
       onClose={handleOut}

diff --git a/packages/orbit-components/src/Popover/types.d.ts b/packages/orbit-components/src/Popover/types.d.ts
@@ -17,6 +17,7 @@ export interface Props extends Common.Globals {
   readonly placement?: Placement;
   readonly opened?: boolean;
   readonly width?: string;
+  readonly maxHeight?: string;
   readonly noPadding?: boolean;
   readonly allowOverflow?: boolean;
   readonly noFlip?: boolean;