chore(NoticeBar): extra attribute is renamed to operation

src/notice-bar/README.en-US.md

@@ -7,8 +7,8 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 content | String / Array / Slot | - | \- | N
 direction | String | horizontal | options：horizontal/vertical | N
-external-classes | Array | - | `['t-class', 't-class-content', 't-class-prefix-icon', 't-class-extra', 't-class-suffix-icon']` | N
-extra | String / Slot | - | \- | N
+external-classes | Array | - | `['t-class', 't-class-content', 't-class-prefix-icon', 't-class-operation', 't-class-suffix-icon']` | N
+operation | String / Slot | - | \- | N
 marquee | Boolean / Object | false | Typescript：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N
 prefix-icon | String / Boolean/ Object / Slot | - | \- | N
 suffix-icon | String / Boolean / Object / Slot | - | \- | N
@@ -20,4 +20,4 @@ default-visible | Boolean | false | uncontrolled property | N
 
 name | params | description
 -- | -- | --
-click | `(trigger: NoticeBarTrigger)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'extra' \| 'suffix-icon';`<br/>
+click | `(trigger: NoticeBarTrigger)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/>

src/notice-bar/README.md

@@ -26,7 +26,7 @@ isComponent: true
 
 ## 代码演示
 
-### 组件类型
+### 01 组件类型
 
 纯文字的公告栏
 
@@ -36,7 +36,11 @@ isComponent: true
 
 {{ iconDemo }}
 
-带操作的公告栏
+带关闭的公告栏
+
+{{ suffixIcon }}
+
+带入口的公告栏
 
 {{ event }}
 
@@ -48,13 +52,13 @@ isComponent: true
 
 {{ customization }}
 
-### 组件状态
+### 02 组件状态
 
 公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）
 
 {{ theme }}
 
-### 可滚动公告栏
+### 03 可滚动公告栏
 
 可滚动公告栏有水平（horizontal）和垂直（vertical）
 
@@ -68,8 +72,8 @@ isComponent: true
 -- | -- | -- | -- | --
 content | String / Array / Slot | - | 文本内容 | N
 direction | String | horizontal | 滚动方向。可选项：horizontal/vertical | N
-external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、文本内容、前缀图标、右侧额外信息、后缀图标 等元素类名。。`['t-class', 't-class-content', 't-class-prefix-icon', 't-class-extra', 't-class-suffix-icon']` | N
-extra | String / Slot | - | 右侧额外信息 | N
+external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、文本内容、前缀图标、右侧额外信息、后缀图标 等元素类名。。`['t-class', 't-class-content', 't-class-prefix-icon', 't-class-operation', 't-class-suffix-icon']` | N
+operation | String / Slot | - | 右侧额外信息 | N
 marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放【仅在 direction='horizontal' 有效】。TS 类型：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N
 prefix-icon | String / Boolean / Object / Slot | - | 前缀图标。值为字符串表示图标名称，值为 `false` 表示不显示前缀图标，值为 `Object` 类型，表示透传至 `icon`，不传表示使用主题图标。| N
 suffix-icon | String / Object / Slot | - | 后缀图标。值为字符串表示图标名称。值为 `Object` 类型，表示透传至 `icon`，不传表示不显示后缀图标。 | N
@@ -81,4 +85,4 @@ default-visible | Boolean | false | 显示/隐藏。非受控属性 | N
 
 名称 | 参数 | 描述
 -- | -- | --
-click | `(trigger: NoticeBarTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'extra' \| 'suffix-icon';`<br/>
+click | `(trigger: NoticeBarTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/>

src/notice-bar/__test__/__snapshots__/demo.test.js.snap

@@ -26,37 +26,30 @@ exports[`NoticeBar NoticeBar custom demo works fine 1`] = `
 exports[`NoticeBar NoticeBar customization demo works fine 1`] = `
 <customization>
   <t-notice-bar
-    suffixIcon="slot"
     visible="{{true}}"
   >
     <wx-view
+      class="inline"
       slot="content"
     >
-
-    提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述
-
-      <wx-view
-        class="extra"
-      >
-        <t-link
-          content="详情"
-          navigatorProps="{{
-            Object {
-              "url": "/pages/xxx/xxx",
-            }
-          }}"
-          theme="primary"
-        />
-      </wx-view>
+       提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述 
     </wx-view>
-    <wx-view
+    <t-link
+      content="详情"
+      navigatorProps="{{
+        Object {
+          "url": "/pages/xxx/xxx",
+        }
+      }}"
+      slot="operation"
+      theme="primary"
+      underline="{{false}}"
+    />
+    <t-icon
+      name="close"
+      size="44rpx"
       slot="suffix-icon"
-    >
-      <t-icon
-        name="close"
-        size="44rpx"
-      />
-    </wx-view>
+    />
   </t-notice-bar>
 </customization>
 `;
@@ -69,21 +62,21 @@ exports[`NoticeBar NoticeBar event demo works fine 1`] = `
     bind:click="click"
   >
     <wx-view
+      class="inline"
       slot="content"
     >
        这是一条普通的通知信息 
     </wx-view>
     <t-link
-      class="extra"
       content="详情"
       navigatorProps="{{
         Object {
           "url": "/pages/xxx/xxx",
         }
       }}"
-      slot="extra"
+      slot="operation"
       theme="primary"
-      underline="{{true}}"
+      underline="{{false}}"
     />
   </t-notice-bar>
   <t-notice-bar

src/notice-bar/__test__/__snapshots__/index.test.js.snap

@@ -27,7 +27,7 @@ exports[`notice-bar props : marquee 1`] = `
             bind:tap="onTap"
           >
             <wx-label
-              class="t-icon-error-circle-filled t-icon-base"
+              class="t-icon-info-circle-filled t-icon-base"
             />
           </wx-view>
         </t-icon>
@@ -63,13 +63,13 @@ exports[`notice-bar props : marquee 1`] = `
           }}"
           class="t-notice-bar__content t-class-content "
         >
-           提示文字描述提示文字描述提示文字描述提示文字描述文 
+          提示文字描述提示文字描述提示文字描述提示文字描述文
+          <wx-view
+            class="t-notice-bar__operation t-class-operation"
+            catch:tap="clickOperation"
+          />
         </wx-view>
       </wx-view>
-      <wx-view
-        class="t-notice-bar__extra t-class-extra"
-        bind:tap="clickExtra"
-      />
       <wx-view
         class="t-notice-bar__suffix-icon"
         bind:tap="clickSuffixIcon"

src/notice-bar/__test__/__virtualHostSnapshot__/demo.test.js.snap

@@ -26,37 +26,30 @@ exports[`NoticeBar NoticeBar custom demo works fine 1`] = `
 exports[`NoticeBar NoticeBar customization demo works fine 1`] = `
 <customization>
   <t-notice-bar
-    suffixIcon="slot"
     visible="{{true}}"
   >
     <wx-view
+      class="inline"
       slot="content"
     >
-
-    提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述
-
-      <wx-view
-        class="extra"
-      >
-        <t-link
-          content="详情"
-          navigatorProps="{{
-            Object {
-              "url": "/pages/xxx/xxx",
-            }
-          }}"
-          theme="primary"
-        />
-      </wx-view>
+       提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述 
     </wx-view>
-    <wx-view
+    <t-link
+      content="详情"
+      navigatorProps="{{
+        Object {
+          "url": "/pages/xxx/xxx",
+        }
+      }}"
+      slot="operation"
+      theme="primary"
+      underline="{{false}}"
+    />
+    <t-icon
+      name="close"
+      size="44rpx"
       slot="suffix-icon"
-    >
-      <t-icon
-        name="close"
-        size="44rpx"
-      />
-    </wx-view>
+    />
   </t-notice-bar>
 </customization>
 `;
@@ -69,21 +62,21 @@ exports[`NoticeBar NoticeBar event demo works fine 1`] = `
     bind:click="click"
   >
     <wx-view
+      class="inline"
       slot="content"
     >
        这是一条普通的通知信息 
     </wx-view>
     <t-link
-      class="extra"
       content="详情"
       navigatorProps="{{
         Object {
           "url": "/pages/xxx/xxx",
         }
       }}"
-      slot="extra"
+      slot="operation"
       theme="primary"
-      underline="{{true}}"
+      underline="{{false}}"
     />
   </t-notice-bar>
   <t-notice-bar

src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap

@@ -27,7 +27,7 @@ exports[`notice-bar props : marquee 1`] = `
             bind:tap="onTap"
           >
             <wx-label
-              class="t-icon-error-circle-filled t-icon-base"
+              class="t-icon-info-circle-filled t-icon-base"
             />
           </wx-view>
         </t-icon>
@@ -63,13 +63,13 @@ exports[`notice-bar props : marquee 1`] = `
           }}"
           class="t-notice-bar__content t-class-content "
         >
-           提示文字描述提示文字描述提示文字描述提示文字描述文 
+          提示文字描述提示文字描述提示文字描述提示文字描述文
+          <wx-view
+            class="t-notice-bar__operation t-class-operation"
+            catch:tap="clickOperation"
+          />
         </wx-view>
       </wx-view>
-      <wx-view
-        class="t-notice-bar__extra t-class-extra"
-        bind:tap="clickExtra"
-      />
       <wx-view
         class="t-notice-bar__suffix-icon"
         bind:tap="clickSuffixIcon"

src/notice-bar/__test__/index.test.js

@@ -129,15 +129,15 @@ describe('notice-bar', () => {
       expect($content.dom.textContent.trim()).toBe($noticeBar.instance.data.content);
     });
 
-    it(': extra', () => {
+    it(': operation', () => {
       const id = simulate.load({
         template: `<t-notice-bar
           class="base"
           visible="{{visible}}"
-          extra="{{extra}}"></t-notice-bar>`,
+          operation="{{operation}}"></t-notice-bar>`,
         data: {
           visible: true,
-          extra: 'notice-bar extra',
+          operation: 'notice-bar operation',
         },
         usingComponents: {
           't-notice-bar': noticeBar,
@@ -146,9 +146,9 @@ describe('notice-bar', () => {
       const comp = simulate.render(id);
       comp.attach(document.createElement('parent-wrapper'));
       const $noticeBar = comp.querySelector('.base');
-      const $extra = comp.querySelector('.base >>> .t-notice-bar__extra');
+      const $operation = comp.querySelector('.base >>> .t-notice-bar__operation');
 
-      expect($extra.dom.textContent.trim()).toBe($noticeBar.instance.data.extra);
+      expect($operation.dom.textContent.trim()).toBe($noticeBar.instance.data.operation);
     });
 
     it(': prefix-icon', () => {
@@ -262,7 +262,7 @@ describe('notice-bar', () => {
           class="base
           visible="{{visible}}"
           suffixIcon="chevron-right"
-          extra="详情"
+          operation="详情"
           content="提示文字描述提示文字描述提示文字描述"
           bind:click="click"
         ></t-notice-bar>`,
@@ -279,26 +279,21 @@ describe('notice-bar', () => {
       const comp = simulate.render(id);
       comp.attach(document.createElement('parent-wrapper'));
       const $prefixIcon = comp.querySelector('.base >>> .t-notice-bar__prefix-icon');
-      const $content = comp.querySelector('.base >>> .t-notice-bar__content');
-      const $extra = comp.querySelector('.base >>> .t-notice-bar__extra');
+      const $operation = comp.querySelector('.base >>> .t-notice-bar__operation');
       const $suffixIcon = comp.querySelector('.base >>> .t-notice-bar__suffix-icon');
       $prefixIcon.dispatchEvent('tap');
       await simulate.sleep(0);
       expect(triggerName).toBe('prefix-icon');
       expect(click).toHaveBeenCalledTimes(1);
-      $content.dispatchEvent('tap');
+      $operation.dispatchEvent('tap');
       await simulate.sleep(0);
-      expect(triggerName).toBe('content');
+      expect(triggerName).toBe('operation');
       expect(click).toHaveBeenCalledTimes(2);
-      $extra.dispatchEvent('tap');
-      await simulate.sleep(0);
-      expect(triggerName).toBe('extra');
-      expect(click).toHaveBeenCalledTimes(3);
 
       $suffixIcon.dispatchEvent('tap');
       await simulate.sleep(0);
       expect(triggerName).toBe('suffix-icon');
-      expect(click).toHaveBeenCalledTimes(4);
+      expect(click).toHaveBeenCalledTimes(3);
     });
   });
 });

src/notice-bar/_example/customization/index.wxml

@@ -1,12 +1,6 @@
 <!-- slot实现自定义content内容 -->
-<t-notice-bar visible="{{true}}" suffixIcon="slot">
-  <view slot="content">
-    提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述
-    <view class="extra">
-      <t-link content="详情" theme="primary" navigator-props="{{navigatorProps}}" />
-    </view>
-  </view>
-  <view slot="suffix-icon">
-    <t-icon name="close" size="44rpx"></t-icon>
-  </view>
+<t-notice-bar visible="{{true}}">
+  <view slot="content" class="inline"> 提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述 </view>
+  <t-link slot="operation" content="详情" theme="primary" underline="{{false}}" navigator-props="{{navigatorProps}}" />
+  <t-icon slot="suffix-icon" name="close" size="44rpx"></t-icon>
 </t-notice-bar>

src/notice-bar/_example/customization/index.wxss

@@ -1,5 +1,3 @@
-.extra {
-  display: inline-block;
-  font-weight: 700;
-  color: #0052d9;
+.inline {
+  display: inline;
 }

src/notice-bar/_example/event/index.wxml

@@ -1,6 +1,6 @@
 <t-notice-bar visible="{{visible}}" suffixIcon="chevron-right" bind:click="click">
-  <view slot="content"> 这是一条普通的通知信息 </view>
-  <t-link slot="extra" class="extra" content="详情" theme="primary" underline navigator-props="{{navigatorProps}}" />
+  <view slot="content" class="inline"> 这是一条普通的通知信息 </view>
+  <t-link slot="operation" content="详情" theme="primary" underline="{{false}}" navigator-props="{{navigatorProps}}" />
 </t-notice-bar>
 
 <t-notice-bar