diff --git a/src-docs/src/views/filter_group/filter_group.js b/src-docs/src/views/filter_group/filter_group.js index 55251801f84..14adc6a19e8 100644 --- a/src-docs/src/views/filter_group/filter_group.js +++ b/src-docs/src/views/filter_group/filter_group.js @@ -1,9 +1,10 @@ import React, { useState } from 'react'; import { - EuiPopover, EuiFilterGroup, EuiFilterButton, + EuiPopover, + EuiSelectableMessage, EuiIcon, EuiSpacer, } from '../../../../src/components'; @@ -85,13 +86,11 @@ export default () => { closePopover={closePopover} panelPaddingSize="none" > -
-
- - -

No filters found

-
-
+ + + +

No filters found

+ diff --git a/src/components/filter_group/_filter_select_item.scss b/src/components/filter_group/_filter_select_item.scss deleted file mode 100644 index 64686f39190..00000000000 --- a/src/components/filter_group/_filter_select_item.scss +++ /dev/null @@ -1,43 +0,0 @@ -.euiFilterSelectItem { - @include euiFontSizeS; - @include euiInteractiveStates; - - padding: $euiSizeXS $euiSizeM; - display: block; // Necessary to make sure it doesn't force the whole popover to be too wide - width: 100%; - text-align: left; - color: $euiTextColor; - border-bottom: $euiBorderThin; - border-color: darken($euiColorLightestShade, 2%); - outline-offset: -$euiFocusRingSize; - - &:focus, - &-isFocused { - @include euiFocusBackground; - color: $euiColorPrimary; - } -} - -.euiFilterSelectItem__content { - @include euiTextTruncate; -} - -.euiFilterSelect__items { - @include euiScrollBar; - - overflow-y: auto; - max-height: $euiSize * 30; -} - -.euiFilterSelect__note { - height: $euiSize * 4; - text-align: center; - display: flex; - align-items: center; - justify-content: space-around; -} - -.euiFilterSelect__noteContent { - color: $euiColorDarkShade; - font-size: $euiFontSizeS; -} diff --git a/src/components/filter_group/_index.scss b/src/components/filter_group/_index.scss deleted file mode 100644 index 515c43ec188..00000000000 --- a/src/components/filter_group/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'filter_select_item'; diff --git a/src/components/filter_group/filter_select_item.styles.ts b/src/components/filter_group/filter_select_item.styles.ts new file mode 100644 index 00000000000..1083c067772 --- /dev/null +++ b/src/components/filter_group/filter_select_item.styles.ts @@ -0,0 +1,70 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; + +import { UseEuiTheme, transparentize } from '../../services'; +import { + logicalCSS, + logicalShorthandCSS, + logicalTextAlignCSS, + euiFontSize, +} from '../../global_styling'; + +export const euiFilterSelectItemStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + + const focusStyles = ` + color: ${euiTheme.colors.primary}; + background-color: ${euiTheme.focus.backgroundColor}; + outline-offset: -${euiTheme.focus.width}; + text-decoration: underline; + + &:disabled { + background-color: ${transparentize(euiTheme.colors.disabled, 0.1)}; + } + `; + + return { + euiFilterSelectItem: css` + display: block; /* Necessary to make sure it doesn't force the whole popover to be too wide */ + ${logicalCSS('width', '100%')} + ${logicalShorthandCSS( + 'padding', + `${euiTheme.size.xs} ${euiTheme.size.m}` + )} + + ${euiFontSize(euiThemeContext, 's')} + ${logicalTextAlignCSS('left')} + + color: ${euiTheme.colors.text}; + ${logicalCSS( + 'border-bottom', + `${euiTheme.border.width.thin} solid ${euiTheme.colors.lightestShade}` + )} + + &:hover { + cursor: pointer; + text-decoration: underline; + } + + &:focus { + ${focusStyles} + } + + &:disabled { + cursor: not-allowed; + text-decoration: none; + color: ${euiTheme.colors.disabledText}; + } + `, + isFocused: css` + ${focusStyles} + `, + }; +}; diff --git a/src/components/filter_group/filter_select_item.test.tsx b/src/components/filter_group/filter_select_item.test.tsx index b6cd7443564..62764f09608 100644 --- a/src/components/filter_group/filter_select_item.test.tsx +++ b/src/components/filter_group/filter_select_item.test.tsx @@ -9,11 +9,14 @@ import React from 'react'; import { render } from '../../test/rtl'; import { requiredProps } from '../../test'; +import { shouldRenderCustomStyles } from '../../test/internal'; import { EuiFilterSelectItem } from './filter_select_item'; describe('EuiFilterSelectItem', () => { - test('is rendered', () => { + shouldRenderCustomStyles(); + + it('renders', () => { const { container } = render(); expect(container.firstChild).toMatchSnapshot(); diff --git a/src/components/filter_group/filter_select_item.tsx b/src/components/filter_group/filter_select_item.tsx index 1c569fa7eff..9725e2f6978 100644 --- a/src/components/filter_group/filter_select_item.tsx +++ b/src/components/filter_group/filter_select_item.tsx @@ -9,12 +9,14 @@ import React, { ButtonHTMLAttributes, Component } from 'react'; import classNames from 'classnames'; +import { withEuiTheme, WithEuiThemeProps } from '../../services'; import { CommonProps } from '../common'; import { EuiFlexGroup, EuiFlexItem } from '../flex'; - import { EuiIcon } from '../icon'; +import { euiFilterSelectItemStyles } from './filter_select_item.styles'; + export type FilterChecked = 'on' | 'off'; export interface EuiFilterSelectItemProps extends CommonProps, @@ -39,7 +41,15 @@ const resolveIconAndColor = (checked?: FilterChecked) => { }; }; -export class EuiFilterSelectItem extends Component { +/** + * TODO: This component should removed in favor of EuiSelectable usage + * once EuiComboBox has been converted to dogfood EuiSelectable. + * + * @deprecated - Use EuiSelectable instead + */ +export class EuiFilterSelectItemClass extends Component< + WithEuiThemeProps & EuiFilterSelectItemProps +> { static defaultProps = { showIcons: true, }; @@ -62,6 +72,7 @@ export class EuiFilterSelectItem extends Component { render() { const { + theme, children, className, disabled, @@ -70,13 +81,14 @@ export class EuiFilterSelectItem extends Component { showIcons, ...rest } = this.props; - const classes = classNames( - 'euiFilterSelectItem', - { - 'euiFilterSelectItem-isFocused': isFocused, - }, - className - ); + + const styles = euiFilterSelectItemStyles(theme); + const cssStyles = [ + styles.euiFilterSelectItem, + isFocused && styles.isFocused, + ]; + + const classes = classNames('euiFilterSelectItem', className); let iconNode; if (showIcons) { @@ -95,6 +107,7 @@ export class EuiFilterSelectItem extends Component { type="button" aria-selected={isFocused} className={classes} + css={cssStyles} disabled={disabled} aria-disabled={disabled} {...rest} @@ -107,7 +120,7 @@ export class EuiFilterSelectItem extends Component { > {iconNode} {children} @@ -117,3 +130,10 @@ export class EuiFilterSelectItem extends Component { ); } } + +/** + * @deprecated - Use EuiSelectable instead + */ +export const EuiFilterSelectItem = withEuiTheme( + EuiFilterSelectItemClass +); diff --git a/src/components/index.scss b/src/components/index.scss index 6e93f22499d..55d31f50edc 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -9,7 +9,6 @@ @import 'datagrid/index'; @import 'drag_and_drop/index'; @import 'empty_prompt/index'; -@import 'filter_group/index'; @import 'form/index'; @import 'header/index'; @import 'key_pad_menu/index'; diff --git a/upcoming_changelogs/6982.md b/upcoming_changelogs/6982.md new file mode 100644 index 00000000000..3ee8792e749 --- /dev/null +++ b/upcoming_changelogs/6982.md @@ -0,0 +1,9 @@ +**Deprecations** + +- Deprecated `EuiFilterSelectItem`; Use `EuiSelectable` instead + +**CSS-in-JS conversions** + +- Converted `EuiFilterSelectItem` to Emotion +- Removed `.euiFilterSelect__items` CSS; Use `EuiSelectable` instead +- Removed `.euiFilterSelect__note` and `.euiFilterSelect__noteContent` CSS; Use `EuiSelectableMessage` instead