@react-ui-org/react-ui 0.57.0 → 0.58.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/.nvmrc +1 -1
- package/dist/react-ui.css +14 -14
- package/dist/react-ui.development.css +225 -14
- package/dist/react-ui.development.js +102 -62
- package/dist/react-ui.js +1 -1
- package/package.json +12 -1
- package/src/components/Alert/Alert.jsx +3 -5
- package/src/components/Alert/Alert.module.scss +3 -3
- package/src/components/Alert/README.md +22 -10
- package/src/components/Badge/Badge.jsx +1 -1
- package/src/components/Button/Button.jsx +1 -1
- package/src/components/ButtonGroup/ButtonGroup.jsx +1 -1
- package/src/components/Card/Card.jsx +1 -1
- package/src/components/Card/Card.module.scss +6 -5
- package/src/components/Card/CardBody.jsx +1 -1
- package/src/components/Card/CardFooter.jsx +1 -1
- package/src/components/Card/README.md +22 -0
- 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/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 +37 -9
- 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/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/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/theme/_form-fields.scss +19 -0
- package/src/styles/theme/_links.scss +4 -3
- package/src/styles/tools/_collections.scss +79 -5
- package/src/styles/tools/form-fields/_foundation.scss +6 -4
- package/src/styles/tools/form-fields/_variants.scss +5 -1
- package/src/theme.scss +2 -1
- package/src/provider/RUIContext.jsx +0 -9
- package/src/provider/RUIProvider.jsx +0 -42
- package/src/provider/index.js +0 -3
@@ -2,11 +2,16 @@
|
|
2
2
|
|
3
3
|
a {
|
4
4
|
text-decoration: links.$decoration;
|
5
|
+
text-underline-offset: links.$underline-offset;
|
5
6
|
color: links.$color;
|
6
7
|
|
7
|
-
&:hover
|
8
|
-
&:focus {
|
8
|
+
&:hover {
|
9
9
|
text-decoration: links.$hover-decoration;
|
10
10
|
color: links.$hover-color;
|
11
11
|
}
|
12
|
+
|
13
|
+
&:active {
|
14
|
+
text-decoration: links.$active-decoration;
|
15
|
+
color: links.$active-color;
|
16
|
+
}
|
12
17
|
}
|
@@ -30,6 +30,25 @@ $horizontal-label-vertical-alignment: var(--rui-FormField--horizontal__label__ve
|
|
30
30
|
$horizontal-field-vertical-alignment: var(--rui-FormField--horizontal__field__vertical-alignment);
|
31
31
|
$horizontal-full-width-label-width: var(--rui-FormField--horizontal--full-width__label__width);
|
32
32
|
|
33
|
+
// Form fields: links in validation states
|
34
|
+
$link-validation-colors: (
|
35
|
+
invalid: (
|
36
|
+
default: var(--rui-color-feedback-success),
|
37
|
+
hover: var(--rui-color-feedback-success-hover),
|
38
|
+
active: var(--rui-color-feedback-success-active),
|
39
|
+
),
|
40
|
+
valid: (
|
41
|
+
default: var(--rui-color-feedback-valid),
|
42
|
+
hover: var(--rui-color-feedback-valid-hover),
|
43
|
+
active: var(--rui-color-feedback-valid-active),
|
44
|
+
),
|
45
|
+
warning: (
|
46
|
+
default: var(--rui-color-feedback-warning),
|
47
|
+
hover: var(--rui-color-feedback-warning-hover),
|
48
|
+
active: var(--rui-color-feedback-warning-active),
|
49
|
+
),
|
50
|
+
);
|
51
|
+
|
33
52
|
// Form fields: disabled state
|
34
53
|
$disabled-cursor: var(--rui-FormField--disabled__cursor);
|
35
54
|
$disabled-opacity: var(--rui-FormField--disabled__opacity);
|
@@ -1,6 +1,7 @@
|
|
1
|
-
$color: var(--rui-color-text-link);
|
1
|
+
$color: var(--rui-local-link-color, var(--rui-color-text-link));
|
2
2
|
$decoration: var(--rui-text-decoration-link);
|
3
|
-
$
|
3
|
+
$underline-offset: var(--rui-underline-offset-link);
|
4
|
+
$hover-color: var(--rui-local-link-color-hover, var(--rui-color-text-link-hover));
|
4
5
|
$hover-decoration: var(--rui-text-decoration-link-hover);
|
5
|
-
$active-color: var(--rui-color-text-link-active);
|
6
|
+
$active-color: var(--rui-local-link-color-active, var(--rui-color-text-link-active));
|
6
7
|
$active-decoration: var(--rui-text-decoration-link-active);
|
@@ -1,6 +1,47 @@
|
|
1
|
+
@use "sass:list";
|
2
|
+
@use "sass:map";
|
3
|
+
@use "../settings/collections";
|
1
4
|
@use "string" as rui-string;
|
2
5
|
|
3
|
-
//
|
6
|
+
// Function to get the parent collection category by value.
|
7
|
+
//
|
8
|
+
// 1. Returns **only the first** matching collection category.
|
9
|
+
//
|
10
|
+
// @param {String} $value - The value to get the category for.
|
11
|
+
// @param {Map} $collections - The collections map to search in.
|
12
|
+
|
13
|
+
@function _get-category-by-value($value, $collections) {
|
14
|
+
@each $category, $values in $collections {
|
15
|
+
@if list.index($values, $value) {
|
16
|
+
@return $category; // 1.
|
17
|
+
}
|
18
|
+
}
|
19
|
+
|
20
|
+
@error
|
21
|
+
"Supplied value \""
|
22
|
+
+ $value
|
23
|
+
+ "\" not found in any category ("
|
24
|
+
+ map.keys($collections)
|
25
|
+
+ ")";
|
26
|
+
}
|
27
|
+
|
28
|
+
// Function to get the matching link color for a component variant.
|
29
|
+
//
|
30
|
+
// @param {String} $value - The value to get the link color for.
|
31
|
+
|
32
|
+
@function _get-link-color-by-value($value) {
|
33
|
+
@if $value == "light" {
|
34
|
+
@return "dark";
|
35
|
+
}
|
36
|
+
|
37
|
+
@if $value == "dark" {
|
38
|
+
@return "light";
|
39
|
+
}
|
40
|
+
|
41
|
+
@return $value;
|
42
|
+
}
|
43
|
+
|
44
|
+
// Mixin to generate CSS custom properties for a component theme.
|
4
45
|
//
|
5
46
|
// 1. Generates a CSS custom property for each property in the `$properties` list.
|
6
47
|
// 2. Theming of the disabled state is optional, so the `default` theme options are used (via CSS custom property
|
@@ -15,7 +56,7 @@
|
|
15
56
|
//
|
16
57
|
// Example:
|
17
58
|
//
|
18
|
-
// @include generate-properties(
|
59
|
+
// @include generate-component-properties(
|
19
60
|
// $prefix: "rui-",
|
20
61
|
// $component-name: "Card",
|
21
62
|
// $variant-name: "color",
|
@@ -29,7 +70,7 @@
|
|
29
70
|
// --rui-local-border-color: var(--rui-Card--success__border-color);
|
30
71
|
// --rui-local-background-color: var(--rui-Card--success__background-color);
|
31
72
|
|
32
|
-
@mixin generate-properties(
|
73
|
+
@mixin generate-component-properties(
|
33
74
|
$prefix,
|
34
75
|
$component-name,
|
35
76
|
$modifier-value: null,
|
@@ -72,6 +113,33 @@
|
|
72
113
|
}
|
73
114
|
}
|
74
115
|
|
116
|
+
// Mixin to generate CSS custom properties for links theme.
|
117
|
+
//
|
118
|
+
// @param {String} $prefix - The prefix for the CSS custom properties.
|
119
|
+
// @param {String} $variant-value - The value of the variant.
|
120
|
+
//
|
121
|
+
// Example:
|
122
|
+
//
|
123
|
+
// @include generate-link-properties(
|
124
|
+
// $prefix: "rui-",
|
125
|
+
// $variant-value: "success",
|
126
|
+
// );
|
127
|
+
//
|
128
|
+
// … will output:
|
129
|
+
//
|
130
|
+
// --rui-local-link-color: var(--rui-color-feedback-success);
|
131
|
+
// --rui-local-link-color-hover: var(--rui-color-feedback-success-hover);
|
132
|
+
// --rui-local-link-color-active: var(--rui-color-feedback-success-active);
|
133
|
+
|
134
|
+
@mixin generate-link-properties($prefix, $variant-value) {
|
135
|
+
$color-category: _get-category-by-value($value: $variant-value, $collections: collections.$colors);
|
136
|
+
$resolved-variant-value: _get-link-color-by-value($variant-value);
|
137
|
+
|
138
|
+
--#{$prefix}local-link-color: var(--rui-color-#{$color-category}-#{$resolved-variant-value});
|
139
|
+
--#{$prefix}local-link-color-hover: var(--rui-color-#{$color-category}-#{$resolved-variant-value}-hover);
|
140
|
+
--#{$prefix}local-link-color-active: var(--rui-color-#{$color-category}-#{$resolved-variant-value}-active);
|
141
|
+
}
|
142
|
+
|
75
143
|
// Mixin to generate CSS classes for a component variant.
|
76
144
|
//
|
77
145
|
// @param {String} $prefix - The prefix for the CSS custom properties.
|
@@ -81,6 +149,7 @@
|
|
81
149
|
// @param {String} $variant-name - The name of the variant.
|
82
150
|
// @param {String} $variant-value - The value of the variant.
|
83
151
|
// @param {Boolean} $generate-interaction-states - Whether to generate interaction states (disabled, hover, active).
|
152
|
+
// @param {Boolean} $inherit-link-color - Whether to inherit link color from the component variant.
|
84
153
|
// @param {List} $properties - The list of properties to generate CSS custom properties for.
|
85
154
|
//
|
86
155
|
// Examples:
|
@@ -147,6 +216,7 @@
|
|
147
216
|
$variant-name,
|
148
217
|
$variant-value,
|
149
218
|
$generate-interaction-states: false,
|
219
|
+
$inherit-link-color: false,
|
150
220
|
$properties,
|
151
221
|
) {
|
152
222
|
$modifier-class-name:
|
@@ -168,7 +238,7 @@
|
|
168
238
|
|
169
239
|
@each $interaction-state, $interaction-state-selector in $interaction-state-selector-map {
|
170
240
|
#{$interaction-state-selector} {
|
171
|
-
@include generate-properties(
|
241
|
+
@include generate-component-properties(
|
172
242
|
$prefix: $prefix,
|
173
243
|
$component-name: $component-name,
|
174
244
|
$modifier-value: $modifier-value,
|
@@ -179,7 +249,7 @@
|
|
179
249
|
}
|
180
250
|
}
|
181
251
|
} @else {
|
182
|
-
@include generate-properties(
|
252
|
+
@include generate-component-properties(
|
183
253
|
$prefix: $prefix,
|
184
254
|
$component-name: $component-name,
|
185
255
|
$modifier-value: $modifier-value,
|
@@ -187,5 +257,9 @@
|
|
187
257
|
$properties: $properties,
|
188
258
|
);
|
189
259
|
}
|
260
|
+
|
261
|
+
@if $inherit-link-color {
|
262
|
+
@include generate-link-properties($prefix: $prefix, $variant-value: $variant-value);
|
263
|
+
}
|
190
264
|
}
|
191
265
|
}
|
@@ -18,12 +18,14 @@
|
|
18
18
|
color: var(--rui-local-surrounding-text-color, #{theme.$label-color});
|
19
19
|
}
|
20
20
|
|
21
|
-
@mixin label-required() {
|
21
|
+
@mixin label-required($show-require-sign: true) {
|
22
22
|
color: var(--rui-local-surrounding-text-color, #{theme.$required-label-color});
|
23
23
|
|
24
|
-
|
25
|
-
|
26
|
-
|
24
|
+
@if $show-require-sign {
|
25
|
+
&::after {
|
26
|
+
content: theme.$required-sign;
|
27
|
+
color: theme.$required-sign-color;
|
28
|
+
}
|
27
29
|
}
|
28
30
|
}
|
29
31
|
|
@@ -70,7 +70,7 @@
|
|
70
70
|
+ "Choose one of #{map.keys(settings.$themeable-variant-states)}.";
|
71
71
|
}
|
72
72
|
|
73
|
-
$themeable-states: map.get(
|
73
|
+
$themeable-states: map.get(settings.$themeable-variant-states, $type, $variant);
|
74
74
|
|
75
75
|
@if list.index($themeable-states, "hover") {
|
76
76
|
@include _generate-custom-properties($type, $variant, "default");
|
@@ -143,5 +143,9 @@
|
|
143
143
|
}
|
144
144
|
|
145
145
|
@mixin validation($variant) {
|
146
|
+
--rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
|
147
|
+
--rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
|
148
|
+
--rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
|
149
|
+
|
146
150
|
@include _get-theme(validation, $variant);
|
147
151
|
}
|
package/src/theme.scss
CHANGED
@@ -109,7 +109,8 @@
|
|
109
109
|
--rui-line-height-small: 1.25;
|
110
110
|
|
111
111
|
// Text decorations
|
112
|
-
--rui-
|
112
|
+
--rui-underline-offset-link: 0.1875em;
|
113
|
+
--rui-text-decoration-link: underline;
|
113
114
|
--rui-text-decoration-link-hover: underline;
|
114
115
|
--rui-text-decoration-link-active: underline;
|
115
116
|
|
@@ -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