feat: support compact theme (#22126)

* feat: support narrow theme mode * chore: rename narrow to compact * chore: height part * chore: preview compact mode * chore: to make site corrected * chore: preview site * docs: 📖 document compact theme usage * docs: tweak theme doc * docs: 📖 Add description about double css bundle size * chore: preview * chore: for preview * chore: adjust pagination * chore: compact mode done! * chore: remove useless todo * chore: fix review bug * chore: fix review bug * chore: fix card margin * chore: fix review bug * chore: fix review bug * chore: improve i18n and transition * Update site/theme/static/common.less Co-Authored-By: 偏右 <afc163@gmail.com> * chore: fix button size and description padding * chore: update snapshots * chore: add compact css bundlesize limit * chore: compact dist support Co-authored-by: afc163 <afc163@gmail.com>
ant-design · Mar 29, 2020 · dda45e4 · afc163 · May 12, 2020 · dda45e4
1 parent 56aabf3
commit dda45e4
Show file tree

Hide file tree

Showing 72 changed files with 716 additions and 376 deletions.
diff --git a/.antd-tools.config.js b/.antd-tools.config.js
@@ -3,6 +3,7 @@ const path = require('path');
 // eslint-disable-next-line import/no-extraneous-dependencies
 const packageInfo = require('./package.json');
 const darkVars = require('./scripts/dark-vars');
+const compactVars = require('./scripts/compact-vars');
 
 // We need compile additional content for antd user
 function finalizeCompile() {
@@ -49,35 +50,38 @@ function finalizeCompile() {
   }
 }
 
+function buildThemeFile(theme, vars) {
+  // Build less entry file: dist/antd.${theme}.less
+  fs.writeFileSync(
+    path.join(process.cwd(), 'dist', `antd.${theme}.less`),
+    `@import "../lib/style/${theme}.less";\n@import "../lib/style/components.less";`,
+  );
+
+  // eslint-disable-next-line
+  console.log(`Built a entry less file to dist/antd.${theme}.less`);
+
+  // Build ${theme}.js: dist/${theme}-theme.js, for less-loader
+
+  fs.writeFileSync(
+    path.join(process.cwd(), 'dist', `${theme}-theme.js`),
+    `module.exports = ${JSON.stringify(vars, null, 2)};`,
+  );
+
+  // eslint-disable-next-line
+  console.log(`Built a ${theme} theme js file to dist/${theme}-theme.js`);
+}
+
 function finalizeDist() {
   if (fs.existsSync(path.join(__dirname, './dist'))) {
     // Build less entry file: dist/antd.less
     fs.writeFileSync(
       path.join(process.cwd(), 'dist', 'antd.less'),
       '@import "../lib/style/index.less";\n@import "../lib/style/components.less";',
     );
-
     // eslint-disable-next-line
     console.log('Built a entry less file to dist/antd.less');
-
-    // Build less entry file: dist/antd.dark.less
-    fs.writeFileSync(
-      path.join(process.cwd(), 'dist', 'antd.dark.less'),
-      '@import "../lib/style/dark.less";\n@import "../lib/style/components.less";',
-    );
-
-    // eslint-disable-next-line
-    console.log('Built a entry less file to dist/antd.dark.less');
-
-    // Build dark.js: dist/dark-theme.js, for less-loader
-
-    fs.writeFileSync(
-      path.join(process.cwd(), 'dist', 'dark-theme.js'),
-      `module.exports = ${JSON.stringify(darkVars, null, 2)};`,
-    );
-
-    // eslint-disable-next-line
-    console.log('Built a dark theme js file to dist/dark-theme.js');
+    buildThemeFile('dark', darkVars);
+    buildThemeFile('compact', compactVars);
   }
 }
 

diff --git a/components/alert/style/index.less b/components/alert/style/index.less
@@ -12,7 +12,7 @@
   border-radius: @border-radius-base;
 
   &&-no-icon {
-    padding: 8px 15px;
+    padding: @alert-no-icon-padding-vertical 15px;
   }
 
   &&-closable {
@@ -71,7 +71,7 @@
 
   &-close-icon {
     position: absolute;
-    top: 8px;
+    top: @padding-xs;
     right: 16px;
     padding: 0;
     overflow: hidden;
@@ -108,7 +108,7 @@
   }
 
   &-with-description&-no-icon {
-    padding: 15px;
+    padding: @alert-with-description-no-icon-padding-vertical 15px;
   }
 
   &-with-description &-icon {

diff --git a/components/auto-complete/style/index.less b/components/auto-complete/style/index.less
@@ -12,5 +12,5 @@
   // https://github.com/ant-design/ant-design/issues/22302
   .@{select-prefix-cls}-clear {
     right: 13px;
-  } 
+  }
 }
diff --git a/components/button/style/index.less b/components/button/style/index.less
@@ -182,7 +182,7 @@
   // To ensure that a space will be placed between character and `Icon`.
   > .@{iconfont-css-prefix} + span,
   > span + .@{iconfont-css-prefix} {
-    margin-left: 8px;
+    margin-left: @margin-xs;
   }
 
   &-background-ghost {

diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less
@@ -254,6 +254,7 @@
     .button-size(
       @btn-height-sm; @btn-padding-horizontal-sm; @btn-font-size-sm; @btn-border-radius-sm
     );
+    line-height: @btn-height-sm - 2px;
   }
 }
 // primary button style
@@ -370,14 +371,23 @@
 // square button: the content only contains icon
 .btn-square(@btnClassName: btn) {
   .square(@btn-square-size);
-  .button-size(@btn-square-size; 0; @font-size-base + 2px; @btn-border-radius-base);
+  .button-size(@btn-square-size; 0; @btn-square-only-icon-size; @btn-border-radius-base);
+  & > * {
+    font-size: @btn-square-only-icon-size;
+  }
   &.@{btnClassName}-lg {
     .square(@btn-square-size-lg);
-    .button-size(@btn-square-size-lg; 0; @btn-font-size-lg + 2px; @btn-border-radius-base);
+    .button-size(@btn-square-size-lg; 0; @btn-square-only-icon-size-lg; @btn-border-radius-base);
+    & > * {
+      font-size: @btn-square-only-icon-size-lg;
+    }
   }
   &.@{btnClassName}-sm {
     .square(@btn-square-size-sm);
-    .button-size(@btn-square-size-sm; 0; @font-size-base; @btn-border-radius-base);
+    .button-size(@btn-square-size-sm; 0; @btn-square-only-icon-size-sm; @btn-border-radius-base);
+    & > * {
+      font-size: @btn-square-only-icon-size-sm;
+    }
   }
 }
 // circle button: the content only contains icon

diff --git a/components/card/style/index.less b/components/card/style/index.less
@@ -2,7 +2,6 @@
 @import '../../style/mixins/index';
 
 @card-prefix-cls: ~'@{ant-prefix}-card';
-@card-head-height: 48px;
 @card-hoverable-hover-border: transparent;
 @card-action-icon-size: 16px;
 
@@ -39,7 +38,7 @@
     padding: 0 @card-padding-base;
     color: @card-head-color;
     font-weight: 500;
-    font-size: @font-size-lg;
+    font-size: @card-head-font-size;
     background: @card-head-background;
     border-bottom: @border-width-base @border-style-base @border-color-split;
     border-radius: @card-radius @card-radius 0 0;
@@ -61,7 +60,7 @@
 
     .@{ant-prefix}-tabs {
       clear: both;
-      margin-bottom: -17px;
+      margin-bottom: @card-head-tabs-margin-bottom;
       color: @text-color;
       font-weight: normal;
       font-size: @font-size-base;
@@ -154,7 +153,7 @@
 
     & > li {
       float: left;
-      margin: 12px 0;
+      margin: @card-actions-li-margin;
       color: @text-color-secondary;
       text-align: center;
 
@@ -236,7 +235,7 @@
     &-detail {
       overflow: hidden;
       > div:not(:last-child) {
-        margin-bottom: 8px;
+        margin-bottom: @margin-xs;
       }
     }
 

diff --git a/components/card/style/size.less b/components/card/style/size.less
@@ -1,7 +1,4 @@
-@card-head-height-sm: 36px;
-@card-padding-base-sm: @card-padding-base / 2;
-@card-head-padding-sm: @card-head-padding / 2;
-@card-head-font-size-sm: @font-size-base;
+@import './index';
 
 .@{card-prefix-cls}-small {
   > .@{card-prefix-cls}-head {

diff --git a/components/collapse/demo/basic.md b/components/collapse/demo/basic.md
@@ -45,7 +45,7 @@ ReactDOM.render(
 ```
 
 <style>
-p {
+[data-theme="compact"] p, p {
   margin: 0;
 }
 </style>
diff --git a/components/collapse/demo/custom.md b/components/collapse/demo/custom.md
@@ -47,6 +47,7 @@ ReactDOM.render(
 ```
 
 ```css
+[data-theme='compact'] .site-collapse-custom-collapse .site-collapse-custom-panel,
 .site-collapse-custom-collapse .site-collapse-custom-panel {
   background: #f7f7f7;
   border-radius: 2px;

diff --git a/components/comment/style/index.less b/components/comment/style/index.less
@@ -15,7 +15,7 @@
   &-avatar {
     position: relative;
     flex-shrink: 0;
-    margin-right: 12px;
+    margin-right: @margin-sm;
     cursor: pointer;
 
     img {
@@ -36,11 +36,11 @@
       display: flex;
       flex-wrap: wrap;
       justify-content: flex-start;
-      margin-bottom: 4px;
+      margin-bottom: @margin-xss;
       font-size: @comment-font-size-base;
       & > a,
       & > span {
-        padding-right: 8px;
+        padding-right: @padding-xs;
         font-size: @comment-font-size-sm;
         line-height: 18px;
       }
@@ -65,12 +65,14 @@
     }
 
     &-detail p {
+      margin-bottom: @comment-content-detail-p-margin-bottom;
       white-space: pre-wrap;
     }
   }
 
   &-actions {
-    margin-top: 12px;
+    margin-top: @comment-actions-margin-top;
+    margin-bottom: @comment-actions-margin-bottom;
     padding-left: 0;
 
     > li {

diff --git a/components/date-picker/style/index.less b/components/date-picker/style/index.less
@@ -9,8 +9,8 @@
 .picker-padding(@input-height, @font-size, @padding-horizontal) {
   // font height probably 22.0001， So use floor better
   @font-height: floor(@font-size * @line-height-base) + 2;
-  @padding-top: (@input-height - @font-height) / 2;
-  @padding-bottom: @input-height - @font-height - @padding-top;
+  @padding-top: max((@input-height - @font-height) / 2, 0);
+  @padding-bottom: max(@input-height - @font-height - @padding-top, 0);
   padding: @padding-top @padding-horizontal @padding-bottom;
 }
 

diff --git a/components/date-picker/style/panel.less b/components/date-picker/style/panel.less
@@ -660,11 +660,11 @@
           .@{picker-prefix-cls}-time-panel-cell-inner {
             display: block;
             width: 100%;
-            height: 32px;
+            height: @picker-time-panel-cell-height;
             margin: 0;
             padding: 0;
             color: @text-color;
-            line-height: 32px;
+            line-height: @picker-time-panel-cell-height;
             text-align: center;
             border-radius: 0;
             cursor: pointer;

diff --git a/components/descriptions/style/index.less b/components/descriptions/style/index.less
@@ -3,13 +3,9 @@
 
 @descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
 
-@descriptions-default-padding: 16px 24px;
-@descriptions-middle-padding: 12px 24px;
-@descriptions-small-padding: 8px 16px;
-
 .@{descriptions-prefix-cls} {
   &-title {
-    margin-bottom: 20px;
+    margin-bottom: @descriptions-title-margin-bottom;
     color: @heading-color;
     font-weight: bold;
     font-size: @font-size-lg;
@@ -29,7 +25,7 @@
   &-row {
     > th,
     > td {
-      padding-bottom: 16px;
+      padding-bottom: @padding-md;
     }
     &:last-child {
       border-bottom: none;
@@ -81,7 +77,7 @@
     .@{descriptions-prefix-cls}-row {
       > th,
       > td {
-        padding-bottom: 12px;
+        padding-bottom: @padding-sm;
       }
     }
   }
@@ -90,7 +86,7 @@
     .@{descriptions-prefix-cls}-row {
       > th,
       > td {
-        padding-bottom: 8px;
+        padding-bottom: @padding-xs;
       }
     }
   }

diff --git a/components/drawer/demo/basic-right.md b/components/drawer/demo/basic-right.md
@@ -55,3 +55,9 @@ class App extends React.Component {
 
 ReactDOM.render(<App />, mountNode);
 ```
+
+```css
+[data-theme='compact'] .ant-drawer-body p {
+  margin-bottom: 0px;
+}
+```
diff --git a/components/drawer/style/drawer.less b/components/drawer/style/drawer.less
@@ -157,14 +157,14 @@
     right: 0;
     z-index: @zindex-popup-close;
     display: block;
-    width: 56px;
-    height: 56px;
+    width: @drawer-header-close-size;
+    height: @drawer-header-close-size;
     padding: 0;
     color: @text-color-secondary;
     font-weight: 700;
     font-size: @font-size-lg;
     font-style: normal;
-    line-height: 56px;
+    line-height: @drawer-header-close-size;
     text-align: center;
     text-transform: none;
     text-decoration: none;

diff --git a/components/form/demo/advanced-search.md b/components/form/demo/advanced-search.md
@@ -99,17 +99,20 @@ ReactDOM.render(
 ```
 
 ```css
+[data-theme='compact'] .ant-advanced-search-form,
 .ant-advanced-search-form {
   padding: 24px;
   background: #fbfbfb;
   border: 1px solid #d9d9d9;
   border-radius: 2px;
 }
 
+[data-theme='compact'] .ant-advanced-search-form .ant-form-item,
 .ant-advanced-search-form .ant-form-item {
   display: flex;
 }
 
+[data-theme='compact'] .ant-advanced-search-form .ant-form-item-control-wrapper,
 .ant-advanced-search-form .ant-form-item-control-wrapper {
   flex: 1;
 }

diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap
@@ -42,8 +42,7 @@ exports[`renders ./components/input/demo/addon.md correctly 1`] = `
           class="ant-input-group-addon"
         >
           <div
-            class="ant-select ant-select-single ant-select-show-arrow"
-            style="width:90px"
+            class="ant-select select-before ant-select-single ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -109,8 +108,7 @@ exports[`renders ./components/input/demo/addon.md correctly 1`] = `
           class="ant-input-group-addon"
         >
           <div
-            class="ant-select ant-select-single ant-select-show-arrow"
-            style="width:80px"
+            class="ant-select select-after ant-select-single ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"