@broxus/react-uikit 0.5.5 → 0.6.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/Button/index.scss +15 -0
- package/dist/cjs/components/ConfigProvider/index.d.ts +6 -6
- package/dist/cjs/components/Control/Select/index.d.ts +2 -1
- package/dist/cjs/components/Tabs/index.scss +1 -1
- package/dist/cjs/styles/_import.components.scss +1 -2
- package/dist/cjs/styles/_import.scss +0 -1
- package/dist/cjs/styles/mixins.scss +0 -55
- package/dist/cjs/styles/variables.scss +0 -19
- package/dist/cjs/tsconfig.cjs.tsbuildinfo +1 -1
- package/dist/cjs/types.d.ts +6 -0
- package/dist/esm/components/Button/index.scss +15 -0
- package/dist/esm/components/ConfigProvider/index.d.ts +6 -6
- package/dist/esm/components/Control/Select/index.d.ts +2 -1
- package/dist/esm/components/Tabs/index.scss +1 -1
- package/dist/esm/styles/_import.components.scss +1 -2
- package/dist/esm/styles/_import.scss +0 -1
- package/dist/esm/styles/mixins.scss +0 -55
- package/dist/esm/styles/variables.scss +0 -19
- package/dist/esm/tsconfig.esm.tsbuildinfo +1 -1
- package/dist/esm/types.d.ts +6 -0
- package/package.json +5 -5
- package/dist/cjs/components/Tab/index.d.ts +0 -0
- package/dist/cjs/components/Tab/index.js +0 -1
- package/dist/cjs/components/Tab/index.scss +0 -216
- package/dist/cjs/styles/switcher.scss +0 -51
- package/dist/esm/components/Tab/index.d.ts +0 -0
- package/dist/esm/components/Tab/index.js +0 -1
- package/dist/esm/components/Tab/index.scss +0 -216
- package/dist/esm/styles/switcher.scss +0 -51
|
@@ -418,77 +418,92 @@
|
|
|
418
418
|
}
|
|
419
419
|
|
|
420
420
|
.uk-button-default.uk-button-ghost {
|
|
421
|
+
background-color: transparent;
|
|
421
422
|
border-color: var(--button-ghost-default-border);
|
|
422
423
|
color: var(--button-ghost-default-color);
|
|
423
424
|
}
|
|
424
425
|
|
|
425
426
|
.uk-button-default.uk-button-ghost:hover,
|
|
426
427
|
.uk-button-default.uk-button-ghost:focus {
|
|
428
|
+
background-color: transparent;
|
|
427
429
|
border-color: var(--button-ghost-default-hover-border);
|
|
428
430
|
}
|
|
429
431
|
|
|
430
432
|
.uk-button-default.uk-button-ghost:active,
|
|
431
433
|
.uk-button-default.uk-button-ghost.active {
|
|
434
|
+
background-color: transparent;
|
|
432
435
|
border-color: var(--button-ghost-default-active-border);
|
|
433
436
|
}
|
|
434
437
|
|
|
435
438
|
.uk-button-primary.uk-button-ghost {
|
|
439
|
+
background-color: transparent;
|
|
436
440
|
border-color: var(--button-ghost-primary-border);
|
|
437
441
|
color: var(--button-ghost-primary-color);
|
|
438
442
|
}
|
|
439
443
|
|
|
440
444
|
.uk-button-primary.uk-button-ghost:hover,
|
|
441
445
|
.uk-button-primary.uk-button-ghost:focus {
|
|
446
|
+
background-color: transparent;
|
|
442
447
|
border-color: var(--button-ghost-primary-hover-border);
|
|
443
448
|
}
|
|
444
449
|
|
|
445
450
|
.uk-button-primary.uk-button-ghost:active,
|
|
446
451
|
.uk-button-primary.uk-button-ghost.active {
|
|
452
|
+
background-color: transparent;
|
|
447
453
|
border-color: var(--button-ghost-primary-active-border);
|
|
448
454
|
}
|
|
449
455
|
|
|
450
456
|
.uk-button-secondary.uk-button-ghost {
|
|
457
|
+
background-color: transparent;
|
|
451
458
|
border-color: var(--button-ghost-secondary-border);
|
|
452
459
|
color: var(--button-ghost-secondary-color);
|
|
453
460
|
}
|
|
454
461
|
|
|
455
462
|
.uk-button-secondary.uk-button-ghost:hover,
|
|
456
463
|
.uk-button-secondary.uk-button-ghost:focus {
|
|
464
|
+
background-color: transparent;
|
|
457
465
|
border-color: var(--button-ghost-secondary-hover-border);
|
|
458
466
|
}
|
|
459
467
|
|
|
460
468
|
.uk-button-secondary.uk-button-ghost:active,
|
|
461
469
|
.uk-button-secondary.uk-button-ghost.active {
|
|
470
|
+
background-color: transparent;
|
|
462
471
|
border-color: var(--button-ghost-secondary-active-border);
|
|
463
472
|
}
|
|
464
473
|
|
|
465
474
|
.uk-button-tertiary.uk-button-ghost {
|
|
475
|
+
background-color: transparent;
|
|
466
476
|
border-color: var(--button-ghost-tertiary-border);
|
|
467
477
|
color: var(--button-ghost-tertiary-color);
|
|
468
478
|
}
|
|
469
479
|
|
|
470
480
|
.uk-button-tertiary.uk-button-ghost:hover,
|
|
471
481
|
.uk-button-tertiary.uk-button-ghost:focus {
|
|
482
|
+
background-color: transparent;
|
|
472
483
|
border-color: var(--button-ghost-tertiary-hover-border);
|
|
473
484
|
}
|
|
474
485
|
|
|
475
486
|
.uk-button-tertiary.uk-button-ghost:active,
|
|
476
487
|
.uk-button-tertiary.uk-button-ghost.active {
|
|
488
|
+
background-color: transparent;
|
|
477
489
|
border-color: var(--button-ghost-tertiary-active-border);
|
|
478
490
|
}
|
|
479
491
|
|
|
480
492
|
.uk-button-danger.uk-button-ghost {
|
|
493
|
+
background-color: transparent;
|
|
481
494
|
border-color: var(--button-ghost-danger-border);
|
|
482
495
|
color: var(--button-ghost-danger-color);
|
|
483
496
|
}
|
|
484
497
|
|
|
485
498
|
.uk-button-danger.uk-button-ghost:hover,
|
|
486
499
|
.uk-button-danger.uk-button-ghost:focus {
|
|
500
|
+
background-color: transparent;
|
|
487
501
|
border-color: var(--button-ghost-danger-hover-border);
|
|
488
502
|
}
|
|
489
503
|
|
|
490
504
|
.uk-button-danger.uk-button-ghost:active,
|
|
491
505
|
.uk-button-danger.uk-button-ghost.active {
|
|
506
|
+
background-color: transparent;
|
|
492
507
|
border-color: var(--button-ghost-danger-active-border);
|
|
493
508
|
}
|
|
494
509
|
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { type ButtonProps } from '../../components/Button';
|
|
2
3
|
import { type BreakpointsConfig, type TooltipOptions } from '../../types';
|
|
3
|
-
import { ButtonProps } from "../../components/Button";
|
|
4
4
|
export type ColorMode = 'light' | 'dark';
|
|
5
|
-
export type
|
|
6
|
-
breakpoints
|
|
5
|
+
export type ConfigContextConsumedProps = {
|
|
6
|
+
breakpoints: Exclude<BreakpointsConfig<number>, 'default'>;
|
|
7
7
|
buttonShape?: ButtonProps['shape'];
|
|
8
8
|
buttonSize?: ButtonProps['size'];
|
|
9
9
|
cardPrimaryColorMode?: ColorMode;
|
|
@@ -24,7 +24,7 @@ export type ConfigContextConsumerProps = {
|
|
|
24
24
|
tileSecondaryColorMode?: ColorMode;
|
|
25
25
|
tileTertiaryColorMode?: ColorMode;
|
|
26
26
|
};
|
|
27
|
-
export type ConfigContextProviderProps = React.PropsWithChildren<
|
|
28
|
-
export declare const ConfigContext: React.Context<
|
|
29
|
-
export declare function useConfig():
|
|
27
|
+
export type ConfigContextProviderProps = React.PropsWithChildren<ConfigContextConsumedProps>;
|
|
28
|
+
export declare const ConfigContext: React.Context<ConfigContextConsumedProps>;
|
|
29
|
+
export declare function useConfig(): ConfigContextConsumedProps;
|
|
30
30
|
export declare function ConfigContextProvider(props: Partial<ConfigContextProviderProps>): React.JSX.Element;
|
|
@@ -5,13 +5,14 @@ import * as React from 'react';
|
|
|
5
5
|
import { type ControlProps, type SizeType } from '../../../components/Control/types';
|
|
6
6
|
import './index.scss';
|
|
7
7
|
export type { BaseSelectRef, OptionProps };
|
|
8
|
-
export interface InternalSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcSelectProps<ValueType, OptionType>, 'mode'> {
|
|
8
|
+
export interface InternalSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcSelectProps<ValueType, OptionType>, 'allowClear' | 'mode'> {
|
|
9
9
|
mode?: 'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
|
|
10
10
|
size?: SizeType;
|
|
11
11
|
suffixIcon?: React.ReactNode;
|
|
12
12
|
}
|
|
13
13
|
export interface SelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<ControlProps<ValueType>, 'value' | 'defaultValue'>, Omit<InternalSelectProps<ValueType, OptionType>, 'inputIcon' | 'mode' | 'getInputElement' | 'backfill'> {
|
|
14
14
|
mode?: 'multiple' | 'tags';
|
|
15
|
+
showArrow?: boolean;
|
|
15
16
|
}
|
|
16
17
|
export declare const Select: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
|
|
17
18
|
ref?: React.Ref<BaseSelectRef> | undefined;
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
@import 'list.scss';
|
|
11
11
|
@import 'description-list.scss';
|
|
12
12
|
|
|
13
|
-
// @import '
|
|
13
|
+
// @import 'table.scss';
|
|
14
14
|
@import 'icon.scss';
|
|
15
15
|
@import 'form.scss'; // After: Icon
|
|
16
16
|
@import 'control.scss'; // After: Icon
|
|
@@ -61,4 +61,3 @@
|
|
|
61
61
|
@import 'drawer.scss';
|
|
62
62
|
|
|
63
63
|
// @import 'sticky.scss';
|
|
64
|
-
// @import '../components/Switcher/index.scss';
|
|
@@ -2073,60 +2073,6 @@
|
|
|
2073
2073
|
|
|
2074
2074
|
@mixin hook-switcher-misc() {}
|
|
2075
2075
|
|
|
2076
|
-
@mixin hook-tab() {}
|
|
2077
|
-
@mixin hook-tab-item() {}
|
|
2078
|
-
@mixin hook-tab-item-hover() {}
|
|
2079
|
-
@mixin hook-tab-item-active() {}
|
|
2080
|
-
@mixin hook-tab-item-disabled() {}
|
|
2081
|
-
@mixin hook-tab-bottom() {}
|
|
2082
|
-
@mixin hook-tab-bottom-item() {}
|
|
2083
|
-
@mixin hook-tab-left() {}
|
|
2084
|
-
@mixin hook-tab-left-item() {}
|
|
2085
|
-
@mixin hook-tab-right() {}
|
|
2086
|
-
@mixin hook-tab-right-item() {}
|
|
2087
|
-
@mixin hook-tab-misc() {}
|
|
2088
|
-
@mixin hook-inverse-tab() {}
|
|
2089
|
-
@mixin hook-inverse-tab-item() {}
|
|
2090
|
-
@mixin hook-inverse-tab-item-hover() {}
|
|
2091
|
-
@mixin hook-inverse-tab-item-active() {}
|
|
2092
|
-
@mixin hook-inverse-tab-item-disabled() {}
|
|
2093
|
-
@mixin hook-inverse-component-tab() {
|
|
2094
|
-
.uk-tab {
|
|
2095
|
-
@if mixin-exists(hook-inverse-tab) {
|
|
2096
|
-
@include hook-inverse-tab;
|
|
2097
|
-
}
|
|
2098
|
-
}
|
|
2099
|
-
|
|
2100
|
-
.uk-tab > * > a {
|
|
2101
|
-
color: var(--inverse-tab-item-color);
|
|
2102
|
-
@if mixin-exists(hook-inverse-tab-item) {
|
|
2103
|
-
@include hook-inverse-tab-item;
|
|
2104
|
-
}
|
|
2105
|
-
}
|
|
2106
|
-
|
|
2107
|
-
.uk-tab > * > a:hover {
|
|
2108
|
-
color: var(--inverse-tab-item-hover-color);
|
|
2109
|
-
@if mixin-exists(hook-inverse-tab-item-hover) {
|
|
2110
|
-
@include hook-inverse-tab-item-hover;
|
|
2111
|
-
}
|
|
2112
|
-
}
|
|
2113
|
-
|
|
2114
|
-
.uk-tab > .uk-active > a {
|
|
2115
|
-
color: var(--inverse-tab-item-active-color);
|
|
2116
|
-
@if mixin-exists(hook-inverse-tab-item-active) {
|
|
2117
|
-
@include hook-inverse-tab-item-active;
|
|
2118
|
-
}
|
|
2119
|
-
}
|
|
2120
|
-
|
|
2121
|
-
.uk-tab > .uk-disabled > a {
|
|
2122
|
-
color: var(--inverse-tab-item-disabled-color);
|
|
2123
|
-
@if mixin-exists(hook-inverse-tab-item-disabled) {
|
|
2124
|
-
@include hook-inverse-tab-item-disabled;
|
|
2125
|
-
}
|
|
2126
|
-
}
|
|
2127
|
-
|
|
2128
|
-
}
|
|
2129
|
-
|
|
2130
2076
|
@mixin hook-tabs() {}
|
|
2131
2077
|
@mixin hook-tabs-tab() {}
|
|
2132
2078
|
@mixin hook-tabs-tab-hover() {}
|
|
@@ -2408,7 +2354,6 @@
|
|
|
2408
2354
|
@include hook-inverse-component-breadcrumb;
|
|
2409
2355
|
|
|
2410
2356
|
@include hook-inverse-component-pagination;
|
|
2411
|
-
@include hook-inverse-component-tab;
|
|
2412
2357
|
@include hook-inverse-component-tabs;
|
|
2413
2358
|
@include hook-inverse-component-table;
|
|
2414
2359
|
|
|
@@ -1602,25 +1602,6 @@ $switch-handle-border-radius: 100px !default;
|
|
|
1602
1602
|
$switch-handle-offset: 2px !default;
|
|
1603
1603
|
|
|
1604
1604
|
|
|
1605
|
-
// Tab
|
|
1606
|
-
// ========================================================================
|
|
1607
|
-
|
|
1608
|
-
$tab-margin-horizontal: 20px !default;
|
|
1609
|
-
$tab-item-padding-horizontal: 10px !default;
|
|
1610
|
-
$tab-item-padding-vertical: 5px !default;
|
|
1611
|
-
$tab-item-color: $global-muted-color !default;
|
|
1612
|
-
$tab-item-hover-color: $global-color !default;
|
|
1613
|
-
$tab-item-hover-text-decoration: none !default;
|
|
1614
|
-
$tab-item-active-color: $global-primary-background !default;
|
|
1615
|
-
$tab-item-disabled-color: $global-muted-color !default;
|
|
1616
|
-
|
|
1617
|
-
// Inverse
|
|
1618
|
-
$inverse-tab-item-color: $inverse-global-muted-color !default;
|
|
1619
|
-
$inverse-tab-item-hover-color: $inverse-global-color !default;
|
|
1620
|
-
$inverse-tab-item-active-color: $inverse-global-emphasis-color !default;
|
|
1621
|
-
$inverse-tab-item-disabled-color: $inverse-global-muted-color !default;
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
1605
|
// Tabs
|
|
1625
1606
|
// ========================================================================
|
|
1626
1607
|
|