Merge pull request #8017 from weseek/support/128306-129175-bs-five-card

support: Bootstrap v5 braking changes Card

apps/app/src/components/Admin/Common/Accordion.jsx

@@ -1,7 +1,11 @@
 import React, { useState } from 'react';
-import { Collapse } from 'reactstrap';
+
 import PropTypes from 'prop-types';
+import { Collapse } from 'reactstrap';
+
 
+// TODO: use new accordion component
+// https://redmine.weseek.co.jp/issues/129222
 const Accordion = (props) => {
   const [isOpen, setIsOpen] = useState(props.isOpenDefault);
   return (

apps/app/src/components/Admin/Customize/CustomizeLayoutSetting.tsx

@@ -57,25 +57,29 @@ const CustomizeLayoutSetting = (): JSX.Element => {
           <h2 className="admin-setting-header">{t('customize_settings.layout')}</h2>
 
           <div className="d-flex justify-content-around mt-5">
-            <div id="layoutOptions" className="card-deck">
-              <div
-                className={`card customize-layout-card ${!isContainerFluid ? 'border-active' : ''}`}
-                onClick={() => setIsContainerFluid(false)}
-                role="button"
-              >
-                <img src={`/images/customize-settings/default-${resolvedTheme}.svg`} />
-                <div className="card-body text-center">
-                  {t('customize_settings.layout_options.default')}
+            <div id="layoutOptions" className="row row-cols-2">
+              <div className="col">
+                <div
+                  className={`card customize-layout-card ${!isContainerFluid ? 'border-active' : ''}`}
+                  onClick={() => setIsContainerFluid(false)}
+                  role="button"
+                >
+                  <img src={`/images/customize-settings/default-${resolvedTheme}.svg`} />
+                  <div className="card-body text-center">
+                    {t('customize_settings.layout_options.default')}
+                  </div>
                 </div>
               </div>
-              <div
-                className={`card customize-layout-card ${isContainerFluid ? 'border-active' : ''}`}
-                onClick={() => setIsContainerFluid(true)}
-                role="button"
-              >
-                <img src={`/images/customize-settings/fluid-${resolvedTheme}.svg`} />
-                <div className="card-body  text-center">
-                  {t('customize_settings.layout_options.expanded')}
+              <div className="col">
+                <div
+                  className={`card customize-layout-card ${isContainerFluid ? 'border-active' : ''}`}
+                  onClick={() => setIsContainerFluid(true)}
+                  role="button"
+                >
+                  <img src={`/images/customize-settings/fluid-${resolvedTheme}.svg`} />
+                  <div className="card-body  text-center">
+                    {t('customize_settings.layout_options.expanded')}
+                  </div>
                 </div>
               </div>
             </div>

apps/app/src/components/Admin/Customize/CustomizeSidebarSetting.tsx

@@ -42,25 +42,29 @@ const CustomizeSidebarsetting = (): JSX.Element => {
           </Card>
 
           <div className="d-flex justify-content-around mt-5">
-            <div id="layoutOptions" className="card-deck">
-              <div
-                className={`card customize-layout-card ${isSidebarDrawerMode ? 'border-active' : ''}`}
-                onClick={() => setIsSidebarDrawerMode(true)}
-                role="button"
-              >
-                <img src={drawerIconFileName} />
-                <div className="card-body text-center">
-                  Drawer Mode
+            <div id="layoutOptions" className="row row-cols-2">
+              <div className="col">
+                <div
+                  className={`card customize-layout-card ${isSidebarDrawerMode ? 'border-active' : ''}`}
+                  onClick={() => setIsSidebarDrawerMode(true)}
+                  role="button"
+                >
+                  <img src={drawerIconFileName} />
+                  <div className="card-body text-center">
+                    Drawer Mode
+                  </div>
                 </div>
               </div>
-              <div
-                className={`card customize-layout-card ${!isSidebarDrawerMode ? 'border-active' : ''}`}
-                onClick={() => setIsSidebarDrawerMode(false)}
-                role="button"
-              >
-                <img src={dockIconFileName} />
-                <div className="card-body  text-center">
-                  Dock Mode
+              <div className="col">
+                <div
+                  className={`card customize-layout-card ${!isSidebarDrawerMode ? 'border-active' : ''}`}
+                  onClick={() => setIsSidebarDrawerMode(false)}
+                  role="button"
+                >
+                  <img src={dockIconFileName} />
+                  <div className="card-body  text-center">
+                    Dock Mode
+                  </div>
                 </div>
               </div>
             </div>

apps/app/src/components/Admin/Security/SamlSecuritySettingContents.jsx

@@ -474,6 +474,8 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                           Apache Lucene - Query Parser Syntax <i className="icon-share-alt"></i>
                         </a>.
                       </p>
+                      {/* TODO: use new accordion component */}
+                      {/* https://redmine.weseek.co.jp/issues/129222 */}
                       <div className="accordion" id="accordionExample">
                         <div className="card">
                           <div className="card-header p-1">

apps/app/src/components/CreateTemplateModal.jsx

@@ -52,9 +52,13 @@ const CreateTemplateModal = (props) => {
             <code>{parentPath}</code><br />
             { t('template.modal_label.Create template under') }
           </label>
-          <div className="card-deck">
-            {renderTemplateCard('children', '_template')}
-            {renderTemplateCard('decendants', '__template')}
+          <div className="row row-cols-2">
+            <div className="col">
+              {renderTemplateCard('children', '_template')}
+            </div>
+            <div className="col">
+              {renderTemplateCard('decendants', '__template')}
+            </div>
           </div>
         </div>
       </ModalBody>