Skip to content

Commit 9f7341f

Browse files
oasis-cloudoasis-cloud
authored
fix: harmony review (#3002)
* fix: checkbox review * fix: input review * fix: searchbar review * fix: loading review * fix: indicator review * fix: radio review * fix: numberkeyboard review * fix: button review * fix: linheight * feat: add new css var * feat: update docs * fix: indicator * fix: checkbox * fix: checkbox * test: update * test: update * feat: update demos * fix: checkbox * fix: indicator * fix: indicator * fix: navbar * fix: css var * chore: update size * chore: update size * docs: update docs * docs: update docs
1 parent 7e1f79b commit 9f7341f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+443
-346
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,7 @@
221221
"vinyl-fs": "^4.0.0",
222222
"vite": "^5.1.3",
223223
"vite-plugin-dts": "4.2.1",
224-
"vitest": "^3.0.0",
224+
"vitest": "^3.0.7",
225225
"vitest-canvas-mock": "^0.3.3",
226226
"yargs": "^17.7.2"
227227
},

‎pnpm-lock.yaml‎

Lines changed: 77 additions & 60 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/packages/button/button.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -253,6 +253,7 @@
253253
}
254254

255255
&-disabled,
256+
&-disabled.nut-button-icononly,
256257
&-solid-disabled {
257258
color: $button-primary-color;
258259
background: $button-primary-disabled;

‎src/packages/button/demos/taro/demo4.tsx‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react'
2+
import { Text } from '@tarojs/components'
23
import { Button, Cell } from '@nutui/nutui-react-taro'
34
import { Plus, Star } from '@nutui/icons-react-taro'
45
import { harmony } from '@/utils/platform-taro'
@@ -13,42 +14,42 @@ const Demo4 = () => {
1314
<Cell style={{ flexWrap: 'wrap' }}>
1415
<Button
1516
type="primary"
16-
icon={<Star />}
17-
rightIcon={<Star />}
17+
icon={<Star color="#ffffff" />}
18+
rightIcon={<Star color="#ffffff" />}
1819
style={marginStyle}
1920
>
2021
Button
2122
</Button>
2223
<Button
2324
type="primary"
2425
fill="outline"
25-
icon={<Star />}
26-
rightIcon={<Star />}
26+
icon={<Star color="#ff0f23" />}
27+
rightIcon={<Star color="#ff0f23" />}
2728
style={marginStyle}
2829
>
2930
Button
3031
</Button>
3132
<Button
3233
type="primary"
3334
fill="dashed"
34-
icon={<Star />}
35-
rightIcon={<Star />}
35+
icon={<Star color="#ff0f23" />}
36+
rightIcon={<Star color="#ff0f23" />}
3637
style={marginStyle}
3738
>
3839
Button
3940
</Button>
4041
<Button
41-
icon={<Star />}
42-
rightIcon={<Star />}
42+
icon={<Star color="#ff0f23" />}
43+
rightIcon={<Star color="#ff0f23" />}
4344
style={{
4445
margin: 8,
4546
width: harmony() ? 140 : 'auto',
46-
backgroundColor: `var(--nutui-color-primary-light-pressed)`,
47-
borderColor: `var(--nutui-color-primary)`,
48-
color: `var(--nutui-color-primary)`,
47+
backgroundColor: `#ffebf1`,
48+
borderColor: `#ff0f23`,
49+
color: `#ff0f23`,
4950
}}
5051
>
51-
Button
52+
<Text style={{ color: '#ff0f23' }}>Button</Text>
5253
</Button>
5354
<Button
5455
type="default"
@@ -58,8 +59,8 @@ const Demo4 = () => {
5859
style={{
5960
margin: 8,
6061
width: harmony() ? 140 : 'auto',
61-
backgroundColor: `var(--nutui-gray-3)`,
62-
color: `var(--nutui-gray-7)`,
62+
backgroundColor: `#f2f3f5`,
63+
color: `#1a1a1a`,
6364
}}
6465
>
6566
Button
@@ -72,8 +73,8 @@ const Demo4 = () => {
7273
style={{
7374
margin: 8,
7475
width: harmony() ? 140 : 'auto',
75-
backgroundColor: `var(--nutui-gray-1)`,
76-
color: `var(--nutui-gray-7)`,
76+
backgroundColor: `#ffffff`,
77+
color: `#1a1a1a`,
7778
}}
7879
>
7980
Button
@@ -90,23 +91,23 @@ const Demo4 = () => {
9091
shape="square"
9192
fill="outline"
9293
type="primary"
93-
icon={<Plus size={10} />}
94+
icon={<Plus size={10} color="#ff0f23" />}
9495
style={{
9596
margin: 8,
9697
}}
9798
/>
9899
<Button
99100
fill="outline"
100101
type="primary"
101-
icon={<Plus size={10} />}
102+
icon={<Plus size={10} color="#ff0f23" />}
102103
style={{
103104
margin: 8,
104105
}}
105106
/>
106107
<Button
107108
type="primary"
108109
fill="dashed"
109-
icon={<Plus size={10} />}
110+
icon={<Plus size={10} color="#ff0f23" />}
110111
style={{
111112
margin: 8,
112113
}}
@@ -115,8 +116,8 @@ const Demo4 = () => {
115116
shape="round"
116117
type="primary"
117118
size="large"
118-
icon={<Star />}
119-
rightIcon={<Star />}
119+
icon={<Star color="#ffffff" />}
120+
rightIcon={<Star color="#ffffff" />}
120121
style={marginStyle}
121122
>
122123
Button
@@ -125,8 +126,8 @@ const Demo4 = () => {
125126
shape="round"
126127
type="primary"
127128
size="xlarge"
128-
icon={<Star />}
129-
rightIcon={<Star />}
129+
icon={<Star color="#ffffff" />}
130+
rightIcon={<Star color="#ffffff" />}
130131
style={marginStyle}
131132
>
132133
Button

‎src/packages/button/demos/taro/demo5.tsx‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ const Demo5 = () => {
1414
<Button
1515
disabled
1616
type="primary"
17-
icon={<Star />}
18-
rightIcon={<Star />}
17+
icon={<Star color="#ffffff" />}
18+
rightIcon={<Star color="#ffffff" />}
1919
style={marginStyle}
2020
>
2121
Disabled
@@ -24,8 +24,8 @@ const Demo5 = () => {
2424
disabled
2525
type="primary"
2626
fill="outline"
27-
icon={<Star />}
28-
rightIcon={<Star />}
27+
icon={<Star color="#ffadbe" />}
28+
rightIcon={<Star color="#ffadbe" />}
2929
style={marginStyle}
3030
>
3131
Disabled
@@ -34,17 +34,17 @@ const Demo5 = () => {
3434
disabled
3535
type="primary"
3636
fill="dashed"
37-
icon={<Star />}
38-
rightIcon={<Star />}
37+
icon={<Star color="#ffadbe" />}
38+
rightIcon={<Star color="#ffadbe" />}
3939
style={marginStyle}
4040
>
4141
Disabled
4242
</Button>
4343
<Button
4444
disabled
4545
fill="solid"
46-
icon={<Star />}
47-
rightIcon={<Star />}
46+
icon={<Star color="#ffffff" />}
47+
rightIcon={<Star color="#ffffff" />}
4848
style={marginStyle}
4949
>
5050
Disabled
@@ -53,13 +53,13 @@ const Demo5 = () => {
5353
disabled
5454
type="default"
5555
fill="none"
56-
icon={<Star />}
57-
rightIcon={<Star />}
56+
icon={<Star color="#888b94" />}
57+
rightIcon={<Star color="#888b94" />}
5858
style={{
5959
margin: 8,
6060
width: harmony() ? 140 : 'auto',
61-
backgroundColor: `var(--nutui-gray-3)`,
62-
color: `var(--nutui-gray-5)`,
61+
backgroundColor: `#f2f3f5`,
62+
color: `#888b94`,
6363
}}
6464
>
6565
Disabled
@@ -68,21 +68,21 @@ const Demo5 = () => {
6868
disabled
6969
type="default"
7070
fill="none"
71-
icon={<Star />}
72-
rightIcon={<Star />}
71+
icon={<Star color="#888b94" />}
72+
rightIcon={<Star color="#888b94" />}
7373
style={{
7474
margin: 8,
7575
width: harmony() ? 140 : 'auto',
76-
backgroundColor: `var(--nutui-gray-1)`,
77-
color: `var(--nutui-gray-5)`,
76+
backgroundColor: `#ffffff`,
77+
color: `#888b94`,
7878
}}
7979
>
8080
Disabled
8181
</Button>
8282
<Button
8383
disabled
84-
icon={<Star />}
85-
rightIcon={<Star />}
84+
icon={<Star color="#ffffff" />}
85+
rightIcon={<Star color="#ffffff" />}
8686
style={marginStyle}
8787
>
8888
Disabled
@@ -92,24 +92,26 @@ const Demo5 = () => {
9292
shape="square"
9393
fill="outline"
9494
type="primary"
95-
icon={<Plus size={10} />}
95+
icon={<Plus size={10} color="rgb(255, 173, 190)" />}
9696
style={{
9797
margin: 8,
9898
}}
9999
/>
100100
<Button
101101
disabled
102102
type="primary"
103-
icon={<Plus size={10} />}
103+
icon={<Plus size={10} color="#ffffff" />}
104104
style={{
105105
margin: 8,
106+
backgroundColor: '#ffadbe',
107+
borderColor: '#ffadbe',
106108
}}
107109
/>
108110
<Button
109111
disabled
110112
type="primary"
111113
fill="dashed"
112-
icon={<Plus size={10} />}
114+
icon={<Plus size={10} color="#ffadbe" />}
113115
style={{
114116
margin: 8,
115117
}}
@@ -119,8 +121,8 @@ const Demo5 = () => {
119121
shape="round"
120122
type="primary"
121123
size="large"
122-
icon={<Star />}
123-
rightIcon={<Star />}
124+
icon={<Star color="#ffffff" />}
125+
rightIcon={<Star color="#ffffff" />}
124126
style={marginStyle}
125127
>
126128
Disabled
@@ -130,8 +132,8 @@ const Demo5 = () => {
130132
shape="round"
131133
type="primary"
132134
size="xlarge"
133-
icon={<Star />}
134-
rightIcon={<Star />}
135+
icon={<Star color="#ffffff" />}
136+
rightIcon={<Star color="#ffffff" />}
135137
style={marginStyle}
136138
>
137139
Disabled

‎src/packages/checkbox/__test__/__snapshots__/checkbox.spec.tsx.snap‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,22 @@ exports[`should match snapshot 1`] = `
55
<div
66
class="nut-checkbox nut-checkbox-reverse"
77
>
8-
<svg
9-
aria-labelledby="Checked"
10-
class="nut-icon nut-icon-Checked nut-checkbox-icon nut-checkbox-icon-checked"
11-
role="presentation"
12-
viewBox="0 0 16 16"
13-
xmlns="http://www.w3.org/2000/svg"
8+
<div
9+
class="nut-checkbox-icon-wrap"
1410
>
15-
<path
16-
d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m4.325-10.117-5.318 5.362-3.332-3.36a.25.25 0 0 1 0-.351l.701-.707a.25.25 0 0 1 .355 0L7.007 9.12l4.262-4.297a.25.25 0 0 1 .355 0l.701.707a.25.25 0 0 1 0 .352"
17-
fill="currentColor"
18-
/>
19-
</svg>
11+
<svg
12+
aria-labelledby="Checked"
13+
class="nut-icon nut-icon-Checked nut-checkbox-icon nut-checkbox-icon-checked"
14+
role="presentation"
15+
viewBox="0 0 16 16"
16+
xmlns="http://www.w3.org/2000/svg"
17+
>
18+
<path
19+
d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m4.325-10.117-5.318 5.362-3.332-3.36a.25.25 0 0 1 0-.351l.701-.707a.25.25 0 0 1 .355 0L7.007 9.12l4.262-4.297a.25.25 0 0 1 .355 0l.701.707a.25.25 0 0 1 0 .352"
20+
fill="currentColor"
21+
/>
22+
</svg>
23+
</div>
2024
<span
2125
class="nut-checkbox-label "
2226
>

‎src/packages/checkbox/__test__/checkbox.spec.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState } from 'react'
22
import { fireEvent, render } from '@testing-library/react'
33
import '@testing-library/jest-dom'
4+
import { Check } from '@nutui/icons-react'
45
import { Checkbox } from '../checkbox'
56
import { CheckboxGroup } from '../../checkboxgroup/checkboxgroup'
67

@@ -36,6 +37,32 @@ test('should props correctly', () => {
3637
expect(handleChange).not.toBeCalled()
3738
})
3839

40+
test('round props correctly', () => {
41+
const { container, queryByText, getByTestId } = render(
42+
<Checkbox
43+
style={{ marginInlineEnd: '8px' }}
44+
shape="button"
45+
activeIcon={<Check className="nut-checkbox-button-icon-checked" />}
46+
className="test"
47+
label={
48+
<div
49+
style={{
50+
display: 'flex',
51+
flexDirection: 'column',
52+
alignItems: 'center',
53+
}}
54+
>
55+
<div>复选框</div>
56+
</div>
57+
}
58+
defaultChecked
59+
/>
60+
)
61+
expect(
62+
container.querySelector('.nut-checkbox-button-icon-checked')
63+
).toBeInTheDocument()
64+
})
65+
3966
test('should fireEvent correctly', () => {
4067
const handleChange = vi.fn((value) => {
4168
value

0 commit comments

Comments
 (0)