@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.
Files changed (80) hide show
  1. package/.nvmrc +1 -1
  2. package/dist/react-ui.css +14 -14
  3. package/dist/react-ui.development.css +225 -14
  4. package/dist/react-ui.development.js +102 -62
  5. package/dist/react-ui.js +1 -1
  6. package/package.json +12 -1
  7. package/src/components/Alert/Alert.jsx +3 -5
  8. package/src/components/Alert/Alert.module.scss +3 -3
  9. package/src/components/Alert/README.md +22 -10
  10. package/src/components/Badge/Badge.jsx +1 -1
  11. package/src/components/Button/Button.jsx +1 -1
  12. package/src/components/ButtonGroup/ButtonGroup.jsx +1 -1
  13. package/src/components/Card/Card.jsx +1 -1
  14. package/src/components/Card/Card.module.scss +6 -5
  15. package/src/components/Card/CardBody.jsx +1 -1
  16. package/src/components/Card/CardFooter.jsx +1 -1
  17. package/src/components/Card/README.md +22 -0
  18. package/src/components/CheckboxField/CheckboxField.jsx +9 -3
  19. package/src/components/CheckboxField/README.md +110 -5
  20. package/src/components/FileInputField/FileInputField.jsx +1 -1
  21. package/src/components/FormLayout/FormLayout.jsx +1 -1
  22. package/src/components/FormLayout/FormLayoutCustomField.jsx +1 -1
  23. package/src/components/Grid/Grid.jsx +1 -1
  24. package/src/components/Grid/GridSpan.jsx +1 -1
  25. package/src/components/InputGroup/InputGroup.jsx +2 -2
  26. package/src/components/InputGroup/InputGroup.module.scss +9 -5
  27. package/src/components/Modal/Modal.jsx +1 -1
  28. package/src/components/Modal/ModalBody.jsx +1 -1
  29. package/src/components/Modal/ModalCloseButton.jsx +3 -5
  30. package/src/components/Modal/ModalContent.jsx +1 -1
  31. package/src/components/Modal/ModalFooter.jsx +1 -1
  32. package/src/components/Modal/ModalHeader.jsx +1 -1
  33. package/src/components/Modal/ModalTitle.jsx +1 -1
  34. package/src/components/Modal/README.md +18 -18
  35. package/src/components/Paper/Paper.jsx +1 -1
  36. package/src/components/Popover/Popover.jsx +58 -13
  37. package/src/components/Popover/Popover.module.scss +37 -9
  38. package/src/components/Popover/PopoverWrapper.jsx +1 -1
  39. package/src/components/Popover/README.md +60 -3
  40. package/src/components/Popover/_helpers/cleanPlacementStyle.js +20 -0
  41. package/src/components/Radio/README.md +103 -0
  42. package/src/components/Radio/Radio.jsx +9 -3
  43. package/src/components/Radio/Radio.module.scss +4 -0
  44. package/src/components/ScrollView/ScrollView.jsx +3 -5
  45. package/src/components/SelectField/README.md +103 -0
  46. package/src/components/SelectField/SelectField.jsx +9 -3
  47. package/src/components/Table/Table.jsx +1 -1
  48. package/src/components/Tabs/Tabs.jsx +1 -1
  49. package/src/components/Tabs/TabsItem.jsx +1 -1
  50. package/src/components/Text/Text.jsx +1 -1
  51. package/src/components/TextArea/TextArea.jsx +1 -1
  52. package/src/components/TextField/README.md +14 -2
  53. package/src/components/TextField/TextField.jsx +1 -1
  54. package/src/components/TextLink/README.md +10 -3
  55. package/src/components/TextLink/TextLink.jsx +1 -1
  56. package/src/components/TextLink/_theme.scss +3 -3
  57. package/src/components/Toggle/README.md +83 -1
  58. package/src/components/Toggle/Toggle.jsx +9 -3
  59. package/src/components/Toolbar/Toolbar.jsx +1 -1
  60. package/src/components/Toolbar/ToolbarGroup.jsx +1 -1
  61. package/src/components/Toolbar/ToolbarItem.jsx +1 -1
  62. package/src/components/_helpers/resolveContextOrProp.js +6 -3
  63. package/src/index.js +3 -2
  64. package/src/providers/globalProps/GlobalPropsContext.jsx +5 -0
  65. package/src/providers/globalProps/GlobalPropsProvider.jsx +33 -0
  66. package/src/providers/globalProps/index.js +3 -0
  67. package/src/{provider → providers/globalProps}/withGlobalProps.jsx +16 -16
  68. package/src/providers/translations/TranslationsContext.jsx +6 -0
  69. package/src/providers/translations/TranslationsProvider.jsx +33 -0
  70. package/src/providers/translations/index.js +2 -0
  71. package/src/styles/elements/_links.scss +7 -2
  72. package/src/styles/theme/_form-fields.scss +19 -0
  73. package/src/styles/theme/_links.scss +4 -3
  74. package/src/styles/tools/_collections.scss +79 -5
  75. package/src/styles/tools/form-fields/_foundation.scss +6 -4
  76. package/src/styles/tools/form-fields/_variants.scss +5 -1
  77. package/src/theme.scss +2 -1
  78. package/src/provider/RUIContext.jsx +0 -9
  79. package/src/provider/RUIProvider.jsx +0 -42
  80. 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
- $hover-color: var(--rui-color-text-link-hover);
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
- // Mixin to generate CSS custom properties for a set of visual properties.
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
- &::after {
25
- content: theme.$required-sign;
26
- color: theme.$required-sign-color;
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(map.get(settings.$themeable-variant-states, $type), $variant);
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-text-decoration-link: none;
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,9 +0,0 @@
1
- import React from 'react';
2
- import defaultTranslations from '../translations/en';
3
-
4
- const RUIContext = React.createContext({
5
- globalProps: {},
6
- translations: defaultTranslations,
7
- });
8
-
9
- export default RUIContext;
@@ -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;
@@ -1,3 +0,0 @@
1
- export { default as RUIProvider } from './RUIProvider';
2
- export { default as RUIContext } from './RUIContext';
3
- export { default as withGlobalProps } from './withGlobalProps';