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

[SharedUX] Replace Sass with Emotion, Round 1 #199885

Merged
merged 20 commits into from
Dec 4, 2024
Merged

[SharedUX] Replace Sass with Emotion, Round 1 #199885

Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
73bb3a8
Use Emotion for loading-indicator CSS
tsullivan Nov 12, 2024
5f6cede
Use Emotion for header-logo CSS
tsullivan Nov 12, 2024
d3fe030
Use Emotion for collapsible-nav CSS
tsullivan Nov 12, 2024
3ce08ce
Use “object styles” syntax
tsullivan Nov 12, 2024
d695c41
Merge branch 'main' into remove-sass/core-chrome-browser-internal
tsullivan Nov 13, 2024
ae46116
Restore className props
tsullivan Nov 13, 2024
4377bee
update test snapshots
tsullivan Nov 13, 2024
1779bbb
Remove unused scss
tsullivan Nov 13, 2024
134052b
remove classNames that are not needed
tsullivan Nov 13, 2024
8e4cd1d
restore styles to stop global header buttons from jumping during load…
tsullivan Nov 13, 2024
1d440a7
Merge branch 'main' into remove-sass/core-chrome-browser-internal
tsullivan Nov 14, 2024
0f6006c
fix enzyme test
tsullivan Nov 14, 2024
1229f05
Merge branch 'main' into remove-sass/core-chrome-browser-internal
tsullivan Nov 18, 2024
4473066
Merge branch 'main' into remove-sass/core-chrome-browser-internal
tsullivan Nov 20, 2024
bb45851
replace className with data-test-subj
tsullivan Nov 20, 2024
1ada42c
Merge branch 'main' into remove-sass/core-chrome-browser-internal
tsullivan Nov 21, 2024
8b027a0
update snapshot
tsullivan Nov 21, 2024
24f6977
Remove `chrHeaderLogo` className
tsullivan Nov 21, 2024
9395489
Merge branch 'main' into remove-sass/core-chrome-browser-internal
tsullivan Nov 25, 2024
0cd19de
Merge branch 'main' into remove-sass/core-chrome-browser-internal
logeekal Dec 4, 2024
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
73 changes: 52 additions & 21 deletions .../chrome/core-chrome-browser-internal/src/ui/__snapshots__/loading_indicator.test.tsx.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

40 changes: 28 additions & 12 deletions ...me/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions ...core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

46 changes: 0 additions & 46 deletions packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss
View file
Open in desktop

This file was deleted.

15 changes: 9 additions & 6 deletions packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.tsx
View file
Open in desktop
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"
className="eui-textInheritColor"
css={styles.navSolutionGroupLink}
{...createOverviewLink({
link: overviewLink,
navigateToUrl,
Expand Down
Loading