feat(Badge): the shape attr add four optional values

packages/components/badge/README.en-US.md

@@ -13,8 +13,8 @@ content | String | - | \- | N
 count | String / Number | 0 | \- | N
 dot | Boolean | false | \- | N
 max-count | Number | 99 | \- | N
-offset | Array | - | Typescript：`Array<string \| number>` | N
-shape | String | circle | options: circle/square/bubble/ribbon | N
+offset | Array | - | Typescript: `Array<string \| number>` | N
+shape | String | circle | options: circle/square/bubble/ribbon/ribbon-right/ribbon-left/triangle-right/triangle-left | N
 show-zero | Boolean | false | \- | N
 size | String | medium | options: medium/large | N
 

packages/components/badge/README.md

@@ -55,7 +55,7 @@ count | String / Number | 0 | 徽标右上角内容。可以是数字，也可
 dot | Boolean | false | 是否为红点 | N
 max-count | Number | 99 | 封顶的数字值 | N
 offset | Array | - | 设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array<string \| number>` | N
-shape | String | circle | 形状。可选项：circle/square/bubble/ribbon | N
+shape | String | circle | 徽标形状，其中 ribbon 和 ribbon-right 等效。可选项：circle/square/bubble/ribbon/ribbon-right/ribbon-left/triangle-right/triangle-left | N
 show-zero | Boolean | false | 当数值为 0 时，是否展示徽标 | N
 size | String | medium | 尺寸。可选项：medium/large | N
 

packages/components/badge/__test__/__snapshots__/demo.test.js.snap

@@ -152,7 +152,7 @@ exports[`Badge Badge size demo works fine 1`] = `
   <wx-view
     class="demo-desc"
   >
-    Middle
+    Medium
   </wx-view>
   <wx-view
     class="block"
@@ -256,7 +256,24 @@ exports[`Badge Badge theme demo works fine 1`] = `
     title="单行标题"
   >
     <t-badge
-      count="New"
+      count="NEW"
+      offset="{{
+        Array [
+          0,
+          0,
+        ]
+      }}"
+      shape="ribbon-left"
+      slot="note"
+    />
+  </t-cell>
+  <t-cell
+    bordered="{{false}}"
+    tClass="t-class-cell"
+    title="单行标题"
+  >
+    <t-badge
+      count="NEW"
       offset="{{
         Array [
           0,
@@ -267,5 +284,44 @@ exports[`Badge Badge theme demo works fine 1`] = `
       slot="note"
     />
   </t-cell>
+  <wx-view
+    class="demo-desc"
+    style="margin-bottom: 32rpx"
+  >
+    三角角标
+  </wx-view>
+  <t-cell
+    tClass="t-class-cell"
+    title="单行标题"
+  >
+    <t-badge
+      count="NEW"
+      offset="{{
+        Array [
+          0,
+          0,
+        ]
+      }}"
+      shape="triangle-left"
+      slot="note"
+    />
+  </t-cell>
+  <t-cell
+    bordered="{{false}}"
+    tClass="t-class-cell"
+    title="单行标题"
+  >
+    <t-badge
+      count="NEW"
+      offset="{{
+        Array [
+          0,
+          0,
+        ]
+      }}"
+      shape="triangle-right"
+      slot="note"
+    />
+  </t-cell>
 </theme>
 `;

packages/components/badge/_example/size/index.wxml

@@ -4,7 +4,7 @@
   <t-avatar icon="user" size="large" badge-props="{{ {count: 8, size: 'large', offset: [7, 7]} }}" />
 </view>
 
-<view class="demo-desc">Middle</view>
+<view class="demo-desc">Medium</view>
 
 <view class="block">
   <t-avatar icon="user" badge-props="{{ {count: 8, offset: [5, 5]} }}" />

packages/components/badge/_example/theme/index.wxml

@@ -28,5 +28,16 @@
 
 <view class="demo-desc" style="margin-bottom: 32rpx">角标</view>
 <t-cell title="单行标题" t-class="t-class-cell">
-  <t-badge count="New" offset="{{skylineRender ? ['-16rpx', '-56rpx']: [0, 0]}}" shape="ribbon" slot="note" />
+  <t-badge count="NEW" offset="{{skylineRender ? ['-18rpx', '-32rpx']: [0, 0]}}" shape="ribbon-left" slot="note" />
+</t-cell>
+<t-cell title="单行标题" bordered="{{false}}" t-class="t-class-cell">
+  <t-badge count="NEW" offset="{{skylineRender ? ['-18rpx', '-32rpx']: [0, 0]}}" shape="ribbon" slot="note" />
+</t-cell>
+
+<view class="demo-desc" style="margin-bottom: 32rpx">三角角标</view>
+<t-cell title="单行标题" t-class="t-class-cell">
+  <t-badge count="NEW" offset="{{skylineRender ? ['-24rpx', '-32rpx']: [0, 0]}}" shape="triangle-left" slot="note" />
+</t-cell>
+<t-cell title="单行标题" bordered="{{false}}" t-class="t-class-cell">
+  <t-badge count="NEW" offset="{{skylineRender ? ['-24rpx', '-32rpx']: [0, 0]}}" shape="triangle-right" slot="note" />
 </t-cell>

packages/components/badge/badge.less

@@ -49,46 +49,87 @@
     border-radius: calc(@badge-basic-height / 2);
   }
 
-  &__ribbon {
+  &__ribbon,
+  &__ribbon-right,
+  &__triangle-right,
+  &__ribbon-left,
+  &__triangle-left {
     &-outer {
       position: absolute;
       top: 0;
+    }
+  }
+
+  &__ribbon,
+  &__ribbon-right,
+  &__triangle-right {
+    &-outer {
       right: 0;
     }
   }
 
-  &--ribbon {
-    position: relative;
-    display: inline-block;
-    transform-origin: center center;
-    transform: translate(calc(50% - @badge-basic-height + 1rpx), calc(-50% + @badge-basic-height - 1rpx)) rotate(45deg);
+  &__ribbon-left,
+  &__triangle-left {
+    &-outer {
+      left: 0;
+    }
+  }
+
+  &--bubble {
+    border-radius: @border-bubble-border-radius;
+  }
+
+  &--ribbon,
+  &--ribbon-right,
+  &--ribbon-left,
+  &--triangle-left,
+  &--triangle-right {
+    width: calc(@badge-basic-height * 2);
+    height: calc(@badge-basic-height * 2);
     border-radius: 0;
-    // padding: 0;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
 
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-      width: 0;
-      height: 0;
-      bottom: 0;
-      border-bottom: @badge-basic-height solid @badge-color;
-      font-size: 0;
-    }
+  &--ribbon,
+  &--ribbon-right {
+    background: linear-gradient(45deg, transparent 50%, @badge-color 50%, @badge-color 85%, transparent 85%);
+  }
 
-    &::before {
-      left: calc(-1 * @badge-basic-height + 1rpx);
-      border-left: @badge-basic-height solid transparent;
-    }
+  &--triangle-right {
+    background: linear-gradient(45deg, transparent 50%, @badge-color 50%);
+  }
+
+  &--ribbon,
+  &--ribbon-right,
+  &--triangle-right {
+    right: 0;
 
-    &::after {
-      right: calc(-1 * @badge-basic-height + 1rpx);
-      border-right: @badge-basic-height solid transparent;
+    .@{prefix}-badge__count {
+      transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2 + 1rpx));
     }
   }
 
-  &--bubble {
-    border-radius: @border-bubble-border-radius;
+  &--ribbon-left {
+    background: linear-gradient(-45deg, transparent 50%, @badge-color 50%, @badge-color 85%, transparent 85%);
+  }
+
+  &--triangle-left {
+    background: linear-gradient(-45deg, transparent 50%, @badge-color 50%);
+  }
+
+  &--ribbon-left,
+  &--triangle-left {
+    left: 0;
+
+    .@{prefix}-badge__count {
+      transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2 + 1rpx));
+    }
   }
 
   // size
@@ -103,17 +144,50 @@
     border-radius: calc(@badge-large-height / 2);
   }
 
-  &__content:not(:empty) + .t-has-count {
+  &--large&--ribbon,
+  &--large&--ribbon-right,
+  &--large&--ribbon-left,
+  &--large&--triangle-right,
+  &--large&--triangle-left {
+    width: calc(@badge-large-height * 2);
+    height: calc(@badge-large-height * 2);
+    padding: 0;
+  }
+
+  &--large&--ribbon,
+  &--large&--ribbon-right,
+  &--large&--triangle-right {
+    .@{prefix}-badge__count {
+      transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 40rpx) / 2 + 3rpx));
+    }
+  }
+
+  &--large&--ribbon-left,
+  &--large&--triangle-left {
+    .@{prefix}-badge__count {
+      transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 40rpx) / 2 + 3rpx));
+    }
+  }
+
+  &__content:not(:empty) + &--bubble.@{prefix}-has-count,
+  &__content:not(:empty) + &--circle.@{prefix}-has-count,
+  &__content:not(:empty) + &--square.@{prefix}-has-count {
     transform-origin: center center;
     transform: translate(-50%, -50%);
     position: absolute;
-    left: 100%;
     top: 0;
+    left: 100%;
   }
 
   &__content-text {
     display: block;
     font: @font-body-large;
     color: @badge-content-text-color;
   }
+
+  &__count {
+    &:empty {
+      display: none;
+    }
+  }
 }

packages/components/badge/badge.ts

@@ -2,7 +2,7 @@ import { SuperComponent, wxComponent } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
 import type { TdBadgeProps } from './type';
-import { uniqueFactory } from '../common/utils';
+import { uniqueFactory, getRect } from '../common/utils';
 
 const { prefix } = config;
 const name = `${prefix}-badge`;
@@ -26,15 +26,34 @@ export default class Badge extends SuperComponent {
     value: '',
     labelID: '',
     descriptionID: '',
+    useOuterClass: false,
   };
 
   lifetimes = {
     ready() {
       const uniqueID = getUniqueID();
+
       this.setData({
         labelID: `${uniqueID}_label`,
         descriptionID: `${uniqueID}_description`,
       });
+
+      this.checkForActualContent();
+    },
+  };
+
+  methods = {
+    checkForActualContent() {
+      const target = ['ribbon', 'ribbon-right', 'ribbon-left', 'triangle-right', 'triangle-left'];
+      if (this.properties.content || !target.includes(this.properties.shape)) {
+        this.setData({ useOuterClass: false });
+        return;
+      }
+
+      return getRect(this, `.${name}__content`).then((rect) => {
+        const hasSlotContent = rect.width > 0 || rect.height > 0;
+        this.setData({ useOuterClass: !hasSlotContent });
+      });
     },
   };
 }

packages/components/badge/badge.wxml

@@ -9,7 +9,7 @@
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{_this.getBadgeOuterClass({classPrefix, shape})}} class {{prefix}}-class"
+  class="{{classPrefix}} {{ useOuterClass? classPrefix + '__' + shape + '-outer': '' }} class {{prefix}}-class"
   aria-labelledby="{{labelID}}"
   aria-describedby="{{descriptionID}}"
   aria-role="{{ ariaRole || 'option'}}"
@@ -28,9 +28,11 @@
     aria-hidden="true"
     aria-label="{{ ariaLabel || _.getBadgeAriaLabel({dot, count, maxCount}) }}"
   >
-    <block wx:if="{{_this.isShowBadge({dot,count,showZero})}}">
-      {{ _this.getBadgeValue({dot, count, maxCount}) }}
-    </block>
-    <slot else name="count" />
+    <view class="{{classPrefix}}__count">
+      <block wx:if="{{_this.isShowBadge({dot,count,showZero})}}">
+        {{ _this.getBadgeValue({dot, count, maxCount}) }}
+      </block>
+      <slot else name="count" />
+    </view>
   </view>
 </view>

packages/components/badge/badge.wxs

@@ -35,12 +35,6 @@ var getBadgeStyles = function (props) {
   return styleStr;
 };
 
-var getBadgeOuterClass = function (props) {
-  var baseClass = props.classPrefix;
-  var classNames = [baseClass, props.shape === 'ribbon' ? baseClass + '__ribbon-outer' : ''];
-  return classNames.join(' ');
-};
-
 var getBadgeInnerClass = function (props) {
   var baseClass = props.classPrefix;
   var classNames = [
@@ -66,6 +60,5 @@ var isShowBadge = function (props) {
 
 module.exports.getBadgeValue = getBadgeValue;
 module.exports.getBadgeStyles = getBadgeStyles;
-module.exports.getBadgeOuterClass = getBadgeOuterClass;
 module.exports.getBadgeInnerClass = getBadgeInnerClass;
 module.exports.isShowBadge = isShowBadge;

packages/components/badge/props.ts

@@ -35,7 +35,7 @@ const props: TdBadgeProps = {
   offset: {
     type: Array,
   },
-  /** 形状 */
+  /** 徽标形状，其中 ribbon 和 ribbon-right 等效 */
   shape: {
     type: String,
     value: 'circle',