[terra-popup] Enabled close button in Popup

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-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/PopupAttachmentBehavior.jsx

@@ -52,6 +52,7 @@ function PopupAttachmentBehavior() {
         isOpen={open}
         targetRef={getButtonNode}
         onRequestClose={handleRequestClose}
+        isHeaderDisabled={false}
       >
         <Placeholder title="Popup Content" />
       </Popup>

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

@@ -71,6 +71,7 @@ function PopupAttachment() {
         isOpen={open}
         targetRef={getButtonNode}
         onRequestClose={handleRequestClose}
+        isHeaderDisabled={false}
       >
         <Placeholder title="Popup Content" />
       </Popup>

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

@@ -48,6 +48,7 @@ function PopupBounded() {
           isOpen={open}
           onRequestClose={handleRequestClose}
           targetRef={getButtonNode}
+          isHeaderDisabled={false}
           isContentFocusDisabled
         >
           <Placeholder title="Popup Content" />

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

@@ -79,6 +79,7 @@ function PopupDimensions() {
       <div>
         <Popup
           {...contentDimensions}
+          isHeaderDisabled={false}
           classNameContent="test-content"
           isOpen={open}
           onRequestClose={handleRequestClose}

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/PopupModalContent.jsx

@@ -23,6 +23,7 @@ function ModalContainer(props) {
     <React.Fragment>
       <div className={cx('content-container')}>
         <Popup
+          isHeaderDisabled={false}
           isArrowDisplayed
           isOpen={open}
           onRequestClose={handlePopupRequestClose}

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,13 @@ 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/doc/popup/example/PopupWithArrow.jsx

@@ -59,6 +59,7 @@ function PopupArrow() {
       <Button text="Medication Links" onClick={handleButtonClick} refCallback={setButtonNode} />
       <Popup
         isOpen={open}
+        isHeaderDisabled={false}
         onRequestClose={handleRequestClose}
         targetRef={getButtonNode}
         isArrowDisplayed

packages/terra-framework-docs/src/terra-dev-site/test/compact-interactive-list/CellContent.test.jsx

@@ -74,6 +74,7 @@ const PopupWithInteractiveContent = () => {
         targetRef={getButtonNode}
         onRequestClose={handleRequestClose}
         contentHeight="auto"
+        isHeaderDisabled={false}
       >
         {/* eslint-disable-next-line react/forbid-dom-props */}
         <div style={{ padding: '1em' }}>

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 }}
+            isPopupHeaderDisabled={false}
           />
         ))}
       </FilterPills>

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

@@ -66,6 +66,7 @@ class AlignmentPopup extends React.Component {
             isOpen={this.state.open}
             onRequestClose={this.handleRequestClose}
             targetRef={this.getButtonNode}
+            isHeaderDisabled={false}
           >
             <p className={cx('popup-text')}>This popup arrow was horizontally attached.</p>
           </Popup>

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

@@ -46,6 +46,7 @@ class ArrowPopup extends React.Component {
           isOpen={this.state.open}
           onRequestClose={this.handleRequestClose}
           targetRef={this.getButtonNode}
+          isHeaderDisabled={false}
         >
           <p>this is popup content</p>
         </Popup>

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

@@ -65,6 +65,7 @@ class OffsetPopup extends React.Component {
           isOpen={this.state.open}
           onRequestClose={this.handleRequestClose}
           targetRef={this.getButtonNode}
+          isHeaderDisabled={false}
         >
           <p className={cx('popup-text')}>This popup was adjusted because the target was smaller than the arrow position allowed.</p>
         </Popup>

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

@@ -65,6 +65,7 @@ class OffsetPopup extends React.Component {
           isOpen={this.state.open}
           onRequestClose={this.handleRequestClose}
           targetRef={this.getButtonNode}
+          isHeaderDisabled={false}
         >
           <p className={cx('popup-text')}>This popup was adjusted because the target was smaller than the arrow position allowed.</p>
         </Popup>

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

@@ -66,6 +66,7 @@ class AlignmentPopup extends React.Component {
             isOpen={this.state.open}
             onRequestClose={this.handleRequestClose}
             targetRef={this.getButtonNode}
+            isHeaderDisabled={false}
           >
             <p className={cx('popup-text')}>This popup arrow has vertical attachment.</p>
           </Popup>

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

@@ -65,6 +65,7 @@ class AlignmentPopup extends React.Component {
           isOpen={this.state.open}
           onRequestClose={this.handleRequestClose}
           targetRef={this.getButtonNode}
+          isHeaderDisabled={false}
         >
           <p className={cx('popup-text')}>This popup arrow has verital-left attachment, but was adjusted to be on the screen.</p>
         </Popup>

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

@@ -65,6 +65,7 @@ class AlignmentPopup extends React.Component {
           isOpen={this.state.open}
           onRequestClose={this.handleRequestClose}
           targetRef={this.getButtonNode}
+          isHeaderDisabled={false}
         >
           <p className={cx('popup-text')}>This popup arrow has vertical-right attachment, but was adjusted to be on the screen.</p>
         </Popup>

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

@@ -56,6 +56,7 @@ class PopupExample extends React.Component {
           isOpen={this.state.open}
           targetRef={this.getButtonNode}
           onRequestClose={this.handleRequestClose}
+          isHeaderDisabled={false}
         >
           <p className={cx('popup-text')}>This is popup content with a automatic height of 400px.</p>
         </Popup>

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

@@ -45,6 +45,7 @@ class PopupExample extends React.Component {
           isOpen={this.state.open}
           targetRef={this.getButtonNode}
           onRequestClose={this.handleRequestClose}
+          isHeaderDisabled={false}
         >
           <p className={cx('popup-text')}>This is popup content with a automatic height of 400px.</p>
         </Popup>

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

@@ -56,6 +56,7 @@ class PopupExample extends React.Component {
           isOpen={this.state.open}
           targetRef={this.getButtonNode}
           onRequestClose={this.handleRequestClose}
+          isHeaderDisabled={false}
         >
           <p className={cx('popup-text')}>This is popup content with a automatic width of 400px, but is bounded by the parent width of 200px.</p>
         </Popup>

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

@@ -45,6 +45,7 @@ class PopupExample extends React.Component {
           isOpen={this.state.open}
           targetRef={this.getButtonNode}
           onRequestClose={this.handleRequestClose}
+          isHeaderDisabled={false}
         >
           <p className={cx('popup-text')}>This is popup content with a automatic width of 400px.</p>
         </Popup>

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

@@ -56,6 +56,7 @@ class BoundedPopup extends React.Component {
           isOpen={this.state.open}
           onRequestClose={this.handleRequestClose}
           targetRef={this.getButtonNode}
+          isHeaderDisabled={false}
         >
           <p className={cx('popup-text')}>This popup is bounded by height.</p>
         </Popup>

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/BoundedPopup.test.jsx

@@ -57,6 +57,7 @@ class BoundedPopup extends React.Component {
           isOpen={this.state.open}
           onRequestClose={this.handleRequestClose}
           targetRef={this.getButtonNode}
+          isHeaderDisabled={false}
         >
           <p className={cx('popup-text')}>This popup is bounded and presents a header.</p>
         </Popup>

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

@@ -57,6 +57,7 @@ class BoundedPopup extends React.Component {
           isOpen={this.state.open}
           onRequestClose={this.handleRequestClose}
           targetRef={this.getButtonNode}
+          isHeaderDisabled={false}
         >
           <p className={cx('popup-text')}>This popup is bounded by width.</p>
         </Popup>

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

@@ -44,6 +44,7 @@ class DefaultPopup extends React.Component {
           isOpen={this.state.open}
           targetRef={this.getButtonNode}
           onRequestClose={this.handleRequestClose}
+          isHeaderDisabled={false}
         >
           <p>this is popup content</p>
         </Popup>

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

@@ -73,6 +73,7 @@ class AlignmentPopup extends React.Component {
             isOpen={this.state.open}
             onRequestClose={this.handleRequestClose}
             targetRef={this.getButtonNode}
+            isHeaderDisabled={false}
           >
             <p className={cx('popup-text')}>This popup arrow has vertical attachment.</p>
           </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}
+          isHeaderDisabled={false}
         >
           <p>this is popup content</p>
           <button id="button1" type="button">Test button 1</button>

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

@@ -100,6 +100,7 @@ class PopupWithContentWidth extends Component {
             isOpen={open}
             targetRef={this.getButtonNode}
             onRequestClose={this.handleRequestClose}
+            isHeaderDisabled={false}
           >
             <p>This is a popup with custom contentWidth and contentHeight</p>
           </Popup>

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

@@ -48,6 +48,7 @@ class PopupExample extends React.Component {
           isOpen={this.state.open}
           targetRef={this.getButtonNode}
           onRequestClose={this.handleRequestClose}
+          isHeaderDisabled={false}
         >
           <TestPopupContent size={this.state.size} onClick={() => this.setState({ size: 'large' })} />
         </Popup>

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

@@ -58,6 +58,7 @@ class DimensionPopup extends React.Component {
             isOpen={this.state.open}
             onRequestClose={this.handleRequestClose}
             targetRef={this.getButtonNode}
+            isHeaderDisabled={false}
           >
             <p>This popup defaults its size.</p>
           </Popup>

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

@@ -58,6 +58,7 @@ class DimensionPopup extends React.Component {
             isOpen={this.state.open}
             onRequestClose={this.handleRequestClose}
             targetRef={this.getButtonNode}
+            isHeaderDisabled={false}
           >
             <p>This popup is 240h by 960w.</p>
           </Popup>