@itcase/ui 1.3.37 → 1.4.0
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/dist/cjs/components/Tab.js +3 -3
- package/dist/components/Tab.js +3 -3
- package/dist/css/components/Select/Select.css +22 -20
- package/dist/css/components/Select/Select.tokens.css +12 -12
- package/dist/css/components/Select/css/__control/select__control_fill.css +4 -2
- package/dist/css/components/Select/css/__menu/select__menu-list-item_size.css +1 -1
- package/package.json +2 -2
|
@@ -145,12 +145,12 @@ function Tab(props) {
|
|
|
145
145
|
}
|
|
146
146
|
|
|
147
147
|
function TabGroup(props) {
|
|
148
|
-
var id = props.id,
|
|
148
|
+
var id = props.id, className = props.className, children = props.children, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, style = props.style, set = props.set;
|
|
149
149
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
|
|
150
|
-
var
|
|
150
|
+
var directionClass = propsGenerator.directionClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, contentAlignClass = propsGenerator.contentAlignClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
|
|
151
151
|
// @ts-expect-error
|
|
152
152
|
var _a = useStyles.useStyles(props), groupStyles = _a.styles, groupWrapperStyles = _a.wrapper;
|
|
153
|
-
return (jsxRuntime.jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass && "width_".concat(widthClass), contentAlignClass && "group_content-align_".concat(contentAlignClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), fillClass && "fill_".concat(fillClass), set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', wrapClass && "group_wrap_".concat(wrapClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass)), "data-tour": dataTour,
|
|
153
|
+
return (jsxRuntime.jsx("div", { id: id, className: clsx(className, 'tab-group', 'group', widthClass && "width_".concat(widthClass), contentAlignClass && "group_content-align_".concat(contentAlignClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), fillClass && "fill_".concat(fillClass), set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', wrapClass && "group_wrap_".concat(wrapClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass)), "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxRuntime.jsx("div", { className: "tab-group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
|
|
154
154
|
}
|
|
155
155
|
|
|
156
156
|
exports.Tab = Tab;
|
package/dist/components/Tab.js
CHANGED
|
@@ -143,12 +143,12 @@ function Tab(props) {
|
|
|
143
143
|
}
|
|
144
144
|
|
|
145
145
|
function TabGroup(props) {
|
|
146
|
-
var id = props.id,
|
|
146
|
+
var id = props.id, className = props.className, children = props.children, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, style = props.style, set = props.set;
|
|
147
147
|
var propsGenerator = useDevicePropsGenerator(props);
|
|
148
|
-
var
|
|
148
|
+
var directionClass = propsGenerator.directionClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, contentAlignClass = propsGenerator.contentAlignClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
|
|
149
149
|
// @ts-expect-error
|
|
150
150
|
var _a = useStyles(props), groupStyles = _a.styles, groupWrapperStyles = _a.wrapper;
|
|
151
|
-
return (jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass && "width_".concat(widthClass), contentAlignClass && "group_content-align_".concat(contentAlignClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), fillClass && "fill_".concat(fillClass), set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', wrapClass && "group_wrap_".concat(wrapClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass)), "data-tour": dataTour,
|
|
151
|
+
return (jsx("div", { id: id, className: clsx(className, 'tab-group', 'group', widthClass && "width_".concat(widthClass), contentAlignClass && "group_content-align_".concat(contentAlignClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), fillClass && "fill_".concat(fillClass), set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', wrapClass && "group_wrap_".concat(wrapClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass)), "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsx("div", { className: "tab-group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
|
|
152
152
|
}
|
|
153
153
|
|
|
154
154
|
export { Tab, TabGroup, tabAppearance, tabConfig };
|
|
@@ -32,20 +32,20 @@
|
|
|
32
32
|
|
|
33
33
|
.select {
|
|
34
34
|
&&_size {
|
|
35
|
-
@each $size in
|
|
35
|
+
@each $size in xxl, xl, l, m, s, xs, xxs {
|
|
36
36
|
&_$(size) {
|
|
37
37
|
^^&__control {
|
|
38
|
-
padding: var(--select
|
|
38
|
+
padding: var(--select-$(size)-padding);
|
|
39
39
|
}
|
|
40
40
|
^^&__option {
|
|
41
|
-
padding: var(--select
|
|
41
|
+
padding: var(--select-$(size)-padding);
|
|
42
42
|
}
|
|
43
43
|
^^&__menu {
|
|
44
44
|
&-notice {
|
|
45
|
-
padding: var(--select
|
|
45
|
+
padding: var(--select-$(size)-padding);
|
|
46
46
|
}
|
|
47
47
|
&-group-heading {
|
|
48
|
-
padding: var(--select
|
|
48
|
+
padding: var(--select-$(size)-padding);
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
}
|
|
@@ -111,9 +111,11 @@
|
|
|
111
111
|
.select {
|
|
112
112
|
&__control {
|
|
113
113
|
&_fill {
|
|
114
|
-
@each $type in accent, primary, secondary, tertiary, surface, success,
|
|
114
|
+
@each $type in accent, primary, secondary, tertiary, surface, success,
|
|
115
|
+
error {
|
|
115
116
|
&_$(type) {
|
|
116
|
-
@each $color in primary, secondary, tertiary, quaternary, quinary,
|
|
117
|
+
@each $color in primary, secondary, tertiary, quaternary, quinary,
|
|
118
|
+
senary, accent, disabled, hover {
|
|
117
119
|
&-$(color) {
|
|
118
120
|
background: var(--color-$(type)-$(color));
|
|
119
121
|
}
|
|
@@ -206,7 +208,7 @@
|
|
|
206
208
|
&_size {
|
|
207
209
|
@each $size in xs, s, m, l, xl, xxl {
|
|
208
210
|
&_$(size) {
|
|
209
|
-
padding: var(--select-menu-list-item
|
|
211
|
+
padding: var(--select-menu-list-item-$(size)-padding, 5px 10px);
|
|
210
212
|
}
|
|
211
213
|
}
|
|
212
214
|
}
|
|
@@ -373,12 +375,12 @@
|
|
|
373
375
|
}
|
|
374
376
|
|
|
375
377
|
:root {
|
|
376
|
-
--select-
|
|
377
|
-
--select-
|
|
378
|
-
--select-
|
|
379
|
-
--select-
|
|
380
|
-
--select-
|
|
381
|
-
--select-
|
|
378
|
+
--select-xxl-padding: 15px 25px;
|
|
379
|
+
--select-xl-padding: 9px 20px;
|
|
380
|
+
--select-xs-padding: 0px 8px;
|
|
381
|
+
--select-m-padding: 5px 12px;
|
|
382
|
+
--select-s-padding: 1px 4px;
|
|
383
|
+
--select-l-padding: 7px 15px;
|
|
382
384
|
|
|
383
385
|
--select-menu-border-radius: 12px;
|
|
384
386
|
--select-menu-margin: 0;
|
|
@@ -389,10 +391,10 @@
|
|
|
389
391
|
|
|
390
392
|
--select-success-border: var(--color-surface-border-tertiary);
|
|
391
393
|
|
|
392
|
-
--select-menu-list-item-
|
|
393
|
-
--select-menu-list-item-
|
|
394
|
-
--select-menu-list-item-
|
|
395
|
-
--select-menu-list-item-
|
|
396
|
-
--select-menu-list-item-
|
|
397
|
-
--select-menu-list-item-
|
|
394
|
+
--select-menu-list-item-xxl-padding: 18px 25px;
|
|
395
|
+
--select-menu-list-item-xl-padding: 14px 20px;
|
|
396
|
+
--select-menu-list-item-l-padding: 10px 12px;
|
|
397
|
+
--select-menu-list-item-m-padding: 8px 12px;
|
|
398
|
+
--select-menu-list-item-s-padding: 6px 10px;
|
|
399
|
+
--select-menu-list-item-xs-padding: 2px 8px;
|
|
398
400
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--select-
|
|
3
|
-
--select-
|
|
4
|
-
--select-
|
|
5
|
-
--select-
|
|
6
|
-
--select-
|
|
7
|
-
--select-
|
|
2
|
+
--select-xxl-padding: 15px 25px;
|
|
3
|
+
--select-xl-padding: 9px 20px;
|
|
4
|
+
--select-xs-padding: 0px 8px;
|
|
5
|
+
--select-m-padding: 5px 12px;
|
|
6
|
+
--select-s-padding: 1px 4px;
|
|
7
|
+
--select-l-padding: 7px 15px;
|
|
8
8
|
|
|
9
9
|
--select-menu-border-radius: 12px;
|
|
10
10
|
--select-menu-margin: 0;
|
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
|
|
16
16
|
--select-success-border: var(--color-surface-border-tertiary);
|
|
17
17
|
|
|
18
|
-
--select-menu-list-item-
|
|
19
|
-
--select-menu-list-item-
|
|
20
|
-
--select-menu-list-item-
|
|
21
|
-
--select-menu-list-item-
|
|
22
|
-
--select-menu-list-item-
|
|
23
|
-
--select-menu-list-item-
|
|
18
|
+
--select-menu-list-item-xxl-padding: 18px 25px;
|
|
19
|
+
--select-menu-list-item-xl-padding: 14px 20px;
|
|
20
|
+
--select-menu-list-item-l-padding: 10px 12px;
|
|
21
|
+
--select-menu-list-item-m-padding: 8px 12px;
|
|
22
|
+
--select-menu-list-item-s-padding: 6px 10px;
|
|
23
|
+
--select-menu-list-item-xs-padding: 2px 8px;
|
|
24
24
|
}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
.select {
|
|
2
2
|
&__control {
|
|
3
3
|
&_fill {
|
|
4
|
-
@each $type in accent, primary, secondary, tertiary, surface, success,
|
|
4
|
+
@each $type in accent, primary, secondary, tertiary, surface, success,
|
|
5
|
+
error {
|
|
5
6
|
&_$(type) {
|
|
6
|
-
@each $color in primary, secondary, tertiary, quaternary, quinary,
|
|
7
|
+
@each $color in primary, secondary, tertiary, quaternary, quinary,
|
|
8
|
+
senary, accent, disabled, hover {
|
|
7
9
|
&-$(color) {
|
|
8
10
|
background: var(--color-$(type)-$(color));
|
|
9
11
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"description": "UI components (Modal, Loader, Popup, etc)",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Modal",
|
|
@@ -125,7 +125,7 @@
|
|
|
125
125
|
"@babel/preset-react": "^7.26.3",
|
|
126
126
|
"@commitlint/cli": "^19.8.0",
|
|
127
127
|
"@commitlint/config-conventional": "^19.8.0",
|
|
128
|
-
"@itcase/lint": "^1.0.
|
|
128
|
+
"@itcase/lint": "^1.0.49",
|
|
129
129
|
"@rollup/plugin-babel": "^6.0.4",
|
|
130
130
|
"@rollup/plugin-commonjs": "^28.0.3",
|
|
131
131
|
"@rollup/plugin-image": "^3.0.3",
|