Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

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

Merged
merged 6 commits into from
May 8, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5ca4e67
update: selected color
MadanKumarGovindaswamy May 6, 2024
1320785
Update CHANGELOG.md
MadanKumarGovindaswamy May 6, 2024
0963502
Update NavigationSideMenu.test.jsx.snap
MadanKumarGovindaswamy May 6, 2024
c6b38e3
update: application layout wdio
MadanKumarGovindaswamy May 6, 2024
079426e
update: revert existing styles
MadanKumarGovindaswamy May 6, 2024
c0ef6a5
update: wdio
MadanKumarGovindaswamy May 6, 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
Binary file modified ...l-lowlight-theme/en/chrome_large/application-layout-spec/application_layout.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...e/en/chrome_large/application-layout-spec/application_layout_with_nav_icons.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ome_large/application-layout-spec/application_layout_with_no_header_content.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...e_large/application-layout-spec/application_layout_with_top_navigation_tabs.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...me_large/application-layout-spec/checks_for_closure_on_read-only_item_click.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...e/en/chrome_large/application-layout-spec/presents_utility_menu_from_header.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ome_small/application-layout-spec/application_layout_with_no_header_content.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...en/chrome_small/application-layout-spec/renders_primary_nav_menu_when_small.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...light-theme/en/chrome_small/application-layout-spec/toggles_menu_when_small.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ion-fusion-theme/en/chrome_small/application-layout-spec/application_layout.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...e/en/chrome_small/application-layout-spec/application_layout_with_nav_icons.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ome_small/application-layout-spec/application_layout_with_no_header_content.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...e_small/application-layout-spec/application_layout_with_top_navigation_tabs.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...en/chrome_small/application-layout-spec/renders_primary_nav_menu_when_small.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ome_small/application-layout-spec/application_layout_with_no_header_content.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...en/chrome_small/application-layout-spec/renders_primary_nav_menu_when_small.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/terra-navigation-side-menu/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

* Changed
* Changed styles for selected item background color styles

## 2.55.0 - (May 1, 2024)

* Updated
Expand Down
4 changes: 2 additions & 2 deletions packages/terra-navigation-side-menu/src/MenuItem.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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%));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does the darken() function has same effects on all the browsers?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This color codes are taken from the other terra components(terra-list). it has been validated before, so it should be working.

color: var(--terra-navigation-side-menu-item-selected-hover-color);

/* stylelint-disable-next-line max-nesting-depth */
Expand Down
4 changes: 2 additions & 2 deletions packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -396,7 +396,7 @@ class NavigationSideMenu extends Component {
aria-relevant="additions text"
refCallback={this.setVisuallyHiddenComponent}
/>
<ContentContainer {...customProps} fill className={sideMenuContentContainerClassNames}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why was the fill removed here and width and height 100% added through css class ?

Copy link
Contributor Author

@MadanKumarGovindaswamy MadanKumarGovindaswamy May 6, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fill is removed here from the content container prop because it has position absolute css styles along with min height of 50 px in the parent container. which is creating a problem when we zoom in to 400%.

width and height can be removed. will update this.

Screenshot 2024-05-06 at 5 08 11 PM

<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}
Expand Down
2 changes: 2 additions & 0 deletions packages/terra-navigation-side-menu/src/NavigationSideMenu.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion packages/terra-navigation-side-menu/src/_MenuItem.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
),
Expand Down
12 changes: 6 additions & 6 deletions ...terra-navigation-side-menu/src/clinical-lowlight-theme/NavigationSideMenuItem.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
6 changes: 3 additions & 3 deletions ...ages/terra-navigation-side-menu/src/orion-fusion-theme/NavigationSideMenuItem.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions ...ages/terra-navigation-side-menu/tests/jest/__snapshots__/NavigationSideMenu.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {},
Expand Down Expand Up @@ -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 {},
Expand Down Expand Up @@ -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 {},
Expand Down Expand Up @@ -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 {},
Expand Down
Binary file modified ...ht-theme/en/chrome_medium/navigation-side-menu-spec/first_menu_item_focused.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...me_medium/navigation-side-menu-spec/first_menu_item_focused_with_left_arrow.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../chrome_medium/navigation-side-menu-spec/hover_navigation_side_menu_display.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...eme/en/chrome_medium/navigation-side-menu-spec/navigation_side_menu_display.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ..._medium/navigation-side-menu-spec/navigation_side_menu_display_with_toolbar.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...t-theme/en/chrome_medium/navigation-side-menu-spec/second_menu_item_focused.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...rome_medium/navigation-side-menu-spec/selected_navigation_side_menu_display.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...me_medium/navigation-side-menu-spec/submenu_header_focused_with_right_arrow.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...me_medium/navigation-side-menu-spec/first_menu_item_focused_with_left_arrow.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...n-theme/en/chrome_medium/navigation-side-menu-spec/second_menu_item_focused.png
View file
Open in desktop
Binary file modified ...rome_medium/navigation-side-menu-spec/selected_navigation_side_menu_display.png
View file
Open in desktop
Binary file modified ...me_medium/navigation-side-menu-spec/first_menu_item_focused_with_left_arrow.png
View file
Open in desktop
Binary file modified ...t-theme/en/chrome_medium/navigation-side-menu-spec/second_menu_item_focused.png
View file
Open in desktop
Binary file modified ...rome_medium/navigation-side-menu-spec/selected_navigation_side_menu_display.png
View file
Open in desktop
Loading