Repository: ant-design/ant-design-mobile
Pull request #6045 (2023-03-17 03:14:03)

enhance(Popover): use global css variables to control font color
Another question:

in `theme-dark.less` defined  `--adm-color-text: #e6e6e6;`.

in `popover.less` defined 

```css
/* The new colors are defined here */
 &&-dark {
    --adm-color-text: #ffffff;
    color: #ffffff;
  }
```
why use white color instead of `#e6e6e6` ?

So is this by design, or is there a deviation?

github-actions[bot]: PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-6045.surge.sh

Patch:
diff --git a/.dumi/theme/builtins/preview-default/Previewer.less b/.dumi/theme/builtins/preview-default/Previewer.less
index 3959a375f..19236d4e3 100644
--- a/.dumi/theme/builtins/preview-default/Previewer.less
+++ b/.dumi/theme/builtins/preview-default/Previewer.less
@@ -254,7 +254,7 @@
     }
 
     &-tab {
-      border-top: 1px solid @c-border-inner;
+      border-top: 1px solid var(--doc-border-color);
       --title-font-size: 14px;
       .adm-tabs-header {
         border-bottom: none;
diff --git a/src/components/image-viewer/index.en.md b/src/components/image-viewer/index.en.md
index 3bb694d1a..6b27026e0 100644
--- a/src/components/image-viewer/index.en.md
+++ b/src/components/image-viewer/index.en.md
@@ -15,7 +15,7 @@ You need to click on the picture to view the details and use it with the thumbna
 | Name | Description | Type | Default |
 | --- | --- | --- | --- |
 | afterClose | Triggered when it is completely closed | `() => void` | - |
-| getContainer | To get the specified mounted HTML node, the default is `body`, if `null` returned, it would be rendered to the current node | `HTMLElement \| () => HTMLElement \| null` | `document.body` |
+| getContainer | To get the specified mounted HTML node, the default is `null` rendered to the current node | `HTMLElement \| () => HTMLElement \| null` | `null` |
 | image | The `url` of the image resource | `string` | - |
 | maxZoom | The maximum zoom ratio | `number \| 'auto'` | `3` |
 | onClose | Triggered when it is closed | `() => void` | - |
@@ -29,7 +29,7 @@ On the basis of `ImageViewer`, the following props have been added:
 | Name | Description | Type | Default |
 | --- | --- | --- | --- |
 | defaultIndex | Which picture would be displayed by default | `number` | `0` |
-| images | Url list of image resources | `string[]` | `[]` |
+| images | Url list of image resources | `string[]` | - |
 | onIndexChange | Triggered when the picture is switched | `(index: number) => void` | - |
 | renderFooter | Render extra content on footer | `(image: string, index: number) => ReactNode` | - |
 
diff --git a/src/components/image-viewer/index.zh.md b/src/components/image-viewer/index.zh.md
index 3285e4177..bdde11124 100644
--- a/src/components/image-viewer/index.zh.md
+++ b/src/components/image-viewer/index.zh.md
@@ -15,7 +15,7 @@
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | afterClose | 完全关闭后触发 | `() => void` | - |
-| getContainer | 指定挂载的 HTML 节点，默认为 `body`，如果为 `null` 的话，会渲染到当前节点 | `HTMLElement \| () => HTMLElement \| null` | `document.body` |
+| getContainer | 指定挂载的 HTML 节点，默认为 `null` 渲染到当前节点 | `HTMLElement \| () => HTMLElement \| null` | `null` |
 | image | 图片资源的 `url` | `string` | - |
 | maxZoom | 最大缩放比例 | `number \| 'auto'` | `3` |
 | onClose | 关闭时触发 | `() => void` | - |
@@ -27,7 +27,7 @@
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | defaultIndex | 默认显示第几张图片 | `number` | `0` |
-| images | 图片资源的 url 列表 | `string[]` | `[]` |
+| images | 图片资源的 url 列表 | `string[]` | - |
 | onIndexChange | 切换图片时触发 | `(index: number) => void` | - |
 | renderFooter | 渲染底部额外内容 | `(image: string, index: number) => ReactNode` | - |
 
diff --git a/src/components/popover/popover.less b/src/components/popover/popover.less
index 6ba3a1226..84aabf096 100644
--- a/src/components/popover/popover.less
+++ b/src/components/popover/popover.less
@@ -16,7 +16,7 @@
     }
   }
 
-  color: #333333;
+  color: var(--adm-color-text);
   position: absolute;
   top: 0;
   left: 0;
diff --git a/src/components/popover/popover.patch.less b/src/components/popover/popover.patch.less
index baf62966b..dda6a0f1d 100644
--- a/src/components/popover/popover.patch.less
+++ b/src/components/popover/popover.patch.less
@@ -8,6 +8,7 @@
     }
   }
   z-index: 1030;
+  color: #333333;
 
   &-inner {
     background-color: #ffffff;
diff --git a/src/components/pull-to-refresh/pull-to-refresh.tsx b/src/components/pull-to-refresh/pull-to-refresh.tsx
index 29fd24e2e..9a02691a8 100644
--- a/src/components/pull-to-refresh/pull-to-refresh.tsx
+++ b/src/components/pull-to-refresh/pull-to-refresh.tsx
@@ -72,6 +72,20 @@ export const PullToRefresh: FC<PullToRefreshProps> = p => {
     elementRef.current?.addEventListener('touchmove', () => {})
   }, [])
 
+  const reset = () => {
+    return new Promise<void>(resolve => {
+      api.start({
+        to: {
+          height: 0,
+        },
+        onResolve() {
+          setStatus('pulling')
+          resolve()
+        },
+      })
+    })
+  }
+
   async function doRefresh() {
     api.start({ height: headHeight })
     setStatus('refreshing')
@@ -79,24 +93,13 @@ export const PullToRefresh: FC<PullToRefreshProps> = p => {
       await props.onRefresh()
       setStatus('complete')
     } catch (e) {
-      api.start({
-        to: async next => {
-          await next({ height: 0 })
-          setStatus('pulling')
-        },
-      })
-
+      reset()
       throw e
     }
     if (props.completeDelay > 0) {
       await sleep(props.completeDelay)
     }
-    api.start({
-      to: async next => {
-        await next({ height: 0 })
-        setStatus('pulling')
-      },
-    })
+    reset()
   }
 
   useDrag(


Test patch:
diff --git a/src/components/pull-to-refresh/tests/pull-to-refresh.test.tsx b/src/components/pull-to-refresh/tests/pull-to-refresh.test.tsx
index abbca7ab9..584719a21 100644
--- a/src/components/pull-to-refresh/tests/pull-to-refresh.test.tsx
+++ b/src/components/pull-to-refresh/tests/pull-to-refresh.test.tsx
@@ -88,7 +88,7 @@ describe('PullToRefresh', () => {
     expect(screen.getByText('释放立即刷新')).toBeInTheDocument()
   })
 
-  test('loading and complete status should be correct', async () => {
+  test('loading, complete and reset to pulling status should be correct', async () => {
     render(<App />)
     const content = $$(`.${classPrefix}-content`)[0]
     drag(content, 200)
@@ -98,6 +98,12 @@ describe('PullToRefresh', () => {
       jest.advanceTimersByTime(1000)
     })
     expect(screen.getByText('刷新成功')).toBeInTheDocument()
+
+    await act(async () => {
+      // advance completeDelay (default 500ms)
+      jest.advanceTimersByTime(500)
+    })
+    expect(screen.getByText('下拉刷新')).toBeInTheDocument()
   })
 
   test('custom text should be correct', async () => {