Skip to content

Commit

Permalink
Merge branch 'main' into feat/7690-selectable-option-tooltip-support
Browse files Browse the repository at this point in the history
  • Loading branch information
cee-chen authored May 9, 2024
2 parents 4851587 + 808f837 commit bcf9e6d
Show file tree
Hide file tree
Showing 126 changed files with 984 additions and 77 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions changelogs/upcoming/7732.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Updated `EuiSuperDatePicker`'s absolute tab UX to support setting manual timestamps via mouse click as well as enter key
3 changes: 3 additions & 0 deletions changelogs/upcoming/7740.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**Accessibility**

- Updated `EuiCollapsedNavButton` with improved context for screen reader navigation
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ exports[`KibanaCollapsibleNavSolution renders docked icons 1`] = `
class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
>
<button
aria-label="Some solution"
aria-label="Some solution, quick navigation menu"
class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
data-test-subj="euiCollapsedNavButton"
type="button"
Expand All @@ -33,7 +33,7 @@ exports[`KibanaCollapsibleNavSolution renders docked icons 1`] = `
class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
>
<button
aria-label="Solution view"
aria-label="Solution view, quick navigation menu"
class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
data-test-subj="euiCollapsedNavButton"
type="button"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ describe('KibanaCollapsibleNavSolution', () => {
);
expect(container.firstChild).toMatchSnapshot();

fireEvent.click(getByLabelText('Solution view'));
fireEvent.click(getByLabelText('Solution view, quick navigation menu'));
await waitForEuiPopoverOpen();
expect(getByText('Some other solution')).toBeInTheDocument();

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ exports[`EuiCollapsibleNavItem renders a collapsed button icon when in a collaps
data-test-subj="test subject string"
>
<button
aria-label="Item"
aria-label="Item, quick navigation menu"
class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
data-test-subj="euiCollapsedNavButton"
type="button"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ exports[`EuiCollapsedNavButton renders a tooltip around the icon button 1`] = `
>
<button
aria-describedby="generated-id"
aria-label="Nav item"
aria-label="Nav item, quick navigation menu"
class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
data-test-subj="euiCollapsedNavButton"
type="button"
Expand Down Expand Up @@ -55,7 +55,7 @@ exports[`EuiCollapsedNavButton renders isSelected 1`] = `
class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
>
<a
aria-label="Nav item"
aria-label="Nav item, quick navigation menu"
class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton-isSelected"
data-test-subj="euiCollapsedNavButton"
href="#"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ exports[`EuiCollapsedNavItem renders a popover if items are passed 1`] = `
class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
>
<button
aria-label="Item"
aria-label="Item, quick navigation menu"
class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
data-test-subj="euiCollapsedNavButton"
type="button"
Expand All @@ -32,7 +32,7 @@ exports[`EuiCollapsedNavItem renders an icon button/link if href is passed 1`] =
data-test-subj="test subject string"
>
<a
aria-label="Item"
aria-label="Item, quick navigation menu"
class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
data-test-subj="euiCollapsedNavButton"
href="#"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ exports[`EuiCollapsedNavPopover renders 1`] = `
class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
>
<button
aria-label="Item"
aria-label="Item, quick navigation menu"
class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
data-test-subj="euiCollapsedNavButton"
type="button"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
euiCollapsedNavButtonStyles,
euiCollapsedNavItemTooltipStyles,
} from './collapsed_nav_button.styles';
import { useEuiI18n } from '../../../i18n';

export const EuiCollapsedNavButton: FunctionComponent<
Omit<
Expand Down Expand Up @@ -63,6 +64,12 @@ export const EuiCollapsedNavButton: FunctionComponent<
hideToolTip && tooltipStyles.hidden,
];

const buttonIconAriaLabel = useEuiI18n(
'euiCollapsedNavButton.ariaLabelButtonIcon',
'{title}, quick navigation menu',
{ title }
);

return (
<EuiToolTip
content={title}
Expand All @@ -77,7 +84,7 @@ export const EuiCollapsedNavButton: FunctionComponent<
color="text"
href={href}
onClick={onClick}
aria-label={title}
aria-label={buttonIconAriaLabel}
{...(linkProps as EuiButtonIconPropsForAnchor)} // Exclusive union shenanigans
className={buttonClassName}
css={buttonCssStyles}
Expand Down
5 changes: 4 additions & 1 deletion src/components/datagrid/data_grid.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ import type {
} from './data_grid_types';
import { EuiDataGrid } from './data_grid';

faker.seed(42);

const dataKeys = [
'name',
'email',
Expand All @@ -36,6 +38,7 @@ const dataKeys = [
const raw_data = Array.from({ length: 10 }).map(() => {
const email = faker.internet.email();
const name = `${faker.person.lastName()}, ${faker.person.firstName()}`;
const date = faker.date.past().toDateString();
const suffix = faker.person.suffix();
return {
name: {
Expand All @@ -52,7 +55,7 @@ const raw_data = Array.from({ length: 10 }).map(() => {
<EuiLink href="https://google.com">{faker.location.country()}</EuiLink>
</>
),
date: `${faker.date.past()}`,
date: `${date}`,
account: faker.finance.accountNumber(),
version: faker.system.semver(),
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,24 +1,19 @@
.euiSuperDatePicker__absoluteDateFormRow {
.euiSuperDatePicker__absoluteDateForm {
padding: 0 $euiSizeS $euiSizeS;
}

/* A bit of a visual trickery to make the format "hint" become an "error" text.
NOTE: Normally reordering visually (vs DOM) isn't super great for screen reader users,
but as the help text is already read out via `aria-describedby`, and the error text
is read out immediately via `aria-live`, we can fairly safely prioritize visuals instead */
.euiFormRow__fieldWrapper {
display: flex;
flex-direction: column;
};

.euiFormControlLayout {
order: 0;
}
.euiSuperDatePicker__absoluteDateFormSubmit {
flex-shrink: 0;
}

.euiFormHelpText {
order: 1;
}
.euiSuperDatePicker__absoluteDateFormRow {
flex-grow: 1;

.euiFormErrorText {
order: 2;
// CSS hack to make the help/error text extend to the submit button.
// We can't actually put the submit button within an EuiFormRow due to
// cloneElement limitations (https://github.com/elastic/eui/issues/2493#issuecomment-561278494)
// TODO: Remove this and clean up DOM rendering once we can
.euiFormRow__text {
margin-inline-end: -1 * ($euiSizeXL + $euiSizeS); // XL - size of the button, S - size of the flex gap
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -36,35 +36,40 @@ describe('EuiAbsoluteTab', () => {
};

describe('user input', () => {
it('displays the enter key help text when the input has been edited and the date has not yet been parsed', () => {
const { getByTestSubject, queryByText } = render(
const formatHelpText = /Allowed formats: /;

it('displays helptext and a submit button when the input has been edited and the date has not yet been parsed', () => {
const { getByTestSubject, queryByTestSubject, queryByText } = render(
<EuiAbsoluteTab {...props} />
);
const helpText = 'Press the Enter key to parse as a date.';
expect(queryByText(helpText)).not.toBeInTheDocument();
expect(queryByText(formatHelpText)).not.toBeInTheDocument();
expect(
queryByTestSubject('parseAbsoluteDateFormat')
).not.toBeInTheDocument();

const input = getByTestSubject('superDatePickerAbsoluteDateInput');
fireEvent.change(input, { target: { value: 'test' } });

expect(queryByText(helpText)).toBeInTheDocument();
expect(queryByText(formatHelpText)).toBeInTheDocument();
expect(queryByTestSubject('parseAbsoluteDateFormat')).toBeInTheDocument();
});

it('displays the formats as a hint before parse, but as an error if invalid', () => {
const { getByTestSubject, queryByText } = render(
<EuiAbsoluteTab {...props} />
);
const formatHelpText = /Allowed formats: /;
expect(queryByText(formatHelpText)).not.toBeInTheDocument();

const input = getByTestSubject('superDatePickerAbsoluteDateInput');
fireEvent.change(input, { target: { value: 'test' } });
fireEvent.change(getByTestSubject('superDatePickerAbsoluteDateInput'), {
target: { value: 'test' },
});
expect(queryByText(formatHelpText)).toHaveClass('euiFormHelpText');

fireEvent.keyDown(input, { key: 'Enter' });
fireEvent.click(getByTestSubject('parseAbsoluteDateFormat'));
expect(queryByText(formatHelpText)).toHaveClass('euiFormErrorText');
});

it('immediately parses pasted text without needing an extra enter keypress', () => {
it('immediately parses pasted text without needing an extra click or keypress', () => {
const { getByTestSubject, queryByText } = render(
<EuiAbsoluteTab {...props} />
);
Expand All @@ -84,15 +89,14 @@ describe('EuiAbsoluteTab', () => {
});
expect(input).toBeInvalid();

expect(queryByText(/Allowed formats: /)).toBeInTheDocument();
expect(queryByText(/Press the Enter key /)).not.toBeInTheDocument();
expect(queryByText(formatHelpText)).toBeInTheDocument();
});
});

describe('date parsing', () => {
const changeInput = (input: HTMLElement, value: string) => {
fireEvent.change(input, { target: { value } });
fireEvent.keyDown(input, { key: 'Enter' });
fireEvent.change(input, { target: { value: `${value}` } });
fireEvent.submit(input.closest('form')!);
};

it('parses the passed `dateFormat` prop', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,15 @@
* Side Public License, v 1.
*/

import React, { Component, ChangeEvent } from 'react';
import React, { Component, ChangeEvent, FormEvent } from 'react';

import moment, { Moment, LocaleSpecifier } from 'moment'; // eslint-disable-line import/named

import dateMath from '@elastic/datemath';

import { keys } from '../../../../services';
import { EuiFormRow, EuiFieldText, EuiFormLabel } from '../../../form';
import { EuiFlexGroup } from '../../../flex';
import { EuiButtonIcon } from '../../../button';
import { EuiCode } from '../../../code';
import { EuiI18n } from '../../../i18n';

Expand Down Expand Up @@ -167,45 +168,63 @@ export class EuiAbsoluteTab extends Component<
/>
<EuiI18n
tokens={[
'euiAbsoluteTab.dateFormatHint',
'euiAbsoluteTab.dateFormatButtonLabel',
'euiAbsoluteTab.dateFormatError',
]}
defaults={[
'Press the Enter key to parse as a date.',
'Parse date',
'Allowed formats: {dateFormat}, ISO 8601, RFC 2822, or Unix timestamp.',
]}
values={{ dateFormat: <EuiCode>{dateFormat}</EuiCode> }}
>
{([dateFormatHint, dateFormatError]: string[]) => (
<EuiFormRow
className="euiSuperDatePicker__absoluteDateFormRow"
isInvalid={isTextInvalid}
error={isTextInvalid ? dateFormatError : undefined}
helpText={
hasUnparsedText
? isTextInvalid
? dateFormatHint
: [dateFormatHint, dateFormatError]
: undefined
}
{([dateFormatButtonLabel, dateFormatError]: string[]) => (
<EuiFlexGroup
component="form"
onSubmit={(e: FormEvent) => {
e.preventDefault(); // Prevents a page refresh/reload
this.parseUserDateInput(textInputValue);
}}
className="euiSuperDatePicker__absoluteDateForm"
gutterSize="s"
responsive={false}
>
<EuiFieldText
compressed
<EuiFormRow
className="euiSuperDatePicker__absoluteDateFormRow"
isInvalid={isTextInvalid}
value={textInputValue}
onChange={this.handleTextChange}
onPaste={(event) => {
this.parseUserDateInput(event.clipboardData.getData('text'));
}}
onKeyDown={(event) => {
if (event.key === keys.ENTER) {
this.parseUserDateInput(textInputValue);
}
}}
data-test-subj="superDatePickerAbsoluteDateInput"
prepend={<EuiFormLabel>{labelPrefix}</EuiFormLabel>}
/>
</EuiFormRow>
error={isTextInvalid ? dateFormatError : undefined}
helpText={
hasUnparsedText && !isTextInvalid
? dateFormatError
: undefined
}
>
<EuiFieldText
compressed
isInvalid={isTextInvalid}
value={textInputValue}
onChange={this.handleTextChange}
onPaste={(event) => {
this.parseUserDateInput(
event.clipboardData.getData('text')
);
}}
data-test-subj="superDatePickerAbsoluteDateInput"
prepend={<EuiFormLabel>{labelPrefix}</EuiFormLabel>}
/>
</EuiFormRow>
{hasUnparsedText && (
<EuiButtonIcon
type="submit"
className="euiSuperDatePicker__absoluteDateFormSubmit"
size="s"
display="base"
iconType="check"
aria-label={dateFormatButtonLabel}
title={dateFormatButtonLabel}
data-test-subj="parseAbsoluteDateFormat"
/>
)}
</EuiFlexGroup>
)}
</EuiI18n>
</>
Expand Down
7 changes: 7 additions & 0 deletions src/components/portal/portal.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,20 @@
import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';

import { LOKI_SELECTORS } from '../../../.storybook/loki';
import { EuiButton } from '../button';
import { EuiSpacer } from '../spacer';
import { EuiPortal, EuiPortalProps } from './portal';

const meta: Meta<EuiPortalProps> = {
title: 'Utilities/EuiPortal',
component: EuiPortal,
parameters: {
loki: {
// content rendered in portal
chromeSelector: LOKI_SELECTORS.portal,
},
},
argTypes: {
children: { control: 'text' },
},
Expand Down
7 changes: 7 additions & 0 deletions src/components/responsive/show_for.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,13 @@ import { EuiShowFor, EuiShowForProps } from './show_for';
const meta: Meta<EuiShowForProps> = {
title: 'Utilities/EuiShowFor',
component: EuiShowFor,
parameters: {
loki: {
// EuiShowFor may render null resulting in Loki failing
// to find an element to snapshot
skip: true,
},
},
};

export default meta;
Expand Down
Loading

0 comments on commit bcf9e6d

Please sign in to comment.