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

[Emotion] Convert EuiCollapsibleNav and EuiCollapsibleNavGroup #6865

Merged
merged 13 commits into from
Jun 23, 2023
Merged

[Emotion] Convert EuiCollapsibleNav and EuiCollapsibleNavGroup #6865

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
eb8e07d
Convert EuiCollapsibleNav to Emotion
cee-chen Jun 20, 2023
dbd06eb
[EuiCollapsibleNavGroup] Set up base Emotion styles
cee-chen Jun 20, 2023
e069e93
[EuiCollapsibleNavGroup] Convert `background` prop to Emotion
cee-chen Jun 20, 2023
e24431a
Remove unused focus animation
cee-chen Jun 21, 2023
88f0237
Remove unused font-weight
cee-chen Jun 21, 2023
c0586ad
Convert remaining padding CSS
cee-chen Jun 21, 2023
86118b5
Delete all Sass files
cee-chen Jun 21, 2023
796ef7d
Convert Enzyme tests to RTL
cee-chen Jun 21, 2023
0f49c0c
[docs] Remove now-unnecessary `EuiThemeProvider` from collapsible nav…
cee-chen Jun 21, 2023
eebcabf
Set up Storybooks
cee-chen Jun 21, 2023
c3ced8c
Add full pattern storybook demo
cee-chen Jun 21, 2023
bd1d1ad
changelog
cee-chen Jun 22, 2023
71bb4b8
Revert "Add full pattern storybook demo"
cee-chen Jun 23, 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
26 changes: 13 additions & 13 deletions ...s/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,36 @@
exports[`EuiCollapsibleNavGroup is rendered 1`] = `
<div
aria-label="aria-label"
class="euiCollapsibleNavGroup testClass1 testClass2 emotion-euiCollapsibleNavGroup-none"
class="euiCollapsibleNavGroup testClass1 testClass2 emotion-euiCollapsibleNavGroup-notCollapsible-none"
data-test-subj="test subject string"
id="id"
/>
`;

exports[`EuiCollapsibleNavGroup props background dark is rendered 1`] = `
<div
class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-dark"
class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-dark"
id="id"
/>
`;

exports[`EuiCollapsibleNavGroup props background light is rendered 1`] = `
<div
class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-light"
class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-light"
id="id"
/>
`;

exports[`EuiCollapsibleNavGroup props background none is rendered 1`] = `
<div
class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-none"
class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-none"
id="id"
/>
`;

exports[`EuiCollapsibleNavGroup props iconProps renders data-test-subj 1`] = `
<div
class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup-none"
class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-none"
id="id"
>
<div
Expand Down Expand Up @@ -66,7 +66,7 @@ exports[`EuiCollapsibleNavGroup props iconProps renders data-test-subj 1`] = `

exports[`EuiCollapsibleNavGroup props iconSize is rendered 1`] = `
<div
class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup-none"
class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-none"
id="id"
>
<div
Expand Down Expand Up @@ -99,7 +99,7 @@ exports[`EuiCollapsibleNavGroup props iconSize is rendered 1`] = `

exports[`EuiCollapsibleNavGroup props iconType is rendered 1`] = `
<div
class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup-none"
class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-none"
id="id"
>
<div
Expand Down Expand Up @@ -132,7 +132,7 @@ exports[`EuiCollapsibleNavGroup props iconType is rendered 1`] = `

exports[`EuiCollapsibleNavGroup props title is rendered 1`] = `
<div
class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup-none"
class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-none"
id="id"
>
<div
Expand All @@ -158,7 +158,7 @@ exports[`EuiCollapsibleNavGroup props title is rendered 1`] = `

exports[`EuiCollapsibleNavGroup props titleElement can change the rendered element to h2 1`] = `
<div
class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup-none"
class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-none"
id="id"
>
<div
Expand All @@ -184,22 +184,22 @@ exports[`EuiCollapsibleNavGroup props titleElement can change the rendered eleme

exports[`EuiCollapsibleNavGroup props titleSize can be larger 1`] = `
<div
class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-none"
class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-none"
id="id"
/>
`;

exports[`EuiCollapsibleNavGroup throws a warning if iconType is passed without a title 1`] = `
<div
class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-none"
class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-none"
id="id"
/>
`;

exports[`EuiCollapsibleNavGroup when isCollapsible is true accepts accordion props 1`] = `
<div
aria-label="aria-label"
class="euiAccordion euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading testClass1 testClass2 emotion-euiCollapsibleNavGroup-none"
class="euiAccordion euiCollapsibleNavGroup testClass1 testClass2 emotion-euiCollapsibleNavGroup-isCollapsible-none"
data-test-subj="test subject string"
>
<div
Expand Down Expand Up @@ -267,7 +267,7 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true accepts accordion pro

exports[`EuiCollapsibleNavGroup when isCollapsible is true will render an accordion 1`] = `
<div
class="euiAccordion euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup-none"
class="euiAccordion euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-isCollapsible-none"
>
<div
class="euiAccordion__triggerWrapper emotion-euiAccordion__triggerWrapper"
Expand Down
18 changes: 0 additions & 18 deletions src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
.euiCollapsibleNavGroup {
// This class does not accept a custom classname
.euiAccordion__triggerWrapper {
// Add padding to the trigger wrapper in case an `extraAction` is passed
// that doesn't get wrapped in the `__heading`
padding: $euiSize;
}
}

.euiCollapsibleNavGroup--light {
Expand All @@ -14,16 +8,4 @@
}

.euiCollapsibleNavGroup__heading {
// If the heading is not in an accordion, it needs the padding
&:not(.euiAccordion__button) {
padding: $euiSize;
}
}

.euiCollapsibleNavGroup__children {
padding: $euiSizeS;
}

.euiCollapsibleNavGroup--withHeading .euiCollapsibleNavGroup__children {
padding-top: 0;
}
22 changes: 22 additions & 0 deletions src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,5 +36,27 @@ export const euiCollapsibleNavGroupStyles = ({
color: ${euiTheme.colors.ghost};
}
`,
// Header padding
isCollapsible: css`
/* This class does not accept a custom className */
.euiAccordion__triggerWrapper {
padding: ${euiTheme.size.base};
}
`,
notCollapsible: css`
/* If the heading is not in an accordion, it needs the padding */
.euiCollapsibleNavGroup__heading {
padding: ${euiTheme.size.base};
}
Comment on lines +41 to +50
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The notCollapsible nested selector could technically be flattened out by applying it directly to .euiCollapsibleNavGroup__heading, but personally I prefer it written this way - it's clearer (at least in my opinion) what the contrasting states are and where the padding needs to be applied.

I'm also being a bit more lax in this component's CSS specificity since we're redesigning the component here shortly.

`,
// Children padding
childrenWrapper: {
euiCollapsibleNavGroup__children: css`
padding: ${euiTheme.size.s};
`,
withHeading: css`
${logicalCSS('padding-top', 0)}
`,
},
};
};
17 changes: 9 additions & 8 deletions src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,16 +119,11 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
const styles = euiCollapsibleNavGroupStyles(euiTheme);
const cssStyles = [
styles.euiCollapsibleNavGroup,
isCollapsible ? styles.isCollapsible : styles.notCollapsible,
background && styles[background],
];

const classes = classNames(
'euiCollapsibleNavGroup',
{
'euiCollapsibleNavGroup--withHeading': title,
},
className
);
const classes = classNames('euiCollapsibleNavGroup', className);

// Warn if consumer passes an iconType without a title
if (iconType && !title) {
Expand All @@ -137,8 +132,14 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
);
}

const childrenStyles = [
styles.childrenWrapper.euiCollapsibleNavGroup__children,
title && styles.childrenWrapper.withHeading,
];
const content = children && (
<div className="euiCollapsibleNavGroup__children">{children}</div>
<div css={childrenStyles} className="euiCollapsibleNavGroup__children">
{children}
</div>
);

const headingClasses = 'euiCollapsibleNavGroup__heading';
Expand Down