@phpsoftbox/react-softbox 2.2.0 → 2.2.1
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 +31 -3
- package/dist/components/Button/Button.d.ts +1 -1
- package/dist/components/Button/Button.js +3 -3
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Card/Card.d.ts +8 -4
- package/dist/components/Card/Card.js +12 -2
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/Card/Card.module.css +55 -2
- package/dist/foundations/tokens.css +12 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js.map +1 -1
- package/docs/card.md +59 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -106,7 +106,10 @@ yarn build
|
|
|
106
106
|
<Button variant="info" appearance="outline">Info</Button>
|
|
107
107
|
<Button variant="danger" appearance="ghost">Danger</Button>
|
|
108
108
|
<Button variant="primary" size="sm">Small</Button>
|
|
109
|
-
<Button
|
|
109
|
+
<Button as="a" href="/settings">Link button</Button>
|
|
110
|
+
<Button as="a" href="/reports.csv" download>
|
|
111
|
+
Download
|
|
112
|
+
</Button>
|
|
110
113
|
|
|
111
114
|
<Button.Group aria-label="Режим просмотра">
|
|
112
115
|
<Button appearance="outline">День</Button>
|
|
@@ -115,16 +118,41 @@ yarn build
|
|
|
115
118
|
</Button.Group>
|
|
116
119
|
```
|
|
117
120
|
|
|
118
|
-
|
|
121
|
+
Основной polymorphic prop для `Button` — `as`.
|
|
122
|
+
Для Inertia/Router-ссылок передайте link-компонент через `as`:
|
|
123
|
+
|
|
124
|
+
```tsx
|
|
125
|
+
import { Link } from '@inertiajs/react';
|
|
126
|
+
|
|
127
|
+
<Button as={Link} href="/orders">
|
|
128
|
+
Заказы
|
|
129
|
+
</Button>
|
|
130
|
+
|
|
131
|
+
<Button as={Link} href="/orders" method="post" preserveScroll>
|
|
132
|
+
Создать
|
|
133
|
+
</Button>
|
|
134
|
+
|
|
135
|
+
<Button as={Link} href="/orders" disabled>
|
|
136
|
+
Недоступно
|
|
137
|
+
</Button>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
Если нужно передать Inertia `Link` собственный `as="button"`, используйте тонкий adapter:
|
|
119
141
|
|
|
120
142
|
```tsx
|
|
121
143
|
import { Link } from '@inertiajs/react';
|
|
122
144
|
|
|
123
|
-
|
|
145
|
+
const InertiaButtonLink = (props) => (
|
|
146
|
+
<Link as="button" {...props} />
|
|
147
|
+
);
|
|
148
|
+
|
|
149
|
+
<Button as={InertiaButtonLink} href="/logout" method="post">
|
|
124
150
|
Выйти
|
|
125
151
|
</Button>
|
|
126
152
|
```
|
|
127
153
|
|
|
154
|
+
Для `as="a"` и внешних link-компонентов `disabled` добавляет `aria-disabled`, убирает элемент из tab order и блокирует click handler.
|
|
155
|
+
|
|
128
156
|
Custom variants задаются через `--variant-{name}-*` токены:
|
|
129
157
|
|
|
130
158
|
```tsx
|
|
@@ -5,7 +5,7 @@ export type ButtonAppearance = 'solid' | 'outline' | 'ghost';
|
|
|
5
5
|
export type ButtonSize = 'sm' | 'md' | 'lg';
|
|
6
6
|
export type ButtonGroupOrientation = 'horizontal' | 'vertical';
|
|
7
7
|
type ButtonOwnProps<TElement extends React.ElementType> = {
|
|
8
|
-
|
|
8
|
+
as?: TElement;
|
|
9
9
|
variant?: ButtonVariant | 'ghost' | 'outline';
|
|
10
10
|
appearance?: ButtonAppearance;
|
|
11
11
|
size?: ButtonSize;
|
|
@@ -34,11 +34,11 @@ const normalizeVariant = (variant, appearance) => {
|
|
|
34
34
|
appearance: appearance ?? 'solid',
|
|
35
35
|
};
|
|
36
36
|
};
|
|
37
|
-
function ButtonBase({
|
|
37
|
+
function ButtonBase({ as, variant, appearance, size = 'md', className, disabled = false, onClick, tabIndex, style, ...props }) {
|
|
38
38
|
const resolved = normalizeVariant(variant, appearance);
|
|
39
39
|
const variantStyle = isBuiltinUiVariant(resolved.variant) ? undefined : buildButtonVariantStyle(resolved.variant);
|
|
40
|
-
const Component = (
|
|
41
|
-
const isNativeButton =
|
|
40
|
+
const Component = (as ?? 'button');
|
|
41
|
+
const isNativeButton = as === undefined || as === 'button';
|
|
42
42
|
const classes = [
|
|
43
43
|
'btn',
|
|
44
44
|
getBuiltinUiVariantClass(variantClass, resolved.variant),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,uBAAuB,EACvB,wBAAwB,EACxB,kBAAkB,EAClB,WAAW,GACZ,MAAM,uBAAuB,CAAC;AAmC/B,MAAM,YAAY,GAAqC;IACrD,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,SAAS,EAAE,eAAe;IAC1B,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,WAAW;IAClB,OAAO,EAAE,aAAa;CACvB,CAAC;AAEF,MAAM,eAAe,GAAqC;IACxD,KAAK,EAAE,WAAW;IAClB,OAAO,EAAE,aAAa;IACtB,KAAK,EAAE,WAAW;CACnB,CAAC;AAEF,MAAM,SAAS,GAA+B;IAC5C,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,QAAQ;CACb,CAAC;AAEF,MAAM,gBAAgB,GAAG,CACvB,OAA6C,EAC7C,UAA6B,EAC6B,EAAE;IAC5D,IAAI,OAAO,KAAK,OAAO,EAAE,CAAC;QACxB,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC;IACrD,CAAC;IAED,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC;IACvD,CAAC;IAED,OAAO;QACL,OAAO,EAAE,OAAO,IAAI,SAAS;QAC7B,UAAU,EAAE,UAAU,IAAI,OAAO;KAClC,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,UAAU,CAAgD,EACjE,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -17,11 +17,11 @@ type CardHeaderTextProps<TElement extends React.ElementType> = CardHeaderTextOwn
|
|
|
17
17
|
type CardHeaderTitleComponent = <TElement extends React.ElementType = 'h1'>(props: CardHeaderTextProps<TElement>) => React.ReactElement | null;
|
|
18
18
|
type CardHeaderSubtitleComponent = <TElement extends React.ElementType = 'p'>(props: CardHeaderTextProps<TElement>) => React.ReactElement | null;
|
|
19
19
|
type CardSectionProps = React.HTMLAttributes<HTMLDivElement>;
|
|
20
|
-
type CardToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
20
|
+
export type CardToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
21
21
|
align?: 'left' | 'right' | 'between';
|
|
22
22
|
buttonHideLabelOn?: 'never' | 'md';
|
|
23
23
|
};
|
|
24
|
-
type CardToolbarGroupProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
24
|
+
export type CardToolbarGroupProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
25
25
|
attached?: boolean;
|
|
26
26
|
};
|
|
27
27
|
type CardToolbarButtonBaseProps<TElement extends React.ElementType = 'button'> = Omit<ButtonProps<TElement>, 'children'> & {
|
|
@@ -29,9 +29,13 @@ type CardToolbarButtonBaseProps<TElement extends React.ElementType = 'button'> =
|
|
|
29
29
|
label?: React.ReactNode;
|
|
30
30
|
hideLabelOn?: 'never' | 'md';
|
|
31
31
|
};
|
|
32
|
-
type CardToolbarButtonProps<TElement extends React.ElementType = 'button'> = (CardToolbarButtonBaseProps<TElement> & {
|
|
32
|
+
export type CardToolbarButtonProps<TElement extends React.ElementType = 'button'> = (CardToolbarButtonBaseProps<TElement> & {
|
|
33
33
|
icon: React.ReactNode;
|
|
34
|
-
label?:
|
|
34
|
+
label?: undefined;
|
|
35
|
+
'aria-label': string;
|
|
36
|
+
}) | (CardToolbarButtonBaseProps<TElement> & {
|
|
37
|
+
icon: React.ReactNode;
|
|
38
|
+
label: React.ReactNode;
|
|
35
39
|
}) | (CardToolbarButtonBaseProps<TElement> & {
|
|
36
40
|
icon?: React.ReactNode;
|
|
37
41
|
label: React.ReactNode;
|
|
@@ -57,6 +57,11 @@ const isSameRows = (left, right) => {
|
|
|
57
57
|
}
|
|
58
58
|
return true;
|
|
59
59
|
};
|
|
60
|
+
const toolbarButtonSizeClass = {
|
|
61
|
+
sm: styles.toolbarButtonSizeSm,
|
|
62
|
+
md: styles.toolbarButtonSizeMd,
|
|
63
|
+
lg: styles.toolbarButtonSizeLg,
|
|
64
|
+
};
|
|
60
65
|
function CardToolbarBase({ align = 'left', buttonHideLabelOn = 'md', className, children, ...props }) {
|
|
61
66
|
const alignClass = align === 'right'
|
|
62
67
|
? styles.toolbarAlignRight
|
|
@@ -131,17 +136,22 @@ function CardToolbarBase({ align = 'left', buttonHideLabelOn = 'md', className,
|
|
|
131
136
|
return (_jsx("div", { className: styles.toolbarItem, "data-card-toolbar-item": "true", "data-toolbar-row": row, "data-toolbar-row-start": rowStart ? 'true' : 'false', "data-toolbar-row-wrapped": row > 0 ? 'true' : 'false', children: child }, key));
|
|
132
137
|
}) }) }));
|
|
133
138
|
}
|
|
134
|
-
function CardToolbarButton({ icon, label, hideLabelOn, className, ...props }) {
|
|
139
|
+
function CardToolbarButton({ icon, label, hideLabelOn, size, appearance, className, ...props }) {
|
|
135
140
|
const toolbarConfig = React.useContext(CardToolbarContext);
|
|
136
141
|
const resolvedHideLabelOn = hideLabelOn ?? toolbarConfig.hideLabelOn;
|
|
142
|
+
const resolvedSize = (size ?? 'md');
|
|
143
|
+
const resolvedAppearance = (appearance ?? 'outline');
|
|
137
144
|
const hasIcon = icon !== undefined && icon !== null;
|
|
138
145
|
const hasLabel = label !== undefined && label !== null;
|
|
139
146
|
if (!hasIcon && !hasLabel) {
|
|
140
147
|
return null;
|
|
141
148
|
}
|
|
142
149
|
const hasBoth = hasIcon && hasLabel;
|
|
150
|
+
const isIconOnly = hasIcon && !hasLabel;
|
|
143
151
|
const classes = [
|
|
144
152
|
styles.toolbarButton,
|
|
153
|
+
toolbarButtonSizeClass[resolvedSize],
|
|
154
|
+
isIconOnly ? styles.toolbarButtonIconOnly : null,
|
|
145
155
|
hasBoth ? styles.toolbarButtonHasBoth : null,
|
|
146
156
|
hasBoth && resolvedHideLabelOn === 'md' ? styles.toolbarButtonHideLabelMd : null,
|
|
147
157
|
className,
|
|
@@ -149,7 +159,7 @@ function CardToolbarButton({ icon, label, hideLabelOn, className, ...props }) {
|
|
|
149
159
|
.filter(Boolean)
|
|
150
160
|
.join(' ');
|
|
151
161
|
const ToolbarButtonComponent = Button;
|
|
152
|
-
return (_jsxs(ToolbarButtonComponent, { size:
|
|
162
|
+
return (_jsxs(ToolbarButtonComponent, { size: resolvedSize, appearance: resolvedAppearance, className: classes, "data-card-toolbar-button-icon-only": isIconOnly ? 'true' : undefined, ...props, children: [hasIcon ? (_jsx("span", { className: styles.toolbarButtonIcon, "data-card-toolbar-button-slot": "icon", children: icon })) : null, hasBoth ? (_jsx("span", { className: styles.toolbarButtonSeparator, "data-card-toolbar-button-slot": "separator", "aria-hidden": "true" })) : null, hasLabel ? (_jsx("span", { className: styles.toolbarButtonLabel, "data-card-toolbar-button-slot": "label", children: label })) : null] }));
|
|
153
163
|
}
|
|
154
164
|
function CardToolbarGroup({ attached = false, className, role, ...props }) {
|
|
155
165
|
const classes = [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,MAAM,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"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"}
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
flex-wrap: wrap;
|
|
99
99
|
gap: var(--spacing-2);
|
|
100
100
|
padding-inline: var(--spacing-1);
|
|
101
|
-
min-height:
|
|
101
|
+
min-height: var(--card-toolbar-button-height-md);
|
|
102
102
|
min-width: 0;
|
|
103
103
|
}
|
|
104
104
|
|
|
@@ -109,15 +109,68 @@
|
|
|
109
109
|
}
|
|
110
110
|
|
|
111
111
|
.toolbarButton {
|
|
112
|
-
|
|
112
|
+
--card-toolbar-button-height: var(--card-toolbar-button-height-md);
|
|
113
|
+
--card-toolbar-button-padding-x: var(--card-toolbar-button-padding-x-md);
|
|
114
|
+
--card-toolbar-button-icon-size: var(--card-toolbar-button-icon-size-md);
|
|
115
|
+
--card-toolbar-button-font-size: var(--card-toolbar-button-font-size-md);
|
|
116
|
+
min-height: var(--card-toolbar-button-height);
|
|
113
117
|
min-width: 0;
|
|
114
118
|
max-width: 100%;
|
|
115
119
|
}
|
|
116
120
|
|
|
121
|
+
:global(.btn).toolbarButton {
|
|
122
|
+
height: var(--card-toolbar-button-height);
|
|
123
|
+
min-height: var(--card-toolbar-button-height);
|
|
124
|
+
padding-block: 0;
|
|
125
|
+
padding-inline: var(--card-toolbar-button-padding-x);
|
|
126
|
+
font-size: var(--card-toolbar-button-font-size);
|
|
127
|
+
white-space: nowrap;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.toolbarButtonSizeSm {
|
|
131
|
+
--card-toolbar-button-height: var(--card-toolbar-button-height-sm);
|
|
132
|
+
--card-toolbar-button-padding-x: var(--card-toolbar-button-padding-x-sm);
|
|
133
|
+
--card-toolbar-button-icon-size: var(--card-toolbar-button-icon-size-sm);
|
|
134
|
+
--card-toolbar-button-font-size: var(--card-toolbar-button-font-size-sm);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.toolbarButtonSizeMd {
|
|
138
|
+
--card-toolbar-button-height: var(--card-toolbar-button-height-md);
|
|
139
|
+
--card-toolbar-button-padding-x: var(--card-toolbar-button-padding-x-md);
|
|
140
|
+
--card-toolbar-button-icon-size: var(--card-toolbar-button-icon-size-md);
|
|
141
|
+
--card-toolbar-button-font-size: var(--card-toolbar-button-font-size-md);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.toolbarButtonSizeLg {
|
|
145
|
+
--card-toolbar-button-height: var(--card-toolbar-button-height-lg);
|
|
146
|
+
--card-toolbar-button-padding-x: var(--card-toolbar-button-padding-x-lg);
|
|
147
|
+
--card-toolbar-button-icon-size: var(--card-toolbar-button-icon-size-lg);
|
|
148
|
+
--card-toolbar-button-font-size: var(--card-toolbar-button-font-size-lg);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
:global(.btn).toolbarButtonIconOnly {
|
|
152
|
+
width: var(--card-toolbar-button-height);
|
|
153
|
+
min-width: var(--card-toolbar-button-height);
|
|
154
|
+
max-width: var(--card-toolbar-button-height);
|
|
155
|
+
padding: 0;
|
|
156
|
+
flex: 0 0 var(--card-toolbar-button-height);
|
|
157
|
+
aspect-ratio: 1 / 1;
|
|
158
|
+
}
|
|
159
|
+
|
|
117
160
|
.toolbarButtonIcon {
|
|
118
161
|
display: inline-flex;
|
|
119
162
|
align-items: center;
|
|
120
163
|
justify-content: center;
|
|
164
|
+
width: var(--card-toolbar-button-icon-size);
|
|
165
|
+
height: var(--card-toolbar-button-icon-size);
|
|
166
|
+
line-height: 1;
|
|
167
|
+
flex: 0 0 var(--card-toolbar-button-icon-size);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.toolbarButtonIcon :where(svg) {
|
|
171
|
+
width: var(--card-toolbar-button-icon-size);
|
|
172
|
+
height: var(--card-toolbar-button-icon-size);
|
|
173
|
+
flex-shrink: 0;
|
|
121
174
|
}
|
|
122
175
|
|
|
123
176
|
.toolbarButtonLabel {
|
|
@@ -225,6 +225,18 @@
|
|
|
225
225
|
--badge-circle-border-radius: var(--radius-circle);
|
|
226
226
|
--card-border-radius: var(--radius-default);
|
|
227
227
|
--card-toolbar-border-radius: var(--radius-default);
|
|
228
|
+
--card-toolbar-button-height-sm: 2rem;
|
|
229
|
+
--card-toolbar-button-height-md: 2.125rem;
|
|
230
|
+
--card-toolbar-button-height-lg: 2.5rem;
|
|
231
|
+
--card-toolbar-button-padding-x-sm: 0.625rem;
|
|
232
|
+
--card-toolbar-button-padding-x-md: 0.75rem;
|
|
233
|
+
--card-toolbar-button-padding-x-lg: 0.875rem;
|
|
234
|
+
--card-toolbar-button-icon-size-sm: 0.875rem;
|
|
235
|
+
--card-toolbar-button-icon-size-md: 1rem;
|
|
236
|
+
--card-toolbar-button-icon-size-lg: 1.125rem;
|
|
237
|
+
--card-toolbar-button-font-size-sm: var(--font-size-2);
|
|
238
|
+
--card-toolbar-button-font-size-md: var(--font-size-3);
|
|
239
|
+
--card-toolbar-button-font-size-lg: var(--font-size-4);
|
|
228
240
|
--alert-border-radius: var(--radius-default);
|
|
229
241
|
--table-border-radius: var(--radius-default);
|
|
230
242
|
--input-border-radius: var(--radius-default);
|
package/dist/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ export { default as Button } from './components/Button/Button';
|
|
|
2
2
|
export type { ButtonAppearance, ButtonGroupOrientation, ButtonGroupProps, ButtonProps, ButtonSize, ButtonVariant, } from './components/Button/Button';
|
|
3
3
|
export { default as Badge } from './components/Badge/Badge';
|
|
4
4
|
export { default as Card } from './components/Card/Card';
|
|
5
|
+
export type { CardToolbarButtonProps, CardToolbarGroupProps, CardToolbarProps, } from './components/Card/Card';
|
|
5
6
|
export { default as CollapseButton } from './components/CollapseButton/CollapseButton';
|
|
6
7
|
export { default as Collapse } from './components/Collapse/Collapse';
|
|
7
8
|
export { default as FormField } from './components/Input/FormField/FormField';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAS/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAS/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAMzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,4CAA4C,CAAC;AACvF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAErE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAElE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAE3E,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AA+B/D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}
|
package/docs/card.md
CHANGED
|
@@ -34,9 +34,19 @@
|
|
|
34
34
|
|
|
35
35
|
```tsx
|
|
36
36
|
<Card.Toolbar>
|
|
37
|
+
<Card.Toolbar.Group attached>
|
|
38
|
+
<Card.Toolbar.Button label="Обзор" />
|
|
39
|
+
<Card.Toolbar.Button label="Метрики" />
|
|
40
|
+
<Card.Toolbar.Button label="Логи" />
|
|
41
|
+
</Card.Toolbar.Group>
|
|
42
|
+
|
|
37
43
|
<Card.Toolbar.Group attached>
|
|
38
44
|
<Card.Toolbar.Button icon={<SaveIcon />} label="Сохранить" />
|
|
39
|
-
<Card.Toolbar.Button icon={<RefreshIcon />} />
|
|
45
|
+
<Card.Toolbar.Button icon={<RefreshIcon />} label="Обновить" />
|
|
46
|
+
</Card.Toolbar.Group>
|
|
47
|
+
|
|
48
|
+
<Card.Toolbar.Group>
|
|
49
|
+
<Card.Toolbar.Button aria-label="Настройки" icon={<SettingsIcon />} />
|
|
40
50
|
</Card.Toolbar.Group>
|
|
41
51
|
</Card.Toolbar>
|
|
42
52
|
```
|
|
@@ -45,23 +55,67 @@
|
|
|
45
55
|
Если переданы оба, внутри кнопки появится вертикальный разделитель. На средних экранах текстовая часть скрывается.
|
|
46
56
|
`Card.Toolbar.Group attached` склеивает соседние кнопки в одну группу; без `attached` группы остаются разделёнными gap и toolbar-разделителями.
|
|
47
57
|
|
|
48
|
-
|
|
58
|
+
Если передан `icon` без `label`, кнопка становится стабильным square-контролом. Для таких кнопок указывайте `aria-label`.
|
|
59
|
+
|
|
60
|
+
Размер toolbar-кнопки по умолчанию — `md`. Его можно переопределить через `size="sm" | "md" | "lg"`;
|
|
61
|
+
высота, горизонтальный padding и размер icon-only слота берутся из `--card-toolbar-button-*` токенов.
|
|
62
|
+
|
|
63
|
+
Основной polymorphic prop для `Card.Toolbar.Button` — `as`.
|
|
64
|
+
Для ссылок используйте `as`. Это работает и с native `<a>`, и с внешними link-компонентами:
|
|
49
65
|
|
|
50
66
|
```tsx
|
|
51
67
|
import { Link } from '@inertiajs/react';
|
|
52
68
|
|
|
53
69
|
<Card.Toolbar.Button
|
|
54
|
-
|
|
70
|
+
as="a"
|
|
71
|
+
href="/reports.csv"
|
|
72
|
+
download
|
|
73
|
+
icon={<DownloadIcon />}
|
|
74
|
+
label="Скачать"
|
|
75
|
+
/>
|
|
76
|
+
|
|
77
|
+
<Card.Toolbar.Button
|
|
78
|
+
as={Link}
|
|
79
|
+
href="/reports"
|
|
80
|
+
icon={<ReportIcon />}
|
|
81
|
+
label="Отчеты"
|
|
82
|
+
/>
|
|
83
|
+
|
|
84
|
+
<Card.Toolbar.Button
|
|
85
|
+
as={Link}
|
|
55
86
|
href="/reports/export"
|
|
56
87
|
method="post"
|
|
57
88
|
preserveScroll
|
|
58
|
-
|
|
89
|
+
icon={<ExportIcon />}
|
|
90
|
+
label="Экспорт"
|
|
91
|
+
/>
|
|
92
|
+
|
|
93
|
+
<Card.Toolbar.Button
|
|
94
|
+
as={Link}
|
|
95
|
+
href="/reports/export"
|
|
96
|
+
disabled
|
|
97
|
+
icon={<ExportIcon />}
|
|
98
|
+
label="Экспорт"
|
|
99
|
+
/>
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
Если нужно передать Inertia `Link` собственный `as="button"`, используйте adapter:
|
|
103
|
+
|
|
104
|
+
```tsx
|
|
105
|
+
const InertiaToolbarButtonLink = (props) => (
|
|
106
|
+
<Link as="button" {...props} />
|
|
107
|
+
);
|
|
108
|
+
|
|
109
|
+
<Card.Toolbar.Button
|
|
110
|
+
as={InertiaToolbarButtonLink}
|
|
111
|
+
href="/reports/export"
|
|
112
|
+
method="post"
|
|
59
113
|
icon={<ExportIcon />}
|
|
60
114
|
label="Экспорт"
|
|
61
115
|
/>
|
|
62
116
|
```
|
|
63
117
|
|
|
64
|
-
`
|
|
118
|
+
Для link-рендера `disabled` добавляет `aria-disabled`, убирает ссылку из tab order и блокирует click handler.
|
|
65
119
|
|
|
66
120
|
Скрытие текста включено по умолчанию (`md`) и настраивается:
|
|
67
121
|
- на уровне `Card.Toolbar`: `buttonHideLabelOn="md" | "never"`
|