FilterChipInput: make the FilterChip editable
Closed, ResolvedPublic2 Estimated Story Points
Actions

Assigned To

Authored By

	bmartinezcalvo
	Aug 3 2023, 5:01 PM

Description

Background

We created the MVP version of the FilterChipInput in T337095: ChipInput: Add ChipInput component to Codex. We need to implement an editable state to make the FilterChip within the input editable.

User stories

As a user, I need to edit the chips I'm adding in a FilterChipInput.

Known use cases

FilterChipInput - UserPreferences.gif (293×600 px, 595 KB)

There are there 2 FilterChipInputs in User's preferences. The first one is editable while the second one is not editable.

Previous implementations

Codex demo: FilterChipInput component
OOUI: TagMultiselect in OOUI

Design spec

Component spec sheet

Open questions

Add here the questions to be answered in order to design and implement the component

Acceptance criteria (or Done)

Design

Design the Figma spec sheet and add it in this task
Update the component in the Figma library. This step will be done by a DST member.

Code

Make the FilterChip interactive so users can click on it T343479: FilterChip: implement interactive states
Make the FilterChipInput editable

Future tasks

Details

Subject	Repo	Branch	Lines +/-
Update Codex from v0.17.0 to v0.18.0	mediawiki/core	master	+2 K -2 K
FilterChipInput: Make chips editable; add chip on blur	design/codex	main	+99 -22
FilterChip: Add click-chip event and change keyboard behavior	design/codex	main	+62 -5

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved		AnneT	T343474 FilterChipInput: make the FilterChip editable
		Resolved		AnneT	T343479 FilterChip: implement interactive states

Event Timeline

bmartinezcalvo created this task.Aug 3 2023, 5:01 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 3 2023, 5:01 PM

bmartinezcalvo mentioned this in T337095: ChipInput: Add ChipInput component to Codex.Aug 3 2023, 5:05 PM

bmartinezcalvo mentioned this in T343479: FilterChip: implement interactive states.Aug 3 2023, 5:14 PM

bmartinezcalvo added subscribers: CCiufo-WMF, RHo, egardner and 3 others.

bmartinezcalvo updated the task description. (Show Details)Aug 3 2023, 5:20 PM

bmartinezcalvo updated the task description. (Show Details)Aug 3 2023, 5:23 PM

Change 936081 had a related patch set uploaded (by Bmartinezcalvo; author: Anne Tomasevich):

[design/codex@main] FilterChipInput: Make FilterChips editable

https://gerrit.wikimedia.org/r/936081

gerritbot added a project: Patch-For-Review.Aug 3 2023, 5:24 PM

CCiufo-WMF moved this task from Inbox to Design Upcoming on the Design-System-Team board.Aug 3 2023, 8:06 PM

CCiufo-WMF set the point value for this task to 2.Aug 8 2023, 5:11 PM

CCiufo-WMF triaged this task as Medium priority.Aug 8 2023, 5:23 PM

@bmartinezcalvo does this need design or is it ready for development? It seems like we have agreed upon the following UX:

In a FilterChipInput, when a user clicks on a FilterChip, it disappears and its text appears in the text input
If there was text in the text input, that text becomes a new FilterChip
Interactive styles for the FilterChip in this case will be applied as specified in T343479

Is that right, or is there more to it than that? I'm asking because T343479 is in the sprint, but should not be implemented until this task is (because FilterChips on their own should not show interactive styles; only if they are in a FilterChipInput and therefore do something when clicked)

I think we bumped this back into Design in order to capture the behavior from the patch in Figma. If there are no concerns about the approach in the patch, I agree we can continue working on it and any other concerns can be addressed in design sign-off.

bmartinezcalvo claimed this task.Aug 16 2023, 9:37 AM

bmartinezcalvo moved this task from Design Upcoming to In Design on the Design-System-Team board.

I've updated the Figma spec adding the editable states for the FilterChipInput, where the FilterChip will become to text when clicking on it.

These are the states defined for both types of FilterChipInput:

Also explained in the spec sheet the 2 ways to create the chips within a FilterChipInput:

@AnneT if you agree with these behaviors we can move the task to Ready for development.

bmartinezcalvo updated the task description. (Show Details)Aug 16 2023, 11:31 AM

In T343474#9095930, @bmartinezcalvo wrote:

I've updated the Figma spec adding the editable states for the FilterChipInput, where the FilterChip will become to text when clicking on it.

These are the states defined for both types of FilterChipInput:

These look good to me. Note though that for the MVP, the "Filter chips outside the input" use case is not implemented.

CCiufo-WMF removed bmartinezcalvo as the assignee of this task.Aug 16 2023, 2:40 PM

CCiufo-WMF moved this task from In Design to Up Next on the Design-System-Team board.

CCiufo-WMF moved this task from Up Next to Design-Systems-Sprint-6 on the Design-System-Team board.Aug 16 2023, 7:20 PM

CCiufo-WMF edited projects, added Design-System-Team (Design-Systems-Sprint-6); removed Design-System-Team.

AnneT claimed this task.Aug 16 2023, 8:43 PM

AnneT moved this task from Committed to In Progress on the Design-System-Team (Design-Systems-Sprint-6) board.

AnneT moved this task from In Progress to Code Review on the Design-System-Team (Design-Systems-Sprint-6) board.Aug 17 2023, 9:35 PM

Change 951554 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] FilterChip: Add click-chip event and change keyboard behavior

https://gerrit.wikimedia.org/r/951554

Change 951554 merged by jenkins-bot:

[design/codex@main] FilterChip: Add click-chip event and change keyboard behavior

https://gerrit.wikimedia.org/r/951554

Change 936081 merged by jenkins-bot:

[design/codex@main] FilterChipInput: Make chips editable; add chip on blur

https://gerrit.wikimedia.org/r/936081

AnneT moved this task from Code Review to Design Sign-Off on the Design-System-Team (Design-Systems-Sprint-6) board.Aug 23 2023, 6:37 PM

Maintenance_bot removed a project: Patch-For-Review.Aug 23 2023, 7:10 PM

@AnneT during the last Eng/Design sync we discussed the option of adding arrow navigation for keyboard users. Will this be implemented in this task?

bmartinezcalvo mentioned this in T344899: ChipInput: Explore improvements to the editing experience.Aug 24 2023, 10:12 AM

bmartinezcalvo updated the task description. (Show Details)Aug 24 2023, 10:14 AM

In T343474#9116174, @bmartinezcalvo wrote:

@AnneT during the last Eng/Design sync we discussed the option of adding arrow navigation for keyboard users. Will this be implemented in this task?

I believe that is captured here T344848: ChipInput: improve keyboard navigation.

In T343474#9116881, @CCiufo-WMF wrote:

In T343474#9116174, @bmartinezcalvo wrote:

@AnneT during the last Eng/Design sync we discussed the option of adding arrow navigation for keyboard users. Will this be implemented in this task?

I believe that is captured here T344848: ChipInput: improve keyboard navigation.

Oh great, so moving this task to Pending Rerelease then. Thank you!

bmartinezcalvo updated the task description. (Show Details)Aug 24 2023, 3:10 PM

Change 953351 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v0.17.0 to v0.18.0

https://gerrit.wikimedia.org/r/953351

gerritbot added a project: Patch-For-Review.Aug 29 2023, 9:21 PM

Change 953351 merged by jenkins-bot: