Simple flyout content.
diff --git a/packages/eui/src/components/flyout/flyout_menu.styles.ts b/packages/eui/src/components/flyout/flyout_menu.styles.ts index d3ae142bf39..af73cfd659f 100644 --- a/packages/eui/src/components/flyout/flyout_menu.styles.ts +++ b/packages/eui/src/components/flyout/flyout_menu.styles.ts @@ -8,6 +8,7 @@ import { css } from '@emotion/react'; import { UseEuiTheme } from '../../services'; +import { euiScreenReaderOnly } from '../accessibility'; export const euiFlyoutMenuStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme } = euiThemeContext; @@ -31,5 +32,8 @@ export const euiFlyoutMenuStyles = (euiThemeContext: UseEuiTheme) => { euiFlyoutMenu__actions: css` block-size: calc(${euiTheme.size.m} * 1.8); `, + euiFlyoutMenu__hiddenTitle: css` + ${euiScreenReaderOnly()} + `, }; }; diff --git a/packages/eui/src/components/flyout/flyout_menu.test.tsx b/packages/eui/src/components/flyout/flyout_menu.test.tsx new file mode 100644 index 00000000000..f63652f2146 --- /dev/null +++ b/packages/eui/src/components/flyout/flyout_menu.test.tsx @@ -0,0 +1,289 @@ +/* + * 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 React from 'react'; +import { render, screen } from '../../test/rtl'; +import { requiredProps } from '../../test'; + +import { EuiFlyoutMenu } from './flyout_menu'; +import { EuiFlyoutMenuContext } from './flyout_menu_context'; + +describe('EuiFlyoutMenu', () => { + const onClose = jest.fn(); + + beforeEach(() => { + jest.clearAllMocks(); + }); + + const renderWithContext = (ui: React.ReactElement) => { + return render( +This is the main flyout content.
diff --git a/packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx b/packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx index 163473f96d0..dafa9ee6856 100644 --- a/packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx +++ b/packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx @@ -170,6 +170,11 @@ const FlyoutSession: React.FCThis is the content of {title}.
@@ -206,7 +211,6 @@ const FlyoutSession: React.FC
diff --git a/packages/eui/src/components/flyout/manager/validation.test.ts b/packages/eui/src/components/flyout/manager/validation.test.ts
index 55cb531c56c..4835b348112 100644
--- a/packages/eui/src/components/flyout/manager/validation.test.ts
+++ b/packages/eui/src/components/flyout/manager/validation.test.ts
@@ -12,7 +12,6 @@ import {
validateSizeCombination,
createValidationErrorMessage,
FlyoutValidationError,
- validateFlyoutTitle,
} from './validation';
describe('Flyout Size Validation', () => {
@@ -49,7 +48,7 @@ describe('Flyout Size Validation', () => {
expect(error).toEqual({
type: 'INVALID_SIZE_TYPE',
message:
- 'Child flyouts must use named sizes (s, m, l, fill). Received: 100px',
+ 'Child flyout test-id must use a named size (s, m, l, fill). Received: 100px',
flyoutId: 'test-id',
level: 'child',
size: '100px',
@@ -57,26 +56,6 @@ describe('Flyout Size Validation', () => {
});
});
- describe('validateFlyoutTitle', () => {
- it('should return null for child flyouts without title', () => {
- expect(validateFlyoutTitle(undefined, 'child-id', 'child')).toBeNull();
- });
-
- it('should return null for main flyouts with valid title', () => {
- expect(validateFlyoutTitle('Main Title', 'main-id', 'main')).toBeNull();
- });
-
- it('should return error for empty string title', () => {
- const error = validateFlyoutTitle('', 'test-id', 'main');
- expect(error).toEqual({
- type: 'INVALID_FLYOUT_MENU_TITLE',
- message: `Managed flyouts require either a 'flyoutMenuProps.title' or an 'aria-label' to provide the flyout menu title.`,
- flyoutId: 'test-id',
- level: 'main',
- });
- });
- });
-
describe('validateSizeCombination', () => {
it('should return null for valid combinations', () => {
expect(validateSizeCombination('s', 'm')).toBeNull();
@@ -141,7 +120,7 @@ describe('Flyout Size Validation', () => {
const error: FlyoutValidationError = {
type: 'INVALID_SIZE_TYPE',
message:
- 'Child flyouts must use named sizes (s, m, l, fill). Received: 100px',
+ 'Child flyout test-id must use a named size (s, m, l, fill). Received: 100px',
flyoutId: 'test-id',
level: 'child',
size: '100px',
@@ -149,7 +128,7 @@ describe('Flyout Size Validation', () => {
const message = createValidationErrorMessage(error);
expect(message).toBe(
- 'EuiFlyout validation error: Child flyouts must use named sizes (s, m, l, fill). Received: 100px'
+ 'EuiFlyout validation error: Child flyout test-id must use a named size (s, m, l, fill). Received: 100px'
);
expect(consoleSpy).toHaveBeenCalledWith(error);
});
@@ -184,14 +163,14 @@ describe('Flyout Size Validation', () => {
const error: FlyoutValidationError = {
type: 'INVALID_FLYOUT_MENU_TITLE',
message:
- "Managed flyouts require either a 'flyoutMenuProps.title' or an 'aria-label' to provide the flyout menu title.",
+ 'Managed flyout "test-id" requires a title, which can be provided through \'aria-label\' or \'flyoutMenuProps.title\'. Using default title: "Unknown Flyout"',
flyoutId: 'test-id',
level: 'main',
};
const message = createValidationErrorMessage(error);
expect(message).toBe(
- "EuiFlyout validation error: Managed flyouts require either a 'flyoutMenuProps.title' or an 'aria-label' to provide the flyout menu title."
+ 'EuiFlyout validation error: Managed flyout "test-id" requires a title, which can be provided through \'aria-label\' or \'flyoutMenuProps.title\'. Using default title: "Unknown Flyout"'
);
expect(consoleSpy).toHaveBeenCalledWith(error);
});
diff --git a/packages/eui/src/components/flyout/manager/validation.ts b/packages/eui/src/components/flyout/manager/validation.ts
index caf784da2cf..0c50ef81871 100644
--- a/packages/eui/src/components/flyout/manager/validation.ts
+++ b/packages/eui/src/components/flyout/manager/validation.ts
@@ -8,8 +8,7 @@
import { EuiFlyoutSize, FLYOUT_SIZES } from '../const';
import { EuiFlyoutComponentProps } from '../flyout.component';
-import { EuiFlyoutMenuProps } from '../flyout_menu';
-import { LEVEL_CHILD, LEVEL_MAIN } from './const';
+import { LEVEL_CHILD } from './const';
import { EuiFlyoutLevel } from './types';
type FlyoutValidationErrorType =
@@ -46,7 +45,7 @@ export function validateManagedFlyoutSize(
const namedSizes = FLYOUT_SIZES.join(', ');
return {
type: 'INVALID_SIZE_TYPE',
- message: `Child flyouts must use named sizes (${namedSizes}). Received: ${size}`,
+ message: `Child flyout ${flyoutId} must use a named size (${namedSizes}). Received: ${size}`,
flyoutId,
level,
size,
@@ -55,25 +54,6 @@ export function validateManagedFlyoutSize(
return null;
}
-/**
- * Validates that a title is provided
- */
-export function validateFlyoutTitle(
- flyoutMenuTitle: EuiFlyoutMenuProps['title'] | undefined,
- flyoutId: string,
- level: EuiFlyoutLevel
-): FlyoutValidationError | null {
- if (level === LEVEL_MAIN && !flyoutMenuTitle) {
- return {
- type: 'INVALID_FLYOUT_MENU_TITLE',
- message: `Managed flyouts require either a 'flyoutMenuProps.title' or an 'aria-label' to provide the flyout menu title.`,
- flyoutId,
- level,
- };
- }
- return null;
-}
-
/**
* Validates size combinations for parent-child flyouts
*/
diff --git a/packages/website/docs/components/containers/flyout/session-management.mdx b/packages/website/docs/components/containers/flyout/session-management.mdx
index bd3bed96bbc..1949d8166fb 100644
--- a/packages/website/docs/components/containers/flyout/session-management.mdx
+++ b/packages/website/docs/components/containers/flyout/session-management.mdx
@@ -39,8 +39,17 @@ export default () => {
+ Welcome to the flyout session management journey!
+
+
+ Glad to meet you, {name || 'stranger'}!
+
+
+ I'm the main flyout heading
+
+