feat(Popup): update css vars (Tencent#3035)

* feat(Popup): update css vars * fix: fix conflict * fix: update demo * test: update snapshots
jby0107 · Aug 5, 2024 · 2223cf7 · 2223cf7
1 parent 368af43
commit 2223cf7
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 5 deletions.
diff --git a/script/generate-css-vars.js b/script/generate-css-vars.js
@@ -39,8 +39,8 @@ if (combine[COMPONENT_NAME]) {
 }
 
 // 追加到文件
-const cssVariableHeadContent = `\n\n### CSS Variables\n组件提供了下列 CSS 变量，可用于自定义样式。\n名称 | 默认值 | 描述 \n-- | -- | --\n`;
-const cssVariableHeadContentEn = `\n\n### CSS Variables\nThe component provides the following CSS variables, which can be used to customize styles.\nName | Default Value | Description \n-- | -- | --\n`;
+const cssVariableHeadContent = `\n\n### CSS Variables\n\n组件提供了下列 CSS 变量，可用于自定义样式。\n名称 | 默认值 | 描述 \n-- | -- | --\n`;
+const cssVariableHeadContentEn = `\n\n### CSS Variables\n\nThe component provides the following CSS variables, which can be used to customize styles.\nName | Default Value | Description \n-- | -- | --\n`;
 
 fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/README.md`), cssVariableHeadContent);
 fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/README.en-US.md`), cssVariableHeadContentEn);

diff --git a/src/popup/README.en-US.md b/src/popup/README.en-US.md
@@ -40,4 +40,5 @@ The component provides the following CSS variables, which can be used to customi
 Name | Default Value | Description 
 -- | -- | --
 --td-popup-bg-color | @bg-color-container | - 
---td-popup-border-radius | @radius-default | -
+--td-popup-border-radius | @radius-default | - 
+--td-popup-close-btn-color | @text-color-primary | - 
diff --git a/src/popup/README.md b/src/popup/README.md
@@ -79,4 +79,5 @@ t-class-content | 内容样式类
 名称 | 默认值 | 描述 
 -- | -- | --
 --td-popup-bg-color | @bg-color-container | - 
---td-popup-border-radius | @radius-default | -
+--td-popup-border-radius | @radius-default | - 
+--td-popup-close-btn-color | @text-color-primary | - 
diff --git a/src/popup/__test__/__snapshots__/demo.test.js.snap b/src/popup/__test__/__snapshots__/demo.test.js.snap
@@ -4,6 +4,7 @@ exports[`Popup Popup base demo works fine 1`] = `
 <base>
   <t-popup
     placement="top"
+    usingCustomNavbar="{{true}}"
     visible=""
     bind:visible-change="onVisibleChange"
   >

diff --git a/src/popup/_example/base/index.wxml b/src/popup/_example/base/index.wxml
@@ -1,4 +1,9 @@
-<t-popup visible="{{visible}}" bind:visible-change="onVisibleChange" placement="{{cur.value || 'top'}}">
+<t-popup
+  visible="{{visible}}"
+  usingCustomNavbar
+  bind:visible-change="onVisibleChange"
+  placement="{{cur.value || 'top'}}"
+>
   <view class="block block--{{cur.value}}">{{cur.text}}</view>
 </t-popup>
 

diff --git a/src/popup/popup.less b/src/popup/popup.less
@@ -7,6 +7,8 @@
 @popup-bg-color: var(--td-popup-bg-color, @bg-color-container);
 @popup-border-radius: var(--td-popup-border-radius, @radius-default);
 
+@popup-close-btn-color: var(--td-popup-close-btn-color, @text-color-primary);
+
 .@{popup} {
   position: fixed;
   z-index: 11500;
@@ -25,6 +27,7 @@
     right: 0;
     padding: 20rpx;
     line-height: 1;
+    color: @popup-close-btn-color;
   }
 
   &--top {