This repository has been archived by the owner on Nov 30, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 44
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(text-field): add text field icon (#317)
* feat(text-field): add text field icon * feat(text-field): add text field icon * feat(text-field): add text-field-icon * test(text-field): update snapshots
- Loading branch information
1 parent
0650e3d
commit 8f271f1
Showing
6 changed files
with
232 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| <template> | ||
| <i | ||
| class="mdc-text-field__icon" | ||
| v-bind="attrs" | ||
| v-on="$listeners" | ||
| tabindex="0" | ||
| role="button" | ||
| > | ||
| <slot /> | ||
| </i> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { MDCTextFieldIcon } from '@material/textfield/icon' | ||
| export default { | ||
| name: 'TextFieldIcon', | ||
| props: { | ||
| clickable: { | ||
| type: Boolean, | ||
| default: true | ||
| } | ||
| }, | ||
| data () { | ||
| return { | ||
| attrs: Object.assign({}, this.$attrs), | ||
| mdcTextFieldIcon: undefined | ||
| } | ||
| }, | ||
| watch: { | ||
| clickable () { | ||
| if (this.clickable) { | ||
| this.$set(this.attrs, 'tabindex', '0') | ||
| this.$set(this.attrs, 'role', 'button') | ||
| } else { | ||
| this.$delete(this.attrs, 'tabindex') | ||
| this.$delete(this.attrs, 'role') | ||
| } | ||
| } | ||
| }, | ||
| mounted () { | ||
| if (this.clickable) { | ||
| this.$set(this.attrs, 'tabindex', '0') | ||
| this.$set(this.attrs, 'role', 'button') | ||
| } | ||
| this.mdcTextFieldIcon = MDCTextFieldIcon.attachTo(this.$el) | ||
| }, | ||
| beforeDestroy () { | ||
| this.mdcTextFieldIcon.destroyed() | ||
| } | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| import 'mutationobserver-shim' | ||
| import { mount } from '@vue/test-utils' | ||
| import TextField from '../TextField.vue' | ||
| import TextFieldCharacterCounter from '../TextFieldCharacterCounter.vue' | ||
| import TextFieldIcon from '../TextFieldIcon.vue' | ||
| import TextFIeldHelperText from '../TextFieldHelperText.vue' | ||
|
|
||
| describe('Text Field', () => { | ||
| it('should mount', () => { | ||
| let wrapper = mount(TextField) | ||
| expect(wrapper.isVueInstance()).toBeTruthy() | ||
| expect(wrapper.vm.$data.mdcTextField).toBeDefined() | ||
| }) | ||
|
|
||
| it('should render with no prop', () => { | ||
| let wrapper = mount(TextField) | ||
| expect(wrapper).toMatchSnapshot() | ||
| expect(wrapper.classes()).toContain('mdc-text-field') | ||
| expect(wrapper.classes()).toContain('mdc-text-field--no-label') | ||
| expect(wrapper.find('input').attributes('disabled')).toBeUndefined() | ||
| }) | ||
|
|
||
| it('should render as focused', () => { | ||
| let wrapper = mount(TextField) | ||
| let input = wrapper.find('input') | ||
| input.trigger('focus') | ||
| expect(wrapper).toMatchSnapshot() | ||
| expect(wrapper.classes()).toContain('mdc-text-field--focused') | ||
| }) | ||
|
|
||
| it('should render as disabled', () => { | ||
| let wrapper = mount(TextField, { | ||
| propsData: { | ||
| disabled: true | ||
| } | ||
| }) | ||
| expect(wrapper).toMatchSnapshot() | ||
| expect(wrapper.classes()).toContain('mdc-text-field--disabled') | ||
| expect(wrapper.find('input').attributes('disabled')).toBeDefined() | ||
| }) | ||
|
|
||
| it('should render as outlined', () => { | ||
| let wrapper = mount(TextField, { | ||
| propsData: { | ||
| outlined: true | ||
| } | ||
| }) | ||
| expect(wrapper).toMatchSnapshot() | ||
| expect(wrapper.classes()).toContain('mdc-text-field--outlined') | ||
| expect(wrapper.find('.mdc-notched-outline').exists()).toBe(true) | ||
| }) | ||
|
|
||
| it('should render as dense', () => { | ||
| let wrapper = mount(TextField, { | ||
| propsData: { | ||
| dense: true | ||
| } | ||
| }) | ||
| expect(wrapper).toMatchSnapshot() | ||
| expect(wrapper.classes()).toContain('mdc-text-field--dense') | ||
| }) | ||
|
|
||
| it('should render as fullWidth', () => { | ||
| let wrapper = mount(TextField, { | ||
| propsData: { | ||
| fullWidth: true | ||
| } | ||
| }) | ||
| expect(wrapper).toMatchSnapshot() | ||
| expect(wrapper.classes()).toContain('mdc-text-field--fullwidth') | ||
| }) | ||
|
|
||
| it('should render and emit', () => { | ||
| let wrapper = mount(TextField, { | ||
| propsData: { | ||
| value: 'val' | ||
| } | ||
| }) | ||
|
|
||
| const input = wrapper.find('input') | ||
| input.setValue('test') | ||
| expect(wrapper.emitted().model.length).toBe(1) | ||
| expect(wrapper.emitted().model[0]).toEqual(['test']) | ||
| }) | ||
|
|
||
| it('should render with leading icon', () => { | ||
| let wrapper = mount(TextField, { | ||
| slots: { | ||
| leadingIcon: TextFieldIcon | ||
| } | ||
| }) | ||
| expect(wrapper).toMatchSnapshot() | ||
| expect(wrapper.classes()).toContain('mdc-text-field--with-leading-icon') | ||
| }) | ||
|
|
||
| it('should render with trailing icon', () => { | ||
| let wrapper = mount(TextField, { | ||
| slots: { | ||
| trailingIcon: TextFieldIcon | ||
| } | ||
| }) | ||
| expect(wrapper).toMatchSnapshot() | ||
| expect(wrapper.classes()).toContain('mdc-text-field--with-trailing-icon') | ||
| }) | ||
| }) |
69 changes: 69 additions & 0 deletions
69
components/text-field/__test__/__snapshots__/TextField.spec.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`Text Field should render as dense 1`] = ` | ||
| <div class="mdc-text-field mdc-text-field--dense mdc-text-field--no-label"> <input class="mdc-text-field__input"> | ||
| <!----> | ||
| <!----> | ||
| <!----> | ||
| </div> | ||
| `; | ||
| exports[`Text Field should render as disabled 1`] = ` | ||
| <div class="mdc-text-field mdc-text-field--no-label mdc-text-field--disabled"> <input class="mdc-text-field__input" disabled=""> | ||
| <!----> | ||
| <!----> | ||
| <!----> | ||
| </div> | ||
| `; | ||
| exports[`Text Field should render as focused 1`] = ` | ||
| <div class="mdc-text-field mdc-text-field--no-label mdc-text-field--focused"> <input class="mdc-text-field__input"> | ||
| <!----> | ||
| <!----> | ||
| <!----> | ||
| </div> | ||
| `; | ||
| exports[`Text Field should render as fullWidth 1`] = ` | ||
| <div class="mdc-text-field mdc-text-field--fullwidth"> <input class="mdc-text-field__input"> | ||
| <!----> | ||
| <!----> | ||
| <!----> | ||
| </div> | ||
| `; | ||
| exports[`Text Field should render as outlined 1`] = ` | ||
| <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label"> <input class="mdc-text-field__input"> | ||
| <!----> | ||
| <div class="mdc-notched-outline mdc-notched-outline--no-label"> | ||
| <div class="mdc-notched-outline__leading"></div> | ||
| <!----> | ||
| <div class="mdc-notched-outline__trailing"></div> | ||
| </div> | ||
| <!----> | ||
| <!----> | ||
| </div> | ||
| `; | ||
| exports[`Text Field should render with leading icon 1`] = ` | ||
| <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--no-label"><i tabindex="0" role="button" class="mdc-text-field__icon"></i> <input class="mdc-text-field__input"> | ||
| <!----> | ||
| <!----> | ||
| <!----> | ||
| </div> | ||
| `; | ||
| exports[`Text Field should render with no prop 1`] = ` | ||
| <div class="mdc-text-field mdc-text-field--no-label"> <input class="mdc-text-field__input"> | ||
| <!----> | ||
| <!----> | ||
| <!----> | ||
| </div> | ||
| `; | ||
| exports[`Text Field should render with trailing icon 1`] = ` | ||
| <div class="mdc-text-field mdc-text-field--with-trailing-icon mdc-text-field--no-label"> <input class="mdc-text-field__input"> | ||
| <!----> | ||
| <!----> | ||
| <!----> <i tabindex="0" role="button" class="mdc-text-field__icon"></i> </div> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters