Merge branch 'dev/7.0.x' into support/128306-129223-utilities

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

@@ -3,6 +3,9 @@ import React, { useState } from 'react';
 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,12 +474,14 @@ 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">
                             <h2 className="mb-0">
                               <button
-                                className="btn btn-link btn-block text-start"
+                                className="btn btn-link text-start"
                                 type="button"
                                 onClick={() => this.setState({ isHelpOpened: !this.state.isHelpOpened })}
                                 aria-expanded="true"

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>

apps/app/src/components/CustomNavigation/CustomNav.tsx

@@ -49,9 +49,9 @@ export const CustomNavDropdown = (props: CustomNavDropdownProps): JSX.Element =>
   }, [onNavSelected]);
 
   return (
-    <div className="grw-custom-nav-dropdown btn-group btn-block">
+    <div className="grw-custom-nav-dropdown btn-group">
       <button
-        className="btn btn-outline-primary btn-lg btn-block dropdown-toggle text-end"
+        className="btn btn-outline-primary btn-lg dropdown-toggle text-end"
         type="button"
         data-toggle="dropdown"
         aria-haspopup="true"

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

@@ -104,7 +104,7 @@ export const Cheatsheet = (): JSX.Element => {
         {renderCheetSheetElm(imageStr)}
 
         <hr />
-        <a href="/Sandbox" className="btn btn-info btn-block" target="_blank">
+        <a href="/Sandbox" className="btn btn-info" target="_blank">
           <i className="icon-share-alt" /> {t('sandbox.open_sandbox')}
         </a>
       </div>

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

@@ -340,7 +340,7 @@ const Editor: ForwardRefRenderFunction<IEditorMethods, EditorPropsType> = (props
           && (
             <button
               type="button"
-              className="btn btn-outline-secondary btn-block btn-open-dropzone"
+              className="btn btn-outline-secondary btn-open-dropzone"
               onClick={addAttachmentHandler}
             >
               <i className="icon-paper-clip" aria-hidden="true"></i>&nbsp;

apps/app/src/components/PageSideContents.tsx

@@ -45,7 +45,7 @@ export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
         {!isSharedUser && (
           <button
             type="button"
-            className="btn btn-block btn-outline-secondary grw-btn-page-accessories rounded-pill d-flex justify-content-between align-items-center"
+            className="btn btn-outline-secondary grw-btn-page-accessories rounded-pill d-flex justify-content-between align-items-center"
             onClick={() => openDescendantPageListModal(pagePath)}
             data-testid="pageListButton"
           >
@@ -68,7 +68,7 @@ export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
           <Link to="page-comments" offset={-120}>
             <button
               type="button"
-              className="btn btn-block btn-outline-secondary grw-btn-page-accessories rounded-pill d-flex justify-content-between align-items-center"
+              className="btn btn-outline-secondary grw-btn-page-accessories rounded-pill d-flex justify-content-between align-items-center"
               data-testid="page-comment-button"
             >
               <i className="icon-fw icon-bubbles grw-page-accessories-control-icon"></i>

apps/app/src/components/PasswordResetExecutionForm.tsx

@@ -78,7 +78,7 @@ const PasswordResetExecutionForm: FC = () => {
         )}
       </div>
       <div className="form-group">
-        <input name="reset-password-btn" className="btn btn-lg btn-primary btn-block" value={t('forgot_password.reset_password')} type="submit" />
+        <input name="reset-password-btn" className="btn btn-lg btn-primary" value={t('forgot_password.reset_password')} type="submit" />
       </div>
       <Link href="/login" prefetch={false}>
         <i className="icon-login me-1"></i>{t('forgot_password.sign_in_instead')}

apps/app/src/components/PasswordResetRequestForm.tsx

@@ -57,7 +57,7 @@ const PasswordResetRequestForm: FC = () => {
           </div>
           <div className="form-group">
             <button
-              className="btn btn-lg btn-primary btn-block"
+              className="btn btn-lg btn-primary"
               type="submit"
               disabled={!isMailerSetup}
             >

apps/app/src/components/Sidebar/Bookmarks/BookmarkContents.tsx

@@ -42,7 +42,7 @@ export const BookmarkContents = (): JSX.Element => {
       <div className="col-8 mb-2 ">
         <button
           type="button"
-          className="btn btn-block btn-outline-secondary rounded-pill d-flex justify-content-start align-middle"
+          className="btn btn-outline-secondary rounded-pill d-flex justify-content-start align-middle"
           onClick={onClickNewBookmarkFolder}
         >
           <FolderPlusIcon />

apps/app/src/components/Sidebar/PersonalDropdown.tsx

@@ -67,7 +67,7 @@ export const PersonalDropdown = (): JSX.Element => {
               <i className="icon-envelope icon-fw"></i><span className="grw-email-sm">{currentUser.email}</span>
             </div>
 
-            <div className="btn-group btn-block mt-2" role="group">
+            <div className="btn-group mt-2" role="group">
               <Link
                 href={pagePathUtils.userHomepagePath(currentUser)}
                 className="btn btn-sm btn-outline-secondary col"

apps/app/src/features/questionnaire/client/components/Question.tsx

@@ -21,7 +21,7 @@ const Question = ({ question, inputNamePrefix }: QuestionProps): JSX.Element =>
         </span>
       </div>
       <div className="col-6 d-flex align-items-center ps-0">
-        <div className="btn-group btn-group-toggle flex-fill grw-questionnaire-btn-group" data-toggle="buttons">
+        <div className="btn-group flex-fill grw-questionnaire-btn-group">
           <label className="btn btn-outline-primary active me-4 rounded">
             <input type="radio" name={`${inputNamePrefix + question._id}`} id={`${question._id}-noAnswer`} value="0" defaultChecked /> -
           </label>

packages/remark-lsx/src/client/components/Lsx.tsx

@@ -111,7 +111,7 @@ const LsxSubstance = React.memo(({
         <div className="col-12 col-sm-8 d-flex flex-column align-items-center lsx-load-more-container">
           <button
             type="button"
-            className="btn btn btn-block btn-outline-secondary btn-load-more"
+            className="btn btn btn-outline-secondary btn-load-more"
             onClick={() => setSize(size => size + 1)}
           >
             Load more<br />