Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[EuiAccordion] Split up rendering into sub-components & other cleanups #7161

Merged
merged 12 commits into from
Sep 8, 2023
Merged

[EuiAccordion] Split up rendering into sub-components & other cleanups #7161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
a73bede
[REFACTOR] Split up accordion trigger into button & arrow sub-components
cee-chen Sep 2, 2023
5ca4269
[rename] Update downstream references to accordion arrow className
cee-chen Sep 4, 2023
255b5fb
[misc cleanup] EuiAccordion - reorder imports & props
cee-chen Sep 2, 2023
84d8479
[REFACTOR] Split up accordion children into sub-components
cee-chen Sep 2, 2023
f7773f4
[refactor] Switch to styles obj instead of modifying a DOM element di…
cee-chen Sep 4, 2023
87f4faa
[refactor] Remove manual tabbable controls and use `inert` attribute …
cee-chen Sep 4, 2023
8567a31
[opinionated refactor] Clean up child wrapper styles
cee-chen Sep 4, 2023
a72aa94
[regression] Fix children wrapper `.focus()` to only occur after mount
cee-chen Sep 4, 2023
3e82e7e
More downstream snapshot updates
cee-chen Sep 4, 2023
e195f62
changelog + minor stylelint cleanup
cee-chen Sep 6, 2023
dbcab02
[PR feedback] Reduce CSS overrides on arrow styles
cee-chen Sep 8, 2023
2d32730
:facepalm: Fix incorrect CSS
cee-chen Sep 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
473 changes: 208 additions & 265 deletions src/components/accordion/__snapshots__/accordion.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/components/accordion/accordion.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ describe('EuiAccordion', () => {
</EuiPanel>
</EuiAccordion>
);
cy.get('.euiAccordion__iconButton').should('not.exist');
cy.get('.euiAccordion__arrow').should('not.exist');
});

it('manages focus when panel is clicked', () => {
Expand Down
138 changes: 2 additions & 136 deletions src/components/accordion/accordion.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,9 @@
*/

import { css } from '@emotion/react';

import { UseEuiTheme } from '../../services';
import {
euiFontSize,
logicals,
logicalCSS,
logicalTextAlignCSS,
} from '../../global_styling';
import { logicalCSS } from '../../global_styling';

export const euiAccordionStyles = ({ euiTheme }: UseEuiTheme) => {
return {
Expand All @@ -35,133 +31,3 @@ export const euiAccordionStyles = ({ euiTheme }: UseEuiTheme) => {
},
};
};

export const euiAccordionButtonStyles = (euiThemeContext: UseEuiTheme) => {
const { euiTheme } = euiThemeContext;
return {
euiAccordion__button: css`
${euiFontSize(euiThemeContext, 's')}
align-items: center;
display: flex;
flex-grow: 1;
line-height: ${euiTheme.size.l};
${logicalTextAlignCSS('left')}
${logicalCSS('width', '100%')}

&:hover,
&:focus {
cursor: pointer;
text-decoration: underline;
}
`,
// Triggering button needs separate `disabled` key because the element that renders may not support `:disabled`;
// Hover pseudo selector for specificity
disabled: css`
&,
&:hover {
cursor: not-allowed;
color: ${euiTheme.colors.disabledText};
text-decoration: none;
}
`,
// Optional padding sizes
s: css`
padding: ${euiTheme.size.s};
`,
m: css`
padding: ${euiTheme.size.base};
`,
l: css`
padding: ${euiTheme.size.l};
`,
// Remove padding from the accordion button on the side that the arrow is on
arrowLeft: css`
${logicalCSS('padding-left', 0)}
`,
arrowRight: css`
${logicalCSS('padding-left', 0)}
`,
};
};

export const euiAccordionChildrenStyles = ({ euiTheme }: UseEuiTheme) => ({
euiAccordion__children: css``,
isLoading: css`
align-items: center;
display: flex;
`,
xs: css`
padding: ${euiTheme.size.xs};
`,
s: css`
padding: ${euiTheme.size.s};
`,
m: css`
padding: ${euiTheme.size.base};
`,
l: css`
padding: ${euiTheme.size.l};
`,
xl: css`
padding: ${euiTheme.size.xl};
`,
});

export const euiAccordionChildWrapperStyles = ({ euiTheme }: UseEuiTheme) => ({
euiAccordion__childWrapper: css`
${logicalCSS('height', 0)}
opacity: 0;
overflow: hidden;
transition: ${logicals.height} ${euiTheme.animation.normal}
${euiTheme.animation.resistance},
opacity ${euiTheme.animation.normal} ${euiTheme.animation.resistance};
visibility: hidden;

&:focus {
outline: none; /* Hide focus ring because of tabindex=-1 on Safari */
}
`,
isOpen: css`
${logicalCSS('height', 'auto')}
opacity: 1;
visibility: visible;
`,
});

export const euiAccordionIconButtonStyles = ({ euiTheme }: UseEuiTheme) => ({
euiAccordion__iconButton: css`
flex-shrink: 0;
${logicalCSS('margin-right', euiTheme.size.xs)}
transform: rotate(
0deg
) !important; /* stylelint-disable-line declaration-no-important */
`,
isOpen: css`
transform: rotate(
90deg
) !important; /* stylelint-disable-line declaration-no-important */
`,
arrowRight: css`
${logicalCSS('margin-left', euiTheme.size.xs)}
${logicalCSS('margin-right', 0)}
`,
});

export const euiAccordionOptionalActionStyles = () => ({
euiAccordion__optionalAction: css`
flex-shrink: 0;
`,
});

export const euiAccordionSpinnerStyles = ({ euiTheme }: UseEuiTheme) => ({
euiAccordion__spinner: css`
${logicalCSS('margin-right', euiTheme.size.xs)}
`,
});

export const euiAccordionTriggerWrapperStyles = () => ({
euiAccordion__triggerWrapper: css`
align-items: center;
display: flex;
`,
});
36 changes: 1 addition & 35 deletions src/components/accordion/accordion.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
*/

import React from 'react';
import { fireEvent } from '@testing-library/react';
import { mount } from 'enzyme';
import { shouldRenderCustomStyles } from '../../test/internal';
import { requiredProps } from '../../test/required_props';
Expand Down Expand Up @@ -151,6 +150,7 @@ describe('EuiAccordion', () => {
);

expect(container.firstChild).toMatchSnapshot();
expect(container.firstChild).not.toHaveAttribute('inert');
});
});

Expand Down Expand Up @@ -323,39 +323,5 @@ describe('EuiAccordion', () => {

expect(childWrapper).toBe(document.activeElement);
});

it('sets tabbable children to `tabIndex={-1}` when accordions are closed', () => {
const { container } = render(
<EuiAccordion id={getId()}>
<button>tabbable item one</button>
<input type="text" placeholder="tabbable item two" />
<a href="#">tabbable item three</a>
<div tabIndex={0}>tabbable item four</div>
</EuiAccordion>
);
const children = container.querySelector('.euiAccordion__children')!;

expect(children.querySelectorAll('[tabindex="-1"]')).toHaveLength(4);
expect(children).toMatchSnapshot();
});

it('restores tabbable children on accordion open', () => {
const { container, getByTestSubject } = render(
<EuiAccordion
id={getId()}
buttonProps={{ 'data-test-subj': 'trigger' }}
>
<button>tabbable item one</button>
<input type="text" placeholder="tabbable item two" />
<a href="#">tabbable item three</a>
<div tabIndex={0}>tabbable item four</div>
</EuiAccordion>
);
fireEvent.click(getByTestSubject('trigger'));
const children = container.querySelector('.euiAccordion__children')!;

expect(children.querySelectorAll('[tabindex="-1"]')).toHaveLength(0);
expect(children).toMatchSnapshot();
});
});
});
Loading
Loading