ButtonGroup: Support nested buttons within button groups (#35884)

* ButtonGroup: Support nested buttons within button groups

* removed files

* Fixes

packages/grafana-ui/src/components/Button/ButtonGroup.tsx

@@ -23,22 +23,17 @@ const getStyles = (theme: GrafanaTheme2) => ({
   wrapper: css`
     display: flex;
 
-    > button {
-      border-radius: 0;
-      border-right-width: 0;
-
-      &.toolbar-button {
-        margin-left: 0;
-      }
-
-      &:last-of-type {
-        border-radius: 0 ${theme.shape.borderRadius()} ${theme.shape.borderRadius()} 0;
-        border-right-width: 1px;
-      }
+    > .button-group:not(:first-child) > button,
+    > button:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
 
-      &:first-child {
-        border-radius: ${theme.shape.borderRadius()} 0 0 ${theme.shape.borderRadius()};
-      }
+    > .button-group:not(:last-child) > button,
+    > button:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      border-right-width: 0;
     }
   `,
 });

packages/grafana-ui/src/components/Button/ToolbarButtonRow.tsx

@@ -23,8 +23,8 @@ const getStyles = (theme: GrafanaTheme2) => ({
   wrapper: css`
     display: flex;
 
-    .button-group,
-    .toolbar-button {
+    > .button-group,
+    > .toolbar-button {
       margin-left: ${theme.spacing(1)};
 
       &:first-child {

packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx

@@ -1,7 +1,7 @@
 import React, { useState, HTMLAttributes } from 'react';
 import { PopoverContent } from '../Tooltip/Tooltip';
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { ToolbarButtonVariant, ToolbarButton } from '../Button';
+import { ToolbarButtonVariant, ToolbarButton, ButtonGroup } from '../Button';
 import { ClickOutsideWrapper } from '../ClickOutsideWrapper/ClickOutsideWrapper';
 import { css } from '@emotion/css';
 import { useStyles2 } from '../../themes/ThemeContext';
@@ -43,7 +43,7 @@ export const ButtonSelect = React.memo(<T,>(props: Props<T>) => {
   };
 
   return (
-    <div className={styles.wrapper}>
+    <ButtonGroup className={styles.wrapper}>
       <ToolbarButton
         className={className}
         isOpen={isOpen}
@@ -71,7 +71,7 @@ export const ButtonSelect = React.memo(<T,>(props: Props<T>) => {
           </ClickOutsideWrapper>
         </div>
       )}
-    </div>
+    </ButtonGroup>
   );
 });
 

packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx

@@ -65,28 +65,26 @@ export class RefreshPicker extends PureComponent<Props> {
     }
 
     return (
-      <div className="refresh-picker">
-        <ButtonGroup className="refresh-picker-buttons">
-          <ToolbarButton
-            tooltip={tooltip}
-            onClick={onRefresh}
+      <ButtonGroup className="refresh-picker">
+        <ToolbarButton
+          tooltip={tooltip}
+          onClick={onRefresh}
+          variant={variant}
+          icon={isLoading ? 'fa fa-spinner' : 'sync'}
+          aria-label={selectors.components.RefreshPicker.runButton}
+        >
+          {text}
+        </ToolbarButton>
+        {!noIntervalPicker && (
+          <ButtonSelect
+            value={selectedValue}
+            options={options}
+            onChange={this.onChangeSelect as any}
             variant={variant}
-            icon={isLoading ? 'fa fa-spinner' : 'sync'}
-            aria-label={selectors.components.RefreshPicker.runButton}
-          >
-            {text}
-          </ToolbarButton>
-          {!noIntervalPicker && (
-            <ButtonSelect
-              value={selectedValue}
-              options={options}
-              onChange={this.onChangeSelect as any}
-              variant={variant}
-              aria-label={selectors.components.RefreshPicker.intervalButton}
-            />
-          )}
-        </ButtonGroup>
-      </div>
+            aria-label={selectors.components.RefreshPicker.intervalButton}
+          />
+        )}
+      </ButtonGroup>
     );
   }
 }

packages/grafana-ui/src/components/RefreshPicker/_RefreshPicker.scss

@@ -1,4 +0,0 @@
-.refresh-picker {
-  position: relative;
-  margin-left: 10px;
-}

packages/grafana-ui/src/components/index.scss

@@ -1,6 +1,5 @@
 @import 'ButtonCascader/ButtonCascader';
 @import 'Drawer/Drawer';
-@import 'RefreshPicker/RefreshPicker';
 @import 'Forms/Legacy/Select/Select';
 @import 'DateTimePickers/TimeOfDayPicker';
 @import 'Tooltip/Tooltip';

public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx

@@ -1,13 +1,12 @@
 // Libraries
 import React, { Component } from 'react';
 import { dateMath, TimeRange, TimeZone } from '@grafana/data';
-import { css } from '@emotion/css';
 
 // Types
 import { DashboardModel } from '../../state';
 
 // Components
-import { defaultIntervals, RefreshPicker, stylesFactory } from '@grafana/ui';
+import { defaultIntervals, RefreshPicker, ToolbarButtonRow } from '@grafana/ui';
 import { TimePickerWithHistory } from 'app/core/components/TimePicker/TimePickerWithHistory';
 
 // Utils & Services
@@ -82,11 +81,10 @@ export class DashNavTimeControls extends Component<Props> {
 
     const timePickerValue = getTimeSrv().timeRange();
     const timeZone = dashboard.getTimezone();
-    const styles = getStyles();
     const hideIntervalPicker = dashboard.panelInEdit?.isEditing;
 
     return (
-      <div className={styles.container}>
+      <ToolbarButtonRow>
         <TimePickerWithHistory
           value={timePickerValue}
           onChange={this.onChangeTimePicker}
@@ -104,16 +102,7 @@ export class DashNavTimeControls extends Component<Props> {
           tooltip="Refresh dashboard"
           noIntervalPicker={hideIntervalPicker}
         />
-      </div>
+      </ToolbarButtonRow>
     );
   }
 }
-
-const getStyles = stylesFactory(() => {
-  return {
-    container: css`
-      position: relative;
-      display: flex;
-    `,
-  };
-});