diff --git a/packages/eui/changelogs/upcoming/8243.md b/packages/eui/changelogs/upcoming/8243.md new file mode 100644 index 00000000000..8ad6028dde5 --- /dev/null +++ b/packages/eui/changelogs/upcoming/8243.md @@ -0,0 +1,3 @@ +**Bug fixes** + +- Ensures that the `values` of `EuiI18n` used in `EuiPagination` use `key` attributes to prevent potential ["unique key" warnings](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key). diff --git a/packages/eui/changelogs/upcoming/8248.md b/packages/eui/changelogs/upcoming/8248.md new file mode 100644 index 00000000000..ef1a0b8cb8c --- /dev/null +++ b/packages/eui/changelogs/upcoming/8248.md @@ -0,0 +1,2 @@ +- Added two new icons: `createGenericJob` and `createGeoJob` + diff --git a/packages/eui/changelogs/upcoming/8256.md b/packages/eui/changelogs/upcoming/8256.md new file mode 100644 index 00000000000..c78a2268775 --- /dev/null +++ b/packages/eui/changelogs/upcoming/8256.md @@ -0,0 +1,3 @@ +**Breaking changes** + +- Removed `EuiPopover`'s deprecated `hasDragDrop` prop. Use `usePortal` on any child `EuiDraggable` instead diff --git a/packages/eui/src-docs/src/views/icon/ml.js b/packages/eui/src-docs/src/views/icon/ml.js index a00ef75fd51..cf35431637d 100644 --- a/packages/eui/src-docs/src/views/icon/ml.js +++ b/packages/eui/src-docs/src/views/icon/ml.js @@ -19,6 +19,8 @@ const iconTypes = [ 'createPopulationJob', 'regressionJob', 'createSingleMetricJob', + 'createGenericJob', + 'createGeoJob', ]; export default () => ( diff --git a/packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.test.tsx b/packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.test.tsx index 10f49342d61..97b5543246b 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.test.tsx +++ b/packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.test.tsx @@ -115,13 +115,17 @@ describe('EuiAbsoluteTab', () => { locale: LocaleSpecifier; dateString: string; }>([ - { locale: 'en', dateString: 'Mon Jan 1st' }, - { locale: 'zh-CN', dateString: '周一 1月 1日' }, - { locale: 'ja-JP', dateString: '月 1月 1日' }, - { locale: 'fr-FR', dateString: 'lun. janv. 1er' }, + { locale: 'en', dateString: 'Mon Jan 2024 1st' }, + { locale: 'zh-CN', dateString: '周一 1月 2024 1日' }, + { locale: 'ja-JP', dateString: '月 1月 2024 1日' }, + { locale: 'fr-FR', dateString: 'lun. janv. 2024 1er' }, ])('%p', ({ locale, dateString }) => { const { getByTestSubject } = render( - + ); const input = getByTestSubject('superDatePickerAbsoluteDateInput'); diff --git a/packages/eui/src/components/icon/__snapshots__/icon.test.tsx.snap b/packages/eui/src/components/icon/__snapshots__/icon.test.tsx.snap index 5f04d92014a..f02e59d1616 100644 --- a/packages/eui/src/components/icon/__snapshots__/icon.test.tsx.snap +++ b/packages/eui/src/components/icon/__snapshots__/icon.test.tsx.snap @@ -1922,6 +1922,52 @@ exports[`EuiIcon props type createAdvancedJob is rendered 1`] = ` `; +exports[`EuiIcon props type createGenericJob is rendered 1`] = ` + +`; + +exports[`EuiIcon props type createGeoJob is rendered 1`] = ` + +`; + exports[`EuiIcon props type createMultiMetricJob is rendered 1`] = ` {activePage + 1}, - total: {pageCount}, + page: {activePage + 1}, + total: {pageCount}, }} /> diff --git a/packages/eui/src/components/popover/input_popover.stories.tsx b/packages/eui/src/components/popover/input_popover.stories.tsx index 36a04f94558..eb7d4f8ecbf 100644 --- a/packages/eui/src/components/popover/input_popover.stories.tsx +++ b/packages/eui/src/components/popover/input_popover.stories.tsx @@ -37,7 +37,6 @@ const meta: Meta = { panelMinWidth: 0, offset: undefined, buffer: undefined, - hasDragDrop: false, panelClassName: '', popoverScreenReaderText: '', }, @@ -50,7 +49,6 @@ moveStorybookControlsToCategory( 'closePopover', 'disableFocusTrap', 'display', - 'hasDragDrop', 'isOpen', 'offset', 'onPositionChange', diff --git a/packages/eui/src/components/popover/popover.stories.tsx b/packages/eui/src/components/popover/popover.stories.tsx index 45c47dc62c4..0d0820d8adc 100644 --- a/packages/eui/src/components/popover/popover.stories.tsx +++ b/packages/eui/src/components/popover/popover.stories.tsx @@ -41,7 +41,6 @@ const meta: Meta = { // adding defaults for quicker/easier QA arrowChildren: '', attachToAnchor: false, - hasDragDrop: false, panelClassName: '', popoverScreenReaderText: '', }, diff --git a/packages/eui/src/components/popover/popover.tsx b/packages/eui/src/components/popover/popover.tsx index ec45cc3b036..fbe74fca30e 100644 --- a/packages/eui/src/components/popover/popover.tsx +++ b/packages/eui/src/components/popover/popover.tsx @@ -174,13 +174,6 @@ export interface EuiPopoverProps extends PropsWithChildren, CommonProps { * @default true */ repositionToCrossAxis?: boolean; - /** - * Must be set to true if using `EuiDragDropContext` within a popover, - * otherwise your nested drag & drop will have incorrect positioning - * - * @deprecated - use `usePortal` prop on children `EuiDraggable` components instead. - */ - hasDragDrop?: boolean; /** * By default, popover content inherits the z-index of the anchor * component; pass `zIndex` to override @@ -635,7 +628,6 @@ export class EuiPopover extends Component { arrowChildren, repositionOnScroll, repositionToCrossAxis, - hasDragDrop, zIndex, attachToAnchor, display, @@ -730,7 +722,6 @@ export class EuiPopover extends Component { position={this.state.arrowPosition} isAttached={attachToAnchor} className={classNames(panelClassName, panelProps?.className)} - hasDragDrop={hasDragDrop} hasShadow={false} paddingSize={panelPaddingSize} tabIndex={tabIndex} diff --git a/packages/eui/src/components/popover/popover_panel/__snapshots__/_popover_panel.test.tsx.snap b/packages/eui/src/components/popover/popover_panel/__snapshots__/_popover_panel.test.tsx.snap index f95ad7de7c2..baf859b0d97 100644 --- a/packages/eui/src/components/popover/popover_panel/__snapshots__/_popover_panel.test.tsx.snap +++ b/packages/eui/src/components/popover/popover_panel/__snapshots__/_popover_panel.test.tsx.snap @@ -9,13 +9,6 @@ exports[`EuiPopoverPanel is rendered 1`] = ` /> `; -exports[`EuiPopoverPanel props hasDragDrop is rendered 1`] = ` -
-`; - exports[`EuiPopoverPanel props isAttached is rendered 1`] = `
{ - const { euiTheme, colorMode } = euiThemeContext; + const { euiTheme } = euiThemeContext; const translateDistance = euiTheme.size.s; const animationSpeed = euiTheme.animation[openAnimationTiming]; @@ -119,49 +118,5 @@ export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => { return this.bottom; }, }, - - // Has an arrow, but cannot have transform or filter CSS - they create a - // stacking context that messes up the drag/drop fixed positioning - hasDragDrop: { - hasDragDrop: css` - ${euiShadowMedium(euiThemeContext, { property: 'box-shadow' })} - - ${euiCanAnimate} { - transition: ${opacityTransition}; /* 2 */ - } - `, - // The offset transforms must be recreated in margins - top: css` - margin-block-start: ${translateDistance}; - /* Existing box-shadow of the popover is sufficient to see the arrow */ - `, - bottom: css` - margin-block-start: -${translateDistance}; - - .euiPopover__arrow { - filter: drop-shadow( - 0 -6px 6px ${getShadowColor(euiTheme.colors.shadow, 0.12, colorMode)} - ); - } - `, - left: css` - margin-inline-start: ${translateDistance}; - - .euiPopover__arrow { - filter: drop-shadow( - 6px 0 6px ${getShadowColor(euiTheme.colors.shadow, 0.12, colorMode)} - ); - } - `, - right: css` - margin-inline-start: -${translateDistance}; - - .euiPopover__arrow { - filter: drop-shadow( - -6px 0 6px ${getShadowColor(euiTheme.colors.shadow, 0.12, colorMode)} - ); - } - `, - }, }; }; diff --git a/packages/eui/src/components/popover/popover_panel/_popover_panel.test.tsx b/packages/eui/src/components/popover/popover_panel/_popover_panel.test.tsx index 99e88eb3acc..74a3beaa4c4 100644 --- a/packages/eui/src/components/popover/popover_panel/_popover_panel.test.tsx +++ b/packages/eui/src/components/popover/popover_panel/_popover_panel.test.tsx @@ -36,12 +36,6 @@ describe('EuiPopoverPanel', () => { expect(container.firstChild).toMatchSnapshot(); }); - test('hasDragDrop is rendered', () => { - const { container } = render(); - - expect(container.firstChild).toMatchSnapshot(); - }); - describe('position', () => { POSITIONS.forEach((position) => { test(`${position} is rendered`, () => { diff --git a/packages/eui/src/components/popover/popover_panel/_popover_panel.tsx b/packages/eui/src/components/popover/popover_panel/_popover_panel.tsx index 5bf66472a10..615d9bb6656 100644 --- a/packages/eui/src/components/popover/popover_panel/_popover_panel.tsx +++ b/packages/eui/src/components/popover/popover_panel/_popover_panel.tsx @@ -28,7 +28,6 @@ type EuiPopoverPanelInternalProps = { isOpen?: boolean; isAttached?: boolean; position?: EuiPopoverArrowPositions | null; - hasDragDrop?: boolean; }; /** @@ -37,15 +36,7 @@ type EuiPopoverPanelInternalProps = { */ export const EuiPopoverPanel: FunctionComponent< EuiPopoverPanelProps & EuiPopoverPanelInternalProps -> = ({ - children, - className, - isOpen, - isAttached, - hasDragDrop, - position, - ...rest -}) => { +> = ({ children, className, isOpen, isAttached, position, ...rest }) => { const classes = classNames('euiPopover__panel', className); const euiThemeContext = useEuiTheme(); @@ -61,13 +52,6 @@ export const EuiPopoverPanel: FunctionComponent< isOpen && styles.isOpen, ]; - if (hasDragDrop) { - return [ - ...sharedStyles, - styles.hasDragDrop.hasDragDrop, - position && styles.hasDragDrop[position], - ]; - } if (isAttached) { return [ ...sharedStyles, @@ -80,7 +64,7 @@ export const EuiPopoverPanel: FunctionComponent< styles.hasTransform.hasTransform, isOpen && position && styles.hasTransform[position], ]; - }, [euiThemeContext, isOpen, position, isAttached, hasDragDrop]); + }, [euiThemeContext, isOpen, position, isAttached]); return ( = [ 'createPopulationJob', 'regressionJob', 'createSingleMetricJob', + 'createGenericJob', + 'createGeoJob', ];