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

Fix empty css #2818

Closed
wants to merge 12 commits into from
Closed

Fix empty css #2818

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
6ce76b7
feat(empty): v14
Alex-huxiyang Nov 15, 2024
24a1776
feat(empty): v14
Alex-huxiyang Nov 18, 2024
4a7a504
feat(empty): v14
Alex-huxiyang Nov 18, 2024
bde9c18
feat(empty): v14
Alex-huxiyang Nov 18, 2024
573d393
chore: doc
Alex-huxiyang Nov 18, 2024
ef289ea
chore: v14
Alex-huxiyang Nov 18, 2024
67cd9af
chore: v14
Alex-huxiyang Nov 19, 2024
3a5ca56
chore: v14
Alex-huxiyang Nov 19, 2024
19465a5
Merge branch 'V3.0' into hxy/exmpty
Alex-huxiyang Nov 22, 2024
50162e4
Merge branch 'feat_v3.x' into hxy/exmpty
Alex-huxiyang Nov 25, 2024
7ea3619
chore: button text v14
Alex-huxiyang Dec 2, 2024
4237062
fix(empty): correct doc & css variable value
Alex-huxiyang Dec 3, 2024
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
3 changes: 2 additions & 1 deletion src/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -757,7 +757,8 @@
"sort": 16,
"show": true,
"taro": true,
"author": "liukun"
"author": "liukun",
"v14": true
},
{
"version": "3.0.0",
Expand Down
2 changes: 1 addition & 1 deletion src/packages/calendarcard/calendarcard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,12 +115,12 @@
&.prev,
&.next,
&.disabled {
cursor: not-allowed;
.nut-calendarcard-day-top,
.nut-calendarcard-day-inner,
.nut-calendarcard-day-bottom {
color: $calendar-disable-color;
}
cursor: not-allowed;
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/packages/empty/__test__/empty.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,9 @@ test('should render actions correctly', () => {
actions={[{ text: '操作1' }, { text: '操作2' }]}
/>
)
expect(container.querySelector('.nut-empty-actions')).toBeTruthy()
expect(container.querySelector('.nut-empty-actions-base')).toBeTruthy()
expect(
container.querySelectorAll('.nut-empty-actions .nut-button').length
container.querySelectorAll('.nut-empty-actions-base .nut-button').length
).toEqual(2)
})
test('should render custom image correctly', () => {
Expand Down
13 changes: 8 additions & 5 deletions src/packages/empty/demos/h5/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,19 @@ const Demo1 = () => {
return (
<>
<Empty
title="标题"
description="无数据"
actions={[{ text: '操作按钮' }, { text: '操作按钮', type: 'primary' }]}
title="全屏缺省标题"
description="内容描述内容描述内容描述"
actions={[{ text: '次要操作' }, { text: '主要操作', type: 'primary' }]}
/>
<Empty
description="无数据"
description="内容描述内容描述内容描述"
actions={[{ text: '操作按钮' }]}
style={{ marginTop: '10px' }}
/>
<Empty description="无数据" style={{ marginTop: '10px' }} />
<Empty
description="内容描述内容描述内容描述"
style={{ marginTop: '10px' }}
/>
</>
)
}
Expand Down
8 changes: 7 additions & 1 deletion src/packages/empty/demos/h5/demo2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@ import React from 'react'
import { Empty } from '@nutui/nutui-react'

const Demo2 = () => {
return <Empty description="无数据" size="small" />
return (
<Empty
title="半屏缺省标题"
description="内容描述内容描述内容描述"
size="small"
/>
)
}
export default Demo2
2 changes: 1 addition & 1 deletion src/packages/empty/demos/h5/demo3.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@ import React from 'react'
import { Empty } from '@nutui/nutui-react'

const Demo3 = () => {
return <Empty description="无数据" imageSize={80} />
return <Empty description="内容描述内容描述" imageSize={80} />
}
export default Demo3
8 changes: 4 additions & 4 deletions src/packages/empty/demos/h5/demo4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@ const Demo4 = () => {
setTabvalue(paneKey)
}}
>
<TabPane title="无内容" value="0">
<Empty status="empty" title="无内容" />
<TabPane title="通用空状态" value="0">
<Empty status="empty" title="通用空状态" />
</TabPane>
<TabPane title="加载失败/错误" value="1">
<Empty status="error" title="加载失败/错误" />
</TabPane>
<TabPane title="无网络" value="2">
<Empty status="network" title="无网络" />
<TabPane title="网络异常" value="2">
<Empty status="network" title="网络异常" />
</TabPane>
</Tabs>
)
Expand Down
4 changes: 2 additions & 2 deletions src/packages/empty/demos/h5/demo6.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ const Demo6 = () => {
style={{ marginBottom: '20px' }}
>
<div style={{ marginTop: '10px' }}>
<Button icon="refresh" type="primary" size="small">
重试
<Button type="primary" size="small">
刷新重试
</Button>
</div>
</Empty>
Expand Down
13 changes: 8 additions & 5 deletions src/packages/empty/demos/taro/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,19 @@ const Demo1 = () => {
return (
<>
<Empty
title="标题"
description="无数据"
actions={[{ text: '操作按钮' }, { text: '操作按钮', type: 'primary' }]}
title="全屏缺省标题"
description="内容描述内容描述内容描述"
actions={[{ text: '次要操作' }, { text: '主要操作', type: 'primary' }]}
/>
<Empty
description="无数据"
description="内容描述内容描述内容描述"
actions={[{ text: '操作按钮' }]}
style={{ marginTop: pxTransform(10) }}
/>
<Empty description="无数据" style={{ marginTop: pxTransform(10) }} />
<Empty
description="内容描述内容描述内容描述"
style={{ marginTop: pxTransform(10) }}
/>
</>
)
}
Expand Down
8 changes: 7 additions & 1 deletion src/packages/empty/demos/taro/demo2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@ import React from 'react'
import { Empty } from '@nutui/nutui-react-taro'

const Demo2 = () => {
return <Empty description="无数据" size="small" />
return (
<Empty
title="半屏缺省标题"
description="内容描述内容描述内容描述"
size="small"
/>
)
}
export default Demo2
2 changes: 1 addition & 1 deletion src/packages/empty/demos/taro/demo3.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@ import { Empty } from '@nutui/nutui-react-taro'
import pxTransform from '@/utils/px-transform'

const Demo3 = () => {
return <Empty description="无数据" imageSize={pxTransform(80)} />
return <Empty description="内容描述内容描述" imageSize={pxTransform(80)} />
}
export default Demo3
12 changes: 6 additions & 6 deletions src/packages/empty/demos/taro/demo4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,20 @@ const Demo4 = () => {
// setTabvalue(paneKey)
// }}
// >
// <TabPane title="无内容" value="0">
// <Empty status="empty" title="无内容" />
// <TabPane title="通用空状态" value="0">
// <Empty status="empty" title="通用空状态" />
// </TabPane>
// <TabPane title="加载失败/错误" value="1">
// <Empty status="error" title="加载失败/错误" />
// </TabPane>
// <TabPane title="无网络" value="2">
// <Empty status="network" title="无网络" />
// <TabPane title="网络异常" value="2">
// <Empty status="network" title="网络异常" />
// </TabPane>
// </Tabs>
<>
<Empty status="empty" title="无内容" />
<Empty status="empty" title="通用空状态" />
<Empty status="error" title="加载失败/错误" />
<Empty status="network" title="无网络" />
<Empty status="network" title="网络异常" />
</>
)
}
Expand Down
2 changes: 1 addition & 1 deletion src/packages/empty/demos/taro/demo6.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const Demo6 = () => {
<Empty status="error" description="加载失败">
<View style={{ marginTop: pxTransform(10) }}>
<Button type="primary" size="small">
重试
刷新重试
</Button>
</View>
</Empty>
Expand Down
10 changes: 4 additions & 6 deletions src/packages/empty/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,10 +84,8 @@ The component provides the following CSS variables, which can be used to customi
| --- | --- | --- |
| \--nutui-empty-padding | The padding value of the Empty component image | `32px 40px` |
| \--nutui-empty-image-size | The size of the Empty component image | `160px` |
| \--nutui-empty-image-small-size | The size of the Empty component image when the size is small | `120px` |
| \--nutui-empty-title-margin-top | Empty component image title margin-top value | `0px` |
| \--nutui-empty-title-margin-top | Empty component image title margin-top value | `8px` |
| \--nutui-empty-title-line-height | Empty component image title row height | `$font-size-base` |
| \--nutui-empty-description-margin-top | Empty component image description margin-top value | `4px` |
| \--nutui-empty-description-line-height | Empty component image description row height | `1.2` |
| \--nutui-empty-image-small-size | When size is small, the size of the Empty component image | `120px` |
| \--nutui-empty-title-margin-top | The value of margin-top of the Empty component image title | `0px` |
| \--nutui-empty-title-line-height | Empty component image title line height | `$font-size-l` |
| \--nutui-empty-description-line-height | Empty component image description line height | `1` |
| \--nutui-empty-background-color | Empty component background color | `#fff` |
6 changes: 2 additions & 4 deletions src/packages/empty/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,6 @@ import { Empty } from '@nutui/nutui-react'
| \--nutui-empty-image-size | Empty组件图片的尺寸大小 | `160px` |
| \--nutui-empty-image-small-size | size 为 small 时，Empty组件图片的尺寸大小 | `120px` |
| \--nutui-empty-title-margin-top | Empty组件图片标题margin-top的值 | `0px` |
| \--nutui-empty-title-margin-top | Empty组件图片标题margin-top的值 | `8px` |
| \--nutui-empty-title-line-height | Empty组件图片标题行高 | `$font-size-base` |
| \--nutui-empty-description-margin-top | Empty组件图片描述margin-top的值 | `4px` |
| \--nutui-empty-description-line-height | Empty组件图片描述行高 | `1.2` |
| \--nutui-empty-title-line-height | Empty组件图片标题行高 | `$font-size-l` |
| \--nutui-empty-description-line-height | Empty组件图片描述行高 | `1` |
| \--nutui-empty-background-color | Empty组件背景色 | `#fff` |
6 changes: 2 additions & 4 deletions src/packages/empty/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,6 @@ import { Empty } from '@nutui/nutui-react-taro'
| \--nutui-empty-image-size | Empty组件图片的尺寸大小 | `160px` |
| \--nutui-empty-image-small-size | size 为 small 时，Empty组件图片的尺寸大小 | `120px` |
| \--nutui-empty-title-margin-top | Empty组件图片标题margin-top的值 | `0px` |
| \--nutui-empty-title-margin-top | Empty组件图片标题margin-top的值 | `8px` |
| \--nutui-empty-title-line-height | Empty组件图片标题行高 | `$font-size-base` |
| \--nutui-empty-description-margin-top | Empty组件图片描述margin-top的值 | `4px` |
| \--nutui-empty-description-line-height | Empty组件图片描述行高 | `1.2` |
| \--nutui-empty-title-line-height | Empty组件图片标题行高 | `$font-size-l` |
| \--nutui-empty-description-line-height | Empty组件图片描述行高 | `1` |
| \--nutui-empty-background-color | Empty组件背景色 | `#fff` |
9 changes: 4 additions & 5 deletions src/packages/empty/doc.zh-TW.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,13 +80,12 @@ import { Empty } from '@nutui/nutui-react'

組件提供了下列 CSS 變量，可用於自定義樣式，使用方法請參考 [ConfigProvider 組件](#/zh-CN/component/configprovider)。

| 名稱 | 說明 | 默認值 |
| 名稱 | 説明 | 默認值 |
| --- | --- | --- |
| \--nutui-empty-padding | Empty組件圖片的padding值 | `32px 40px` |
| \--nutui-empty-image-size | Empty組件圖片的尺寸大小 | `160px` |
| \--nutui-empty-image-small-size | size 為 small 時，Empty組件圖片的尺寸大小 | `120px` |
| \--nutui-empty-image-small-size | size 爲 small 時，Empty組件圖片的尺寸大小 | `120px` |
| \--nutui-empty-title-margin-top | Empty組件圖片標題margin-top的值 | `0px` |
| \--nutui-empty-title-margin-top | Empty組件圖片標題margin-top的值 | `8px` |
| \--nutui-empty-title-line-height | Empty組件圖片標題行高 | `$font-size-base` |
| \--nutui-empty-description-margin-top | Empty組件圖片描述margin-top的值 | `4px` |
| \--nutui-empty-title-line-height | Empty組件圖片標題行高 | `$font-size-l` |
| \--nutui-empty-description-line-height | Empty組件圖片描述行高 | `1` |
| \--nutui-empty-background-color | Empty組件背景色 | `#fff` |
14 changes: 9 additions & 5 deletions src/packages/empty/empty.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,20 +32,24 @@

&-title {
margin-top: $empty-title-margin-top;
font-weight: $font-weight-bold;
margin-bottom: $empty-title-margin-bottom;
color: $color-title;
font-size: $font-size-base;
font-size: $font-size-l;
line-height: $empty-title-line-height;
}

&-description {
margin-top: $empty-description-margin-top;
color: $color-text-help;
color: $color-text;
font-size: $font-size-s;
line-height: $empty-description-line-height;
}

&-actions {
&-actions-base {
display: flex;
flex-direction: row;
margin-top: 24px;
}
&-actions-small {
display: flex;
flex-direction: row;
margin-top: 16px;
Expand Down
2 changes: 1 addition & 1 deletion src/packages/empty/empty.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export const Empty: FunctionComponent<
description
)}
{actions.length ? (
<View className={`${classPrefix}-actions`}>
<View className={`${classPrefix}-actions-${size}`}>
{actions.map((action, index) => {
const { text, ...rest } = action
return (
Expand Down
2 changes: 1 addition & 1 deletion src/packages/empty/empty.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ export const Empty: FunctionComponent<
description
)}
{actions.length ? (
<div className={`${classPrefix}-actions`}>
<div className={`${classPrefix}-actions-${size}`}>
{actions.map((action, index) => {
const { text, ...rest } = action
return (
Expand Down
10 changes: 3 additions & 7 deletions src/styles/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1956,19 +1956,15 @@ $empty-title-margin-top: var(--nutui-empty-title-margin-top, 0px) !default;
$empty-background-color: var(--nutui-empty-background-color, #fff) !default;
$empty-title-margin-bottom: var(
--nutui-empty-title-margin-bottom,
8px
12px
) !default;
$empty-title-line-height: var(
--nutui-empty-title-line-height,
$font-size-base
) !default;
$empty-description-margin-top: var(
--nutui-empty-description-margin-top,
0px
$font-size-l
) !default;
$empty-description-line-height: var(
--nutui-empty-description-line-height,
1.2
1
) !default;

// cascader（✅）
Expand Down
Loading