From 7e5cac93fc085ae2ed0308c575f73bacfb153daa Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 27 Oct 2023 11:15:13 -0700 Subject: [PATCH 1/9] Remove `label` element and radio input render --- .../button_display/_button_display.test.tsx | 4 +-- .../button/button_display/_button_display.tsx | 2 +- .../button/button_group/button_group.tsx | 1 - .../button_group/button_group_button.tsx | 30 ++----------------- 4 files changed, 5 insertions(+), 32 deletions(-) diff --git a/src/components/button/button_display/_button_display.test.tsx b/src/components/button/button_display/_button_display.test.tsx index 559982504a1..229b3ac1d96 100644 --- a/src/components/button/button_display/_button_display.test.tsx +++ b/src/components/button/button_display/_button_display.test.tsx @@ -55,7 +55,7 @@ describe('EuiButtonDisplay', () => { }); describe('element', () => { - const elements = ['a', 'button', 'span', 'label'] as const; + const elements = ['a', 'button', 'span'] as const; const getButtonElement = (container: HTMLElement) => container.firstChild!.nodeName.toLowerCase(); @@ -74,7 +74,7 @@ describe('EuiButtonDisplay', () => { it('always renders a `button` element if disabled', () => { const { container } = render( - + Content ); diff --git a/src/components/button/button_display/_button_display.tsx b/src/components/button/button_display/_button_display.tsx index 679bd04d118..8fee8d3b81e 100644 --- a/src/components/button/button_display/_button_display.tsx +++ b/src/components/button/button_display/_button_display.tsx @@ -43,7 +43,7 @@ export type EuiButtonDisplaySizes = (typeof SIZES)[number]; export interface EuiButtonDisplayCommonProps extends EuiButtonDisplayContentProps, CommonProps { - element?: 'a' | 'button' | 'span' | 'label'; + element?: 'a' | 'button' | 'span'; children?: ReactNode; size?: EuiButtonDisplaySizes; /** diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx index e30681e65cb..b5bf7175cbe 100644 --- a/src/components/button/button_group/button_group.tsx +++ b/src/components/button/button_group/button_group.tsx @@ -178,7 +178,6 @@ export const EuiButtonGroup: FunctionComponent = ({ name={nameIfSingle} isDisabled={isDisabled} {...(option as EuiButtonGroupOptionProps)} - element={typeIsSingle ? 'label' : 'button'} isSelected={ typeIsSingle ? option.id === idSelected diff --git a/src/components/button/button_group/button_group_button.tsx b/src/components/button/button_group/button_group_button.tsx index 7a45c02a282..a0a5372f817 100644 --- a/src/components/button/button_group/button_group_button.tsx +++ b/src/components/button/button_group/button_group_button.tsx @@ -22,10 +22,6 @@ import { } from './button_group_button.styles'; type Props = EuiButtonGroupOptionProps & { - /** - * Element to display based on single or multi - */ - element: 'button' | 'label'; /** * Styles the selected button to look selected (usually with `fill`) */ @@ -68,34 +64,14 @@ export const EuiButtonGroupButton: FunctionComponent = ({ size, value, color: _color = 'primary', - element: _element = 'button', type = 'button', ...rest }) => { - // Force element to be a button if disabled - const element = isDisabled ? 'button' : _element; - - let elementProps = {}; - let singleInput; - if (element === 'label') { - singleInput = ( - onChange(id, value)} - data-test-subj={id} - /> - ); - } else { - elementProps = { + const elementProps = { 'data-test-subj': id, isSelected, type, - onClick: () => onChange(id), + onClick: () => onChange(id), // TODO }; } @@ -148,7 +124,6 @@ export const EuiButtonGroupButton: FunctionComponent = ({ = ({ {...elementProps} {...rest} > - {singleInput} {label} ); From 2383b0bbb238f562ae480aa5508b2533e5a3367f Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 27 Oct 2023 11:24:25 -0700 Subject: [PATCH 2/9] Remove/deprecate `name` prop - topmost prop API will probably want a deprecation period rather than removing it wholesale --- .../button/button_group/button_group.test.tsx | 1 - src/components/button/button_group/button_group.tsx | 12 ++++++------ .../button/button_group/button_group_button.tsx | 9 --------- 3 files changed, 6 insertions(+), 16 deletions(-) diff --git a/src/components/button/button_group/button_group.test.tsx b/src/components/button/button_group/button_group.test.tsx index e296d122cc1..d5c4a5239ce 100644 --- a/src/components/button/button_group/button_group.test.tsx +++ b/src/components/button/button_group/button_group.test.tsx @@ -50,7 +50,6 @@ const requiredSingleProps: EuiButtonGroupProps = { legend: 'test', onChange: () => {}, options, - name: 'test', idSelected: '', }; diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx index b5bf7175cbe..a22f5ec4ae3 100644 --- a/src/components/button/button_group/button_group.tsx +++ b/src/components/button/button_group/button_group.tsx @@ -9,7 +9,7 @@ import classNames from 'classnames'; import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react'; -import { useEuiTheme, useGeneratedHtmlId } from '../../../services'; +import { useEuiTheme } from '../../../services'; import { EuiScreenReaderOnly } from '../../accessibility'; import { CommonProps } from '../../common'; @@ -85,8 +85,7 @@ export type EuiButtonGroupProps = CommonProps & { */ type?: 'single'; /** - * The `name` attribute for radio inputs; - * Defaults to a random string + * @deprecated No longer needed. You can safely remove this prop entirely */ name?: string; /** @@ -112,6 +111,9 @@ export type EuiButtonGroupProps = CommonProps & { */ onChange: (id: string) => void; idSelected?: never; + /** + * @deprecated + */ name?: never; } ); @@ -129,7 +131,7 @@ export const EuiButtonGroup: FunctionComponent = ({ isFullWidth = false, isIconOnly = false, legend, - name, + name, // Prevent prop from being spread onChange, options = [], type = 'single', @@ -157,7 +159,6 @@ export const EuiButtonGroup: FunctionComponent = ({ ); const typeIsSingle = type === 'single'; - const nameIfSingle = useGeneratedHtmlId({ conditionalId: name }); return (
= ({ return ( = ({ isIconOnly, isSelected = false, label, - name, onChange, size, value, From bbc5b0c7863a6c10ba9c517b0e3cd0381e443fb6 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 27 Oct 2023 11:28:10 -0700 Subject: [PATCH 3/9] Clean up `onChange` prop - by having it set as a parent conditional `onClick` and spread via `...rest` --- src/components/button/button_group/button_group.tsx | 6 +++++- src/components/button/button_group/button_group_button.tsx | 6 ++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx index a22f5ec4ae3..0c9cc5ab908 100644 --- a/src/components/button/button_group/button_group.tsx +++ b/src/components/button/button_group/button_group.tsx @@ -178,6 +178,11 @@ export const EuiButtonGroup: FunctionComponent = ({ key={index} isDisabled={isDisabled} {...(option as EuiButtonGroupOptionProps)} + onClick={ + typeIsSingle + ? () => onChange(option.id, option.value) + : () => onChange(option.id) + } isSelected={ typeIsSingle ? option.id === idSelected @@ -186,7 +191,6 @@ export const EuiButtonGroup: FunctionComponent = ({ color={color} size={buttonSize} isIconOnly={isIconOnly} - onChange={onChange} /> ); })} diff --git a/src/components/button/button_group/button_group_button.tsx b/src/components/button/button_group/button_group_button.tsx index 423741951d2..f2f9fdc32bd 100644 --- a/src/components/button/button_group/button_group_button.tsx +++ b/src/components/button/button_group/button_group_button.tsx @@ -7,7 +7,7 @@ */ import classNames from 'classnames'; -import React, { FunctionComponent } from 'react'; +import React, { FunctionComponent, MouseEventHandler } from 'react'; import { useEuiTheme } from '../../../services'; import { useEuiButtonColorCSS } from '../../../themes/amsterdam/global_styling/mixins/button'; @@ -41,7 +41,7 @@ type Props = EuiButtonGroupOptionProps & { /** * Inherit from EuiButtonGroup */ - onChange: EuiButtonGroupProps['onChange']; + onClick: MouseEventHandler; }; export const EuiButtonGroupButton: FunctionComponent = ({ @@ -51,7 +51,6 @@ export const EuiButtonGroupButton: FunctionComponent = ({ isIconOnly, isSelected = false, label, - onChange, size, value, color: _color = 'primary', @@ -62,7 +61,6 @@ export const EuiButtonGroupButton: FunctionComponent = ({ 'data-test-subj': id, isSelected, type, - onClick: () => onChange(id), // TODO }; } From add86590ca79182f0902620703e4a1303de95e3d Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 27 Oct 2023 11:29:25 -0700 Subject: [PATCH 4/9] Final props cleanup - remove `elementProps` entirely --- .../button/button_group/button_group_button.tsx | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/src/components/button/button_group/button_group_button.tsx b/src/components/button/button_group/button_group_button.tsx index f2f9fdc32bd..19d767eae92 100644 --- a/src/components/button/button_group/button_group_button.tsx +++ b/src/components/button/button_group/button_group_button.tsx @@ -51,19 +51,11 @@ export const EuiButtonGroupButton: FunctionComponent = ({ isIconOnly, isSelected = false, label, + value, // Prevent prop from being spread size, - value, color: _color = 'primary', - type = 'button', ...rest }) => { - const elementProps = { - 'data-test-subj': id, - isSelected, - type, - }; - } - const isCompressed = size === 'compressed'; const color = isDisabled ? 'disabled' : _color; const display = isSelected ? 'fill' : isCompressed ? 'empty' : 'base'; @@ -122,7 +114,8 @@ export const EuiButtonGroupButton: FunctionComponent = ({ 'data-text': innerText, }} title={innerText} - {...elementProps} + data-test-subj={id} + isSelected={isSelected} {...rest} > {label} From f97386a11d624cd247748e123bb65cdc9f2b2111 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 27 Oct 2023 11:57:08 -0700 Subject: [PATCH 5/9] Clean up now-unnecessary `label` CSS - while still preserving previous focus outline appearance --- .../button_group_button.styles.ts | 54 +++++-------------- 1 file changed, 14 insertions(+), 40 deletions(-) diff --git a/src/components/button/button_group/button_group_button.styles.ts b/src/components/button/button_group/button_group_button.styles.ts index 1d63aaac6d8..437ed66bdb9 100644 --- a/src/components/button/button_group/button_group_button.styles.ts +++ b/src/components/button/button_group/button_group_button.styles.ts @@ -139,55 +139,29 @@ export const euiButtonGroupButtonStyles = (euiThemeContext: UseEuiTheme) => { }; }; -/** - * Focus utilities - made complex by the two different button styles - * and the fact that `label`/`input` combos need :focus-within, - * but `button` does not - */ -const _outlineSelectors = (outlineCss: string) => { - return css` - &:is(button) { - &:focus-visible { - ${outlineCss} - } - } - - &:is(label) { - /* Firefox fallback for :has. Delete once FF supports :has */ - &:focus-within { - ${outlineCss} - } - - @supports selector(:has(*)) { - &:focus-within { - outline: none; - } - /* Once all evergreen browsers support :has, we can remove - @supports and the outline: none reset just use this selector */ - &:has(:focus-visible) { - ${outlineCss} - } - } - } - `; -}; - export const _compressedButtonFocusColor = ( euiThemeContext: UseEuiTheme, color: _EuiButtonColor | 'disabled' ) => { - const { euiTheme } = euiThemeContext; const { backgroundColor } = euiButtonFillColor(euiThemeContext, color); - return _outlineSelectors( - `outline: ${euiTheme.focus.width} solid ${backgroundColor};` - ); + return css` + &:focus-visible { + ${euiOutline(euiThemeContext, 'center', backgroundColor)} + + &:is(.euiButtonGroupButton-isSelected) { + outline-offset: 0; + } + } + `; }; export const _uncompressedButtonFocus = (euiThemeContext: UseEuiTheme) => { const { euiTheme } = euiThemeContext; - return _outlineSelectors( - euiOutline(euiThemeContext, 'inset', euiTheme.colors.fullShade) - ); + return css` + &:focus-visible { + ${euiOutline(euiThemeContext, 'inset', euiTheme.colors.fullShade)} + } + `; }; From 529ce7e6d5da7843210576fd19d5b82dd2a15aa3 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 27 Oct 2023 11:57:54 -0700 Subject: [PATCH 6/9] [misc] replace unnecessary `calc()` in center offset - with `mathWithUnits` --- .../mixins/__snapshots__/_states.test.ts.snap | 17 +++++++++++++++++ src/global_styling/mixins/_states.test.ts | 6 ++++++ src/global_styling/mixins/_states.ts | 3 ++- 3 files changed, 25 insertions(+), 1 deletion(-) diff --git a/src/global_styling/mixins/__snapshots__/_states.test.ts.snap b/src/global_styling/mixins/__snapshots__/_states.test.ts.snap index 80065bc3b6d..cf3a2c12098 100644 --- a/src/global_styling/mixins/__snapshots__/_states.test.ts.snap +++ b/src/global_styling/mixins/__snapshots__/_states.test.ts.snap @@ -34,6 +34,23 @@ exports[`useEuiFocusRing hook returns a string for each offset: 16px 1`] = ` " `; +exports[`useEuiFocusRing hook returns a string for each offset: center 1`] = ` +" + outline: 2px solid currentColor; + outline-offset: -1px; + + // 👀 Chrome respects :focus-visible and allows coloring the \`auto\` style + &:focus-visible { + outline-style: auto; + } + + // 🙅‍♀️ But Chrome also needs to have the outline forcefully removed from regular \`:focus\` state + &:not(:focus-visible) { + outline: none; + } + " +`; + exports[`useEuiFocusRing hook returns a string for each offset: inset 1`] = ` " outline: 2px solid currentColor; diff --git a/src/global_styling/mixins/_states.test.ts b/src/global_styling/mixins/_states.test.ts index c00026ca290..b40b4958cb0 100644 --- a/src/global_styling/mixins/_states.test.ts +++ b/src/global_styling/mixins/_states.test.ts @@ -23,6 +23,12 @@ describe('useEuiFocusRing hook returns a string', () => { ).toMatchSnapshot(); }); + it('center', () => { + expect( + renderHook(() => useEuiFocusRing('center')).result.current + ).toMatchSnapshot(); + }); + it('16px', () => { expect( renderHook(() => useEuiFocusRing('16px')).result.current diff --git a/src/global_styling/mixins/_states.ts b/src/global_styling/mixins/_states.ts index 846a5c1f796..9f70306420d 100644 --- a/src/global_styling/mixins/_states.ts +++ b/src/global_styling/mixins/_states.ts @@ -8,6 +8,7 @@ import { CSSProperties } from 'react'; import { useEuiTheme, UseEuiTheme } from '../../services'; +import { mathWithUnits } from '../functions'; export type _EuiFocusRingOffset = | 'inset' @@ -39,7 +40,7 @@ export const euiOutline = ( } else if (offset === 'outset') { outlineOffset = `${outlineWidth}`; } else if (offset === 'center') { - outlineOffset = `calc(${outlineWidth} / -2);`; + outlineOffset = mathWithUnits(outlineWidth, (x) => x / -2); } // This is a separate function from `euiFocusRing` because some EUI components From 2a4394903a22b988eb6574667eac2274d0d4bea3 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 27 Oct 2023 11:58:03 -0700 Subject: [PATCH 7/9] Update snapshots --- .../__snapshots__/button_group.test.tsx.snap | 326 +++++------------- 1 file changed, 91 insertions(+), 235 deletions(-) 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 9ec988b6cbf..3b3e3aab7b6 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 @@ -92,8 +92,9 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
- -
@@ -442,7 +429,8 @@ exports[`useDataGridColumnSorting columnSorting [React 17] renders a toolbar but
- -
@@ -732,7 +706,8 @@ exports[`useDataGridColumnSorting columnSorting [React 18] renders a toolbar but
- -
diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting_draggable.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting_draggable.test.tsx.snap index a9945b92ae2..23050b9a8fa 100644 --- a/src/components/datagrid/controls/__snapshots__/column_sorting_draggable.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_sorting_draggable.test.tsx.snap @@ -87,7 +87,8 @@ exports[`EuiDataGridColumnSortingDraggable [React 16] renders an EuiDraggable co
- -
@@ -246,7 +233,8 @@ exports[`EuiDataGridColumnSortingDraggable [React 17] renders an EuiDraggable co
- -
@@ -405,7 +379,8 @@ exports[`EuiDataGridColumnSortingDraggable [React 18] renders an EuiDraggable co
- -
diff --git a/src/components/datagrid/controls/column_sorting_draggable.test.tsx b/src/components/datagrid/controls/column_sorting_draggable.test.tsx index 32bc2378214..0f275b4a79c 100644 --- a/src/components/datagrid/controls/column_sorting_draggable.test.tsx +++ b/src/components/datagrid/controls/column_sorting_draggable.test.tsx @@ -83,7 +83,9 @@ describe('EuiDataGridColumnSortingDraggable', () => { ); - fireEvent.click(getByTestSubject('columnADesc')); + fireEvent.click( + getByTestSubject('euiDataGridColumnSorting-sortColumn-columnA-desc') + ); expect(onSort).toHaveBeenCalledWith([{ id: 'columnA', direction: 'desc' }]); }); diff --git a/src/components/datagrid/controls/display_selector.test.tsx b/src/components/datagrid/controls/display_selector.test.tsx index 3fd034d88bc..6699a50d09b 100644 --- a/src/components/datagrid/controls/display_selector.test.tsx +++ b/src/components/datagrid/controls/display_selector.test.tsx @@ -77,12 +77,11 @@ describe('useDataGridDisplaySelector', () => { const component = mount(); openPopover(component); - // Click density 'buttons' (actually hidden radios) - component.find('[data-test-subj="expanded"]').simulate('change'); + component.find('button[data-test-subj="expanded"]').simulate('click'); expect(getSelection(component)).toEqual('expanded'); - component.find('[data-test-subj="normal"]').simulate('change'); + component.find('button[data-test-subj="normal"]').simulate('click'); expect(getSelection(component)).toEqual('normal'); - component.find('[data-test-subj="compact"]').simulate('change'); + component.find('button[data-test-subj="compact"]').simulate('click'); expect(getSelection(component)).toEqual('compact'); }); @@ -95,7 +94,7 @@ describe('useDataGridDisplaySelector', () => { ); openPopover(component); - component.find('[data-test-subj="expanded"]').simulate('change'); + component.find('button[data-test-subj="expanded"]').simulate('click'); expect(onDensityChange).toHaveBeenCalledWith({ stripes: true, @@ -168,7 +167,7 @@ describe('useDataGridDisplaySelector', () => { openPopover(component); expect(getSelection(component)).toEqual('expanded'); - component.find('[data-test-subj="compact"]').simulate('change'); + component.find('button[data-test-subj="compact"]').simulate('click'); expect(getSelection(component)).toEqual('compact'); component @@ -189,7 +188,7 @@ describe('useDataGridDisplaySelector', () => { openPopover(component); expect(getSelection(component)).toEqual('undefined'); - component.find('[data-test-subj="auto"]').simulate('change'); + component.find('button[data-test-subj="auto"]').simulate('click'); expect(getSelection(component)).toEqual('auto'); }); @@ -202,7 +201,7 @@ describe('useDataGridDisplaySelector', () => { ); openPopover(component); - component.find('[data-test-subj="auto"]').simulate('change'); + component.find('button[data-test-subj="auto"]').simulate('click'); expect(onRowHeightChange).toHaveBeenCalledWith({ rowHeights: {}, @@ -287,7 +286,7 @@ describe('useDataGridDisplaySelector', () => { openPopover(component); expect(getSelection(component)).toEqual('undefined'); - component.find('[data-test-subj="auto"]').simulate('change'); + component.find('button[data-test-subj="auto"]').simulate('click'); expect(getSelection(component)).toEqual('auto'); component @@ -322,7 +321,9 @@ describe('useDataGridDisplaySelector', () => { component.find('[data-test-subj="lineCountNumber"]').exists() ).toBe(false); - component.find('[data-test-subj="lineCount"]').simulate('change'); + component + .find('button[data-test-subj="lineCount"]') + .simulate('click'); expect(getSelection(component)).toEqual('lineCount'); expect( @@ -344,7 +345,9 @@ describe('useDataGridDisplaySelector', () => { it('defaults to a lineCount of 2 when no developer settings have been passed', () => { const component = mount(); openPopover(component); - component.find('[data-test-subj="lineCount"]').simulate('change'); + component + .find('button[data-test-subj="lineCount"]') + .simulate('click'); expect(getLineCountNumber(component)).toEqual(2); }); @@ -408,8 +411,8 @@ describe('useDataGridDisplaySelector', () => { component.find('[data-test-subj="resetDisplaySelector"]').exists() ).toBe(false); - component.find('[data-test-subj="expanded"]').simulate('change'); - component.find('[data-test-subj="auto"]').simulate('change'); + component.find('button[data-test-subj="expanded"]').simulate('click'); + component.find('button[data-test-subj="auto"]').simulate('click'); expect( component.find('[data-test-subj="resetDisplaySelector"]').exists() ).toBe(true); @@ -444,8 +447,8 @@ describe('useDataGridDisplaySelector', () => { component.find('[data-test-subj="resetDisplaySelector"]').exists() ).toBe(false); - component.find('[data-test-subj="expanded"]').simulate('change'); - component.find('[data-test-subj="auto"]').simulate('change'); + component.find('button[data-test-subj="expanded"]').simulate('click'); + component.find('button[data-test-subj="auto"]').simulate('click'); expect( component.find('[data-test-subj="resetDisplaySelector"]').exists() ).toBe(false); diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx index c6c48e0fa77..1996aa7edbc 100644 --- a/src/components/datagrid/data_grid.test.tsx +++ b/src/components/datagrid/data_grid.test.tsx @@ -188,7 +188,7 @@ function getColumnSortDirection( expect(columnSorter.length).toBe(1); const activeSort = columnSorter.find( - 'label[className*="euiButtonGroupButton-isSelected"]' + 'button[className*="euiButtonGroupButton-isSelected"]' ); const sortDirection = ( @@ -276,10 +276,10 @@ function sortByColumn( if (currentSortDirection !== direction) { const sortButton = columnSorter.find( - `label[data-test-subj="euiDataGridColumnSorting-sortColumn-${columnId}-${direction}"]` + `button[data-test-subj="euiDataGridColumnSorting-sortColumn-${columnId}-${direction}"]` ); expect(sortButton.length).toBe(1); - sortButton.find('input').simulate('change', [undefined, direction]); + sortButton.simulate('click'); } closeColumnSorter(datagrid); From 66650a77f41d5572d32167651b0e8ae37218f536 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 27 Oct 2023 12:21:46 -0700 Subject: [PATCH 9/9] changelog --- upcoming_changelogs/7325.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 upcoming_changelogs/7325.md diff --git a/upcoming_changelogs/7325.md b/upcoming_changelogs/7325.md new file mode 100644 index 00000000000..ec52108950d --- /dev/null +++ b/upcoming_changelogs/7325.md @@ -0,0 +1,7 @@ +**Accessibility** + +- Updated `type="single"` `EuiButtonGroup`s to render standard buttons instead of radio buttons under the hood, per recent a11y recommendations + +**Deprecations** + +- Deprecated `EuiButtonGroup`'s `name` prop. This can safely be removed.