Created compressed EuiButtonGroup

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Add `compressed` option to `buttonSize` prop of EuiButtonGroup ([#2343](https://github.com/elastic/eui/pull/2343))
+
 **Bug fixes**
 
 - Fixed default z-index of `EuiPopover` ([#2341](https://github.com/elastic/eui/pull/2341))

src-docs/src/views/button/button_group.js

@@ -7,6 +7,7 @@ import {
 } from '../../../../src/components';
 
 import makeId from '../../../../src/components/form/form_row/make_id';
+import { EuiPanel } from '../../../../src/components/panel/panel';
 
 export default class extends Component {
   constructor(props) {
@@ -46,6 +47,21 @@ export default class extends Component {
       },
     ];
 
+    this.toggleButtonsCompressed = [
+      {
+        id: `${idPrefix2}3`,
+        label: 'fine',
+      },
+      {
+        id: `${idPrefix2}4`,
+        label: 'rough',
+      },
+      {
+        id: `${idPrefix2}5`,
+        label: 'coarse',
+      },
+    ];
+
     this.toggleButtonsIcons = [
       {
         id: `${idPrefix3}0`,
@@ -98,6 +114,7 @@ export default class extends Component {
       },
       toggleIconIdSelected: `${idPrefix3}1`,
       toggleIconIdToSelectedMap: {},
+      toggleCompressedIdSelected: `${idPrefix2}4`,
     };
   }
 
@@ -126,6 +143,12 @@ export default class extends Component {
     });
   };
 
+  onChangeCompressed = optionId => {
+    this.setState({
+      toggleCompressedIdSelected: optionId,
+    });
+  };
+
   onChangeIconsMulti = optionId => {
     const newToggleIconIdToSelectedMap = {
       ...this.state.toggleIconIdToSelectedMap,
@@ -173,6 +196,7 @@ export default class extends Component {
           options={this.toggleButtons}
           idSelected={this.state.toggleIdSelected}
           onChange={this.onChange}
+          buttonSize="m"
           isDisabled
           isFullWidth
         />
@@ -184,7 +208,6 @@ export default class extends Component {
         <EuiButtonGroup
           legend="Text align"
           name="textAlign"
-          className="eui-displayInlineBlock"
           options={this.toggleButtonsIcons}
           idSelected={this.state.toggleIconIdSelected}
           onChange={this.onChangeIcons}
@@ -193,13 +216,47 @@ export default class extends Component {
         &nbsp;&nbsp;
         <EuiButtonGroup
           legend="Text style"
-          className="eui-displayInlineBlock"
           options={this.toggleButtonsIconsMulti}
           idToSelectedMap={this.state.toggleIconIdToSelectedMap}
           onChange={this.onChangeIconsMulti}
           type="multi"
           isIconOnly
         />
+        <EuiSpacer />
+        <EuiPanel style={{ maxWidth: 300 }}>
+          <EuiTitle size="xxxs">
+            <h3>
+              Compressed groups should always be fullWidth so they line up
+              nicely in their small container.
+            </h3>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          <EuiButtonGroup
+            name="coarsness"
+            legend="This is a basic group"
+            options={this.toggleButtonsCompressed}
+            idSelected={this.state.toggleCompressedIdSelected}
+            onChange={this.onChangeCompressed}
+            buttonSize="compressed"
+            isFullWidth
+          />
+          <EuiSpacer />
+          <EuiTitle size="xxxs">
+            <h3>Unless they are icon only</h3>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          <EuiButtonGroup
+            name="textStyleCompressed"
+            legend="Text style"
+            className="eui-displayInlineBlock"
+            options={this.toggleButtonsIconsMulti}
+            idToSelectedMap={this.state.toggleIconIdToSelectedMap}
+            onChange={this.onChangeIconsMulti}
+            type="multi"
+            buttonSize="compressed"
+            isIconOnly
+          />
+        </EuiPanel>
       </Fragment>
     );
   }

src-docs/src/views/form_compressed/complex_example.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 
 import {
+  EuiButtonGroup,
   EuiButtonIcon,
   EuiColorPicker,
   EuiColorPickerSwatch,
@@ -27,6 +28,8 @@ export default class extends Component {
   constructor(props) {
     super(props);
     const idPrefix = makeId;
+    const idPrefix2 = makeId;
+    const idPrefix3 = makeId;
 
     this.toggleButtons = [
       {
@@ -43,6 +46,48 @@ export default class extends Component {
       },
     ];
 
+    this.typeStyleToggleButtons = [
+      {
+        id: `${idPrefix3}3`,
+        label: 'Bold',
+        name: 'bold',
+        iconType: 'editorBold',
+      },
+      {
+        id: `${idPrefix3}4`,
+        label: 'Italic',
+        name: 'italic',
+        iconType: 'editorItalic',
+      },
+      {
+        id: `${idPrefix3}5`,
+        label: 'Underline',
+        name: 'underline',
+        iconType: 'editorUnderline',
+      },
+      {
+        id: `${idPrefix3}6`,
+        label: 'Strikethrough',
+        name: 'strikethrough',
+        iconType: 'editorStrike',
+      },
+    ];
+
+    this.granularityToggleButtons = [
+      {
+        id: `${idPrefix2}3`,
+        label: 'fine',
+      },
+      {
+        id: `${idPrefix2}4`,
+        label: 'rough',
+      },
+      {
+        id: `${idPrefix2}5`,
+        label: 'coarse',
+      },
+    ];
+
     this.state = {
       isSwitchChecked: false,
       opacityValue: '20',
@@ -51,6 +96,8 @@ export default class extends Component {
       borderValue: 3,
       popoverSliderValues: 16,
       dualValue: [5, 10],
+      typeStyleToggleButtonsIdToSelectedMap: {},
+      granularityToggleButtonsIdSelected: `${idPrefix2}4`,
     };
 
     this.selectTooltipContent =
@@ -95,6 +142,25 @@ export default class extends Component {
     });
   };
 
+  onTypeStyleChange = optionId => {
+    const newTypeStyleToggleButtonsIdToSelectedMap = {
+      ...this.state.typeStyleToggleButtonsIdToSelectedMap,
+      ...{
+        [optionId]: !this.state.typeStyleToggleButtonsIdToSelectedMap[optionId],
+      },
+    };
+
+    this.setState({
+      typeStyleToggleButtonsIdToSelectedMap: newTypeStyleToggleButtonsIdToSelectedMap,
+    });
+  };
+
+  onGranularityChange = optionId => {
+    this.setState({
+      granularityToggleButtonsIdSelected: optionId,
+    });
+  };
+
   render() {
     return (
       <EuiPanel style={{ maxWidth: 432 }}>
@@ -156,6 +222,17 @@ export default class extends Component {
           />
         </EuiFormRow>
 
+        <EuiFormRow label="Granularity" display="columnCompressed">
+          <EuiButtonGroup
+            legend="Granulariy of zoom levels"
+            options={this.granularityToggleButtons}
+            idSelected={this.state.granularityToggleButtonsIdSelected}
+            onChange={this.onGranularityChange}
+            buttonSize="compressed"
+            isFullWidth
+          />
+        </EuiFormRow>
+
         <EuiFormRow label="Fill" display="columnCompressed">
           <EuiColorPicker
             onChange={this.onColorChange}
@@ -229,10 +306,8 @@ export default class extends Component {
 
         <EuiSpacer size="s" />
 
-        <EuiFormLabel htmlFor="docsExampleLabelFont">Label</EuiFormLabel>
-        <EuiSpacer size="xs" />
-        <EuiFlexGroup gutterSize="s" responsive={false} wrap>
-          <EuiFlexItem grow={3} style={{ minWidth: 160 }}>
+        <EuiFormRow label="Label" display="columnCompressed">
+          <div>
             <EuiSelect
               id="docsExampleLabelFont"
               options={[
@@ -242,21 +317,43 @@ export default class extends Component {
               ]}
               compressed
               prepend="Font"
+              aria-label="Label font family"
             />
-          </EuiFlexItem>
-          <EuiFlexItem style={{ minWidth: 80 }}>
-            <EuiRange
-              showInput="inputWithPopover"
-              min={7}
-              max={140}
-              value={this.state.popoverSliderValues}
-              onChange={this.onPopoverSliderValueChange}
-              compressed
-              append="px"
-              aria-label="Label font size in pixels"
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
+            <EuiSpacer size="xs" />
+            <EuiFlexGroup
+              gutterSize="s"
+              responsive={false}
+              wrap
+              justifyContent="flexEnd">
+              <EuiFlexItem>
+                <EuiRange
+                  showInput="inputWithPopover"
+                  min={7}
+                  max={140}
+                  value={this.state.popoverSliderValues}
+                  onChange={this.onPopoverSliderValueChange}
+                  compressed
+                  append="px"
+                  aria-label="Label font size in pixels"
+                />
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButtonGroup
+                  legend="Label text style"
+                  className="eui-displayInlineBlock"
+                  options={this.typeStyleToggleButtons}
+                  idToSelectedMap={
+                    this.state.typeStyleToggleButtonsIdToSelectedMap
+                  }
+                  onChange={this.onTypeStyleChange}
+                  type="multi"
+                  isIconOnly
+                  buttonSize="compressed"
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </div>
+        </EuiFormRow>
 
         <EuiSpacer size="s" />