Merge branch '1.x' into backport/backport-1135-to-1.x

.github/CODEOWNERS

@@ -1 +1 @@
-*   @AMoo-Miki @rednaksi91 @KrooshalUX @BSFishy @bandinib-amzn @ashwin-pc @joshuarrrr @andreymyssak @SergeyMyssak
+*   @AMoo-Miki @rednaksi91 @bandinib-amzn @ashwin-pc @joshuarrrr @andreymyssak @SergeyMyssak

.sass-lint.yml

@@ -90,3 +90,5 @@ rules:
   no-warn: 0
   # Transition all is useful in certain situations and there's no recent info to suggest slowdown
   no-transition-all: 0
+
+  hex-length: 'long'

CHANGELOG.md

@@ -7,6 +7,8 @@
 - Bump `babel-template` from `6.26.0` to `@babel/template` `7.10.4` ([#1095](https://github.com/opensearch-project/oui/pull/1095))
 - [CVE-2023-46234] Bump `browserify-sign` from `4.0.4` to `4.2.2` ([#1117](https://github.com/opensearch-project/oui/pull/1117))
 - [CVE-2023-45133] Bump `@babel/traverse` from `7.12.10` to `7.23.6` ([#1174](https://github.com/opensearch-project/oui/pull/1174))
+- [CVE-2024-28863] Bump `tar` from `6.1.11` to `6.2.1` ([#1260](https://github.com/opensearch-project/oui/pull/1260))
+- [CVE-2024-28849] Bump `follow-redirects` from `1.15.4` to `1.15.6` ([#1258](https://github.com/opensearch-project/oui/pull/1258))
 
 ### 📈 Features/Enhancements
 

MAINTAINERS.md

@@ -5,11 +5,9 @@ This document contains a list of maintainers in this repo. See [opensearch-proje
 ## Current Maintainers
 
 | Maintainer               | GitHub ID                                         | Affiliation |
-| ------------------------ | ------------------------------------------------- | ----------- |
+|--------------------------|---------------------------------------------------|-------------|
 | Miki Barahmand           | [AMoo-Miki](https://github.com/AMoo-Miki)         | Amazon      |
 | Iskander Rakhmanberdiyev | [rednaksi91](https://github.com/rednaksi91)       | Amazon      |
-| Kroosh                   | [KrooshalUX](https://github.com/KrooshalUX)       | Amazon      |
-| Matt Provost             | [BSFishy](https://github.com/BSFishy)             | Amazon      |
 | Bandini                  | [bandinib-amzn](https://github.com/bandinib-amzn) | Amazon      |
 | Ashwin P Chandran        | [ashwin-pc](https://github.com/ashwin-pc)         | Amazon      |
 | Josh Romero              | [joshuarrrr](https://github.com/joshuarrrr)       | Amazon      |
@@ -21,4 +19,6 @@ This document contains a list of maintainers in this repo. See [opensearch-proje
 
 | Maintainer               | GitHub ID                                         | Affiliation |
 |--------------------------|---------------------------------------------------|-------------|
+| Matt Provost             | [BSFishy](https://github.com/BSFishy)             | Contributor |
+| Kroosh                   | [KrooshalUX](https://github.com/KrooshalUX)       | Contributor |
 | Sean Neumann             | [seanneumann](https://github.com/seanneumann)     | Contributor |

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 {

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)

src/components/datagrid/_data_grid_data_row.scss

@@ -166,21 +166,6 @@
 }
 
 .ouiDataGridRowCell {
-  box-shadow: none !important; // sass-lint:disable-line no-important
-
-  /* ToDo: Remove unnecessary logic: the old beta theme has
-   * evolved and the statement below about the `Next` theme
-   * is not valid.
-   */
-  // Remove default .ouiButtonIcon--fill border
-  // This way we don't need to animate the border that is inexistent in Next and unnecessary for a fill button
-  border: none;
-
-  &-isActive {
-    margin-left: $ouiDataGridCellPaddingM;
-    width: $ouiSizeM;
-  }
-
   &__actionButtonIcon,
   &__expandButtonIcon {
     height: $ouiSizeM;
@@ -190,6 +175,23 @@
     transition: none; // Have to take out the generic transition so it is instantaneous on focus
   }
 
+  &__expandButtonIcon {
+    box-shadow: none !important; // sass-lint:disable-line no-important
+
+    /* ToDo: Remove unnecessary logic: the old beta theme has
+     * evolved and the statement below about the `Next` theme
+     * is not valid.
+     */
+    // Remove default .ouiButtonIcon--fill border
+    // This way we don't need to animate the border that is inexistent in Next and unnecessary for a fill button
+    border: none;
+
+    &-isActive {
+      margin-left: $ouiDataGridCellPaddingM;
+      width: $ouiSizeM;
+    }
+  }
+
   &__expandButton > * {
     z-index: 2;
   }

src/components/resizable_container/_resizable_collapse_button.scss

@@ -40,7 +40,9 @@
 
   &:not(:focus):not(:active):not(.ouiResizableToggleButton-isVisible):not(.ouiResizableToggleButton-isCollapsed) {
     @include ouiScreenReaderOnly;
-    margin: -2px; // To accomodate ouiButtonIcon's border
+    border-width: 0;
+    height: 0;
+    width: 0;
   }
 }
 

src/services/color/oui_palettes.ts

@@ -178,7 +178,7 @@ export const ouiPaletteForLightBackground = function (): OuiPalette {
 };
 
 export const ouiPaletteForDarkBackground = function (): OuiPalette {
-  return ['#1BA9F5', '#7DE2D1', '#F990C0', '#F66', '#FFCE7A'];
+  return ['#1BA9F5', '#7DE2D1', '#F990C0', '#FF6666', '#FFCE7A'];
 };
 
 const positiveColor: HEX = '#209280';

src/themes/oui-next/oui_next_colors_dark.scss

@@ -23,7 +23,7 @@ $ouiColorAccent: #F990C0;
 // Status
 $ouiColorSuccess: $ouiColorSecondary;
 $ouiColorWarning: #FFCE7A;
-$ouiColorDanger: #F66;
+$ouiColorDanger: #FF6666;
 
 // Grays
 $ouiColorEmptyShade: #0A121A;

src/themes/oui/oui_colors_dark.scss

@@ -23,7 +23,7 @@ $ouiColorAccent: #F990C0;
 // Status
 $ouiColorSuccess: $ouiColorSecondary;
 $ouiColorWarning: #FFCE7A;
-$ouiColorDanger: #F66;
+$ouiColorDanger: #FF6666;
 
 // Grays
 $ouiColorEmptyShade: #1D1E24;