From 7aa7ea505d8d2d0fa7c3ae8a34d1ca11ef62fe43 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Mon, 30 Mar 2020 19:30:33 -0500 Subject: [PATCH] undoing euiButtonIcon change and fixing euiButtonGroup styling --- .../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 +- 32 files changed, 577 insertions(+), 721 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 9b403d682b88..3268b0b4941a 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 2ec07540c8ca..b4c335cda111 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 e409c27ad8b8..626acbbb17a9 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 18f827744bed..7586465172c2 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 da954b11ac66..8a6e3d5b2c98 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 aca785d65298..88740f456a4a 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 3a431140e38a..a2eebfd7f093 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 89f3a081743c..8b2bf9a15f60 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 5d2d96cf96f3..14ecd0993dc7 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 832ade7ce50c..4aa27edae0c2 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 4c4447170ed0..359844937b4e 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 efbf4d71fb5e..8d92e24994d5 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 de9978be98ec..047a7510a836 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 44940c8148ba..eb32c45275f1 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 18f87c558612..20592ecab0b8 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 b7073bce670f..89a24f3907a6 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 952425e632cb..854a40201a94 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 1d433b1ede25..40a903f4b8f7 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 4e24b3f926fd..1f40a73883a1 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 29f0ab5815e3..af20406cb58d 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 d8dea01a2231..1f31a8298ccb 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" >