From 5fb388de8ab4e1d02329f19048401dc016ba1f10 Mon Sep 17 00:00:00 2001 From: lucas-alcantara-brisa <138056766+lucas-alcantara-brisa@users.noreply.github.com> Date: Fri, 17 Nov 2023 09:46:20 -0300 Subject: [PATCH] refactor: fixing style error occurring in certain chip flows #926 (#939) * refactor: fixing style error occurring in certain chip flows #926 * fix: click on chip issues * fix: opening dropdown in a regular required chip group --------- Co-authored-by: allan-chagas-brisa --- .../lib/chip-group/chip-group.component.html | 2 ++ .../chip-group/chip-group.component.spec.ts | 20 +++++++++++++++++++ .../lib/chip-group/chip-group.component.ts | 7 +++++++ .../ion/src/lib/chip/chip.component.spec.ts | 20 +++++++++++++++++++ projects/ion/src/lib/chip/chip.component.ts | 8 ++++++++ projects/ion/src/lib/core/types/chip.ts | 1 + 6 files changed, 58 insertions(+) diff --git a/projects/ion/src/lib/chip-group/chip-group.component.html b/projects/ion/src/lib/chip-group/chip-group.component.html index acc67fc0f..076f415aa 100644 --- a/projects/ion/src/lib/chip-group/chip-group.component.html +++ b/projects/ion/src/lib/chip-group/chip-group.component.html @@ -6,6 +6,7 @@ [disabled]="chip.disabled || disabled" [selected]="chip.selected" [showDropdown]="chip.selected && chip.options" + [showToggle]="chip.options" [size]="chip.size || size" [options]="chip.options" [icon]="chip.icon" @@ -14,6 +15,7 @@ [iconPosition]="chip.iconPosition || iconPosition" [rightBadge]="chip.rightBadge || rightBadge" (click)="selectChip(chip)" + (events)="chipEvents($event)" (dropdownEvents)="dropdownEvents($event)" [attr.data-testid]="'chip-group-' + chip.label" [chipGroup]="true" diff --git a/projects/ion/src/lib/chip-group/chip-group.component.spec.ts b/projects/ion/src/lib/chip-group/chip-group.component.spec.ts index 5b3761a79..48c959bce 100644 --- a/projects/ion/src/lib/chip-group/chip-group.component.spec.ts +++ b/projects/ion/src/lib/chip-group/chip-group.component.spec.ts @@ -130,6 +130,7 @@ describe('With Dropdown', () => { it('should selected an item when chip has dropdown', async () => { await sut(); const option = mockChips[1].options[0].label; + fireEvent.click(screen.getByText(mockChips[1].label)); fireEvent.click(screen.getByText(option)); expect(screen.queryAllByText(option)).toHaveLength(1); }); @@ -152,4 +153,23 @@ describe('With Dropdown', () => { fireEvent.click(screen.getByText('item 1')); expect(screen.getByTestId('ion-dropdown')).toBeInTheDocument(); }); + + it('should reset chip style when clicked outside dropdown', async () => { + await sut({ + chips: [ + { + label: 'Chip 1', + selected: false, + options: [{ label: 'item 1' }, { label: 'item 2' }], + multiple: true, + }, + ], + selected: { + emit: selectEvent, + } as SafeAny, + }); + fireEvent.click(screen.getByText('Chip 1')); + fireEvent.click(document.body); + expect(screen.getByText('Chip 1')).not.toHaveClass('chip-selected'); + }); }); diff --git a/projects/ion/src/lib/chip-group/chip-group.component.ts b/projects/ion/src/lib/chip-group/chip-group.component.ts index 34b8d246a..3bbc47a74 100644 --- a/projects/ion/src/lib/chip-group/chip-group.component.ts +++ b/projects/ion/src/lib/chip-group/chip-group.component.ts @@ -1,5 +1,6 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; import { + ChipEvent, ChipSize, IconDirection, IonChipProps, @@ -65,6 +66,12 @@ export class IonChipGroupComponent { } } + chipEvents(event: ChipEvent): void { + if (event.closeDropdown) { + this.clearChips(); + } + } + dropdownEvents(options: DropdownItem[]): void { if (options) { this.dropdown.emit(options); diff --git a/projects/ion/src/lib/chip/chip.component.spec.ts b/projects/ion/src/lib/chip/chip.component.spec.ts index c0eef1396..3f85fe636 100644 --- a/projects/ion/src/lib/chip/chip.component.spec.ts +++ b/projects/ion/src/lib/chip/chip.component.spec.ts @@ -253,6 +253,7 @@ describe('Check update label', () => { describe('With Multiple Dropdown', () => { const dropdownEvent = jest.fn(); + const events = jest.fn(); const options = [ { label: 'Meteora', @@ -273,6 +274,9 @@ describe('With Multiple Dropdown', () => { dropdownEvents: { emit: dropdownEvent, } as SafeAny, + events: { + emit: events, + } as SafeAny, }); }); @@ -313,6 +317,22 @@ describe('With Multiple Dropdown', () => { expect(dropdownEvent).toBeCalledWith([]); }); + it('should reset chip style when dropdown is closed', async () => { + fireEvent.click(screen.getByText('dropdown')); + fireEvent.click(document.body); + expect(screen.getByText('dropdown')).not.toHaveClass('chip-selected'); + }); + + it('should emit event when dropdown is closed', async () => { + fireEvent.click(screen.getByText('dropdown')); + fireEvent.click(document.body); + expect(events).toBeCalledWith({ + selected: false, + disabled: false, + closeDropdown: true, + }); + }); + afterEach(() => { dropdownEvent.mockClear(); }); diff --git a/projects/ion/src/lib/chip/chip.component.ts b/projects/ion/src/lib/chip/chip.component.ts index 12918abd1..2dd46fbde 100644 --- a/projects/ion/src/lib/chip/chip.component.ts +++ b/projects/ion/src/lib/chip/chip.component.ts @@ -21,6 +21,7 @@ export type IconDirection = 'right' | 'left'; interface ChipEvent { selected: boolean; disabled: boolean; + closeDropdown?: boolean; } export interface IonChipProps { label: string; @@ -207,6 +208,13 @@ export class ChipComponent implements OnInit, AfterViewInit, DoCheck { closeDropdown(): void { if (this.showDropdown) { this.showDropdown = false; + this.selected = false; + + this.events.emit({ + selected: this.selected, + disabled: this.disabled, + closeDropdown: true, + }); } } diff --git a/projects/ion/src/lib/core/types/chip.ts b/projects/ion/src/lib/core/types/chip.ts index 06fe5be36..661f1cb1f 100644 --- a/projects/ion/src/lib/core/types/chip.ts +++ b/projects/ion/src/lib/core/types/chip.ts @@ -18,6 +18,7 @@ export type ChipSize = 'sm' | 'md'; export interface ChipEvent { selected: boolean; disabled: boolean; + closeDropdown?: boolean; } export interface IonChipProps {