Merge pull request #8033 from weseek/support/129246-add-grid-utilities

support: Add grid utilities

apps/app/src/components/Admin/AuditLog/DateRangePicker.tsx

@@ -18,11 +18,9 @@ const CustomInput = forwardRef<HTMLInputElement, CustomInputProps>((props: Custo
 
   return (
     <div className="input-group admin-audit-log">
-      <div>
-        <span className="input-group-text">
-          <i className="fa fa-fw fa-calendar" />
-        </span>
-      </div>
+      <span className="input-group-text">
+        <i className="fa fa-fw fa-calendar" />
+      </span>
       <input
         ref={ref}
         type="text"
@@ -62,7 +60,7 @@ export const DateRangePicker: FC<DateRangePickerProps> = (props: DateRangePicker
   }, [onChange]);
 
   return (
-    <div className="btn-group me-2">
+    <div className="me-2">
       <DatePicker
         selectsRange
         startDate={startDate}

apps/app/src/components/Admin/AuditLog/SearchUsernameTypeahead.tsx

@@ -110,11 +110,9 @@ const SearchUsernameTypeaheadSubstance: ForwardRefRenderFunction<IClearable, Pro
 
   return (
     <div className="input-group me-2">
-      <div>
-        <span className="input-group-text">
-          <i className="icon-people" />
-        </span>
-      </div>
+      <span className="input-group-text">
+        <i className="icon-people" />
+      </span>
       <AsyncTypeahead
         ref={typeaheadRef}
         id="search-username-typeahead-asynctypeahead"

apps/app/src/components/Admin/AuditLogManagement.tsx

@@ -172,28 +172,36 @@ export const AuditLogManagement: FC = () => {
         <AuditLogSettings />
       ) : (
         <>
-          <div className="mb-3">
-            <SearchUsernameTypeahead
-              ref={typeaheadRef}
-              onChange={setUsernamesHandler}
-            />
+          <div className="row row-cols-lg-auto mb-3 g-3">
+            <div className="col-12">
+              <SearchUsernameTypeahead
+                ref={typeaheadRef}
+                onChange={setUsernamesHandler}
+              />
+            </div>
 
-            <DateRangePicker
-              startDate={startDate}
-              endDate={endDate}
-              onChange={datePickerChangedHandler}
-            />
+            <div className="col-12">
+              <DateRangePicker
+                startDate={startDate}
+                endDate={endDate}
+                onChange={datePickerChangedHandler}
+              />
+            </div>
 
-            <SelectActionDropdown
-              actionMap={actionMap}
-              availableActions={auditLogAvailableActionsData || []}
-              onChangeAction={actionCheckboxChangedHandler}
-              onChangeMultipleAction={multipleActionCheckboxChangedHandler}
-            />
+            <div className="col-12">
+              <SelectActionDropdown
+                actionMap={actionMap}
+                availableActions={auditLogAvailableActionsData || []}
+                onChangeAction={actionCheckboxChangedHandler}
+                onChangeMultipleAction={multipleActionCheckboxChangedHandler}
+              />
+            </div>
 
-            <button type="button" className="btn btn-link" onClick={clearButtonPushedHandler}>
-              {t('admin:audit_log_management.clear')}
-            </button>
+            <div className="col-12">
+              <button type="button" className="btn btn-link" onClick={clearButtonPushedHandler}>
+                {t('admin:audit_log_management.clear')}
+              </button>
+            </div>
           </div>
 
           <p

apps/app/src/components/Admin/G2GDataTransferExportForm.tsx

@@ -199,13 +199,13 @@ const G2GDataTransferExportForm = (props: Props): JSX.Element => {
 
   return (
     <>
-      <form className="mt-3">
-        <div>
+      <form className="mt-3 row row-cols-lg-auto g-3 align-items-center">
+        <div className="col-12">
           <button type="button" className="btn btn-sm btn-outline-secondary me-2" onClick={checkAll}>
             <i className="fa fa-check-square-o"></i> {t('admin:export_management.check_all')}
           </button>
         </div>
-        <div>
+        <div className="col-12">
           <button type="button" className="btn btn-sm btn-outline-secondary me-2" onClick={uncheckAll}>
             <i className="fa fa-square-o"></i> {t('admin:export_management.uncheck_all')}
           </button>

apps/app/src/components/Admin/ImportData/GrowiArchive/ImportForm.jsx

@@ -446,13 +446,13 @@ class ImportForm extends React.Component {
 
     return (
       <>
-        <form>
-          <div>
+        <form className="row row-cols-lg-auto g-3 align-items-center">
+          <div className="col-12">
             <button type="button" className="btn btn-sm btn-outline-secondary me-2" onClick={this.checkAll}>
               <i className="fa fa-check-square-o"></i> {t('admin:export_management.check_all')}
             </button>
           </div>
-          <div>
+          <div className="col-12">
             <button type="button" className="btn btn-sm btn-outline-secondary me-2" onClick={this.uncheckAll}>
               <i className="fa fa-square-o"></i> {t('admin:export_management.uncheck_all')}
             </button>

apps/app/src/styles/_editor.scss

@@ -117,17 +117,6 @@
 
     .grw-taglabels-container {
       margin-bottom: 0;
-
-      // TODO: .form-inline dropped in bootstrap v5
-      // https://redmine.weseek.co.jp/issues/128307
-      // To scroll tags horizontally
-      .grw-tag-labels.form-inline {
-        flex-flow: row nowrap;
-        width: 100%;
-        overflow-x: auto;
-        overflow-y: hidden;
-        scrollbar-width: thin;
-      }
     }
   }