feat(comp:button): style update and group support gap (#1235)

IDuxFE · Oct 31, 2022 · 7613c7d · 7613c7d
1 parent 9cebaaf
commit 7613c7d
Show file tree

Hide file tree

Showing 57 changed files with 766 additions and 881 deletions.
diff --git a/packages/cdk/platform/docs/Api.zh.md b/packages/cdk/platform/docs/Api.zh.md
@@ -17,5 +17,5 @@
 | `isSafari` | 是否为 `Safari` 浏览器  | `boolean` | - |
 | `isIOS` | 是否为 `IOS` 平台  | `boolean` | - |
 | `isAndroid` | 是否为 `Android` 平台  | `boolean` | - |
-| `supportsFlexGap` | 检查用户的浏览器是 flex 的 gap 配置  | `() => boolean` | 参见[gap](https://developer.mozilla.org/zh-CN/docs/Web/CSS/gap#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7) |
+| `supportsFlexGap` | 检查用户的浏览器是否支持 flex 的 gap 配置  | `() => boolean` | 参见[gap](https://developer.mozilla.org/zh-CN/docs/Web/CSS/gap#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7) |
 | `supportsPassiveEventListeners` | 检查用户的浏览器是否支持被动事件侦听器  | `() => boolean` | 参见 [https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md](https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md) |
diff --git a/packages/components/breadcrumb/docs/Theme.zh.md b/packages/components/breadcrumb/docs/Theme.zh.md
@@ -2,7 +2,7 @@
 
 | 名称 | default | seer | 备注 |
 | --- | --- | --- | --- |
-| `@breadcrumb-base-color` | `@text-color-secondary` | - | - |
+| `@breadcrumb-base-color` | `@text-color-secondary` | `@color-graphite` | - |
 | `@breadcrumb-link-color` | `@color-graphite` | - | - |
 | `@breadcrumb-link-color-hover` | `@color-primary` | - | - |
 | `@breadcrumb-separator-color` | `@text-color-secondary` | `@color-graphite-l10` | - |

diff --git a/packages/components/button/demo/Block.md b/packages/components/button/demo/Block.md
@@ -6,4 +6,4 @@ title:
 
 ## zh
 
-通过设置 `block` 将按钮宽度调整为自适应其父元素的宽度。
+通过设置 `block` 将按钮宽度调整为自适应其父元素的宽度, 该按钮常见于移动端和一些表单场景中。
diff --git a/packages/components/button/demo/Block.vue b/packages/components/button/demo/Block.vue
@@ -1,7 +1,9 @@
 <template>
-  <IxButton mode="primary" block>Primary</IxButton>
-  <IxButton block>Default</IxButton>
-  <IxButton mode="dashed" block>Dashed</IxButton>
-  <IxButton mode="text" block>Text</IxButton>
-  <IxButton mode="link" block href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton>
+  <IxSpace vertical block>
+    <IxButton mode="primary" block>Primary</IxButton>
+    <IxButton block>Default</IxButton>
+    <IxButton mode="dashed" block>Dashed</IxButton>
+    <IxButton mode="text" block>Text</IxButton>
+    <IxButton mode="link" block href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton>
+  </IxSpace>
 </template>
diff --git a/packages/components/button/demo/Danger.md b/packages/components/button/demo/Danger.md
@@ -1,5 +1,5 @@
 ---
-order: 1
+order: 6
 title:
   zh: 危险按钮
 ---

diff --git a/packages/components/button/demo/Danger.vue b/packages/components/button/demo/Danger.vue
@@ -1,7 +1,9 @@
 <template>
-  <IxButton mode="primary" danger>Primary</IxButton>
-  <IxButton danger>Default</IxButton>
-  <IxButton mode="dashed" danger>Dashed</IxButton>
-  <IxButton mode="text" danger>Text</IxButton>
-  <IxButton mode="link" danger href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton>
+  <IxSpace>
+    <IxButton mode="primary" danger>Primary</IxButton>
+    <IxButton danger>Default</IxButton>
+    <IxButton mode="dashed" danger>Dashed</IxButton>
+    <IxButton mode="text" danger>Text</IxButton>
+    <IxButton mode="link" danger href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton>
+  </IxSpace>
 </template>
diff --git a/packages/components/button/demo/Disabled.md b/packages/components/button/demo/Disabled.md
@@ -6,4 +6,4 @@ title:
 
 ## zh
 
-通过设置 `disabled` 将按钮设为禁用状态。
+禁用状态下按钮不可点击。
diff --git a/packages/components/button/demo/Disabled.vue b/packages/components/button/demo/Disabled.vue
@@ -1,24 +1,9 @@
 <template>
-  <IxButton mode="primary" disabled>Primary</IxButton>
-  <IxButton disabled>Default</IxButton>
-  <IxButton mode="dashed" disabled>Dashed</IxButton>
-  <IxButton mode="text" disabled>Text</IxButton>
-  <IxButton mode="link" disabled href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton>
-  <br />
-  <IxButton :disabled="disabled">Disabled: {{ disabled }}</IxButton>
-  <IxButton @click="changeDisabled">Change Disabled</IxButton>
+  <IxSpace>
+    <IxButton mode="primary" disabled>Primary</IxButton>
+    <IxButton disabled>Default</IxButton>
+    <IxButton mode="dashed" disabled>Dashed</IxButton>
+    <IxButton mode="text" disabled>Text</IxButton>
+    <IxButton mode="link" disabled href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton>
+  </IxSpace>
 </template>
-
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
-
-export default defineComponent({
-  setup() {
-    const disabled = ref(false)
-    const changeDisabled = () => {
-      disabled.value = !disabled.value
-    }
-    return { disabled, changeDisabled }
-  },
-})
-</script>
diff --git a/packages/components/button/demo/Ghost.md b/packages/components/button/demo/Ghost.md
@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 5
 title:
   zh: 幽灵按钮
 ---

diff --git a/packages/components/button/demo/Ghost.vue b/packages/components/button/demo/Ghost.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="button-ghost-demo">
+  <IxSpace class="button-ghost-demo">
     <IxButton mode="primary" ghost>Primary</IxButton>
     <IxButton ghost>Default</IxButton>
     <IxButton mode="dashed" ghost>Dashed</IxButton>
     <IxButton danger ghost>Danger</IxButton>
-  </div>
+  </IxSpace>
 </template>
 
 <style lang="less" scoped>

diff --git a/packages/components/button/demo/Group.md b/packages/components/button/demo/Group.md
@@ -0,0 +1,9 @@
+---
+order: 8
+title:
+  zh: 按钮组
+---
+
+## zh
+
+提供文字提示 + 操作行为。
diff --git a/packages/components/button/demo/Group.vue b/packages/components/button/demo/Group.vue
@@ -0,0 +1,12 @@
+<template>
+  <IxSpace>
+    <IxButtonGroup>
+      <IxButton block>Default</IxButton>
+      <IxButton icon="setting" shape="square"></IxButton>
+    </IxButtonGroup>
+    <IxButtonGroup>
+      <IxButton block>Default</IxButton>
+      <IxButton icon="down" shape="square"></IxButton>
+    </IxButtonGroup>
+  </IxSpace>
+</template>
diff --git a/packages/components/button/demo/Icon.md b/packages/components/button/demo/Icon.md
@@ -1,9 +1,9 @@
 ---
-order: 5
+order: 3
 title:
   zh: 按钮图标
 ---
 
 ## zh
 
-通过设置 `icon` 给按钮设置图标。
+图标按钮由图标 + 文字或图标构成，通过图标可增强识别性，以便直观理解。
diff --git a/packages/components/button/demo/Icon.vue b/packages/components/button/demo/Icon.vue
@@ -1,6 +1,8 @@
 <template>
-  <IxButton icon="search">Search</IxButton>
-  <IxButton icon="search"></IxButton>
-  <IxButton icon="download">Download</IxButton>
-  <IxButton icon="download"></IxButton>
+  <IxSpace>
+    <IxButton icon="search">Search</IxButton>
+    <IxButton icon="search"></IxButton>
+    <IxButton icon="download">Download</IxButton>
+    <IxButton icon="download"></IxButton>
+  </IxSpace>
 </template>
diff --git a/packages/components/button/demo/Loding.md b/packages/components/button/demo/Loding.md
@@ -6,4 +6,4 @@ title:
 
 ## zh
 
-通过设置 `loading` 将按钮设为加载中状态, 此时设置的 icon 无效。
+加载中状态下按钮不可点击，此时会显示加载图标，自定义设置的 `icon` 无效。
diff --git a/packages/components/button/demo/Loding.vue b/packages/components/button/demo/Loding.vue
@@ -1,24 +1,9 @@
 <template>
-  <IxButton mode="primary" icon="search" loading>Primary</IxButton>
-  <IxButton icon="search" loading>Default</IxButton>
-  <IxButton mode="dashed" loading>Dashed</IxButton>
-  <IxButton mode="text" loading>Text</IxButton>
-  <IxButton mode="link" loading href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton>
-  <br />
-  <IxButton icon="search" :loading="isLoading">Loading: {{ isLoading }}</IxButton>
-  <IxButton @click="changeLoading">Change Loading</IxButton>
+  <IxSpace>
+    <IxButton mode="primary" icon="search" loading>Primary</IxButton>
+    <IxButton icon="search" loading>Default</IxButton>
+    <IxButton mode="dashed" loading>Dashed</IxButton>
+    <IxButton mode="text" loading>Text</IxButton>
+    <IxButton mode="link" loading href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton>
+  </IxSpace>
 </template>
-
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
-
-export default defineComponent({
-  setup() {
-    const isLoading = ref(false)
-    const changeLoading = () => {
-      isLoading.value = !isLoading.value
-    }
-    return { isLoading, changeLoading }
-  },
-})
-</script>
diff --git a/packages/components/button/demo/Mode.md b/packages/components/button/demo/Mode.md
@@ -6,4 +6,4 @@ title:
 
 ## zh
 
-按钮共有 5 种类型：主按钮、默认按钮、虚线按钮和链接按钮，通过设置 `mode` 来使用不同的类型。
+按钮共有 5 种类型：主按钮、默认按钮、虚线按钮、文本按钮和链接按钮，主按钮在同一个操作区域最多出现一次。
diff --git a/packages/components/button/demo/Mode.vue b/packages/components/button/demo/Mode.vue
@@ -1,7 +1,9 @@
 <template>
-  <IxButton mode="primary">Primary</IxButton>
-  <IxButton>Default</IxButton>
-  <IxButton mode="dashed">Dashed</IxButton>
-  <IxButton mode="text">Text</IxButton>
-  <IxButton mode="link" href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton>
+  <IxSpace>
+    <IxButton mode="primary">Primary</IxButton>
+    <IxButton>Default</IxButton>
+    <IxButton mode="dashed">Dashed</IxButton>
+    <IxButton mode="text">Text</IxButton>
+    <IxButton mode="link" href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton>
+  </IxSpace>
 </template>
diff --git a/packages/components/button/demo/Shape.md b/packages/components/button/demo/Shape.md
@@ -1,9 +1,9 @@
 ---
-order: 7
+order: 6
 title:
   zh: 按钮形状
 ---
 
 ## zh
 
-通过设置 `shape` 来改变按钮的形状。
+除了默认的长方形按钮，还提供了圆角长方形、正方形、圆形等形状。
diff --git a/packages/components/button/demo/Shape.vue b/packages/components/button/demo/Shape.vue
@@ -1,13 +1,8 @@
 <template>
-  <IxButton mode="primary" icon="search" shape="circle"></IxButton>
-  <IxButton icon="download" shape="circle"></IxButton>
-  <IxButton mode="dashed" icon="download" shape="circle"></IxButton>
-  <IxButton mode="text" shape="circle">T</IxButton>
-  <IxButton mode="link" shape="circle" href="https://github.com/IDuxFE/idux" target="_blank">A</IxButton>
-  <br />
-  <IxButton mode="primary" icon="download" shape="round"></IxButton>
-  <IxButton icon="search" shape="round"></IxButton>
-  <IxButton mode="dashed" icon="download" shape="round">Download</IxButton>
-  <IxButton mode="text" shape="round">Text</IxButton>
-  <IxButton mode="link" shape="round" href="https://github.com/IDuxFE/idux" target="_blank">A</IxButton>
+  <IxSpace>
+    <IxButton>Button</IxButton>
+    <IxButton shape="round">Button</IxButton>
+    <IxButton icon="download" shape="square"></IxButton>
+    <IxButton icon="download" shape="circle"></IxButton>
+  </IxSpace>
 </template>
diff --git a/packages/components/button/demo/Size.md b/packages/components/button/demo/Size.md
@@ -1,9 +1,9 @@
 ---
-order: 6
+order: 2
 title:
   zh: 按钮尺寸
 ---
 
 ## zh
 
-按钮共有 3 种尺寸：大、中、下，通过设置 `size` 来使用不同的尺寸，默认为中。
+按钮共有 5 种尺寸：超小、小、中、大、超大，默认为中。
diff --git a/packages/components/button/demo/Size.vue b/packages/components/button/demo/Size.vue
@@ -1,24 +1,28 @@
 <template>
-  <IxRadioGroup v-model:value="size">
-    <IxRadio value="xs">Extra Small</IxRadio>
-    <IxRadio value="sm">Small</IxRadio>
-    <IxRadio value="md">Medium</IxRadio>
-    <IxRadio value="lg">Large</IxRadio>
-    <IxRadio value="xl">Extra Large</IxRadio>
-  </IxRadioGroup>
-
-  <br />
-  <IxButton mode="primary" :size="size">Primary</IxButton>
-  <IxButton :size="size">Default</IxButton>
-  <IxButton mode="dashed" :size="size">Dashed</IxButton>
-  <IxButton mode="text" :size="size">Text</IxButton>
-  <IxButton mode="link" :size="size" href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton>
+  <IxSpace vertical>
+    <IxRadioGroup v-model:value="size" :dataSource="sizeData" />
+    <IxSpace>
+      <IxButton mode="primary" :size="size">Primary</IxButton>
+      <IxButton :size="size">Default</IxButton>
+      <IxButton mode="dashed" :size="size">Dashed</IxButton>
+      <IxButton mode="text" :size="size">Text</IxButton>
+      <IxButton mode="link" :size="size" href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton>
+    </IxSpace>
+  </IxSpace>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 
 import { ButtonSize } from '@idux/components/button'
 
-const size = ref<ButtonSize>('lg')
+const sizeData = [
+  { key: 'xs', label: 'Extra Small' },
+  { key: 'sm', label: 'Small' },
+  { key: 'md', label: 'Medium' },
+  { key: 'lg', label: 'Large' },
+  { key: 'xl', label: 'Extra Large' },
+]
+
+const size = ref<ButtonSize>('md')
 </script>
diff --git a/packages/components/button/docs/Api.zh.md b/packages/components/button/docs/Api.zh.md
@@ -14,7 +14,7 @@
 | `icon` | 设置图标类型 | `string \| #icon` | - | - | `loading` 为 `true` 时无效 |
 | `loading` | 设置加载中状态 | `boolean` |  - | - |- |
 | `mode` | 设置按钮种类 | `'primary' \| 'default' \| 'dashed' \| 'text' \| 'link'` | `'default'` | - |- |
-| `shape` | 设置按钮形状 | `'circle' \| 'round'` | - | - |- |
+| `shape` | 设置按钮形状 | `'square' \| 'circle' \| 'round'` | - | - |- |
 | `size` | 设置按钮大小 | `'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'` | `'md'` | - |- |
 | `type` | 原生 `button` 的 `type` 属性 | `'button' \| 'submit' \| 'reset'` | `'button'` | - | 参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) |
 
@@ -24,6 +24,7 @@
 
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
+| `gap` | 设置按钮组的 gap 配置 | `number \| string` | - | - | 兼容性问题参见: [Can I use](https://caniuse.com/flexbox-gap) |
 | `mode` | 设置组内按钮种类 | `'primary' \| 'default' \| 'dashed' \| 'text' \| 'link'` | - | - |- |
 | `shape` | 设置组内按钮形状 | `'circle' \| 'round'` | - | - |- |
 | `size` | 设置组内按钮大小 | `'lg' \| 'md' \| 'sm'` | - | - |- |
diff --git a/packages/components/button/docs/Design.zh.md b/packages/components/button/docs/Design.zh.md
@@ -3,6 +3,11 @@
 
 使用简单的按钮执行特定操作，例如：新增、编辑、保存、确定，取消。
 
+- 使用主按钮为按钮集合的主要操作。
+- 次要按钮应使用不那么显性的颜色。
+- 按钮大小很重要-确保按钮的大小足够大，可以方便快捷的进行交互，但不要太大，以免在视觉上压倒一切。
+- 使用动作动词或短语告诉用户接下来会发生什么。
+
 ### 组件类型
 
 #### 按样式分类
@@ -19,10 +24,10 @@
 
 | 名称 | 说明  |
 | --- | ---  |
+| 禁用状态 | 行动点不可用的时候，一般需要文案解释 |
+| 加载中状态 | 用于异步操作等待反馈的时候，也可以避免多次提交 |
 | 危险按钮 | 删除/移动/修改权限等危险操作，一般需要二次确认 |
 | 幽灵按钮 | 用于背景色比较复杂的地方，常用在首页/产品页等展示场景 |
-| 禁用按钮 | 行动点不可用的时候，一般需要文案解释 |
-| 加载中 | 用于异步操作等待反馈的时候，也可以避免多次提交 |
 
 #### 按尺寸分类
 
@@ -32,7 +37,7 @@
 | 小尺寸 | 一般用在紧凑型的场景中 |
 | 中尺寸 | 默认的支持，适用于大多数场景 |
 | 大尺寸 | 一般用在信息密度较低的注册等页面 |
-| 超大大尺寸 | 登录页或运营类页面使用 |
+| 超大尺寸 | 登录页或运营类页面使用 |
 
 #### 纯图标按钮
 

diff --git a/packages/components/button/docs/Index.zh.md b/packages/components/button/docs/Index.zh.md
@@ -3,6 +3,7 @@ category: components
 type: 通用
 title: Button
 subtitle: 按钮
+theme: true
 ---
 
 按钮用于执行一个即时操作。