April 15, 2024

Slack customers have extra energy than ever to automate routine duties and processes, saving themselves time every day. Workflow Builder, a process automation device constructed into Slack, has continued to enhance since its launch again in 2019. Together with varied new steps and triggers, we constructed a brand new sidebar part for all obtainable workflow steps. These steps are actually accessible to customers with out having to open a modal.

Earlier than
After

The enhancement of the Slack Platform, coupled with good and important design adjustments, makes Workflow Builder a brand new and highly effective expertise for customers automating duties in Slack.

Highly effective instruments will be intimidating, although. On the Workflow Builder workforce, we recognized animations as an awesome alternative to create pleasant and approachable UI magic.  Easy actions, like transferring or including steps, ought to have a Slack contact — the graceful and enjoyable interplay patterns that Slack is thought for.

The Workflow Builder expertise already had drag-and-drop animations when transferring steps inside a workflow. However, with the newly launched sidebar, a drag-and-drop inconsistency was uncovered. Why can’t customers drag and drop a step from the sidebar into the workflow?

Working with an animation library

Sadly, drag-and-drop animations from our new steps sidebar right into a workflow weren’t easy to help.

Workflow Builder makes use of react-beautiful-dnd — a library that helps drag-and-drop interactions with pure animations. Regardless that this library is highly effective, it’s also opinionated and has limitations.

The react-beautiful-dnd library works by wrapping parts in a React context. It helps drag-and-drop animations by encasing an inventory of draggable parts in a droppable space. That’s enjoyable to say, proper?

 

 

This labored effectively for dragging and dropping steps inside a workflow — we had a singular checklist of steps and these steps may very well be moved inside the droppable context.

However we wanted to rethink that technique to help drag-and-drop animations for the steps sidebar. As an alternative of wrapping a portion of the builder, we wanted to wrap the whole builder web page with the drag-and-drop context, and have two separate lists of draggables and droppables. This might enable for steps to be moved from one checklist to the opposite.

Animation worth is within the particulars

Constructing on the present drag-and-drop help inside Workflow Builder, we had been capable of get drag-and-drop between the steps sidebar and the workflow steps checklist working. Nonetheless, “it really works” has by no means been our high quality bar for manufacturing experiences.  We realized animations must also create a pleasing and inspiring expertise. With that in thoughts, earlier than a public launch of the options, we went to the subsequent section of prototyping — polish.

We discovered the worth of animations as we discovered options to sophisticated points:

  • Utilizing context suppliers and responders
    • Becoming drag-and-drop help simply in our codebase
  • Working with legacy Workflow Builder parts
    • Leveraging legacy parts for the brand new Workflow Builder
  • Creating customized animations
    • Animating the drop of a step right into a workflow
  • Making dynamic placeholders
    • Including a placeholder when dragging a step over a droppable space
  • Fixing trace field spacing issues
    • Making certain the animations labored easily with current trace packing containers
  • Experimenting with a tilt animation
    • Creating enjoyable tilt animations as you drag a step

Utilizing context suppliers and responders

The react-beautiful-dnd library works through the use of responders. These are “top-level utility occasions that you need to use to carry out your personal state updates, model updates, in addition to to make display reader bulletins.” The library required us to keep up the state of drag-and-drop info and to have a centralized place for state-specific actions.

Our customized context supplier wrapper was an awesome resolution for this. We saved details about the step being dragged, the vacation spot info, and the placement of the place the step was being dragged over. Actions — equivalent to what occurs while you drop or add a step — had been additionally maintained right here. This info was up to date dynamically by the supplied react-beautiful-dnd responders and maintained in an remoted Workflow Builder drag-and-drop part wrapper.

<WorkflowDragDropContext.Supplier worth=workflowContexts>
			   <DragDropContext
				   onBeforeCapture=onBeforeCapture
				   onBeforeDragStart=onBeforeDragStart
				   onDragUpdate=onDragUpdate
				   onDragEnd=onDragEnd
			   >
				   kids
			   </DragDropContext>
 </WorkflowDragDropContext.Supplier>

Working with legacy Workflow Builder parts

The brand new Workflow Builder frontend is supported by the legacy Workflow Builder parts. This was an engineering resolution made once we first began constructing out the brand new expertise. By reusing current parts, we had been capable of develop rapidly, and get issues like validation, the step interface, and the set off interface out of the field. Nonetheless, supporting legacy workflows whereas including options to new workflows was a problem.

We solved this by dynamically transferring the drag-and-drop context. By checking the kind of workflow, and if the function was turned on or not, we might enable each the outdated and new drag-and-drop help to coexist. Having a thought-out plan for utilizing our highly effective Workflow Builder parts, and testing totally, was key to the event of recent options.

Creating customized animations

Workflow Builder steps within the sidebar are a unique dimension than the steps within the checklist. This precipitated a really awkward default drag-and-drop animation.

We created helper features that changed the unique react-beautiful-dnd styling. We used the vacation spot width to translate the place of the dragged step to the center of the workflow step checklist.

const translate = `translate($moveTo.x + destinationWidth - stepItemWidthHalfpx, $moveTo.ypx)`

 

The vacation spot width was calculated by the library responders — utilizing onBeforeDragStart specifically. We queried the DOM earlier than dragging occurred and positioned the droppable vacation spot container to search out the width. Our customized drag-and-drop context wrapper labored completely to carry this info and was used to replace the model.

Making dynamic placeholders

After just a few iterations, we observed it was very obscure the place a step may very well be dropped. This posed an enormous problem since react-beautiful-dnd didn’t help including placeholders.  We wanted to be artistic to realize the dragging impact we wished. Drawing some inspiration, we created a customized phase to dynamically render a placeholder based mostly on the place the consumer was dragging a step.

As drag was being up to date, we positioned the vacation spot DOM aspect, the dragged DOM aspect, and the width and top of the placeholder. To seek out the x-coordinate and y-coordinate, we used the vacation spot index and calculated the place within the DOM. This placeholder dimension was handed into the drag-and-drop context supplier within the workflow step checklist.

{ (isDraggingOverLastDroppable &&
	   !isSourceWorkflowList)) && (
			  <div
				  model=
				  high:
				  placeholderElementSizing.clientY +
				  HALF_DIVIDER_HEIGHT,
				  left: placeholderElementSizing.clientX,
				  top: placeholderElementSizing.clientHeight,
				  width: placeholderElementSizing.clientWidth,
				  
				  />
					  )

Fixing trace field spacing issues

Workflow Builder has many transferring elements and a kind of is trace packing containers. When a consumer clicks in between steps, a touch field seems and prompts the consumer so as to add a step. That is useful however it was inflicting points with drag-and-drop. Displaying the placeholder whereas dragging precipitated spacing points as a result of it’s technically not a step. Moreover, it didn’t make sense to see the placeholder whereas the consumer was making an attempt to maneuver the step to a unique place.

The clear resolution was to take away the trace field whereas dragging. This required an in-depth data of the distinction between state updates with onBeforeDragStart vs onBeforeCapture responders. We initially tried to reset the placeholders with the onBeforeDragStart responder.

  const OnBeforeDragStart = useCallback(
       () => 
           // Earlier than dragging begins reset the 
           // trace field to keep away from awkward spacing
           setHideHintBox(true);
       ,
       [dispatch]
   );

We rapidly realized this is able to not work. The state was not up to date in time. React-beautiful-dnd DOM detected the placeholder’s existence despite the fact that it was not there, inflicting noticeable spacing issues.

We changed the onBeforeDragStart responder with onBeforeCapture. The distinction between these responders is that onBeforeCapture helps modifying the DOM earlier than any calculation happens. Hiding and resetting the trace field earlier than the dragging motion allowed us to create a greater consumer expertise and remedy our drawback.

Experimenting with a tilt animation

Animations can at all times be enhanced. Including a tilt was a design resolution that was initially a prototype. Our designer, Kyle Tezak, had a enjoyable thought so as to add a tilt to the step when dragging. Working carefully with an engineer and the Design Expertise workforce, we created a proof-of-concept prototype. This was demoed to the workforce and everybody liked the concept — why not make a repetitive motion thrilling? We knew we needed to share this with our clients.

We created a Pure Drag part that took a method object and modified the rotation based mostly on how briskly the consumer was dragging. We added this animation through the use of the requestAnimationFrame window methodology and created a clean tilt impact that lasted so long as the consumer was dragging the step.

const newStyle =
		   snapshot.isDragging && !snapshot.dropAnimation
			   ? 
					   ...model,
					   rework: modifiedAnimation.rework,
				 
			   : model;

What animation taught our workforce

Animation within the Workflow Builder grew to become our alternative to highlight highly effective, new options. Over numerous iterations, we fine-tuned the drag-and-drop UI to be a pleasing and productive expertise for energy customers and new customers. We discovered a variety of engineering classes alongside the way in which — particularly round discovering artistic methods to work inside an advanced codebase. These challenges paved the way in which for brand new design and engineering animation capabilities within the builder.

 

At Slack, craft is central to each facet of our design and engineering life cycle. It’s the small issues, like making including steps really feel enjoyable and clean, that provide the confidence to discover new options and wish to use them once more. Dedication to craft and investing in small, pleasant interactions all add as much as make work easier, extra nice, and extra productive for our customers.

We’re hiring; come work with us! Apply now