Skip to content

Commit

Permalink
Use Emotion for collapsible-nav CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
tsullivan committed Nov 12, 2024
1 parent 5f6cede commit d3fe030
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 52 deletions.

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
* License v3.0 only", or the "Server Side Public License, v 1".
*/

import './collapsible_nav.scss';
import {
EuiThemeProvider,
EuiCollapsibleNav,
Expand All @@ -18,6 +17,7 @@ import {
EuiListGroupItem,
EuiCollapsibleNavProps,
EuiButton,
useEuiTheme,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { groupBy, sortBy } from 'lodash';
Expand All @@ -36,6 +36,7 @@ import {
createEuiButtonItem,
createOverviewLink,
} from './nav_link';
import { getCollapsibleNavStyles } from './get_collapsible_nav_styles';

function getAllCategories(allCategorizedLinks: Record<string, ChromeNavLink[]>) {
const allCategories = {} as Record<string, AppCategory | undefined>;
Expand Down Expand Up @@ -149,6 +150,7 @@ export function CollapsibleNav({
...(needsIcon && { basePath }),
});
};
const styles = getCollapsibleNavStyles(useEuiTheme());

return (
<EuiCollapsibleNav
Expand All @@ -162,7 +164,7 @@ export function CollapsibleNav({
button={button}
ownFocus={false}
size={248}
className="kbnCollapsibleNav"
css={styles.navCss}
>
{customNavLink && (
<>
Expand Down Expand Up @@ -275,14 +277,14 @@ export function CollapsibleNav({
color="subdued"
gutterSize="none"
size="s"
className="kbnCollapsibleNav__recentsListGroup"
css={styles.navRecentsListGroupCss}
/>
</EuiCollapsibleNavGroup>
)}

<EuiHorizontalRule margin="none" />

<EuiFlexItem className="kbnCollapsibleNav__solutions">
<EuiFlexItem css={styles.navSolutions}>
{/* Kibana, Observability, Security, and Management sections */}
{orderedCategories.map((categoryName) => {
const category = categoryDictionary[categoryName]!;
Expand All @@ -294,11 +296,12 @@ export function CollapsibleNav({
iconType={category.euiIconType}
iconSize="m"
buttonElement={overviewLink ? 'div' : 'button'}
buttonClassName="kbnCollapsibleNav__solutionGroupButton"
css={styles.navSolutionGroupButton}
title={
overviewLink ? (
<a
className="eui-textInheritColor kbnCollapsibleNav__solutionGroupLink"
css={styles.navSolutionGroupLink}
className="eui-textInheritColor"
{...createOverviewLink({
link: overviewLink,
navigateToUrl,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
/*
* 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
* License v3.0 only", or the "Server Side Public License, v 1".
*/

import { UseEuiTheme, euiYScroll, mathWithUnits } from '@elastic/eui';
import { css } from '@emotion/react';

export const getCollapsibleNavStyles = (euiThemeContext: UseEuiTheme) => {
const { euiTheme } = euiThemeContext;
const screenHeightBreakpoint = mathWithUnits(euiTheme.size.base, (x) => x * 15);
const _euiYScroll = euiYScroll(euiThemeContext);

const navCss = css`
@media (max-height: ${screenHeightBreakpoint}) {
overflow-y: auto;
}
`;

const navRecentsListGroupCss = [
css`
max-height: calc(${euiTheme.size.base} * 10);
margin-right: -${euiTheme.size.s};
`,
_euiYScroll,
];

const navSolutions = [
_euiYScroll,
css`
/**
* Allows the solutions nav group to be viewed on
* very small screen sizes and when the browser Zoom is high
*/
@media (max-height: ${screenHeightBreakpoint}) {
flex: 1 0 auto;
}
`,
];

/**
* 1. Increase the hit area of the link (anchor)
* 2. Only show the text underline when hovering on the text/anchor portion
*/
const navSolutionGroupButton = css`
display: block; /* 1 */
&:hover {
text-decoration: none; /* 2 */
}
`;

const navSolutionGroupLink = css`
display: block; /* 1 */
&:hover {
text-decoration: underline; /* 2 */
}
`;

return {
navCss,
navRecentsListGroupCss,
navSolutions,
navSolutionGroupButton,
navSolutionGroupLink,
};
};

0 comments on commit d3fe030

Please sign in to comment.