Explore: Import and upload

[aubrey-oneal]

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

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 Import and upload
• Review the current Import and upload code
• Answer: Do Import and upload have coded assets? (This might make it a component)
• Answer: Are there multiple ways to utilize Import and upload? (This might make it a pattern)
• Answer: Could Import and upload be categorized into "common actions" or 'CRUD' (create, read, update, delete)
• Deliverable: Form an opinion on what category Import and upload slot into and the future of the asset. Share with Product PAL team

[oliviaflory]

Review of import and upload

Questions to answer:

• Answer: Do Import and upload have coded assets? (This might make it a component)
  • Yes
    • A single modal with a drag and drop component and a text input + button for URL upload
      • Note: The button text alignment has a bug 🐛
    • Note: there are examples within the Usage docs suggesting utilizing a side panel or Full page view for import and upload actions if there are additional steps needed. However there is no code provided.
      • Is there an issue to create these versions?

Coded asset

Examples in docs with no code

• Answer: Are there multiple ways to utilize Import and upload? (This might make it a pattern)
  • Yes
    • Upload a file
      • Via drag & drop component
      • Via text input
    • Component / Flow:
      • Modal
      • Side panel
      • Full page
• Answer: Could Import and upload be categorized into "common actions" or 'CRUD' (create, read, update, delete)
  • They probably don't fit into the CRUD definition, but maybe a "common actions" like Carbon core categorizes them. However, these docs are slightly more detailed than Core
  • I wonder if Import and upload could be grouped with Export (and download?) as they are actions that interact with the system

Next steps

• Gather Telemetry for import modal
  • Are teams utilizing this code?
  • Is it helpful to our users because the modal seems to be connected to the system browser (clicking on the link within file uploader launches the system finder)

• Classification
  • Likely a pattern
    • Especially if we do think that import/upload could be placed within side panel or full page and not only a modal. AKA multiple ways to achieve the same thing
    • Additionally: file upload or URL upload path
• Additional questions:
  • Is the URL text input always required?
  • Can the import/upload modal be attached to anything? ie a data table to upload a new asset

Path 1

• Leave the assets as "patterns" in storybook
• Don't add enhancements to the modals / limit code

Path 2

• Re-classify as:
  • Import and uploading pattern
    • Components that support the pattern:
      • Import modal (odd that it doesn't include upload?)
        OR
        Recipe model
      • Modal
      • File uploader (core)
      • Text input (core)

Note: Diana T suggested this path for the Export assets as well

[oliviaflory]

Review July 3

• Import and upload is a pattern!
• Flag modal for deprecation
• If this does not exist in Figma, we won't add it to v11 all themes