Create Flows

[carrenelloyd]

Catalog # 5

Link to Design (not updated yet) Link to interim design docs

Maintainers: Andrew Smith, @andrea-gm

Dev: NOTE: Tearsheets are a separate issue. There are separate issues for each form of 'Create'.

Tasks

• [ ] Initial review of design/existing code

Working in experimental package

• [ ] Create a shell component which
  • [ ] Create ComponentName/ComponentName.js component file that renders props in raw form (no styling or sub components, plain text OK)
  • [ ] Adds prop-types with comments for DocGen to ComponentName/ComponentName.js
  • [ ] Add Doc file e.g. ComponentName.mdx with a brief description of the component.
• [ ] First engineering review/playback

Continuing in experimental package

• [ ] Storybook - stories to cover design scenarios, story with long, min and max content, etc
• [ ] Doc tab in storybook derived from design docs with embedded stories where appropriate
• [ ] Code to include prop-types with comments for automated DocGen documentation
• [ ] Tests (written in React Test Library) to cover behavior from the documented in the components mdx file.

Review and promote

• [ ] Design review
• [ ] Add design review issues addressed, issues raised or discounted.
• [ ] Engineering review - Submit PR to promote component to production package
• [ ] All engineering issues addressed, issues raised or discounted.

[ghost]

Andrew Smith has been working on significant updates to the create pattern after collaborating with multiple teams. My understanding it that these updates are nearly finalised and he will be providing an update to the sketch file and the documented pattern soon. (I can't seem to assign people/labels or find Andrew to tag on this!)

[lee-chase]

It is likely @vikkidpaterson that Andrew is not a member of the carbon-design-system org. He should @ josh black in the internal slack channel.

[moores2]

After an initial review of the available design documentation I have the following questions:

Major

1. The design pre-req's a Tearsheet component. When will the design for this be complete, and who will be implementing it?
2. Will creation flows that use tearsheets be stackable?
3. In the wide tearsheet design how does the 'Show all available options' toggle work? Specifically: a. Can it cause options that are otherwise unavailable to become visible in the UI? b. Does it change multistep flows into a single step, and cause the next and back buttons to disappear, and leave only cancel and create? The text says 'an optional Toggle to show all the steps on a single scrolling page' but the image shows the toggle on and next and back buttons still present. c. If the user toggles the option off do they lose all the work they've done and have the create flow cancelled? (The image showing this is confusing).
4. Is the full page design ever intended to be used within a product (i.e. one that is already installed or a provisioned instance), or is it solely intended for use within the IBM Cloud UI when provisioning etc?
5. The old design for create flows had a pre-check phase. The example was for when a template needed to be chosen before starting the flow (which conceivably could alter the flow that then followed on). Is this now history? If so, how is that need addressed? Is it just intended to be step 1 of the flow now?
6. Can the number of steps in a flow vary at runtime? For example, if I make a choice in step 1 that makes step 2 no longer needed what is the behaviour? Does step 2 disappear, is its UI locked out, do I leap over it, etc.?

Minor

8. The anatomy of the modal create flow differs from a standard Carbon Modal (e.g. has a subtitle). Is this intentional (as it implies the creation of a custom type of modal for create flows)?
9. Is the side panel design slide-in or slide-over?
10. Does the side panel design have to support multi-step flows (the design implies not)?
11. Is the side panel content scrollable? If so, which part(s) e.g. all, body only, header and body...?
12. Are there any responsive design considerations for the side panel design? E.g. is it still 480px wide at mobile sizes?
13. Does the narrow tearsheet design have to support multi-step flows (the design implies not)?
14. Is the narrow tearsheet content scrollable? If so, which part(s) e.g. all, body only, header and body...?

[chloepoulterdesign]

Hi all, Andrew Smith has asked me to share these videos here:

[ampersandrew-IBM]

Thanks for adding these @chloepoulterdesign!

@moores2, Can this motion get added as we're building out this pattern?

[moores2]

Thanks for adding these @chloepoulterdesign!

@moores2, Can this motion get added as we're building out this pattern?

So, just to be clear - the first animation shows the left nav keeping in sync with the main content as the content is scrolled when 'show all available options' is on, and the second animation is showing the main content fading in and sliding down as the user moves from step to step, right?

[lee-chase]

Blocked by #183

[ampersandrew-IBM]

@lee-chase Can you explain why this is blocked by the Tearsheet?

@moores2 How's the motion elements coming?

[lee-chase]

Hmm, @ampersandrew-IBM @moores2 the first planned implementation was on Tearsheets, which @moores2 was working on prior to being diverted onto other stuff.

Unblocking as the non-TearSheet implementations are not blocked.

[andrea-island]

Created separate issues for Modal and Side panel versions and have added them to the "To do" list. Moving this general issue out of "To do" to avoid confusion.

Also I'm unclear if we need a Full page common implementation, so have not created an issue for it yet

[stale[bot]]

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.