[OSCI] Clean/breadcrumb updates - Refactoring use of 'let' for 'const…

…' keyword and CSS modifier '--last' for one class only (#1144) (#1248) * refactoring changing 'let' variables with 'const' * refactoring changing 'let' variables with 'const' * refactoring _breadcrumbs.sccs, removing '--last' modifier from .ouiBreadcrumb class, keeping it only in .ouiBreadcrumbWrapper class * refactoring _breadcrumbs.sccs, removing '--last' modifier from .ouiBreadcrumb class, keeping it only in .ouiBreadcrumbWrapper class * updating CHANGELOG.md file * fixing calculation of calculatedMax, breadcrumbs.tsx, line 310 * updating breadcrumbs JSX according suggestion from maintainer for better readability of code --------- (cherry picked from commit 064a02c) Signed-off-by: Samuel Valdes Gutierrez <[email protected]> Signed-off-by: Josh Romero <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Josh Romero <[email protected]>
opensearch-project · May 1, 2024 · 1640f76 · 1640f76
1 parent 5580584
commit 1640f76
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 34 deletions.
diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss
@@ -25,18 +25,15 @@
 
 .ouiBreadcrumb {
   display: inline-block;
+  // TODO: remove important: https://github.com/opensearch-project/oui/issues/376
+  color: $ouiBreadcrumbInactiveTextColor !important; // sass-lint:disable-line no-important
 
-  &:not(.ouiBreadcrumb--last) {
-    // TODO: remove important: https://github.com/opensearch-project/oui/issues/376
-    color: $ouiBreadcrumbInactiveTextColor !important; // sass-lint:disable-line no-important
-
-    &:hover {
-      color: $ouiBreadCrumbHoverColor !important; // sass-lint:disable-line no-important
-    }
+  &:hover {
+    color: $ouiBreadCrumbHoverColor !important; // sass-lint:disable-line no-important
   }
 }
 
-.ouiBreadcrumbs:not(.ouiBreadcrumbs__inPopover) .ouiBreadcrumb--last {
+.ouiBreadcrumbs:not(.ouiBreadcrumbs__inPopover) .ouiBreadcrumbWrapper--last .ouiBreadcrumb {
   font-weight: $ouiFontWeightMedium;
 }
 
@@ -114,6 +111,16 @@
     margin-bottom: $ouiSizeXS; /* 1 */
     padding-left: $ouiSizeL - $ouiSizeXS + calc($ouiBreadcrumbSpacing / 2);
   }
+
+  // This targets the last breadcrumb wrapper and sets a different text color for the breadcrumb inside it.
+  &.ouiBreadcrumbWrapper--last .ouiBreadcrumb {
+    // TODO: remove important: https://github.com/opensearch-project/oui/issues/376
+    color: inherit !important; // sass-lint:disable-line no-important
+
+    &:hover {
+      color: inherit !important; // sass-lint:disable-line no-important
+    }
+  }
 }
 
 .ouiBreadcrumbWall {

diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx
@@ -241,10 +241,8 @@ export const OuiBreadcrumbs: FunctionComponent<OuiBreadcrumbsProps> = ({
       'ouiBreadcrumb--truncate': truncate,
     });
 
-    let link;
-
-    if (!href && !onClick) {
-      link = (
+    const link =
+      !href && !onClick ? (
         <OuiInnerText>
           {(ref, innerText) => (
             <span
@@ -257,9 +255,7 @@ export const OuiBreadcrumbs: FunctionComponent<OuiBreadcrumbsProps> = ({
             </span>
           )}
         </OuiInnerText>
-      );
-    } else {
-      link = (
+      ) : (
         <OuiInnerText>
           {(ref, innerText) => (
             <OuiLink
@@ -275,19 +271,19 @@ export const OuiBreadcrumbs: FunctionComponent<OuiBreadcrumbsProps> = ({
           )}
         </OuiInnerText>
       );
-    }
-
-    let wrapper = <div className={breadcrumbWrapperClasses}>{link}</div>;
 
-    if (isFirstBreadcrumb) {
-      const breadcrumbWallClasses = classNames('ouiBreadcrumbWall', {
-        'ouiBreadcrumbWall--single': isLastBreadcrumb,
-      });
+    const breadcrumbWallClasses = classNames('ouiBreadcrumbWall', {
+      'ouiBreadcrumbWall--single': isFirstBreadcrumb && isLastBreadcrumb,
+    });
 
-      wrapper = <div className={breadcrumbWallClasses}>{wrapper}</div>;
-    }
+    const wrapper = <div className={breadcrumbWrapperClasses}>{link}</div>;
+    const wall = isFirstBreadcrumb ? (
+      <div className={breadcrumbWallClasses}>{wrapper}</div>
+    ) : (
+      wrapper
+    );
 
-    return <Fragment key={index}>{wrapper}</Fragment>;
+    return <Fragment key={index}>{wall}</Fragment>;
   });
 
   // Use the default object if they simply passed `true` for responsive
@@ -297,15 +293,16 @@ export const OuiBreadcrumbs: FunctionComponent<OuiBreadcrumbsProps> = ({
   // The max property collapses any breadcrumbs past the max quantity.
   // This is the same behavior we want for responsiveness.
   // So calculate the max value based on the combination of `max` and `responsive`
-  let calculatedMax: OuiBreadcrumbsProps['max'] = max;
-  // Set the calculated max to the number associated with the currentBreakpoint key if it exists
-  if (responsive && responsiveObject[currentBreakpoint as OuiBreakpointSize]) {
-    calculatedMax = responsiveObject[currentBreakpoint as OuiBreakpointSize];
-  }
-  // Final check is to make sure max is used over a larger breakpoint value
-  if (max && calculatedMax) {
-    calculatedMax = max < calculatedMax ? max : calculatedMax;
-  }
+
+  // First, calculate the responsive max value
+  const responsiveMax =
+    responsive && responsiveObject[currentBreakpoint as OuiBreakpointSize]
+      ? responsiveObject[currentBreakpoint as OuiBreakpointSize]
+      : null;
+
+  // Second, if both max and responsiveMax are set, use the smaller of the two. Otherwise, use the one that is set.
+  const calculatedMax: OuiBreadcrumbsProps['max'] =
+    max && responsiveMax ? Math.min(max, responsiveMax) : max || responsiveMax;
 
   const limitedBreadcrumbs = calculatedMax
     ? limitBreadcrumbs(breadcrumbElements, calculatedMax, breadcrumbs)