[terra-navigation-side-menu] selection color change #2155
Conversation
No Jira Key for this Changes ? |
|
-- No JIRA for this @supreethmr . This was raised in the demo call. |
|
Can you add more details on PR description about the changes. Previous screenshots seems to have selectedItem in I think the existing styles of selected item (except background color) looks more appropriate then the new selectedItem styles being added on this PR. Curious to know, Has UX team reviewed the new style changes for selectedItem |
|
Discussion is to change the background color for the selected item in the menu. I made the change to keep the existing styles and just updated the background color. Thanks |
| @@ -396,7 +396,7 @@ class NavigationSideMenu extends Component { | |||
| aria-relevant="additions text" | |||
| refCallback={this.setVisuallyHiddenComponent} | |||
| /> | |||
| <ContentContainer {...customProps} fill className={sideMenuContentContainerClassNames}> | |||
There was a problem hiding this comment.
why was the fill removed here and width and height 100% added through css class ?
There was a problem hiding this comment.
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.
| @@ -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%)); | |||
There was a problem hiding this comment.
Does the darken() function has same effects on all the browsers?
There was a problem hiding this comment.
This color codes are taken from the other terra components(terra-list). it has been validated before, so it should be working.
Can you check again it looks like the selected styles are still missing in this screenshot https://github.com/cerner/terra-framework/pull/2155/files#diff-83d99d284c785bf351e17f3df0297049e247a1686c0b785141df5b63c41b6912 |
@supreethmr The change here is when the menu item has submenu(chevron icon) even if it selected we will not apply the selected css styles. |
|
+1 |
saket2403
added
⭐ UX Reviewed
Summary
What was changed:
Updated background color for the selected item in the menu list.
Why it was changed:
Existing background color for the selected item does not match the other terra component styles
Testing
This change was tested using:
Reviews
In addition to engineering reviews, this PR needs:
Additional Details
This PR resolves:
UXPLATFORM-XXXX
Thank you for contributing to Terra.
@cerner/terra