comment out custom close icon

apps/app/_obsolete/src/components/PageEditor/ConflictDiffModal.tsx

@@ -130,18 +130,20 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element =
 
   }, [afterResolvedHandler, close, currentPagePath, currentPathname, optionsToSave, pageId, remoteRevisionId, saveOrUpdate, setRemoteLatestPageData]);
 
-  const resizeAndCloseButtons = useMemo(() => (
-    <div className="d-flex flex-nowrap">
-      <ExpandOrContractButton
-        isWindowExpanded={isModalExpanded}
-        expandWindow={() => setIsModalExpanded(true)}
-        contractWindow={() => setIsModalExpanded(false)}
-      />
-      <button type="button" className="close text-white" onClick={close} aria-label="Close">
-        <span aria-hidden="true">&times;</span>
-      </button>
-    </div>
-  ), [isModalExpanded, close]);
+  // TODO: No longer support custom close icon in bootstrap v5
+  // https://redmine.weseek.co.jp/issues/128470
+  // const resizeAndCloseButtons = useMemo(() => (
+  //   <div className="d-flex flex-nowrap">
+  //     <ExpandOrContractButton
+  //       isWindowExpanded={isModalExpanded}
+  //       expandWindow={() => setIsModalExpanded(true)}
+  //       contractWindow={() => setIsModalExpanded(false)}
+  //     />
+  //     <button type="button" className="close text-white" onClick={close} aria-label="Close">
+  //       <span aria-hidden="true">&times;</span>
+  //     </button>
+  //   </div>
+  // ), [isModalExpanded, close]);
 
   const isOpen = props.isOpen ?? false;
 
@@ -153,7 +155,8 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element =
       className={`${isModalExpanded ? ' grw-modal-expanded' : ''}`}
       size="xl"
     >
-      <ModalHeader tag="h4" toggle={onClose} className="bg-primary text-light align-items-center py-3" close={resizeAndCloseButtons}>
+      {/* <ModalHeader tag="h4" toggle={onClose} className="bg-primary text-light align-items-center py-3" close={resizeAndCloseButtons}> */}
+      <ModalHeader tag="h4" toggle={onClose} className="bg-primary text-light align-items-center py-3">
         <i className="icon-fw icon-exclamation" />{t('modal_resolve_conflict.resolve_conflict')}
       </ModalHeader>
       <ModalBody className="mx-4 my-1">

apps/app/src/components/DescendantsPageListModal.tsx

@@ -70,18 +70,20 @@ export const DescendantsPageListModal = (): JSX.Element => {
     };
   }, [isSharedUser, status, t]);
 
-  const buttons = useMemo(() => (
-    <div className="d-flex flex-nowrap">
-      <ExpandOrContractButton
-        isWindowExpanded={isWindowExpanded}
-        expandWindow={() => setIsWindowExpanded(true)}
-        contractWindow={() => setIsWindowExpanded(false)}
-      />
-      <button type="button" className="close" onClick={close} aria-label="Close">
-        <span aria-hidden="true">&times;</span>
-      </button>
-    </div>
-  ), [close, isWindowExpanded]);
+  // TODO: No longer support custom close icon in bootstrap v5
+  // https://redmine.weseek.co.jp/issues/128470
+  // const buttons = useMemo(() => (
+  //   <div className="d-flex flex-nowrap">
+  //     <ExpandOrContractButton
+  //       isWindowExpanded={isWindowExpanded}
+  //       expandWindow={() => setIsWindowExpanded(true)}
+  //       contractWindow={() => setIsWindowExpanded(false)}
+  //     />
+  //     <button type="button" className="close" onClick={close} aria-label="Close">
+  //       <span aria-hidden="true">&times;</span>
+  //     </button>
+  //   </div>
+  // ), [close, isWindowExpanded]);
 
 
   if (status == null) {
@@ -98,7 +100,8 @@ export const DescendantsPageListModal = (): JSX.Element => {
       data-testid="descendants-page-list-modal"
       className={`grw-descendants-page-list-modal ${styles['grw-descendants-page-list-modal']} ${isWindowExpanded ? 'grw-modal-expanded' : ''} `}
     >
-      <ModalHeader className="p-0" toggle={close} close={buttons}>
+      {/* <ModalHeader className="p-0" toggle={close} close={buttons}> */}
+      <ModalHeader className="p-0" toggle={close}>
         <CustomNavTab
           activeTab={activeTab}
           navTabMapping={navTabMapping}

apps/app/src/components/PageAccessoriesModal/PageAccessoriesModal.tsx

@@ -71,18 +71,20 @@ export const PageAccessoriesModal = (): JSX.Element => {
     };
   }, [t, close, isGuestUser, isReadOnlyUser, isSharedUser, isLinkSharingDisabled]);
 
-  const buttons = useMemo(() => (
-    <div className="d-flex flex-nowrap">
-      <ExpandOrContractButton
-        isWindowExpanded={isWindowExpanded}
-        expandWindow={() => setIsWindowExpanded(true)}
-        contractWindow={() => setIsWindowExpanded(false)}
-      />
-      <button type="button" className="close" onClick={close} aria-label="Close">
-        <span aria-hidden="true">&times;</span>
-      </button>
-    </div>
-  ), [close, isWindowExpanded]);
+  // TODO: No longer support custom close icon in bootstrap v5
+  // https://redmine.weseek.co.jp/issues/128470
+  // const buttons = useMemo(() => (
+  //   <div className="d-flex flex-nowrap">
+  //     <ExpandOrContractButton
+  //       isWindowExpanded={isWindowExpanded}
+  //       expandWindow={() => setIsWindowExpanded(true)}
+  //       contractWindow={() => setIsWindowExpanded(false)}
+  //     />
+  //     <button type="button" className="close" onClick={close} aria-label="Close">
+  //       <span aria-hidden="true">&times;</span>
+  //     </button>
+  //   </div>
+  // ), [close, isWindowExpanded]);
 
   if (status == null || status.activatedContents == null) {
     return <></>;
@@ -98,7 +100,8 @@ export const PageAccessoriesModal = (): JSX.Element => {
       data-testid="page-accessories-modal"
       className={`grw-page-accessories-modal ${styles['grw-page-accessories-modal']} ${isWindowExpanded ? 'grw-modal-expanded' : ''} `}
     >
-      <ModalHeader className="p-0" toggle={close} close={buttons}>
+      {/* <ModalHeader className="p-0" toggle={close} close={buttons}> */}
+      <ModalHeader className="p-0" toggle={close}>
         <CustomNavTab
           activeTab={status.activatedContents}
           navTabMapping={navTabMapping}

apps/app/src/components/PageEditor/HandsontableModal.tsx

@@ -428,19 +428,21 @@ export const HandsontableModal = (): JSX.Element => {
     contextMenu: createCustomizedContextMenu(),
   });
 
-  const closeButton = (
-    <span>
-      {/* change order because of `float: right` by '.close' class */}
-      <button type="button" className="close" onClick={cancel} aria-label="Close">
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <ExpandOrContractButton
-        isWindowExpanded={isWindowExpanded}
-        contractWindow={contractWindow}
-        expandWindow={expandWindow}
-      />
-    </span>
-  );
+  // TODO: No longer support custom close icon in bootstrap v5
+  // https://redmine.weseek.co.jp/issues/128470
+  // const closeButton = (
+  //   <span>
+  //     {/* change order because of `float: right` by '.close' class */}
+  //     <button type="button" className="close" onClick={cancel} aria-label="Close">
+  //       <span aria-hidden="true">&times;</span>
+  //     </button>
+  //     <ExpandOrContractButton
+  //       isWindowExpanded={isWindowExpanded}
+  //       contractWindow={contractWindow}
+  //       expandWindow={expandWindow}
+  //     />
+  //   </span>
+  // );
 
   return (
     <Modal
@@ -453,7 +455,8 @@ export const HandsontableModal = (): JSX.Element => {
       className={`handsontable-modal ${isWindowExpanded && 'grw-modal-expanded'}`}
       onOpened={handleModalOpen}
     >
-      <ModalHeader tag="h4" toggle={cancel} close={closeButton} className="bg-primary text-light">
+      {/* <ModalHeader tag="h4" toggle={cancel} close={closeButton} className="bg-primary text-light"> */}
+      <ModalHeader tag="h4" toggle={cancel} className="bg-primary text-light">
         {t('handsontable_modal.title')}
       </ModalHeader>
       <ModalBody className="p-0 d-flex flex-column">