mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
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:
parent
5f913066a9
commit
1c42ee9720
21 changed files with 74 additions and 48 deletions
|
@ -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",
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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 ODC‑By license https://github.com/mattcg/language-subtag-registry
|
||||
'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
|
||||
};
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
.presFilterByType__panel {
|
||||
width: $euiSize * 18;
|
||||
min-width: $euiSizeXXL * 8;
|
||||
@include euiBreakpoint('l', 'xl') {
|
||||
width: $euiFormMaxWidth;
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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 () => {
|
||||
|
|
|
@ -27,6 +27,7 @@ const MyEuiFilterGroup = styled(EuiFilterGroup)`
|
|||
`;
|
||||
|
||||
const FilterAllButton = styled(EuiFilterButton)`
|
||||
&,
|
||||
& .euiFilterButton__textShift {
|
||||
min-width: 28px;
|
||||
}
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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']);
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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');
|
||||
});
|
||||
|
|
|
@ -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"
|
||||
>
|
||||
|
|
|
@ -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"
|
||||
>
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue