@donkit-ai/design-system 0.2.13 → 0.2.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -2
- package/package.json +1 -1
- package/src/components/Card.css +1 -1
- package/src/components/Tabs.css +5 -2
- package/src/components/Tabs.jsx +27 -3
- package/src/styles/iconSizes.js +2 -2
- package/src/styles/tokens.css +1 -1
package/README.md
CHANGED
|
@@ -94,7 +94,7 @@ function MyComponent() {
|
|
|
94
94
|
```javascript
|
|
95
95
|
import { iconSizes } from '@donkit-ai/design-system';
|
|
96
96
|
|
|
97
|
-
// iconSizes = { xs: 16, s: 20, m: 24, l: 28, xl:
|
|
97
|
+
// iconSizes = { xs: 16, s: 20, m: 24, l: 28, xl: 48 }
|
|
98
98
|
```
|
|
99
99
|
|
|
100
100
|
**Соответствие размеров компонентам:**
|
|
@@ -115,7 +115,7 @@ import { iconSizes } from '@donkit-ai/design-system';
|
|
|
115
115
|
- **28px (l)** - крупные элементы
|
|
116
116
|
- Large кнопки (`size="large"`)
|
|
117
117
|
|
|
118
|
-
- **
|
|
118
|
+
- **48px (xl)** - очень крупные элементы
|
|
119
119
|
|
|
120
120
|
**Всегда используется `strokeWidth={1.5}`** для единообразия дизайна.
|
|
121
121
|
|
|
@@ -382,6 +382,20 @@ import { AlertCircle } from 'lucide-react';
|
|
|
382
382
|
<Tab selected>Active</Tab>
|
|
383
383
|
<Tab disabled>Disabled</Tab>
|
|
384
384
|
</Tabs>
|
|
385
|
+
|
|
386
|
+
// As links (с href) - рендерит <a> вместо <button>
|
|
387
|
+
// Поддерживает открытие в новой вкладке и работает с роутингом
|
|
388
|
+
<Tabs size="medium">
|
|
389
|
+
<Tab selected href="/overview">
|
|
390
|
+
Overview
|
|
391
|
+
</Tab>
|
|
392
|
+
<Tab href="/details">
|
|
393
|
+
Details
|
|
394
|
+
</Tab>
|
|
395
|
+
<Tab href="/settings">
|
|
396
|
+
Settings
|
|
397
|
+
</Tab>
|
|
398
|
+
</Tabs>
|
|
385
399
|
```
|
|
386
400
|
|
|
387
401
|
**Стили:**
|
package/package.json
CHANGED
package/src/components/Card.css
CHANGED
package/src/components/Tabs.css
CHANGED
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
color: var(--color-txt-icon-1);
|
|
18
18
|
transition: border-color var(--transition-normal), background-color var(--transition-normal);
|
|
19
19
|
white-space: nowrap;
|
|
20
|
+
text-decoration: none;
|
|
20
21
|
}
|
|
21
22
|
|
|
22
23
|
/* Variants */
|
|
@@ -25,7 +26,7 @@
|
|
|
25
26
|
color: var(--color-txt-icon-2);
|
|
26
27
|
}
|
|
27
28
|
|
|
28
|
-
.ds-tab--ghost:hover:not(.ds-tab--selected):not(:disabled) {
|
|
29
|
+
.ds-tab--ghost:hover:not(.ds-tab--selected):not(:disabled):not([aria-disabled="true"]) {
|
|
29
30
|
background-color: var(--color-item-bg-hover);
|
|
30
31
|
color: var(--color-txt-icon-1);
|
|
31
32
|
}
|
|
@@ -58,9 +59,11 @@
|
|
|
58
59
|
gap: var(--space-s);
|
|
59
60
|
}
|
|
60
61
|
|
|
61
|
-
.ds-tab:disabled
|
|
62
|
+
.ds-tab:disabled,
|
|
63
|
+
.ds-tab[aria-disabled="true"] {
|
|
62
64
|
opacity: 0.5;
|
|
63
65
|
cursor: not-allowed;
|
|
66
|
+
pointer-events: none;
|
|
64
67
|
}
|
|
65
68
|
|
|
66
69
|
.ds-tab-icon {
|
package/src/components/Tabs.jsx
CHANGED
|
@@ -14,7 +14,7 @@ export function Tabs({ children, size = 'medium', variant = 'ghost', ...props })
|
|
|
14
14
|
);
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
export function Tab({ children, selected = false, onClick, size = 'medium', variant = 'ghost', disabled = false, icon, ...props }) {
|
|
17
|
+
export function Tab({ children, selected = false, onClick, size = 'medium', variant = 'ghost', disabled = false, icon, href, ...props }) {
|
|
18
18
|
const isIconOnly = icon && !children;
|
|
19
19
|
|
|
20
20
|
const className = [
|
|
@@ -25,6 +25,31 @@ export function Tab({ children, selected = false, onClick, size = 'medium', vari
|
|
|
25
25
|
isIconOnly && 'ds-tab--icon-only',
|
|
26
26
|
].filter(Boolean).join(' ');
|
|
27
27
|
|
|
28
|
+
const content = (
|
|
29
|
+
<>
|
|
30
|
+
{icon && <span className="ds-tab-icon">{icon}</span>}
|
|
31
|
+
{children}
|
|
32
|
+
</>
|
|
33
|
+
);
|
|
34
|
+
|
|
35
|
+
// Render as link if href is provided
|
|
36
|
+
if (href) {
|
|
37
|
+
return (
|
|
38
|
+
<a
|
|
39
|
+
role="tab"
|
|
40
|
+
aria-current={selected ? 'page' : undefined}
|
|
41
|
+
aria-disabled={disabled ? 'true' : undefined}
|
|
42
|
+
className={className}
|
|
43
|
+
href={disabled ? undefined : href}
|
|
44
|
+
onClick={disabled ? (e) => e.preventDefault() : onClick}
|
|
45
|
+
{...props}
|
|
46
|
+
>
|
|
47
|
+
{content}
|
|
48
|
+
</a>
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// Render as button (default)
|
|
28
53
|
return (
|
|
29
54
|
<button
|
|
30
55
|
role="tab"
|
|
@@ -34,8 +59,7 @@ export function Tab({ children, selected = false, onClick, size = 'medium', vari
|
|
|
34
59
|
disabled={disabled}
|
|
35
60
|
{...props}
|
|
36
61
|
>
|
|
37
|
-
{
|
|
38
|
-
{children}
|
|
62
|
+
{content}
|
|
39
63
|
</button>
|
|
40
64
|
);
|
|
41
65
|
}
|
package/src/styles/iconSizes.js
CHANGED