Introduce separator to outline Buttons in ButtonGroup to make the…

…ming options consistent for all button priorities
react-ui-org · May 10, 2023 · 43cf08f · 43cf08f
1 parent c0b6fd1
commit 43cf08f
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 12 deletions.
diff --git a/src/lib/components/Button/_priorities.scss b/src/lib/components/Button/_priorities.scss
@@ -135,8 +135,7 @@
     @include tools.button-color(flat, dark);
 }
 
-.isRootPriorityFilled.isRootInButtonGroup:not(:first-child)::before,
-.isRootPriorityFlat.isRootInButtonGroup:not(:first-child)::before {
+.isRootInButtonGroup:not(:first-child)::before {
     content: "";
     position: absolute;
     top: calc(-1 * #{theme.$border-width});

diff --git a/src/lib/components/ButtonGroup/ButtonGroup.scss b/src/lib/components/ButtonGroup/ButtonGroup.scss
@@ -15,16 +15,18 @@
     --rui-local-separator-color: #{theme.$filled-separator-color};
 }
 
+.isRootPriorityOutline {
+    --rui-local-gap: #{theme.$outline-gap};
+    --rui-local-separator-width: #{theme.$outline-separator-width};
+    --rui-local-separator-color: #{theme.$outline-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 {
     display: flex;
     width: 100%;

diff --git a/src/lib/components/ButtonGroup/README.mdx b/src/lib/components/ButtonGroup/README.mdx
@@ -270,10 +270,12 @@ its accessibility.
 | `--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           |
+| `--rui-ButtonGroup--outline__gap`                                  | Gap between `outline` buttons                  |
+| `--rui-ButtonGroup--outline__separator__width`                     | Separator width for `outline` buttons          |
+| `--rui-ButtonGroup--outline__separator__color`                     | Separator color for `outline` buttons          |
 | `--rui-ButtonGroup--flat__gap`                                     | Gap between `flat` buttons                     |
 | `--rui-ButtonGroup--flat__separator__width`                        | Separator width for `flat` buttons             |
 | `--rui-ButtonGroup--flat__separator__color`                        | Separator color for `flat` buttons             |
-| `--rui-ButtonGroup--outline__gap`                                  | Gap between `outline` buttons                  |
 
 [React synthetic events]: https://reactjs.org/docs/events.html
 [div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
diff --git a/src/lib/components/ButtonGroup/_theme.scss b/src/lib/components/ButtonGroup/_theme.scss
@@ -4,8 +4,10 @@ $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);
 
+$outline-gap: var(--rui-ButtonGroup--outline__gap);
+$outline-separator-width: var(--rui-ButtonGroup--outline__separator__width);
+$outline-separator-color: var(--rui-ButtonGroup--outline__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);
diff --git a/src/lib/theme.scss b/src/lib/theme.scss
@@ -719,14 +719,16 @@
     --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
     // ====