diff --git a/src/dev/pages/chip-field/chip-field.html b/src/dev/pages/chip-field/chip-field.html index a117360a0..a40a5ac31 100644 --- a/src/dev/pages/chip-field/chip-field.html +++ b/src/dev/pages/chip-field/chip-field.html @@ -8,7 +8,7 @@ { type: 'switch', label: 'Invalid', id: 'opt-invalid' }, { type: 'switch', label: 'Disabled', id: 'opt-disabled' }, { type: 'switch', label: 'Dense', id: 'opt-dense' }, - { type: 'switch', label: 'Add member on blur', id: 'opt-member-on-blur' }, + { type: 'switch', label: 'Add on blur', id: 'opt-add-on-blur' }, { type: 'button', label: 'Populate chips', id: 'opt-btn-populate' }, { type: 'button', label: 'Clear chips', id: 'opt-btn-clear' }, ] diff --git a/src/dev/pages/chip-field/chip-field.ts b/src/dev/pages/chip-field/chip-field.ts index f9904a368..46cf991e3 100644 --- a/src/dev/pages/chip-field/chip-field.ts +++ b/src/dev/pages/chip-field/chip-field.ts @@ -20,7 +20,7 @@ const requiredToggle = document.querySelector('#opt-required') as ISwitchCompone const invalidToggle = document.querySelector('#opt-invalid') as ISwitchComponent; const disabledToggle = document.querySelector('#opt-disabled') as ISwitchComponent; const denseToggle = document.querySelector('#opt-dense') as ISwitchComponent; -const onBlurToggle = document.querySelector('#opt-member-on-blur') as ISwitchComponent; +const onBlurToggle = document.querySelector('#opt-add-on-blur') as ISwitchComponent; const populateButton = document.querySelector('#opt-btn-populate') as HTMLButtonElement; const clearButton = document.querySelector('#opt-btn-clear') as HTMLButtonElement; @@ -182,8 +182,8 @@ function updateDenseState({ detail: isDense }: CustomEvent): void { chips.forEach(({ dense }) => dense = isDense); } -function updateOnBlurProperty({ detail: addMemberOnBlur }: CustomEvent): void { - simpleChipField.addMemberOnBlur = addMemberOnBlur; +function updateOnBlurProperty({ detail: addOnBlur }: CustomEvent): void { + simpleChipField.addOnBlur = addOnBlur; } function setChipsDisabledState(isDisabled: boolean): void { diff --git a/src/lib/chip-field/chip-field-constants.ts b/src/lib/chip-field/chip-field-constants.ts index 747995009..739224b60 100644 --- a/src/lib/chip-field/chip-field-constants.ts +++ b/src/lib/chip-field/chip-field-constants.ts @@ -29,7 +29,7 @@ const events = { }; const attributes = { - ADD_MEMBER_ON_BLUR: 'add-member-on-blur' + ADD_ON_BLUR: 'add-on-blur' }; export const CHIP_FIELD_CONSTANTS = { diff --git a/src/lib/chip-field/chip-field-foundation.ts b/src/lib/chip-field/chip-field-foundation.ts index fab0a8431..096cb3fe1 100644 --- a/src/lib/chip-field/chip-field-foundation.ts +++ b/src/lib/chip-field/chip-field-foundation.ts @@ -4,11 +4,11 @@ import { CHIP_FIELD_CONSTANTS } from './chip-field-constants'; import { IFieldFoundation, FieldFoundation } from '../field/field-foundation'; export interface IChipFieldFoundation extends IFieldFoundation { - addMemberOnBlur: boolean; + addOnBlur: boolean; } export class ChipFieldFoundation extends FieldFoundation implements IChipFieldFoundation { - private _addMemberOnBlur = false; + private _addOnBlur = false; private _memberSlotListener: () => void; private _inputContainerMouseDownListener: (evt: MouseEvent) => void; private _handleRootKeyDown: (event: KeyboardEvent) => void; @@ -39,14 +39,14 @@ export class ChipFieldFoundation extends FieldFoundation implements IChipFieldFo } /** Controls adding a member of entered text on blur. */ - public get addMemberOnBlur(): boolean { - return this._addMemberOnBlur; + public get addOnBlur(): boolean { + return this._addOnBlur; } - public set addMemberOnBlur(value: boolean) { + public set addOnBlur(value: boolean) { value = Boolean(value); - if (this._addMemberOnBlur !== value) { - this._addMemberOnBlur = value; - this._adapter.toggleHostAttribute(CHIP_FIELD_CONSTANTS.attributes.ADD_MEMBER_ON_BLUR, this._addMemberOnBlur); + if (this._addOnBlur !== value) { + this._addOnBlur = value; + this._adapter.toggleHostAttribute(CHIP_FIELD_CONSTANTS.attributes.ADD_ON_BLUR, this._addOnBlur); } } @@ -59,7 +59,7 @@ export class ChipFieldFoundation extends FieldFoundation implements IChipFieldFo protected _onBlur(event: FocusEvent): void { const input = event.target as HTMLInputElement; - if (this._addMemberOnBlur) { + if (this._addOnBlur) { this._addMember(input); } @@ -102,7 +102,7 @@ export class ChipFieldFoundation extends FieldFoundation implements IChipFieldFo input.value = ''; break; case 'Tab': - if (!this._addMemberOnBlur) { + if (!this._addOnBlur) { input.value = ''; } break; diff --git a/src/lib/chip-field/chip-field.ts b/src/lib/chip-field/chip-field.ts index 2c2c3f1a2..a8901a6c7 100644 --- a/src/lib/chip-field/chip-field.ts +++ b/src/lib/chip-field/chip-field.ts @@ -10,7 +10,7 @@ import styles from './chip-field.scss'; import { FIELD_CONSTANTS } from '../field/field-constants'; export interface IChipFieldComponent extends IFieldComponent { - addMemberOnBlur: boolean; + addOnBlur: boolean; } declare global { @@ -37,7 +37,7 @@ export class ChipFieldComponent extends FieldComponent impl public static get observedAttributes(): string[] { return [ ...Object.values(FIELD_CONSTANTS.attributes), - CHIP_FIELD_CONSTANTS.attributes.ADD_MEMBER_ON_BLUR + CHIP_FIELD_CONSTANTS.attributes.ADD_ON_BLUR ]; } @@ -49,8 +49,8 @@ export class ChipFieldComponent extends FieldComponent impl public attributeChangedCallback(name: string, oldValue: string, newValue: string): void { switch (name) { - case CHIP_FIELD_CONSTANTS.attributes.ADD_MEMBER_ON_BLUR: - this.addMemberOnBlur = coerceBoolean(newValue); + case CHIP_FIELD_CONSTANTS.attributes.ADD_ON_BLUR: + this.addOnBlur = coerceBoolean(newValue); return; } super.attributeChangedCallback(name, oldValue, newValue); @@ -58,5 +58,5 @@ export class ChipFieldComponent extends FieldComponent impl /** Controls whether or not the value should be set onBlur */ @FoundationProperty() - public declare addMemberOnBlur: boolean; + public declare addOnBlur: boolean; } diff --git a/src/stories/src/components/chip-field/chip-field-args.ts b/src/stories/src/components/chip-field/chip-field-args.ts index 62a8f832e..02a35f1b9 100644 --- a/src/stories/src/components/chip-field/chip-field-args.ts +++ b/src/stories/src/components/chip-field/chip-field-args.ts @@ -14,7 +14,7 @@ export interface IChipFieldProps { hasLeading: boolean; hasTrailing: boolean; hasAddonEnd: boolean; - addMemberOnBlur: boolean; + addOnBlur: boolean; } export const argTypes = { @@ -131,9 +131,9 @@ export const argTypes = { category: 'Slots', }, }, - addMemberOnBlur: { + addOnBlur: { control: 'boolean', - description: 'When set to true, pressing tab or clicking away from the field will set whatever you have typed as a value', + description: '', table: { category: 'Properties', }, diff --git a/src/stories/src/components/chip-field/chip-field.mdx b/src/stories/src/components/chip-field/chip-field.mdx index b8b5a69a2..f0d866e6a 100644 --- a/src/stories/src/components/chip-field/chip-field.mdx +++ b/src/stories/src/components/chip-field/chip-field.mdx @@ -74,11 +74,11 @@ Valid values: `auto` (default), `always`. - + -Controls the behavior of the blur event with the chip field. When set to true, pressing tab or clicking away from the field will set whatever you have typed as a value +Controls the behavior of the blur event. When set to true, pressing tab or clicking away from the field will emit the add member event with the current text value. -This property should only be used with a simple chip field, not with an autocomplete. +Note: This property should only be used with a simple chip field, not with an autocomplete. diff --git a/src/stories/src/components/chip-field/chip-field.stories.tsx b/src/stories/src/components/chip-field/chip-field.stories.tsx index 35dffe57c..dd821ff1d 100644 --- a/src/stories/src/components/chip-field/chip-field.stories.tsx +++ b/src/stories/src/components/chip-field/chip-field.stories.tsx @@ -30,7 +30,7 @@ export const Default: Story = ({ hasTrailing = false, hasHelperText = false, hasAddonEnd = false, - addMemberOnBlur = false + addOnBlur = false }) => { const chipFieldRef = useRef(); const addMember = (evt: CustomEvent) => { @@ -69,7 +69,7 @@ export const Default: Story = ({ floatLabelType={floatLabelType} shape={shape} invalid={invalid} - addMemberOnBlur={addMemberOnBlur} + addOnBlur={addOnBlur} required={required} style={{width: '559px'}}> @@ -111,7 +111,7 @@ Default.args = { hasTrailing: false, hasHelperText: false, hasAddonEnd: false, - addMemberOnBlur: false + addOnBlur: false } as IChipFieldProps; export const WithAutocomplete: Story<{}> = () => { diff --git a/src/test/spec/chip-field/chip-field.spec.ts b/src/test/spec/chip-field/chip-field.spec.ts index e20f3d70e..286f6830c 100644 --- a/src/test/spec/chip-field/chip-field.spec.ts +++ b/src/test/spec/chip-field/chip-field.spec.ts @@ -82,17 +82,17 @@ describe('ChipFieldComponent', function(this: ITestContext) { expect(this.context.foundation['_isInitialized']).toBeTrue(); }); - it('should set the addMemberOnBlur property to false when the attribute is not applied', function(this: ITestContext) { + it('should set the addOnBlur property to false when the attribute is not applied', function(this: ITestContext) { this.context = setupTestContext(); - expect(this.context.component.addMemberOnBlur).toBeFalse(); + expect(this.context.component.addOnBlur).toBeFalse(); }); - it('should set the addMemberOnBlur property to true when the attribute is set to true', function(this: ITestContext) { + it('should set the addOnBlur property to true when the attribute is set to true', function(this: ITestContext) { this.context = setupTestContext(); - this.context.component.setAttribute(CHIP_FIELD_CONSTANTS.attributes.ADD_MEMBER_ON_BLUR, ''); + this.context.component.setAttribute(CHIP_FIELD_CONSTANTS.attributes.ADD_ON_BLUR, ''); - expect(this.context.component.addMemberOnBlur).toBe(true); + expect(this.context.component.addOnBlur).toBe(true); }); it('should float label if value is set before adding to DOM', async function(this: ITestContext) { @@ -1205,27 +1205,27 @@ describe('ChipFieldComponent', function(this: ITestContext) { expect(inputIsActive).toBeTrue(); }); - it('should set the addMemberOnBlur property to true when the attribute is set to true', function(this: ITestContext) { + it('should set the addOnBlur property to true when the attribute is set to true', function(this: ITestContext) { this.context = setupTestContext(); - this.context.component.setAttribute(CHIP_FIELD_CONSTANTS.attributes.ADD_MEMBER_ON_BLUR, ''); + this.context.component.setAttribute(CHIP_FIELD_CONSTANTS.attributes.ADD_ON_BLUR, ''); - expect(this.context.component.addMemberOnBlur).toBe(true); + expect(this.context.component.addOnBlur).toBe(true); }); - it('should set the addMemberOnBlur property to false when the attribute is set to false', function(this: ITestContext) { + it('should set the addOnBlur property to false when the attribute is set to false', function(this: ITestContext) { this.context = setupTestContext(); - this.context.component.addMemberOnBlur = true; - expect(this.context.component.addMemberOnBlur).toBeTrue(); + this.context.component.addOnBlur = true; + expect(this.context.component.addOnBlur).toBeTrue(); - this.context.component.setAttribute(CHIP_FIELD_CONSTANTS.attributes.ADD_MEMBER_ON_BLUR, 'false'); - expect(this.context.component.addMemberOnBlur).toBe(false); + this.context.component.setAttribute(CHIP_FIELD_CONSTANTS.attributes.ADD_ON_BLUR, 'false'); + expect(this.context.component.addOnBlur).toBe(false); }); - it('chips should not be added when addMemberOnBlur is set to false and the "Tab" key is pressed', function(this: ITestContext) { + it('chips should not be added when addOnBlur is set to false and the "Tab" key is pressed', function(this: ITestContext) { this.context = setupTestContext(); - expect(this.context.component.addMemberOnBlur).toBeFalse(); + expect(this.context.component.addOnBlur).toBeFalse(); const listener = jasmine.createSpy('add member listener'); this.context.component.addEventListener(CHIP_FIELD_CONSTANTS.events.MEMBER_ADDED, listener); @@ -1239,9 +1239,9 @@ describe('ChipFieldComponent', function(this: ITestContext) { expect(inputEl.value).withContext('the input value should have been cleared').toBe(''); }); - it('chips should be added when addMemberOnBlur is set to true and the mouse is clicked outside of the input', function(this: ITestContext) { + it('chips should be added when addOnBlur is set to true and the mouse is clicked outside of the input', function(this: ITestContext) { this.context = setupTestContext(); - this.context.component.setAttribute(CHIP_FIELD_CONSTANTS.attributes.ADD_MEMBER_ON_BLUR, 'true'); + this.context.component.setAttribute(CHIP_FIELD_CONSTANTS.attributes.ADD_ON_BLUR, 'true'); const listener = jasmine.createSpy('add member listener'); this.context.component.addEventListener(CHIP_FIELD_CONSTANTS.events.MEMBER_ADDED, listener); getNativeInput(this.context.component).value = 'test';