Skip to content

Commit 006b12a

Browse files
wangdicoderwangdicoder
authored
feat(react): improve button, tag, speed-dial, and time-picker components (#68)
* feat(button): add hover, focus, and active state styles for status button types Add missing hover/active color tokens for success, info, warning, and danger in both light and dark themes, and pass them to the button-style mixin so these button types now have visible interactive state feedback. * feat(tag): add success, info, warning, and danger status color presets Add status color styles using the global semantic color tokens to match the button component's status types. Include a Status demo and update both EN and CN docs. * fix(speed-dial): use theme-aware CSS custom properties instead of hardcoded SCSS variables Replace hardcoded $primary-color references with var(--ty-color-primary) and related tokens so the FAB button color follows theme changes. * feat(time-picker): add pending selection state with commit-on-OK behavior Introduce a pending state so clicking time slots shows a tentative (greyed) highlight without affecting other columns. The input displays the in-progress time in a lighter color. Selections are only committed when OK is clicked, matching Ant Design's TimePicker behavior. * fix: margin styles * chore: add changeset for button, tag, speed-dial, and time-picker improvements
1 parent 0a43eaf commit 006b12a

16 files changed

Lines changed: 252 additions & 96 deletions

File tree

‎.changeset/button-tag-speeddial-timepicker-improvements.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@tiny-design/react": minor
3+
"@tiny-design/tokens": minor
4+
---
5+
6+
Add hover/focus/active state styles for button status types (success, info, warning, danger), add status color presets to Tag component, fix SpeedDial to use theme-aware CSS custom properties, and improve TimePicker with pending selection state committed on OK

‎packages/react/src/button/style/_index.scss‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ $btn-prefix: #{$prefix}-btn;
2424
line-height: $btn-line-height;
2525

2626
&__loader {
27-
@include loader();
27+
@include loader;
2828
}
2929

3030
&__icon-container, &__loader {
@@ -91,19 +91,27 @@ $btn-prefix: #{$prefix}-btn;
9191
}
9292

9393
&_info {
94-
@include button-style(#fff, var(--ty-color-info), var(--ty-color-info));
94+
@include button-style(#fff, var(--ty-color-info), var(--ty-color-info),
95+
var(--ty-color-info-hover), var(--ty-color-info-hover), #fff,
96+
var(--ty-color-info-active), var(--ty-color-info-active), #fff);
9597
}
9698

9799
&_success {
98-
@include button-style(#fff, var(--ty-color-success), var(--ty-color-success));
100+
@include button-style(#fff, var(--ty-color-success), var(--ty-color-success),
101+
var(--ty-color-success-hover), var(--ty-color-success-hover), #fff,
102+
var(--ty-color-success-active), var(--ty-color-success-active), #fff);
99103
}
100104

101105
&_warning {
102-
@include button-style(#fff, var(--ty-color-warning), var(--ty-color-warning));
106+
@include button-style(#fff, var(--ty-color-warning), var(--ty-color-warning),
107+
var(--ty-color-warning-hover), var(--ty-color-warning-hover), #fff,
108+
var(--ty-color-warning-active), var(--ty-color-warning-active), #fff);
103109
}
104110

105111
&_danger {
106-
@include button-style(#fff, var(--ty-color-danger), var(--ty-color-danger));
112+
@include button-style(#fff, var(--ty-color-danger), var(--ty-color-danger),
113+
var(--ty-color-danger-hover), var(--ty-color-danger-hover), #fff,
114+
var(--ty-color-danger-active), var(--ty-color-danger-active), #fff);
107115
}
108116

109117
// Sizes
@@ -135,13 +143,10 @@ $btn-prefix: #{$prefix}-btn;
135143
position: relative;
136144
pointer-events: none;
137145

138-
&:before {
146+
&::before {
139147
content: '';
140148
position: absolute;
141-
top: -1px;
142-
right: -1px;
143-
bottom: -1px;
144-
left: -1px;
149+
inset: -1px;
145150
z-index: 1;
146151
display: block;
147152
background: var(--ty-btn-loading-bg);
@@ -208,7 +213,7 @@ $btn-prefix: #{$prefix}-btn;
208213
&_danger {
209214
.#{$btn-prefix} {
210215
&:not(:first-child) {
211-
border-left-color: rgba(255, 255, 255, 0.2);
216+
border-left-color: rgb(255 255 255 / 20%);
212217
}
213218
}
214219
}

‎packages/react/src/pop-confirm/style/_index.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@
1515
}
1616

1717
&__buttons {
18+
display: flex;
19+
align-items: center;
20+
justify-content: flex-end;
21+
gap: 8px;
1822
text-align: right;
1923
}
2024

‎packages/react/src/slider/style/_index.scss‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,13 @@
55
box-sizing: border-box;
66
cursor: pointer;
77

8-
&_horizontal.#{$prefix}-slider {
9-
margin-bottom: $slider-margin-bottom-with-marks;
10-
}
11-
12-
&_vertical.#{$prefix}-slider {
13-
margin-right: $slider-margin-bottom-with-marks;
14-
}
15-
168
&_horizontal {
9+
width: 100%;
1710
min-height: $slider-size;
1811
margin: 13px 7px;
1912
padding: 4px 0;
2013

2114
.#{$prefix}-slider {
22-
2315
&__rail {
2416
width: 100%;
2517
height: $slider-track-size;

‎packages/react/src/speed-dial/style/_index.scss‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
@use "../../style/variables" as *;
2-
@use "sass:color";
32

43
$speed-dial-fab-size: 56px;
54
$speed-dial-action-size: 40px;
@@ -18,20 +17,20 @@ $speed-dial-actions-gap: 16px;
1817
height: $speed-dial-fab-size;
1918
border-radius: 50%;
2019
border: none;
21-
background-color: var(--ty-speed-dial-bg, #{$primary-color});
22-
color: var(--ty-speed-dial-color, #{$white-color});
20+
background-color: var(--ty-speed-dial-bg, var(--ty-color-primary));
21+
color: var(--ty-speed-dial-color, #fff);
2322
font-size: 24px;
2423
cursor: pointer;
2524
box-shadow: $box-shadow;
2625
transition: background-color 0.2s ease;
2726
outline: none;
2827

2928
&:hover:not(.#{$prefix}-speed-dial__button_disabled) {
30-
background-color: var(--ty-speed-dial-bg-hover, #{color.adjust($primary-color, $lightness: -8%)});
29+
background-color: var(--ty-speed-dial-bg-hover, var(--ty-color-primary-active));
3130
}
3231

3332
&:focus-visible {
34-
box-shadow: 0 0 0 3px rgba($primary-color, 0.3), $box-shadow;
33+
box-shadow: 0 0 0 3px var(--ty-input-focus-shadow, rgb(110 65 191 / 20%)), $box-shadow;
3534
}
3635

3736
&_open {
@@ -59,7 +58,7 @@ $speed-dial-actions-gap: 16px;
5958
position: absolute;
6059
top: 50%;
6160
left: 50%;
62-
background-color: currentColor;
61+
background-color: currentcolor;
6362
border-radius: 1px;
6463
translate: -50% -50%;
6564
}
@@ -183,7 +182,7 @@ $speed-dial-actions-gap: 16px;
183182
}
184183

185184
&:focus-visible {
186-
box-shadow: 0 0 0 3px rgba($primary-color, 0.3), $box-shadow-sm;
185+
box-shadow: 0 0 0 3px var(--ty-input-focus-shadow, rgb(110 65 191 / 20%)), $box-shadow-sm;
187186
}
188187

189188
&_disabled {

‎packages/react/src/tag/demo/Status.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
import { Tag } from '@tiny-design/react';
3+
4+
export default function StatusDemo() {
5+
return (
6+
<div>
7+
<Tag color="success">success</Tag>
8+
<Tag color="info">info</Tag>
9+
<Tag color="warning">warning</Tag>
10+
<Tag color="danger">danger</Tag>
11+
</div>
12+
);
13+
}

‎packages/react/src/tag/index.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import ControlledDemo from './demo/Controlled';
88
import ControlledSource from './demo/Controlled.tsx?raw';
99
import DynamicDemo from './demo/Dynamic';
1010
import DynamicSource from './demo/Dynamic.tsx?raw';
11+
import StatusDemo from './demo/Status';
12+
import StatusSource from './demo/Status.tsx?raw';
1113

1214
# Tag
1315

@@ -71,6 +73,15 @@ We preset a series of colorful tag styles for use in different situations. You c
7173
</Demo>
7274
<Demo>
7375

76+
### Status
77+
78+
Status tags use semantic colors that match the button component's status types.
79+
80+
<DemoBlock component={StatusDemo} source={StatusSource} />
81+
82+
</Demo>
83+
<Demo>
84+
7485
### Controlled
7586

7687
By using the `visible` prop, you can control the close state of Tag.
@@ -98,6 +109,8 @@ By using the `visible` prop, you can control the close state of Tag.
98109

99110
Preset colors: `magenta`, `red`, `volcano`, `orange`, `gold`, `lime`, `green`, `cyan`, `blue`, `geekblue`, `purple`.
100111

112+
Status colors: `success`, `info`, `warning`, `danger`.
113+
101114
### Tag.CheckableTag
102115

103116
| Property | Description | Type | Default |

‎packages/react/src/tag/index.zh_CN.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import ControlledDemo from './demo/Controlled';
88
import ControlledSource from './demo/Controlled.tsx?raw';
99
import DynamicDemo from './demo/Dynamic';
1010
import DynamicSource from './demo/Dynamic.tsx?raw';
11+
import StatusDemo from './demo/Status';
12+
import StatusSource from './demo/Status.tsx?raw';
1113

1214
# Tag
1315

@@ -71,6 +73,15 @@ const { CheckableTag } = Tag;
7173
</Demo>
7274
<Demo>
7375

76+
### 状态标签
77+
78+
状态标签使用与按钮组件状态类型一致的语义化颜色。
79+
80+
<DemoBlock component={StatusDemo} source={StatusSource} />
81+
82+
</Demo>
83+
<Demo>
84+
7485
### 受控显示
7586

7687
通过 `visible` 属性控制标签的显示与隐藏。
@@ -98,6 +109,8 @@ const { CheckableTag } = Tag;
98109

99110
预设颜色：`magenta`、`red`、`volcano`、`orange`、`gold`、`lime`、`green`、`cyan`、`blue`、`geekblue`、`purple`。
100111

112+
状态颜色：`success`、`info`、`warning`、`danger`。
113+
101114
### Tag.CheckableTag
102115

103116
| 属性 | 说明 | 类型 | 默认值 |

‎packages/react/src/tag/style/_index.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,30 @@
102102
background: var(--ty-tag-purple-bg);
103103
border-color: var(--ty-tag-purple-border);
104104
}
105+
106+
&_success {
107+
color: var(--ty-color-success);
108+
background: var(--ty-color-success-bg);
109+
border-color: var(--ty-color-success-border);
110+
}
111+
112+
&_info {
113+
color: var(--ty-color-info);
114+
background: var(--ty-color-info-bg);
115+
border-color: var(--ty-color-info-border);
116+
}
117+
118+
&_warning {
119+
color: var(--ty-color-warning);
120+
background: var(--ty-color-warning-bg);
121+
border-color: var(--ty-color-warning-border);
122+
}
123+
124+
&_danger {
125+
color: var(--ty-color-danger);
126+
background: var(--ty-color-danger-bg);
127+
border-color: var(--ty-color-danger-border);
128+
}
105129
}
106130

107131
.#{$prefix}-checkable-tag {

‎packages/react/src/tag/types.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ export interface CheckableTagProps extends BaseProps {
88
children?: React.ReactNode;
99
}
1010

11+
export type StatusColor = 'success' | 'warning' | 'info' | 'danger';
12+
13+
export const StatusColors: StatusColor[] = ['success', 'info', 'warning', 'danger'];
14+
1115
export const PresetColors = [
1216
'magenta',
1317
'red',
@@ -20,10 +24,11 @@ export const PresetColors = [
2024
'blue',
2125
'geekblue',
2226
'purple',
27+
...StatusColors,
2328
];
2429

2530
export interface TagProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['div']> {
26-
color?: string;
31+
color?: string | StatusColor;
2732
closable?: boolean;
2833
onClose?: React.MouseEventHandler;
2934
onClick?: React.MouseEventHandler;

0 commit comments

Comments
 (0)