Skip to content

Commit 83b0b92

Browse files
TheSonOfThompCopilotstephl3
authored
[LG-5627] Popover size restrictions (#3234)
* Updates Popover RefEl calculation hook * adds documentation to useObjectDependency * Adds maxHeight/maxWidth props to popover * install faker * Update Popover.types.ts * Create popover-max-height.md * Update Popover.styles.ts * adds moving Popover story * Update Popover.tsx * Apply suggestion from @Copilot Co-authored-by: Copilot <[email protected]> * Apply suggestion from @Copilot Co-authored-by: Copilot <[email protected]> * Apply suggestion from @Copilot Co-authored-by: Copilot <[email protected]> * Update .changeset/popover-max-height.md Co-authored-by: Stephen Lee <[email protected]> * Update packages/popover/src/Popover/Popover.types.ts Co-authored-by: Stephen Lee <[email protected]> * Update Popover.stories.tsx * add inline definition snapshot delay * inline definition stories * inline def 2 --------- Co-authored-by: Copilot <[email protected]> Co-authored-by: Stephen Lee <[email protected]>
1 parent 392b350 commit 83b0b92

File tree

11 files changed

+438
-59
lines changed

11 files changed

+438
-59
lines changed

‎.changeset/popover-max-height.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
'@leafygreen-ui/popover': minor
3+
---
4+
5+
Popover sizes are now restricted to the available space in the viewport, based on the computed position, align & justify.
6+
7+
Adds `maxHeight` & `maxWidth` props to further restrict the popover size.
8+
If the provided value is _greater than_ the available space above/below (for height), or left/right (for width) of the reference element,
9+
the size will be restricted to the available space (i.e. the popover will not overflow the viewport).
10+
11+
Note: Any `max-height` or `max-width` value applied with additional CSS will take precedence, and will override the "available space" calculation

‎.changeset/popover-ref-el-hook.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@leafygreen-ui/popover': patch
3+
---
4+
5+
Separates popover reference element position calculation into separate hook

‎packages/hooks/src/useObjectDependency.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,27 @@
11
import { useRef } from 'react';
22
import isEqual from 'lodash/isEqual';
33

4+
/**
5+
* Deeply compares the current `object` parameter to the previously stored value,
6+
* and updates the stored ref if it has changed.
7+
* Returns the `current` ref element.
8+
*
9+
* Useful when using a constructed object as a dependency in a `useEffect` etc.
10+
* to avoid triggering when the object reference changes.
11+
*
12+
* @example
13+
* ```tsx
14+
* // obj is recreated on every render
15+
* const obj = { foo: true }
16+
*
17+
* // `objDep` is the same on each render (if values are not changed)
18+
* const objDep = useObjectDependency(obj);
19+
*
20+
* useEffect(() => {
21+
* // only runs when the values of obj actually change
22+
* }, [objDep]);
23+
* ```
24+
*/
425
export default function useObjectDependency<T>(object: T): T {
526
const ref = useRef<T>();
627

‎packages/inline-definition/src/InlineDefinition/InlineDefinition.stories.tsx‎

Lines changed: 44 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
storybookExcludedControlParams,
55
StoryMetaType,
66
} from '@lg-tools/storybook-utils';
7-
import { StoryFn } from '@storybook/react';
7+
import { StoryFn, StoryObj } from '@storybook/react';
88

99
import { css } from '@leafygreen-ui/emotion';
1010
import { Body, H3, Link } from '@leafygreen-ui/typography';
@@ -19,27 +19,6 @@ const meta: StoryMetaType<typeof InlineDefinition> = {
1919
controls: {
2020
exclude: [...storybookExcludedControlParams, 'trigger', 'open'],
2121
},
22-
generate: {
23-
combineArgs: {
24-
darkMode: [false, true],
25-
},
26-
args: { open: true },
27-
decorator: Instance => {
28-
return (
29-
<div
30-
className={css`
31-
width: 50vw;
32-
height: 200px;
33-
display: flex;
34-
justify-content: center;
35-
align-items: flex-start;
36-
`}
37-
>
38-
<Instance />
39-
</div>
40-
);
41-
},
42-
},
4322
},
4423
args: {
4524
darkMode: false,
@@ -57,14 +36,6 @@ const meta: StoryMetaType<typeof InlineDefinition> = {
5736

5837
export default meta;
5938

60-
const Template: StoryFn<InlineDefinitionProps> = ({ darkMode, ...args }) => (
61-
<Body darkMode={darkMode}>
62-
<InlineDefinition darkMode={darkMode} {...args} />
63-
</Body>
64-
);
65-
66-
export const Basic = Template.bind({});
67-
6839
export const LiveExample: StoryFn<InlineDefinitionProps> = ({
6940
darkMode,
7041
...args
@@ -111,4 +82,46 @@ LiveExample.parameters = {
11182
},
11283
};
11384

114-
export const Generated = () => {};
85+
export const LightMode: StoryObj<typeof InlineDefinition> = {
86+
args: {
87+
open: true,
88+
darkMode: false,
89+
definition:
90+
'Sharding is a method for horizontally scaling across multiple replica sets by breaking up large datasets (e.g. partitioning) into smaller parts. Sharding is native to MongoDB.',
91+
children: 'Shard',
92+
},
93+
render: ({ darkMode, ...args }) => (
94+
<Body darkMode={darkMode}>
95+
<InlineDefinition darkMode={darkMode} {...args} />
96+
</Body>
97+
),
98+
parameters: {
99+
chromatic: {
100+
delay: 100,
101+
},
102+
},
103+
};
104+
105+
export const DarkMode: StoryObj<typeof InlineDefinition> = {
106+
args: {
107+
...LightMode.args,
108+
darkMode: true,
109+
},
110+
decorators: [
111+
StoryFn => (
112+
<div
113+
className={css`
114+
min-height: 100px;
115+
`}
116+
>
117+
<StoryFn />
118+
</div>
119+
),
120+
],
121+
render: LightMode.render,
122+
parameters: {
123+
chromatic: {
124+
delay: 100,
125+
},
126+
},
127+
};

‎packages/popover/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"react-transition-group": "^4.4.5"
2727
},
2828
"devDependencies": {
29+
"@faker-js/faker": "^10.1.0",
2930
"@leafygreen-ui/button": "workspace:^",
3031
"@leafygreen-ui/palette": "workspace:^",
3132
"@lg-tools/build": "workspace:^",

0 commit comments

Comments
 (0)