Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

[terra-menu] Dynamic resizing of sub-menu #992

Closed
wants to merge 11 commits into from
Closed

[terra-menu] Dynamic resizing of sub-menu #992

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
15d3aee
resizing
Dec 13, 2019
930cfa5
removed fixed height logic and menuContent calculates its height
Dec 18, 2019
49827f1
updating changelog
Dec 18, 2019
42c0620
Merge branch 'master' into terra-menu-resize-submenu
lokesh-0813 Dec 18, 2019
b912052
updating pageHeight logic
Dec 19, 2019
3a25730
Merge branch 'master' into terra-menu-resize-submenu
lokesh-0813 Jan 7, 2020
fde6e1b
fixed merge conflicts
Jan 8, 2020
9515f20
updating wdio ss and fixed typo
Jan 11, 2020
a87334b
updaint fusion ss
Jan 11, 2020
9cd8f93
Merge branch 'master' into terra-menu-resize-submenu
lokesh-0813 Jan 14, 2020
445d156
Merge branch 'master' into terra-menu-resize-submenu
lokesh-0813 Feb 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/terra-menu/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ Changelog

Unreleased
----------
### Changed
* Removed fixedHeight logic from Menu.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we update this descriptions o it's meaningful to users? Maybe something like we removed the fix height in sub-menus or we allow sub-menu's height to be determined by it's content?

### Added
* Added new WDIO screenshots

Expand Down
5 changes: 1 addition & 4 deletions packages/terra-menu/src/Menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,12 +79,10 @@ class Menu extends React.Component {

setPageDimensions(node) {
if (node) {
this.pageHeight = node.clientHeight;
if (this.props.contentWidth === 'auto') {
this.pageWidth = node.clientWidth;
}
} else {
this.pageHeight = undefined;
this.pageWidth = undefined;
}
}
Expand Down Expand Up @@ -137,10 +135,9 @@ class Menu extends React.Component {
onRequestBack={this.pop}
onRequestClose={this.props.onRequestClose}
isHidden={index !== visiblePage}
fixedHeight={this.pageHeight}
fixedWidth={this.pageWidth}
contentWidth={Popup.Opts.widths[contentWidth]}
refCallback={visiblePage === 0 ? this.setPageDimensions : null}
refCallback={this.setPageDimensions}
index={index}
boundingRef={boundingRef}
isFocused={index === visiblePage}
Expand Down
10 changes: 3 additions & 7 deletions packages/terra-menu/src/_MenuContent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,6 @@ const propTypes = {
* Indicates if menu's width has been constrained by bounding container.
*/
isWidthBounded: PropTypes.bool,
/**
* Fixed height for content.
*/
fixedHeight: PropTypes.number,
/**
* Fixed width for content.
*/
Expand Down Expand Up @@ -297,7 +293,7 @@ class MenuContent extends React.Component {
onKeyDown,
isActive,
});
// If the child has children then it is an item group, so iterate through it's children
// If the child has children then it is an item group, so iterate through it's children
} else if (item.props.children) {
const children = item.props.children ? [] : undefined;
React.Children.forEach(item.props.children, (child) => {
Expand Down Expand Up @@ -336,7 +332,7 @@ class MenuContent extends React.Component {
if (isFullScreen || isSubMenu) {
header = this.buildHeader(isFullScreen);
}
const contentHeight = this.props.isHeightBounded ? '100%' : this.props.fixedHeight;
const contentHeight = this.props.isHeightBounded && '100%';
const contentPosition = this.props.isHeightBounded ? 'relative' : 'static';
const contentWidth = this.props.isWidthBounded ? undefined : this.props.fixedWidth;
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, react/forbid-dom-props */
Expand All @@ -350,7 +346,7 @@ class MenuContent extends React.Component {
role="dialog"
onKeyDown={this.onKeyDown}
>
<ContentContainer header={header} fill={this.props.isHeightBounded || this.props.index > 0}>
<ContentContainer header={header} fill={this.props.isHeightBounded}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why was the index prop used here before ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

index > 0 would imply that it is sub-menu that is being rendered.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so how we are handling this scenario now ? after removing this ?

<List className={cx('list')} role="menu">
{items}
</List>
Expand Down
12 changes: 12 additions & 0 deletions packages/terra-menu/src/terra-dev-site/test/menu/menu/SubMenu.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,18 @@ class SubMenu extends React.Component {
className="TestNestedMenu"
subMenuItems={[
<Menu.Item text="Default 2.1" key="2.1" className="TestNestedMenuContent" />,
<Menu.Item text="Default 2.2" key="2.2" className="TestNestedMenuContent" />,
<Menu.Item text="Default 2.3" key="2.3" className="TestNestedMenuContent" />,
<Menu.Item text="Default 2.4" key="2.4" className="TestNestedMenuContent" />,
<Menu.Item text="Default 2.5" key="2.5" className="TestNestedMenuContent" />,
<Menu.Item text="Default 2.6" key="2.6" className="TestNestedMenuContent" />,
<Menu.Item text="Default 2.7" key="2.7" className="TestNestedMenuContent" />,
<Menu.Item text="Default 2.8" key="2.8" className="TestNestedMenuContent" />,
<Menu.Item text="Default 2.9" key="2.9" className="TestNestedMenuContent" />,
<Menu.Item text="Default 3.0" key="3.0" className="TestNestedMenuContent" />,
<Menu.Item text="Default 3.1" key="3.1" className="TestNestedMenuContent" />,
<Menu.Item text="Default 3.2" key="3.2" className="TestNestedMenuContent" />,
<Menu.Item text="Default 3.1" key="3.3" className="TestNestedMenuContent" />,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: It should be Default 3.3 instead of 3.1.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed here 9515f20

]}
/>
<Menu.Item text="Default 3" key="3" />
Expand Down