[terra-popup] Enabled close button in Popup (#2158)

Co-authored-by: Avijit Das <avijit.das@cerner.com>
Co-authored-by: saket2403 <saket.bajaj1998@gmail.com>

CONTRIBUTORS.md

@@ -52,6 +52,7 @@ Cerner Corporation
 - Aaron Johnson [@zxeleven]
 - Serhii Pavlov [@sPavl0v]
 - Dmytro Smoliakov [@user099]
+- Avijit Das [@adavijit]
 
 [@tbiethman]: https://github.com/tbiethman
 [@mjhenkes]: https://github.com/mjhenkes
@@ -105,3 +106,4 @@ Cerner Corporation
 [@zxeleven]: https://github.com/zxeleven
 [@sPavl0v]: https://github.com/sPavl0v
 [@user099]: https://github.com/user099
+[@adavijit]: https://github.com/adavijit

packages/terra-application-links/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * `isHeaderDisabled` to hide header from popup.
+
 ## 6.84.0 - (May 14, 2024)
 
 * Changed

packages/terra-application-links/src/tabs/_TabMenu.jsx

@@ -131,6 +131,7 @@ class TabMenu extends React.Component {
           targetRef={this.getTargetRef}
           isOpen={isOpen}
           isArrowDisplayed
+          isHeaderDisabled
         >
           <TabMenuList title={this.props.intl.formatMessage({ id: 'Terra.application.tabs.moreMenuHeaderTitle' })}>
             {React.Children.map(children, child => React.cloneElement(child, extraChildProps))}

packages/terra-application-navigation/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * `isHeaderDisabled` to hide header from popup.
+
 ## 1.85.0 - (May 14, 2024)
 
 * Changed

packages/terra-application-navigation/src/extensions/_Extensions.jsx

@@ -114,6 +114,7 @@ const Extensions = ({
         targetRef={() => extensionRollupRef.current}
         onRequestClose={() => setPopupIsOpen(false)}
         isContentFocusDisabled
+        isHeaderDisabled
       >
         <PopupMenu
           title={intl.formatMessage({ id: 'Terra.applicationNavigation.extensions.rollupMenuHeaderTitle' })}

packages/terra-application-navigation/src/tabs/_Tabs.jsx

@@ -273,6 +273,7 @@ class Tabs extends React.Component {
         isOpen
         isArrowDisplayed
         isContentFocusDisabled
+        isHeaderDisabled
       >
         <PopupMenu
           title={intl.formatMessage({ id: 'Terra.applicationNavigation.tabs.rollupMenuHeaderTitle' })}

packages/terra-application-navigation/tests/jest/__snapshots__/ApplicationNavigation.test.jsx.snap

@@ -246,6 +246,7 @@ exports[`ApplicationNavigation correctly applies the theme context className 1`]
         isArrowDisplayed={true}
         isContentFocusDisabled={true}
         isHeaderDisabled={true}
+        isMenu={false}
         isOpen={false}
         onRequestClose={[Function]}
         popupContentRole="dialog"
@@ -313,6 +314,7 @@ exports[`ApplicationNavigation should render default element 1`] = `
     isArrowDisplayed={true}
     isContentFocusDisabled={true}
     isHeaderDisabled={true}
+    isMenu={false}
     isOpen={false}
     onRequestClose={[Function]}
     popupContentRole="dialog"
@@ -450,6 +452,7 @@ exports[`ApplicationNavigation should render with prop data at large breakpoint
     isArrowDisplayed={true}
     isContentFocusDisabled={true}
     isHeaderDisabled={true}
+    isMenu={false}
     isOpen={false}
     onRequestClose={[Function]}
     popupContentRole="dialog"
@@ -679,6 +682,7 @@ exports[`ApplicationNavigation should render with prop data at medium breakpoint
     isArrowDisplayed={true}
     isContentFocusDisabled={true}
     isHeaderDisabled={true}
+    isMenu={false}
     isOpen={false}
     onRequestClose={[Function]}
     popupContentRole="dialog"

packages/terra-application-navigation/tests/jest/extensions/__snapshots__/Extensions.test.jsx.snap

@@ -16,7 +16,8 @@ exports[`Extensions should render default element 1`] = `
     contentWidth="320"
     isArrowDisplayed={true}
     isContentFocusDisabled={true}
-    isHeaderDisabled={false}
+    isHeaderDisabled={true}
+    isMenu={false}
     isOpen={false}
     onRequestClose={[Function]}
     popupContentRole="dialog"
@@ -62,7 +63,8 @@ exports[`Extensions should render prop data 1`] = `
     contentWidth="320"
     isArrowDisplayed={true}
     isContentFocusDisabled={true}
-    isHeaderDisabled={false}
+    isHeaderDisabled={true}
+    isMenu={false}
     isOpen={false}
     onRequestClose={[Function]}
     popupContentRole="dialog"

packages/terra-application-navigation/tests/jest/header/__snapshots__/CompactHeader.test.jsx.snap

@@ -640,7 +640,8 @@ exports[`CompactHeader should render with function callbacks 1`] = `
               contentWidth="320"
               isArrowDisplayed={true}
               isContentFocusDisabled={true}
-              isHeaderDisabled={false}
+              isHeaderDisabled={true}
+              isMenu={false}
               isOpen={false}
               onRequestClose={[Function]}
               popupContentRole="dialog"
@@ -1030,7 +1031,8 @@ exports[`CompactHeader should render with ids for navigation and extension items
               contentWidth="320"
               isArrowDisplayed={true}
               isContentFocusDisabled={true}
-              isHeaderDisabled={false}
+              isHeaderDisabled={true}
+              isMenu={false}
               isOpen={false}
               onRequestClose={[Function]}
               popupContentRole="dialog"

packages/terra-application-navigation/tests/jest/header/__snapshots__/Header.test.jsx.snap

@@ -912,7 +912,8 @@ exports[`Header should render with function callbacks 1`] = `
               contentWidth="320"
               isArrowDisplayed={true}
               isContentFocusDisabled={true}
-              isHeaderDisabled={false}
+              isHeaderDisabled={true}
+              isMenu={false}
               isOpen={false}
               onRequestClose={[Function]}
               popupContentRole="dialog"
@@ -1730,7 +1731,8 @@ exports[`Header should render with navigation and extension item ids 1`] = `
               contentWidth="320"
               isArrowDisplayed={true}
               isContentFocusDisabled={true}
-              isHeaderDisabled={false}
+              isHeaderDisabled={true}
+              isMenu={false}
               isOpen={false}
               onRequestClose={[Function]}
               popupContentRole="dialog"

packages/terra-framework-docs/CHANGELOG.md

@@ -10,6 +10,9 @@
 ## 1.87.0 - (May 14, 2024)
 
 * Changed
+  * Enabled `close` button in examples.
+  * Modified Button in `PopupStandard` example.
+  * Removed `ariaLabel` from `PopupStandard` example.
   * Updated `terra-slide-panel` example to use `terra-buttons`.
 
 ## 1.86.0 - (May 8, 2024)

packages/terra-framework-docs/src/terra-dev-site/doc/popup/example/PopupDocCommon.module.scss

@@ -5,16 +5,6 @@
     overflow: hidden;
     width: 200px;
   }
-
-  .popup-button {
-    display: block;
-    font-size: 1rem;
-    height: 30px;
-    max-width: 80px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
 
   .terra-popup-content {
     list-style-type: none;

packages/terra-framework-docs/src/terra-dev-site/doc/popup/example/PopupStandard.jsx

@@ -1,9 +1,6 @@
 import React, { useRef, useState } from 'react';
 import Popup from 'terra-popup';
-import classNames from 'classnames/bind';
-import styles from './PopupDocCommon.module.scss';
-
-const cx = classNames.bind(styles);
+import Button from 'terra-button';
 
 function PopupStandard() {
   const buttonElement = useRef();
@@ -35,13 +32,12 @@ function PopupStandard() {
         Using inert makes the content outside the popup inaccessible to screen readers and keyboard interactions while the popup is active, ensuring keyboard focus is trapped within the popup for better accessibility.
         <p>This example shows how to pass custom aria label for screen readers.</p>
       </div>
-      <button type="button" className={cx('popup-button')} onClick={handleButtonClick} ref={setButtonNode}>Medications</button>
+      <Button text="Medications" onClick={handleButtonClick} refCallback={setButtonNode} />
       <Popup
         isOpen={open}
         targetRef={getButtonNode}
         onRequestClose={handleRequestClose}
-        isHeaderDisabled={false}
-        ariaLabel="Press escape to close medications pop up"
+        isContentFocusDisabled
       >
         <label htmlFor="html">Medications for patient John Doe</label>
       </Popup>

packages/terra-framework-docs/src/terra-dev-site/test/pills/filter-pills/common/PillTemplate.jsx

@@ -62,6 +62,7 @@ const PillTemplate = ({
             id={pill.id}
             key={pill.id}
             metaData={{ index }}
+            showPopupHeader
           />
         ))}
       </FilterPills>

packages/terra-framework-docs/src/terra-dev-site/test/popup/BoundedNoHeaderPopup.test.jsx

@@ -61,6 +61,7 @@ class BoundedPopup extends React.Component {
           isHeaderDisabled
         >
           <BoundedNoHeaderContent />
+          <button type="button" onClick={this.handleRequestClose}>Close</button>
         </Popup>
         <button type="button" id="bounded-button" onClick={this.handleButtonClick} ref={this.setButtonNode}>
           Bounded Popup

packages/terra-framework-docs/src/terra-dev-site/test/popup/FocusTrapPopup.test.jsx

@@ -44,6 +44,7 @@ class DefaultPopup extends React.Component {
           isOpen={this.state.open}
           targetRef={this.getButtonNode}
           onRequestClose={this.handleRequestClose}
+          contentHeight="auto"
         >
           <p>this is popup content</p>
           <button id="button1" type="button">Test button 1</button>

packages/terra-menu/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added `isMenu` prop to the `Popup` component props.
+
 ## 6.97.0 - (May 14, 2024)
 
 * Changed

packages/terra-menu/src/Menu.jsx

@@ -200,6 +200,7 @@ class Menu extends React.Component {
         isHeaderDisabled
         isContentFocusDisabled
         popupContentRole={null}
+        isMenu
       >
         {slides}
       </Popup>

packages/terra-menu/tests/jest/__snapshots__/Menu.test.jsx.snap

@@ -80,6 +80,7 @@ exports[`Menu correctly applies the theme context className 1`] = `
       isArrowDisplayed={false}
       isContentFocusDisabled={true}
       isHeaderDisabled={true}
+      isMenu={true}
       isOpen={true}
       onRequestClose={[MockFunction]}
       popupContentRole={null}
@@ -288,6 +289,7 @@ exports[`Menu correctly applies the theme context className 1`] = `
               isFocusedDisabled={true}
               isHeaderDisabled={true}
               isHeightAutomatic={true}
+              isMenu={true}
               isWidthAutomatic={false}
               onContentResize={[Function]}
               onRequestClose={[Function]}
@@ -329,7 +331,6 @@ exports[`Menu correctly applies the theme context className 1`] = `
                     refCallback={[Function]}
                     role={null}
                     stopPropagation={false}
-                    tabIndex={null}
                   >
                     <HookshotContent
                       className="content orion-fusion-theme"
@@ -353,15 +354,13 @@ exports[`Menu correctly applies the theme context className 1`] = `
                       refCallback={[Function]}
                       role={null}
                       stopPropagation={false}
-                      tabIndex={null}
                     >
                       <div
                         className="content content orion-fusion-theme fixed-position"
                         data-terra-popup-content={true}
                         onFocus={[Function]}
                         onKeyDown={[Function]}
                         role={null}
-                        tabIndex={null}
                       >
                         <div
                           className="inner"

packages/terra-pills/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Adjusted contentWidth to manage popups to have a header with close button.
+
 ## 1.27.0 - (May 14, 2024)
 
 * Changed

packages/terra-pills/src/subcomponents/_Pill.jsx

@@ -207,7 +207,6 @@ const Pill = (props) => {
       targetRef={getPillRef}
       onRequestClose={handleOnRequestClose}
       contentHeight="auto"
-      contentWidth="auto"
     >
       <div className={cx(['popup-content-pill-label', theme.className])}>
         {labelCategory
@@ -296,5 +295,4 @@ const Pill = (props) => {
 };
 
 Pill.propTypes = propTypes;
-
 export default injectIntl(Pill);

packages/terra-popup/CHANGELOG.md

@@ -1,10 +1,10 @@
 # Changelog
 
-* Changed
-  * Changed `targetRef` to an optional prop.
-
 ## Unreleased
 
+* Changed
+  * Enabled `close` button in popup by default.
+
 ## 6.83.0 - (May 14, 2024)
 
 * Changed

packages/terra-popup/src/Popup.jsx

@@ -38,7 +38,7 @@ const propTypes = {
   /**
    * Target element for the popup to anchor to.
    */
-  targetRef: PropTypes.func,
+  targetRef: PropTypes.func.isRequired,
   /**
    * Bounding container for the popup, will use window if no value provided.
    */
@@ -105,6 +105,10 @@ const propTypes = {
    * Callback function to handle click events on the popup.
    */
   onClick: PropTypes.func,
+  /**
+   * To determine if menu is opened inside the popup.
+   */
+  isMenu: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -121,6 +125,7 @@ const defaultProps = {
   isHeaderDisabled: false,
   isOpen: false,
   popupContentRole: 'dialog',
+  isMenu: false,
 };
 
 class Popup extends React.Component {
@@ -216,7 +221,7 @@ class Popup extends React.Component {
     }
   }
 
-  createPopupContent(boundingFrame, showArrow, hookshotPostionFixed) {
+  createPopupContent(boundingFrame, showArrow, hookshotPostionFixed, isMenu) {
     const boundsProps = {
       contentHeight: PopupHeights[this.props.contentHeight] || PopupHeights['80'],
       contentWidth: PopupWidths[this.props.contentWidth] || PopupWidths['240'],
@@ -257,6 +262,7 @@ class Popup extends React.Component {
         isFocusedDisabled={this.props.isContentFocusDisabled}
         onClick={this.props.onClick}
         hookshotPostionFixed={hookshotPostionFixed}
+        isMenu={isMenu}
       >
         {this.props.children}
       </PopupContent>
@@ -282,6 +288,7 @@ class Popup extends React.Component {
       onRequestClose,
       targetRef,
       targetAttachment,
+      isMenu,
       ...customProps
     } = this.props;
     /* eslint-enable no-unused-vars */
@@ -304,7 +311,7 @@ class Popup extends React.Component {
       cOffset = PopupUtils.getContentOffset(cAttachment, tAttachment, this.props.targetRef(), PopupArrow.Opts.arrowSize, cornerSize);
     }
 
-    const hookshotContent = this.createPopupContent(boundingRef ? boundingRef() : undefined, showArrow, customProps.hookshotPostionFixed);
+    const hookshotContent = this.createPopupContent(boundingRef ? boundingRef() : undefined, showArrow, customProps.hookshotPostionFixed, isMenu);
 
     return (
       <React.Fragment>