Skip to content

Commit

Permalink
Merge branch 'main' into update-icon-elastic-stack
Browse files Browse the repository at this point in the history
  • Loading branch information
@formgeist
formgeist authored Jun 18, 2024
2 parents 56b6a91 + 4d6acaf commit caa827b
Show file tree
Hide file tree
Showing 21 changed files with 362 additions and 547 deletions.
1 change: 1 addition & 0 deletions packages/eui/changelogs/upcoming/7820.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Updated `setEuiDevProviderWarning` to additionally accept a custom callback function, which warning messages will be passed to
12 changes: 9 additions & 3 deletions packages/eui/src-docs/src/views/provider/provider_example.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { GuideSectionPropsTable } from '../../components/guide_section/guide_sec

import Setup from './provider_setup';
import GlobalStyles from './provider_styles';
import Warnings from './provider_warning';
import Warnings, { CallbackExample } from './provider_warning';
import {
EuiComponentDefaultsProps,
euiProviderComponentDefaultsSnippet,
Expand Down Expand Up @@ -237,8 +237,7 @@ export const ProviderExample = {
<Warnings />

<p>
<EuiCode>setEuiDevProviderWarning</EuiCode>
accepts three levels:
<EuiCode>setEuiDevProviderWarning</EuiCode> accepts three levels:
</p>
<ul>
<li>
Expand All @@ -254,6 +253,13 @@ export const ProviderExample = {
exception
</li>
</ul>

<p>
It also accepts a callback function instead of a default warning
level. The warning message string will be passed to your callback,
where any custom action can be performed on it. Example usage:
</p>
<CallbackExample />
</EuiText>
),
},
Expand Down
13 changes: 13 additions & 0 deletions packages/eui/src-docs/src/views/provider/provider_warning.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,16 @@ const AppWithDuplicateProvider = () => (
</>
);
};

export const CallbackExample = () => (
<EuiCodeBlock language="tsx" fontSize="m" isCopyable>
{`import { setEuiDevProviderWarning } from '@elastic/eui';
const customWarningHandler = (message: string) => {
sendWarningToTelemetryService(message);
console.debug(message);
};
setEuiDevProviderWarning(customWarningHandler);`}
</EuiCodeBlock>
);
3 changes: 2 additions & 1 deletion ...omponents/accessibility/screen_reader_live/__snapshots__/screen_reader_live.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,8 @@ exports[`EuiScreenReaderLive with dynamic properties alternates rendering screen
role="status"
>
<p>
Number of active options: 1
Number of active options:
1
</p>
</div>
</div>
Expand Down
16 changes: 6 additions & 10 deletions packages/eui/src/components/accessibility/screen_reader_live/screen_reader_live.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@
*/

import React, { useState } from 'react';
import { mount } from 'enzyme';

import { findTestSubject } from '../../../test';
import { fireEvent } from '@testing-library/react';
import { render } from '../../../test/rtl';

import { EuiScreenReaderLive } from './screen_reader_live';
Expand Down Expand Up @@ -94,25 +92,23 @@ describe('EuiScreenReaderLive', () => {
});

it('alternates rendering screen reader content into the second live region when changed/toggled', () => {
const component = mount(<Component />);
const { container, getByTestSubject } = render(<Component />);

findTestSubject(component, 'increment').simulate('click');
fireEvent.click(getByTestSubject('increment'));

expect(component.render()).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});

describe('with focus behavior', () => {
it('sets focus correctly', () => {
const component = mount(
const { container } = render(
<EuiScreenReaderLive focusRegionOnTextChange={true}>
{content}
</EuiScreenReaderLive>
);

const focusableDiv = component.find('div').at(0);

expect(focusableDiv.is(':focus')).toBe(true);
expect(container.firstChild).toHaveFocus();
});
});
});
29 changes: 18 additions & 11 deletions packages/eui/src/components/accessibility/skip_link/skip_link.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@
*/

import React from 'react';
import { mount } from 'enzyme';
import { fireEvent } from '@testing-library/react';
import { fireEvent, createEvent } from '@testing-library/react';
import { render } from '../../../test/rtl';
import { requiredProps } from '../../../test';

Expand All @@ -34,29 +33,37 @@ describe('EuiSkipLink', () => {
const focusSpy = jest.fn();
mockElement.focus = focusSpy;

const component = mount(
<EuiSkipLink destinationId="somewhere" overrideLinkBehavior />
const { getByTestSubject } = render(
<EuiSkipLink
destinationId="somewhere"
overrideLinkBehavior
data-test-subj="skip-link"
/>
);

const preventDefault = jest.fn();
component.find('a').simulate('click', { preventDefault });
const event = createEvent.click(getByTestSubject('skip-link'));
fireEvent(getByTestSubject('skip-link'), event);

expect(preventDefault).toHaveBeenCalled();
expect(event.defaultPrevented).toBe(true);
expect(focusSpy).toHaveBeenCalled();
});

it('only scrolls to the destination if out of view', () => {
const scrollSpy = jest.fn();
mockElement.scrollIntoView = scrollSpy;

const component = mount(
<EuiSkipLink destinationId="somewhere" overrideLinkBehavior />
const { getByTestSubject } = render(
<EuiSkipLink
destinationId="somewhere"
overrideLinkBehavior
data-test-subj="skip-link"
/>
);
component.find('a').simulate('click');
fireEvent.click(getByTestSubject('skip-link'));
expect(scrollSpy).not.toHaveBeenCalled();

mockElement.getBoundingClientRect = () => ({ top: 1000 } as any);
component.find('a').simulate('click');
fireEvent.click(getByTestSubject('skip-link'));
expect(scrollSpy).toHaveBeenCalled();
});

Expand Down
212 changes: 0 additions & 212 deletions packages/eui/src/components/accordion/__snapshots__/accordion.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,217 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EuiAccordion behavior closes when clicked twice 1`] = `
<div
class="euiAccordion emotion-euiAccordion"
>
<div
class="euiAccordion__triggerWrapper emotion-EuiAccordionTrigger"
>
<button
aria-controls="25"
aria-expanded="false"
aria-labelledby="generated-id"
class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
tabindex="-1"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="arrowRight"
/>
</button>
<button
aria-controls="25"
aria-expanded="false"
class="euiAccordion__button emotion-euiAccordion__button"
id="generated-id"
type="button"
>
<span
class="euiAccordion__buttonContent"
/>
</button>
</div>
<div
aria-labelledby="generated-id"
class="euiAccordion__childWrapper emotion-euiAccordion__childWrapper-isClosed"
id="25"
inert=""
role="group"
style="block-size: 0;"
>
<div
class="euiAccordion__children emotion-euiAccordion__children"
>
<p>
You can not see me.
</p>
</div>
</div>
</div>
`;

exports[`EuiAccordion behavior does not open when isDisabled 1`] = `
<div
class="euiAccordion emotion-euiAccordion"
>
<div
class="euiAccordion__triggerWrapper emotion-EuiAccordionTrigger"
>
<button
aria-controls="23"
aria-expanded="false"
aria-labelledby="generated-id"
class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiAccordion__arrow-left-isClosed"
disabled=""
tabindex="-1"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="arrowRight"
/>
</button>
<button
aria-controls="23"
aria-expanded="false"
class="euiAccordion__button emotion-euiAccordion__button-disabled"
disabled=""
id="generated-id"
type="button"
>
<span
class="euiAccordion__buttonContent"
/>
</button>
</div>
<div
aria-labelledby="generated-id"
class="euiAccordion__childWrapper emotion-euiAccordion__childWrapper-isClosed"
id="23"
inert=""
role="group"
style="block-size: 0;"
>
<div
class="euiAccordion__children emotion-euiAccordion__children"
>
<p>
You cannot see me.
</p>
</div>
</div>
</div>
`;

exports[`EuiAccordion behavior opens when clicked once 1`] = `
<div
class="euiAccordion euiAccordion-isOpen emotion-euiAccordion"
>
<div
class="euiAccordion__triggerWrapper emotion-EuiAccordionTrigger"
>
<button
aria-controls="22"
aria-expanded="true"
aria-labelledby="generated-id"
class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isOpen"
tabindex="-1"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="arrowRight"
/>
</button>
<button
aria-controls="22"
aria-expanded="true"
class="euiAccordion__button emotion-euiAccordion__button"
id="generated-id"
type="button"
>
<span
class="euiAccordion__buttonContent"
/>
</button>
</div>
<div
aria-labelledby="generated-id"
class="euiAccordion__childWrapper emotion-euiAccordion__childWrapper-isOpen"
id="22"
role="group"
style="block-size: 0;"
>
<div
class="euiAccordion__children emotion-euiAccordion__children"
>
<p>
You can see me.
</p>
</div>
</div>
</div>
`;

exports[`EuiAccordion behavior opens when div is clicked if element is a div 1`] = `
<div
class="euiAccordion euiAccordion-isOpen emotion-euiAccordion"
>
<div
class="euiAccordion__triggerWrapper emotion-EuiAccordionTrigger"
>
<button
aria-controls="24"
aria-expanded="true"
aria-labelledby="generated-id"
class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isOpen"
tabindex="-1"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="arrowRight"
/>
</button>
<button
aria-controls="24"
aria-expanded="true"
class="euiAccordion__button emotion-euiAccordion__button"
id="generated-id"
type="button"
>
<span
class="euiAccordion__buttonContent"
/>
</button>
</div>
<div
aria-labelledby="generated-id"
class="euiAccordion__childWrapper emotion-euiAccordion__childWrapper-isOpen"
id="24"
role="group"
style="block-size: 0;"
>
<div
class="euiAccordion__children emotion-euiAccordion__children"
>
<p>
You can see me.
</p>
</div>
</div>
</div>
`;

exports[`EuiAccordion is rendered 1`] = `
<div
aria-label="aria-label"
Expand Down
Loading

0 comments on commit caa827b

Please sign in to comment.