[terra-navigation-side-menu] selection color change (#2155)

cerner · May 8, 2024 · df27d2e · df27d2e
1 parent d7176cc
commit df27d2e
Show file tree

Hide file tree

Showing 38 changed files with 23 additions and 18 deletions.
diff --git a/...l-lowlight-theme/en/chrome_large/application-layout-spec/application_layout.png b/...l-lowlight-theme/en/chrome_large/application-layout-spec/application_layout.png
diff --git a/...e/en/chrome_large/application-layout-spec/application_layout_with_nav_icons.png b/...e/en/chrome_large/application-layout-spec/application_layout_with_nav_icons.png
diff --git a/...ome_large/application-layout-spec/application_layout_with_no_header_content.png b/...ome_large/application-layout-spec/application_layout_with_no_header_content.png
diff --git a/...e_large/application-layout-spec/application_layout_with_top_navigation_tabs.png b/...e_large/application-layout-spec/application_layout_with_top_navigation_tabs.png
diff --git a/...me_large/application-layout-spec/checks_for_closure_on_read-only_item_click.png b/...me_large/application-layout-spec/checks_for_closure_on_read-only_item_click.png
diff --git a/...e/en/chrome_large/application-layout-spec/presents_utility_menu_from_header.png b/...e/en/chrome_large/application-layout-spec/presents_utility_menu_from_header.png
diff --git a/...ome_small/application-layout-spec/application_layout_with_no_header_content.png b/...ome_small/application-layout-spec/application_layout_with_no_header_content.png
diff --git a/...en/chrome_small/application-layout-spec/renders_primary_nav_menu_when_small.png b/...en/chrome_small/application-layout-spec/renders_primary_nav_menu_when_small.png
diff --git a/...light-theme/en/chrome_small/application-layout-spec/toggles_menu_when_small.png b/...light-theme/en/chrome_small/application-layout-spec/toggles_menu_when_small.png
diff --git a/...ion-fusion-theme/en/chrome_small/application-layout-spec/application_layout.png b/...ion-fusion-theme/en/chrome_small/application-layout-spec/application_layout.png
diff --git a/...e/en/chrome_small/application-layout-spec/application_layout_with_nav_icons.png b/...e/en/chrome_small/application-layout-spec/application_layout_with_nav_icons.png
diff --git a/...ome_small/application-layout-spec/application_layout_with_no_header_content.png b/...ome_small/application-layout-spec/application_layout_with_no_header_content.png
diff --git a/...e_small/application-layout-spec/application_layout_with_top_navigation_tabs.png b/...e_small/application-layout-spec/application_layout_with_top_navigation_tabs.png
diff --git a/...en/chrome_small/application-layout-spec/renders_primary_nav_menu_when_small.png b/...en/chrome_small/application-layout-spec/renders_primary_nav_menu_when_small.png
diff --git a/...ome_small/application-layout-spec/application_layout_with_no_header_content.png b/...ome_small/application-layout-spec/application_layout_with_no_header_content.png
diff --git a/...en/chrome_small/application-layout-spec/renders_primary_nav_menu_when_small.png b/...en/chrome_small/application-layout-spec/renders_primary_nav_menu_when_small.png
diff --git a/packages/terra-navigation-side-menu/CHANGELOG.md b/packages/terra-navigation-side-menu/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Changed styles for selected item background color styles
+
 ## 2.55.0 - (May 1, 2024)
 
 * Updated

diff --git a/packages/terra-navigation-side-menu/src/MenuItem.module.scss b/packages/terra-navigation-side-menu/src/MenuItem.module.scss
@@ -87,7 +87,7 @@
 
     &.is-selected {
       background-attachment: var(--terra-navigation-side-menu-item-selected-background-attachment);
-      background-color: var(--terra-navigation-side-menu-item-selected-background-color, #f4f4f4);
+      background-color: var(--terra-navigation-side-menu-item-selected-background-color, darken(#ebf6fd, 2%));
       background-image: var(--terra-navigation-side-menu-item-selected-background-image);
       background-size: var(--terra-navigation-side-menu-item-selected-background-size);
       border-left: var(--terra-navigation-side-menu-item-selected-border-left, 0.5rem solid #007cc3);
@@ -112,7 +112,7 @@
 
       &:hover,
       &.is-hovered {
-        background-color: var(--terra-navigation-side-menu-item-selected-hover-background-color, #f4f4f4);
+        background-color: var(--terra-navigation-side-menu-item-selected-hover-background-color, darken(#ebf6fd, 2%));
         color: var(--terra-navigation-side-menu-item-selected-hover-color);
 
         /* stylelint-disable-next-line max-nesting-depth */

diff --git a/packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx b/packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx
@@ -365,7 +365,7 @@ class NavigationSideMenu extends Component {
     }
 
     let header;
-    if (this.onBack || !currentItem.isRootMenu) {
+    if (this.onBack || (currentItem && !currentItem.isRootMenu)) {
       header = (
         <li role="none">
           <div
@@ -396,7 +396,7 @@ class NavigationSideMenu extends Component {
           aria-relevant="additions text"
           refCallback={this.setVisuallyHiddenComponent}
         />
-        <ContentContainer {...customProps} fill className={sideMenuContentContainerClassNames}>
+        <ContentContainer {...customProps} className={sideMenuContentContainerClassNames}>
           <nav role="navigation" aria-label={this.props.ariaLabel}>
             <ul role="menu" ref={(refobj) => this.handleMenuListRef(refobj)} className={cx(['side-menu-list'])}>
               {header}

diff --git a/packages/terra-navigation-side-menu/src/NavigationSideMenu.module.scss b/packages/terra-navigation-side-menu/src/NavigationSideMenu.module.scss
@@ -6,6 +6,8 @@
   .side-menu-content-container {
     background-color: var(--terra-navigation-side-menu-content-container-background-color);
     overflow: hidden;
+    height: 100%;
+    width: 100%;
 
     > :nth-child(1) {
       background-color: var(--terra-navigation-side-menu-content-container-header-background-color);

diff --git a/packages/terra-navigation-side-menu/src/_MenuItem.jsx b/packages/terra-navigation-side-menu/src/_MenuItem.jsx
@@ -100,7 +100,7 @@ class MenuItem extends React.Component {
 
     const itemClassNames = classNames(cx(
       'menu-item',
-      { 'is-selected': isSelected },
+      { 'is-selected': isSelected && !hasChevron },
       { 'is-active': this.state.active },
       theme.className,
     ),

diff --git a/...terra-navigation-side-menu/src/clinical-lowlight-theme/NavigationSideMenuItem.module.scss b/...terra-navigation-side-menu/src/clinical-lowlight-theme/NavigationSideMenuItem.module.scss
@@ -6,7 +6,7 @@
     --terra-navigation-side-menu-list-item-border-right: none;
     --terra-navigation-side-menu-list-item-border-top: none;
 
-    --terra-navigation-side-menu-item-active-background-color: #2d3539;
+    --terra-navigation-side-menu-item-active-background-color: #1e3a49;
     --terra-navigation-side-menu-item-active-chevron-color: #c5c5c6;
     --terra-navigation-side-menu-item-border-bottom: none;
     --terra-navigation-side-menu-item-border-left: none;
@@ -17,33 +17,33 @@
     --terra-navigation-side-menu-item-chevron-padding-left: 0.7143rem;
     --terra-navigation-side-menu-item-chevron-width: 0.8em;
     --terra-navigation-side-menu-item-color: #b2b5b6;
-    --terra-navigation-side-menu-item-focus-background-color: #2d3539;
+    --terra-navigation-side-menu-item-focus-background-color: #1e3a49;
     --terra-navigation-side-menu-item-focus-box-shadow: inset 0 0 0 1px #4a90e2, inset 0 0 0 4px rgba(0, 0, 0, 0.3);
     --terra-navigation-side-menu-item-font-size: 1.071rem;
     --terra-navigation-side-menu-item-font-weight: normal;
     --terra-navigation-side-menu-item-line-height: 1.42857;
     --terra-navigation-side-menu-item-focus-chevron-color: #c5c5c6;
-    --terra-navigation-side-menu-item-hover-background-color: #2d3539;
+    --terra-navigation-side-menu-item-hover-background-color: #1e3a49;
     --terra-navigation-side-menu-item-hover-chevron-color: #c5c5c6;
     --terra-navigation-side-menu-item-hover-color: #b2b5b6;
     --terra-navigation-side-menu-item-padding-bottom: 0.8225rem;
     --terra-navigation-side-menu-item-padding-left: 1.2143rem;
     --terra-navigation-side-menu-item-padding-right: 0.7143rem;
     --terra-navigation-side-menu-item-padding-top: 0.8225rem;
     --terra-navigation-side-menu-item-selected-background-attachment: none;
-    --terra-navigation-side-menu-item-selected-background-color: #2d3539;
+    --terra-navigation-side-menu-item-selected-background-color: #004c76;
     --terra-navigation-side-menu-item-selected-background-image: none;
     --terra-navigation-side-menu-item-selected-before-background-image: none;
     --terra-navigation-side-menu-item-selected-background-size: auto;
     --terra-navigation-side-menu-item-selected-border-left: 4px solid #3496cf;
     --terra-navigation-side-menu-item-selected-chevron-color: #c5c5c6;
     --terra-navigation-side-menu-item-selected-color: #b2b5b6;
-    --terra-navigation-side-menu-item-selected-focus-background-color: #2d3539;
+    --terra-navigation-side-menu-item-selected-focus-background-color: #1e3a49;
     --terra-navigation-side-menu-item-selected-focus-chevron-color: #c5c5c6;
     --terra-navigation-side-menu-item-selected-focus-color: #b2b5b6;
+    --terra-navigation-side-menu-item-selected-hover-background-color: #1e3a49;
     --terra-navigation-side-menu-item-selected-font-weight: 600;
     --terra-navigation-side-menu-item-selected-padding-left: 0.7143rem;
-    --terra-navigation-side-menu-item-selected-hover-background-color: #2d3539;
     --terra-navigation-side-menu-item-selected-hover-chevron-color: #c5c5c6;
     --terra-navigation-side-menu-item-selected-hover-color: #b2b5b6;
     --terra-navigation-side-menu-item-text-transform: none;

diff --git a/...ages/terra-navigation-side-menu/src/orion-fusion-theme/NavigationSideMenuItem.module.scss b/...ages/terra-navigation-side-menu/src/orion-fusion-theme/NavigationSideMenuItem.module.scss
@@ -6,7 +6,7 @@
     --terra-navigation-side-menu-list-item-border-right: none;
     --terra-navigation-side-menu-list-item-border-top: none;
 
-    --terra-navigation-side-menu-item-active-background-color: #f5fafe;
+    --terra-navigation-side-menu-item-active-background-color: #f4fafe;
     --terra-navigation-side-menu-item-active-chevron-color: #bcbfc0;
     --terra-navigation-side-menu-item-border-bottom: none;
     --terra-navigation-side-menu-item-border-left: none;
@@ -31,7 +31,7 @@
     --terra-navigation-side-menu-item-padding-right: 0.7143rem;
     --terra-navigation-side-menu-item-padding-top: 0.8225rem;
     --terra-navigation-side-menu-item-selected-background-attachment: none;
-    --terra-navigation-side-menu-item-selected-background-color: #f4f4f4;
+    --terra-navigation-side-menu-item-selected-background-color: #e2f2fc;
     --terra-navigation-side-menu-item-selected-background-image: none;
     --terra-navigation-side-menu-item-selected-before-background-image: none;
     --terra-navigation-side-menu-item-selected-background-size: auto;
@@ -43,7 +43,7 @@
     --terra-navigation-side-menu-item-selected-focus-color: #1c1f21;
     --terra-navigation-side-menu-item-selected-font-weight: 600;
     --terra-navigation-side-menu-item-selected-padding-left: 0.7143rem;
-    --terra-navigation-side-menu-item-selected-hover-background-color: #f4f4f4;
+    --terra-navigation-side-menu-item-selected-hover-background-color: #f4fafe;
     --terra-navigation-side-menu-item-selected-hover-chevron-color: #909496;
     --terra-navigation-side-menu-item-selected-hover-color: #1c1f21;
     --terra-navigation-side-menu-item-text-transform: none;

diff --git a/...ages/terra-navigation-side-menu/tests/jest/__snapshots__/NavigationSideMenu.test.jsx.snap b/...ages/terra-navigation-side-menu/tests/jest/__snapshots__/NavigationSideMenu.test.jsx.snap
@@ -147,7 +147,7 @@ exports[`Layout correctly applies the theme context className 1`] = `
       </VisuallyHiddenText>
       <ContentContainer
         className="side-menu-content-container orion-fusion-theme"
-        fill={true}
+        fill={false}
         intl={
           Object {
             "defaultFormats": Object {},
@@ -178,7 +178,7 @@ exports[`Layout correctly applies the theme context className 1`] = `
         setFocusOnContainer={false}
       >
         <div
-          className="content-container-fill side-menu-content-container orion-fusion-theme"
+          className="content-container-static side-menu-content-container orion-fusion-theme"
           intl={
             Object {
               "defaultFormats": Object {},
@@ -701,7 +701,7 @@ exports[`Layout should render a NavigationSideMenu with ariaLabel 1`] = `
     <ContentContainer
       ariaLabel="Sub Menu List"
       className="side-menu-content-container"
-      fill={true}
+      fill={false}
       intl={
         Object {
           "defaultFormats": Object {},
@@ -733,7 +733,7 @@ exports[`Layout should render a NavigationSideMenu with ariaLabel 1`] = `
     >
       <div
         ariaLabel="Sub Menu List"
-        className="content-container-fill side-menu-content-container"
+        className="content-container-static side-menu-content-container"
         intl={
           Object {
             "defaultFormats": Object {},

diff --git a/...ht-theme/en/chrome_medium/navigation-side-menu-spec/first_menu_item_focused.png b/...ht-theme/en/chrome_medium/navigation-side-menu-spec/first_menu_item_focused.png
diff --git a/...me_medium/navigation-side-menu-spec/first_menu_item_focused_with_left_arrow.png b/...me_medium/navigation-side-menu-spec/first_menu_item_focused_with_left_arrow.png
diff --git a/.../chrome_medium/navigation-side-menu-spec/hover_navigation_side_menu_display.png b/.../chrome_medium/navigation-side-menu-spec/hover_navigation_side_menu_display.png
diff --git a/...eme/en/chrome_medium/navigation-side-menu-spec/navigation_side_menu_display.png b/...eme/en/chrome_medium/navigation-side-menu-spec/navigation_side_menu_display.png
diff --git a/..._medium/navigation-side-menu-spec/navigation_side_menu_display_with_toolbar.png b/..._medium/navigation-side-menu-spec/navigation_side_menu_display_with_toolbar.png
diff --git a/...t-theme/en/chrome_medium/navigation-side-menu-spec/second_menu_item_focused.png b/...t-theme/en/chrome_medium/navigation-side-menu-spec/second_menu_item_focused.png
diff --git a/...rome_medium/navigation-side-menu-spec/selected_navigation_side_menu_display.png b/...rome_medium/navigation-side-menu-spec/selected_navigation_side_menu_display.png
diff --git a/...me_medium/navigation-side-menu-spec/submenu_header_focused_with_right_arrow.png b/...me_medium/navigation-side-menu-spec/submenu_header_focused_with_right_arrow.png
diff --git a/...me_medium/navigation-side-menu-spec/first_menu_item_focused_with_left_arrow.png b/...me_medium/navigation-side-menu-spec/first_menu_item_focused_with_left_arrow.png
diff --git a/...n-theme/en/chrome_medium/navigation-side-menu-spec/second_menu_item_focused.png b/...n-theme/en/chrome_medium/navigation-side-menu-spec/second_menu_item_focused.png
diff --git a/...rome_medium/navigation-side-menu-spec/selected_navigation_side_menu_display.png b/...rome_medium/navigation-side-menu-spec/selected_navigation_side_menu_display.png
diff --git a/...me_medium/navigation-side-menu-spec/first_menu_item_focused_with_left_arrow.png b/...me_medium/navigation-side-menu-spec/first_menu_item_focused_with_left_arrow.png
diff --git a/...t-theme/en/chrome_medium/navigation-side-menu-spec/second_menu_item_focused.png b/...t-theme/en/chrome_medium/navigation-side-menu-spec/second_menu_item_focused.png
diff --git a/...rome_medium/navigation-side-menu-spec/selected_navigation_side_menu_display.png b/...rome_medium/navigation-side-menu-spec/selected_navigation_side_menu_display.png