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

Jump to bottom

fix: infrad components style fix #97

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

fix: infrad components style fix #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d0f686f
fix: infrad components style fix
Oct 27, 2022
3e50634
fix: infrad reset className
Oct 27, 2022
926dfcc
fix: add prefix in className
Oct 27, 2022
6f380db
fix: add steps type prop
Oct 27, 2022
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
10 changes: 7 additions & 3 deletions components/card/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,9 +127,13 @@ const Card = React.forwardRef((props: CardProps, ref: React.Ref<HTMLDivElement>)
) : null;
if (title || extra || tabs) {
head = (
<div className={`${prefixCls}-head`} style={headStyle}>
<div className={`${prefixCls}-head ${prefixCls}-infrad-reset-head`} style={headStyle}>
<div className={`${prefixCls}-head-wrapper`}>
{title && <div className={`${prefixCls}-head-title`}>{title}</div>}
{title && (
<div className={`${prefixCls}-head-title ${prefixCls}-infrad-reset-head-title`}>
{title}
</div>
)}
{extra && <div className={`${prefixCls}-extra`}>{extra}</div>}
</div>
{tabs}
Expand All @@ -138,7 +142,7 @@ const Card = React.forwardRef((props: CardProps, ref: React.Ref<HTMLDivElement>)
}
const coverDom = cover ? <div className={`${prefixCls}-cover`}>{cover}</div> : null;
const body = (
<div className={`${prefixCls}-body`} style={bodyStyle}>
<div className={`${prefixCls}-body ${prefixCls}-infrad-reset-body`} style={bodyStyle}>
{loading ? loadingBlock : children}
</div>
);
Expand Down
12 changes: 12 additions & 0 deletions components/card/style/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,14 @@
}
}

&-infrad-reset-head {
padding: 0 24px;
}

&-infrad-reset-head-title {
font-size: 16px;
}

&-extra {
// https://stackoverflow.com/a/22429853/3040605
margin-left: auto;
Expand All @@ -106,6 +114,10 @@
.clearfix();
}

&-infrad-reset-body {
padding: 24px;
}

&-contain-grid &-body {
display: flex;
flex-wrap: wrap;
Expand Down
4 changes: 3 additions & 1 deletion components/descriptions/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,9 @@ function Descriptions({
>
{(title || extra) && (
<div className={`${prefixCls}-header`}>
{title && <div className={`${prefixCls}-title`}>{title}</div>}
{title && (
<div className={`${prefixCls}-title ${prefixCls}-infrad-reset-title`}>{title}</div>
)}
{extra && <div className={`${prefixCls}-extra`}>{extra}</div>}
</div>
)}
Expand Down
4 changes: 4 additions & 0 deletions components/descriptions/style/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@
text-overflow: ellipsis;
}

&-infrad-reset-title {
font-weight: 500;
}

&-extra {
margin-left: auto;
color: @descriptions-extra-color;
Expand Down
16 changes: 9 additions & 7 deletions components/page-header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,9 @@ const renderBack = (
);
};

const renderBreadcrumb = (breadcrumb: BreadcrumbProps) => <Breadcrumb {...breadcrumb} />;
const renderBreadcrumb = (prefixCls: string, breadcrumb: BreadcrumbProps) => (
<Breadcrumb {...breadcrumb} className={`${prefixCls}-infrad-reset-page-header-breadcrumb`} />
);

const getBackIcon = (props: PageHeaderProps, direction: DirectionType = 'ltr') => {
if (props.backIcon !== undefined) {
Expand All @@ -85,9 +87,9 @@ const renderTitle = (
const backIconDom = renderBack(prefixCls, backIcon, onBack);
const hasTitle = backIconDom || avatar || hasHeading;
return (
<div className={headingPrefixCls}>
<div className={`${headingPrefixCls} ${prefixCls}-infrad-reset-heading`}>
{hasTitle && (
<div className={`${headingPrefixCls}-left`}>
<div className={`${headingPrefixCls}-left ${headingPrefixCls}-infrad-reset-left`}>
{backIconDom}
{avatar && <Avatar {...avatar} />}
{title && (
Expand All @@ -110,7 +112,7 @@ const renderTitle = (
</div>
)}
{extra && (
<span className={`${headingPrefixCls}-extra`}>
<span className={`${headingPrefixCls}-extra ${headingPrefixCls}-infrad-reset-extra`}>
<Space>{extra}</Space>
</span>
)}
Expand All @@ -120,13 +122,13 @@ const renderTitle = (

const renderFooter = (prefixCls: string, footer: React.ReactNode) => {
if (footer) {
return <div className={`${prefixCls}-footer`}>{footer}</div>;
return <div className={`${prefixCls}-footer ${prefixCls}-infrad-reset-footer`}>{footer}</div>;
}
return null;
};

const renderChildren = (prefixCls: string, children: React.ReactNode) => (
<div className={`${prefixCls}-content`}>{children}</div>
TYWZLucifer marked this conversation as resolved.
Show resolved Hide resolved
<div className={`${prefixCls}-content ${prefixCls}-infrad-reset-content`}>{children}</div>
);

const PageHeader: React.FC<PageHeaderProps> = props => {
Expand Down Expand Up @@ -159,7 +161,7 @@ const PageHeader: React.FC<PageHeaderProps> = props => {

const getDefaultBreadcrumbDom = () => {
if ((breadcrumb as BreadcrumbProps)?.routes) {
return renderBreadcrumb(breadcrumb as BreadcrumbProps);
return renderBreadcrumb(prefixCls, breadcrumb as BreadcrumbProps);
TYWZLucifer marked this conversation as resolved.
Show resolved Hide resolved
}
return null;
};
Expand Down
31 changes: 31 additions & 0 deletions components/page-header/style/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,10 @@
margin-top: @margin-xs;
}

.@{ant-prefix}-breadcrumb + &-infrad-reset-heading {
margin-top: 0;
}

.text-overflow-ellipsis() {
overflow: hidden;
white-space: nowrap;
Expand All @@ -59,6 +63,10 @@
overflow: hidden;
}

&-infrad-reset-left {
margin: 0;
}

&-title {
margin-right: @margin-sm;
margin-bottom: 0;
Expand Down Expand Up @@ -89,12 +97,20 @@
white-space: unset;
}
}

&-infrad-reset-extra {
margin: 0;
}
}

&-content {
padding-top: @page-header-content-padding-vertical;
}

&-infrad-reset-content {
padding-top: 16px;
}

&-footer {
margin-top: @margin-md;
.@{ant-prefix}-tabs {
Expand All @@ -114,9 +130,24 @@
}
}

&-infrad-reset-footer {
height: 57px;
TYWZLucifer marked this conversation as resolved.
Show resolved Hide resolved
margin-top: 0;
.@{ant-prefix}-tabs {
height: 100%;
> .@{ant-prefix}-tabs-nav {
height: 100%;
}
}
}

&-compact &-heading {
flex-wrap: wrap;
}

&-infrad-reset-page-header-breadcrumb {
margin-bottom: 12px;
}
}

@import './rtl';
3 changes: 3 additions & 0 deletions components/steps/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ interface StepsType extends React.FC<StepsProps> {

const Steps: StepsType = props => {
const {
type,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里是新增一个props吗

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不是新增属性，原本就有。只是原有样式没有用到。 我们的设计稿里在这个组件处于导航模式的时候每个step有16的下边距，所以需要判断

percent,
size,
className,
Expand All @@ -67,6 +68,7 @@ const Steps: StepsType = props => {
{
[`${prefixCls}-rtl`]: rtlDirection === 'rtl',
[`${prefixCls}-with-progress`]: percent !== undefined,
[`${prefixCls}-infrad-reset-navigation`]: type === 'navigation',
},
className,
);
Expand Down Expand Up @@ -105,6 +107,7 @@ const Steps: StepsType = props => {
};
return (
<RcSteps
type={type}
icons={icons}
{...restProps}
current={current}
Expand Down
8 changes: 8 additions & 0 deletions components/steps/style/nav.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,14 @@
}
}

.@{steps-prefix-cls}-infrad-reset-navigation {
.@{steps-prefix-cls}-item {
&-container {
padding-bottom: 16px;
}
}
}

.@{steps-prefix-cls}-navigation.@{steps-prefix-cls}-vertical {
> .@{steps-prefix-cls}-item {
margin-right: 0 !important;
Expand Down
3 changes: 3 additions & 0 deletions components/table/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ export interface TableProps<RecordType>
size?: SizeType;
bordered?: boolean;
locale?: TableLocale;
outline?: boolean;

onChange?: (
pagination: TablePaginationConfig,
Expand Down Expand Up @@ -137,6 +138,7 @@ function InternalTable<RecordType extends object = any>(
sortDirections,
locale,
showSorterTooltip = true,
outline = true,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这是新增的属性吗，新增属性的话，文档中需要更新

} = props;

warning(
Expand Down Expand Up @@ -534,6 +536,7 @@ function InternalTable<RecordType extends object = any>(
[`${prefixCls}-small`]: mergedSize === 'small',
[`${prefixCls}-bordered`]: bordered,
[`${prefixCls}-empty`]: rawData.length === 0,
[`${prefixCls}-infrad-reset-table-outline`]: outline,
})}
data={pageData}
rowKey={getRowKey}
Expand Down
6 changes: 6 additions & 0 deletions components/table/style/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,12 @@
border-spacing: 0;
}

&-infrad-reset-table-outline {
border: 1px solid #f0f0f0;
border-bottom: 0;
border-radius: 2px;
}

// ============================= Cell =============================
&-thead > tr > th,
&-tbody > tr > td,
Expand Down