From 5e433bf34fd5aab5515cf2c21588796d980091b2 Mon Sep 17 00:00:00 2001 From: Johan Groth Date: Thu, 4 Apr 2019 09:39:02 +0200 Subject: [PATCH] refactor(multi-select): remove multi-select BREAKING CHANGE: multi-select component has been removed in favor of the select component that now has a property called `multiple` that offers the same functionality in a better way fix #203 --- .../multi-select/multi-select.e2e.ts | 205 ------------------ src/components/multi-select/multi-select.mdx | 13 -- src/components/multi-select/multi-select.scss | 22 -- src/components/multi-select/multi-select.tsx | 141 ------------ src/examples/multi-select/multi-select.scss | 3 - src/examples/multi-select/multi-select.tsx | 55 ----- 6 files changed, 439 deletions(-) delete mode 100644 src/components/multi-select/multi-select.e2e.ts delete mode 100644 src/components/multi-select/multi-select.mdx delete mode 100644 src/components/multi-select/multi-select.scss delete mode 100644 src/components/multi-select/multi-select.tsx delete mode 100644 src/examples/multi-select/multi-select.scss delete mode 100644 src/examples/multi-select/multi-select.tsx diff --git a/src/components/multi-select/multi-select.e2e.ts b/src/components/multi-select/multi-select.e2e.ts deleted file mode 100644 index 7b7d7225b1..0000000000 --- a/src/components/multi-select/multi-select.e2e.ts +++ /dev/null @@ -1,205 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; -import { Option } from '../select/option'; - -// We get access to Puppeteer though Stencil, but the documentation is lacking. -// -// Methods and properties for E2EElement (v0.13.2): -// https://github.com/ionic-team/stencil/blob/a0250ffcbf5a2c657475a05052eac3a4690809d2/src/testing/puppeteer/puppeteer-declarations.ts#L78 -// -// Matchers (expect-methods) for E2EElement (v0.13.2): -// https://github.com/ionic-team/stencil/blob/a0250ffcbf5a2c657475a05052eac3a4690809d2/src/declarations/testing.ts#L5 - -describe('limel-multi-select', () => { - let page; - describe('with a label', () => { - let limelMultiSelect; - let label; - beforeEach(async () => { - page = await createPage(` - - `); - limelMultiSelect = await page.find('limel-multi-select'); - label = await page.find('limel-multi-select>>>.multi-select-label'); - }); - it('displays the correct label', () => { - expect(label).toEqualText('Favourite Doctors'); - }); - - describe('when changing the label', () => { - beforeEach(async () => { - limelMultiSelect.setProperty('label', 'new label'); - await page.waitForChanges(); - }); - it('displays the new label', async () => { - expect(label).toEqualText('new label'); - }); - }); - }); - - describe('when the attribute `disabled`', () => { - describe('is not set', () => { - let limelMultiSelect; - let mdcCheckboxes; - let innerCheckboxes; - beforeEach(async () => { - const { options, value } = setupTestData(); - page = await createPage(` - - `); - limelMultiSelect = await page.find('limel-multi-select'); - await limelMultiSelect.setProperty('options', options); - await limelMultiSelect.setProperty('value', value); - await page.waitForChanges(); - mdcCheckboxes = await page.findAll( - 'limel-multi-select >>> .mdc-checkbox' - ); - innerCheckboxes = await page.findAll( - 'limel-multi-select >>> input[type=checkbox]' - ); - }); - it('is enabled', () => { - checkboxesEnabled(mdcCheckboxes, innerCheckboxes); - }); - it('the property is falsy', async () => { - const propValue = await limelMultiSelect.getProperty( - 'disabled' - ); - expect(propValue).toBeFalsy(); - }); - - describe('when then set to `true`', () => { - beforeEach(async () => { - await limelMultiSelect.setProperty('disabled', true); - await page.waitForChanges(); - }); - it('is disabled', () => { - checkboxesDisabled(mdcCheckboxes, innerCheckboxes); - }); - it('the property is `true`', async () => { - const propValue = await limelMultiSelect.getProperty( - 'disabled' - ); - expect(propValue).toEqual(true); - }); - }); - }); - - describe('is set to `false`', () => { - let limelMultiSelect; - let mdcCheckboxes; - let innerCheckboxes; - beforeEach(async () => { - page = await createPage(` - - `); - limelMultiSelect = await page.find('limel-multi-select'); - mdcCheckboxes = await page.findAll( - 'limel-multi-select >>> .mdc-checkbox' - ); - innerCheckboxes = await page.findAll( - 'limel-multi-select >>> input[type=checkbox]' - ); - }); - it('is enabled', () => { - checkboxesEnabled(mdcCheckboxes, innerCheckboxes); - }); - it('the property is falsy', async () => { - const propValue = await limelMultiSelect.getProperty( - 'disabled' - ); - expect(propValue).toBeFalsy(); - }); - - describe('when then set to `true`', () => { - beforeEach(async () => { - await limelMultiSelect.setProperty('disabled', true); - await page.waitForChanges(); - }); - it('is disabled', () => { - checkboxesDisabled(mdcCheckboxes, innerCheckboxes); - }); - it('the property is `true`', async () => { - const propValue = await limelMultiSelect.getProperty( - 'disabled' - ); - expect(propValue).toEqual(true); - }); - }); - }); - - describe('is set to `true`', () => { - let limelMultiSelect; - let mdcCheckboxes; - let innerCheckboxes; - beforeEach(async () => { - page = await createPage(` - - `); - limelMultiSelect = await page.find('limel-multi-select'); - mdcCheckboxes = await page.findAll( - 'limel-multi-select>>>.mdc-checkbox' - ); - innerCheckboxes = await page.findAll( - 'limel-multi-select>>>input[type=checkbox]' - ); - }); - it('is disabled', () => { - checkboxesDisabled(mdcCheckboxes, innerCheckboxes); - }); - it('the property is `true`', async () => { - const propValue = await limelMultiSelect.getProperty( - 'disabled' - ); - expect(propValue).toEqual(true); - }); - - describe('when then set to `false`', () => { - beforeEach(async () => { - await limelMultiSelect.setProperty('disabled', false); - await page.waitForChanges(); - }); - it('is enabled', () => { - checkboxesEnabled(mdcCheckboxes, innerCheckboxes); - }); - it('the property is falsy', async () => { - const propValue = await limelMultiSelect.getProperty( - 'disabled' - ); - expect(propValue).toBeFalsy(); - }); - }); - }); - }); -}); - -async function createPage(content) { - return newE2EPage({ html: content }); -} - -function setupTestData() { - const options: Option[] = [ - { text: 'Luke Skywalker', value: 'luke' }, - { text: 'Han Solo', value: 'han' }, - { text: 'Leia Organo', value: 'leia' }, - ]; - const value: Option[] = [{ text: 'Han Solo', value: 'han' }]; - return { options: options, value: value }; -} - -function checkboxesEnabled(mdcCheckboxes, innerCheckboxes) { - mdcCheckboxes.forEach(mdcCheckbox => { - expect(mdcCheckbox).not.toHaveClass('mdc-checkbox--disabled'); - }); - innerCheckboxes.forEach(innerCheckbox => { - expect(innerCheckbox).not.toHaveAttribute('disabled'); - }); -} - -function checkboxesDisabled(mdcCheckboxes, innerCheckboxes) { - mdcCheckboxes.forEach(mdcCheckbox => { - expect(mdcCheckbox).toHaveClass('mdc-checkbox--disabled'); - }); - innerCheckboxes.forEach(innerCheckbox => { - expect(innerCheckbox).toHaveAttribute('disabled'); - }); -} diff --git a/src/components/multi-select/multi-select.mdx b/src/components/multi-select/multi-select.mdx deleted file mode 100644 index 43a9c94c8a..0000000000 --- a/src/components/multi-select/multi-select.mdx +++ /dev/null @@ -1,13 +0,0 @@ ---- -name: Multi Select -route: /multi-select -menu: Components ---- - -# Multi Select - - - -## Example - - diff --git a/src/components/multi-select/multi-select.scss b/src/components/multi-select/multi-select.scss deleted file mode 100644 index a4cdd31001..0000000000 --- a/src/components/multi-select/multi-select.scss +++ /dev/null @@ -1,22 +0,0 @@ -@import '../../style/variables'; - -@import '@lime-material-16px/form-field/mdc-form-field'; -@import '@lime-material-16px/checkbox/mdc-checkbox'; -@import "@lime-material-16px/floating-label/mdc-floating-label"; - -.multi-select { - position: relative; - - .multi-select-label { - padding-left: pxToRem(15); - } - - .mdc-form-field { - display: flex; - } - - .mdc-checkbox { - @include mdc-checkbox-ink-color(primary); - @include mdc-checkbox-container-colors(secondary, on-primary, secondary, on-primary); - } -} diff --git a/src/components/multi-select/multi-select.tsx b/src/components/multi-select/multi-select.tsx deleted file mode 100644 index ad7c75d5fe..0000000000 --- a/src/components/multi-select/multi-select.tsx +++ /dev/null @@ -1,141 +0,0 @@ -import { MDCCheckbox } from '@lime-material-16px/checkbox'; -import { MDCFormField } from '@lime-material-16px/form-field'; -import { - Component, - Element, - Event, - EventEmitter, - Prop, - State, -} from '@stencil/core'; -import { Option } from '../../interface'; -import { createRandomString } from '../../util/random-string'; - -@Component({ - tag: 'limel-multi-select', - shadow: true, - styleUrl: 'multi-select.scss', -}) -export class MultiSelect { - @Prop({ reflectToAttr: true }) - public disabled = false; - - @Prop({ reflectToAttr: true }) - public label: string; - - @Prop() - public value: Option[] = []; - - @Prop() - public options: Option[] = []; - - @Event() - private change: EventEmitter; - - @Element() - private limelMultiSelect: HTMLElement; - - @State() - private fieldId = createRandomString(); - - @State() - private mdcCheckboxes = []; - - public componentDidLoad() { - const elements = Array.from( - this.limelMultiSelect.shadowRoot.querySelectorAll( - '.multi-select .mdc-form-field' - ) - ); - - elements.forEach(element => { - const formField = new MDCFormField(element); - const checkbox = new MDCCheckbox(element.firstChild); - formField.input = checkbox; - this.mdcCheckboxes.push(checkbox); - }); - - this.onChange(); - } - - public render() { - return ( -
- -
- {this.options.map((option: Option, index: number) => { - return this.renderCheckbox(index, option); - })} -
-
- ); - } - - private renderCheckbox(index: number, option: Option) { - return ( -
-
- -
- - - -
-
-
- -
- ); - } - - private isOptionChecked(option: Option) { - return this.value.find(checkedOption => { - return checkedOption.value === option.value; - }); - } - - private onChange = (event?) => { - if (event) { - event.stopPropagation(); - } - - const checked = this.options.filter(option => { - const optionChecked = this.mdcCheckboxes.some(mdcCheckbox => { - return ( - mdcCheckbox.checked && mdcCheckbox.value === option.value - ); - }); - if (optionChecked) { - return option; - } - }); - this.change.emit(checked); - }; -} diff --git a/src/examples/multi-select/multi-select.scss b/src/examples/multi-select/multi-select.scss deleted file mode 100644 index bf46b7198b..0000000000 --- a/src/examples/multi-select/multi-select.scss +++ /dev/null @@ -1,3 +0,0 @@ -p { - font-size: small; -} diff --git a/src/examples/multi-select/multi-select.tsx b/src/examples/multi-select/multi-select.tsx deleted file mode 100644 index 811303c1e1..0000000000 --- a/src/examples/multi-select/multi-select.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { Component, State } from '@stencil/core'; -import { Option } from '../../components/select/option.types'; - -@Component({ - shadow: true, - tag: 'limel-example-multi-select', - styleUrl: 'multi-select.scss', -}) -export class MultiSelectExample { - @State() - private value: Option[] = [{ text: 'Han Solo', value: 'han' }]; - - @State() - private disabled = false; - - private options: Option[] = [ - { text: 'Luke Skywalker', value: 'luke' }, - { text: 'Han Solo', value: 'han' }, - { text: 'Leia Organo', value: 'leia' }, - ]; - - constructor() { - this.onChange = this.onChange.bind(this); - this.toggleEnabled = this.toggleEnabled.bind(this); - } - - public render() { - return [ - , -

- - - -

, -

Value: {JSON.stringify(this.value)}

, - ]; - } - - private onChange(event) { - this.value = event.detail; - } - - private toggleEnabled() { - this.disabled = !this.disabled; - } -}