fix(theme-classic): allow nested task lists to preserve the indent (#…

…7438)

* fix(theme-classic): allow nested task lists to preserve the indent

* add Ul back

packages/docusaurus-theme-classic/src/theme/MDXComponents/Ul.tsx → packages/docusaurus-theme-classic/src/theme/MDXComponents/Ul/index.tsx

@@ -9,13 +9,15 @@ import React from 'react';
 import clsx from 'clsx';
 import type {Props} from '@theme/MDXComponents/Ul';
 
+import styles from './styles.module.css';
+
 function transformUlClassName(className?: string): string {
   return clsx(
     className,
     // This class is set globally by GitHub/MDX. We keep the global class, and
-    // add another Infima class to get list without styling
+    // add another class to get a task list without the default ul styling
     // See https://github.com/syntax-tree/mdast-util-to-hast/issues/28
-    className?.includes('contains-task-list') && 'clean-list',
+    className?.includes('contains-task-list') && styles.containsTaskList,
   );
 }
 

packages/docusaurus-theme-classic/src/theme/MDXComponents/Ul/styles.module.css

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.containsTaskList {
+  list-style: none;
+}
+
+:not(.containsTaskList > li) > .containsTaskList {
+  padding-left: 0;
+}

website/_dogfooding/_pages tests/markdownPageTests.md

@@ -189,3 +189,35 @@ This is a fragment:
 <>Hello</>
 
 It should work :)
+
+## Task list
+
+A list:
+
+- [ ] Simple
+- [x] Tasks
+- [ ] Has simple
+- [ ] Styles
+
+Another list:
+
+- Nested
+  - [ ] Tasks
+  - [ ] Should be well-formatted
+- [ ] No matter
+- [ ] How weird
+
+Can be arbitrarily nested:
+
+- Level
+  - [ ] Task
+  - [ ] Task
+  - Another level
+    - [ ] Task
+    - [ ] Task
+    - Deeper
+      - [ ] Task
+      - [ ] Task
+    - [ ] Task
+    - [ ] Task
+- [ ] Task