[terra-popup] Changed disabledHeader to true as default

packages/terra-framework-docs/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Enabled `close` button in examples.
+
 * Changed
   * Updated example for drill-in view under `terra-navigation-side-menu`.
 

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/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/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

@@ -45,6 +45,7 @@ class DefaultPopup extends React.Component {
           targetRef={this.getButtonNode}
           onRequestClose={this.handleRequestClose}
           contentHeight="auto"
+          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>

packages/terra-framework-docs/src/terra-dev-site/test/popup/SizeMediumPopup.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 120h by 320w.</p>
           </Popup>

packages/terra-framework-docs/src/terra-dev-site/test/popup/SizeSmallPopup.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 40h by 160w.</p>
           </Popup>

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

@@ -40,6 +40,7 @@ class ModalContent extends React.Component {
           isOpen={this.state.open}
           onRequestClose={this.handlePopupRequestClose}
           targetRef={() => document.getElementById('popup-in-modal')}
+          isHeaderDisabled={false}
         >
           <p>This is popup content</p>
           <button type="button">Test button 1</button>

packages/terra-pills/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Enabled `close` button in Popup while opening from a pill.
+
 ## 1.28.0 - (May 20, 2024)
 
 * Added

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

@@ -207,6 +207,7 @@ const Pill = (props) => {
       targetRef={getPillRef}
       onRequestClose={handleOnRequestClose}
       contentHeight="auto"
+      isHeaderDisabled={false}
     >
       <div className={cx(['popup-content-pill-label', theme.className])}>
         {labelCategory

packages/terra-popup/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Disabled `close` button in popup by default.
+
 ## 6.84.0 - (May 20, 2024)
 
 * Changed

packages/terra-popup/src/Popup.jsx

@@ -122,7 +122,7 @@ const defaultProps = {
   contentWidth: '240',
   isArrowDisplayed: false,
   isContentFocusDisabled: false,
-  isHeaderDisabled: false,
+  isHeaderDisabled: true,
   isOpen: false,
   popupContentRole: 'dialog',
   isMenu: false,

packages/terra-popup/src/_PopupContent.jsx

@@ -93,7 +93,7 @@ const defaultProps = {
   contentHeightMax: -1,
   contentWidthMax: -1,
   isFocusedDisabled: false,
-  isHeaderDisabled: false,
+  isHeaderDisabled: true,
   isHeightAutomatic: false,
   isWidthAutomatic: false,
   popupContentRole: 'dialog',

packages/terra-popup/tests/jest/PopupContent.test.jsx

@@ -9,6 +9,7 @@ describe('PopupContent', () => {
     contentWidth: 640,
     onRequestClose: jest.fn(),
     onResize: jest.fn(),
+    isHeaderDisabled: false,
   };
   const children = <div>children node(s)</div>;
 

packages/terra-popup/tests/jest/PopupDefaultExample.jsx

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