Skip to content

docs: blockHeader docs use size #468

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

Merged
merged 1 commit into from
Aug 21, 2024
Merged

docs: blockHeader docs use size #468

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
4 changes: 2 additions & 2 deletions src/blockHeader/__tests__/blockHeader.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,15 +44,15 @@
test('should render BlockHeader props default in BlockHeader', () => {
const { container } = render(<BlockHeader title="测试" showBackground />);
const wrap = container.firstChild;
expect(wrap!.firstChild!.firstChild!.firstChild).toHaveClass(`${prefixCls}-before-title`);

Check warning on line 47 in src/blockHeader/__tests__/blockHeader.test.tsx

View workflow job for this annotation

GitHub Actions / setup 

Forbidden non-null assertion

Check warning on line 47 in src/blockHeader/__tests__/blockHeader.test.tsx

View workflow job for this annotation

GitHub Actions / setup 

Forbidden non-null assertion

Check warning on line 47 in src/blockHeader/__tests__/blockHeader.test.tsx

View workflow job for this annotation

GitHub Actions / setup 

Forbidden non-null assertion
fireEvent.click(document.getElementsByClassName(`${prefixCls}-title-row`)[0]);
});
test('should render BlockHeader with different props', () => {
const { container, getByText } = render(<BlockHeader {...props2} />);
const wrap = container.firstChild;
expect(wrap).toHaveClass(`${prefixCls}`);
expect(wrap!.lastChild).toHaveClass(`${prefixCls}-content`);

Check warning on line 54 in src/blockHeader/__tests__/blockHeader.test.tsx

View workflow job for this annotation

GitHub Actions / setup 

Forbidden non-null assertion
expect(wrap!.firstChild).toHaveClass(`test-row-className`);

Check warning on line 55 in src/blockHeader/__tests__/blockHeader.test.tsx

View workflow job for this annotation

GitHub Actions / setup 

Forbidden non-null assertion
expect(getByText('标题2')).toHaveClass('test-title-className');
expect(getByText('说明文字')).toHaveClass(`${prefixCls}-after-title`);
expect(getByText('新增按钮')).toHaveClass(`test-button-after`);
Expand Down Expand Up @@ -84,21 +84,21 @@
const { container, getByText } = render(<BlockHeader {...props2} />);
const wrap = container.firstChild;
expect(wrap).toHaveClass(`${prefixCls}`);
expect(wrap!.lastChild).toHaveClass(`${prefixCls}-content`);

Check warning on line 87 in src/blockHeader/__tests__/blockHeader.test.tsx

View workflow job for this annotation

GitHub Actions / setup 

Forbidden non-null assertion
expect(wrap!.firstChild).toHaveClass(`test-row-className`);

Check warning on line 88 in src/blockHeader/__tests__/blockHeader.test.tsx

View workflow job for this annotation

GitHub Actions / setup 

Forbidden non-null assertion
expect(getByText('标题2')).toHaveClass('test-title-className');
expect(getByText('说明文字')).toHaveClass(`${prefixCls}-after-title`);
expect(getByText('Icon')).toBeTruthy();
});
test('should render BlockHeader className when isSmall is small', () => {
test('should render BlockHeader props without background', () => {
const props = { title: '测试1', showBackground: false };
const { container } = render(<BlockHeader {...props} />);
const wrap = container.firstChild;
expect(wrap!.firstChild).not.toHaveClass(`background`);

Check warning on line 97 in src/blockHeader/__tests__/blockHeader.test.tsx

View workflow job for this annotation

GitHub Actions / setup 

Forbidden non-null assertion
});
test('should render BlockHeader className when isSmall is small', () => {
test('should render BlockHeader className when size is small', () => {
const { container, getByText } = render(<BlockHeader {...props2} />);
const wrap = container.firstChild!;

Check warning on line 101 in src/blockHeader/__tests__/blockHeader.test.tsx

View workflow job for this annotation

GitHub Actions / setup 

Forbidden non-null assertion
expect(wrap).toHaveClass(`${prefixCls}`);
expect(wrap.lastChild).toHaveClass(`${prefixCls}-content`);
expect(wrap.firstChild).toHaveClass(`test-row-className`);
Expand All @@ -109,7 +109,7 @@

test('should render BlockHeader tooltip success', () => {
const { container } = render(<BlockHeader {...props3} />);
const wrap = container.firstChild!;

Check warning on line 112 in src/blockHeader/__tests__/blockHeader.test.tsx

View workflow job for this annotation

GitHub Actions / setup 

Forbidden non-null assertion
const afterTitleWrap = wrap.firstChild!.firstChild!.lastChild;
expect(afterTitleWrap!.firstChild).toHaveClass('anticon-question-circle');
});
Expand Down
30 changes: 15 additions & 15 deletions src/blockHeader/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,18 +27,18 @@ demo:

### BlockHeader

| 参数 | 说明 | 类型 | 默认值 |
| ----------------- | ----------------------------------------- | --------------------------- | ------- |
| title | 标题 | `React.ReactNode` | - |
| beforeTitle | 标题前的图标，默认是一个色块 | `React.ReactNode` | - |
| afterTitle | 标题后的提示图标或文案 | `React.ReactNode` | - |
| tooltip | 默认展示问号提示(优先级低于 `afterTitle`) | `React.ReactNode` | - |
| isSmall | 大标题、小标题，默认为大标题 | `boolean` | `false` |
| titleRowClassName | 标题一行的样式类名 | `string` | - |
| titleClassName | 标题的样式类名 | `string` | - |
| showBackground | 是否显示背景 | `boolean` | `true` |
| defaultExpand | 是否默认展开内容 | `boolean` | `true` |
| hasBottom | 是否有默认下边距 16px | `boolean` | `false` |
| spaceBottom | 自定义下边距，优先级高于 hasBottom | `number` | `0` |
| children | 展开/收起的内容 | `React.ReactNode` | - |
| onChange | 展开/收起时的回调 | `(expand: boolean) => void` | - |
| 参数 | 说明 | 类型 | 默认值 |
| ----------------- | ----------------------------------------- | --------------------------- | -------- | -------- |
| title | 标题 | `React.ReactNode` | - |
| beforeTitle | 标题前的图标，默认是一个色块 | `React.ReactNode` | - |
| afterTitle | 标题后的提示图标或文案 | `React.ReactNode` | - |
| tooltip | 默认展示问号提示(优先级低于 `afterTitle`) | `React.ReactNode` | - |
| size | 小标题(small)、中标题(middle) | `small` | `middle` | `middle` |
| titleRowClassName | 标题一行的样式类名 | `string` | - |
| titleClassName | 标题的样式类名 | `string` | - |
| showBackground | 是否显示背景 | `boolean` | `true` |
| defaultExpand | 是否默认展开内容 | `boolean` | `true` |
| hasBottom | 是否有默认下边距 16px | `boolean` | `false` |
| spaceBottom | 自定义下边距，优先级高于 hasBottom | `number` | `0` |
| children | 展开/收起的内容 | `React.ReactNode` | - |
| onChange | 展开/收起时的回调 | `(expand: boolean) => void` | - |
Loading