Merge pull request #6508 from weseek/feat/modularize-page-list-scss

feat: read _page_list.scss from module scss files instead of style-app.scss

packages/app/src/components/Admin/UserGroupDetail/UserGroupDetailPage.module.scss

@@ -0,0 +1 @@
+@use '~/styles/molecules/page_list';

packages/app/src/components/Admin/UserGroupDetail/UserGroupDetailPage.tsx

@@ -21,6 +21,7 @@ import {
   useSWRxSelectableParentUserGroups, useSWRxSelectableChildUserGroups, useSWRxAncestorUserGroups,
 } from '~/stores/user-group';
 
+import styles from './UserGroupDetailPage.module.scss';
 
 const UserGroupPageList = dynamic(() => import('./UserGroupPageList'), { ssr: false });
 const UserGroupUserTable = dynamic(() => import('./UserGroupUserTable'), { ssr: false });
@@ -412,7 +413,7 @@ const UserGroupDetailPage = (props: Props): JSX.Element => {
       />
 
       <h2 className="admin-setting-header mt-4">{t('Page')}</h2>
-      <div className="page-list">
+      <div className={`page-list ${styles['page-list']}`}>
         <UserGroupPageList userGroupId={currentUserGroupId} relatedPages={userGroupPages} />
       </div>
     </div>

packages/app/src/components/IdenticalPathPage.module.scss

@@ -1,4 +1,5 @@
 @use '~/styles/molecules/page-accessories-control';
+@use '~/styles/molecules/page_list';
 
 .grw-page-accessories-control :global {
   @extend %grw-page-accessories-control;

packages/app/src/components/IdenticalPathPage.tsx

@@ -89,7 +89,7 @@ export const IdenticalPathPage = (): JSX.Element => {
 
         <IdenticalPathAlert path={currentPath} />
 
-        <div className="page-list">
+        <div className={`page-list ${styles['page-list']}`}>
           <ul className="page-list-ul list-group list-group-flush">
             {injectedPages.map((pageWithMeta) => {
               const pageId = pageWithMeta.data._id;

packages/app/src/components/PageList/PageList.module.scss

@@ -0,0 +1 @@
+@use '~/styles/molecules/page_list';

packages/app/src/components/PageList/PageList.tsx

@@ -9,6 +9,7 @@ import { ForceHideMenuItems } from '../Common/Dropdown/PageItemControl';
 
 import { PageListItemL } from './PageListItemL';
 
+import styles from './PageList.module.scss';
 
 type Props<M extends IPageInfoForEntity> = {
   pages: IPageWithMeta<M>[],
@@ -54,7 +55,7 @@ const PageList = (props: Props<IPageInfoForEntity>): JSX.Element => {
   }
 
   return (
-    <div className="page-list">
+    <div className={`page-list ${styles['page-list']}`}>
       <ul className="page-list-ul list-group list-group-flush">
         {pageList}
       </ul>

packages/app/src/components/SearchPage2/SearchPageBase.module.scss

@@ -0,0 +1 @@
+@use '~/styles/molecules/page_list';

packages/app/src/components/SearchPage2/SearchPageBase.tsx

@@ -16,6 +16,7 @@ import { usePageTreeTermManager } from '~/stores/page-listing';
 import { ForceHideMenuItems } from '../Common/Dropdown/PageItemControl';
 import { SearchResultList } from '../SearchPage/SearchResultList';
 
+import styles from './SearchPageBase.module.scss';
 
 // https://regex101.com/r/brrkBu/1
 const highlightKeywordsSplitter = new RegExp('"[^"]+"|[^\u{20}\u{3000}]+', 'ug');
@@ -176,7 +177,7 @@ const SearchPageBaseSubstance: ForwardRefRenderFunction<ISelectableAll & IReturn
                 </div>
 
                 { pages.length > 0 && (
-                  <div className="page-list px-md-4">
+                  <div className={`page-list ${styles['page-list']} px-md-4`}>
                     <SearchResultList
                       ref={searchResultListRef}
                       pages={pages}

packages/app/src/pages/[[...path]].page.module.scss

@@ -0,0 +1 @@
+@use '~/styles/molecules/page_list';

packages/app/src/pages/[[...path]].page.tsx

@@ -70,6 +70,7 @@ import {
 } from './utils/commons';
 // import { useCurrentPageSWR } from '../stores/page';
 
+import styles from './[[...path]].page.module.scss';
 
 const NotCreatablePage = dynamic(() => import('../components/NotCreatablePage').then(mod => mod.NotCreatablePage), { ssr: false });
 const ForbiddenPage = dynamic(() => import('../components/ForbiddenPage'), { ssr: false });
@@ -346,7 +347,7 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
                     <i style={{ fontSize: '1.3em' }} className="fa fa-fw fa-bookmark-o"></i>
                     Bookmarks
                   </h2>
-                  <div id="user-bookmark-list" className="page-list">
+                  <div id="user-bookmark-list" className={`page-list ${styles['page-list']}`}>
                     {/* TODO: No need page-list-container class ? */}
                     <div className="page-list-container">
                       {/* <BookmarkList userId={pageContainer.state.creator._id} /> */}
@@ -360,7 +361,7 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
                     </i>
                     Recently Created
                   </h2>
-                  <div id="user-created-list" className="page-list">
+                  <div id="user-created-list" className={`page-list ${styles['page-list']}`}>
                     {/* TODO: No need page-list-container class ? */}
                     <div className="page-list-container">
                       {/* <RecentCreated userId={pageContainer.state.creator._id} /> */}

packages/app/src/styles/_page_list.scss → packages/app/src/styles/molecules/_page_list.scss

@@ -1,11 +1,6 @@
-@use './bootstrap/variables' as var;
-
-body .page-list {
-  .page-list-container {
-    font-size: 15px;
-    line-height: 1.6em;
-  }
+@use '../bootstrap/variables' as var;
 
+.page-list :global {
   .btn-page-item-control {
     width: 20px;
     height: 20px;

packages/app/src/styles/style-next.scss

@@ -55,7 +55,6 @@
 // @import 'old-ios';
 @import 'on-edit';
 // @import 'page-duplicate-modal';
-@import 'page_list';
 
 // @import 'page-path';
 // @import 'page-tree';

packages/plugin-lsx/src/components/LsxPageList/LsxListView.jsx

@@ -7,6 +7,8 @@ import { LsxContext } from '../lsx-context';
 
 import { LsxPage } from './LsxPage';
 
+import styles from './LsxListView.module.scss';
+
 export class LsxListView extends React.Component {
 
   render() {
@@ -35,7 +37,7 @@ export class LsxListView extends React.Component {
     }
 
     return (
-      <div className="page-list lsx">
+      <div className={`page-list ${styles['page-list']} lsx`}>
         <ul className="page-list-ul">
           {listView}
         </ul>

packages/plugin-lsx/src/components/LsxPageList/LsxListView.module.scss

@@ -0,0 +1 @@
+@use '~/styles/molecules/page_list';