feat(list): new divider color api (#968)

* Add list ui-tests

* Fix the two lines icon issue

* Reduce padding of the list to 16px

* Bottom border color API

* Allow color change to all borders

* Set the --vvd-list-color-divider API

* fix(list): side margin set to 16px

* fix(list): vertical center the left icon

* fix(list): add documentation

* Remove obsolete line

* Change checkbox and radio padding

* Fix css tests

* Improve documentation

* rename to align with calendar

* Fix another test

* Add component's header

* Update snapshots

Co-authored-by: yinonov <yinon@hotmail.com>

components/list/readme.md

@@ -1,4 +1,6 @@
-This component is an extension of [<mwc-check-list-item>](https://github.com/material-components/material-components-web-components/tree/master/packages/list)
+# vwc-list
+
+This component is an extension of [<mwc-check-list>](https://github.com/material-components/material-components-web-components/tree/master/packages/list)
 
 ## Properties
 
@@ -45,12 +47,14 @@ This component support expand-collapse list
 | `close` | `(): void` | |
 | `notifyClose` | `(): void` | |
 | `notifyOpen` | `(): void` | |
-| `openChanged` | `(isOpen: boolean): void` | Invoked when the element open state is updated.<br /><br />Expressions inside this method will trigger upon open state change<br /><br />**\_isOpen**: Boolean of open state |
+| `openChanged` | `(isOpen: boolean): void` | Invoked when the element open state is updated.<br /><br />Expressions inside this method will trigger upon open state change<br /><br />**
+\_isOpen**: Boolean of open state |
 | `show` | `(): void` | |
 
 # vwc-list-item
 
-This component is an extension of [<mwc-list-item>](https://github.com/material-components/material-components-web-components/tree/master/packages/list)
+This component is an extension
+of [<mwc-list-item>](https://github.com/material-components/material-components-web-components/tree/master/packages/list)
 
 ## Properties
 
@@ -79,7 +83,8 @@ This component is an extension of [<mwc-list-item>](https://github.com/material-
 
 # vwc-list
 
-This component is an extension of [<mwc-list>](https://github.com/material-components/material-components-web-components/tree/master/packages/list)
+This component is an extension
+of [<mwc-list>](https://github.com/material-components/material-components-web-components/tree/master/packages/list)
 
 ## Properties
 
@@ -125,7 +130,8 @@ This component is an extension of [<mwc-list>](https://github.com/material-compo
 
 # vwc-radio-list-item
 
-This component is an extension of [<mwc-radio-list-item>](https://github.com/material-components/material-components-web-components/tree/master/packages/list)
+This component is an extension
+of [<mwc-radio-list-item>](https://github.com/material-components/material-components-web-components/tree/master/packages/list)
 
 ## Properties
 
@@ -152,3 +158,9 @@ This component is an extension of [<mwc-radio-list-item>](https://github.com/mat
 | -------------------- | ----------------------- |
 | `list-item-rendered` | |
 | `request-selected` | `RequestSelectedDetail` |
+
+## CSS Variables
+
+| Variable | Host Element | Comments |
+| ------------------ | --------- | ------------------------- |
+| `--vvd-list-color-divider` | vwc-list | `boolean` |

components/list/src/partials/_vwc-list-variables.scss

@@ -0,0 +1 @@
+$vvd-list-divider--color: --vvd-list-divider--color;

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

@@ -1,7 +1,7 @@
 @forward './vwc-list-text-parts.scss';
 
 :host {
- --mdc-list-side-padding: 24px;
+ --mdc-list-side-padding: 16px;
 }
 
 :host(:not([twoline])) {

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

@@ -8,6 +8,7 @@
 @use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with (
  $variable-name: --vvd-list-item-shape
 );
+@use './partials/vwc-list-variables' as variables;
 
 $vvd-list-item-block-size: --vvd-list-item-block-size;
 $vvd-list-item-side-padding: --vvd-list-item-side-padding;
@@ -43,7 +44,7 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
  border-radius: var(--vvd-list-item-shape);
 
  #{$vvd-list-item-block-size}: 40px;
- #{$vvd-list-item-side-padding}: 24px;
+ #{$vvd-list-item-side-padding}: 16px;
  #{$vvd-list-item-graphic-margin}: 16px;
 }
 
@@ -90,14 +91,10 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
  bottom: 0;
  left: var(#{$vvd-list-item-side-padding});
  height: 1px;
- border-bottom: 1px solid var(#{scheme-variables.$vvd-color-neutral-30});
+ border-bottom: 1px solid var(#{variables.$vvd-list-divider--color});
  content: '';
  }
 
- .mdc-deprecated-list-item__graphic {
- margin-block-start: 10px;
- }
-
  .mdc-deprecated-list-item__meta {
  flex-shrink: 0;
  }
@@ -114,7 +111,3 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 .mdc-deprecated-list-item__meta {
  display: flex;
 }
-
-.mdc-deprecated-list ::slotted([divider]) {
- border-bottom-color: var(#{scheme-variables.$vvd-color-neutral-30});
-}

components/list/src/vwc-list.scss

@@ -1,5 +1,7 @@
 @use '@vonage/vvd-typography/scss/typography' as typography;
-@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
+@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
+
+@use './partials/vwc-list-variables' as variables;
 
 :host {
  --mdc-menu-item-height: 40px;
@@ -12,7 +14,13 @@
  #{scheme-variables.$vvd-color-neutral-70}
  );
 
+ #{variables.$vvd-list-divider--color}: var(#{scheme-variables.$vvd-color-neutral-30});
+
  .mdc-deprecated-list {
  @include typography.typography-cat-shorthand('body-2');
  }
+
+ .mdc-deprecated-list ::slotted([divider]) {
+ border-bottom-color: var(#{variables.$vvd-list-divider--color});
+ }
 }

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

@@ -1,7 +1,7 @@
 @forward './vwc-list-text-parts.scss';
 
 :host {
- --mdc-list-side-padding: 24px;
+ --mdc-list-side-padding: 16px;
 }
 
 :host(:not([twoline])) {

components/list/stories/list-introduction.config.mjs

@@ -0,0 +1,14 @@
+export default {
+ sourcePath: '../readme.md',
+ outputName: 'list-introduction',
+ story: {
+ title: 'Components/List',
+ name: 'Introduction',
+ parameters: {
+ options: {
+ showPanel: false,
+ isToolshown: false
+ }
+ }
+ }
+};

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

@@ -69,31 +69,31 @@ describe('check list item', () => {
  const listItem = await prepareConfiguredItem(false, false);
  const checkbox = listItem.shadowRoot.querySelector('mwc-checkbox');
  assertComputedStyle(checkbox, { width: '22px', height: '22px' });
- assertDistancePixels(listItem, checkbox, 'right', 24);
+ assertDistancePixels(listItem, checkbox, 'right', 16);
  assertDistancePixels(listItem, checkbox, 'top', 9);
  });
 
  it('should have collectly positioned checkbox (left side, one line)', async () => {
  const listItem = await prepareConfiguredItem(true, false);
  const checkbox = listItem.shadowRoot.querySelector('mwc-checkbox');
  assertComputedStyle(checkbox, { width: '22px', height: '22px' });
- assertDistancePixels(listItem, checkbox, 'left', 24);
+ assertDistancePixels(listItem, checkbox, 'left', 16);
  assertDistancePixels(listItem, checkbox, 'top', 9);
  });
 
  it('should have collectly positioned checkbox (right side, two lines)', async () => {
  const listItem = await prepareConfiguredItem(false, true);
  const checkbox = listItem.shadowRoot.querySelector('mwc-checkbox');
  assertComputedStyle(checkbox, { width: '22px', height: '22px' });
- assertDistancePixels(listItem, checkbox, 'right', 24);
+ assertDistancePixels(listItem, checkbox, 'right', 16);
  assertDistancePixels(listItem, checkbox, 'top', 25);
  });
 
  it('should have collectly positioned checkbox (left side, two lines)', async () => {
  const listItem = await prepareConfiguredItem(true, true);
  const checkbox = listItem.shadowRoot.querySelector('mwc-checkbox');
  assertComputedStyle(checkbox, { width: '22px', height: '22px' });
- assertDistancePixels(listItem, checkbox, 'left', 24);
+ assertDistancePixels(listItem, checkbox, 'left', 16);
  assertDistancePixels(listItem, checkbox, 'top', 25);
  });
  });

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

@@ -69,31 +69,31 @@ describe('radio list item', () => {
  const listItem = await prepareConfiguredItem(false, false);
  const radio = listItem.shadowRoot.querySelector('mwc-radio');
  assertComputedStyle(radio, { width: '22px', height: '22px' });
- assertDistancePixels(listItem, radio, 'right', 24);
+ assertDistancePixels(listItem, radio, 'right', 16);
  assertDistancePixels(listItem, radio, 'top', 9);
  });
 
  it('should have collectly positioned radio (left side, one line)', async () => {
  const listItem = await prepareConfiguredItem(true, false);
  const radio = listItem.shadowRoot.querySelector('mwc-radio');
  assertComputedStyle(radio, { width: '22px', height: '22px' });
- assertDistancePixels(listItem, radio, 'left', 24);
+ assertDistancePixels(listItem, radio, 'left', 16);
  assertDistancePixels(listItem, radio, 'top', 9);
  });
 
  it('should have collectly positioned radio (right side, two lines)', async () => {
  const listItem = await prepareConfiguredItem(false, true);
  const radio = listItem.shadowRoot.querySelector('mwc-radio');
  assertComputedStyle(radio, { width: '22px', height: '22px' });
- assertDistancePixels(listItem, radio, 'right', 24);
+ assertDistancePixels(listItem, radio, 'right', 16);
  assertDistancePixels(listItem, radio, 'top', 25);
  });
 
  it('should have collectly positioned radio (left side, two lines)', async () => {
  const listItem = await prepareConfiguredItem(true, true);
  const radio = listItem.shadowRoot.querySelector('mwc-radio');
  assertComputedStyle(radio, { width: '22px', height: '22px' });
- assertDistancePixels(listItem, radio, 'left', 24);
+ assertDistancePixels(listItem, radio, 'left', 16);
  assertDistancePixels(listItem, radio, 'top', 25);
  });
  });

ui-tests/tests/vwc-list/index.js

@@ -0,0 +1,23 @@
+import '@vonage/vwc-list';
+import { storiesToElement } from '../../utils/storiesToElement';
+import * as basicStories from '@vonage/vwc-list/stories/list-basic.stories';
+import * as checkStories from '@vonage/vwc-list/stories/list-check.stories';
+import * as expansionPanelStories from '@vonage/vwc-list/stories/list-expansion-panel.stories';
+import * as metaStories from '@vonage/vwc-list/stories/list-interactive-meta.stories';
+import * as listItemStories from '@vonage/vwc-list/stories/list-item.stories';
+import * as radioItemStories from '@vonage/vwc-list/stories/list-radio.stories';
+
+export async function createElementVariations(wrapper) {
+ const elementWrapper = storiesToElement({
+ ...basicStories,
+ ...checkStories,
+ ...expansionPanelStories,
+ ...metaStories,
+ ...listItemStories,
+ ...radioItemStories
+ });
+
+ wrapper.appendChild(elementWrapper);
+}
+
+