diff --git a/changelogs/upcoming/7490.md b/changelogs/upcoming/7490.md new file mode 100644 index 00000000000..8ab119ee048 --- /dev/null +++ b/changelogs/upcoming/7490.md @@ -0,0 +1,3 @@ +**CSS-in-JS conversions** + +- Converted `EuiSearchBar` to Emotion diff --git a/src/components/index.scss b/src/components/index.scss index 0cba396fc05..aa8c2e35862 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -9,6 +9,5 @@ @import 'markdown_editor/index'; @import 'tree_view/index'; @import 'side_nav/index'; -@import 'search_bar/index'; @import 'selectable/index'; @import 'table/index'; diff --git a/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap b/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap index 98f6fb63890..2b176ab4d9e 100644 --- a/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap +++ b/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap @@ -5,7 +5,7 @@ exports[`SearchBar render - box 1`] = ` class="euiFlexGroup emotion-euiFlexGroup-responsive-wrap-m-flexStart-center-row" >
{ + const { maxWidth } = euiFormVariables(euiThemeContext); + return css` + ${logicalCSS( + 'min-width', + mathWithUnits(maxWidth, (x) => x / 2) + )} + `; +}; + +export const euiSearchBar__filtersHolder = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + return css` + ${euiBreakpoint(euiThemeContext, ['m', 'l', 'xl'])} { + /* Helps with flex-wrapping */ + ${logicalCSS('max-width', `calc(100% - ${euiTheme.size.base})`)} + } + `; +}; diff --git a/src/components/search_bar/search_bar.test.tsx b/src/components/search_bar/search_bar.test.tsx index 1b5953b9545..77dc9a151d4 100644 --- a/src/components/search_bar/search_bar.test.tsx +++ b/src/components/search_bar/search_bar.test.tsx @@ -7,8 +7,7 @@ */ import React, { useState } from 'react'; -import { act } from '@testing-library/react'; -import { mount } from 'enzyme'; +import { fireEvent, act } from '@testing-library/react'; import { render } from '../../test/rtl'; import { requiredProps } from '../../test'; @@ -92,7 +91,7 @@ describe('SearchBar', () => { test('calls onChange callback when the query is modified', () => { const onChange = jest.fn(); - const component = mount( + const { getByTestSubject } = render( { /> ); - component.find('input[data-test-subj="searchbar"]').simulate('keyup', { + fireEvent.keyUp(getByTestSubject('searchbar'), { key: keys.ENTER, target: { value: 'status:inactive' }, }); @@ -114,7 +113,7 @@ describe('SearchBar', () => { describe('hint', () => { test('renders a hint below the search bar on focus', () => { - const component = mount( + const { getByTestSubject, queryByTestSubject } = render( { /> ); - const getHint = () => component.find('[data-test-subj="myHint"]'); - - let hint = getHint(); - expect(hint.length).toBe(0); + expect(queryByTestSubject('myHint')).toBeNull(); act(() => { - component.find('input[data-test-subj="searchbar"]').simulate('focus'); + fireEvent.focus(getByTestSubject('searchbar')); }); - component.update(); - hint = getHint(); - expect(hint.length).toBe(1); - expect(hint.text()).toBe('Hello from hint'); + expect(queryByTestSubject('myHint')).toBeInTheDocument(); + expect(queryByTestSubject('myHint')).toHaveTextContent('Hello from hint'); }); test('control the visibility of the hint', () => { @@ -164,28 +158,22 @@ describe('SearchBar', () => { ); }; - const component = mount(); - const getHint = () => component.find('[data-test-subj="myHint"]'); + const { getByTestSubject, queryByTestSubject } = render(); - let hint = getHint(); - expect(hint.length).toBe(0); + expect(queryByTestSubject('myHint')).toBeNull(); // Not visible on focus as it is controlled act(() => { - component.find('input[data-test-subj="searchbar"]').simulate('focus'); + fireEvent.focus(getByTestSubject('searchbar')); }); - component.update(); - hint = getHint(); - expect(hint.length).toBe(0); // Not visible on focus as it is controlled + expect(queryByTestSubject('myHint')).toBeNull(); // Not visible on focus as it is controlled act(() => { - component.find('[data-test-subj="showHintBtn"]').simulate('click'); + fireEvent.click(getByTestSubject('showHintBtn')); }); - component.update(); - hint = getHint(); - expect(hint.length).toBe(1); - expect(hint.text()).toBe('Hello from hint'); + expect(queryByTestSubject('myHint')).toBeInTheDocument(); + expect(queryByTestSubject('myHint')).toHaveTextContent('Hello from hint'); }); }); }); diff --git a/src/components/search_bar/search_bar.tsx b/src/components/search_bar/search_bar.tsx index 783440d90f0..046e8eaeb0b 100644 --- a/src/components/search_bar/search_bar.tsx +++ b/src/components/search_bar/search_bar.tsx @@ -8,7 +8,7 @@ import React, { Component, ReactElement } from 'react'; -import { htmlIdGenerator } from '../../services/accessibility'; +import { RenderWithEuiTheme, htmlIdGenerator } from '../../services'; import { isString } from '../../services/predicate'; import { EuiFlexGroup, EuiFlexItem } from '../flex'; import { EuiSearchBox } from './search_box'; @@ -18,6 +18,10 @@ import { CommonProps } from '../common'; import { EuiFieldSearchProps } from '../form/field_search'; import { EuiInputPopoverProps } from '../popover'; +import { + euiSearchBar__searchHolder, + euiSearchBar__filtersHolder, +} from './search_bar.styles'; export { Query, AST as Ast } from './query'; export type QueryType = Query | string; @@ -259,48 +263,58 @@ export class EuiSearchBar extends Component { const toolsLeftEl = this.renderTools(toolsLeft); - const filtersBar = !filters ? undefined : ( - - - - ); - const toolsRightEl = this.renderTools(toolsRight); const isHintVisible = hint?.popoverProps?.isOpen ?? isHintVisibleState; return ( - - {toolsLeftEl} - - { - this.setState({ isHintVisible: isVisible }); - }, - id: this.hintId, - ...hint, - } - : undefined - } - /> - - {filtersBar} - {toolsRightEl} - + + {(euiTheme) => ( + + {toolsLeftEl} + + { + this.setState({ isHintVisible: isVisible }); + }, + id: this.hintId, + ...hint, + } + : undefined + } + /> + + {filters && ( + + + + )} + {toolsRightEl} + + )} + ); } }