feat: Bubble support more variant (#140)

* feat: variant * test: update snapshot * chore: fix lint * chore: force * chore: rm lock file * chore: back of package.json
ant-design · Oct 9, 2024 · 636eaba · 636eaba
1 parent e6e7561
commit 636eaba
Show file tree

Hide file tree

Showing 7 changed files with 556 additions and 282 deletions.
diff --git a/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
diff --git a/components/bubble/__tests__/__snapshots__/demo.test.ts.snap b/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/bubble/demo/variant.tsx b/components/bubble/demo/variant.tsx
@@ -1,5 +1,6 @@
 import { CoffeeOutlined, FireOutlined, SmileOutlined, UserOutlined } from '@ant-design/icons';
 import { Bubble, Prompts, PromptsProps } from '@ant-design/x';
+import { Flex } from 'antd';
 import React from 'react';
 
 const items: PromptsProps['items'] = [
@@ -21,11 +22,16 @@ const items: PromptsProps['items'] = [
 ];
 
 const App = () => (
-  <Bubble
-    variant="borderless"
-    avatar={{ icon: <UserOutlined /> }}
-    content={<Prompts items={items} vertical />}
-  />
+  <Flex vertical gap="middle">
+    <Bubble variant="filled" avatar={{ icon: <UserOutlined /> }} content="variant: filled" />
+    <Bubble variant="outlined" avatar={{ icon: <UserOutlined /> }} content="variant: outlined" />
+    <Bubble variant="shadow" avatar={{ icon: <UserOutlined /> }} content="variant: shadow" />
+    <Bubble
+      variant="borderless"
+      avatar={{ icon: <UserOutlined /> }}
+      content={<Prompts title="variant: borderless to customize" items={items} vertical />}
+    />
+  </Flex>
 );
 
 export default App;
diff --git a/components/bubble/interface.ts b/components/bubble/interface.ts
@@ -24,6 +24,6 @@ export interface BubbleProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   typing?: boolean | TypingOption;
   content?: React.ReactNode | object;
   messageRender?: (content: string) => React.ReactNode;
-  variant?: 'filled' | 'borderless';
+  variant?: 'filled' | 'borderless' | 'outlined' | 'shadow';
   onTypingComplete?: VoidFunction;
 }
diff --git a/components/bubble/style/index.ts b/components/bubble/style/index.ts
@@ -3,6 +3,7 @@ import { mergeToken } from '@ant-design/cssinjs-utils';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/cssinjs-utils';
 import { genStyleHooks } from '../../theme/genStyleUtils';
 import genBubbleListStyle from './list';
+import genVariantStyle from './variant';
 
 const loadingMove = new Keyframes('loadingMove', {
   '0%': {
@@ -42,8 +43,7 @@ export interface BubbleToken extends FullToken<'Bubble'> {
 }
 
 const genBubbleStyle: GenerateStyle<BubbleToken> = (token) => {
-  const { componentCls, fontSize, lineHeight, paddingSM, padding, paddingXS, colorText, calc } =
-    token;
+  const { componentCls, fontSize, lineHeight, paddingSM, paddingXS, colorText, calc } = token;
   return {
     [componentCls]: {
       display: 'flex',
@@ -84,14 +84,6 @@ const genBubbleStyle: GenerateStyle<BubbleToken> = (token) => {
 
         wordBreak: 'break-word',
 
-        // Variant
-        '&-filled': {
-          padding: `${unit(paddingSM)} ${unit(padding)}`,
-          backgroundColor: token.colorInfoBg,
-          borderRadius: token.borderRadiusLG,
-          boxShadow: token.boxShadowTertiary,
-        },
-
         [`& ${componentCls}-dot`]: {
           position: 'relative',
           height: '100%',
@@ -133,7 +125,11 @@ export default genStyleHooks<'Bubble'>(
     const bubbleToken = mergeToken<BubbleToken>(token, {
       bubbleContentMaxWidth: `calc(100% - ${unit(calc(paddingXS).add(32).equal())})`,
     });
-    return [genBubbleStyle(bubbleToken), genBubbleListStyle(bubbleToken)];
+    return [
+      genBubbleStyle(bubbleToken),
+      genBubbleListStyle(bubbleToken),
+      genVariantStyle(bubbleToken),
+    ];
   },
   prepareComponentToken,
 );
diff --git a/components/bubble/style/variant.ts b/components/bubble/style/variant.ts
@@ -0,0 +1,35 @@
+import { unit } from '@ant-design/cssinjs';
+import type { BubbleToken } from '.';
+import type { GenerateStyle } from '../../theme/cssinjs-utils';
+
+const genVariantStyle: GenerateStyle<BubbleToken> = (token) => {
+  const { componentCls, paddingSM, padding } = token;
+  return {
+    [componentCls]: {
+      [`${componentCls}-content`]: {
+        // Shared: filled, outlined, shadow
+        '&-filled,&-outlined,&-shadow': {
+          padding: `${unit(paddingSM)} ${unit(padding)}`,
+          borderRadius: token.borderRadiusLG,
+        },
+
+        // Filled:
+        '&-filled': {
+          backgroundColor: token.colorFillContent,
+        },
+
+        // Outlined:
+        '&-outlined': {
+          border: `1px solid ${token.colorBorderSecondary}`,
+        },
+
+        // Shadow:
+        '&-shadow': {
+          boxShadow: token.boxShadowTertiary,
+        },
+      },
+    },
+  };
+};
+
+export default genVariantStyle;
diff --git a/components/prompts/style/index.ts b/components/prompts/style/index.ts
@@ -18,7 +18,10 @@ const genPromptsStyle: GenerateStyle<PromptsToken> = (token) => {
       [`&${componentCls}-rtl`]: {
         direction: 'rtl',
       },
-      [`& ${componentCls}-title`]: {},
+      [`& ${componentCls}-title`]: {
+        marginBlockStart: 0,
+      },
+
       [`& ${componentCls}-list`]: {
         display: 'flex',
         gap: token.paddingSM,