Skip to content

Commit 43cf08f

Browse files
committed
Introduce separator to outline Buttons in ButtonGroup to make theming options consistent for all button priorities
1 parent c0b6fd1 commit 43cf08f

File tree

5 files changed

+19
-12
lines changed

5 files changed

+19
-12
lines changed

src/lib/components/Button/_priorities.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,8 +135,7 @@
135135
@include tools.button-color(flat, dark);
136136
}
137137

138-
.isRootPriorityFilled.isRootInButtonGroup:not(:first-child)::before,
139-
.isRootPriorityFlat.isRootInButtonGroup:not(:first-child)::before {
138+
.isRootInButtonGroup:not(:first-child)::before {
140139
content: "";
141140
position: absolute;
142141
top: calc(-1 * #{theme.$border-width});

src/lib/components/ButtonGroup/ButtonGroup.scss

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,18 @@
1515
--rui-local-separator-color: #{theme.$filled-separator-color};
1616
}
1717

18+
.isRootPriorityOutline {
19+
--rui-local-gap: #{theme.$outline-gap};
20+
--rui-local-separator-width: #{theme.$outline-separator-width};
21+
--rui-local-separator-color: #{theme.$outline-separator-color};
22+
}
23+
1824
.isRootPriorityFlat {
1925
--rui-local-gap: #{theme.$flat-gap};
2026
--rui-local-separator-width: #{theme.$flat-separator-width};
2127
--rui-local-separator-color: #{theme.$flat-separator-color};
2228
}
2329

24-
.isRootPriorityOutline {
25-
--rui-local-gap: #{theme.$outline-gap};
26-
}
27-
2830
.isRootBlock {
2931
display: flex;
3032
width: 100%;

src/lib/components/ButtonGroup/README.mdx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -270,10 +270,12 @@ its accessibility.
270270
| `--rui-ButtonGroup--filled__gap` | Gap between `filled` buttons |
271271
| `--rui-ButtonGroup--filled__separator__width` | Separator width for `filled` buttons |
272272
| `--rui-ButtonGroup--filled__separator__color` | Separator color for `filled` buttons |
273+
| `--rui-ButtonGroup--outline__gap` | Gap between `outline` buttons |
274+
| `--rui-ButtonGroup--outline__separator__width` | Separator width for `outline` buttons |
275+
| `--rui-ButtonGroup--outline__separator__color` | Separator color for `outline` buttons |
273276
| `--rui-ButtonGroup--flat__gap` | Gap between `flat` buttons |
274277
| `--rui-ButtonGroup--flat__separator__width` | Separator width for `flat` buttons |
275278
| `--rui-ButtonGroup--flat__separator__color` | Separator color for `flat` buttons |
276-
| `--rui-ButtonGroup--outline__gap` | Gap between `outline` buttons |
277279

278280
[React synthetic events]: https://reactjs.org/docs/events.html
279281
[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes

src/lib/components/ButtonGroup/_theme.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ $filled-gap: var(--rui-ButtonGroup--filled__gap);
44
$filled-separator-width: var(--rui-ButtonGroup--filled__separator__width);
55
$filled-separator-color: var(--rui-ButtonGroup--filled__separator__color);
66

7+
$outline-gap: var(--rui-ButtonGroup--outline__gap);
8+
$outline-separator-width: var(--rui-ButtonGroup--outline__separator__width);
9+
$outline-separator-color: var(--rui-ButtonGroup--outline__separator__color);
10+
711
$flat-gap: var(--rui-ButtonGroup--flat__gap);
812
$flat-separator-width: var(--rui-ButtonGroup--flat__separator__width);
913
$flat-separator-color: var(--rui-ButtonGroup--flat__separator__color);
10-
11-
$outline-gap: var(--rui-ButtonGroup--outline__gap);

src/lib/theme.scss

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -719,14 +719,16 @@
719719
--rui-ButtonGroup--filled__separator__width: var(--rui-Button__border-width);
720720
--rui-ButtonGroup--filled__separator__color: currentColor;
721721

722+
// ButtonGroup: outline buttons
723+
--rui-ButtonGroup--outline__gap: calc(-1 * var(--rui-Button__border-width));
724+
--rui-ButtonGroup--outline__separator__width: 0;
725+
--rui-ButtonGroup--outline__separator__color: transparent;
726+
722727
// ButtonGroup: flat buttons
723728
--rui-ButtonGroup--flat__gap: var(--rui-Button__border-width);
724729
--rui-ButtonGroup--flat__separator__width: var(--rui-ButtonGroup--flat__gap);
725730
--rui-ButtonGroup--flat__separator__color: currentColor;
726731

727-
// ButtonGroup: outline buttons
728-
--rui-ButtonGroup--outline__gap: calc(-1 * var(--rui-Button__border-width));
729-
730732
//
731733
// Card
732734
// ====

0 commit comments

Comments
 (0)