Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(list): remove default connotation #1256

Merged
merged 10 commits into from Mar 23, 2022
Merged

fix(list): remove default connotation #1256

merged 10 commits into from Mar 23, 2022

Conversation

yinonov
Copy link
Contributor

@yinonov yinonov commented Mar 14, 2022

Description

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

@github-actions
Copy link

🚀

Latest successful build of the PR deployed here.

🚀

@rachelbt
Copy link
Contributor

rachelbt commented Mar 14, 2022 •
edited

the activated state is broken:
image
was:
image

@yinonov
Copy link
Contributor Author

yinonov commented Mar 15, 2022

the activated state is broken: image was: image

fixed

@rachelbt
Copy link
Contributor

rachelbt commented Mar 16, 2022 •
edited

So now we do not support cta connotation in list-item?
https://tmp.dev.vivid.vonage.com/1256/index.html?path=/story/components-list-list-item--connotation&args=connotation:primary;activated:;shape:rounded;graphic:icon
isn't it kind of a breaking design change?

@yinonov
Copy link
Contributor Author

yinonov commented Mar 16, 2022

So now we do not support cta connotation in list-item? https://tmp.dev.vivid.vonage.com/1256/index.html?path=/story/components-list-list-item--connotation&args=connotation:primary;activated:;shape:rounded;graphic:icon isn't it kind of a breaking design change?

according to @jshenkman it's actually a fix as we shouldn't have supported it

@jshenkman
Copy link
Contributor

jshenkman commented Mar 16, 2022 •
edited

@yinonov @rachelbt
exactly, no product uses CTA connotation in list or side navigation

@rachelbt
Copy link
Contributor

something looks a bit off with the icon that is not white:
image

also when pressed the ripple is hiding the icon

@yinonov
Copy link
Contributor Author

yinonov commented Mar 16, 2022

here

@jshenkman mind reviewing if this is tolerable? it's an issue with the side-navigation variant, which will deprecate following the new sidenav

@jshenkman
Copy link
Contributor

jshenkman commented Mar 20, 2022 •
edited

Ok, so a few problems -

  1. list item - activated - the activated item shouldn't be bold, the text style should stay the same.
  2. list item - connotation the list item is a bit different, it's all black (text + icon) and on selection, it turns white. only one item can be selected and the last one is supposed to be disabled so it shouldn't be activated.

Screen Shot 2022-03-20 at 10 52 41

I'm not sure what you would want to fix now and what to leave as is and fix in vivid-3, but in my opinion, the list needs to be prioritized over the side nav if they collide.

@yinonov yinonov requested a review from jshenkman March 20, 2022 15:32
@yinonov yinonov self-assigned this Mar 20, 2022
rachelbt
rachelbt reviewed Mar 21, 2022
View reviewed changes
Copy link
Contributor

@rachelbt rachelbt left a comment •
edited

Choose a reason for hiding this comment

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

sorry for being a nag but when there are 2 lines option & connotation primary + active the bottom line is unreadable:
image

components/list/src/vwc-list-item.scss
@@ -114,3 +128,16 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
.mdc-deprecated-list-item__meta {
display: flex;
}


:host(:not([disabled])) {
Copy link
Contributor

Choose a reason for hiding this comment

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

this causes the icon to be white when its not active or disabled:
image

@yinonov
Copy link
Contributor Author

yinonov commented Mar 22, 2022

@jshenkman mind reviewing @rachelbt comments and guide on design?

@jshenkman
Copy link
Contributor

jshenkman commented Mar 22, 2022 •
edited

sorry for being a nag but when there are 2 lines option & connotation primary + active the bottom line is unreadable: image

This option shouldn't be able to get the primary connotation as it's not a side-nav list item.
So can we block this? or remove this property from all list items?

Active connotation is only for side-nav list item

@yinonov
Copy link
Contributor Author

yinonov commented Mar 22, 2022

sorry for being a nag but when there are 2 lines option & connotation primary + active the bottom line is unreadable: image

This option shouldn't be able to get the primary connotation as it's not a side-nav list item.

So can we block this? or remove this property from all list items?

Active connotation is only for side-nav list item

Not really, the only indication list-item is used as sidenav-item is it is set with connotation. We haven't added any explicit interface. Tech debt we bought into.
Can hide secondary line for items with connotation but this can result in a very confusing interface

@jshenkman
Copy link
Contributor

sorry for being a nag but when there are 2 lines option & connotation primary + active the bottom line is unreadable: image

This option shouldn't be able to get the primary connotation as it's not a side-nav list item.
So can we block this? or remove this property from all list items?
Active connotation is only for side-nav list item

Not really, the only indication list-item is used as sidenav-item is it is set with connotation. We haven't added any explicit interface. Tech debt we bought into. Can hide secondary line for items with connotation but this can result in a very confusing interface

ok got it, so the list item should act like in dark theme, the secondary line should switch from neutral-70 to neutral-40

@yinonov yinonov requested a review from rachelbt March 22, 2022 21:20
@yinonov yinonov added Type: Bug 🐞 Something isn't working Type: Design 🎨 labels Mar 22, 2022
@sonarcloud
Copy link

sonarcloud bot commented Mar 23, 2022

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

rachelbt
rachelbt approved these changes Mar 23, 2022
View reviewed changes
Copy link
Contributor

@rachelbt rachelbt left a comment

Choose a reason for hiding this comment

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

Now its perfect :)

@yinonov yinonov merged commit 4ad1766 into master Mar 23, 2022
@yinonov yinonov deleted the list-item-no-default-connotation branch March 23, 2022 09:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@rachelbt rachelbt rachelbt approved these changes

@jshenkman jshenkman Awaiting requested review from jshenkman

Assignees

@yinonov yinonov

Labels
Type: Bug 🐞 Something isn't working Type: Design 🎨
Projects
Vivid Roadmap
Status: Done ✅
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@yinonov @rachelbt @jshenkman