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

fix(vwc-check-list-item): fixing the layout of the radio and checkbox elements #839

Merged
merged 2 commits into from
May 16, 2021
Merged

fix(vwc-check-list-item): fixing the layout of the radio and checkbox elements #839

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f5a1043
fixing the checkbox disposition in check list item
gullerya May 16, 2021
d2045de
fixing radio and check items layout
gullerya May 16, 2021
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
2 changes: 1 addition & 1 deletion components/list/src/vwc-check-list-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
height: 40px;
}

:host(:not([left])) > .mdc-list-item__meta {
:host(:not([left])) > .mdc-deprecated-list-item__meta {
width: 22px;
height: 22px;
}
2 changes: 1 addition & 1 deletion components/list/src/vwc-radio-list-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
height: 40px;
}

:host(:not([left])) > .mdc-list-item__meta {
:host(:not([left])) > .mdc-deprecated-list-item__meta {
width: 22px;
height: 22px;
}
57 changes: 27 additions & 30 deletions components/list/stories/list-check.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,50 @@
import '@vonage/vwc-list/vwc-list.js';
import '@vonage/vwc-list/vwc-check-list-item.js';
import { html } from 'lit-element';
import { spread } from '@open-wc/lit-helpers';
import { argTypes } from './arg-types-list-item.js';

export default {
title: 'Components/List (check list item)',
component: 'vwc-check-list-item',
argTypes: {
...argTypes,
left: {
control: {
type: 'inline-radio',
options: { 'true': '', 'false': undefined }
}
}
}
component: 'vwc-check-list-item'
}

const Template = args => html`
export const CheckList = () => html`
<style>
vwc-list {
width: 240px;
}
vwc-list {
width: 240px;
}
</style>

<vwc-list multi>
<vwc-check-list-item ...=${spread(args)}>Item 0</vwc-check-list-item>
<vwc-check-list-item ...=${spread(args)}>Item 1</vwc-check-list-item>
<vwc-check-list-item selected>Item 0</vwc-check-list-item>
<vwc-check-list-item>Item 1</vwc-check-list-item>
<li divider role="separator" padded></li>
<vwc-check-list-item left ...=${spread(args)}>Item 2 (left)</vwc-check-list-item>
<vwc-check-list-item left ...=${spread(args)}>Item 3 (left)</vwc-check-list-item>
<vwc-check-list-item left selected>Item 2 (left)</vwc-check-list-item>
<vwc-check-list-item left>Item 3 (left)</vwc-check-list-item>
</vwc-list>`;

export const Checklist = Template.bind({});
Checklist.args = { selected: '', left: '' }

export const checklist = args => html`
export const CheckListTwoLines = () => html`
<style>
vwc-list {
width: 240px;
}
</style>

<vwc-list multi>
<vwc-check-list-item selected ...=${spread(args)}>Item 0</vwc-check-list-item>
<vwc-check-list-item selected ...=${spread(args)}>Item 1</vwc-check-list-item>
<vwc-check-list-item selected twoline>
Item 0
<span slot="secondary">Additional info</span>
</vwc-check-list-item>
<vwc-check-list-item twoline>
Item 1
<span slot="secondary">Additional info</span>
</vwc-check-list-item>
<li divider role="separator" padded></li>
<vwc-check-list-item left selected ...=${spread(args)}>Item 2 (left)</vwc-check-list-item>
<vwc-check-list-item left ...=${spread(args)}>Item 3 (left)</vwc-check-list-item>
</vwc-list>
`;
<vwc-check-list-item left selected twoline>
Item 2 (left)
<span slot="secondary">Additional info</span>
</vwc-check-list-item>
<vwc-check-list-item left twoline>
Item 3 (left)
<span slot="secondary">Additional info</span>
</vwc-check-list-item>
</vwc-list>`;
53 changes: 35 additions & 18 deletions components/list/stories/list-radio.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,52 @@
import '@vonage/vwc-list/vwc-list.js';
import '@vonage/vwc-list/vwc-radio-list-item.js';
import { html } from 'lit-element';
import { spread } from '@open-wc/lit-helpers';
import { argTypes } from './arg-types-list-item.js';

export default {
title: 'Components/List (radio list item)',
component: 'vwc-radio-list-item',
argTypes: {
...argTypes,
left: {
control: {
type: 'inline-radio',
options: { 'true': '', 'false': undefined }
}
}
}
component: 'vwc-radio-list-item'
}

export const radioList = args => html`
export const RadioList = () => html`
<style>
vwc-list {
width: 240px;
}
</style>

<vwc-list multi>
<vwc-radio-list-item group="b">Item 0</vwc-radio-list-item>
<vwc-radio-list-item group="b" selected>Item 1</vwc-radio-list-item>
<li divider role="separator"></li>
<vwc-radio-list-item left group="c" selected>Item 2</vwc-radio-list-item>
<vwc-radio-list-item left group="c">Item 3</vwc-radio-list-item>
</vwc-list>
`;

export const RadioListTwoLines = () => html`
<style>
vwc-list {
width: 240px;
}
</style>

<vwc-list multi>
<vwc-radio-list-item group="b" ...=${spread(args)}>Item 0</vwc-radio-list-item>
<vwc-radio-list-item group="b" selected ...=${spread(args)}>Item 1</vwc-radio-list-item>
<li divider role="separator" ...=${spread(args)}></li>
<vwc-radio-list-item left group="c" selected ...=${spread(args)}>Item 2</vwc-radio-list-item>
<vwc-radio-list-item left group="c" ...=${spread(args)}>Item 3</vwc-radio-list-item>
<vwc-radio-list-item twoline group="b">
Item 0
<span slot="secondary">Additional info</span>
</vwc-radio-list-item>
<vwc-radio-list-item twoline group="b" selected>
Item 1
<span slot="secondary">Additional info</span>
</vwc-radio-list-item>
<li divider role="separator"></li>
<vwc-radio-list-item left twoline group="c" selected>
Item 2
<span slot="secondary">Additional info</span>
</vwc-radio-list-item>
<vwc-radio-list-item left twoline group="c">
Item 3
<span slot="secondary">Additional info</span>
</vwc-radio-list-item>
</vwc-list>
`;
60 changes: 53 additions & 7 deletions components/list/test/list-check-item.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import {
textToDomToParent,
waitNextTask,
isolatedElementsCreation,
assertComputedStyle,
assertDistancePixels,
} from '../../../test/test-helpers.js';
import { chaiDomDiff } from '@open-wc/semantic-dom-diff';
import {
Expand All @@ -29,25 +31,69 @@ describe('check list item', () => {

describe('init flow', () => {
it('should have expected HTML', async () => {
const docFragContainer = addElements(
const [listItem] = addElements(
textToDomToParent(
`<${VWC_CHECK_LIST_ITEM} id="check-list-item-a">Item 0</${VWC_CHECK_LIST_ITEM}>`,
document.body
`<${VWC_CHECK_LIST_ITEM} id="check-list-item-a">Item 0</${VWC_CHECK_LIST_ITEM}>`
)
);
await waitNextTask();
expect(docFragContainer[0]).shadowDom.to.equalSnapshot();
await listItem.updateComplete;
expect(listItem).shadowDom.to.equalSnapshot();
});
});

describe('general styling', async () => {
it('should have correct dimensions', async () => {
const itemsNum = 4;
const actualElements = addElements(
const [listOfItems] = addElements(
buildListOfNItems(itemsNum, VWC_CHECK_LIST_ITEM)
);
await waitNextTask();
assertListItemDimensions(actualElements[0].children, itemsNum, 40);
assertListItemDimensions(listOfItems.children, itemsNum, 40);
});

it('should have collectly positioned checkbox (right side, one line)', async () => {
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, '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, '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, '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, 'top', 25);
});
});

async function prepareConfiguredItem(left = false, twoline = false) {
const [result] = addElements(
textToDomToParent(
`<${VWC_CHECK_LIST_ITEM} ${left ? 'left' : ''} ${twoline ? 'twoline' : ''}>
Item 0
${twoline ? '<span slot="secondary">Additional info</span>' : ''}
</${VWC_CHECK_LIST_ITEM}>`
)
);
await result.updateComplete;
return result;
}
});
50 changes: 48 additions & 2 deletions components/list/test/list-radio-item.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import {
textToDomToParent,
waitNextTask,
isolatedElementsCreation,
assertComputedStyle,
assertDistancePixels
} from '../../../test/test-helpers.js';
import { chaiDomDiff } from '@open-wc/semantic-dom-diff';
import {
Expand Down Expand Up @@ -31,8 +33,7 @@ describe('radio list item', () => {
it('should have internal contents', async () => {
const actualElements = addElements(
textToDomToParent(
`<${VWC_RADIO_LIST_ITEM}>Item 0</${VWC_RADIO_LIST_ITEM}>`,
document.body
`<${VWC_RADIO_LIST_ITEM}>Item 0</${VWC_RADIO_LIST_ITEM}>`
)
);
await waitNextTask();
Expand All @@ -49,5 +50,50 @@ describe('radio list item', () => {
await waitNextTask();
assertListItemDimensions(actualElements[0].children, itemsNum, 40);
});

it('should have collectly positioned radio (right side, one line)', async () => {
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, '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, '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, '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, 'top', 25);
});
});

async function prepareConfiguredItem(left = false, twoline = false) {
const [result] = addElements(
textToDomToParent(
`<${VWC_RADIO_LIST_ITEM} ${left ? 'left' : ''} ${twoline ? 'twoline' : ''}>
Item 0
${twoline ? '<span slot="secondary">Additional info</span>' : ''}
</${VWC_RADIO_LIST_ITEM}>`
)
);
await result.updateComplete;
return result;
}
});