Make inner border radius of Buttons in ButtonGroup configurable

Author: adamkudrna

src/lib/components/Button/Button.jsx

@@ -8,8 +8,8 @@ import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
 import { ButtonGroupContext } from '../ButtonGroup';
 import { InputGroupContext } from '../InputGroup/InputGroupContext';
+import getRootPriorityClassName from '../_helpers/getRootPriorityClassName';
 import getRootLabelVisibilityClassName from './helpers/getRootLabelVisibilityClassName';
-import getRootPriorityClassName from './helpers/getRootPriorityClassName';
 import styles from './Button.scss';
 
 export const Button = React.forwardRef((props, ref) => {

src/lib/components/Button/_base.scss

@@ -1,3 +1,6 @@
+// 1. ButtonGroup gap is implemented using the `margin` property so the buttons can overlap and reduce duplicate
+//    borders.
+
 @use "sass:map";
 @use "../../styles/tools/breakpoint";
 @use "settings";
@@ -81,20 +84,23 @@
     z-index: map.get(settings.$group-z-indexes, button);
 
     &:not(:first-child) {
-        margin-left: var(--rui-local-gap);
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
+        border-start-start-radius: var(--rui-local-inner-border-radius);
+        border-end-start-radius: var(--rui-local-inner-border-radius);
     }
 
     &:not(:last-child) {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
+        border-start-end-radius: var(--rui-local-inner-border-radius);
+        border-end-end-radius: var(--rui-local-inner-border-radius);
     }
+}
 
-    &:focus,
-    &:not(:disabled):hover {
-        z-index: map.get(settings.$group-z-indexes, button-hover);
-    }
+.isRootInButtonGroup:not(:first-child) {
+    margin-inline-start: var(--rui-local-gap); // 1.
+}
+
+.isRootInButtonGroup:focus,
+.isRootInButtonGroup:not(:disabled):hover {
+    z-index: map.get(settings.$group-z-indexes, button-hover);
 }
 
 .isRootInButtonGroup .startCorner,

src/lib/components/Button/_priorities.scss

@@ -146,19 +146,3 @@
     border-left: var(--rui-local-separator-width) solid var(--rui-local-separator-color);
     transform: translateX(calc(-0.5 * var(--rui-local-gap) - 50%));
 }
-
-.isRootPriorityFilled.isRootInButtonGroup:not(:first-child) {
-    --rui-local-gap: #{theme.$group-filled-gap};
-    --rui-local-separator-width: #{theme.$group-filled-separator-width};
-    --rui-local-separator-color: #{theme.$group-filled-separator-color};
-}
-
-.isRootPriorityFlat.isRootInButtonGroup:not(:first-child) {
-    --rui-local-gap: #{theme.$group-flat-gap};
-    --rui-local-separator-width: #{theme.$group-flat-separator-width};
-    --rui-local-separator-color: #{theme.$group-flat-separator-color};
-}
-
-.isRootPriorityOutline.isRootInButtonGroup:not(:first-child) {
-    --rui-local-gap: #{theme.$group-outline-gap};
-}

src/lib/components/Button/_theme.scss

@@ -12,16 +12,6 @@ $disabled-cursor: var(--rui-Button--disabled__cursor);
 $feedback-opacity: var(--rui-Button--feedback__opacity);
 $feedback-cursor: var(--rui-Button--feedback__cursor);
 
-$group-filled-gap: var(--rui-ButtonGroup--filled__gap);
-$group-filled-separator-width: var(--rui-ButtonGroup--filled__separator__width);
-$group-filled-separator-color: var(--rui-ButtonGroup--filled__separator__color);
-
-$group-flat-gap: var(--rui-ButtonGroup--flat__gap);
-$group-flat-separator-width: var(--rui-ButtonGroup--flat__separator__width);
-$group-flat-separator-color: var(--rui-ButtonGroup--flat__separator__color);
-
-$group-outline-gap: var(--rui-ButtonGroup--outline__gap);
-
 $sizes: (
     small: (
         height: var(--rui-Button--small__height),

src/lib/components/ButtonGroup/ButtonGroup.jsx

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
+import getRootPriorityClassName from '../_helpers/getRootPriorityClassName';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { transferProps } from '../_helpers/transferProps';
 import styles from './ButtonGroup.scss';
@@ -25,6 +26,7 @@ export const ButtonGroup = ({
       className={classNames(
         styles.root,
         block && styles.isRootBlock,
+        getRootPriorityClassName(priority, styles),
       )}
       role="group"
     >

src/lib/components/ButtonGroup/ButtonGroup.scss

@@ -1,5 +1,28 @@
+// 1. ButtonGroup gap is implemented using the `margin` property on buttons so the buttons can overlap and reduce
+//    duplicate borders.
+
+@use "theme";
+
 .root {
-    display: inline-flex;
+    --rui-local-inner-border-radius: #{theme.$inner-border-radius};
+
+    display: inline-flex; // 1.
+}
+
+.isRootPriorityFilled {
+    --rui-local-gap: #{theme.$filled-gap};
+    --rui-local-separator-width: #{theme.$filled-separator-width};
+    --rui-local-separator-color: #{theme.$filled-separator-color};
+}
+
+.isRootPriorityFlat {
+    --rui-local-gap: #{theme.$flat-gap};
+    --rui-local-separator-width: #{theme.$flat-separator-width};
+    --rui-local-separator-color: #{theme.$flat-separator-color};
+}
+
+.isRootPriorityOutline {
+    --rui-local-gap: #{theme.$outline-gap};
 }
 
 .isRootBlock {

src/lib/components/ButtonGroup/README.mdx

@@ -266,6 +266,7 @@ its accessibility.
 
 | Custom Property                                                    | Description                                    |
 |--------------------------------------------------------------------|------------------------------------------------|
+| `--rui-ButtonGroup__inner-border-radius`                           | Inner border radius of buttons                 |
 | `--rui-ButtonGroup--filled__gap`                                   | Gap between `filled` buttons                   |
 | `--rui-ButtonGroup--filled__separator__width`                      | Separator width for `filled` buttons           |
 | `--rui-ButtonGroup--filled__separator__color`                      | Separator color for `filled` buttons           |

src/lib/components/ButtonGroup/_theme.scss

@@ -0,0 +1,11 @@
+$inner-border-radius: var(--rui-ButtonGroup__inner-border-radius);
+
+$filled-gap: var(--rui-ButtonGroup--filled__gap);
+$filled-separator-width: var(--rui-ButtonGroup--filled__separator__width);
+$filled-separator-color: var(--rui-ButtonGroup--filled__separator__color);
+
+$flat-gap: var(--rui-ButtonGroup--flat__gap);
+$flat-separator-width: var(--rui-ButtonGroup--flat__separator__width);
+$flat-separator-color: var(--rui-ButtonGroup--flat__separator__color);
+
+$outline-gap: var(--rui-ButtonGroup--outline__gap);

src/lib/components/FormLayout/README.mdx

@@ -444,7 +444,7 @@ This is a demo of all components supported by FormLayout.
           />
           <InputGroup label="Promo code">
             <TextField label="Promo code" />
-            <Button label="Submit" />
+            <Button label="Apply" color="secondary" priority="outline" />
           </InputGroup>
         </FormLayout>
       </div>