From dbfeff931b10888863e577fbf7fdb95b3b371aa3 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Mon, 16 Mar 2020 20:56:05 -0500 Subject: [PATCH 01/13] deprecating EuiToggle and EuiToggleButton --- scripts/a11y-testing.js | 1 - src-docs/src/routes.js | 4 +- src-docs/src/views/button/button_example.js | 76 +++-- src-docs/src/views/button/button_ghost.js | 10 - src-docs/src/views/button/button_toggle.js | 83 ++--- src-docs/src/views/toggle/toggle.js | 27 -- src-docs/src/views/toggle/toggle_example.js | 64 ---- .../__snapshots__/button_group.test.tsx.snap | 291 ++++++++++-------- .../button/button_group/button_group.test.tsx | 55 +++- .../button/button_group/button_group.tsx | 71 ++++- .../button/button_icon/button_icon.tsx | 22 +- 11 files changed, 363 insertions(+), 341 deletions(-) delete mode 100644 src-docs/src/views/toggle/toggle.js delete mode 100644 src-docs/src/views/toggle/toggle_example.js diff --git a/scripts/a11y-testing.js b/scripts/a11y-testing.js index 74a55bb9db7..432ce48306e 100644 --- a/scripts/a11y-testing.js +++ b/scripts/a11y-testing.js @@ -58,7 +58,6 @@ const docsPages = async (root, page) => { `${root}#/utilities/portal`, `${root}#/utilities/resizeobserver`, `${root}#/utilities/responsive`, - `${root}#/utilities/toggle`, `${root}#/utilities/window-events`, `${root}#/package/i18n-tokens`, `${root}#/utilities/accessibility`, diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 41a0c6088b6..e470cc093a2 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -194,7 +194,7 @@ import { ToastExample } from './views/toast/toast_example'; import { ToolTipExample } from './views/tool_tip/tool_tip_example'; -import { ToggleExample } from './views/toggle/toggle_example'; +// import { ToggleExample } from './views/toggle/toggle_example'; import { WindowEventExample } from './views/window_event/window_event_example'; @@ -423,7 +423,7 @@ const navigation = [ PortalExample, ResizeObserverExample, ResponsiveExample, - ToggleExample, + // ToggleExample, WindowEventExample, ].map(example => createExample(example)), }, diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js index 5dd8574155b..1d2b47bc621 100644 --- a/src-docs/src/views/button/button_example.js +++ b/src-docs/src/views/button/button_example.js @@ -12,8 +12,8 @@ import { EuiButtonIcon, EuiCode, EuiButtonGroup, - EuiButtonToggle, EuiCallOut, + EuiSpacer, } from '../../../../src/components'; import Button from './button'; @@ -79,12 +79,22 @@ const buttonLoadingSnippet = ` import ButtonToggle from './button_toggle'; const buttonToggleSource = require('!!raw-loader!./button_toggle'); const buttonToggleHtml = renderToHtml(ButtonToggle); -const buttonToggleSnippet = ` + {this.state.toggleOn ? onLabel : offLabel} + +`, + ``; +> + {buttonText} +`, +]; import ButtonGroup from './button_group'; const buttonGroupSource = require('!!raw-loader!./button_group'); @@ -232,9 +242,9 @@ export const ButtonExample = { text: (

When aligning EuiButtonEmpty components to the left - or the right, you should make sure they’re flush with the edge - of their container, so that they’re horizontally aligned with - the other content in the container. + or the right, you should make sure they're flush with the edge of + their container, so that they're horizontally aligned with the + other content in the container.

), snippet: buttonOptionFlushSnippet, @@ -272,26 +282,42 @@ export const ButtonExample = { }, ], text: ( -
-

- This is a specialized component that combines{' '} - EuiButton and EuiToggle to - create a button with an on/off state. You can pass all the same - parameters to it as you can to EuiButton. The - main difference is that, it does not accept any children, but a{' '} - label prop instead. This is for the handling of - accessibility with the EuiToggle. -

-

- The EuiButtonToggle does not have any inherit - visual state differences. These you must apply in your - implementation. -

-
+ <> + + Looking for EuiButtonToggle? It's been + deprecated so docs around it have been removed (though it will + still be exported until Oct 2020). + + } + /> + +
+

+ If your button has a on and off state, consider adding{' '} + aria-pressed to your button. ( + aria-pressed can be added to any EUI button + component.) +

+

+ There's one simple rule to figure out if you should do that: + does your button change text between the two states or is it + visual only? +

+

+ If you answered "yes, my button text changes between + states", don't add aria-pressed. If + you answered "no, my button always has the same text", + add aria-pressed. +

+
+ ), demo: , snippet: buttonToggleSnippet, - props: { EuiButtonToggle }, }, { title: 'Groups', diff --git a/src-docs/src/views/button/button_ghost.js b/src-docs/src/views/button/button_ghost.js index 1eba4b99362..8ebc44ead29 100644 --- a/src-docs/src/views/button/button_ghost.js +++ b/src-docs/src/views/button/button_ghost.js @@ -6,7 +6,6 @@ import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, - EuiButtonToggle, } from '../../../../src/components'; export default class extends Component { @@ -78,15 +77,6 @@ export default class extends Component { Loading… - - - - ); } diff --git a/src-docs/src/views/button/button_toggle.js b/src-docs/src/views/button/button_toggle.js index cc90d7460e9..0158f7d3e01 100644 --- a/src-docs/src/views/button/button_toggle.js +++ b/src-docs/src/views/button/button_toggle.js @@ -1,10 +1,6 @@ import React, { Component } from 'react'; -import { - EuiButtonToggle, - EuiSpacer, - EuiTitle, -} from '../../../../src/components'; +import { EuiButton, EuiButtonIcon } from '../../../../src/components'; export default class extends Component { constructor(props) { @@ -14,69 +10,54 @@ export default class extends Component { toggle0On: false, toggle1On: false, toggle2On: false, - toggle3On: true, - toggle4On: true, + toggle3On: false, }; } - onToggle0Change = e => { - this.setState({ toggle0On: e.target.checked }); + onToggle0Change = () => { + this.setState({ toggle0On: !this.state.toggle0On }); }; - onToggle1Change = e => { - this.setState({ toggle1On: e.target.checked }); + onToggle1Change = () => { + this.setState({ toggle1On: !this.state.toggle1On }); }; - onToggle4Change = e => { - this.setState({ toggle4On: e.target.checked }); + onToggle2Change = () => { + this.setState({ toggle2On: !this.state.toggle2On }); + }; + + onToggle3Change = () => { + this.setState({ toggle3On: !this.state.toggle3On }); }; render() { return (
- + onClick={this.onToggle0Change}> + Toggle Me +   - + + {this.state.toggle1On + ? 'I am a primary toggle' + : 'I am a filled toggle'} +   - - - -

Disabled

- - -   -
); diff --git a/src-docs/src/views/toggle/toggle.js b/src-docs/src/views/toggle/toggle.js deleted file mode 100644 index 2cc5f9062c6..00000000000 --- a/src-docs/src/views/toggle/toggle.js +++ /dev/null @@ -1,27 +0,0 @@ -import React, { Component } from 'react'; - -import { EuiToggle } from '../../../../src/components'; - -export default class extends Component { - constructor(props) { - super(props); - - this.state = { - toggleOn: false, - }; - } - - onToggleChange = e => { - this.setState({ toggleOn: e.target.checked }); - }; - - render() { - return ( -
- - {this.state.toggleOn ? 'On' : 'Off'} - -
- ); - } -} diff --git a/src-docs/src/views/toggle/toggle_example.js b/src-docs/src/views/toggle/toggle_example.js deleted file mode 100644 index e736f5b9da0..00000000000 --- a/src-docs/src/views/toggle/toggle_example.js +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react'; - -import { Link } from 'react-router'; - -import { renderToHtml } from '../../services'; - -import { GuideSectionTypes } from '../../components'; - -import { EuiCode, EuiToggle, EuiCallOut } from '../../../../src/components'; - -import Toggle from './toggle'; -const toggleSource = require('!!raw-loader!./toggle'); -const toggleHtml = renderToHtml(Toggle); - -export const ToggleExample = { - title: 'Toggle', - sections: [ - { - source: [ - { - type: GuideSectionTypes.JS, - code: toggleSource, - }, - { - type: GuideSectionTypes.HTML, - code: toggleHtml, - }, - ], - text: ( -
-

- The EuiToggle component is a very simplified - utility for creating toggle-able elements. There is only an on/off - (checked/unchecked) state. All this creates is a visibly hidden - input (checkbox or radio) overtop of the children provided. -

-

- By default, the children will be wrapped in a block element. To - change the display you can simply use one of the{' '} - utility classes{' '} - like .eui-displayInlineBlock. -

- - This utility is just a helper component and comes with no - inherit styles including no :hover or{' '} - :focus states. If you use this utility - directly, be sure to add these states. Otherwise, you may just - want to utilize the{' '} - EuiButtonToggle component. - - } - /> -
- ), - components: { EuiToggle }, - demo: , - props: { EuiToggle }, - }, - ], -}; 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 50babe49c2d..8db489905f8 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 @@ -4,6 +4,11 @@ exports[`EuiButtonGroup is rendered 1`] = `
+ + test +
+ + test +
@@ -104,6 +114,11 @@ exports[`EuiButtonGroup props buttonSize m is rendered 1`] = `
+ + test +
@@ -193,6 +208,11 @@ exports[`EuiButtonGroup props buttonSize s is rendered 1`] = `
+ + test +
@@ -282,6 +302,11 @@ exports[`EuiButtonGroup props color danger is rendered 1`] = `
+ + test +
@@ -371,6 +396,11 @@ exports[`EuiButtonGroup props color ghost is rendered 1`] = `
+ + test +
@@ -460,6 +490,11 @@ exports[`EuiButtonGroup props color primary is rendered 1`] = `
+ + test +
@@ -549,6 +584,11 @@ exports[`EuiButtonGroup props color secondary is rendered 1`] = `
+ + test +
@@ -638,6 +678,11 @@ exports[`EuiButtonGroup props color text is rendered 1`] = `
+ + test +
@@ -727,6 +772,11 @@ exports[`EuiButtonGroup props color warning is rendered 1`] = `
+ + test +
@@ -816,6 +866,11 @@ exports[`EuiButtonGroup props idSelected is rendered 1`] = `
+ + test +
@@ -906,6 +961,11 @@ exports[`EuiButtonGroup props isDisabled is rendered 1`] = `
+ + test +
@@ -1001,6 +1061,11 @@ exports[`EuiButtonGroup props isFullWidth is rendered 1`] = `
+ + test +
@@ -1090,6 +1155,11 @@ exports[`EuiButtonGroup props isIconOnly is rendered 1`] = `
+ + test +
@@ -1176,7 +1246,7 @@ exports[`EuiButtonGroup props legend is rendered 1`] = ` - legend + test
+ + test +
@@ -1359,6 +1434,11 @@ exports[`EuiButtonGroup props options are rendered 1`] = `
+ + test +
@@ -1448,6 +1528,11 @@ exports[`EuiButtonGroup props options can pass down data-test-subj 1`] = `
+ + test +
@@ -1486,89 +1571,62 @@ exports[`EuiButtonGroup props type of multi idToSelectedMap is rendered 1`] = `
+ + test +
-
- - -
-
+ + -
-
+ + -
+ +
`; @@ -1577,87 +1635,62 @@ exports[`EuiButtonGroup props type of multi is rendered 1`] = `
+ + test +
-
- - -
-
+ + -
-
+ + -
+ +
`; diff --git a/src/components/button/button_group/button_group.test.tsx b/src/components/button/button_group/button_group.test.tsx index a1d1ac23004..33de70f4c4c 100644 --- a/src/components/button/button_group/button_group.test.tsx +++ b/src/components/button/button_group/button_group.test.tsx @@ -25,7 +25,7 @@ const options = [ describe('EuiButtonGroup', () => { test('is rendered', () => { const component = render( - {}} {...requiredProps} /> + {}} legend="test" {...requiredProps} /> ); expect(component).toMatchSnapshot(); @@ -35,7 +35,7 @@ describe('EuiButtonGroup', () => { describe('options', () => { it('are rendered', () => { const component = render( - {}} options={options} /> + {}} legend="test" options={options} /> ); expect(component).toMatchSnapshot(); @@ -51,7 +51,11 @@ describe('EuiButtonGroup', () => { ]; const component = render( - {}} options={options2} /> + {}} + legend="test" + options={options2} + /> ); expect(component).toMatchSnapshot(); @@ -63,6 +67,7 @@ describe('EuiButtonGroup', () => { test(`${size} is rendered`, () => { const component = render( {}} buttonSize={size} options={options} @@ -77,7 +82,12 @@ describe('EuiButtonGroup', () => { describe('isDisabled', () => { it('is rendered', () => { const component = render( - {}} isDisabled options={options} /> + {}} + legend="test" + isDisabled + options={options} + /> ); expect(component).toMatchSnapshot(); @@ -87,7 +97,12 @@ describe('EuiButtonGroup', () => { describe('isFullWidth', () => { it('is rendered', () => { const component = render( - {}} isFullWidth options={options} /> + {}} + legend="test" + isFullWidth + options={options} + /> ); expect(component).toMatchSnapshot(); @@ -97,7 +112,12 @@ describe('EuiButtonGroup', () => { describe('isIconOnly', () => { it('is rendered', () => { const component = render( - {}} isIconOnly options={options} /> + {}} + legend="test" + isIconOnly + options={options} + /> ); expect(component).toMatchSnapshot(); @@ -110,6 +130,7 @@ describe('EuiButtonGroup', () => { const component = render( {}} + legend="test" color={color} options={options} /> @@ -123,11 +144,7 @@ describe('EuiButtonGroup', () => { describe('legend', () => { it('is rendered', () => { const component = render( - {}} - legend="legend" - options={options} - /> + {}} legend="test" options={options} /> ); expect(component).toMatchSnapshot(); @@ -137,7 +154,12 @@ describe('EuiButtonGroup', () => { describe('name', () => { it('is rendered', () => { const component = render( - {}} name="name" options={options} /> + {}} + legend="test" + name="name" + options={options} + /> ); expect(component).toMatchSnapshot(); @@ -149,6 +171,7 @@ describe('EuiButtonGroup', () => { const component = render( {}} + legend="test" idSelected="button00" options={options} /> @@ -161,7 +184,12 @@ describe('EuiButtonGroup', () => { describe('type of multi', () => { it('is rendered', () => { const component = render( - {}} type="multi" options={options} /> + {}} + legend="test" + type="multi" + options={options} + /> ); expect(component).toMatchSnapshot(); @@ -171,6 +199,7 @@ describe('EuiButtonGroup', () => { const component = render( {}} + legend="test" type="multi" idToSelectedMap={{ button00: true, button01: true }} options={options} diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx index 923404d5ebc..2c65da03ee3 100644 --- a/src/components/button/button_group/button_group.tsx +++ b/src/components/button/button_group/button_group.tsx @@ -1,14 +1,12 @@ -import React, { ReactNode, FunctionComponent, HTMLAttributes } from 'react'; import classNames from 'classnames'; - +import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react'; import { EuiScreenReaderOnly } from '../../accessibility'; -import { ToggleType } from '../../toggle'; - -import { EuiButtonToggle } from '../button_toggle'; import { CommonProps } from '../../common'; - -import { ButtonColor, ButtonIconSide } from '../button'; import { IconType } from '../../icon'; +import { ToggleType } from '../../toggle'; +import { ButtonColor, ButtonIconSide, EuiButton } from '../button'; +import { EuiButtonIcon } from '../button_icon'; +import { EuiButtonToggle } from '../button_toggle'; export interface EuiButtonGroupIdToSelectedMap { [id: string]: boolean; @@ -38,7 +36,7 @@ export interface EuiButtonGroupProps extends CommonProps { isFullWidth?: boolean; isIconOnly?: boolean; idSelected?: string; - legend?: string; + legend: string; color?: ButtonColor; name?: string; type?: ToggleType; @@ -78,18 +76,11 @@ export const EuiButtonGroup: FunctionComponent = ({ 'euiButtonGroup__fieldset--fullWidth': isFullWidth, }); - let legendNode; - if (legend) { - legendNode = ( + return ( +
{legend} - ); - } - - return ( -
- {legendNode}
{options.map((option, index) => { @@ -97,6 +88,7 @@ export const EuiButtonGroup: FunctionComponent = ({ id, name: optionName, value, + label, isDisabled: optionDisabled, className, ...rest @@ -121,6 +113,50 @@ export const EuiButtonGroup: FunctionComponent = ({ className ); + if (type === 'multi') { + if (isIconOnly) { + if (color === 'secondary') { + console.warn( + 'Secondary is not a support color for EuiButtonIcon. Falling back to Primary;' + ); + color = 'primary'; + } + + return ( + onChange(id, value)} + data-test-subj={dataTestSubj} + label={label} + key={index} + {...rest} + /> + ); + } + + return ( + onChange(id, value)} + data-test-subj={dataTestSubj} + key={index} + {...rest}> + {label} + + ); + } + return ( = ({ size={buttonSize === 'compressed' ? 's' : buttonSize} type={type} data-test-subj={dataTestSubj} + label={label} {...rest} /> ); diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx index c55fb2cb5ef..afe1d7917c0 100644 --- a/src/components/button/button_icon/button_icon.tsx +++ b/src/components/button/button_icon/button_icon.tsx @@ -3,9 +3,10 @@ import React, { ButtonHTMLAttributes, FunctionComponent, Ref, + ReactNode, } from 'react'; import classNames from 'classnames'; - +import { EuiScreenReaderOnly } from '../../accessibility/screen_reader'; import { getSecureRelForTarget } from '../../../services'; import { CommonProps, @@ -34,6 +35,7 @@ export interface EuiButtonIconProps extends CommonProps { color?: EuiButtonIconColor; 'aria-label'?: string; 'aria-labelledby'?: string; + label?: ReactNode; isDisabled?: boolean; size?: ButtonSize; iconSize?: IconSize; @@ -82,12 +84,18 @@ export const EuiButtonIcon: FunctionComponent = ({ target, rel, buttonRef, + label, ...rest }) => { const ariaHidden = rest['aria-hidden']; const isAriaHidden = ariaHidden === 'true' || ariaHidden === true; - if (!rest['aria-label'] && !rest['aria-labelledby'] && !isAriaHidden) { + if ( + !label && + !rest['aria-label'] && + !rest['aria-labelledby'] && + !isAriaHidden + ) { console.warn( `EuiButtonIcon requires aria-label or aria-labelledby to be specified because icon-only buttons are screen-reader-inaccessible without them.` @@ -128,6 +136,11 @@ export const EuiButtonIcon: FunctionComponent = ({ ref={buttonRef as Ref} {...rest as AnchorHTMLAttributes}> {buttonIcon} + {label && ( + + {label} + + )} ); } @@ -142,6 +155,11 @@ export const EuiButtonIcon: FunctionComponent = ({ ref={buttonRef as Ref} {...rest as ButtonHTMLAttributes}> {buttonIcon} + {label && ( + + {label} + + )} ); }; From ccecc4ba73d677695ab0e635695684e722dd1a5e Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Tue, 17 Mar 2020 12:44:52 -0500 Subject: [PATCH 02/13] wip cleaning up ButtonIcon types --- .../guide_page/guide_page_chrome.js | 2 +- .../src/views/accordion/accordion_form.js | 2 +- src-docs/src/views/button/button_as_link.js | 4 +-- src-docs/src/views/button/button_ghost.js | 2 +- src-docs/src/views/button/button_icon.js | 2 +- src-docs/src/views/button/button_toggle.js | 4 +-- .../src/views/datagrid/control_columns.js | 12 ++++---- src-docs/src/views/datagrid/datagrid.js | 8 ++--- src-docs/src/views/datagrid/schema.js | 2 +- .../drag_and_drop/drag_and_drop_clone.js | 2 +- .../drag_and_drop/drag_and_drop_complex.js | 2 +- .../views/form_compressed/complex_example.js | 2 +- .../src/views/form_controls/prepend_append.js | 19 +++++------- src-docs/src/views/guidelines/button.js | 14 ++++----- .../views/suggest/global_filter_options.js | 2 +- src-docs/src/views/tables/custom/custom.js | 2 +- .../tables/expanding_rows/expanding_rows.js | 2 +- .../basic_table/collapsed_item_actions.tsx | 2 +- .../basic_table/default_item_action.tsx | 2 +- .../button/button_icon/button_icon.tsx | 30 ++++++------------- src/components/code/_code_block.tsx | 4 +-- .../color_stops/color_stop_thumb.tsx | 2 +- src/components/control_bar/control_bar.tsx | 25 +++++++++------- .../datagrid/column_sorting_draggable.tsx | 2 +- .../quick_select_popover/quick_select.js | 4 +-- src/components/flyout/flyout.tsx | 2 +- src/components/modal/modal.tsx | 2 +- src/components/pagination/pagination.tsx | 4 +-- 28 files changed, 76 insertions(+), 86 deletions(-) diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js index d0670f37817..869ab97ab28 100644 --- a/src-docs/src/components/guide_page/guide_page_chrome.js +++ b/src-docs/src/components/guide_page/guide_page_chrome.js @@ -123,7 +123,7 @@ export class GuidePageChrome extends Component { ); diff --git a/src-docs/src/views/accordion/accordion_form.js b/src-docs/src/views/accordion/accordion_form.js index 213101ac4cd..c1ead2da4e1 100644 --- a/src-docs/src/views/accordion/accordion_form.js +++ b/src-docs/src/views/accordion/accordion_form.js @@ -72,7 +72,7 @@ const extraAction = ( iconType="cross" color="danger" className="euiAccordionForm__extraAction" - aria-label="Delete" + label="Delete" /> ); diff --git a/src-docs/src/views/button/button_as_link.js b/src-docs/src/views/button/button_as_link.js index cf9f3a3aa8f..b35e4b9e1b0 100644 --- a/src-docs/src/views/button/button_as_link.js +++ b/src-docs/src/views/button/button_as_link.js @@ -25,7 +25,7 @@ export default () => ( @@ -47,7 +47,7 @@ export default () => ( diff --git a/src-docs/src/views/button/button_ghost.js b/src-docs/src/views/button/button_ghost.js index 8ebc44ead29..54ac3d5004f 100644 --- a/src-docs/src/views/button/button_ghost.js +++ b/src-docs/src/views/button/button_ghost.js @@ -62,7 +62,7 @@ export default class extends Component { color="ghost" iconType="user" onClick={() => window.alert('Button clicked')} - aria-label="Your account" + label="Your account" /> diff --git a/src-docs/src/views/button/button_icon.js b/src-docs/src/views/button/button_icon.js index b39e96bd0e2..b481b3c9ec7 100644 --- a/src-docs/src/views/button/button_icon.js +++ b/src-docs/src/views/button/button_icon.js @@ -24,7 +24,7 @@ export default () => ( color={color} onClick={() => window.alert('Button clicked')} iconType="arrowRight" - aria-label="Next" + label="Next" disabled={color === 'disabled' ? true : false} /> diff --git a/src-docs/src/views/button/button_toggle.js b/src-docs/src/views/button/button_toggle.js index 0158f7d3e01..cdc9139e83f 100644 --- a/src-docs/src/views/button/button_toggle.js +++ b/src-docs/src/views/button/button_toggle.js @@ -48,13 +48,13 @@ export default class extends Component {     { @@ -118,7 +118,7 @@ const SelectionButton = () => { @@ -220,7 +220,7 @@ const FlyoutRowCell = rowIndex => { color="text" iconType="eye" iconSize="s" - aria-label="View details" + label="View details" onClick={() => setIsFlyoutOpen(!isFlyoutOpen)} /> {flyout} @@ -258,7 +258,7 @@ const trailingControlColumns = [ panelPaddingSize="s" button={ setIsPopoverOpen(!isPopoverOpen)} @@ -275,7 +275,7 @@ const trailingControlColumns = [ gutterSize="s"> @@ -291,7 +291,7 @@ const trailingControlColumns = [ gutterSize="s"> diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js index 6597826bbd7..cf0e74da6e1 100644 --- a/src-docs/src/views/datagrid/datagrid.js +++ b/src-docs/src/views/datagrid/datagrid.js @@ -33,7 +33,7 @@ const columns = [ alert('Email Icon Clicked!')} @@ -103,7 +103,7 @@ const trailingControlColumns = [ anchorPosition="upCenter" button={ setIsPopoverOpen(!isPopoverOpen)} @@ -120,7 +120,7 @@ const trailingControlColumns = [ gutterSize="s"> @@ -136,7 +136,7 @@ const trailingControlColumns = [ gutterSize="s"> diff --git a/src-docs/src/views/datagrid/schema.js b/src-docs/src/views/datagrid/schema.js index 44192d309a2..dc21cea7cdb 100644 --- a/src-docs/src/views/datagrid/schema.js +++ b/src-docs/src/views/datagrid/schema.js @@ -152,7 +152,7 @@ export default class DataGridSchema extends Component { dummyIcon = () => ( ); diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_clone.js b/src-docs/src/views/drag_and_drop/drag_and_drop_clone.js index 4056a8b0c44..af8f4c1c8f7 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_clone.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_clone.js @@ -103,7 +103,7 @@ export default () => { ) : ( remove('DROPPABLE_AREA_COPY_2', idx)} /> )} diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js b/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js index fa66efafc42..2f69f7632ed 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js @@ -75,7 +75,7 @@ export default () => { , 'kibana_sample_ecommerce_data', diff --git a/src-docs/src/views/form_controls/prepend_append.js b/src-docs/src/views/form_controls/prepend_append.js index 0abeceed18f..ff127aec7b1 100644 --- a/src-docs/src/views/form_controls/prepend_append.js +++ b/src-docs/src/views/form_controls/prepend_append.js @@ -93,7 +93,7 @@ export default () => { } - append={} + append={} compressed={isCompressed} disabled={isDisabled} readOnly={isReadOnly} @@ -103,11 +103,11 @@ export default () => { placeholder="Icons in buttons and popovers and tooltips" prepend={[ , - , + , ]} append={[ } + button={} closePopover={() => {}} />, , @@ -121,13 +121,13 @@ export default () => { placeholder="Icon button in popover & tooltip" append={ } + button={} closePopover={() => {}} /> } prepend={ - + } compressed={isCompressed} @@ -138,10 +138,7 @@ export default () => { , 'String']} - append={[ - 'String', - , - ]} + append={['String', ]} compressed={isCompressed} disabled={isDisabled} readOnly={isReadOnly} @@ -152,12 +149,12 @@ export default () => { prepend={[ 'String', - + , ]} append={[ } + button={} closePopover={() => {}} />, 'String', diff --git a/src-docs/src/views/guidelines/button.js b/src-docs/src/views/guidelines/button.js index c1b1396af28..0c21210087e 100644 --- a/src-docs/src/views/guidelines/button.js +++ b/src-docs/src/views/guidelines/button.js @@ -104,7 +104,7 @@ export default () => ( color="danger" onClick={() => window.alert('Button clicked')} iconType="trash" - aria-label="Next" + label="Next" />
@@ -264,9 +264,9 @@ export default () => ( panel={false} frame="frame">
- +      - +
( frame="frame">
- +      - +
@@ -475,7 +475,7 @@ export default () => ( size="s" color="danger" iconType="trash" - aria-label="delete" + label="delete" /> @@ -492,7 +492,7 @@ export default () => ( size="s" color="danger" iconType="cross" - aria-label="Remove" + label="Remove" /> diff --git a/src-docs/src/views/suggest/global_filter_options.js b/src-docs/src/views/suggest/global_filter_options.js index ee0e7a276af..3a8ce5dc437 100644 --- a/src-docs/src/views/suggest/global_filter_options.js +++ b/src-docs/src/views/suggest/global_filter_options.js @@ -106,7 +106,7 @@ export default class GlobalFilterOptions extends Component { onClick={this.togglePopover} color="text" iconType="filter" - aria-label="Change all filters" + label="Change all filters" title="Change all filters" /> } diff --git a/src-docs/src/views/tables/custom/custom.js b/src-docs/src/views/tables/custom/custom.js index 43036e20fa0..8dd1f68d255 100644 --- a/src-docs/src/views/tables/custom/custom.js +++ b/src-docs/src/views/tables/custom/custom.js @@ -527,7 +527,7 @@ export default class extends Component { id={`${item.id}-actions`} button={ ( this.toggleDetails(item)} - aria-label={itemIdToExpandedRowMap[item.id] ? 'Collapse' : 'Expand'} + label={itemIdToExpandedRowMap[item.id] ? 'Collapse' : 'Expand'} iconType={itemIdToExpandedRowMap[item.id] ? 'arrowUp' : 'arrowDown'} /> ), diff --git a/src/components/basic_table/collapsed_item_actions.tsx b/src/components/basic_table/collapsed_item_actions.tsx index 7586465172c..18f827744be 100644 --- a/src/components/basic_table/collapsed_item_actions.tsx +++ b/src/components/basic_table/collapsed_item_actions.tsx @@ -149,7 +149,7 @@ export class CollapsedItemActions extends Component< {(allActions: string) => ( ({ button = ( + >; type EuiButtonIconPropsForAnchor = PropsForAnchor< EuiButtonIconProps, @@ -87,20 +88,7 @@ export const EuiButtonIcon: FunctionComponent = ({ label, ...rest }) => { - const ariaHidden = rest['aria-hidden']; - const isAriaHidden = ariaHidden === 'true' || ariaHidden === true; - - if ( - !label && - !rest['aria-label'] && - !rest['aria-labelledby'] && - !isAriaHidden - ) { - console.warn( - `EuiButtonIcon requires aria-label or aria-labelledby to be specified because icon-only - buttons are screen-reader-inaccessible without them.` - ); - } + const tabIndex = rest['aria-hidden'] === true ? -1 : undefined; const classes = classNames( 'euiButtonIcon', colorToClassNameMap[color], @@ -128,7 +116,7 @@ export const EuiButtonIcon: FunctionComponent = ({ return ( = ({ let buttonType: ButtonHTMLAttributes['type']; return (
From 963da2bf0a51a1349d6e2374d9867e8727ec437c Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Tue, 17 Mar 2020 14:37:08 -0500 Subject: [PATCH 04/13] fixing ControlBar types --- .../button/button_icon/button_icon.tsx | 10 ++++++---- src/components/control_bar/control_bar.tsx | 17 ++++++++++++++++- 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx index a577cdf54af..3c6b13f282f 100644 --- a/src/components/button/button_icon/button_icon.tsx +++ b/src/components/button/button_icon/button_icon.tsx @@ -30,6 +30,11 @@ export type EuiButtonIconColor = | 'text' | 'warning'; +export type HideOrLabel = ExclusiveUnion< + { 'aria-hidden': true }, + ExclusiveUnion<{ label: ReactNode }, { 'aria-labelledby': string }> +>; + export type EuiButtonIconProps = { iconType?: IconType; color?: EuiButtonIconColor; @@ -37,10 +42,7 @@ export type EuiButtonIconProps = { size?: ButtonSize; iconSize?: IconSize; } & CommonProps & - ExclusiveUnion< - { 'aria-hidden': true }, - ExclusiveUnion<{ label: ReactNode }, { 'aria-labelledby': string }> - >; + HideOrLabel; type EuiButtonIconPropsForAnchor = PropsForAnchor< EuiButtonIconProps, diff --git a/src/components/control_bar/control_bar.tsx b/src/components/control_bar/control_bar.tsx index c52df731787..1be5c9acbad 100644 --- a/src/components/control_bar/control_bar.tsx +++ b/src/components/control_bar/control_bar.tsx @@ -12,6 +12,7 @@ import { EuiButtonIcon, EuiButtonIconProps, EuiButtonProps, + HideOrLabel, } from '../button'; import { CommonProps, @@ -333,6 +334,19 @@ export class EuiControlBar extends Component< ); } + const { + label, + 'aria-labelledby': ariaLabelledby, + 'aria-hidden': ariaHidden, + ...buttonIconRest + } = rest as IconButtonControlType; + let buttonIconProps: HideOrLabel = { label: label }; + if (ariaHidden === true) { + buttonIconProps = { 'aria-hidden': ariaHidden }; + } else if (ariaLabelledby) { + buttonIconProps = { 'aria-labelledby': ariaLabelledby }; + } + return ( ); } From 8402c4e3080e0357d9733fadc04c6660ac96fa0d Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Tue, 17 Mar 2020 15:38:56 -0500 Subject: [PATCH 05/13] fixing tests --- .../collapsed_item_actions.test.tsx.snap | 6 +- .../default_item_action.test.tsx.snap | 6 +- .../in_memory_table.test.tsx.snap | 20 +- .../__snapshots__/button_group.test.tsx.snap | 1376 +++++------------ .../__snapshots__/button_icon.test.tsx.snap | 113 +- .../button/button_icon/button_icon.test.tsx | 20 +- .../button/button_icon/button_icon.tsx | 3 - src/components/button/button_icon/index.ts | 1 + src/components/button/index.ts | 1 + .../__snapshots__/code_block.test.tsx.snap | 12 +- .../__snapshots__/data_grid.test.tsx.snap | 36 +- src/components/datagrid/data_grid.test.tsx | 7 +- .../flyout/__snapshots__/flyout.test.tsx.snap | 48 +- src/components/flyout/flyout.test.tsx | 4 +- .../__snapshots__/list_group.test.tsx.snap | 5 + .../list_group_item.test.tsx.snap | 6 +- src/components/list_group/list_group.test.tsx | 1 + .../list_group/list_group_item.test.tsx | 2 +- .../__snapshots__/confirm_modal.test.tsx.snap | 12 +- .../modal/__snapshots__/modal.test.tsx.snap | 6 +- .../__snapshots__/pagination.test.tsx.snap | 12 +- .../table_pagination.test.tsx.snap | 24 +- 22 files changed, 649 insertions(+), 1072 deletions(-) diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap index 3268b0b4941..9b403d682b8 100644 --- a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap @@ -12,7 +12,6 @@ exports[`CollapsedItemActions render 1`] = ` class="euiToolTipAnchor" >
diff --git a/src/components/basic_table/__snapshots__/default_item_action.test.tsx.snap b/src/components/basic_table/__snapshots__/default_item_action.test.tsx.snap index 465e88cbf31..2ec07540c8c 100644 --- a/src/components/basic_table/__snapshots__/default_item_action.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/default_item_action.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`DefaultItemAction render - default button 1`] = ` +exports[`DefaultItemAction render - button 1`] = ` `; -exports[`DefaultItemAction render - button 1`] = ` +exports[`DefaultItemAction render - default button 1`] = ` diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap index 626acbbb17a..e409c27ad8b 100644 --- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap @@ -437,15 +437,14 @@ exports[`EuiInMemoryTable behavior pagination 1`] = ` token="euiPagination.previousPage" > @@ -565,15 +571,14 @@ exports[`EuiInMemoryTable behavior pagination 1`] = ` token="euiPagination.nextPage" > 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 8db489905f8..40f9e109d3d 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 @@ -29,82 +29,46 @@ exports[`EuiButtonGroup props buttonSize compressed is rendered 1`] = ` class="euiButtonGroup euiButtonGroup--compressed" >
+ -
+ -
+ -
@@ -123,82 +87,46 @@ exports[`EuiButtonGroup props buttonSize m is rendered 1`] = ` class="euiButtonGroup euiButtonGroup--m" >
+ -
+ -
+ -
@@ -217,82 +145,46 @@ exports[`EuiButtonGroup props buttonSize s is rendered 1`] = ` class="euiButtonGroup euiButtonGroup--s" >
+ -
+ -
+ -
@@ -311,82 +203,46 @@ exports[`EuiButtonGroup props color danger is rendered 1`] = ` class="euiButtonGroup euiButtonGroup--s" >
+ -
+ -
+ -
@@ -405,82 +261,46 @@ exports[`EuiButtonGroup props color ghost is rendered 1`] = ` class="euiButtonGroup euiButtonGroup--s" >
+ -
+ -
+ -
@@ -499,82 +319,46 @@ exports[`EuiButtonGroup props color primary is rendered 1`] = ` class="euiButtonGroup euiButtonGroup--s" >
+ -
+ -
+ -
@@ -593,82 +377,46 @@ exports[`EuiButtonGroup props color secondary is rendered 1`] = ` class="euiButtonGroup euiButtonGroup--s" >
+ -
+ -
+ -
@@ -687,82 +435,46 @@ exports[`EuiButtonGroup props color text is rendered 1`] = ` class="euiButtonGroup euiButtonGroup--s" >
+ -
+ -
+ -
@@ -781,82 +493,46 @@ exports[`EuiButtonGroup props color warning is rendered 1`] = ` class="euiButtonGroup euiButtonGroup--s" >
+ -
+ -
+ -
@@ -875,83 +551,47 @@ exports[`EuiButtonGroup props idSelected is rendered 1`] = ` class="euiButtonGroup euiButtonGroup--s" >
+ -
+ -
+ -
@@ -970,88 +610,49 @@ exports[`EuiButtonGroup props isDisabled is rendered 1`] = ` class="euiButtonGroup euiButtonGroup--s" >
+ -
+ -
+ -
@@ -1070,82 +671,46 @@ exports[`EuiButtonGroup props isFullWidth is rendered 1`] = ` class="euiButtonGroup euiButtonGroup--s euiButtonGroup--fullWidth" >
+ -
+ -
+ -
@@ -1164,76 +729,58 @@ exports[`EuiButtonGroup props isIconOnly is rendered 1`] = ` class="euiButtonGroup euiButtonGroup--s" >
- - -
-
+ - -
-
+ - + +
@@ -1252,82 +799,46 @@ exports[`EuiButtonGroup props legend is rendered 1`] = ` class="euiButtonGroup euiButtonGroup--s" >
+ -
+ -
+ -
@@ -1346,85 +857,49 @@ exports[`EuiButtonGroup props name is rendered 1`] = ` class="euiButtonGroup euiButtonGroup--s" >
+ -
+ -
+ -
@@ -1443,82 +918,46 @@ exports[`EuiButtonGroup props options are rendered 1`] = ` class="euiButtonGroup euiButtonGroup--s" >
+ -
+ -
+ -
@@ -1537,31 +976,20 @@ exports[`EuiButtonGroup props options can pass down data-test-subj 1`] = ` class="euiButtonGroup euiButtonGroup--s" >
+ -
diff --git a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap index 5ee45e09868..8cc167d6213 100644 --- a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap +++ b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap @@ -6,86 +6,136 @@ exports[`EuiButtonIcon is rendered 1`] = ` class="euiButtonIcon euiButtonIcon--primary testClass1 testClass2" data-test-subj="test subject string" type="button" -/> +> + + button + + `; exports[`EuiButtonIcon props color danger is rendered 1`] = ` `; exports[`EuiButtonIcon props color disabled is rendered 1`] = ` `; exports[`EuiButtonIcon props color ghost is rendered 1`] = ` `; exports[`EuiButtonIcon props color primary is rendered 1`] = ` `; exports[`EuiButtonIcon props color subdued is rendered 1`] = ` `; exports[`EuiButtonIcon props color success is rendered 1`] = ` `; exports[`EuiButtonIcon props color text is rendered 1`] = ` `; exports[`EuiButtonIcon props color warning is rendered 1`] = ` `; exports[`EuiButtonIcon props href secures the rel attribute when the target is _blank 1`] = ` +> + + button + + `; exports[`EuiButtonIcon props iconType is rendered 1`] = ` `; exports[`EuiButtonIcon props isDisabled is rendered 1`] = ` `; exports[`EuiButtonIcon props isDisabled renders a button even when href is defined 1`] = ` `; diff --git a/src/components/button/button_icon/button_icon.test.tsx b/src/components/button/button_icon/button_icon.test.tsx index f649c198a19..da954b11ac6 100644 --- a/src/components/button/button_icon/button_icon.test.tsx +++ b/src/components/button/button_icon/button_icon.test.tsx @@ -6,7 +6,9 @@ import { EuiButtonIcon, COLORS } from './button_icon'; describe('EuiButtonIcon', () => { test('is rendered', () => { - const component = render(); + const component = render( + + ); expect(component).toMatchSnapshot(); }); @@ -14,16 +16,14 @@ describe('EuiButtonIcon', () => { describe('props', () => { describe('isDisabled', () => { it('is rendered', () => { - const component = render( - - ); + const component = render(); expect(component).toMatchSnapshot(); }); it('renders a button even when href is defined', () => { const component = render( - + ); expect(component).toMatchSnapshot(); @@ -33,7 +33,7 @@ describe('EuiButtonIcon', () => { describe('iconType', () => { it('is rendered', () => { const component = render( - + ); expect(component).toMatchSnapshot(); @@ -44,7 +44,7 @@ describe('EuiButtonIcon', () => { COLORS.forEach(color => { test(`${color} is rendered`, () => { const component = render( - + ); expect(component).toMatchSnapshot(); @@ -55,7 +55,7 @@ describe('EuiButtonIcon', () => { describe('href', () => { it('secures the rel attribute when the target is _blank', () => { const component = render( - + ); expect(component).toMatchSnapshot(); @@ -66,7 +66,7 @@ describe('EuiButtonIcon', () => { it('supports onClick and href', () => { const handler = jest.fn(); const component = mount( - + ); component.find('a').simulate('click'); expect(handler.mock.calls.length).toEqual(1); @@ -75,7 +75,7 @@ describe('EuiButtonIcon', () => { it('supports onClick as a button', () => { const handler = jest.fn(); const component = mount( - + ); component.find('button').simulate('click'); expect(handler.mock.calls.length).toEqual(1); diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx index 3c6b13f282f..aca785d6529 100644 --- a/src/components/button/button_icon/button_icon.tsx +++ b/src/components/button/button_icon/button_icon.tsx @@ -90,7 +90,6 @@ export const EuiButtonIcon: FunctionComponent = ({ label, ...rest }) => { - const tabIndex = rest['aria-hidden'] === true ? -1 : undefined; const classes = classNames( 'euiButtonIcon', colorToClassNameMap[color], @@ -118,7 +117,6 @@ export const EuiButtonIcon: FunctionComponent = ({ return ( = ({ let buttonType: ButtonHTMLAttributes['type']; return ( @@ -154,7 +158,6 @@ console.log(some); class="euiCodeBlock__controls" > diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap index 103dd9f4f5d..4c4447170ed 100644 --- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap +++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap @@ -84,7 +84,6 @@ exports[`EuiDataGrid pagination renders 1`] = ` role="group" > @@ -339,7 +347,6 @@ Array [ @@ -66,7 +70,6 @@ exports[`EuiFlyout max width can be set to a custom number 1`] = ` tabindex="0" > @@ -109,7 +117,6 @@ exports[`EuiFlyout max width can be set to a custom value and measurement 1`] = tabindex="0" > @@ -151,7 +163,6 @@ exports[`EuiFlyout max width can be set to a default 1`] = ` tabindex="0" > @@ -194,7 +210,6 @@ exports[`EuiFlyout props accepts div props 1`] = ` tabindex="0" > @@ -265,7 +285,6 @@ exports[`EuiFlyout size l is rendered 1`] = ` tabindex="0" > @@ -307,7 +331,6 @@ exports[`EuiFlyout size m is rendered 1`] = ` tabindex="0" > @@ -349,7 +377,6 @@ exports[`EuiFlyout size s is rendered 1`] = ` tabindex="0" > diff --git a/src/components/flyout/flyout.test.tsx b/src/components/flyout/flyout.test.tsx index eb32c45275f..44940c8148b 100644 --- a/src/components/flyout/flyout.test.tsx +++ b/src/components/flyout/flyout.test.tsx @@ -29,7 +29,7 @@ describe('EuiFlyout', () => { const component = render( {}} />); const label = component .find('[data-test-subj="euiFlyoutCloseButton"]') - .prop('aria-label'); + .text(); expect(label).toBe('Closes this dialog'); }); @@ -42,7 +42,7 @@ describe('EuiFlyout', () => { ); const label = component .find('[data-test-subj="euiFlyoutCloseButton"]') - .prop('aria-label'); + .text(); expect(label).toBe('Closes specific flyout'); }); }); diff --git a/src/components/list_group/__snapshots__/list_group.test.tsx.snap b/src/components/list_group/__snapshots__/list_group.test.tsx.snap index 72252c29443..b7073bce670 100644 --- a/src/components/list_group/__snapshots__/list_group.test.tsx.snap +++ b/src/components/list_group/__snapshots__/list_group.test.tsx.snap @@ -52,6 +52,11 @@ exports[`EuiListGroup is rendered with listItems 1`] = ` class="euiButtonIcon__icon" data-euiicon-type="bell" /> + + Notification +
    • `; diff --git a/src/components/list_group/list_group.test.tsx b/src/components/list_group/list_group.test.tsx index d22dbecf23b..952425e632c 100644 --- a/src/components/list_group/list_group.test.tsx +++ b/src/components/list_group/list_group.test.tsx @@ -15,6 +15,7 @@ const someListItems: EuiListGroupItemProps[] = [ extraAction: { iconType: 'bell', alwaysShow: true, + label: 'Notification', }, }, { diff --git a/src/components/list_group/list_group_item.test.tsx b/src/components/list_group/list_group_item.test.tsx index 40a903f4b8f..1d433b1ede2 100644 --- a/src/components/list_group/list_group_item.test.tsx +++ b/src/components/list_group/list_group_item.test.tsx @@ -98,7 +98,7 @@ describe('EuiListGroupItem', () => { extraAction={{ iconType: 'empty', alwaysShow: true, - 'aria-label': 'label', + label: 'label', }} /> ); diff --git a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap index 1f40a73883a..4e24b3f926f 100644 --- a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap +++ b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap @@ -22,7 +22,6 @@ Array [ tabindex="0" >
    `; diff --git a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap index 55792a68aa9..b722ed796bd 100644 --- a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap +++ b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap @@ -44,7 +44,6 @@ exports[`EuiTablePagination is rendered 1`] = ` role="group" >
    @@ -167,7 +175,6 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = ` role="group" > From 94c78b604db8d0b4d7295ea5fd479f3244e1f2eb Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Mon, 30 Mar 2020 19:30:33 -0500 Subject: [PATCH 06/13] undoing euiButtonIcon change and fixing euiButtonGroup styling --- .../guide_page/guide_page_chrome.js | 2 +- src-docs/src/routes.js | 3 - .../src/views/accordion/accordion_form.js | 2 +- src-docs/src/views/button/button_as_link.js | 4 +- src-docs/src/views/button/button_ghost.js | 2 +- src-docs/src/views/button/button_icon.js | 2 +- src-docs/src/views/button/button_toggle.js | 4 +- .../src/views/datagrid/control_columns.js | 12 +- src-docs/src/views/datagrid/datagrid.js | 8 +- src-docs/src/views/datagrid/schema.js | 2 +- .../drag_and_drop/drag_and_drop_clone.js | 2 +- .../drag_and_drop/drag_and_drop_complex.js | 2 +- .../views/form_compressed/complex_example.js | 2 +- .../src/views/form_controls/prepend_append.js | 19 +- src-docs/src/views/guidelines/button.js | 14 +- .../views/suggest/global_filter_options.js | 2 +- src-docs/src/views/tables/custom/custom.js | 2 +- .../tables/expanding_rows/expanding_rows.js | 2 +- .../collapsed_item_actions.test.tsx.snap | 6 +- .../default_item_action.test.tsx.snap | 2 +- .../in_memory_table.test.tsx.snap | 20 +- .../basic_table/collapsed_item_actions.tsx | 2 +- .../basic_table/default_item_action.tsx | 2 +- src/components/button/_button.scss | 6 +- .../__snapshots__/button_group.test.tsx.snap | 695 ++++++++++-------- .../button/button_group/_button_group.scss | 163 ++-- .../button/button_group/button_group.tsx | 71 +- .../__snapshots__/button_icon.test.tsx.snap | 113 +-- .../button/button_icon/button_icon.test.tsx | 18 +- .../button/button_icon/button_icon.tsx | 18 +- src/components/button/index.ts | 1 + .../__snapshots__/code_block.test.tsx.snap | 12 +- src/components/code/_code_block.tsx | 4 +- .../color_stops/color_stop_thumb.tsx | 2 +- src/components/control_bar/control_bar.tsx | 18 +- .../__snapshots__/data_grid.test.tsx.snap | 12 +- .../datagrid/column_sorting_draggable.tsx | 2 +- .../flyout/__snapshots__/flyout.test.tsx.snap | 48 +- src/components/flyout/flyout.test.tsx | 4 +- src/components/flyout/flyout.tsx | 3 +- .../__snapshots__/list_group.test.tsx.snap | 6 +- .../list_group_item.test.tsx.snap | 6 +- src/components/list_group/list_group.test.tsx | 2 +- .../list_group/list_group_item.test.tsx | 2 +- .../__snapshots__/confirm_modal.test.tsx.snap | 12 +- .../modal/__snapshots__/modal.test.tsx.snap | 6 +- src/components/modal/modal.tsx | 2 +- .../__snapshots__/pagination.test.tsx.snap | 12 +- src/components/pagination/pagination.tsx | 4 +- .../table_pagination.test.tsx.snap | 24 +- 50 files changed, 620 insertions(+), 764 deletions(-) diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js index 869ab97ab28..d0670f37817 100644 --- a/src-docs/src/components/guide_page/guide_page_chrome.js +++ b/src-docs/src/components/guide_page/guide_page_chrome.js @@ -123,7 +123,7 @@ export class GuidePageChrome extends Component { ); diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index e470cc093a2..09827b70a8d 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -194,8 +194,6 @@ import { ToastExample } from './views/toast/toast_example'; import { ToolTipExample } from './views/tool_tip/tool_tip_example'; -// import { ToggleExample } from './views/toggle/toggle_example'; - import { WindowEventExample } from './views/window_event/window_event_example'; import { Changelog } from './views/package/changelog'; @@ -423,7 +421,6 @@ const navigation = [ PortalExample, ResizeObserverExample, ResponsiveExample, - // ToggleExample, WindowEventExample, ].map(example => createExample(example)), }, diff --git a/src-docs/src/views/accordion/accordion_form.js b/src-docs/src/views/accordion/accordion_form.js index c1ead2da4e1..213101ac4cd 100644 --- a/src-docs/src/views/accordion/accordion_form.js +++ b/src-docs/src/views/accordion/accordion_form.js @@ -72,7 +72,7 @@ const extraAction = ( iconType="cross" color="danger" className="euiAccordionForm__extraAction" - label="Delete" + aria-label="Delete" /> ); diff --git a/src-docs/src/views/button/button_as_link.js b/src-docs/src/views/button/button_as_link.js index b35e4b9e1b0..cf9f3a3aa8f 100644 --- a/src-docs/src/views/button/button_as_link.js +++ b/src-docs/src/views/button/button_as_link.js @@ -25,7 +25,7 @@ export default () => ( @@ -47,7 +47,7 @@ export default () => ( diff --git a/src-docs/src/views/button/button_ghost.js b/src-docs/src/views/button/button_ghost.js index 54ac3d5004f..8ebc44ead29 100644 --- a/src-docs/src/views/button/button_ghost.js +++ b/src-docs/src/views/button/button_ghost.js @@ -62,7 +62,7 @@ export default class extends Component { color="ghost" iconType="user" onClick={() => window.alert('Button clicked')} - label="Your account" + aria-label="Your account" /> diff --git a/src-docs/src/views/button/button_icon.js b/src-docs/src/views/button/button_icon.js index b481b3c9ec7..b39e96bd0e2 100644 --- a/src-docs/src/views/button/button_icon.js +++ b/src-docs/src/views/button/button_icon.js @@ -24,7 +24,7 @@ export default () => ( color={color} onClick={() => window.alert('Button clicked')} iconType="arrowRight" - label="Next" + aria-label="Next" disabled={color === 'disabled' ? true : false} /> diff --git a/src-docs/src/views/button/button_toggle.js b/src-docs/src/views/button/button_toggle.js index cdc9139e83f..0158f7d3e01 100644 --- a/src-docs/src/views/button/button_toggle.js +++ b/src-docs/src/views/button/button_toggle.js @@ -48,13 +48,13 @@ export default class extends Component {     { @@ -118,7 +118,7 @@ const SelectionButton = () => { @@ -220,7 +220,7 @@ const FlyoutRowCell = rowIndex => { color="text" iconType="eye" iconSize="s" - label="View details" + aria-label="View details" onClick={() => setIsFlyoutOpen(!isFlyoutOpen)} /> {flyout} @@ -258,7 +258,7 @@ const trailingControlColumns = [ panelPaddingSize="s" button={ setIsPopoverOpen(!isPopoverOpen)} @@ -275,7 +275,7 @@ const trailingControlColumns = [ gutterSize="s"> @@ -291,7 +291,7 @@ const trailingControlColumns = [ gutterSize="s"> diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js index cf0e74da6e1..6597826bbd7 100644 --- a/src-docs/src/views/datagrid/datagrid.js +++ b/src-docs/src/views/datagrid/datagrid.js @@ -33,7 +33,7 @@ const columns = [ alert('Email Icon Clicked!')} @@ -103,7 +103,7 @@ const trailingControlColumns = [ anchorPosition="upCenter" button={ setIsPopoverOpen(!isPopoverOpen)} @@ -120,7 +120,7 @@ const trailingControlColumns = [ gutterSize="s"> @@ -136,7 +136,7 @@ const trailingControlColumns = [ gutterSize="s"> diff --git a/src-docs/src/views/datagrid/schema.js b/src-docs/src/views/datagrid/schema.js index dc21cea7cdb..44192d309a2 100644 --- a/src-docs/src/views/datagrid/schema.js +++ b/src-docs/src/views/datagrid/schema.js @@ -152,7 +152,7 @@ export default class DataGridSchema extends Component { dummyIcon = () => ( ); diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_clone.js b/src-docs/src/views/drag_and_drop/drag_and_drop_clone.js index af8f4c1c8f7..4056a8b0c44 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_clone.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_clone.js @@ -103,7 +103,7 @@ export default () => { ) : ( remove('DROPPABLE_AREA_COPY_2', idx)} /> )} diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js b/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js index 2f69f7632ed..fa66efafc42 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js @@ -75,7 +75,7 @@ export default () => { , 'kibana_sample_ecommerce_data', diff --git a/src-docs/src/views/form_controls/prepend_append.js b/src-docs/src/views/form_controls/prepend_append.js index ff127aec7b1..0abeceed18f 100644 --- a/src-docs/src/views/form_controls/prepend_append.js +++ b/src-docs/src/views/form_controls/prepend_append.js @@ -93,7 +93,7 @@ export default () => { } - append={} + append={} compressed={isCompressed} disabled={isDisabled} readOnly={isReadOnly} @@ -103,11 +103,11 @@ export default () => { placeholder="Icons in buttons and popovers and tooltips" prepend={[ , - , + , ]} append={[ } + button={} closePopover={() => {}} />, , @@ -121,13 +121,13 @@ export default () => { placeholder="Icon button in popover & tooltip" append={ } + button={} closePopover={() => {}} /> } prepend={ - + } compressed={isCompressed} @@ -138,7 +138,10 @@ export default () => { , 'String']} - append={['String', ]} + append={[ + 'String', + , + ]} compressed={isCompressed} disabled={isDisabled} readOnly={isReadOnly} @@ -149,12 +152,12 @@ export default () => { prepend={[ 'String', - + , ]} append={[ } + button={} closePopover={() => {}} />, 'String', diff --git a/src-docs/src/views/guidelines/button.js b/src-docs/src/views/guidelines/button.js index 0c21210087e..c1b1396af28 100644 --- a/src-docs/src/views/guidelines/button.js +++ b/src-docs/src/views/guidelines/button.js @@ -104,7 +104,7 @@ export default () => ( color="danger" onClick={() => window.alert('Button clicked')} iconType="trash" - label="Next" + aria-label="Next" /> @@ -264,9 +264,9 @@ export default () => ( panel={false} frame="frame">
    - +      - +
    ( frame="frame">
    - +      - +
    @@ -475,7 +475,7 @@ export default () => ( size="s" color="danger" iconType="trash" - label="delete" + aria-label="delete" /> @@ -492,7 +492,7 @@ export default () => ( size="s" color="danger" iconType="cross" - label="Remove" + aria-label="Remove" /> diff --git a/src-docs/src/views/suggest/global_filter_options.js b/src-docs/src/views/suggest/global_filter_options.js index 3a8ce5dc437..ee0e7a276af 100644 --- a/src-docs/src/views/suggest/global_filter_options.js +++ b/src-docs/src/views/suggest/global_filter_options.js @@ -106,7 +106,7 @@ export default class GlobalFilterOptions extends Component { onClick={this.togglePopover} color="text" iconType="filter" - label="Change all filters" + aria-label="Change all filters" title="Change all filters" /> } diff --git a/src-docs/src/views/tables/custom/custom.js b/src-docs/src/views/tables/custom/custom.js index 8dd1f68d255..43036e20fa0 100644 --- a/src-docs/src/views/tables/custom/custom.js +++ b/src-docs/src/views/tables/custom/custom.js @@ -527,7 +527,7 @@ export default class extends Component { id={`${item.id}-actions`} button={ ( this.toggleDetails(item)} - label={itemIdToExpandedRowMap[item.id] ? 'Collapse' : 'Expand'} + aria-label={itemIdToExpandedRowMap[item.id] ? 'Collapse' : 'Expand'} iconType={itemIdToExpandedRowMap[item.id] ? 'arrowUp' : 'arrowDown'} /> ), diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap index 9b403d682b8..3268b0b4941 100644 --- a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap @@ -12,6 +12,7 @@ exports[`CollapsedItemActions render 1`] = ` class="euiToolTipAnchor" > diff --git a/src/components/basic_table/__snapshots__/default_item_action.test.tsx.snap b/src/components/basic_table/__snapshots__/default_item_action.test.tsx.snap index 2ec07540c8c..b4c335cda11 100644 --- a/src/components/basic_table/__snapshots__/default_item_action.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/default_item_action.test.tsx.snap @@ -43,10 +43,10 @@ exports[`DefaultItemAction render - icon 1`] = ` position="top" > diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap index e409c27ad8b..626acbbb17a 100644 --- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap @@ -437,14 +437,15 @@ exports[`EuiInMemoryTable behavior pagination 1`] = ` token="euiPagination.previousPage" > @@ -571,14 +565,15 @@ exports[`EuiInMemoryTable behavior pagination 1`] = ` token="euiPagination.nextPage" > diff --git a/src/components/basic_table/collapsed_item_actions.tsx b/src/components/basic_table/collapsed_item_actions.tsx index 18f827744be..7586465172c 100644 --- a/src/components/basic_table/collapsed_item_actions.tsx +++ b/src/components/basic_table/collapsed_item_actions.tsx @@ -149,7 +149,7 @@ export class CollapsedItemActions extends Component< {(allActions: string) => ( ({ button = (
    `; @@ -29,46 +29,49 @@ exports[`EuiButtonGroup props buttonSize compressed is rendered 1`] = ` class="euiButtonGroup euiButtonGroup--compressed" >
    + -
    + -
    + -
    @@ -84,49 +87,52 @@ exports[`EuiButtonGroup props buttonSize m is rendered 1`] = ` test
    + -
    + -
    + -
    @@ -142,49 +148,52 @@ exports[`EuiButtonGroup props buttonSize s is rendered 1`] = ` test
    + -
    + -
    + -
    @@ -200,49 +209,52 @@ exports[`EuiButtonGroup props color danger is rendered 1`] = ` test
    + -
    + -
    + -
    @@ -258,49 +270,52 @@ exports[`EuiButtonGroup props color ghost is rendered 1`] = ` test
    + -
    + -
    + -
    @@ -316,49 +331,52 @@ exports[`EuiButtonGroup props color primary is rendered 1`] = ` test
    + -
    + -
    + -
    @@ -374,49 +392,52 @@ exports[`EuiButtonGroup props color secondary is rendered 1`] = ` test
    + -
    + -
    + -
    @@ -432,49 +453,52 @@ exports[`EuiButtonGroup props color text is rendered 1`] = ` test
    + -
    + -
    + -
    @@ -490,49 +514,52 @@ exports[`EuiButtonGroup props color warning is rendered 1`] = ` test
    + -
    + -
    + -
    @@ -548,50 +575,53 @@ exports[`EuiButtonGroup props idSelected is rendered 1`] = ` test
    - +
    + -
    + -
    @@ -607,52 +637,55 @@ exports[`EuiButtonGroup props isDisabled is rendered 1`] = ` test
    + +
    +
    -
    -
    +
    +
    -
    -
    -
    @@ -668,49 +701,52 @@ exports[`EuiButtonGroup props isFullWidth is rendered 1`] = ` test
    + -
    + -
    + -
    @@ -726,12 +762,18 @@ exports[`EuiButtonGroup props isIconOnly is rendered 1`] = ` test
    + -
    + -
    + -
    @@ -796,49 +835,52 @@ exports[`EuiButtonGroup props legend is rendered 1`] = ` test
    + -
    + -
    + -
    @@ -854,52 +896,55 @@ exports[`EuiButtonGroup props name is rendered 1`] = ` test
    + +
    +
    -
    -
    +
    +
    -
    -
    -
    @@ -915,49 +960,52 @@ exports[`EuiButtonGroup props options are rendered 1`] = ` test
    + -
    + -
    + -
    @@ -973,23 +1021,24 @@ exports[`EuiButtonGroup props options can pass down data-test-subj 1`] = ` test
    - +
    @@ -1005,10 +1054,10 @@ exports[`EuiButtonGroup props type of multi idToSelectedMap is rendered 1`] = ` test
    +/> `; exports[`EuiButtonIcon props color danger is rendered 1`] = ` +/> `; exports[`EuiButtonIcon props color disabled is rendered 1`] = ` +/> `; exports[`EuiButtonIcon props color ghost is rendered 1`] = ` +/> `; exports[`EuiButtonIcon props color primary is rendered 1`] = ` +/> `; exports[`EuiButtonIcon props color subdued is rendered 1`] = ` +/> `; exports[`EuiButtonIcon props color success is rendered 1`] = ` +/> `; exports[`EuiButtonIcon props color text is rendered 1`] = ` +/> `; exports[`EuiButtonIcon props color warning is rendered 1`] = ` +/> `; exports[`EuiButtonIcon props href secures the rel attribute when the target is _blank 1`] = ` - - button - - +/> `; exports[`EuiButtonIcon props iconType is rendered 1`] = ` `; exports[`EuiButtonIcon props isDisabled is rendered 1`] = ` +/> `; exports[`EuiButtonIcon props isDisabled renders a button even when href is defined 1`] = ` +/> `; diff --git a/src/components/button/button_icon/button_icon.test.tsx b/src/components/button/button_icon/button_icon.test.tsx index da954b11ac6..8a6e3d5b2c9 100644 --- a/src/components/button/button_icon/button_icon.test.tsx +++ b/src/components/button/button_icon/button_icon.test.tsx @@ -7,7 +7,7 @@ import { EuiButtonIcon, COLORS } from './button_icon'; describe('EuiButtonIcon', () => { test('is rendered', () => { const component = render( - + ); expect(component).toMatchSnapshot(); @@ -16,14 +16,16 @@ describe('EuiButtonIcon', () => { describe('props', () => { describe('isDisabled', () => { it('is rendered', () => { - const component = render(); + const component = render( + + ); expect(component).toMatchSnapshot(); }); it('renders a button even when href is defined', () => { const component = render( - + ); expect(component).toMatchSnapshot(); @@ -33,7 +35,7 @@ describe('EuiButtonIcon', () => { describe('iconType', () => { it('is rendered', () => { const component = render( - + ); expect(component).toMatchSnapshot(); @@ -44,7 +46,7 @@ describe('EuiButtonIcon', () => { COLORS.forEach(color => { test(`${color} is rendered`, () => { const component = render( - + ); expect(component).toMatchSnapshot(); @@ -55,7 +57,7 @@ describe('EuiButtonIcon', () => { describe('href', () => { it('secures the rel attribute when the target is _blank', () => { const component = render( - + ); expect(component).toMatchSnapshot(); @@ -66,7 +68,7 @@ describe('EuiButtonIcon', () => { it('supports onClick and href', () => { const handler = jest.fn(); const component = mount( - + ); component.find('a').simulate('click'); expect(handler.mock.calls.length).toEqual(1); @@ -75,7 +77,7 @@ describe('EuiButtonIcon', () => { it('supports onClick as a button', () => { const handler = jest.fn(); const component = mount( - + ); component.find('button').simulate('click'); expect(handler.mock.calls.length).toEqual(1); diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx index aca785d6529..88740f456a4 100644 --- a/src/components/button/button_icon/button_icon.tsx +++ b/src/components/button/button_icon/button_icon.tsx @@ -3,10 +3,9 @@ import React, { ButtonHTMLAttributes, FunctionComponent, Ref, - ReactNode, } from 'react'; import classNames from 'classnames'; -import { EuiScreenReaderOnly } from '../../accessibility/screen_reader'; + import { getSecureRelForTarget } from '../../../services'; import { CommonProps, @@ -32,12 +31,14 @@ export type EuiButtonIconColor = export type HideOrLabel = ExclusiveUnion< { 'aria-hidden': true }, - ExclusiveUnion<{ label: ReactNode }, { 'aria-labelledby': string }> + ExclusiveUnion<{ 'aria-label': string }, { 'aria-labelledby': string }> >; export type EuiButtonIconProps = { iconType?: IconType; color?: EuiButtonIconColor; + 'aria-label'?: string; + 'aria-labelledby'?: string; isDisabled?: boolean; size?: ButtonSize; iconSize?: IconSize; @@ -87,7 +88,6 @@ export const EuiButtonIcon: FunctionComponent = ({ target, rel, buttonRef, - label, ...rest }) => { const classes = classNames( @@ -124,11 +124,6 @@ export const EuiButtonIcon: FunctionComponent = ({ ref={buttonRef as Ref} {...rest as AnchorHTMLAttributes}> {buttonIcon} - {label && ( - - {label} - - )} ); } @@ -142,11 +137,6 @@ export const EuiButtonIcon: FunctionComponent = ({ ref={buttonRef as Ref} {...rest as ButtonHTMLAttributes}> {buttonIcon} - {label && ( - - {label} - - )} ); }; diff --git a/src/components/button/index.ts b/src/components/button/index.ts index 3a431140e38..a2eebfd7f09 100644 --- a/src/components/button/index.ts +++ b/src/components/button/index.ts @@ -5,6 +5,7 @@ export { ButtonIconSide, EuiButton, EuiButtonProps, + colorToClassNameMap, } from './button'; export { diff --git a/src/components/code/__snapshots__/code_block.test.tsx.snap b/src/components/code/__snapshots__/code_block.test.tsx.snap index 89f3a081743..8b2bf9a15f6 100644 --- a/src/components/code/__snapshots__/code_block.test.tsx.snap +++ b/src/components/code/__snapshots__/code_block.test.tsx.snap @@ -101,6 +101,7 @@ console.log(some); class="euiToolTipAnchor" >
    @@ -158,6 +154,7 @@ console.log(some); class="euiCodeBlock__controls" > diff --git a/src/components/code/_code_block.tsx b/src/components/code/_code_block.tsx index 5d2d96cf96f..14ecd0993dc 100644 --- a/src/components/code/_code_block.tsx +++ b/src/components/code/_code_block.tsx @@ -214,7 +214,7 @@ export class EuiCodeBlockImpl extends Component { onClick={copy} iconType="copy" color="text" - label={copyButton} + aria-label={copyButton} /> )} @@ -244,7 +244,7 @@ export class EuiCodeBlockImpl extends Component { onClick={this.toggleFullScreen} iconType={this.state.isFullScreen ? 'cross' : 'fullScreen'} color="text" - label={ + aria-label={ this.state.isFullScreen ? fullscreenCollapse : fullscreenExpand } /> diff --git a/src/components/color_picker/color_stops/color_stop_thumb.tsx b/src/components/color_picker/color_stops/color_stop_thumb.tsx index 832ade7ce50..4aa27edae0c 100644 --- a/src/components/color_picker/color_stops/color_stop_thumb.tsx +++ b/src/components/color_picker/color_stops/color_stop_thumb.tsx @@ -334,7 +334,7 @@ export const EuiColorStopThumb: FunctionComponent = ({ ); } diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap index 4c4447170ed..359844937b4 100644 --- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap +++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap @@ -84,6 +84,7 @@ exports[`EuiDataGrid pagination renders 1`] = ` role="group" > diff --git a/src/components/datagrid/column_sorting_draggable.tsx b/src/components/datagrid/column_sorting_draggable.tsx index efbf4d71fb5..8d92e24994d 100644 --- a/src/components/datagrid/column_sorting_draggable.tsx +++ b/src/components/datagrid/column_sorting_draggable.tsx @@ -96,7 +96,7 @@ export const EuiDataGridColumnSortingDraggable: FunctionComponent< color="text" size="s" className="euiDataGridColumnSorting__button" - label={`${removeSortLabel} ${id}`} + aria-label={`${removeSortLabel} ${id}`} iconType="cross" onClick={() => { const nextColumns = [...sorting.columns]; diff --git a/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap index de9978be98e..047a7510a83 100644 --- a/src/components/flyout/__snapshots__/flyout.test.tsx.snap +++ b/src/components/flyout/__snapshots__/flyout.test.tsx.snap @@ -23,6 +23,7 @@ exports[`EuiFlyout is rendered 1`] = ` tabindex="0" > @@ -70,6 +66,7 @@ exports[`EuiFlyout max width can be set to a custom number 1`] = ` tabindex="0" > @@ -117,6 +109,7 @@ exports[`EuiFlyout max width can be set to a custom value and measurement 1`] = tabindex="0" > @@ -163,6 +151,7 @@ exports[`EuiFlyout max width can be set to a default 1`] = ` tabindex="0" > @@ -210,6 +194,7 @@ exports[`EuiFlyout props accepts div props 1`] = ` tabindex="0" > @@ -285,6 +265,7 @@ exports[`EuiFlyout size l is rendered 1`] = ` tabindex="0" > @@ -331,6 +307,7 @@ exports[`EuiFlyout size m is rendered 1`] = ` tabindex="0" > @@ -377,6 +349,7 @@ exports[`EuiFlyout size s is rendered 1`] = ` tabindex="0" > diff --git a/src/components/flyout/flyout.test.tsx b/src/components/flyout/flyout.test.tsx index 44940c8148b..eb32c45275f 100644 --- a/src/components/flyout/flyout.test.tsx +++ b/src/components/flyout/flyout.test.tsx @@ -29,7 +29,7 @@ describe('EuiFlyout', () => { const component = render( {}} />); const label = component .find('[data-test-subj="euiFlyoutCloseButton"]') - .text(); + .prop('aria-label'); expect(label).toBe('Closes this dialog'); }); @@ -42,7 +42,7 @@ describe('EuiFlyout', () => { ); const label = component .find('[data-test-subj="euiFlyoutCloseButton"]') - .text(); + .prop('aria-label'); expect(label).toBe('Closes specific flyout'); }); }); diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx index 18f87c55861..20592ecab0b 100644 --- a/src/components/flyout/flyout.tsx +++ b/src/components/flyout/flyout.tsx @@ -99,11 +99,12 @@ export class EuiFlyout extends Component { let closeButton; if (onClose && !hideCloseButton) { closeButton = ( + // @ts-ignore Help? diff --git a/src/components/list_group/__snapshots__/list_group.test.tsx.snap b/src/components/list_group/__snapshots__/list_group.test.tsx.snap index b7073bce670..89a24f3907a 100644 --- a/src/components/list_group/__snapshots__/list_group.test.tsx.snap +++ b/src/components/list_group/__snapshots__/list_group.test.tsx.snap @@ -44,6 +44,7 @@ exports[`EuiListGroup is rendered with listItems 1`] = `
    • `; diff --git a/src/components/list_group/list_group.test.tsx b/src/components/list_group/list_group.test.tsx index 952425e632c..854a40201a9 100644 --- a/src/components/list_group/list_group.test.tsx +++ b/src/components/list_group/list_group.test.tsx @@ -15,7 +15,7 @@ const someListItems: EuiListGroupItemProps[] = [ extraAction: { iconType: 'bell', alwaysShow: true, - label: 'Notification', + 'aria-label': 'Notification', }, }, { diff --git a/src/components/list_group/list_group_item.test.tsx b/src/components/list_group/list_group_item.test.tsx index 1d433b1ede2..40a903f4b8f 100644 --- a/src/components/list_group/list_group_item.test.tsx +++ b/src/components/list_group/list_group_item.test.tsx @@ -98,7 +98,7 @@ describe('EuiListGroupItem', () => { extraAction={{ iconType: 'empty', alwaysShow: true, - label: 'label', + 'aria-label': 'label', }} /> ); diff --git a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap index 4e24b3f926f..1f40a73883a 100644 --- a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap +++ b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap @@ -22,6 +22,7 @@ Array [ tabindex="0" >
    = ({ onClick={onClose} className="euiModal__closeIcon" color="text" - label={closeModal} + aria-label={closeModal} /> )} diff --git a/src/components/pagination/__snapshots__/pagination.test.tsx.snap b/src/components/pagination/__snapshots__/pagination.test.tsx.snap index 29f0ab5815e..af20406cb58 100644 --- a/src/components/pagination/__snapshots__/pagination.test.tsx.snap +++ b/src/components/pagination/__snapshots__/pagination.test.tsx.snap @@ -8,6 +8,7 @@ exports[`EuiPagination is rendered 1`] = ` role="group" >
    `; diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx index d8dea01a223..1f31a8298cc 100644 --- a/src/components/pagination/pagination.tsx +++ b/src/components/pagination/pagination.tsx @@ -86,7 +86,7 @@ export const EuiPagination: FunctionComponent = ({ iconType="arrowLeft" disabled={activePage === 0} color="text" - label={previousPage} + aria-label={previousPage} data-test-subj="pagination-button-previous" /> )} @@ -165,7 +165,7 @@ export const EuiPagination: FunctionComponent = ({
    @@ -175,6 +167,7 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = ` role="group" > From 918bebd2f2f274ff35a7d7390dbccfc47f995956 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Wed, 1 Apr 2020 19:43:31 -0500 Subject: [PATCH 07/13] fixing more style things --- .../button/__snapshots__/button.test.tsx.snap | 9 +- src/components/button/_button.scss | 42 ++--- src/components/button/button.tsx | 8 +- .../__snapshots__/button_group.test.tsx.snap | 150 +++++++++--------- .../button/button_group/_button_group.scss | 45 ++++-- .../button/button_group/button_group.tsx | 13 +- 6 files changed, 128 insertions(+), 139 deletions(-) diff --git a/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap index 4df2e87c8ca..ab0a4a4f56e 100644 --- a/src/components/button/__snapshots__/button.test.tsx.snap +++ b/src/components/button/__snapshots__/button.test.tsx.snap @@ -165,7 +165,6 @@ exports[`EuiButton props iconSide left is rendered 1`] = ` class="euiButton__content" > @@ -162,7 +186,11 @@ exports[`EuiButtonGroup props buttonSize s is rendered 1`] = ` class="euiButton__content euiButtonGroup__label" for="button00" > - Option one + + Option one +
    - Option two + + Option two +
    - Option three + + Option three +
    @@ -223,7 +259,11 @@ exports[`EuiButtonGroup props color danger is rendered 1`] = ` class="euiButton__content euiButtonGroup__label" for="button00" > - Option one + + Option one +
    - Option two + + Option two +
    - Option three + + Option three +
    @@ -284,7 +332,11 @@ exports[`EuiButtonGroup props color ghost is rendered 1`] = ` class="euiButton__content euiButtonGroup__label" for="button00" > - Option one + + Option one +
    - Option two + + Option two +
    - Option three + + Option three +
    @@ -345,7 +405,11 @@ exports[`EuiButtonGroup props color primary is rendered 1`] = ` class="euiButton__content euiButtonGroup__label" for="button00" > - Option one + + Option one +
    - Option two + + Option two +
    - Option three + + Option three +
    @@ -406,7 +478,11 @@ exports[`EuiButtonGroup props color secondary is rendered 1`] = ` class="euiButton__content euiButtonGroup__label" for="button00" > - Option one + + Option one +
    - Option two + + Option two +
    - Option three + + Option three +
    @@ -467,7 +551,11 @@ exports[`EuiButtonGroup props color text is rendered 1`] = ` class="euiButton__content euiButtonGroup__label" for="button00" > - Option one + + Option one +
    - Option two + + Option two +
    - Option three + + Option three +
    @@ -528,7 +624,11 @@ exports[`EuiButtonGroup props color warning is rendered 1`] = ` class="euiButton__content euiButtonGroup__label" for="button00" > - Option one + + Option one +
    - Option two + + Option two +
    - Option three + + Option three +
    @@ -590,7 +698,11 @@ exports[`EuiButtonGroup props idSelected is rendered 1`] = ` class="euiButton__content euiButtonGroup__label" for="button00" > - Option one + + Option one +
    - Option two + + Option two +
    - Option three + + Option three +
    @@ -652,7 +772,11 @@ exports[`EuiButtonGroup props isDisabled is rendered 1`] = ` class="euiButton__content euiButtonGroup__label" for="button00" > - Option one + + Option one +
    - Option two + + Option two +
    - Option three + + Option three +
    @@ -715,7 +847,11 @@ exports[`EuiButtonGroup props isFullWidth is rendered 1`] = ` class="euiButton__content euiButtonGroup__label" for="button00" > - Option one + + Option one +
    - Option two + + Option two +
    - Option three + + Option three +
    @@ -765,7 +909,7 @@ exports[`EuiButtonGroup props isIconOnly is rendered 1`] = ` class="euiButtonGroup euiButtonGroup--text" >
    - Option one + + Option one +
    - Option two + + Option two +
    - Option three + + Option three +
    @@ -911,7 +1067,11 @@ exports[`EuiButtonGroup props name is rendered 1`] = ` class="euiButton__content euiButtonGroup__label" for="button00" > - Option one + + Option one +
    - Option two + + Option two +
    - Option three + + Option three +
    @@ -974,7 +1142,11 @@ exports[`EuiButtonGroup props options are rendered 1`] = ` class="euiButton__content euiButtonGroup__label" for="button00" > - Option one + + Option one +
    - Option two + + Option two +
    - Option three + + Option three +
    @@ -1037,7 +1217,11 @@ exports[`EuiButtonGroup props options can pass down data-test-subj 1`] = ` class="euiButton__content euiButtonGroup__label" for="button00" > - Option one + + Option one + diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss index f1b4ee316ad..93259bca539 100644 --- a/src/components/button/button_group/_button_group.scss +++ b/src/components/button/button_group/_button_group.scss @@ -4,9 +4,8 @@ border-radius: $euiBorderRadius; .euiButton { - min-width: auto; border-radius: 0; - border-right-width: 0; + margin-left: -1px; &:not(.euiButton--fill) { border-color: $euiButtonToggleBorderColor; @@ -28,6 +27,15 @@ } } + .euiButton--fill { + z-index: 0; + } + + .euiButtonGroup__button--iconOnly, + .euiButtonGroup__toggle--iconOnly { + min-width: auto; + } + .euiButton--fill + .euiButton { border-left-color: transparent; } @@ -44,7 +52,6 @@ } &:last-child { - border-right-width: 1px; border-top-right-radius: $euiBorderRadius; border-bottom-right-radius: $euiBorderRadius; } @@ -53,7 +60,18 @@ } @each $name, $color in $euiButtonTypes { - .euiButtonGroup--#{$name}:not(.euiButtonGroup--disabled):not(.euiButtonGroup--compressed) { + .euiButtonGroup--#{$name}:not(.euiButtonGroup--compressed) { + @if ($name == 'ghost') { + // Ghost is unique and ALWAYS sits against a dark background. + color: $color; + } @else if ($name == 'text') { + // The default color is lighter than the normal text color, make the it the text color + color: $euiTextColor; + } @else { + // Other colors need to check their contrast against the page background color. + color: makeHighContrastColor($color, $euiPageBackgroundColor); + } + $shadowColor: $euiShadowColor; @if ($name == 'ghost') { $shadowColor: $euiColorInk; @@ -63,6 +81,12 @@ } @include euiSlightShadow($shadowColor); + + .euiButtonGroup__input:focus + .euiButtonGroup__label { + background-color: darken($color, 5%); + border-color: darken($color, 5%); + text-decoration: underline; + } } } @@ -140,6 +164,7 @@ font-size: $euiFontSizeS; height: $euiFormControlCompressedHeight - 2px; box-shadow: none; + min-width: 0; // Offset the background color from the border by 2px // by clipping background to before the padding starts padding: 2px; diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx index fd73ae27909..a9191aef232 100644 --- a/src/components/button/button_group/button_group.tsx +++ b/src/components/button/button_group/button_group.tsx @@ -157,7 +157,7 @@ export const EuiButtonGroup: FunctionComponent = ({ color ? colorToClassNameMap[color] : null, { 'euiButton--disabled': isDisabled, - 'euiButtonGroup__toggle--isIconOnly': isIconOnly, + 'euiButtonGroup__toggle--iconOnly': isIconOnly, 'euiButton--fill': fill, 'euiButton--small': buttonSize === 'compressed' || buttonSize === 's', @@ -197,7 +197,7 @@ export const EuiButtonGroup: FunctionComponent = ({ ) : ( <> {iconSide === 'left' && icon} - {label} + {label} {iconSide === 'right' && icon} )} From b8a58ecc94974150719dfaaaf7ac9addadf47423 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Mon, 8 Jun 2020 17:45:26 -0400 Subject: [PATCH 10/13] merge conflict leftovers --- .../super_date_picker/quick_select_popover/quick_select.tsx | 4 ++-- src/components/nav_drawer/nav_drawer.test.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.tsx index 8b6981eaff7..a2cff006fc4 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.tsx +++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.tsx @@ -222,7 +222,7 @@ export class EuiQuickSelect extends Component< {(previousLabel: string) => ( @@ -237,7 +237,7 @@ export class EuiQuickSelect extends Component< {(nextLabel: string) => ( diff --git a/src/components/nav_drawer/nav_drawer.test.tsx b/src/components/nav_drawer/nav_drawer.test.tsx index af897240602..07abaa6b4a3 100644 --- a/src/components/nav_drawer/nav_drawer.test.tsx +++ b/src/components/nav_drawer/nav_drawer.test.tsx @@ -28,6 +28,7 @@ const extraAction: EuiListGroupItemProps['extraAction'] = { color: 'subdued', iconType: 'pin', iconSize: 's', + 'aria-label': 'foo', }; const topLinks: FlyoutMenuItem[] = [ From 24f1b61fc3e0e154bc2c5306e4eb3fc1c082a060 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Mon, 8 Jun 2020 18:43:42 -0400 Subject: [PATCH 11/13] incorporating feedback from @cchaos Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/button/button_example.js | 70 ++++++++---- src-docs/src/views/button/button_toggle.js | 53 +++++----- src-docs/src/views/button/props.tsx | 6 ++ src/components/button/_button.scss | 2 +- src/components/button/button.tsx | 2 +- .../__snapshots__/button_group.test.tsx.snap | 100 +++++++++--------- .../button/button_group/button_group.tsx | 87 +++++++++++---- src/components/button/button_group/index.ts | 2 +- .../button/button_icon/button_icon.tsx | 2 +- src/components/button/button_icon/index.ts | 1 - src/components/button/index.ts | 4 +- .../eui-amsterdam/overrides/_button.scss | 6 +- 12 files changed, 207 insertions(+), 128 deletions(-) create mode 100644 src-docs/src/views/button/props.tsx diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js index d3574ebe801..1fc826af88d 100644 --- a/src-docs/src/views/button/button_example.js +++ b/src-docs/src/views/button/button_example.js @@ -82,35 +82,48 @@ const buttonToggleSource = require('!!raw-loader!./button_toggle'); const buttonToggleHtml = renderToHtml(ButtonToggle); const buttonToggleSnippet = [ ` - {this.state.toggleOn ? onLabel : offLabel} + {toggleOn ? onLabel : offLabel} `, ` - {buttonText} + `, ]; import ButtonGroup from './button_group'; +import { EuiButtonGroupOption } from './props'; const buttonGroupSource = require('!!raw-loader!./button_group'); const buttonGroupHtml = renderToHtml(ButtonGroup); const buttonGroupSnippet = [ ` {}} />`, ` {}} type="multi" isIconOnly />`, @@ -309,11 +322,25 @@ export const ButtonExample = { } /> - +

    - Pass in aria-pressed if your button does not - change its label for each state. + You can create a toggle style button with any button type like the + standard EuiButton, EuiButtonEmpty + , or EuiButtonIcon. Use state management to handle + the visual differences for on and off. Though there are two + situations to consider.

    +
      +
    • + If your button changes its content, the text + and/or icon, then there is no additional accessibility concern. +
      • +
    • + If your button only changes the visual{' '} + appearance, you must add aria-pressed for the + “on” state. +
      • +
    ), demo: , @@ -334,10 +361,8 @@ export const ButtonExample = { text: (

    - EuiButtonGroups are handled similarly to the way - checkbox and radio groups are handled but made to look like buttons. - They group multiple EuiButtonToggles and utilize - the type="single" or{' '} + EuiButtonGroups utilize the{' '} + type="single" or{' '} "multi" prop to determine whether multiple or only single selections are allowed per group.

    @@ -355,8 +380,9 @@ export const ButtonExample = { title={ In order for groups to be properly read as groups with a title, - add the legend prop. This is only for - accessibility, however, so it will be visibly hidden. + the legend prop is required. + This is only for accessibility, however, so it will be visibly + hidden. } /> @@ -364,7 +390,7 @@ export const ButtonExample = { ), demo: , snippet: buttonGroupSnippet, - props: { EuiButtonGroup }, + props: { EuiButtonGroup, EuiButtonGroupOption }, }, { title: 'Ghost', diff --git a/src-docs/src/views/button/button_toggle.js b/src-docs/src/views/button/button_toggle.js index 825520daad1..3ea3aefacdb 100644 --- a/src-docs/src/views/button/button_toggle.js +++ b/src-docs/src/views/button/button_toggle.js @@ -11,56 +11,55 @@ export default () => { const [toggle0On, setToggle0On] = useState(false); const [toggle1On, setToggle1On] = useState(false); const [toggle2On, setToggle2On] = useState(true); - const [toggle3On, setToggle3On] = useState(true); + const [toggle3On, setToggle3On] = useState(false); return ( <> + +

    Changing content

    +     +   { setToggle0On(!toggle0On); }}> - Toggle Me - -   - { - setToggle1On(!toggle1On); - }}> - {toggle1On ? 'I am a primary toggle' : 'I am a filled toggle'} + {toggle0On ? 'I am a filled toggle' : 'I am a primary toggle'}   { - setToggle2On(!toggle2On); + setToggle1On(!toggle1On); }} /> + + +

    Changing visual appearance

    +     + + { + setToggle2On(!toggle2On); + }}> + Toggle me +   { setToggle3On(!toggle3On); }} /> - - -

    Disabled

    -     - - - Can't toggle this - -   - - Can't toggle this either - ); }; diff --git a/src-docs/src/views/button/props.tsx b/src-docs/src/views/button/props.tsx new file mode 100644 index 00000000000..e696e49f593 --- /dev/null +++ b/src-docs/src/views/button/props.tsx @@ -0,0 +1,6 @@ +import React, { FunctionComponent } from 'react'; +import { EuiButtonGroupOptionProps } from '../../../../src/components/button/button_group'; + +export const EuiButtonGroupOption: FunctionComponent< + EuiButtonGroupOptionProps +> = () =>
    ; diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index 0116e8d94ea..360a99193bd 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -116,7 +116,7 @@ } // Fix ghost/disabled look specifically -.euiButton--disabled.euiButton--ghost { +.euiButton.euiButton--disabled.euiButton--ghost { &, &:hover, &:focus { diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index 6d1e7da54c3..6a148fac7c1 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -54,7 +54,7 @@ export type ButtonColor = export type ButtonSize = 's' | 'm'; -export const colorToClassNameMap: { [color in ButtonColor]: string } = { +const colorToClassNameMap: { [color in ButtonColor]: string } = { primary: 'euiButton--primary', secondary: 'euiButton--secondary', warning: 'euiButton--warning', 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 f08b8d6d1f2..cc105f33d92 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 @@ -12,6 +12,7 @@ exports[`EuiButtonGroup is rendered 1`] = `
    `; @@ -29,7 +30,7 @@ exports[`EuiButtonGroup props buttonSize compressed is rendered 1`] = ` class="euiButtonGroup euiButtonGroup--text euiButtonGroup--compressed" >
    void; /** * Typical sizing is `s`. Medium `m` size should be reserved for major features. @@ -56,13 +76,40 @@ export interface EuiButtonGroupProps extends CommonProps { */ buttonSize?: GroupButtonSize; isDisabled?: boolean; + /** + * Expands the whole group to the full width of the container. + * Each button gets equal widths no matter the content + */ isFullWidth?: boolean; + /** + * Hides the label to only show the `iconType` provided by the `option` + */ isIconOnly?: boolean; + /** + * Styles the selected option to look selected (usually with `fill`) + */ idSelected?: string; + /** + * A hidden group title (required for accessibility) + */ legend: string; color?: ButtonColor; + /** + * The `name` attribute for radio inputs. Only necessary/used when `type="single"` + * TODO @myasonik enforce with TS + */ name?: string; + /** + * Determines how the selection of the group should be handled. + * With `'single'` only one option can be selected at a time (similar to radio group). + * With `'multi'` multiple options selected (similar to checkbox group). + */ type?: ToggleType; + /** + * A map of `id`s as keys with the selected boolean values. + * Only necessary/used when `type="single"` + * TODO @myasonik enforce with TS + */ idToSelectedMap?: EuiButtonGroupIdToSelectedMap; } @@ -83,9 +130,16 @@ export const EuiButtonGroup: FunctionComponent = ({ onChange, options = [], type = 'single', - 'data-test-subj': dataTestSubj, ...rest }) => { + // Compressed style can't support `ghost` color because it's more like a form field than a button + const badColorCombo = buttonSize === 'compressed' && color === 'ghost'; + if (badColorCombo) { + console.warn( + 'EuiButtonGroup of compressed size does not support the ghost color. It will render as text instead.' + ); + } + const classes = classNames( 'euiButtonGroup', `euiButtonGroup--${color}`, @@ -118,7 +172,7 @@ export const EuiButtonGroup: FunctionComponent = ({ className, iconType, iconSide, - ...rest + ...optionRest } = option; let isSelectedState; @@ -147,17 +201,16 @@ export const EuiButtonGroup: FunctionComponent = ({ onChange(id, value)} - data-test-subj={dataTestSubj} key={index} iconSide={iconSide} iconType={iconType} - {...rest}> + {...optionRest}> {isIconOnly ? ( {label} @@ -173,7 +226,6 @@ export const EuiButtonGroup: FunctionComponent = ({ 'euiButton', 'euiButton--no-hover', 'euiButtonGroup__toggle', - color ? colorToClassNameMap[color] : null, { 'euiButton--disabled': isDisabled, 'euiButtonGroup__toggle--iconOnly': isIconOnly, @@ -190,18 +242,17 @@ export const EuiButtonGroup: FunctionComponent = ({ const isActuallyDisabled = optionDisabled || isDisabled; return ( -
    +
    onChange(id, value)} checked={isSelectedState} - data-test-subj={dataTestSubj} disabled={isActuallyDisabled} value={value} type="radio" - {...rest} + {...optionRest} />