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.

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

Update Card & PageHeader style #15755

Merged
merged 6 commits into from Mar 31, 2019
Merged
Changes from 5 commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -3,8 +3,6 @@ import { mount } from 'enzyme';
import Card from '../index';
import Button from '../../button/index';

const testMethod = typeof window !== 'undefined' ? it : xit;

describe('Card', () => {
beforeAll(() => {
jest.useFakeTimers();
@@ -14,30 +12,6 @@ describe('Card', () => {
jest.useRealTimers();
});

function fakeResizeWindowTo(wrapper, width) {
Object.defineProperties(wrapper.instance().container, {
offsetWidth: {
get() {
return width;
},
configurable: true,
},
});
window.resizeTo(width);
}

testMethod('resize card will trigger different padding', () => {
const wrapper = mount(<Card title="xxx">xxx</Card>);
fakeResizeWindowTo(wrapper, 1000);
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-card-wider-padding').length).toBe(1);
fakeResizeWindowTo(wrapper, 800);
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-card-wider-padding').length).toBe(0);
});

it('should still have padding when card which set padding to 0 is loading', () => {
const wrapper = mount(
<Card loading bodyStyle={{ padding: 0 }}>
@@ -69,13 +43,6 @@ describe('Card', () => {
warnSpy.mockRestore();
});

it('unmount', () => {
const wrapper = mount(<Card>xxx</Card>);
const removeResizeEventSpy = jest.spyOn(wrapper.instance().resizeEvent, 'remove');
wrapper.unmount();
expect(removeResizeEventSpy).toHaveBeenCalled();
});

it('onTabChange should work', () => {
const tabList = [
{
@@ -1,14 +1,12 @@
import * as React from 'react';
import classNames from 'classnames';
import addEventListener from 'rc-util/lib/Dom/addEventListener';
import omit from 'omit.js';
import Grid from './Grid';
import Meta from './Meta';
import Tabs from '../tabs';
import Row from '../row';
import Col from '../col';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';
import warning from '../_util/warning';
import { Omit } from '../_util/type';

@@ -48,26 +46,11 @@ export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 't
defaultActiveTabKey?: string;
}

export interface CardState {
widerPadding: boolean;
}

export default class Card extends React.Component<CardProps, CardState> {
export default class Card extends React.Component<CardProps, {}> {
static Grid: typeof Grid = Grid;
static Meta: typeof Meta = Meta;

state = {
widerPadding: false,
};

private resizeEvent: any;
private updateWiderPaddingCalled: boolean = false;
private container: HTMLDivElement;

componentDidMount() {
this.updateWiderPadding();
this.resizeEvent = addEventListener(window, 'resize', this.updateWiderPadding);

if ('noHovering' in this.props) {
warning(
!this.props.noHovering,
@@ -82,42 +65,12 @@ export default class Card extends React.Component<CardProps, CardState> {
}
}

componentWillUnmount() {
if (this.resizeEvent) {
this.resizeEvent.remove();
}
(this.updateWiderPadding as any).cancel();
}

@throttleByAnimationFrameDecorator()
updateWiderPadding() {
if (!this.container) {
return;
}
// 936 is a magic card width pixel number indicated by designer
const WIDTH_BOUNDARY_PX = 936;
if (this.container.offsetWidth >= WIDTH_BOUNDARY_PX && !this.state.widerPadding) {
this.setState({ widerPadding: true }, () => {
this.updateWiderPaddingCalled = true; // first render without css transition
});
}
if (this.container.offsetWidth < WIDTH_BOUNDARY_PX && this.state.widerPadding) {
this.setState({ widerPadding: false }, () => {
this.updateWiderPaddingCalled = true; // first render without css transition
});
}
}

onTabChange = (key: string) => {
if (this.props.onTabChange) {
this.props.onTabChange(key);
}
};

saveRef = (node: HTMLDivElement) => {
this.container = node;
};

isContainGrid() {
let containGrid;
React.Children.forEach(this.props.children, (element: JSX.Element) => {
@@ -174,8 +127,6 @@ export default class Card extends React.Component<CardProps, CardState> {
[`${prefixCls}-loading`]: loading,
[`${prefixCls}-bordered`]: bordered,
[`${prefixCls}-hoverable`]: this.getCompatibleHoverable(),
[`${prefixCls}-wider-padding`]: this.state.widerPadding,
[`${prefixCls}-padding-transition`]: this.updateWiderPaddingCalled,
[`${prefixCls}-contain-grid`]: this.isContainGrid(),
[`${prefixCls}-contain-tabs`]: tabList && tabList.length,
[`${prefixCls}-${size}`]: size !== 'default',
@@ -274,7 +225,7 @@ export default class Card extends React.Component<CardProps, CardState> {
) : null;
const divProps = omit(others, ['onTabChange']);
return (
<div {...divProps} className={classString} ref={this.saveRef}>
<div {...divProps} className={classString}>
{head}
{coverDom}
{body}
@@ -172,19 +172,6 @@
}
}

&-wider-padding &-head {
padding: 0 @card-padding-wider;
}

&-wider-padding &-body {
padding: @card-padding-base @card-padding-wider;
}

&-padding-transition &-head,
&-padding-transition &-body {
transition: padding 0.3s;
}

&-type-inner &-head {
padding: 0 @card-padding-base;
background: @background-color-light;
@@ -6,11 +6,11 @@
.@{pageheader-prefix-cls} {
.reset-component;
position: relative;
padding: 16px 32px;
padding: @page-header-padding-vertical @page-header-padding-horizontal;
background: @component-background;

&.@{pageheader-prefix-cls}-has-footer {
padding: 20px 32px;
padding: @page-header-padding-vertical-lg @page-header-padding-horizontal;
padding-bottom: 0;
}

@@ -61,7 +61,7 @@
&-extra {
position: absolute;
top: 16px;
right: 32px;
right: @page-header-padding-horizontal;
> * {
margin-right: 8px;
}
@@ -433,7 +433,6 @@
@card-head-padding: 16px;
@card-inner-head-padding: 12px;
@card-padding-base: 24px;
@card-padding-wider: 32px;
@card-actions-background: @background-color-light;
@card-background: #cfd8dc;
@card-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
@@ -504,6 +503,12 @@
@pagination-font-weight-active: 500;
@pagination-item-bg-active: transparent;

// PageHeader
// ---
@page-header-padding-horizontal: 24px;

This comment has been minimized.

Copy link
@afc163

afc163 Mar 30, 2019

Member

改成 @card-padding-base?

This comment has been minimized.

Copy link
@zombieJ

zombieJ Mar 30, 2019

Author Member

这边 padding 横竖 padding 不一样,参考的 @input-padding-horizontal & vertical 做的区分。

@page-header-padding-vertical: 16px;
@page-header-padding-vertical-lg: 20px;

This comment has been minimized.

Copy link
@afc163

afc163 Mar 30, 2019

Member

为啥不是 8 的倍数?

This comment has been minimized.

Copy link
@zombieJ

zombieJ Mar 30, 2019

Author Member

使用 footer 时会变成 20px,我再看一下设计稿确认确认。

This comment has been minimized.

Copy link
@zombieJ

zombieJ Mar 30, 2019

Author Member

和设计师确认过了,的确是 20px

This comment has been minimized.

Copy link
@afc163

afc163 Mar 30, 2019

Member

问题来了,为啥设计师不用 8 的倍数?

#13637 (comment)

This comment has been minimized.

Copy link
@zombieJ

zombieJ Mar 30, 2019

Author Member

之前问过设计师,8n 的 n 可以是 0.5。所以理论上我们的尺寸应该是 主 8n 次 4n 😈

This comment has been minimized.

Copy link
@afc163

afc163 Mar 30, 2019

Member

图片

这个规则太奇怪了,组件最好是无脑组装式的。

This comment has been minimized.

Copy link
@afc163

afc163 Mar 30, 2019

Member

这样可能造成,两个页面(一个 PageHeader 有 footer 一个没有)切换时,上下 padding 变化时造成标题区域的 4px 抖动。

This comment has been minimized.

Copy link
@zombieJ

zombieJ Mar 30, 2019

Author Member

20px 是为了从视觉上拉开距离,不过我觉得这也有道理。先统一成 16px 看看效果好了。


// Breadcrumb
// ---
@breadcrumb-base-color: @text-color-secondary;
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.