Skip to content

Commit

Permalink
feat: add default content-padding
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiexiejie @NeverEllipsis
xiexiejie authored and NeverEllipsis committed Dec 6, 2024
1 parent eb98130 commit 6bf2f15
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 131 deletions.
2 changes: 1 addition & 1 deletion packages/bui-core/src/Popover/Popover.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
84 changes: 18 additions & 66 deletions packages/bui-core/src/Popover/index.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,7 @@ import React from 'react';

export default () => {
return (
<Popover
title={<div style={{ padding: '2px 8px' }}>This is a title</div>}
content={<div style={{ padding: '2px 8px' }}>This is a content</div>}
>
<Popover title="This is a title" content="This is a content">
<span>click显示</span>
</Popover>
);
Expand All @@ -40,10 +37,7 @@ import React, { useState } from 'react';
export default () => {
const [open, setOpen] = useState(true);
return (
<Popover
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
open={open}
>
<Popover title="This is a popover" open={open}>
<span onClick={() => setOpen(!open)}>open控制显隐</span>
</Popover>
);
Expand All @@ -60,10 +54,7 @@ import React from 'react';

export default () => {
return (
<Popover
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
defaultOpen
>
<Popover title="This is a popover" defaultOpen>
<span>defaultOpen默认显示</span>
</Popover>
);
Expand All @@ -80,11 +71,7 @@ import React from 'react';

export default () => {
return (
<Popover
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
defaultOpen
hideArrow
>
<Popover title="This is a popover" defaultOpen hideArrow>
<span>defaultOpen默认显示</span>
</Popover>
);
Expand Down Expand Up @@ -118,25 +105,13 @@ export default () => {
justifyContent: 'space-between',
}}
>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
placement="topLeft"
>
<Popover trigger="hover" title="This is a popover" placement="topLeft">
{packageButton(<span>topLeft</span>)}
</Popover>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
placement="top"
>
<Popover trigger="hover" title="This is a popover" placement="top">
{packageButton(<span>top</span>)}
</Popover>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
placement="topRight"
>
<Popover trigger="hover" title="This is a popover" placement="topRight">
{packageButton(<span>topRight</span>)}
</Popover>
</div>
Expand All @@ -148,23 +123,15 @@ export default () => {
flexDirection: 'column',
}}
>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
placement="leftTop"
>
<Popover trigger="hover" title="This is a popover" placement="leftTop">
{packageButton(<span>leftTop</span>)}
</Popover>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
placement="left"
>
<Popover trigger="hover" title="This is a popover" placement="left">
{packageButton(<span>left</span>)}
</Popover>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
title="This is a popover"
placement="leftBottom"
>
{packageButton(<span>leftBottom</span>)}
Expand All @@ -178,23 +145,15 @@ export default () => {
flexDirection: 'column',
}}
>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
placement="rightTop"
>
<Popover trigger="hover" title="This is a popover" placement="rightTop">
{packageButton(<span>rightTop</span>)}
</Popover>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
placement="right"
>
<Popover trigger="hover" title="This is a popover" placement="right">
{packageButton(<span>right</span>)}
</Popover>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
title="This is a popover"
placement="rightBottom"
>
{packageButton(<span>rightBottom</span>)}
Expand All @@ -211,21 +170,17 @@ export default () => {
>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
title="This is a popover"
placement="bottomLeft"
>
{packageButton(<span>bottomLeft</span>)}
</Popover>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
placement="bottom"
>
<Popover trigger="hover" title="This is a popover" placement="bottom">
{packageButton(<span>bottom</span>)}
</Popover>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
title="This is a popover"
placement="bottomRight"
>
{packageButton(<span>bottomRight</span>)}
Expand All @@ -246,10 +201,7 @@ import React from 'react';

export default () => {
return (
<Popover
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
trigger="hover"
>
<Popover title="This is a popover" trigger="hover">
<span>hover触发方式</span>
</Popover>
);
Expand All @@ -268,7 +220,7 @@ export default () => {
};
return (
<Popover
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
title="This is a popover"
trigger="hover"
onOpenChange={onOpenChange}
>
Expand Down
84 changes: 20 additions & 64 deletions packages/bui-core/src/Popover/index.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,9 @@ import React from 'react';
export default () => {
return (
<Popover
title={<div style={{ padding: '2px 8px' }}>This is a title</div>}
content={<div style={{ padding: '2px 8px' }}>This is a content</div>}
title="This is a title"
content="This is a content"
placement="topLeft"
>
<span>click显示</span>
</Popover>
Expand All @@ -40,10 +41,7 @@ import React, { useState } from 'react';
export default () => {
const [open, setOpen] = useState(true);
return (
<Popover
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
open={open}
>
<Popover title="This is a popover" open={open}>
<span onClick={() => setOpen(!open)}>open控制显隐</span>
</Popover>
);
Expand All @@ -60,10 +58,7 @@ import React from 'react';

export default () => {
return (
<Popover
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
defaultOpen
>
<Popover title="This is a popover" defaultOpen>
<span>defaultOpen默认显示</span>
</Popover>
);
Expand All @@ -80,11 +75,7 @@ import React from 'react';

export default () => {
return (
<Popover
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
defaultOpen
hideArrow
>
<Popover title="This is a popover" defaultOpen hideArrow>
<span>defaultOpen默认显示</span>
</Popover>
);
Expand Down Expand Up @@ -118,25 +109,13 @@ export default () => {
justifyContent: 'space-between',
}}
>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
placement="topLeft"
>
<Popover trigger="hover" title="This is a popover" placement="topLeft">
{packageButton(<span>topLeft</span>)}
</Popover>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
placement="top"
>
<Popover trigger="hover" title="This is a popover" placement="top">
{packageButton(<span>top</span>)}
</Popover>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
placement="topRight"
>
<Popover trigger="hover" title="This is a popover" placement="topRight">
{packageButton(<span>topRight</span>)}
</Popover>
</div>
Expand All @@ -148,23 +127,15 @@ export default () => {
flexDirection: 'column',
}}
>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
placement="leftTop"
>
<Popover trigger="hover" title="This is a popover" placement="leftTop">
{packageButton(<span>leftTop</span>)}
</Popover>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
placement="left"
>
<Popover trigger="hover" title="This is a popover" placement="left">
{packageButton(<span>left</span>)}
</Popover>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
title="This is a popover"
placement="leftBottom"
>
{packageButton(<span>leftBottom</span>)}
Expand All @@ -178,23 +149,15 @@ export default () => {
flexDirection: 'column',
}}
>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
placement="rightTop"
>
<Popover trigger="hover" title="This is a popover" placement="rightTop">
{packageButton(<span>rightTop</span>)}
</Popover>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
placement="right"
>
<Popover trigger="hover" title="This is a popover" placement="right">
{packageButton(<span>right</span>)}
</Popover>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
title="This is a popover"
placement="rightBottom"
>
{packageButton(<span>rightBottom</span>)}
Expand All @@ -211,21 +174,17 @@ export default () => {
>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
title="This is a popover"
placement="bottomLeft"
>
{packageButton(<span>bottomLeft</span>)}
</Popover>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
placement="bottom"
>
<Popover trigger="hover" title="This is a popover" placement="bottom">
{packageButton(<span>bottom</span>)}
</Popover>
<Popover
trigger="hover"
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
title="This is a popover"
placement="bottomRight"
>
{packageButton(<span>bottomRight</span>)}
Expand All @@ -246,10 +205,7 @@ import React from 'react';

export default () => {
return (
<Popover
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
trigger="hover"
>
<Popover title="This is a popover" trigger="hover">
<span>hover触发方式</span>
</Popover>
);
Expand All @@ -268,7 +224,7 @@ export default () => {
};
return (
<Popover
title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
title="This is a popover"
trigger="hover"
onOpenChange={onOpenChange}
>
Expand Down

0 comments on commit 6bf2f15

Please sign in to comment.