Upgrade @elastic/eui to 85.0.1 (#162209)

## Summary

`eui@84.0.0`  `eui@85.0.1`

## [`85.0.1`](https://github.com/elastic/eui/tree/v85.0.1)

**Bug fixes**

- Fixed `EuiFilterGroup`'s responsive styles
([#6983](https://github.com/elastic/eui/pull/6983))

## [`85.0.0`](https://github.com/elastic/eui/tree/v85.0.0)

- Updated `EuiThemeProvider` to set an Emotion theme context that
returns the values of `useEuiTheme()`
([#6913](https://github.com/elastic/eui/pull/6913))
- Added `size` prop to `EuiStepsHorizontal`, defaulting to the previous
size of `m` ([#6928](https://github.com/elastic/eui/pull/6928))
- Added new `s` sizing to `EuiStepsHorizontal`
([#6928](https://github.com/elastic/eui/pull/6928))
- Added `at` and `key` icon glyphs.
([#6934](https://github.com/elastic/eui/pull/6934))
- Added a new `cloneElementWithCss` Emotion utility
([#6939](https://github.com/elastic/eui/pull/6939))
- Updated `EuiPopover` to allow consumer control of all `focusTrapProps`
([#6955](https://github.com/elastic/eui/pull/6955))

**Bug fixes**

- Fixed `EuiDataGrid` height calculation bug when browser zoom levels
are not 100% ([#6895](https://github.com/elastic/eui/pull/6895))
- Fixed `EuiTab` not correctly passing selection color state to
`prepend` and `append` children
([#6938](https://github.com/elastic/eui/pull/6938))
- Fixed `EuiInputPopover` to allow consumer control of its focus trap
via `focusTrapProps` ([#6955](https://github.com/elastic/eui/pull/6955))

**Breaking changes**

- `EuiProvider` will no longer render multiple or duplicate nested
instances of itself. If a nested `EuiProvider` is detected, that
instance will return early without further processing, and will warn if
configured to do so via `setEuiDevProviderWarning`. For nested theming,
use `EuiThemeProvider` instead.
([#6949](https://github.com/elastic/eui/pull/6949))
- Removed `onTrapDeactivation` prop from `EuiPopover`. Use
`focusTrapProps.onDeactivation` instead
([#6955](https://github.com/elastic/eui/pull/6955))

**CSS-in-JS conversions**

- Converted `EuiFilterGroup` and `EuiFilterButton` to Emotion; Removed
styles attached to `.euiFilterGroup__popoverPanel`
([#6957](https://github.com/elastic/eui/pull/6957))

---------

Co-authored-by: Cee Chen <constance.chen@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Tomasz Kajtoch 2023-07-27 20:47:18 +02:00 committed by GitHub
parent 5f913066a9
commit 1c42ee9720
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 74 additions and 48 deletions

View file

@ -98,7 +98,7 @@
"@elastic/datemath": "5.0.3",
"@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.8.0-canary.2",
"@elastic/ems-client": "8.4.0",
"@elastic/eui": "84.0.0",
"@elastic/eui": "85.0.1",
"@elastic/filesaver": "1.1.2",
"@elastic/node-crypto": "1.2.1",
"@elastic/numeral": "^2.5.1",

View file

@ -160,7 +160,7 @@ export function TableSortSelect({ tableSort, hasUpdatedAtMetadata, onChange }: P
closePopover={closePopover}
panelPaddingSize="none"
anchorPosition="downCenter"
panelClassName="euiFilterGroup__popoverPanel"
panelProps={{ css: { width: euiTheme.base * 18 } }}
>
<>
<EuiText css={panelHeaderCSS}>{i18nText.headerSort}</EuiText>

View file

@ -116,7 +116,7 @@ export const TagFilterPanel: FC<Props> = ({
closePopover={closePopover}
panelPaddingSize="none"
anchorPosition="downCenter"
panelClassName="euiFilterGroup__popoverPanel"
panelProps={{ css: { width: euiTheme.base * 18 } }}
panelStyle={isInUse ? { transition: 'none' } : undefined}
>
<EuiPopoverTitle paddingSize="m" css={popoverTitleCSS}>

View file

@ -47,7 +47,8 @@ const popoverTitleStyle = css`
padding: ${EQUAL_HEIGHT_OFFSET}px 0;
`;
const filterButtonStyle = css`
.euiFilterButton__textShift {
&,
& .euiFilterButton__textShift {
min-width: 0;
line-height: 1;
}
@ -105,7 +106,12 @@ export function FieldTypeFilter<T extends FieldListItem = DataViewField>({
const itemStyle = useMemo(
() => css`
font-size: ${euiTheme.size.m};
padding: ${euiTheme.size.s} ${euiTheme.size.m};
// Specificity needed to override Sass styles
// EUI TODO: Remove this selector once EuiContextMenu has been converted to Emotion
&.euiContextMenuItem {
padding: ${euiTheme.size.s} ${euiTheme.size.m};
}
& + & {
border-top: 1px solid ${euiTheme.colors.lightestShade};
@ -149,7 +155,7 @@ export function FieldTypeFilter<T extends FieldListItem = DataViewField>({
return (
<EuiPopover
id="unifiedFieldTypeFilter"
panelClassName="euiFilterGroup__popoverPanel"
panelProps={{ css: { width: euiTheme.base * 18 } }}
panelPaddingSize="none"
anchorPosition="rightUp"
display="block"

View file

@ -85,7 +85,7 @@ export const LICENSE_OVERRIDES = {
'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
'@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
'@elastic/ems-client@8.4.0': ['Elastic License 2.0'],
'@elastic/eui@84.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
'@elastic/eui@85.0.1': ['SSPL-1.0 OR Elastic License 2.0'],
'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODCBy license https://github.com/mattcg/language-subtag-registry
'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
};

View file

@ -1,4 +1,5 @@
.presFilterByType__panel {
width: $euiSize * 18;
min-width: $euiSizeXXL * 8;
@include euiBreakpoint('l', 'xl') {
width: $euiFormMaxWidth;

View file

@ -66,7 +66,7 @@ export function FieldTypeFilter({
<EuiOutsideClickDetector onOutsideClick={() => {}} isDisabled={!isPopoverOpen}>
<EuiFilterGroup fullWidth>
<EuiPopover
panelClassName="euiFilterGroup__popoverPanel presFilterByType__panel"
panelClassName="presFilterByType__panel"
panelPaddingSize="none"
display="block"
isOpen={isPopoverOpen}

View file

@ -679,8 +679,8 @@ describe('SavedObjectsFinder', () => {
wrapper.instance().componentDidMount!();
await nextTick();
expect(wrapper.find('button.euiFilterButton')).toHaveLength(2);
expect(wrapper.find('button.euiFilterButton [data-text="Types"]')).toHaveLength(1);
expect(wrapper.find('button.euiFilterButton [data-text="Tags"]')).toHaveLength(1);
expect(wrapper.find('button.euiFilterButton span[data-text="Types"]')).toHaveLength(1);
expect(wrapper.find('button.euiFilterButton span[data-text="Tags"]')).toHaveLength(1);
});
it('should not render filter buttons if disabled', async () => {

View file

@ -27,6 +27,7 @@ const MyEuiFilterGroup = styled(EuiFilterGroup)`
`;
const FilterAllButton = styled(EuiFilterButton)`
&,
& .euiFilterButton__textShift {
min-width: 28px;
}

View file

@ -38,7 +38,7 @@ describe('GroupsFilterPopover', () => {
/>
);
wrapper.find('[data-test-subj="groups-filter-popover-button"]').first().simulate('click');
wrapper.find('button[data-test-subj="groups-filter-popover-button"]').first().simulate('click');
wrapper.update();
wrapper.find('EuiFilterSelectItem').first().simulate('click');

View file

@ -25,7 +25,10 @@ describe('JobsTableFilters', () => {
<JobsTableFiltersComponent securityJobs={securityJobs} onFilterChanged={onFilterChanged} />
);
wrapper.find('[data-test-subj="show-elastic-jobs-filter-button"]').first().simulate('click');
wrapper
.find('button[data-test-subj="show-elastic-jobs-filter-button"]')
.first()
.simulate('click');
wrapper.update();
expect(
@ -42,7 +45,10 @@ describe('JobsTableFilters', () => {
<JobsTableFiltersComponent securityJobs={securityJobs} onFilterChanged={onFilterChanged} />
);
wrapper.find('[data-test-subj="show-custom-jobs-filter-button"]').first().simulate('click');
wrapper
.find('button[data-test-subj="show-custom-jobs-filter-button"]')
.first()
.simulate('click');
wrapper.update();
expect(
@ -59,10 +65,16 @@ describe('JobsTableFilters', () => {
<JobsTableFiltersComponent securityJobs={securityJobs} onFilterChanged={onFilterChanged} />
);
wrapper.find('[data-test-subj="show-custom-jobs-filter-button"]').first().simulate('click');
wrapper
.find('button[data-test-subj="show-custom-jobs-filter-button"]')
.first()
.simulate('click');
wrapper.update();
wrapper.find('[data-test-subj="show-elastic-jobs-filter-button"]').first().simulate('click');
wrapper
.find('button[data-test-subj="show-elastic-jobs-filter-button"]')
.first()
.simulate('click');
wrapper.update();
expect(
@ -85,10 +97,16 @@ describe('JobsTableFilters', () => {
<JobsTableFiltersComponent securityJobs={securityJobs} onFilterChanged={onFilterChanged} />
);
wrapper.find('[data-test-subj="show-custom-jobs-filter-button"]').first().simulate('click');
wrapper
.find('button[data-test-subj="show-custom-jobs-filter-button"]')
.first()
.simulate('click');
wrapper.update();
wrapper.find('[data-test-subj="show-custom-jobs-filter-button"]').first().simulate('click');
wrapper
.find('button[data-test-subj="show-custom-jobs-filter-button"]')
.first()
.simulate('click');
wrapper.update();
expect(

View file

@ -44,7 +44,7 @@ describe('Select Flow Direction', () => {
);
wrapper
.find(`[data-test-subj="${FlowDirection.biDirectional}"]`)
.find(`button[data-test-subj="${FlowDirection.biDirectional}"]`)
.first()
.simulate('click', event);
wrapper.update();

View file

@ -472,7 +472,7 @@ describe('StatefulOpenTimeline', () => {
false
);
wrapper.find('[data-test-subj="only-favorites-toggle"]').first().simulate('click');
wrapper.find('button[data-test-subj="only-favorites-toggle"]').first().simulate('click');
expect(wrapper.find('[data-test-subj="open-timeline"]').last().prop('onlyFavorites')).toEqual(
true

View file

@ -77,7 +77,7 @@ describe('SearchRow', () => {
</ThemeProvider>
);
wrapper.find('[data-test-subj="only-favorites-toggle"]').first().simulate('click');
wrapper.find('button[data-test-subj="only-favorites-toggle"]').first().simulate('click');
expect(onToggleOnlyFavorites).toHaveBeenCalled();
});

View file

@ -42,7 +42,7 @@ describe('event_log_list_status_filter', () => {
<EventLogListStatusFilter selectedOptions={[]} onChange={onChangeMock} />
);
wrapper.find(EuiFilterButton).simulate('click');
wrapper.find(EuiFilterButton).find('button').simulate('click');
const statusItems = wrapper.find(EuiFilterSelectItem);
expect(statusItems.length).toEqual(4);

View file

@ -35,7 +35,7 @@ describe('RuleStatusFilter', () => {
expect(wrapper.find('[data-test-subj="ruleStateFilterSelect"]').exists()).toBeFalsy();
wrapper.find(EuiFilterButton).simulate('click');
wrapper.find(EuiFilterButton).find('button').simulate('click');
const statusItems = wrapper.find(EuiSelectableListItem);
expect(statusItems.length).toEqual(3);
@ -46,7 +46,7 @@ describe('RuleStatusFilter', () => {
<RuleStatusFilter selectedStatuses={[]} onChange={onChangeMock} />
);
wrapper.find(EuiFilterButton).simulate('click');
wrapper.find(EuiFilterButton).find('button').simulate('click');
wrapper.find(EuiSelectableListItem).at(0).simulate('click');
expect(onChangeMock).toHaveBeenCalledWith(['enabled']);

View file

@ -56,7 +56,7 @@ const createActions = (testBed: TestBed) => {
// EUI doesn't support data-test-subj's on the filter buttons, so we must access via CSS selector
find('searchBarContainer')
.find('.euiPopover')
.find('.euiFilterButton')
.find('button.euiFilterButton')
.at(index)
.simulate('click');
});
@ -75,7 +75,7 @@ const createActions = (testBed: TestBed) => {
clickCriticalFilterButton: async () => {
await act(async () => {
// EUI doesn't support data-test-subj's on the filter buttons, so we must access via CSS selector
find('searchBarContainer').find('.euiFilterButton').at(0).simulate('click');
find('searchBarContainer').find('button.euiFilterButton').at(0).simulate('click');
});
component.update();

View file

@ -64,7 +64,7 @@ const createActions = (testBed: TestBed) => {
find('kibanaDeprecations')
.find('.euiSearchBar__filtersHolder')
.find('.euiPopover')
.find('.euiFilterButton')
.find('button.euiFilterButton')
.at(0)
.simulate('click');
});
@ -77,7 +77,7 @@ const createActions = (testBed: TestBed) => {
// EUI doesn't support data-test-subj's on the filter buttons, so we must access via CSS selector
find('kibanaDeprecations')
.find('.euiSearchBar__filtersHolder')
.find('.euiFilterButton')
.find('button.euiFilterButton')
.at(0)
.simulate('click');
});

View file

@ -2,18 +2,18 @@
exports[`FilterStatusButton renders without errors for valid props 1`] = `
<button
class="euiButtonEmpty euiFilterButton euiFilterButton-hasActiveFilters euiFilterButton--withNext emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text"
class="euiButtonEmpty euiFilterButton euiFilterButton-hasActiveFilters emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-withNext-hasActiveFilters"
data-test-subj="foo"
type="button"
>
<span
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
>
<span
class="eui-textTruncate euiButtonEmpty__text"
class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
>
<span
class="euiFilterButton__textShift"
class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
data-text="Up"
title="Up"
>

View file

@ -2,21 +2,21 @@
exports[`StatusFilterComponent renders without errors for valid props 1`] = `
<div
class="euiFilterGroup"
class="euiFilterGroup emotion-euiFilterGroup-uncompressed"
>
<button
class="euiButtonEmpty euiFilterButton euiFilterButton-hasActiveFilters euiFilterButton--withNext emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text"
class="euiButtonEmpty euiFilterButton euiFilterButton-hasActiveFilters emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-withNext-hasActiveFilters"
data-test-subj="xpack.synthetics.filterBar.filterStatusAll"
type="button"
>
<span
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
>
<span
class="eui-textTruncate euiButtonEmpty__text"
class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
>
<span
class="euiFilterButton__textShift"
class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
data-text="All"
title="All"
>
@ -26,18 +26,18 @@ exports[`StatusFilterComponent renders without errors for valid props 1`] = `
</span>
</button>
<button
class="euiButtonEmpty euiFilterButton euiFilterButton--withNext emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text"
class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-withNext"
data-test-subj="xpack.synthetics.filterBar.filterStatusUp"
type="button"
>
<span
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
>
<span
class="eui-textTruncate euiButtonEmpty__text"
class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
>
<span
class="euiFilterButton__textShift"
class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
data-text="Up"
title="Up"
>
@ -47,18 +47,18 @@ exports[`StatusFilterComponent renders without errors for valid props 1`] = `
</span>
</button>
<button
class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text"
class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton"
data-test-subj="xpack.synthetics.filterBar.filterStatusDown"
type="button"
>
<span
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
>
<span
class="eui-textTruncate euiButtonEmpty__text"
class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
>
<span
class="euiFilterButton__textShift"
class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
data-text="Down"
title="Down"
>

View file

@ -1552,10 +1552,10 @@
resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
"@elastic/eui@84.0.0":
version "84.0.0"
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-84.0.0.tgz#0d37da1fe3f2f9af54b62e127c9682d381111ba6"
integrity sha512-hgDWyXwlhpbNzQgIvGLppqSRMEVt2zMlXIxMzvlV6PYPJUh1K9f5pOyXtNyouFgYZG2bkltvG3cUrMLeBbgUkg==
"@elastic/eui@85.0.1":
version "85.0.1"
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-85.0.1.tgz#835b77f20670918d0f30ccfa47f0f94cb1fdc9e8"
integrity sha512-OZ8XClOdiRTyhAcipaw3wGgA8HogNqNESJZ8jqUTGbVxN+hsLjAA64rKcqkTndid+7mbxV3+UePieRVnOkzMEg==
dependencies:
"@types/chroma-js" "^2.0.0"
"@types/lodash" "^4.14.194"