diff --git a/package-lock.json b/package-lock.json index 49e8833b..db907a2f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,7 @@ "packages": { "": { "name": "@react-ui-org/react-ui", - "version": "0.47.0", + "version": "0.50.2", "license": "MIT", "dependencies": { "normalize.css": "^8.0.1" diff --git a/src/lib/components/InputGroup/InputGroup.jsx b/src/lib/components/InputGroup/InputGroup.jsx index 75204c1f..ea68c6a5 100644 --- a/src/lib/components/InputGroup/InputGroup.jsx +++ b/src/lib/components/InputGroup/InputGroup.jsx @@ -38,7 +38,7 @@ export const InputGroup = ({ ); return ( - + ); }; diff --git a/src/lib/components/SelectField/SelectField.scss b/src/lib/components/SelectField/SelectField.scss index 6f4114c5..e9a8ccf6 100644 --- a/src/lib/components/SelectField/SelectField.scss +++ b/src/lib/components/SelectField/SelectField.scss @@ -90,6 +90,10 @@ @include box-field-layout.in-form-layout(); } +.isRootGrouped { + @include box-field-layout.in-group-layout(); +} + // Sizes .isRootSizeSmall { @include box-field-sizes.size(small); @@ -102,17 +106,3 @@ .isRootSizeLarge { @include box-field-sizes.size(large); } - -// Groups -.isRootGrouped { - &:not(:first-child) .input { - margin-left: var(--rui-local-gap); - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - &:not(:last-child) .input { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } -} diff --git a/src/lib/components/TextField/TextField.scss b/src/lib/components/TextField/TextField.scss index 59ff664a..c2f3504f 100644 --- a/src/lib/components/TextField/TextField.scss +++ b/src/lib/components/TextField/TextField.scss @@ -88,6 +88,10 @@ @include box-field-layout.horizontal-with-small-input(); } +.isRootGrouped { + @include box-field-layout.in-group-layout(); +} + // Sizes .isRootSizeSmall { @include box-field-sizes.size(small); @@ -100,17 +104,3 @@ .isRootSizeLarge { @include box-field-sizes.size(large); } - -// Groups -.isRootGrouped { - &:not(:first-child) .input { - margin-left: var(--rui-local-gap); - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - &:not(:last-child) .input { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } -} diff --git a/src/lib/styles/tools/form-fields/_box-field-layout.scss b/src/lib/styles/tools/form-fields/_box-field-layout.scss index 2dcaaa0e..c20814be 100644 --- a/src/lib/styles/tools/form-fields/_box-field-layout.scss +++ b/src/lib/styles/tools/form-fields/_box-field-layout.scss @@ -51,6 +51,9 @@ // // 13. Label and field are vertically aligned to top (start) by default (see 10.). Vertical // alignment of each block can be changed by theme configuration. +// +// 14. Inner corners of TextField and SelectField components inside the InputGroup component are sharp +// (their radius is set to 0). @use "../../settings/forms"; @use "../../settings/form-fields" as settings; @@ -227,3 +230,16 @@ } } } + +@mixin in-group-layout() { + &:not(:first-child) .input { + margin-left: var(--rui-local-gap); + border-top-left-radius: 0; // 14. + border-bottom-left-radius: 0; // 14. + } + + &:not(:last-child) .input { + border-top-right-radius: 0; // 14. + border-bottom-right-radius: 0; // 14. + } +} diff --git a/src/lib/theme.scss b/src/lib/theme.scss index 01bab018..136226be 100644 --- a/src/lib/theme.scss +++ b/src/lib/theme.scss @@ -890,7 +890,7 @@ // InputGroup // ======= - --rui-InputGroup__gap: var(--rui-spacing-1); + --rui-InputGroup__gap: var(--rui-dimension-space-1); // // Modal