[terra-menu] Dynamic resizing of sub-menu

packages/terra-menu/CHANGELOG.md

@@ -3,6 +3,8 @@ Changelog
 
 Unreleased
 ----------
+### Changed
+* Removed fixedHeight logic from Menu.
 
 6.24.0 - (January 28, 2020)
 ------------------

packages/terra-menu/src/Menu.jsx

@@ -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;
     }
   }
@@ -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}

packages/terra-menu/src/_MenuContent.jsx

@@ -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.
    */
@@ -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) => {
@@ -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 */
@@ -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}>
           <List className={cx('list')} role="menu">
             {items}
           </List>

packages/terra-menu/src/terra-dev-site/test/menu/menu/SubMenu.test.jsx

@@ -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.3" key="3.3" className="TestNestedMenuContent" />,
             ]}
           />
           <Menu.Item text="Default 3" key="3" />