fix(list): remove default connotation (#1256)

* fix(list): remove default connotation

* fix color

* fixed

* remove connotation unit test in favor of UI test

* style fixes

* update snapshot

* style updates

* style edge cases hardening

components/list/src/vwc-list-item.scss

@@ -1,10 +1,11 @@
+@use 'sass:selector';
+
 @forward './vwc-list-text-parts.scss';
 @use '@vonage/vvd-typography/scss/typography' as typography;
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
 @use '@vonage/vvd-style-coupling/scss/vvd-formfield' as vvd-formfield;
 @use '@vonage/vvd-foundation/scss/mixins/connotation/config' with (
-	$connotations-set: primary cta,
-	$default: primary,
+	$connotations-set: primary,
 	$scope: list-item,
 	$is-host: true
 );
@@ -52,31 +53,56 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 }
 
 :host([activated]) {
-	--mdc-theme-text-icon-on-background: var(
-		#{connotation.$vvd-color-on-connotation}
-	);
-	--mdc-theme-text-hint-on-background: var(
-		#{connotation.$vvd-color-on-connotation}
-	);
-	--mdc-ripple-color: var(#{connotation.$vvd-color-on-connotation});
-
-	@include typography.typography-cat-shorthand('body-2-bold');
 	z-index: 0;
-	color: var(#{connotation.$vvd-color-on-connotation});
-
 	mwc-ripple,
 	.fake-activated-ripple {
+		--mdc-ripple-activated-opacity: 0;
 		z-index: -1;
 	}
+}
+
+:host([activated][connotation='primary']) {
+	.mdc-deprecated-list-item__secondary-text ::slotted(*) {
+		--mdc-theme-text-secondary-on-background: var(#{scheme-variables.$vvd-color-neutral-40});
+	}
+}
+
+:host([activated][twoline][connotation='primary']:not([disabled]))::after {
+	#{variables.$vvd-list-divider--color}: var(#{scheme-variables.$vvd-color-neutral-80});
+}
+
+:host([activated]:not([disabled])) {
+	--mdc-theme-text-icon-on-background: var(
+		#{connotation.$vvd-color-on-connotation},
+		var(#{scheme-variables.$vvd-color-on-canvas})
+	);
+	--mdc-theme-text-hint-on-background: var(
+		#{connotation.$vvd-color-on-connotation},
+		var(#{scheme-variables.$vvd-color-on-canvas})
+	);
+	--mdc-ripple-color: var(
+		#{connotation.$vvd-color-on-connotation},
+		var(#{scheme-variables.$vvd-color-on-canvas})
+	);
+
+	color: var(
+		#{connotation.$vvd-color-on-connotation},
+		var(#{scheme-variables.$vvd-color-on-canvas})
+	);
 
 	.fake-activated-ripple {
 		--mdc-ripple-activated-opacity: 1;
-		--mdc-ripple-color: var(#{connotation.$vvd-color-connotation});
+		--mdc-ripple-color: var(
+			#{connotation.$vvd-color-connotation},
+			var(#{scheme-variables.$vvd-color-neutral-30})
+		);
 	}
 
 	mwc-ripple {
-		--mdc-ripple-activated-opacity: 0;
-		background-color: var(#{connotation.$vvd-color-connotation});
+		background-color: var(
+			#{connotation.$vvd-color-connotation},
+			var(#{scheme-variables.$vvd-color-neutral-30})
+		);
 	}
 }
 
@@ -114,3 +140,18 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 .mdc-deprecated-list-item__meta {
 	display: flex;
 }
+
+
+:host(:not([disabled])) {
+	.mdc-deprecated-list-item__graphic,
+	.mdc-deprecated-list-item__meta {
+		::slotted(*) {
+
+			$selector: selector.append(":host([activated][connotation='primary'])", &);
+			color: var(#{scheme-variables.$vvd-color-neutral-70});
+			@at-root #{$selector} {
+				color: var(#{connotation.$vvd-color-on-connotation});
+			}
+		}
+	}
+}

components/list/stories/arg-types-list-item.js

@@ -4,9 +4,7 @@ export const argTypes = {
 	connotation: {
 		control: {
 			type: 'select',
-			options: Object.values(Connotation).filter(c => [
-				Connotation.Primary, Connotation.CTA
-			].includes(c)),
+			options: [undefined, Connotation.Primary],
 		}
 	},
 	shape: {

components/list/stories/list-item.stories.js

@@ -46,10 +46,11 @@ Shape.args = { shape: 'rounded' };
 
 export const Connotation = Template.bind({});
 Connotation.args = {
-	connotation: 'cta',
+	connotation: 'primary',
 	activated: '',
 	shape: 'rounded',
-	graphic: 'icon'
+	graphic: 'icon',
+	twoline: ''
 };
 
 export const TwoLine = Template.bind({});
@@ -76,7 +77,7 @@ const ActivatedTemplate = args => html`
 			Item A
 			<vwc-icon slot="graphic" type="chat" size="small"></vwc-icon>
 		</vwc-list-item>
-		<vwc-list-item ...=${spread(args)}>
+		<vwc-list-item ...=${spread(args)} graphic="icon">
 			Item B
 			<vwc-icon slot="graphic" type="chat" size="small"></vwc-icon>
 		</vwc-list-item>

components/list/test/list-item.test.js

@@ -84,28 +84,6 @@ describe('list item', () => {
 		});
 	});
 
-	describe('connotation', () => {
-		let listItem,
-			ripple;
-		beforeEach(async () => {
-			[listItem] = addElement(
-				textToDomToParent(`<vwc-list-item activated>Item 1</vwc-list-item>`)
-			);
-			await waitNextTask();
-			ripple = listItem.shadowRoot.querySelector('.fake-activated-ripple');
-		});
-
-		it('should proxy primary connotation to activated list-item by default', async () => {
-			assertComputedStyle(ripple, { backgroundColor: 'rgb(0,0,0)' }, ':before');
-		});
-
-		it('should proxy cta connotation to activated list-item when connotation set to cta', async () => {
-			listItem.connotation = 'cta';
-			await waitNextTask();
-			assertComputedStyle(ripple, { backgroundColor: 'rgb(153,65,255)' }, ':before');
-		});
-	});
-
 	describe('shape', () => {
 		let actualElement;
 		beforeEach(async () => {