feat(collapse): add titlePadding theme variable (#4742)

tusen-ai · May 9, 2023 · 115c80a · 115c80a
1 parent e734c36
commit 115c80a
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 2 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -21,6 +21,7 @@
 - `n-scrollbar` adds `size` prop, closes [#3896](https://github.com/tusen-ai/naive-ui/issues/3896).
 - `n-select` adds `keyboard` prop, closes [#4340](https://github.com/tusen-ai/naive-ui/issues/4340).
 - `n-data-table`'s `render-expand-icon` add `expanded` param, closes [#4439](https://github.com/tusen-ai/naive-ui/issues/4439).
+- `n-collapse` adds `titlePadding` theme variable, closes [#4728](https://github.com/tusen-ai/naive-ui/issues/4728).
 
 ### i18n
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -21,6 +21,7 @@
 - `n-scrollbar` 新增 `size` 属性，关闭 [#3896](https://github.com/tusen-ai/naive-ui/issues/3896)
 - `n-select` 新增 `keyboard` 属性，[#4340](https://github.com/tusen-ai/naive-ui/issues/4340)
 - `n-data-table` 的 `render-expand-icon` 属性新增 `expanded` 参数，关闭 [#4439](https://github.com/tusen-ai/naive-ui/issues/4439)
+- `n-collapse` 新增 `titlePadding` 主题变量，关闭 [#4728](https://github.com/tusen-ai/naive-ui/issues/4728)
 
 ### i18n
 

diff --git a/src/collapse/src/Collapse.tsx b/src/collapse/src/Collapse.tsx
@@ -196,6 +196,7 @@ export default defineComponent({
         self: {
           titleFontWeight,
           dividerColor,
+          titlePadding,
           titleTextColor,
           titleTextColorDisabled,
           textColor,
@@ -211,6 +212,7 @@ export default defineComponent({
         '--n-bezier': cubicBezierEaseInOut,
         '--n-text-color': textColor,
         '--n-divider-color': dividerColor,
+        '--n-title-padding': titlePadding,
         '--n-title-font-size': titleFontSize,
         '--n-title-text-color': titleTextColor,
         '--n-title-text-color-disabled': titleTextColorDisabled,

diff --git a/src/collapse/src/styles/index.cssr.ts b/src/collapse/src/styles/index.cssr.ts
@@ -6,6 +6,7 @@ import { fadeInHeightExpandTransition } from '../../../_styles/transitions/fade-
 // --n-bezier
 // --n-text-color
 // --n-divider-color
+// --n-title-padding
 // --n-title-font-size
 // --n-title-text-color
 // --n-title-font-weight
@@ -66,7 +67,7 @@ export default cB('collapse', 'width: 100%;', [
       align-items: center;
       transition: color .3s var(--n-bezier);
       position: relative;
-      padding: 16px 0 0 0;
+      padding: var(--n-title-padding);
       color: var(--n-title-text-color);
       cursor: pointer;
     `, [

diff --git a/src/collapse/styles/light.ts b/src/collapse/styles/light.ts
@@ -21,7 +21,8 @@ export const self = (vars: ThemeCommonVars) => {
     textColor: textColor2,
     arrowColor: textColor2,
     arrowColorDisabled: textColorDisabled,
-    itemMargin: '16px 0 0 0'
+    itemMargin: '16px 0 0 0',
+    titlePadding: '16px 0 0 0'
   }
 }