Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improve(ui): ProCard border-radius, box-shadow and body padding follow Card style #938

Merged
merged 1 commit into from
Jan 15, 2025
Merged

improve(ui): ProCard border-radius, box-shadow and body padding follow Card style #938

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/design/src/card/demo/border-less.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@ const App: React.FC = () => {
return (
<div
style={{
backgroundColor: token.colorFillContent,
backgroundColor: token.colorBgLayout,
padding: '40px 24px',
margin: '-40px -24px',
}}
>
<Card title="Card title" bordered={false} style={{ width: 300 }}>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
<div>Card content</div>
<div>Card content</div>
<div>Card content</div>
</Card>
</div>
);
Expand Down
6 changes: 3 additions & 3 deletions packages/design/src/card/demo/no-divider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import React from 'react';

const App: React.FC = () => (
<Card divided={false} title="Card title" extra={<a>More</a>} style={{ width: 300 }}>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
<div>Card content</div>
<div>Card content</div>
<div>Card content</div>
</Card>
);

Expand Down
12 changes: 6 additions & 6 deletions packages/design/src/space/demo/vertical.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@ import React from 'react';
const App: React.FC = () => (
<Space direction="vertical" size="middle" style={{ display: 'flex' }}>
<Card title="Card" size="small">
<p>Card content</p>
<p>Card content</p>
<div>Card content</div>
<div>Card content</div>
</Card>
<Card title="Card" size="small">
<p>Card content</p>
<p>Card content</p>
<div>Card content</div>
<div>Card content</div>
</Card>
<Card title="Card" size="small">
<p>Card content</p>
<p>Card content</p>
<div>Card content</div>
<div>Card content</div>
</Card>
</Space>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/design/src/table/demo/card-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const App: React.FC = () => {
hasBorder
? {}
: {
backgroundColor: token.colorFillContent,
backgroundColor: token.colorBgLayout,
padding: '40px 24px',
margin: '-40px -24px',
}
Expand Down
2 changes: 1 addition & 1 deletion packages/design/src/table/demo/pro-card-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const App: React.FC = () => {
hasBorder
? {}
: {
backgroundColor: token.colorFillContent,
backgroundColor: token.colorBgLayout,
padding: '40px 24px',
margin: '-40px -24px',
}
Expand Down
60 changes: 40 additions & 20 deletions packages/ui/src/ProCard/demo/basic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,25 @@
import React, { useState } from 'react';
import { Form, Switch } from '@oceanbase/design';
import { Form, Switch, theme } from '@oceanbase/design';
import { ProCard } from '@oceanbase/ui';

export default () => {
const { token } = theme.useToken();
const [hasHeader, setHasHeader] = useState(true);
const [headerBordered, setHeaderBordered] = useState(false);
const [hasPadding, setHasPadding] = useState(true);
const bodyStyle: React.CSSProperties = hasPadding ? {} : { padding: 0 };
return (
<>
<Form layout="inline" style={{ marginBottom: 16 }}>
<Form.Item label="has header" required={true}>
<Switch
size="small"
value={hasHeader}
onChange={value => {
setHasHeader(value);
}}
/>
</Form.Item>
<Form.Item label="header bordered" required={true}>
<Switch
size="small"
Expand All @@ -31,9 +42,9 @@ export default () => {
<ProCard
bordered
headerBordered={headerBordered}
title="默认尺寸"
extra="extra"
tooltip="这是提示"
title={hasHeader && '默认尺寸'}
extra={hasHeader && 'extra'}
tooltip={hasHeader && '这是提示'}
style={{ width: 300 }}
bodyStyle={bodyStyle}
>
Expand All @@ -42,31 +53,40 @@ export default () => {
<div>Card content</div>
</ProCard>
<ProCard
headerBordered={headerBordered}
boxShadow
title="带卡片阴影"
extra="extra"
tooltip="这是提示"
style={{ width: 300, marginBlockStart: 24 }}
bodyStyle={bodyStyle}
>
<div>Card content</div>
<div>Card content</div>
<div>Card content</div>
</ProCard>
<ProCard
bordered
headerBordered={headerBordered}
size="small"
title="小尺寸卡片"
extra="extra"
tooltip="这是提示"
title={hasHeader && '小尺寸'}
extra={hasHeader && 'extra'}
tooltip={hasHeader && '这是提示'}
style={{ width: 300, marginBlockStart: 24 }}
bodyStyle={bodyStyle}
>
<div>Card content</div>
<div>Card content</div>
<div>Card content</div>
</ProCard>
<div
style={{
marginBlockStart: 24,
padding: 24,
borderRadius: 8,
background: token.colorBgLayout,
}}
>
<ProCard
headerBordered={headerBordered}
title={hasHeader && '无边框'}
extra={hasHeader && 'extra'}
tooltip={hasHeader && '这是提示'}
style={{ width: 300 }}
bodyStyle={bodyStyle}
>
<div>Card content</div>
<div>Card content</div>
<div>Card content</div>
</ProCard>
</div>
</>
);
};
19 changes: 19 additions & 0 deletions packages/ui/src/ProCard/style/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,25 @@ export const genProCardStyle: GenerateStyle<OBToken> = (token: OBToken): CSSObje
const tabsComponentCls = `${antCls}-tabs`;
const tabsPrefixCls = `${prefixCls}-tabs`;
return {
// follow Card style
// need add `div` to make style work
[`div${componentCls}`]: {
borderRadius: token.borderRadiusLG,
},
[`${componentCls}:not(${componentCls}-border)`]: {
boxShadow:
'0 1px 2px 0 rgba(0, 0, 0, 0.03),0 1px 6px -1px rgba(0, 0, 0, 0.02),0 2px 4px 0 rgba(0, 0, 0, 0.02)',
},
[`${componentCls}:not(${componentCls}-size-small)`]: {
[`${componentCls}-body`]: {
paddingBlock: token.paddingLG,
},
[`&${componentCls}-has-title${componentCls}-no-divider`]: {
[`${componentCls}-body`]: {
paddingBlockStart: token.padding,
},
},
},
// no body padding card
[`${componentCls}${componentCls}-no-body-padding:not(${componentCls}-contain-tabs)`]: {
[`${componentCls}-header`]: {
Expand Down
Loading