Skip to content

Commit

Permalink
feat(autocomplete): add popoverExpanded prop/attr to base field and u…
Browse files Browse the repository at this point in the history
…pdate autocomplete to use it (#564)
  • Loading branch information
DRiFTy17 authored May 17, 2024
1 parent 29c5688 commit aebf454
Show file tree
Hide file tree
Showing 6 changed files with 45 additions and 12 deletions.
4 changes: 2 additions & 2 deletions src/dev/pages/autocomplete/autocomplete.ejs
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<div class="vert">
<form autocomplete="off">
<forge-autocomplete id="autocomplete">
<forge-text-field>
<forge-text-field popover-icon>
<label for="autocomplete-input">Choose state</label>
<input type="text" id="autocomplete-input" />
<forge-icon-button slot="trailing" density="medium" data-forge-autocomplete-clear>
<forge-icon name="close"></forge-icon>
</forge-icon-button>
<forge-icon slot="trailing" name="arrow_drop_down" data-forge-dropdown-icon></forge-icon>
</forge-text-field>
</forge-autocomplete>
</form>
Expand Down
32 changes: 23 additions & 9 deletions src/lib/autocomplete/autocomplete-adapter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { IListDropdown, IListDropdownConfig, ListDropdown } from '../list-dropdo
import { CHIP_FIELD_CONSTANTS } from '../chip-field';
import { IPopoverComponent } from '../popover/popover';
import { POPOVER_CONSTANTS } from '../popover';
import { IFieldComponent } from '../field/field';

export interface IAutocompleteAdapter extends IBaseAdapter {
setInputElement(): HTMLInputElement;
Expand Down Expand Up @@ -285,22 +286,35 @@ export class AutocompleteAdapter extends BaseAdapter<IAutocompleteComponent> imp
}

private _getDefaultTargetElement(): HTMLElement {
const fieldElements = [
TEXT_FIELD_CONSTANTS.elementName,
CHIP_FIELD_CONSTANTS.elementName
];
// This component is often used with the field-like Forge elements, if so, let's target our popup around one if its internal elements for proper alignment
const textField = this._component.querySelector(`:is(${fieldElements.join(',')})`) as HTMLElement;
if (textField?.popoverTargetElement) {
return textField.popoverTargetElement;
// This component is often used with the field-like Forge elements, if so, let's target our popup
// around one if its internal elements for proper alignment
const fieldLike = this._tryGetFieldLikeChild();
if (fieldLike?.popoverTargetElement) {
return fieldLike.popoverTargetElement;
}
return this._component.querySelector('input') || this._component;
}

private _tryToggleDropdownIconRotation(state: boolean): void {
const fieldLike = this._tryGetFieldLikeChild();
if (fieldLike?.popoverIcon) {
fieldLike.popoverExpanded = state;
}

// Deprecated/legacy support
// TODO: Remove in a future release
const dropdownIcon = this._component.querySelector(AUTOCOMPLETE_CONSTANTS.selectors.DROPDOWN_ICON) as HTMLElement;
if (dropdownIcon) {
toggleAttribute(dropdownIcon, state, AUTOCOMPLETE_CONSTANTS.attributes.DROPDOWN_ICON_OPEN);
dropdownIcon.style.transition = 'transform 120ms linear';
dropdownIcon.style.transform = state ? 'rotateZ(180deg)' : '';
}
}

private _tryGetFieldLikeChild(): IFieldComponent | null {
const fieldLikeElements = [
TEXT_FIELD_CONSTANTS.elementName,
CHIP_FIELD_CONSTANTS.elementName
];
return this._component.querySelector(`:is(${fieldLikeElements.join(',')})`) as IFieldComponent;
}
}
1 change: 1 addition & 0 deletions src/lib/field/base/base-field-constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const observedAttributes = {
DENSITY: 'density',
DENSE: 'dense',
POPOVER_ICON: 'popover-icon',
POPOVER_EXPANDED: 'popover-expanded',
SUPPORT_TEXT_INSET: 'support-text-inset'
};

Expand Down
12 changes: 12 additions & 0 deletions src/lib/field/base/base-field-foundation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export interface IBaseFieldFoundation extends ICustomElementFoundation {
density: string;
dense: boolean;
popoverIcon: boolean;
popoverExpanded: boolean;
supportTextInset: string;
click(): void;
applyLabel(value: string | null): void;
Expand All @@ -35,6 +36,7 @@ export abstract class BaseFieldFoundation<T extends IBaseFieldAdapter> implement
protected _density = BASE_FIELD_CONSTANTS.defaults.DEFAULT_DENSITY;
protected _dense = false;
protected _popoverIcon = false;
protected _popoverExpanded = false;
protected _supportTextInset = BASE_FIELD_CONSTANTS.defaults.DEFAULT_SUPPORT_TEXT_INSET;
protected _permanentlyFloatLabel = false;

Expand Down Expand Up @@ -213,6 +215,16 @@ export abstract class BaseFieldFoundation<T extends IBaseFieldAdapter> implement
}
}

public get popoverExpanded(): boolean {
return this._popoverExpanded;
}
public set popoverExpanded(value: boolean) {
if (this._popoverExpanded !== value) {
this._popoverExpanded = value;
this._adapter.setFieldProperty('popoverExpanded', value);
}
}

public get supportTextInset(): FieldSupportTextInset {
return this._supportTextInset;
}
Expand Down
7 changes: 7 additions & 0 deletions src/lib/field/base/base-field.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export interface IBaseField extends IWithLabelAwareness {
density: FieldDensity;
dense: boolean;
popoverIcon: boolean;
popoverExpanded: boolean;
supportTextInset: FieldSupportTextInset;
floatLabelWithoutAnimation(value: boolean): void;
}
Expand Down Expand Up @@ -75,6 +76,9 @@ export abstract class BaseField<T extends BaseFieldFoundation<IBaseFieldAdapter>
case BASE_FIELD_CONSTANTS.observedAttributes.POPOVER_ICON:
this.popoverIcon = coerceBoolean(newValue);
return;
case BASE_FIELD_CONSTANTS.observedAttributes.POPOVER_EXPANDED:
this.popoverExpanded = coerceBoolean(newValue);
return;
case BASE_FIELD_CONSTANTS.observedAttributes.SUPPORT_TEXT_INSET:
this.supportTextInset = newValue as FieldSupportTextInset;
return;
Expand Down Expand Up @@ -128,6 +132,9 @@ export abstract class BaseField<T extends BaseFieldFoundation<IBaseFieldAdapter>
@FoundationProperty()
public declare popoverIcon: boolean;

@FoundationProperty()
public declare popoverExpanded: boolean;

@FoundationProperty()
public declare supportTextInset: FieldSupportTextInset;

Expand Down
1 change: 0 additions & 1 deletion src/lib/field/field-constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ const elementName: keyof HTMLElementTagNameMap = `${COMPONENT_NAME_PREFIX}field`

const observedAttributes = {
...BASE_FIELD_CONSTANTS.observedAttributes,
POPOVER_EXPANDED: 'popover-expanded',
MULTILINE: 'multiline',
FOCUS_INDICATOR_ALLOW_FOCUS: 'focus-indicator-allow-focus',
FOCUS_INDICATOR_FOCUS_MODE: 'focus-indicator-focus-mode'
Expand Down

0 comments on commit aebf454

Please sign in to comment.