Merge pull request #7994 from weseek/support/128463-128470-replace-custom-close-icon

support: Replace ModalHeader custom close icon

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

@@ -131,7 +131,6 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element =
   }, [afterResolvedHandler, close, currentPagePath, currentPathname, optionsToSave, pageId, remoteRevisionId, saveOrUpdate, setRemoteLatestPageData]);
 
   // 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

apps/app/src/components/DescendantsPageListModal.tsx

@@ -70,21 +70,16 @@ export const DescendantsPageListModal = (): JSX.Element => {
     };
   }, [isSharedUser, status, t]);
 
-  // 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]);
-
+  const buttons = useMemo(() => (
+    <span className='me-3'>
+      <ExpandOrContractButton
+        isWindowExpanded={isWindowExpanded}
+        expandWindow={() => setIsWindowExpanded(true)}
+        contractWindow={() => setIsWindowExpanded(false)}
+      />
+      <button type="button" className="btn btn-close" onClick={close} aria-label="Close"></button>
+    </span>
+  ), [close, isWindowExpanded]);
 
   if (status == null) {
     return <></>;
@@ -100,8 +95,7 @@ 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}>
+      <ModalHeader className="p-0" toggle={close} close={buttons}>
         <CustomNavTab
           activeTab={activeTab}
           navTabMapping={navTabMapping}

apps/app/src/components/ExpandOrContractButton.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 
-
 type Props = {
   isWindowExpanded: boolean,
   contractWindow?: () => void,
@@ -25,10 +24,9 @@ const ExpandOrContractButton: FC<Props> = (props: Props) => {
   return (
     <button
       type="button"
-      className="close"
+      className={`btn ${isWindowExpanded ? 'icon-size-actual' : 'icon-size-fullscreen'}`}
       onClick={isWindowExpanded ? clickContractButtonHandler : clickExpandButtonHandler}
     >
-      <i className={`${isWindowExpanded ? 'icon-size-actual' : 'icon-size-fullscreen'}`} style={{ fontSize: '0.8em' }} aria-hidden="true"></i>
     </button>
   );
 };

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

@@ -71,20 +71,16 @@ export const PageAccessoriesModal = (): JSX.Element => {
     };
   }, [t, close, isGuestUser, isReadOnlyUser, isSharedUser, isLinkSharingDisabled]);
 
-  // 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]);
+  const buttons = useMemo(() => (
+    <span className='me-3'>
+      <ExpandOrContractButton
+        isWindowExpanded={isWindowExpanded}
+        expandWindow={() => setIsWindowExpanded(true)}
+        contractWindow={() => setIsWindowExpanded(false)}
+      />
+      <button type="button" className="btn btn-close" onClick={close} aria-label="Close"></button>
+    </span>
+  ), [close, isWindowExpanded]);
 
   if (status == null || status.activatedContents == null) {
     return <></>;
@@ -100,8 +96,7 @@ 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}>
+      <ModalHeader className="p-0" toggle={close} close={buttons}>
         <CustomNavTab
           activeTab={status.activatedContents}
           navTabMapping={navTabMapping}

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

@@ -428,21 +428,16 @@ export const HandsontableModal = (): JSX.Element => {
     contextMenu: createCustomizedContextMenu(),
   });
 
-  // 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>
-  // );
+  const closeButton = (
+    <span>
+      <ExpandOrContractButton
+        isWindowExpanded={isWindowExpanded}
+        contractWindow={contractWindow}
+        expandWindow={expandWindow}
+      />
+      <button type="button" className="btn btn-close" onClick={cancel} aria-label="Close"></button>
+    </span>
+  );
 
   return (
     <Modal
@@ -455,8 +450,7 @@ 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} className="bg-primary text-light">
+      <ModalHeader tag="h4" toggle={cancel} close={closeButton} className="bg-primary text-light">
         {t('handsontable_modal.title')}
       </ModalHeader>
       <ModalBody className="p-0 d-flex flex-column">