@react-ui-org/react-ui 0.56.0 → 0.58.0
Sign up to get free protection for your applications and to get access to all the features.
- package/.nvmrc +1 -1
- package/dist/react-ui.css +17 -17
- package/dist/react-ui.development.css +2551 -831
- package/dist/react-ui.development.js +106 -66
- package/dist/react-ui.js +1 -1
- package/package.json +13 -2
- package/src/CNAME +1 -0
- package/src/components/Alert/Alert.jsx +5 -6
- package/src/components/Alert/Alert.module.scss +12 -34
- package/src/components/Alert/README.md +28 -15
- package/src/components/Alert/_settings.scss +5 -0
- package/src/components/Alert/_theme.scss +0 -43
- package/src/components/Badge/Badge.jsx +5 -3
- package/src/components/Badge/Badge.module.scss +29 -74
- package/src/components/Badge/README.md +19 -2
- package/src/components/Badge/_settings.scss +8 -0
- package/src/components/Button/Button.jsx +4 -3
- package/src/components/Button/Button.module.scss +183 -2
- package/src/components/Button/README.md +8 -6
- package/src/components/Button/_settings.scss +8 -3
- package/src/components/Button/_theme.scss +0 -3
- package/src/components/Button/_tools.scss +7 -71
- package/src/components/ButtonGroup/ButtonGroup.jsx +2 -2
- package/src/components/Card/Card.jsx +3 -2
- package/src/components/Card/Card.module.scss +13 -33
- package/src/components/Card/CardBody.jsx +1 -1
- package/src/components/Card/CardFooter.jsx +1 -1
- package/src/components/Card/README.md +28 -6
- package/src/components/Card/_settings.scss +5 -0
- package/src/components/Card/_theme.scss +0 -43
- package/src/components/CheckboxField/CheckboxField.jsx +9 -3
- package/src/components/CheckboxField/README.md +110 -5
- package/src/components/FileInputField/FileInputField.jsx +1 -1
- package/src/components/FormLayout/FormLayout.jsx +1 -1
- package/src/components/FormLayout/FormLayoutCustomField.jsx +1 -1
- package/src/components/Grid/Grid.jsx +1 -1
- package/src/components/Grid/Grid.module.scss +9 -2
- package/src/components/Grid/GridSpan.jsx +1 -1
- package/src/components/InputGroup/InputGroup.jsx +2 -2
- package/src/components/InputGroup/InputGroup.module.scss +9 -5
- package/src/components/Modal/Modal.jsx +1 -1
- package/src/components/Modal/ModalBody.jsx +1 -1
- package/src/components/Modal/ModalCloseButton.jsx +3 -5
- package/src/components/Modal/ModalContent.jsx +1 -1
- package/src/components/Modal/ModalFooter.jsx +1 -1
- package/src/components/Modal/ModalHeader.jsx +1 -1
- package/src/components/Modal/ModalTitle.jsx +1 -1
- package/src/components/Modal/README.md +18 -18
- package/src/components/Paper/Paper.jsx +1 -1
- package/src/components/Popover/Popover.jsx +58 -13
- package/src/components/Popover/Popover.module.scss +51 -23
- package/src/components/Popover/PopoverWrapper.jsx +1 -1
- package/src/components/Popover/README.md +60 -3
- package/src/components/Popover/_helpers/cleanPlacementStyle.js +20 -0
- package/src/components/Popover/_theme.scss +4 -2
- package/src/components/Radio/README.md +103 -0
- package/src/components/Radio/Radio.jsx +9 -3
- package/src/components/Radio/Radio.module.scss +4 -0
- package/src/components/ScrollView/ScrollView.jsx +3 -5
- package/src/components/SelectField/README.md +103 -0
- package/src/components/SelectField/SelectField.jsx +9 -3
- package/src/components/Table/Table.jsx +1 -1
- package/src/components/Tabs/Tabs.jsx +1 -1
- package/src/components/Tabs/TabsItem.jsx +1 -1
- package/src/components/Text/Text.jsx +1 -1
- package/src/components/TextArea/TextArea.jsx +1 -1
- package/src/components/TextField/README.md +14 -2
- package/src/components/TextField/TextField.jsx +1 -1
- package/src/components/TextLink/README.md +10 -3
- package/src/components/TextLink/TextLink.jsx +1 -1
- package/src/components/TextLink/_theme.scss +3 -3
- package/src/components/Toggle/README.md +83 -1
- package/src/components/Toggle/Toggle.jsx +9 -3
- package/src/components/Toolbar/Toolbar.jsx +1 -1
- package/src/components/Toolbar/ToolbarGroup.jsx +1 -1
- package/src/components/Toolbar/ToolbarItem.jsx +1 -1
- package/src/components/_helpers/getRootPriorityClassName.js +1 -1
- package/src/components/_helpers/resolveContextOrProp.js +6 -3
- package/src/index.js +3 -2
- package/src/providers/globalProps/GlobalPropsContext.jsx +5 -0
- package/src/providers/globalProps/GlobalPropsProvider.jsx +33 -0
- package/src/providers/globalProps/index.js +3 -0
- package/src/{provider → providers/globalProps}/withGlobalProps.jsx +16 -16
- package/src/providers/translations/TranslationsContext.jsx +6 -0
- package/src/providers/translations/TranslationsProvider.jsx +33 -0
- package/src/providers/translations/index.js +2 -0
- package/src/styles/elements/_links.scss +7 -2
- package/src/styles/settings/_collections.scss +9 -0
- package/src/styles/theme/_form-fields.scss +19 -0
- package/src/styles/theme/_links.scss +4 -3
- package/src/styles/tools/_collections.scss +265 -0
- package/src/styles/tools/_string.scss +5 -2
- package/src/styles/tools/form-fields/_box-field-layout.scss +7 -1
- package/src/styles/tools/form-fields/_foundation.scss +6 -4
- package/src/styles/tools/form-fields/_variants.scss +5 -1
- package/src/theme.scss +66 -1
- package/src/components/Alert/_tools.scss +0 -10
- package/src/components/Button/_base.scss +0 -156
- package/src/components/Button/_priorities.scss +0 -149
- package/src/components/Card/_tools.scss +0 -10
- package/src/provider/RUIContext.jsx +0 -9
- package/src/provider/RUIProvider.jsx +0 -42
- package/src/provider/index.js +0 -3
@@ -1,149 +0,0 @@
|
|
1
|
-
@use "sass:map";
|
2
|
-
@use "settings";
|
3
|
-
@use "theme";
|
4
|
-
@use "tools";
|
5
|
-
|
6
|
-
@layer components.button {
|
7
|
-
.isRootPriorityFilled.isRootColorPrimary {
|
8
|
-
@include tools.button-color(filled, primary);
|
9
|
-
}
|
10
|
-
|
11
|
-
.isRootPriorityFilled.isRootColorSecondary {
|
12
|
-
@include tools.button-color(filled, secondary);
|
13
|
-
}
|
14
|
-
|
15
|
-
.isRootPriorityFilled.isRootColorSelected {
|
16
|
-
@include tools.button-color(filled, selected);
|
17
|
-
}
|
18
|
-
|
19
|
-
.isRootPriorityFilled.isRootColorSuccess {
|
20
|
-
@include tools.button-color(filled, success);
|
21
|
-
}
|
22
|
-
|
23
|
-
.isRootPriorityFilled.isRootColorWarning {
|
24
|
-
@include tools.button-color(filled, warning);
|
25
|
-
}
|
26
|
-
|
27
|
-
.isRootPriorityFilled.isRootColorDanger {
|
28
|
-
@include tools.button-color(filled, danger);
|
29
|
-
}
|
30
|
-
|
31
|
-
.isRootPriorityFilled.isRootColorHelp {
|
32
|
-
@include tools.button-color(filled, help);
|
33
|
-
}
|
34
|
-
|
35
|
-
.isRootPriorityFilled.isRootColorInfo {
|
36
|
-
@include tools.button-color(filled, info);
|
37
|
-
}
|
38
|
-
|
39
|
-
.isRootPriorityFilled.isRootColorNote {
|
40
|
-
@include tools.button-color(filled, note);
|
41
|
-
}
|
42
|
-
|
43
|
-
.isRootPriorityFilled.isRootColorLight {
|
44
|
-
@include tools.button-color(filled, light);
|
45
|
-
}
|
46
|
-
|
47
|
-
.isRootPriorityFilled.isRootColorDark {
|
48
|
-
@include tools.button-color(filled, dark);
|
49
|
-
}
|
50
|
-
|
51
|
-
.isRootPriorityOutline.isRootColorPrimary {
|
52
|
-
@include tools.button-color(outline, primary);
|
53
|
-
}
|
54
|
-
|
55
|
-
.isRootPriorityOutline.isRootColorSecondary {
|
56
|
-
@include tools.button-color(outline, secondary);
|
57
|
-
}
|
58
|
-
|
59
|
-
.isRootPriorityOutline.isRootColorSelected {
|
60
|
-
@include tools.button-color(outline, selected);
|
61
|
-
}
|
62
|
-
|
63
|
-
.isRootPriorityOutline.isRootColorSuccess {
|
64
|
-
@include tools.button-color(outline, success);
|
65
|
-
}
|
66
|
-
|
67
|
-
.isRootPriorityOutline.isRootColorWarning {
|
68
|
-
@include tools.button-color(outline, warning);
|
69
|
-
}
|
70
|
-
|
71
|
-
.isRootPriorityOutline.isRootColorDanger {
|
72
|
-
@include tools.button-color(outline, danger);
|
73
|
-
}
|
74
|
-
|
75
|
-
.isRootPriorityOutline.isRootColorHelp {
|
76
|
-
@include tools.button-color(outline, help);
|
77
|
-
}
|
78
|
-
|
79
|
-
.isRootPriorityOutline.isRootColorInfo {
|
80
|
-
@include tools.button-color(outline, info);
|
81
|
-
}
|
82
|
-
|
83
|
-
.isRootPriorityOutline.isRootColorNote {
|
84
|
-
@include tools.button-color(outline, note);
|
85
|
-
}
|
86
|
-
|
87
|
-
.isRootPriorityOutline.isRootColorLight {
|
88
|
-
@include tools.button-color(outline, light);
|
89
|
-
}
|
90
|
-
|
91
|
-
.isRootPriorityOutline.isRootColorDark {
|
92
|
-
@include tools.button-color(outline, dark);
|
93
|
-
}
|
94
|
-
|
95
|
-
.isRootPriorityFlat.isRootColorPrimary {
|
96
|
-
@include tools.button-color(flat, primary);
|
97
|
-
}
|
98
|
-
|
99
|
-
.isRootPriorityFlat.isRootColorSecondary {
|
100
|
-
@include tools.button-color(flat, secondary);
|
101
|
-
}
|
102
|
-
|
103
|
-
.isRootPriorityFlat.isRootColorSelected {
|
104
|
-
@include tools.button-color(flat, selected);
|
105
|
-
}
|
106
|
-
|
107
|
-
.isRootPriorityFlat.isRootColorSuccess {
|
108
|
-
@include tools.button-color(flat, success);
|
109
|
-
}
|
110
|
-
|
111
|
-
.isRootPriorityFlat.isRootColorWarning {
|
112
|
-
@include tools.button-color(flat, warning);
|
113
|
-
}
|
114
|
-
|
115
|
-
.isRootPriorityFlat.isRootColorDanger {
|
116
|
-
@include tools.button-color(flat, danger);
|
117
|
-
}
|
118
|
-
|
119
|
-
.isRootPriorityFlat.isRootColorHelp {
|
120
|
-
@include tools.button-color(flat, help);
|
121
|
-
}
|
122
|
-
|
123
|
-
.isRootPriorityFlat.isRootColorInfo {
|
124
|
-
@include tools.button-color(flat, info);
|
125
|
-
}
|
126
|
-
|
127
|
-
.isRootPriorityFlat.isRootColorNote {
|
128
|
-
@include tools.button-color(flat, note);
|
129
|
-
}
|
130
|
-
|
131
|
-
.isRootPriorityFlat.isRootColorLight {
|
132
|
-
@include tools.button-color(flat, light);
|
133
|
-
}
|
134
|
-
|
135
|
-
.isRootPriorityFlat.isRootColorDark {
|
136
|
-
@include tools.button-color(flat, dark);
|
137
|
-
}
|
138
|
-
|
139
|
-
.isRootInButtonGroup:not(:first-child)::before {
|
140
|
-
content: "";
|
141
|
-
position: absolute;
|
142
|
-
top: calc(-1 * #{theme.$border-width});
|
143
|
-
bottom: calc(-1 * #{theme.$border-width});
|
144
|
-
left: calc(-1 * #{theme.$border-width});
|
145
|
-
z-index: map.get(settings.$group-z-indexes, separator);
|
146
|
-
border-left: var(--rui-local-separator-width) solid var(--rui-local-separator-color);
|
147
|
-
transform: translateX(calc(-0.5 * var(--rui-local-gap) - 50%));
|
148
|
-
}
|
149
|
-
}
|
@@ -1,10 +0,0 @@
|
|
1
|
-
@use "sass:map";
|
2
|
-
@use "theme";
|
3
|
-
|
4
|
-
@mixin color($color) {
|
5
|
-
$color-variant-properties: map.get(theme.$colors, $color);
|
6
|
-
|
7
|
-
--rui-local-color: #{map.get($color-variant-properties, color)};
|
8
|
-
--rui-local-border-color: #{map.get($color-variant-properties, border-color)};
|
9
|
-
--rui-local-background-color: #{map.get($color-variant-properties, background-color)};
|
10
|
-
}
|
@@ -1,42 +0,0 @@
|
|
1
|
-
import PropTypes from 'prop-types';
|
2
|
-
import React, {
|
3
|
-
useContext,
|
4
|
-
useMemo,
|
5
|
-
} from 'react';
|
6
|
-
import defaultTranslations from '../translations/en';
|
7
|
-
import { mergeDeep } from '../utils/mergeDeep';
|
8
|
-
import RUIContext from './RUIContext';
|
9
|
-
|
10
|
-
const RUIProvider = ({
|
11
|
-
children,
|
12
|
-
globalProps,
|
13
|
-
translations,
|
14
|
-
}) => {
|
15
|
-
const context = useContext(RUIContext);
|
16
|
-
const childProps = useMemo(() => ({
|
17
|
-
globalProps: mergeDeep(context?.globalProps || {}, globalProps),
|
18
|
-
translations: mergeDeep(context?.translations || {}, translations),
|
19
|
-
}), [context, globalProps, translations]);
|
20
|
-
|
21
|
-
return (
|
22
|
-
<RUIContext.Provider
|
23
|
-
value={childProps}
|
24
|
-
>
|
25
|
-
{children}
|
26
|
-
</RUIContext.Provider>
|
27
|
-
);
|
28
|
-
};
|
29
|
-
|
30
|
-
RUIProvider.defaultProps = {
|
31
|
-
children: null,
|
32
|
-
globalProps: null,
|
33
|
-
translations: defaultTranslations,
|
34
|
-
};
|
35
|
-
|
36
|
-
RUIProvider.propTypes = {
|
37
|
-
children: PropTypes.node,
|
38
|
-
globalProps: PropTypes.shape({}),
|
39
|
-
translations: PropTypes.shape({}),
|
40
|
-
};
|
41
|
-
|
42
|
-
export default RUIProvider;
|
package/src/provider/index.js
DELETED