From 4271e02e0db5f5a892788c6f6c4d1a894de2cb4b Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 13 Sep 2019 12:49:34 -0400 Subject: [PATCH 1/5] Added `compressed` option to EuiButtonGroup `buttonSize` --- src-docs/src/views/button/button_group.js | 61 +++++++- .../views/form_compressed/complex_example.js | 135 +++++++++++++++--- .../__snapshots__/button_group.test.tsx.snap | 6 +- .../button/button_group/_button_group.scss | 74 +++++++++- .../button/button_group/button_group.tsx | 72 +++++++--- src/components/button/button_toggle/index.ts | 2 +- src/components/button/index.ts | 2 +- 7 files changed, 301 insertions(+), 51 deletions(-) diff --git a/src-docs/src/views/button/button_group.js b/src-docs/src/views/button/button_group.js index 4170b493de3..47d96d5159b 100644 --- a/src-docs/src/views/button/button_group.js +++ b/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 { + + + +

+ Compressed groups should always be primary and fullWidth so they + line up nicely in their small container. +

+ + + + + +

Unless they are icon only

+ + + + ); } diff --git a/src-docs/src/views/form_compressed/complex_example.js b/src-docs/src/views/form_compressed/complex_example.js index cdbf81ede3b..d4d96556b7a 100644 --- a/src-docs/src/views/form_compressed/complex_example.js +++ b/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 ( @@ -156,6 +222,18 @@ export default class extends Component { /> + + + + - Label - - - + +
- - - - - + + + + + + + + + +
+ diff --git a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap index f26dd5416a4..ae676fb4014 100644 --- a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap +++ b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap @@ -1,10 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiButtonGroup is rendered 1`] = ` -
+
diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss index a173c300f64..ba9d7be7138 100644 --- a/src/components/button/button_group/_button_group.scss +++ b/src/components/button/button_group/_button_group.scss @@ -1,8 +1,19 @@ +@import '../../form/variables'; + .euiButtonGroup { max-width: 100%; display: flex; } +.euiButtonGroup__fieldset { + display: inline-block; + max-width: 100%; + + &--fullWidth { + display: block; + } +} + .euiButtonGroup--fullWidth { .euiButtonGroup__toggle { flex: 1; @@ -41,10 +52,6 @@ &:enabled { @include euiSlightShadow; } - - @include euiButtonToggleStates { - @include euiSlightShadowHover; - } } &:first-child { @@ -61,7 +68,14 @@ border-bottom-right-radius: $euiBorderRadius; } - @include euiBreakpoint('xs', 's') { +} + +@include euiBreakpoint('xs', 's') { + .euiButtonGroup__fieldset { + display: block; + } + + .euiButtonGroup__toggle { flex: 1; min-width: 0; @@ -70,3 +84,53 @@ } } } + +.euiButtonGroup--compressed { + .euiButtonGroup__button { + // sass-lint:disable-block no-important + box-shadow: none !important; + font-size: $euiFontSizeS; + min-width: 0; + height: $euiFormControlCompressedHeight; + border-color: $euiButtonToggleBorderColor !important; // for all states as this color encompasses the whole group + border-width: 1px 0; + // Offset the background color from the border by 1px + padding: 1px; + background-clip: content-box; + + &:not(.euiButtonGroup__button--selected) { + color: $euiTextColor; + } + + &--selected { + font-weight: $euiFontWeightSemiBold; + background-color: $euiColorLightestShade; + } + + .euiButton__content { + padding-left: $euiSizeS; + padding-right: $euiSizeS; + } + } + + .euiButtonGroup__toggle { + flex: 1; + min-width: 0; + + &:first-child { + .euiButtonGroup__button { + border-left-width: 1px; + border-top-left-radius: $euiFormControlCompressedBorderRadius; + border-bottom-left-radius: $euiFormControlCompressedBorderRadius; + } + } + + &:last-child { + .euiButtonGroup__button { + border-right-width: 1px; + border-top-right-radius: $euiFormControlCompressedBorderRadius; + border-bottom-right-radius: $euiFormControlCompressedBorderRadius; + } + } + } +} diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx index 120315ac205..e86dea63c7d 100644 --- a/src/components/button/button_group/button_group.tsx +++ b/src/components/button/button_group/button_group.tsx @@ -3,24 +3,24 @@ import classNames from 'classnames'; import { EuiScreenReaderOnly } from '../../accessibility'; import { ToggleType } from '../../toggle'; -import { IconType } from '../../icon'; import { EuiButtonToggle } from '../button_toggle'; -import { Omit } from '../../common'; +import { Omit, CommonProps } from '../../common'; import { ButtonColor } from '../button'; +import { IconType } from '../../icon'; export interface EuiButtonGroupIdToSelectedMap { [id: string]: boolean; } -export type GroupButtonSize = 's' | 'm'; +export type GroupButtonSize = 's' | 'm' | 'compressed'; -export interface EuiButtonGroupOption { +export interface EuiButtonGroupOption extends CommonProps { id: string; + name?: string; label: string; isDisabled?: boolean; - name?: string; value?: any; iconSide?: 'left' | 'right'; iconType?: IconType; @@ -28,7 +28,11 @@ export interface EuiButtonGroupOption { export interface EuiButtonGroupProps { options?: EuiButtonGroupOption[]; - onChange: (id: string, value: any) => void; + onChange: (id: string, value?: any) => void; + /** + * Typical sizing is `s`. Medium `m` size should be reserved for major features. + * `compressed` is meant to be used alongside and within compressed forms. + */ buttonSize?: GroupButtonSize; isDisabled?: boolean; isFullWidth?: boolean; @@ -62,12 +66,17 @@ export const EuiButtonGroup: FunctionComponent = ({ }) => { const classes = classNames( 'euiButtonGroup', + [`euiButtonGroup--${buttonSize}`], { 'euiButtonGroup--fullWidth': isFullWidth, }, className ); + const fieldsetClasses = classNames('euiButtonGroup__fieldset', { + 'euiButtonGroup__fieldset--fullWidth': isFullWidth, + }); + let legendNode; if (legend) { legendNode = ( @@ -78,37 +87,56 @@ export const EuiButtonGroup: FunctionComponent = ({ } return ( -
+
{legendNode}
{options.map((option, index) => { + const { + id, + name: optionName, + value, + isDisabled: optionDisabled, + className, + ...rest + } = option; + let isSelectedState; if (type === 'multi') { - isSelectedState = idToSelectedMap[option.id] || false; + isSelectedState = idToSelectedMap[id] || false; } else { - isSelectedState = option.id === idSelected; + isSelectedState = id === idSelected; } + let fill; + if (buttonSize !== 'compressed') { + fill = isSelectedState; + } + const buttonClasses = classNames( + 'euiButtonGroup__button', + { + 'euiButtonGroup__button--selected': isSelectedState, + }, + className + ); + return ( onChange(option.id, option.value)} - size={buttonSize} - toggleClassName="euiButtonGroup__toggle" + name={optionName || name} + onChange={() => onChange(id, value)} + size={buttonSize === 'compressed' ? 's' : buttonSize} type={type} - value={option.value} + {...rest} /> ); })} diff --git a/src/components/button/button_toggle/index.ts b/src/components/button/button_toggle/index.ts index 52dd5c93c6b..762ae72cc63 100644 --- a/src/components/button/button_toggle/index.ts +++ b/src/components/button/button_toggle/index.ts @@ -1 +1 @@ -export { EuiButtonToggle } from './button_toggle'; +export { EuiButtonToggle, EuiButtonToggleProps } from './button_toggle'; diff --git a/src/components/button/index.ts b/src/components/button/index.ts index 5931242939d..8872759448f 100644 --- a/src/components/button/index.ts +++ b/src/components/button/index.ts @@ -8,7 +8,7 @@ export { EuiButtonIconPropsForButton, } from './button_icon'; -export { EuiButtonToggle } from './button_toggle'; +export { EuiButtonToggle, EuiButtonToggleProps } from './button_toggle'; export { EuiButtonGroup, From 486e2f5b683e6ff7ef3d19b6db8a6cbc123a80f5 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 13 Sep 2019 15:47:20 -0400 Subject: [PATCH 2/5] Beefed up tests --- .../__snapshots__/button_group.test.tsx.snap | 1651 +++++++++++++++++ .../button/button_group/button_group.test.tsx | 171 +- 2 files changed, 1821 insertions(+), 1 deletion(-) diff --git a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap index ae676fb4014..ff680cd6ddf 100644 --- a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap +++ b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap @@ -11,3 +11,1654 @@ exports[`EuiButtonGroup is rendered 1`] = ` />
`; + +exports[`EuiButtonGroup props buttonSize compressed is rendered 1`] = ` +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+`; + +exports[`EuiButtonGroup props buttonSize m is rendered 1`] = ` +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+`; + +exports[`EuiButtonGroup props buttonSize s is rendered 1`] = ` +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+`; + +exports[`EuiButtonGroup props color danger is rendered 1`] = ` +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+`; + +exports[`EuiButtonGroup props color ghost is rendered 1`] = ` +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+`; + +exports[`EuiButtonGroup props color primary is rendered 1`] = ` +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+`; + +exports[`EuiButtonGroup props color secondary is rendered 1`] = ` +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+`; + +exports[`EuiButtonGroup props color text is rendered 1`] = ` +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+`; + +exports[`EuiButtonGroup props color warning is rendered 1`] = ` +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+`; + +exports[`EuiButtonGroup props idSelected is rendered 1`] = ` +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+`; + +exports[`EuiButtonGroup props isDisabled is rendered 1`] = ` +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+`; + +exports[`EuiButtonGroup props isFullWidth is rendered 1`] = ` +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+`; + +exports[`EuiButtonGroup props isIconOnly is rendered 1`] = ` +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+`; + +exports[`EuiButtonGroup props legend is rendered 1`] = ` +
+ + legend + +
+
+ + +
+
+ + +
+
+ + +
+
+
+`; + +exports[`EuiButtonGroup props name is rendered 1`] = ` +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+`; + +exports[`EuiButtonGroup props options are rendered 1`] = ` +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+`; + +exports[`EuiButtonGroup props options can pass down data-test-subj 1`] = ` +
+
+
+ + +
+
+
+`; + +exports[`EuiButtonGroup props type of multi idToSelectedMap is rendered 1`] = ` +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+`; + +exports[`EuiButtonGroup props type of multi is rendered 1`] = ` +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+`; diff --git a/src/components/button/button_group/button_group.test.tsx b/src/components/button/button_group/button_group.test.tsx index 08eee3d0a5a..a1d1ac23004 100644 --- a/src/components/button/button_group/button_group.test.tsx +++ b/src/components/button/button_group/button_group.test.tsx @@ -2,7 +2,25 @@ import React from 'react'; import { render } from 'enzyme'; import { requiredProps } from '../../../test'; -import { EuiButtonGroup } from './button_group'; +import { EuiButtonGroup, GroupButtonSize } from './button_group'; +import { COLORS } from '../button'; + +const SIZES: GroupButtonSize[] = ['s', 'm', 'compressed']; + +const options = [ + { + id: 'button00', + label: 'Option one', + }, + { + id: 'button01', + label: 'Option two', + }, + { + id: 'button02', + label: 'Option three', + }, +]; describe('EuiButtonGroup', () => { test('is rendered', () => { @@ -12,4 +30,155 @@ describe('EuiButtonGroup', () => { expect(component).toMatchSnapshot(); }); + + describe('props', () => { + describe('options', () => { + it('are rendered', () => { + const component = render( + {}} options={options} /> + ); + + expect(component).toMatchSnapshot(); + }); + + it('can pass down data-test-subj', () => { + const options2 = [ + { + id: 'button00', + label: 'Option one', + 'data-test-subj': 'test', + }, + ]; + + const component = render( + {}} options={options2} /> + ); + + expect(component).toMatchSnapshot(); + }); + }); + + describe('buttonSize', () => { + SIZES.forEach(size => { + test(`${size} is rendered`, () => { + const component = render( + {}} + buttonSize={size} + options={options} + /> + ); + + expect(component).toMatchSnapshot(); + }); + }); + }); + + describe('isDisabled', () => { + it('is rendered', () => { + const component = render( + {}} isDisabled options={options} /> + ); + + expect(component).toMatchSnapshot(); + }); + }); + + describe('isFullWidth', () => { + it('is rendered', () => { + const component = render( + {}} isFullWidth options={options} /> + ); + + expect(component).toMatchSnapshot(); + }); + }); + + describe('isIconOnly', () => { + it('is rendered', () => { + const component = render( + {}} isIconOnly options={options} /> + ); + + expect(component).toMatchSnapshot(); + }); + }); + + describe('color', () => { + COLORS.forEach(color => { + test(`${color} is rendered`, () => { + const component = render( + {}} + color={color} + options={options} + /> + ); + + expect(component).toMatchSnapshot(); + }); + }); + }); + + describe('legend', () => { + it('is rendered', () => { + const component = render( + {}} + legend="legend" + options={options} + /> + ); + + expect(component).toMatchSnapshot(); + }); + }); + + describe('name', () => { + it('is rendered', () => { + const component = render( + {}} name="name" options={options} /> + ); + + expect(component).toMatchSnapshot(); + }); + }); + + describe('idSelected', () => { + it('is rendered', () => { + const component = render( + {}} + idSelected="button00" + options={options} + /> + ); + + expect(component).toMatchSnapshot(); + }); + }); + + describe('type of multi', () => { + it('is rendered', () => { + const component = render( + {}} type="multi" options={options} /> + ); + + expect(component).toMatchSnapshot(); + }); + + it('idToSelectedMap is rendered', () => { + const component = render( + {}} + type="multi" + idToSelectedMap={{ button00: true, button01: true }} + options={options} + /> + ); + + expect(component).toMatchSnapshot(); + }); + }); + }); }); From 131948b104a1d1f53db0e24e4832b43ef905cd23 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 17 Sep 2019 15:48:46 -0400 Subject: [PATCH 3/5] Finalize style (coloring) --- src-docs/src/views/button/button_group.js | 10 ++-- .../views/form_compressed/complex_example.js | 2 - .../button/button_group/_button_group.scss | 52 ++++++++++--------- .../button/button_group/button_group.tsx | 6 +-- 4 files changed, 35 insertions(+), 35 deletions(-) diff --git a/src-docs/src/views/button/button_group.js b/src-docs/src/views/button/button_group.js index 47d96d5159b..7adbff706ef 100644 --- a/src-docs/src/views/button/button_group.js +++ b/src-docs/src/views/button/button_group.js @@ -226,19 +226,19 @@ export default class extends Component {

- Compressed groups should always be primary and fullWidth so they - line up nicely in their small container. + Compressed groups should always be fullWidth so they line up + nicely in their small container.

@@ -246,15 +246,15 @@ export default class extends Component { diff --git a/src-docs/src/views/form_compressed/complex_example.js b/src-docs/src/views/form_compressed/complex_example.js index d4d96556b7a..59814393281 100644 --- a/src-docs/src/views/form_compressed/complex_example.js +++ b/src-docs/src/views/form_compressed/complex_example.js @@ -230,7 +230,6 @@ export default class extends Component { onChange={this.onGranularityChange} buttonSize="compressed" isFullWidth - color="primary" /> @@ -350,7 +349,6 @@ export default class extends Component { type="multi" isIconOnly buttonSize="compressed" - color="primary" /> diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss index ba9d7be7138..90ecc4d87f7 100644 --- a/src/components/button/button_group/_button_group.scss +++ b/src/components/button/button_group/_button_group.scss @@ -43,6 +43,12 @@ border-radius: 0; width: 100%; + // DO NOT Transform + // sass-lint:disable-block no-important + transition: none !important; + transform: none !important; + animation: none !important; + // always the same border color unless it's selected &:not([class*='fill']) { border-color: $euiButtonToggleBorderColor; @@ -86,25 +92,23 @@ } .euiButtonGroup--compressed { + border: 1px solid $euiFormBorderColor; + border-radius: $euiFormControlCompressedBorderRadius; + .euiButtonGroup__button { + height: $euiFormControlCompressedHeight - 2px; // sass-lint:disable-block no-important box-shadow: none !important; font-size: $euiFontSizeS; min-width: 0; - height: $euiFormControlCompressedHeight; - border-color: $euiButtonToggleBorderColor !important; // for all states as this color encompasses the whole group - border-width: 1px 0; + border: none; + border-radius: $euiBorderRadius; // Offset the background color from the border by 1px - padding: 1px; + padding: 2px; background-clip: content-box; - &:not(.euiButtonGroup__button--selected) { - color: $euiTextColor; - } - - &--selected { - font-weight: $euiFontWeightSemiBold; - background-color: $euiColorLightestShade; + &:not(.euiButtonGroup__button--selected):not(:disabled) { + color: $euiColorDarkShade; } .euiButton__content { @@ -116,21 +120,19 @@ .euiButtonGroup__toggle { flex: 1; min-width: 0; + } - &:first-child { - .euiButtonGroup__button { - border-left-width: 1px; - border-top-left-radius: $euiFormControlCompressedBorderRadius; - border-bottom-left-radius: $euiFormControlCompressedBorderRadius; - } - } + .euiButtonToggle__input:enabled:hover + .euiButtonGroup__button, + .euiButtonToggle__input:enabled:focus + .euiButtonGroup__button { + background-color: transparentize($euiFormInputGroupLabelBackground, .5); + } - &:last-child { - .euiButtonGroup__button { - border-right-width: 1px; - border-top-right-radius: $euiFormControlCompressedBorderRadius; - border-bottom-right-radius: $euiFormControlCompressedBorderRadius; - } - } + .euiButtonToggle__input:enabled:focus + .euiButtonGroup__button { + outline: 2px solid $euiFocusRingColor; + } + + .euiButtonGroup__button--selected { + font-weight: $euiFontWeightSemiBold; + background-color: $euiFormInputGroupLabelBackground; } } diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx index e86dea63c7d..ae44b218dc3 100644 --- a/src/components/button/button_group/button_group.tsx +++ b/src/components/button/button_group/button_group.tsx @@ -18,8 +18,8 @@ export type GroupButtonSize = 's' | 'm' | 'compressed'; export interface EuiButtonGroupOption extends CommonProps { id: string; - name?: string; label: string; + name?: string; isDisabled?: boolean; value?: any; iconSide?: 'left' | 'right'; @@ -38,11 +38,11 @@ export interface EuiButtonGroupProps { isFullWidth?: boolean; isIconOnly?: boolean; idSelected?: string; - idToSelectedMap?: EuiButtonGroupIdToSelectedMap; legend?: string; color?: ButtonColor; - type?: ToggleType; name?: string; + type?: ToggleType; + idToSelectedMap?: EuiButtonGroupIdToSelectedMap; } type Props = Omit, 'onChange'> & From 707e9e7b45b2529959a9fc58573167c79bd8d196 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 17 Sep 2019 15:54:08 -0400 Subject: [PATCH 4/5] More comment --- src/components/button/button_group/_button_group.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss index 90ecc4d87f7..a19d9698ef3 100644 --- a/src/components/button/button_group/_button_group.scss +++ b/src/components/button/button_group/_button_group.scss @@ -103,7 +103,8 @@ min-width: 0; border: none; border-radius: $euiBorderRadius; - // Offset the background color from the border by 1px + // Offset the background color from the border by 2px + // by clipping background to before the padding starts padding: 2px; background-clip: content-box; From 3fa436724aa83f9b194206a12276aa894ba2a5c2 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 17 Sep 2019 15:59:55 -0400 Subject: [PATCH 5/5] cl --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4c3f42b8228..1bfbfb561d6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `14.1.1`. +- Add `compressed` option to `buttonSize` prop of EuiButtonGroup ([#2343](https://github.com/elastic/eui/pull/2343)) ## [`14.1.1`](https://github.com/elastic/eui/tree/v14.1.1)