From 32ddbe775a97df08944c19f3d9d54439f26f5936 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F=20Imer?= <98121322+YumoImer@users.noreply.github.com> Date: Mon, 9 Dec 2024 10:39:08 +0800 Subject: [PATCH] refactor: Bubble style (#314) * fix: Bubble width overflow problem * refactor: bubble style - docs: add debug demo * test: update snapshot for debug demo * docs: add basic placement: end demo --- .../__snapshots__/demo-extend.test.ts.snap | 607 ++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 605 +++++++++++++++++ components/bubble/demo/debug.md | 7 + components/bubble/demo/debug.tsx | 127 ++++ components/bubble/index.en-US.md | 1 + components/bubble/index.zh-CN.md | 1 + components/bubble/style/index.ts | 9 +- 7 files changed, 1356 insertions(+), 1 deletion(-) create mode 100644 components/bubble/demo/debug.md create mode 100644 components/bubble/demo/debug.tsx diff --git a/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap index cafb1770..6df281c9 100644 --- a/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -403,6 +403,613 @@ exports[`renders components/bubble/demo/bubble-custom.tsx extend context correct exports[`renders components/bubble/demo/bubble-custom.tsx extend context correctly 2`] = `[]`; +exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] = ` +
+ +
+
+ string bubble +
+
+
+
+ longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg +
+
+
+
+
+ block block block block block block block block block block block block block block block block block block block block block block block block block +
+
+
+
+
+
+ fixed width content +
+
+
+ +
+
+ string bubble +
+
+
+
+ longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg +
+
+
+
+
+ block block block block block block block block block block block block block block block block block block block block block block block block block +
+
+
+
+
+
+ fixed width content +
+
+
+ +
+
+ + + +
+
+
+ header +
+
+ string bubble +
+
+
+ footer +
+
+
+
+
+
+ + + +
+
+
+ header +
+
+ longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg +
+
+
+ footer +
+
+
+
+
+
+ + + +
+
+
+ header +
+
+
+ block block block block block block block block block block block block block block block block block block block block block block block block block +
+
+
+
+ footer +
+
+
+
+
+
+ + + +
+
+
+ header +
+
+
+ fixed width content +
+
+
+
+ footer +
+
+
+
+ +
+
+ + + +
+
+
+ header +
+
+ string bubble +
+
+
+ footer +
+
+
+
+
+
+ + + +
+
+
+ header +
+
+ longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg +
+
+
+ footer +
+
+
+
+
+
+ + + +
+
+
+ header +
+
+
+ block block block block block block block block block block block block block block block block block block block block block block block block block +
+
+
+
+ footer +
+
+
+
+
+
+ + + +
+
+
+ header +
+
+
+ fixed width content +
+
+
+
+ footer +
+
+
+
+ +
+
+
+ + + +
+
+
+ header +
+
+ string bubble +
+
+
+ footer +
+
+
+
+
+
+ + + +
+
+
+ header +
+
+ longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg +
+
+
+ footer +
+
+
+
+
+
+ + + +
+
+
+ header +
+
+
+ block block block block block block block block block block block block block block block block block block block block block block block block block +
+
+
+
+ footer +
+
+
+
+
+
+ + + +
+
+
+ header +
+
+
+ fixed width content +
+
+
+
+ footer +
+
+
+
+
+
+`; + +exports[`renders components/bubble/demo/debug.tsx extend context correctly 2`] = `[]`; + exports[`renders components/bubble/demo/header-and-footer.tsx extend context correctly 1`] = `
`; +exports[`renders components/bubble/demo/debug.tsx correctly 1`] = ` +
+ +
+
+ string bubble +
+
+
+
+ longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg +
+
+
+
+
+ block block block block block block block block block block block block block block block block block block block block block block block block block +
+
+
+
+
+
+ fixed width content +
+
+
+ +
+
+ string bubble +
+
+
+
+ longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg +
+
+
+
+
+ block block block block block block block block block block block block block block block block block block block block block block block block block +
+
+
+
+
+
+ fixed width content +
+
+
+ +
+
+ + + +
+
+
+ header +
+
+ string bubble +
+
+
+ footer +
+
+
+
+
+
+ + + +
+
+
+ header +
+
+ longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg +
+
+
+ footer +
+
+
+
+
+
+ + + +
+
+
+ header +
+
+
+ block block block block block block block block block block block block block block block block block block block block block block block block block +
+
+
+
+ footer +
+
+
+
+
+
+ + + +
+
+
+ header +
+
+
+ fixed width content +
+
+
+
+ footer +
+
+
+
+ +
+
+ + + +
+
+
+ header +
+
+ string bubble +
+
+
+ footer +
+
+
+
+
+
+ + + +
+
+
+ header +
+
+ longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg +
+
+
+ footer +
+
+
+
+
+
+ + + +
+
+
+ header +
+
+
+ block block block block block block block block block block block block block block block block block block block block block block block block block +
+
+
+
+ footer +
+
+
+
+
+
+ + + +
+
+
+ header +
+
+
+ fixed width content +
+
+
+
+ footer +
+
+
+
+ +
+
+
+ + + +
+
+
+ header +
+
+ string bubble +
+
+
+ footer +
+
+
+
+
+
+ + + +
+
+
+ header +
+
+ longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg +
+
+
+ footer +
+
+
+
+
+
+ + + +
+
+
+ header +
+
+
+ block block block block block block block block block block block block block block block block block block block block block block block block block +
+
+
+
+ footer +
+
+
+
+
+
+ + + +
+
+
+ header +
+
+
+ fixed width content +
+
+
+
+ footer +
+
+
+
+
+
+`; + exports[`renders components/bubble/demo/header-and-footer.tsx correctly 1`] = `
({ + container: css` + display: flex; + width: 100%; + flex-direction: column; + gap: ${token.padding}px; + `, + content: css` + background-color: ${token.colorPrimaryBg}; + `, + footer: css` + background-color: ${token.colorBgTextHover}; + `, + header: css` + background-color: ${token.colorBgTextHover}; + `, + avatar: css` + background-color: ${token.colorBgTextHover}; + `, + block: css` + background-color: ${token.colorBgTextHover}; + `, + fixedWidthBlock: css` + width: 1000px; + background-color: ${token.colorBgTextHover}; + `, +})); + +const App = () => { + const { styles } = useStyle(); + + const customizationProps: BubbleProps = { + header: 'header', + footer:
footer
, + avatar: { + src: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp', + }, + classNames: { + content: styles.content, + footer: styles.footer, + header: styles.header, + avatar: styles.avatar, + }, + }; + + const bubbleDict: Record<'string' | 'longString' | 'block' | 'fixedWidthBlock', BubbleProps> = { + string: { + content: 'string bubble', + variant: 'filled', + shape: 'corner', + }, + longString: { + content: + 'longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg', + variant: 'borderless', + }, + block: { + content: ( +
+ block block block block block block block block block block block block block block block + block block block block block block block block block block +
+ ), + variant: 'outlined', + shape: 'round', + }, + fixedWidthBlock: { + content:
fixed width content
, + variant: 'shadow', + }, + }; + + return ( +
+ Basic + + + + + Basic placement: end + + + + + Custom + + + + + Custom placement: end + + + + + List + +
+ ); +}; + +export default App; diff --git a/components/bubble/index.en-US.md b/components/bubble/index.en-US.md index 48705db7..e149fb33 100644 --- a/components/bubble/index.en-US.md +++ b/components/bubble/index.en-US.md @@ -18,6 +18,7 @@ Often used when chatting. ## Examples +debug Basic Placement and avatar Header and footer diff --git a/components/bubble/index.zh-CN.md b/components/bubble/index.zh-CN.md index 7985340e..948457ac 100644 --- a/components/bubble/index.zh-CN.md +++ b/components/bubble/index.zh-CN.md @@ -19,6 +19,7 @@ demo: ## 代码演示 +debug 基本 支持位置和头像 头和尾 diff --git a/components/bubble/style/index.ts b/components/bubble/style/index.ts index c45040fb..b7319603 100644 --- a/components/bubble/style/index.ts +++ b/components/bubble/style/index.ts @@ -46,10 +46,13 @@ const genBubbleStyle: GenerateStyle = (token) => { [componentCls]: { display: 'flex', columnGap: paddingSM, - maxWidth: '100%', [`&${componentCls}-end`]: { justifyContent: 'end', flexDirection: 'row-reverse', + + [`& ${componentCls}-content-wrapper`]: { + alignItems: 'flex-end', + }, }, [`&${componentCls}-rtl`]: { direction: 'rtl', @@ -94,11 +97,15 @@ const genBubbleStyle: GenerateStyle = (token) => { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', + minWidth: 0, + maxWidth: '100%', }, [`& ${componentCls}-content`]: { position: 'relative', boxSizing: 'border-box', + minWidth: 0, + maxWidth: '100%', color: colorText, fontSize: token.fontSize,