docs: update upgrade guide

XiaoMi · Jul 25, 2019 · 237f024 · 237f024
1 parent 5fd5b15
commit 237f024
Show file tree

Hide file tree

Showing 11 changed files with 116 additions and 123 deletions.
diff --git a/components/alert/alert.js → components/alert/Alert.js b/components/alert/alert.js → components/alert/Alert.js
diff --git a/docs/demo/pagination/section-intact.jsx b/docs/demo/pagination/section-intact.jsx
@@ -6,7 +6,7 @@ import Checkbox from '../../../components/checkbox'
 const prefix = 'pagination-intact'
 const code = `import React from 'react'
 import Grid from '@hi-ui/hiui/es/grid'
-import Checkbox from '@hi-ui/hiui/es/Checkbox'
+import Checkbox from '@hi-ui/hiui/es/checkbox'
 import Pagination from '@hi-ui/hiui/es/pagination'\n
 class Demo extends React.Component {
   constructor(props) {

diff --git a/docs/zh-CN/components/palette.mdx b/docs/zh-CN/components/palette.mdx
@@ -0,0 +1,61 @@
+# 配色主题
+
+支持的配色主题详见下表，默认为 **hiui-blue**
+
+## 使用方法
+
+通过 `ThemeContext` 使内部的组件可以通过 `props.theme` 获取到设置的主题，所以在页面根组件嵌套即可。
+
+```js
+import { ThemeContext } from '@hi-ui/hiui/es/context'
+
+ReactDOM.render(
+  <ThemeContext.Provider value="hiui-blue">
+    <App />
+  </ThemeContext.Provider>,
+  mountNode
+)
+```
+
+## 示例
+
+import DemoExample from '../../demo/theme/section-example.jsx'
+
+<DemoExample />
+
+## 支持的主题
+
+<table className="no-vertical-border" style={{ width: '480px' }}>
+  <thead>
+  <tr>
+    <th>主题</th>
+    <th>值</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td>品牌蓝</td>
+    <td>hiui-blue</td>
+  </tr>
+  <tr>
+    <td>活力橙</td>
+    <td>orange</td>
+  </tr>
+  <tr>
+    <td>橘青</td>
+    <td>cyan</td>
+  </tr>
+  <tr>
+    <td>洋红</td>
+    <td>magenta</td>
+  </tr>
+  <tr>
+    <td>薰衣草</td>
+    <td>lavender</td>
+  </tr>
+  <tr>
+    <td>天蓝</td>
+    <td>blue</td>
+  </tr>
+  </tbody>
+</table>
diff --git a/docs/zh-CN/components/template.mdx b/docs/zh-CN/components/template.mdx
diff --git a/docs/zh-CN/components/theme.mdx b/docs/zh-CN/components/theme.mdx
@@ -1,62 +1,10 @@
-# 配色主题
+# 主题
 
-支持的配色主题详见下表，默认为 **hiui-blue**
+目前有两款主题可以使用，分别是 `Classic` 和 `Genuine`，具体使用方法请看仓库 `README.md`
 
-## 使用方法
+主题链接：[GitHub](https://github.com/hiui-group/classic-theme) [NPM](https://www.npmjs.com/package/@hi-ui/classic-theme)
 
-通过 `ThemeContext` 使内部的组件可以通过 `props.theme` 获取到设置的主题，所以在页面根组件嵌套即可。
-
-```js
-import { ThemeContext } from '@hi-ui/hiui/es/context'
-
-ReactDOM.render(
-  <ThemeContext.Provider value="hiui-blue">
-    <App />
-  </ThemeContext.Provider>,
-  mountNode
-)
-```
-
-## 示例
-
-import DemoExample from '../../demo/theme/section-example.jsx'
-
-<DemoExample />
-
-## 支持的主题
-
-
-<table className="no-vertical-border" style={{ width: '480px' }}>
-  <thead>
-  <tr>
-    <th>主题</th>
-    <th>值</th>
-  </tr>
-  </thead>
-  <tbody>
-  <tr>
-    <td>品牌蓝</td>
-    <td>hiui-blue</td>
-  </tr>
-  <tr>
-    <td>活力橙</td>
-    <td>orange</td>
-  </tr>
-  <tr>
-    <td>橘青</td>
-    <td>cyan</td>
-  </tr>
-  <tr>
-    <td>洋红</td>
-    <td>magenta</td>
-  </tr>
-  <tr>
-    <td>薰衣草</td>
-    <td>lavender</td>
-  </tr>
-  <tr>
-    <td>天蓝</td>
-    <td>blue</td>
-  </tr>
-  </tbody>
-</table>
+<p><img src="<BASE_URL>/static/img/themes/classic/classic-theme-01.png" width="90%" /></p>
+<p><img src="<BASE_URL>/static/img/themes/classic/classic-theme-02.png" width="90%" /></p>
+<p><img src="<BASE_URL>/static/img/themes/classic/classic-theme-03.png" width="90%" /></p>
+<p><img src="<BASE_URL>/static/img/themes/classic/classic-theme-04.png" width="90%" /></p>
diff --git a/docs/zh-CN/components/upgrade-1x.mdx b/docs/zh-CN/components/upgrade-1x.mdx
diff --git a/docs/zh-CN/components/upgrade-from-1x.mdx b/docs/zh-CN/components/upgrade-from-1x.mdx
@@ -0,0 +1,26 @@
+# 从 v1.x 升级至 v2.x
+
+HIUI 2.0.0 是一次重大更新，在这次迭代中，我们统一梳理了所有组件的 API。现在的组件 API 都基于统一的规范设计，不同组件间属性名、参数甚至数据类型都趋于一致，使用起来学习成本更小。
+
+即便如此，我们依旧为 1.x 的用户提供了最大程度的向前支持。如果你的项目正在从 1.x 升级，请参考下面的升级指南。
+
+## 从 1.4.x/1.5.x 升级至 2.0.0
+
+基于 1.4.x 和 1.5.x 版本开发的内容，可通过为下列组件批量增加 `legacy={true}` 标识来让其保持使用旧版 API。而新增模块参照新版 API 使用即可。
+
+- `<Checkbox />`
+- `<Counter />`
+- `<DatePicker />`
+- `<Input />`
+- `<Radio />`
+- `<Select />`
+- `<Tabs />`
+- `<Tree />`
+- `<Upload />`
+
+以 `<Checkbox />` 组件为例：
+在 `src` 目录批量搜索 `<Checkbox ` 替换为 `<Checkbox legacy={true} ` 即可，其它组件以此类推。
+
+非上述列表中的组件如有 API 调整，他们的使用方式没变，只是部分属性名变了，所以我们已经在组件内部做了兼容处理。
+
+（更新中…）
diff --git a/site/locales/en-US.js b/site/locales/en-US.js
@@ -2,8 +2,8 @@ module.exports = {
   components: {
     'quick-start': 'Quick Start',
     i18n: 'i18n',
-    theme: 'Customize Theme',
-    template: 'Layout Theme',
+    palette: 'Customize Theme',
+    theme: 'Layout Theme',
     changelog: 'Changelog',
     'group-basic': 'General',
     'group-navgation': 'Navigation',

diff --git a/site/locales/zh-CN.js b/site/locales/zh-CN.js
@@ -1,10 +1,10 @@
 module.exports = {
   components: {
     'quick-start': '快速上手',
-    'upgrade-1x': '从 1.x 升级至 2.0',
+    'upgrade-from-1x': '从 v1.x 升级至 v2.x',
     i18n: 'i18n',
-    template: '布局主题',
-    theme: '配色主题',
+    theme: '布局主题',
+    palette: '配色主题',
     changelog: '更新日志',
     'group-basic': '通用',
     'group-navgation': '导航',

diff --git a/site/pages/components/index.js b/site/pages/components/index.js
@@ -7,10 +7,10 @@ files.keys().forEach(key => {
 export default {
   documents: {
     'quick-start': components['quick-start'],
-    template: components['template'],
+    'upgrade-from-1x': components['upgrade-from-1x'],
     theme: components['theme'],
+    palette: components['palette'],
     i18n: components['i18n'],
-    'upgrade-1x': components['upgrade-1x'],
     changelog: components['changelog']
   },
   components: {
@@ -21,11 +21,11 @@ export default {
       icon: components['icon']
     },
     'group-navgation': {
-      tabs: components['tabs'],
       dropdown: components['dropdown'],
       pagination: components['pagination'],
       stepper: components['stepper'],
-      menu: components['menu']
+      menu: components['menu'],
+      tabs: components['tabs']
     },
     'group-form': {
       form: components['form'],
@@ -35,22 +35,22 @@ export default {
       cascader: components['cascader'],
       radio: components['radio'],
       checkbox: components['checkbox'],
+      switch: components['switch'],
       'date-picker': components['date-picker'],
       'time-picker': components['time-picker'],
+      transfer: components['transfer'],
+      tree: components['tree'],
       upload: components['upload'],
       rate: components['rate']
     },
     'group-data': {
       table: components['table'],
-      tree: components['tree'],
       collapse: components['collapse'],
       tooltip: components['tooltip'],
       popover: components['popover'],
       progress: components['progress'],
       card: components['card'],
-      timeline: components['timeline'],
-      transfer: components['transfer'],
-      switch: components['switch']
+      timeline: components['timeline']
     },
     'group-tips': {
       modal: components['modal'],

diff --git a/site/style/typo.scss b/site/style/typo.scss
@@ -23,6 +23,14 @@
     font-size: 16px;
   }
 
+  code {
+    margin: 0 1px;
+    padding: 0.2em 0.4em;
+    border: 1px solid #eee;
+    border-radius: 3px;
+    background: #f2f4f5;
+  }
+
   > {
     // 锚点样式
     h2 {
@@ -80,14 +88,6 @@
         padding: 10px 9px;
         border: 1px solid #e7e7e7;
       }
-
-      code {
-        margin: 0 1px;
-        padding: 0.2em 0.4em;
-        border: 1px solid #eee;
-        border-radius: 3px;
-        background: #f2f4f5;
-      }
     }
 
     // 表格无边框样式