Add TreeView component to Codex (MVP)
Open, LowPublic
Actions

Assigned To

None

Authored By

	bmartinezcalvo
	Dec 16 2022, 11:17 AM

Description

NOTE: This task should be reformatted to the new component mvp template (T329320)

Background

Description: Hierarchical structure that provides nested levels of navigation.
History: Conversations about Accordion Vs. TreeView in this task T280785
Considerations: list any known challenges or blockers, or any other important information
Known use case(s): the following use cases have been detected:
- Vector 2022 toc sections

User stories

As a designer/developer I need to use the TreeView component to create different levels of navigation.
As a designer/developer I need to understand the difference between Accordion and TreeView components.

Previous implementations

These artifacts are listed for historical context. The figma spec, linked below, is the source of truth for the new component.

Design style guide: There are no previous guidelines for this component
OOUI: There is no previous implementation in OOUI for this component

Design proposals

Proposals for the active tree item


Black title	Bold title	Line	Gray background	Blue background

Previous conversations about the ToC indentation and enumeration in T307316

Codex implementation

Component task owners

Designer: add the main designer's name
Developer: add the main developer's name

Design spec

Once a component spec sheet has been created in Figma, remove the note stating that the spec is missing and link to the spec below.

A component spec sheet has not been created yet.

Component spec sheet

Stage 1: Minimum viable product (MVP)

MVP includes basic layout, default states, and most important functionality.

Acceptance criteria

Determine what MVP includes for this component and document this in a subtask. Assign task to designer.
Design MVP. Once complete, assign task to developer.
Implement MVP

Stage 2: Additional states, features, and variants

This might include a disabled state, framed/frameless designs, transitions, supporting different use cases, etc., which will be captured in separate subtasks.

Acceptance criteria

Document design and implementation of additional states and features in individual subtasks
Complete each additional state/feature subtask

Stage 3: Refinement

This stage includes any final touches or bug fixes needed before the component can be deemed complete, which will be captured in separate subtasks.

Acceptance criteria

Finalize docs: open and complete a subtask for any additional demos that need to be added or documentation that needs work
Meet accessibility standards: open and complete a subtask for any necessary accessibility improvements
Meet internationalization standards: open and complete a subtask to fix any i18n bugs
Complete testing: open and complete a subtask for any additional unit or functional tests that are needed

Related Objects

Mentioned In: T356328: Codex's Accordion layout uses a down-chevron for closed state and an up-chevron for open state, but other UXes use right- and down-chevron
T314569: [EPIC] Add Accordion component to Codex
T280785: Define and add the expand and collapse (accordion) component to the DSG
Mentioned Here: T329320: Update new component task template and update links in our DS documentation
T314569: [EPIC] Add Accordion component to Codex
T323013: Default component: nested logic and visual style
T307316: [ToC] Enumeration of sections in the new ToC (numbers for ToC items)
T313357: Define core components
T280785: Define and add the expand and collapse (accordion) component to the DSG

Event Timeline

bmartinezcalvo created this task.Dec 16 2022, 11:17 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 16 2022, 11:17 AM

bmartinezcalvo mentioned this in T280785: Define and add the expand and collapse (accordion) component to the DSG.Dec 16 2022, 11:25 AM

Should this component be part of our core components list T313357? cc: @AnneT @egardner @Catrope @Volker_E

We need a TreeView for both Web ToC and Abstract Wikipedia projects as defined in the task description.

bmartinezcalvo updated the task description. (Show Details)Dec 16 2022, 11:37 AM

In T325351#8473559, @bmartinezcalvo wrote:

Should this component be part of our core components list T313357? cc: @AnneT @egardner @Catrope @Volker_E

We need a TreeView for both Web ToC and Abstract Wikipedia projects as defined in the task description.

@bmartinezcalvo That makes sense. I just noticed that the tree view element was listed in the spreadsheet that we originally used to classify components, but for some reason never made it to the list in that task. I think we should document it in that ticket. To me, this looks like a core/planned component too, but let's see what the rest of the DST think.

some relevant discussion here regarding the indentation, spacing, use of list-item indicators, etc.: T307316: [ToC] Enumeration of sections in the new ToC (numbers for ToC items)

bmartinezcalvo updated the task description. (Show Details)Dec 19 2022, 9:26 AM

bmartinezcalvo updated the task description. (Show Details)

bmartinezcalvo updated the task description. (Show Details)Dec 19 2022, 9:28 AM

bmartinezcalvo updated the task description. (Show Details)Dec 19 2022, 4:21 PM

egardner triaged this task as Low priority.Dec 20 2022, 9:29 PM

egardner moved this task from Inbox to Needs Refinement on the Design-System-Team board.

Volker_E updated the task description. (Show Details)Dec 21 2022, 6:27 PM

ldelench_wmf moved this task from Needs Refinement to Design-System-Product-Roadmap on the Design-System-Team board.Dec 21 2022, 6:28 PM

ldelench_wmf edited projects, added Design-System-Team (Design-System-Product-Roadmap); removed Design-System-Team.

ldelench_wmf moved this task from Now to Proposed Components on the Design-System-Team (Design-System-Product-Roadmap) board.

I found a (potential?) existing use case for a tree view component, there's a tree-like UI under the Visual Editor to display Wikidata entities, pages transcluded, and categories.

CleanShot 2022-12-21 at 19.30.57.gif (352×800 px, 3 MB)

I see this component as applying a particular design style to a native HTML <details> element, which would explicitly support the nesting of additional expandable elements. This would be related to but distinct from the idea of an "accordion" or expander component.

Codex already has a couple of "Group" components – ButtonGroup, ToggleButtonGroup, etc. Maybe what we really need is:

Expander (aka details / accordion)
ExpanderGroup (aka tree-view)

(Actual names TBD). Potential usage:

<cdx-expander-group>
    <cdx-expander title="First item title">
        <cdx-expander title="Nested item">
        <!-- contents -->
        </cdx-expander>
    <cdx-expander title="Second Item Title">
        <!-- contents -->
    </cdx-expander>
</cdx-expander-group>

Both of these components could easily have CSS-only implementations if we rely on <details> under the hood.

bmartinezcalvo mentioned this in T314569: [EPIC] Add Accordion component to Codex.Dec 22 2022, 5:48 PM

In T325351#8485260, @AAlhazwani-WMF wrote:

I found a (potential?) existing use case for a tree view component, there's a tree-like UI under the Visual Editor to display Wikidata entities, pages transcluded, and categories.

@AAlhazwani-WMF this use case would be an Accordion component instead T314569 (so I will add it in the task description).

bmartinezcalvo updated the task description. (Show Details)Dec 22 2022, 6:05 PM

ldelench_wmf renamed this task from [EPIC] Add TreeView component to Codex to Add TreeView component to Codex (MVP).Feb 17 2023, 11:06 PM

ldelench_wmf edited projects, added Design-System-Team; removed Design-System-Team (Design-System-Product-Roadmap), Epic.

ldelench_wmf moved this task from Inbox to Proposed New Components on the Codex board.

ldelench_wmf updated the task description. (Show Details)Feb 17 2023, 11:35 PM

ldelench_wmf moved this task from Inbox to Backlog on the Design-System-Team board.Mar 3 2023, 9:30 PM

CCiufo-WMF mentioned this in T356328: Codex's Accordion layout uses a down-chevron for closed state and an up-chevron for open state, but other UXes use right- and down-chevron.Feb 2 2024, 4:31 PM

	F35886225: CleanShot 2022-12-21 at 19.30.57.gif
	Dec 21 2022, 6:33 PM

	F35870076: Captura de Pantalla 2022-12-16 a las 12.34.15.png
	Dec 16 2022, 11:37 AM

	F35870072: Captura de Pantalla 2022-12-16 a las 12.34.04.png
	Dec 16 2022, 11:37 AM

	F35870075: Captura de Pantalla 2022-12-16 a las 12.34.09.png
	Dec 16 2022, 11:37 AM

	F35870074: Captura de Pantalla 2022-12-16 a las 12.34.00.png
	Dec 16 2022, 11:37 AM

	F35870073: Captura de Pantalla 2022-12-16 a las 12.33.55.png
	Dec 16 2022, 11:37 AM

	F35870050: Captura de Pantalla 2022-12-16 a las 12.04.46.png
	Dec 16 2022, 11:17 AM

	F35870054: Captura de Pantalla 2022-12-16 a las 12.10.41.png
	Dec 16 2022, 11:17 AM

Add TreeView component to Codex (MVP)Open, LowPublicActions

Description

Background

User stories

Previous implementations

Design proposals

Codex implementation

Component task owners

Design spec

Stage 1: Minimum viable product (MVP)

Acceptance criteria

Stage 2: Additional states, features, and variants

Acceptance criteria

Stage 3: Refinement

Acceptance criteria

Related Objects

Event Timeline

Add TreeView component to Codex (MVP)
Open, LowPublic
Actions