Skip to content

Commit be35ea3

Browse files
kmcfaulkmcfaul
committed
clean up various examples, add warn for sm OverflowMenu vertical breakpoint
1 parent 179cd4a commit be35ea3

4 files changed

Lines changed: 64 additions & 69 deletions

File tree

‎packages/react-core/src/components/OverflowMenu/OverflowMenu.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export interface OverflowMenuProps extends React.HTMLProps<HTMLDivElement> {
1212
children?: any;
1313
/** Additional classes added to the OverflowMenu. */
1414
className?: string;
15-
/** Indicates breakpoint at which to switch between expanded and collapsed states */
15+
/** Indicates breakpoint at which to switch between expanded and collapsed states. The "sm" breakpoint does not apply to vertical overflow menus. */
1616
breakpoint: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
1717
/** A container reference to base the specified breakpoint on instead of the viewport width. */
1818
breakpointReference?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
@@ -102,6 +102,12 @@ class OverflowMenu extends Component<OverflowMenuProps, OverflowMenuState> {
102102

103103
handleResizeHeight = () => {
104104
const breakpointHeight = globalHeightBreakpoints[this.props.breakpoint];
105+
if (breakpointHeight === 0) {
106+
// eslint-disable-next-line no-console
107+
console.warn('The "sm" breakpoint does not apply to vertical overflow menus.');
108+
return;
109+
}
110+
105111
if (!breakpointHeight) {
106112
// eslint-disable-next-line no-console
107113
console.error('OverflowMenu will not be visible without a valid breakpoint.');

‎packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,9 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
2727

2828
```
2929

30-
### Simple vertical (responsive)
30+
### Vertical
31+
32+
Passing `isVertical` to `OverflowMenu` will change its behavior to respond to breakpoints based on window height instead of width.
3133

3234
```ts file="./OverflowMenuSimpleVertical.tsx"
3335

@@ -63,8 +65,8 @@ You can change the container width in this example by adjusting the slider. As t
6365

6466
### Breakpoint on container height
6567

66-
By passing in the `breakpointReference` and `isVertical` properties, the overflow menu's breakpoint will be relative to the height of the reference container rather than the viewport height.
68+
By passing in the `breakpointReference` and `isVertical` properties, the overflow menu's breakpoint will be determined relative to the height of the reference container rather than the window height.
6769

68-
```ts file="./OverflowMenuBreakpointOnContainerHeight.tsx"
70+
```ts isFullscreen file="./OverflowMenuBreakpointOnContainerHeight.tsx"
6971

7072
```

‎packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainerHeight.tsx‎

Lines changed: 44 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -58,53 +58,51 @@ export const OverflowMenuBreakpointOnContainerHeight: React.FunctionComponent =
5858

5959
return (
6060
<>
61-
<div style={{ height: '100%', maxHeight: '400px' }}>
62-
<div>
63-
<span id="overflowMenu-hasBreakpointOnContainer-height-slider-label">Current container height</span>:{' '}
64-
{containerHeight}%
61+
<span id="overflowMenu-hasBreakpointOnContainer-height-slider-label">Current container height</span>:{' '}
62+
{containerHeight}%
63+
<Slider
64+
value={containerHeight}
65+
onChange={onChange}
66+
max={100}
67+
min={20}
68+
step={20}
69+
showTicks
70+
showBoundaries={false}
71+
aria-labelledby="overflowMenu-hasBreakpointOnContainer-height-slider-label"
72+
/>
73+
<div style={{ height: '100%' }}>
74+
<div ref={containerRef} id="height-breakpoint-reference-container" style={containerStyles}>
75+
<OverflowMenu breakpointReference={containerRef} breakpoint="md" isVertical>
76+
<OverflowMenuContent>
77+
<OverflowMenuItem>Item 1</OverflowMenuItem>
78+
<OverflowMenuItem>Item 2</OverflowMenuItem>
79+
<OverflowMenuGroup>
80+
<OverflowMenuItem>Item 3</OverflowMenuItem>
81+
<OverflowMenuItem>Item 4</OverflowMenuItem>
82+
<OverflowMenuItem>Item 5</OverflowMenuItem>
83+
</OverflowMenuGroup>
84+
</OverflowMenuContent>
85+
<OverflowMenuControl>
86+
<Dropdown
87+
onSelect={onSelect}
88+
toggle={(toggleRef) => (
89+
<MenuToggle
90+
ref={toggleRef}
91+
aria-label="Height breakpoint on container example overflow menu"
92+
variant="plain"
93+
onClick={onToggle}
94+
isExpanded={isOpen}
95+
icon={<EllipsisVIcon />}
96+
/>
97+
)}
98+
isOpen={isOpen}
99+
onOpenChange={(isOpen) => setIsOpen(isOpen)}
100+
>
101+
<DropdownList>{dropdownItems}</DropdownList>
102+
</Dropdown>
103+
</OverflowMenuControl>
104+
</OverflowMenu>
65105
</div>
66-
<Slider
67-
value={containerHeight}
68-
onChange={onChange}
69-
max={100}
70-
min={20}
71-
step={20}
72-
showTicks
73-
showBoundaries={false}
74-
aria-labelledby="overflowMenu-hasBreakpointOnContainer-height-slider-label"
75-
/>
76-
</div>
77-
<div ref={containerRef} id="height-breakpoint-reference-container" style={containerStyles}>
78-
<OverflowMenu breakpointReference={containerRef} breakpoint="sm" isVertical>
79-
<OverflowMenuContent>
80-
<OverflowMenuItem>Item 1</OverflowMenuItem>
81-
<OverflowMenuItem>Item 2</OverflowMenuItem>
82-
<OverflowMenuGroup>
83-
<OverflowMenuItem>Item 3</OverflowMenuItem>
84-
<OverflowMenuItem>Item 4</OverflowMenuItem>
85-
<OverflowMenuItem>Item 5</OverflowMenuItem>
86-
</OverflowMenuGroup>
87-
</OverflowMenuContent>
88-
<OverflowMenuControl>
89-
<Dropdown
90-
onSelect={onSelect}
91-
toggle={(toggleRef) => (
92-
<MenuToggle
93-
ref={toggleRef}
94-
aria-label="Height breakpoint on container example overflow menu"
95-
variant="plain"
96-
onClick={onToggle}
97-
isExpanded={isOpen}
98-
icon={<EllipsisVIcon />}
99-
/>
100-
)}
101-
isOpen={isOpen}
102-
onOpenChange={(isOpen) => setIsOpen(isOpen)}
103-
>
104-
<DropdownList>{dropdownItems}</DropdownList>
105-
</Dropdown>
106-
</OverflowMenuControl>
107-
</OverflowMenu>
108106
</div>
109107
</>
110108
);

‎packages/react-core/src/components/Toolbar/examples/ToolbarVertical.tsx‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,20 @@
1-
import { Button, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
2-
import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
3-
import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
4-
import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
1+
import { Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
52

6-
export const ToolbarGroups: React.FunctionComponent = () => (
3+
export const ToolbarVertical: React.FunctionComponent = () => (
74
<Toolbar id="toolbar-vertical" isVertical>
85
<ToolbarContent>
96
<ToolbarGroup variant="action-group-plain">
10-
<ToolbarItem>
11-
<Button variant="plain" aria-label="edit" icon={<EditIcon />} />
12-
</ToolbarItem>
13-
<ToolbarItem>
14-
<Button variant="plain" aria-label="clone" icon={<CloneIcon />} />
15-
</ToolbarItem>
16-
<ToolbarItem>
17-
<Button variant="plain" aria-label="sync" icon={<SyncIcon />} />
18-
</ToolbarItem>
7+
<ToolbarItem>Item 1</ToolbarItem>
8+
<ToolbarItem>Item 2</ToolbarItem>
9+
<ToolbarItem>Item 3</ToolbarItem>
1910
</ToolbarGroup>
2011
<ToolbarGroup variant="action-group-plain" visibilityAtHeight={{ default: 'hidden', md: 'visible' }}>
21-
<ToolbarItem>
22-
<Button variant="plain" aria-label="edit" icon={<EditIcon />} />
23-
</ToolbarItem>
12+
<ToolbarItem>Item 4 (visible above md breakpoint)</ToolbarItem>
2413
<ToolbarItem visibilityAtHeight={{ default: 'hidden', lg: 'visible' }}>
25-
<Button variant="plain" aria-label="clone" icon={<CloneIcon />} />
14+
Item 5 (visible above lg breakpoint)
2615
</ToolbarItem>
2716
<ToolbarItem visibilityAtHeight={{ default: 'hidden', lg: 'visible' }}>
28-
<Button variant="plain" aria-label="sync" icon={<SyncIcon />} />
17+
Item 6 (visible above md breakpoint)
2918
</ToolbarItem>
3019
</ToolbarGroup>
3120
</ToolbarContent>

0 commit comments

Comments
 (0)