refactor(Euibreadcrumb): separate styles

mgadewoll · mgadewoll · commit 353ecf5a7f48 · 2024-04-04T10:06:25.000+02:00
- updates styles to scope design changes to page breadcrumbs only

+ re-adds font-weight for application breadcrumbs
diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`EuiBreadcrumbCollapsed renders a ... breadcrumb with collapsed content
         class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"
       >
         <button
-          class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-application-isInteractive"
+          class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-application"
           title="See collapsed breadcrumbs"
           type="button"
         >
diff --git a/src/components/breadcrumbs/_breadcrumb_content.styles.ts b/src/components/breadcrumbs/_breadcrumb_content.styles.ts
@@ -88,6 +88,7 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
     `,
     application: css`
       ${euiFontSize(euiThemeContext, 'xs')}
+      font-weight: ${euiTheme.font.weight.medium};
       background-color: ${applicationTextColors.backgroundColor};
       clip-path: polygon(
         0 0,
diff --git a/src/components/breadcrumbs/_breadcrumb_content.tsx b/src/components/breadcrumbs/_breadcrumb_content.tsx
@@ -49,11 +49,13 @@ export const EuiBreadcrumbContent: FunctionComponent<
   truncateLastBreadcrumb,
   ...rest
 }) => {
+  const isApplication = type === 'application';
+
   const classes = classNames('euiBreadcrumb__content', className);
 
   const styles = useEuiMemoizedStyles(euiBreadcrumbContentStyles);
   const cssStyles = [styles.euiBreadcrumb__content, styles[type]];
-  if (type === 'application') {
+  if (isApplication) {
     if (isOnlyBreadcrumb) {
       cssStyles.push(styles.applicationStyles.onlyChild);
     } else if (isFirstBreadcrumb) {
@@ -74,6 +76,7 @@ export const EuiBreadcrumbContent: FunctionComponent<
 
   const interactionStyles =
     (isInteractiveBreadcrumb || isBreadcrumbWithPopover) &&
+    !isApplication &&
     styles.isInteractive;
 
   return (
diff --git a/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.tsx.snap b/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`EuiHeaderBreadcrumbs is rendered 1`] = `
       data-test-subj="euiBreadcrumb"
     >
       <a
-        class="euiLink euiBreadcrumb__content customClass emotion-euiLink-subdued-euiBreadcrumb__content-application-firstChild-isTruncated-isInteractive"
+        class="euiLink euiBreadcrumb__content customClass emotion-euiLink-subdued-euiBreadcrumb__content-application-firstChild-isTruncated"
         data-test-subj="breadcrumbsAnimals"
         href="#"
         rel="noreferrer"
@@ -28,7 +28,7 @@ exports[`EuiHeaderBreadcrumbs is rendered 1`] = `
       data-test-subj="euiBreadcrumb"
     >
       <button
-        class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-application-isTruncated-isInteractive"
+        class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-application-isTruncated"
         title="Reptiles"
         type="button"
       >
@@ -40,7 +40,7 @@ exports[`EuiHeaderBreadcrumbs is rendered 1`] = `
       data-test-subj="euiBreadcrumb"
     >
       <a
-        class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-application-isTruncated-isInteractive"
+        class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-application-isTruncated"
         href="#"
         rel="noreferrer"
         title="Boa constrictor"

Original file line number	Diff line number	Diff line change
@@ -20,7 +20,7 @@ exports[`EuiBreadcrumbCollapsed renders a ... breadcrumb with collapsed content
`20`	`20`	`class="euiPopover emotion-euiPopover-inline-block-euiBreadcrumb__popoverWrapper"`
`21`	`21`	`>`
`22`	`22`	`<button`
`23`		`- class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-application-isInteractive"`
	`23`	`+ class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__popoverButton-euiBreadcrumb__content-application"`
`24`	`24`	`title="See collapsed breadcrumbs"`
`25`	`25`	`type="button"`
`26`	`26`	`>`