Merge pull request #68 from alibaba/releases/1223

Releases/1223 组件功能、文档优化

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.2",
+  "version": "1.4.3-beta.0",
   "npmClient": "pnpm",
   "packages": ["packages/*"],
   "command": {

packages/bui-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bifrostui/react",
-  "version": "1.4.2",
+  "version": "1.4.3-beta.0",
   "description": "React components for building mobile application",
   "homepage": "http://bui.taopiaopiao.com",
   "license": "MIT",

packages/bui-core/src/Badge/__tests__/__snapshots__/Badge.snapshot.test.tsx.snap

@@ -65,13 +65,39 @@ exports[`Badge snapshot Badge demo snapshot 0 2`] = `
   }
 >
   <div
-    className="bui-badge"
+    className="bui-badge bui-badge-position"
   >
     <div
       className="bui-badge-primary bui-badge-contained bui-badge-standard"
     >
       1
     </div>
+    <div
+      className="bui-avatar bui-avatar-medium bui-avatar-rounded"
+    >
+      <div
+        className="bui-image bui-avatar-img"
+        style={
+          Object {
+            "height": undefined,
+            "width": undefined,
+          }
+        }
+      >
+        <img
+          className="bui-image-img bui-image-loaded"
+          loading="eager"
+          onError={[Function]}
+          onLoad={[Function]}
+          src="//perico.damai.cn/userheadphotos/927551/185510204.jpg"
+          style={
+            Object {
+              "objectFit": "cover",
+            }
+          }
+        />
+      </div>
+    </div>
   </div>
 </div>
 `;

packages/bui-core/src/Badge/index.zh-CN.md

@@ -36,13 +36,15 @@ export default () => {
 ##### 圆形徽章
 
 ```tsx
-import { Badge, Stack } from '@bifrostui/react';
+import { Avatar, Badge, Stack } from '@bifrostui/react';
 import React from 'react';
 
 export default () => {
   return (
     <Stack>
-      <Badge content="1" type="standard" />
+      <Badge content="1" type="standard">
+        <Avatar src="//perico.damai.cn/userheadphotos/927551/185510204.jpg" />
+      </Badge>
     </Stack>
   );
 };

packages/bui-core/src/Input/Input.less

@@ -41,6 +41,7 @@
 
   &-input {
     flex: 1;
+    min-width: 0;
     display: flex;
     align-items: center;
     padding: 0;
@@ -50,15 +51,13 @@
     outline: none;
     background-color: var(--background-color);
     font-size: var(--bui-text-size-2);
-    .ellipsis();
 
     &::placeholder {
       color: var(--bui-color-fg-subtle);
     }
   }
 
   &-disabled {
-    pointer-events: none;
     background-color: var(--disabled-background-color);
 
     .bui-input-input {

packages/bui-core/src/Popover/Popover.less

@@ -40,7 +40,7 @@
   --localtion-position: var(--bui-popover-localtion-position, 8PX);
   --max-width: var(--bui-popover-max-width, 350px);
   --content-min-width: var(--bui-popover-content-min-width, 30px);
-  --content-padding: var(--bui-popover-content-padding, 0);
+  --content-padding: var(--bui-popover-content-padding, 6px 8px);
   max-width: var(--max-width);
   font-size: var(--bui-text-size-1);
   position: absolute;

packages/bui-core/src/Popover/Popover.tsx

@@ -3,6 +3,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import {
   getStylesAndLocation,
   triggerEventTransform,
+  parsePlacement,
   useUniqueId,
   throttle,
 } from '@bifrostui/utils';
@@ -20,6 +21,7 @@ const Popover = React.forwardRef<HTMLDivElement, PopoverProps>((props, ref) => {
     title,
     content,
     defaultOpen,
+    offsetSpacing = 0,
     placement = 'top',
     trigger = 'click',
     onOpenChange,
@@ -29,16 +31,7 @@ const Popover = React.forwardRef<HTMLDivElement, PopoverProps>((props, ref) => {
   } = props;
 
   const controlByUser = typeof open !== 'undefined';
-  const positionArr = placement.split(/([A-Z])/);
-  const direction = positionArr[0];
-  let location;
-  if (positionArr.length > 1) {
-    positionArr.splice(0, 1);
-    location = positionArr.join('').toLowerCase();
-  } else {
-    location = 'center';
-  }
-
+  const { direction, location = 'center' } = parsePlacement(placement);
   const childrenRef = useRef<Element>();
   const [openStatus, setOpenStatus] = useState(defaultOpen);
   // 气泡所在位置
@@ -82,10 +75,15 @@ const Popover = React.forwardRef<HTMLDivElement, PopoverProps>((props, ref) => {
   };
 
   const onRootElementMouted = throttle(() => {
+    const {
+      direction: newParsedDirection,
+      location: newParsedLocation = 'center',
+    } = parsePlacement(placement);
     const result = getStylesAndLocation({
       childrenRef,
-      arrowDirection,
-      arrowLocation,
+      arrowDirection: newParsedDirection,
+      arrowLocation: newParsedLocation,
+      offsetSpacing,
       selector: `[data-id="tt_${ttId}"]`,
     });
     if (!result) return;

packages/bui-core/src/Popover/Popover.types.ts

@@ -31,6 +31,10 @@ export type PopoverProps<
        * @default false
        */
       hideArrow?: boolean;
+      /**
+       * 用于控制浮层和目标元素偏移量
+       */
+      offsetSpacing?: number;
       /**
        * 气泡框位置
        * @default 'top'