@react-ui-org/react-ui 0.51.0 → 0.52.1

package/src/lib/styles/tools/form-fields/_box-field-sizes.scss

@@ -1,19 +1,22 @@
 @use "sass:map";
 @use "../../theme/form-fields" as theme;
 
-@mixin size($size, $is-multiline: false) {
+@mixin size($size, $has-input: true, $is-multiline: false) {
     $size-properties: map.get(theme.$box-sizes, $size);
 
     --rui-local-padding-y: #{map.get($size-properties, padding-y)};
     --rui-local-padding-x: #{map.get($size-properties, padding-x)};
-    --rui-local-font-size: #{map.get($size-properties, font-size)};
 
-    .input {
-        @if $is-multiline {
-            height: auto;
-            min-height: map.get($size-properties, height);
-        } @else {
-            --rui-local-height: #{map.get($size-properties, height)};
+    @if $has-input {
+        --rui-local-font-size: #{map.get($size-properties, font-size)};
+
+        .input {
+            @if $is-multiline {
+                height: auto;
+                min-height: map.get($size-properties, height);
+            } @else {
+                --rui-local-height: #{map.get($size-properties, height)};
+            }
         }
     }
 }

package/src/lib/styles/tools/form-fields/_foundation.scss

@@ -1,4 +1,5 @@
 // 1. Don't let text alignment be affected by a parent.
+// 2. Override foundation reset.
 
 @use "../../settings/form-fields" as settings;
 @use "../../theme/form-fields" as theme;
@@ -7,6 +8,12 @@
     text-align: left; // 1.
 }
 
+@mixin fieldset() {
+    &:not(:last-child) {
+        margin-bottom: 0; // 2.
+    }
+}
+
 @mixin label() {
     color: var(--rui-local-surrounding-text-color, #{theme.$label-color});
 }

package/src/lib/theme.scss

@@ -30,7 +30,8 @@
     --rui-dimension-breakpoint-x3l: #{breakpoints.$x3l};
 
     // Radii
-    --rui-dimension-radius-1: 0.25rem;
+    --rui-dimension-radius-1: 0.125rem;
+    --rui-dimension-radius-2: 0.25rem;
 
     // Spacing
     --rui-dimension-space-0: 0;
@@ -259,7 +260,7 @@
     --rui-Alert__padding: var(--rui-dimension-space-3);
     --rui-Alert__font-weight: var(--rui-font-weight-base);
     --rui-Alert__border-width: var(--rui-dimension-border-width-1);
-    --rui-Alert__border-radius: var(--rui-dimension-radius-1);
+    --rui-Alert__border-radius: var(--rui-dimension-radius-2);
     --rui-Alert__emphasis__font-weight: var(--rui-font-weight-bold);
     --rui-Alert__stripe__width: var(--rui-dimension-border-width-1);
 
@@ -312,7 +313,7 @@
     --rui-Button__letter-spacing: 0;
     --rui-Button__text-transform: none;
     --rui-Button__border-width: var(--rui-dimension-border-width-1);
-    --rui-Button__border-radius: var(--rui-dimension-radius-1);
+    --rui-Button__border-radius: var(--rui-dimension-radius-2);
     --rui-Button--disabled__opacity: var(--rui-ratio-disabled-opacity);
     --rui-Button--disabled__cursor: var(--rui-cursor-not-allowed);
     --rui-Button--feedback__opacity: 1;
@@ -711,26 +712,30 @@
     // ButtonGroup
     // ===========
 
+    --rui-ButtonGroup__inner-border-radius: 0;
+
     // ButtonGroup: filled buttons
     --rui-ButtonGroup--filled__gap: calc(-1 * var(--rui-Button__border-width));
     --rui-ButtonGroup--filled__separator__width: var(--rui-Button__border-width);
     --rui-ButtonGroup--filled__separator__color: currentColor;
 
+    // ButtonGroup: outline buttons
+    --rui-ButtonGroup--outline__gap: calc(-1 * var(--rui-Button__border-width));
+    --rui-ButtonGroup--outline__separator__width: 0;
+    --rui-ButtonGroup--outline__separator__color: transparent;
+
     // ButtonGroup: flat buttons
     --rui-ButtonGroup--flat__gap: var(--rui-Button__border-width);
     --rui-ButtonGroup--flat__separator__width: var(--rui-ButtonGroup--flat__gap);
     --rui-ButtonGroup--flat__separator__color: currentColor;
 
-    // ButtonGroup: outline buttons
-    --rui-ButtonGroup--outline__gap: calc(-1 * var(--rui-Button__border-width));
-
     //
     // Card
     // ====
 
     --rui-Card__padding: var(--rui-dimension-space-4);
     --rui-Card__border-width: var(--rui-dimension-border-width-1);
-    --rui-Card__border-radius: var(--rui-dimension-radius-1);
+    --rui-Card__border-radius: var(--rui-dimension-radius-2);
     --rui-Card--dense__padding: var(--rui-dimension-space-2);
     --rui-Card--raised__box-shadow: var(--rui-shadow-layer-1);
     --rui-Card--disabled__background-color: var(--rui-color-background-disabled);
@@ -834,7 +839,7 @@
 
     // Form fields: box fields
     --rui-FormField--box__border-width: var(--rui-dimension-border-width-1);
-    --rui-FormField--box__border-radius: var(--rui-dimension-radius-1);
+    --rui-FormField--box__border-radius: var(--rui-dimension-radius-2);
     --rui-FormField--box__input__width: auto; // 1.
     --rui-FormField--box__input__min-width: 240px; // 1.
     --rui-FormField--box__placeholder__color: var(--rui-color-text-secondary);
@@ -910,6 +915,13 @@
     --rui-FormLayout--horizontal__label__width--auto: auto;
     --rui-FormLayout--horizontal__label__width--limited: fit-content(50%);
 
+    //
+    // InputGroup
+    // =======
+
+    --rui-InputGroup__gap: var(--rui-dimension-space-1);
+    --rui-InputGroup__inner-border-radius: var(--rui-dimension-radius-1);
+
     //
     // Modal
     // =====
@@ -941,7 +953,7 @@
     --rui-Paper__padding: var(--rui-dimension-space-4);
     --rui-Paper__border-width: 0;
     --rui-Paper__border-color: transparent;
-    --rui-Paper__border-radius: var(--rui-dimension-radius-1);
+    --rui-Paper__border-radius: var(--rui-dimension-radius-2);
     --rui-Paper__background-color: var(--rui-color-background-layer-1);
     --rui-Paper--muted__background-color: var(--rui-color-background-disabled);
     --rui-Paper--muted__opacity: var(--rui-ratio-disabled-opacity);
@@ -955,7 +967,7 @@
     --rui-Popover__padding: var(--rui-dimension-space-3);
     --rui-Popover__border-width: 0;
     --rui-Popover__border-color: transparent;
-    --rui-Popover__border-radius: var(--rui-dimension-radius-1);
+    --rui-Popover__border-radius: var(--rui-dimension-radius-2);
     --rui-Popover__color: var(--rui-color-text-primary);
     --rui-Popover__background-color: var(--rui-color-background-layer-2);
     --rui-Popover__box-shadow: var(--rui-shadow-layer-2);
@@ -983,7 +995,7 @@
         var(--rui-color-border-secondary)
         transparent
         var(--rui-color-border-secondary);
-    --rui-Tabs__item__border-radius: var(--rui-dimension-radius-1);
+    --rui-Tabs__item__border-radius: var(--rui-dimension-radius-2);
     --rui-Tabs__item__background-color: var(--rui-color-background-layer-1);
     --rui-Tabs__item__box-shadow: none;
     --rui-Tabs__item__icon__gap: var(--rui-dimension-space-2);