feat(comp:alert): default to worring, add offline type, support banner (

#1298)
IDuxFE · Nov 23, 2022 · 9ca13db · 9ca13db
1 parent e08acf6
commit 9ca13db
Show file tree

Hide file tree

Showing 22 changed files with 68 additions and 35 deletions.
diff --git a/packages/components/alert/__tests__/__snapshots__/alert.spec.ts.snap b/packages/components/alert/__tests__/__snapshots__/alert.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`Alert > render work 1`] = `
 "<transition-stub name=\\"ix-alert\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
-  <div class=\\"ix-alert ix-alert-info\\"><span class=\\"ix-alert-icon\\"><i class=\\"ix-icon ix-icon-bulb\\" role=\\"img\\" aria-label=\\"bulb\\"></i></span>
+  <div class=\\"ix-alert ix-alert-warning\\"><span class=\\"ix-alert-icon\\"><i class=\\"ix-icon ix-icon-exclamation-circle\\" role=\\"img\\" aria-label=\\"exclamation-circle\\"></i></span>
     <div class=\\"ix-alert-content\\">
       <div class=\\"ix-alert-title\\"></div>
       <!---->

diff --git a/packages/components/alert/__tests__/alert.spec.ts b/packages/components/alert/__tests__/alert.spec.ts
@@ -24,6 +24,15 @@ describe('Alert', () => {
 
     await wrapper.setProps({ type: 'info' })
     expect(wrapper.find('.ix-alert').classes()).toContain('ix-alert-info')
+
+    await wrapper.setProps({ type: 'offline' })
+    expect(wrapper.find('.ix-alert').classes()).toContain('ix-alert-offline')
+  })
+
+  test('props banner work', async () => {
+    const wrapper = AlertMount({ props: { banner: true } })
+
+    expect(wrapper.find('.ix-alert').classes()).toContain('ix-alert-banner')
   })
 
   test('props icon work', async () => {

diff --git a/packages/components/alert/demo/Banner.md b/packages/components/alert/demo/Banner.md
@@ -0,0 +1,9 @@
+---
+order: 2
+title:
+  zh: 顶部提示
+---
+
+## zh
+
+顶部提示形式，其实就是多了一个 `border-bottom-color`。
diff --git a/packages/components/alert/demo/Banner.vue b/packages/components/alert/demo/Banner.vue
@@ -0,0 +1,3 @@
+<template>
+  <IxAlert banner title="我长话短说，但是说来话长。"></IxAlert>
+</template>
diff --git a/packages/components/alert/demo/Basic.md b/packages/components/alert/demo/Basic.md
@@ -6,4 +6,4 @@ title:
 
 ## zh
 
-最简单的用法，一共有四种样式，适用于简短的警告提示。
+最简单的用法，一共有 5 种样式，适用于简短的警告提示, 默认为 `warning`。
diff --git a/packages/components/alert/demo/Basic.vue b/packages/components/alert/demo/Basic.vue
@@ -1,8 +1,9 @@
 <template>
   <IxSpace block vertical>
     <IxAlert title="我长话短说，但是说来话长。" type="success"></IxAlert>
-    <IxAlert title="据我所知，我一无所知。"></IxAlert>
-    <IxAlert title="能力越大，能力就越大。" type="error"></IxAlert>
-    <IxAlert title="在掉链子这种事情上从未掉过链子。" type="warning"></IxAlert>
+    <IxAlert title="据我所知，我一无所知。" type="info"></IxAlert>
+    <IxAlert title="能力越大，能力就越大。" type="warning"></IxAlert>
+    <IxAlert title="在掉链子这种事情上从未掉过链子。" type="error"></IxAlert>
+    <IxAlert title="你真的掉链子了。" type="offline"></IxAlert>
   </IxSpace>
 </template>
diff --git a/packages/components/alert/demo/Closable.md b/packages/components/alert/demo/Closable.md
@@ -1,5 +1,5 @@
 ---
-order: 3
+order: 6
 title:
   zh: 可关闭的
   en: Closable

diff --git a/packages/components/alert/demo/Closable.vue b/packages/components/alert/demo/Closable.vue
@@ -1,10 +1,12 @@
 <template>
   <IxSpace block vertical>
-    <IxAlert closable @beforeClose="onBeforeClose" @close="onClose"> 雪崩的时候，没有一片雪花是不崩的。</IxAlert>
-    <IxAlert closable type="error" @beforeClose="onBeforeClose" @close="onClose"> 香蕉越大，香蕉皮越大 </IxAlert>
+    <IxAlert closable type="info" @beforeClose="onBeforeClose" @close="onClose">
+      雪崩的时候，没有一片雪花是不崩的。
+    </IxAlert>
     <IxAlert closable type="warning" @beforeClose="onBeforeClose" @close="onClose">
       如果你愿意多花一点时间读完，你就会发现你多花了一点时间。
     </IxAlert>
+    <IxAlert closable type="error" @beforeClose="onBeforeClose" @close="onClose">香蕉越大，香蕉皮越大 </IxAlert>
   </IxSpace>
 </template>
 

diff --git a/packages/components/alert/demo/Description.md b/packages/components/alert/demo/Description.md
@@ -1,5 +1,5 @@
 ---
-order: 1
+order: 4
 title:
   zh: 辅助性文字介绍
 ---

diff --git a/packages/components/alert/demo/Description.vue b/packages/components/alert/demo/Description.vue
@@ -3,6 +3,7 @@
     <IxAlert
       title="Vue 是什么？"
       description="Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。"
+      type="info"
     >
     </IxAlert>
     <IxAlert type="success">

diff --git a/packages/components/alert/demo/Icon.md b/packages/components/alert/demo/Icon.md
@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 8
 title:
   zh: 自定义图标
 ---

diff --git a/packages/components/alert/demo/Icon.vue b/packages/components/alert/demo/Icon.vue
@@ -1,12 +1,12 @@
 <template>
   <IxSpace block vertical>
-    <IxAlert icon="alert" title="每次我不知道该说什么的时候就不知道该说什么。"></IxAlert>
-    <IxAlert title="你说的这话，抛开内容来说，我十分赞同。" type="success">
+    <IxAlert icon="alert" title="每次我不知道该说什么的时候就不知道该说什么。" type="success"></IxAlert>
+    <IxAlert title="你说的这话，抛开内容来说，我十分赞同。" type="info">
       <template #icon>
         <IxIcon name="check-circle-filled" />
       </template>
     </IxAlert>
-    <IxAlert type="warning" title="但凡你这话有点道理，也不至于一点道理没有。" closable>
+    <IxAlert closable title="但凡你这话有点道理，也不至于一点道理没有。" type="warning">
       <template #closeIcon>
         <IxIcon name="close-circle" />
       </template>

diff --git a/packages/components/alert/demo/Loop.md b/packages/components/alert/demo/Loop.md
@@ -1,5 +1,5 @@
 ---
-order: 6
+order: 12
 title:
   zh: 轮播的提示
   en: Loop banner

diff --git a/packages/components/alert/demo/Pagination.md b/packages/components/alert/demo/Pagination.md
@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 10
 title:
   zh: 切换提示
 ---

diff --git a/packages/components/alert/docs/Api.zh.md b/packages/components/alert/docs/Api.zh.md
@@ -4,14 +4,15 @@
 
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
+| `banner` | 是否用作顶部提示 | `boolean` | `false` | - |- |
 | `closable` | 信息提示是否可关闭 | `boolean` | `false` | ✅ |- |
 | `closeIcon` | 自定义关闭按钮 | `string \| #closeIcon` | `close` | - | - |
 | `description` | 辅助性文字介绍 | `string \| #description` | - | - |- |
 | `icon` | 自定义图标 | `string \| #icon` | - | ✅ | 若要隐藏图标则传空串 |
 | `pagination` | 是否开启分页切换 | `boolean \| AlertPagination` | `false` | - | - |
-| `type` | 设置提示类型 | `'success' \| 'info' \| 'warning' \| 'error'` | `'info'` | - |- |
+| `type` | 设置提示类型 | `'success' \| 'info' \| 'warning' \| 'error'` | `'warning'` | - |- |
 | `title` | 信息提示内容 | `string \| string[] \| #default` | - | - |- |
-| `onBeforeClose` | 关闭提示前会触发的回调函数 | `() => boolean \| Promise<boolean>` | - | - | - |
+| `onBeforeClose` | 关闭提示前会触发的回调函数 | `() => boolean \| Promise<boolean>` | - | - | 返回 `false` 会阻止关闭 |
 | `onClose` | 关闭提示会触发的回调函数 | `() => void` | - | - | - |
 | `onAfterClose` | 关闭提示后触发的回调函数 | `() => void` | - | - | 动画结束 |
 

diff --git a/packages/components/alert/src/Alert.tsx b/packages/components/alert/src/Alert.tsx
@@ -63,6 +63,7 @@ export default defineComponent({
       return normalizeClass({
         [prefixCls]: true,
         [`${prefixCls}-${props.type}`]: true,
+        [`${prefixCls}-banner`]: props.banner,
         [`${prefixCls}-with-description`]: slots.description || props.description,
       })
     })

diff --git a/packages/components/alert/src/types.ts b/packages/components/alert/src/types.ts
@@ -9,14 +9,9 @@ import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray } from '
 import type { DefineComponent, HTMLAttributes, PropType } from 'vue'
 
 export const alertProps = {
-  closable: {
-    type: Boolean,
-    default: undefined,
-  },
-  closeIcon: {
-    type: String,
-    default: 'close',
-  },
+  banner: { type: Boolean, default: false },
+  closable: { type: Boolean, default: undefined },
+  closeIcon: { type: String, default: 'close' },
   description: String,
   icon: String,
   title: [String, Array] as PropType<string | string[]>,
@@ -26,7 +21,7 @@ export const alertProps = {
   },
   type: {
     type: String as PropType<AlertType>,
-    default: 'info',
+    default: 'warning',
   },
   onAfterClose: [Function, Array] as PropType<MaybeArray<() => void>>,
   onBeforeClose: [Function, Array] as PropType<MaybeArray<() => void | boolean | Promise<boolean>>>,
@@ -38,7 +33,7 @@ export type AlertPublicProps = ExtractPublicPropTypes<typeof alertProps>
 export type AlertComponent = DefineComponent<Omit<HTMLAttributes, keyof AlertPublicProps> & AlertPublicProps>
 export type AlertInstance = InstanceType<DefineComponent<AlertProps>>
 
-export type AlertType = 'success' | 'info' | 'warning' | 'error'
+export type AlertType = 'success' | 'info' | 'warning' | 'error' | 'offline'
 export interface AlertPagination {
   pageIndex?: number
   onChange?: (pageIndex: number) => void

diff --git a/packages/components/alert/style/index.less b/packages/components/alert/style/index.less
@@ -6,16 +6,22 @@
 
   display: flex;
   align-items: center;
-  border-radius: @alert-border-radius;
+  padding: 0 16px;
   font-size: @alert-font-size;
   line-height: calc(@alert-font-size + var(--ix-line-height-gutter));
-  padding: 0 16px;
   color: @alert-color;
+  border: 1px solid transparent;
+  border-radius: @alert-border-radius;
 
   .alert-status-color(success, @alert-success-color, @alert-success-background-color);
   .alert-status-color(info, @alert-info-color, @alert-info-background-color);
   .alert-status-color(warning, @alert-warning-color, @alert-warning-background-color);
   .alert-status-color(error, @alert-error-color, @alert-error-background-color);
+  .alert-status-color(offline, @alert-offline-color, @alert-offline-background-color);
+
+  &-banner {
+    border-bottom-color: @alert-banner-border-color;
+  }
 
   &-icon {
     margin-right: 8px;
@@ -40,7 +46,7 @@
   &-content {
     flex: 1;
     min-width: 0;
-    padding: calc((@alert-height - @alert-font-size - var(--ix-line-height-gutter)) / 2) 0;
+    padding: calc((@alert-height - @alert-font-size - var(--ix-line-height-gutter) - 2px) / 2) 0;
   }
 
   &-with-description {

diff --git a/packages/components/alert/style/themes/default.variable.less b/packages/components/alert/style/themes/default.variable.less
@@ -10,8 +10,12 @@
 @alert-info-color: var(--ix-color-primary);
 @alert-warning-color: var(--ix-color-brown);
 @alert-error-color: var(--ix-color-red);
+@alert-offline-color: var(--ix-text-color-disabled);
 
 @alert-success-background-color: #f1faf7;
 @alert-info-background-color: #f2f7ff;
 @alert-warning-background-color: #fffaf2;
 @alert-error-background-color: #fff2f2;
+@alert-offline-background-color: #f7f7f8;
+
+@alert-banner-border-color: var(--ix-border-color-secondary);
diff --git a/packages/components/checkbox/style/index.less b/packages/components/checkbox/style/index.less
@@ -149,12 +149,12 @@
       border-color: @checkbox-border-color;
     }
 
-    &:not(.@{checkbox-prefix}-checked).@{button-prefix} {
+    &.@{button-prefix}:not(.@{checkbox-prefix}-checked) {
       color: var(--ix-text-color-info);
       background-color: var(--ix-background-color-middle);
     }
 
-    &.@{checkbox-prefix}-checked .@{checkbox-prefix}-input-tick {
+    &.@{button-prefix}.@{checkbox-prefix}-checked .@{checkbox-prefix}-input-tick {
       border-top-color: var(--ix-text-color-info);
     }
   }

diff --git a/packages/components/config/src/defaultConfig.ts b/packages/components/config/src/defaultConfig.ts
@@ -25,6 +25,7 @@ export const defaultConfig: GlobalConfig = {
       error: 'info-circle',
       info: 'bulb',
       warning: 'exclamation-circle',
+      offline: 'exclamation-circle',
     },
   },
   anchor: {

diff --git a/packages/components/radio/style/index.less b/packages/components/radio/style/index.less
@@ -115,9 +115,9 @@
       border-color: @radio-border-color;
     }
 
-    &.@{button-prefix}.@{radio-prefix}-checked {
-      color: var(--ix-text-color-inverse);
-      background-color: var(--ix-text-color-info);
+    &.@{button-prefix}:not(.@{radio-prefix}-checked) {
+      color: var(--ix-text-color-info);
+      background-color: var(--ix-background-color-middle);
     }
   }