Explore: Add and select

[oliviaflory]

Documentation page
Storybook

We need to have a better understanding of the current Add and select pattern in order to determine if it is a component, pattern or guidance based on the new definitions.

Note: David seems to know a lot about AddSelect, reach out to him for questions!
Look up the designer on the Airtable – Oliver Kauselmann

Definitions

Component

An asset that has been designed and coded

• Export is a component because there is a coded modal provided specifically to export

Pattern

Something that can be accomplished in multiple ways utilizing a combination of component(s) with additional design considerations (a recipe of components)

• Patterns may provide coded examples, but will not be required to provide code or support every possible instance of a pattern
• Dashboards are patterns because you can build a dashboard in many different ways
  • Various sized tiles
  • Various components, actions, information within those tiles

Guidance

Overarching direction or instruction that can be applied across an entity

• As you move further away from the “core” of the spoke, we may see more detailed guidance and opinion on guidance at the “spoke” levels
• Content is guidance because we apply the same principles across all IBM experiences and services
  • Capitalization rules
  • How to display dates

---

Tasks

• Read the current Add and select documentation
• Review the current Add and select code
• Answer: Do add and select have coded assets? (This might make it a component)
• Answer: Are there multiple ways to utilize add and select? (This might make it a pattern)
• Answer: Is there no code or specific components associated? Does this fall into the Guidance definition?
• Gather Telemetry metrics
• Deliverable: Form an opinion on what category Add and select slot into and the future of the asset. Share with Product PAL team

[RichKummer]

Review of Add & select

Add & select is currently under Patterns, but we need to see if this still holds true with the new Component and Pattern changes. Note that Add here does not mean creating a net new database item, it means to add an existing one (different from Create).

Guidance documentation
Storybook

Questions to be answered

Question: Does Add & select have coded assets (making them a component)?

1. YES, Add & Selecthave code living in Storybook.
2. We maintain two coded variations: MultiAddSelect for complex or hierarchical add/select and SingleAddSelect for single or simpler add/select.
3. From David: everything is currently handled inside the code, and accessing functionality like "hierarchy" is dependent on a specific data structure. The custom code for Add & Select is not something an engineer could easily configure in tearsheet on their own.

Question: Are there multiple ways to utilize Add & select (making them a pattern)?

1. The entrypoint for Add & select can vary: Select is usually started with a button, Add is usually started when a user clicks an Add button.
2. The rest of the flow takes place in a tearsheet, but can be wide or narrow. Wide is useful for when the user needs to find multiple items in a hierarchy, or sometimes in single-select flows if selecting an item requires further steps/context. Narrow is useful in a select flow if the user is selecting one item and the list is simpler.
3. Tearsheets can display hierarchies or lists, can enable users to select single or multiple items, can display with modifiers or with avatars. There are a host of options to customize.
4. YES, I think this satisfies the "multiple ways", even if it is using a tearsheet as the only component for the majority of the flow.

Recommendations

• We have code we offer for Add & select (leans towards component).
• At first it's questionable if Pattern's definition of "multiple ways of accomplishing something with additional design considerations" applies because the main usage happens inside a single component:tearsheet.
• However, there are multiple ways (and considerations) to accomplish inside the tearsheet: hierarchies vs. lists, selecting multiple items or single, modifiers to add dropdowns to listed items (such as permissions), information that is presented inside the tearsheet when an item is selected, etc.
• This suggests keeping Add & select in Pattern.

Other considerations

• Telemetry suggests lower usage for MultiAddSelect (5 repos, with 162 inserts) and SingleAddSelect (2 repos, with 5 inserts). Keep in mind the data is unrefined, but there is not much sample data for these. So a consideration is how much we want to evolve or maintain when the usage at least seems low.

Details

• Another team contributed the design, but did not absorb the coded assets that @davidmenendez put together, which means that the data picked up by Telemetry might not fully reflect usage. Teams could absorb the pattern in the future.
• Team has considered decoupling Select sub-components and placing them on the page (outside of tearsheet. From David, it could be that the pattern could fit into different contexts other than being limited to tearsheet.

[RichKummer]

Decisions

1. Add & Select remains a pattern.
2. It does not get deprecated in the short term.
3. Tracked until Dec 2024 to see if usage picks up.