May 18, 2024

Slack customers have extra energy than ever to automate routine duties and processes, saving themselves time every day. Workflow Builder, a activity automation software 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 out there 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 sensible and important design modifications, 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 group, 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 understood 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, additionally it is opinionated and has limitations.

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

 

 

This labored properly for dragging and dropping steps inside a workflow — we had a singular checklist of steps and these steps might be moved throughout 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 all the 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 have been capable of get drag-and-drop between the steps sidebar and the workflow steps checklist working. Nevertheless, “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 following part of prototyping — polish.

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

  • Utilizing context suppliers and responders
    • Becoming drag-and-drop help simply in our codebase
  • Working with legacy Workflow Builder elements
    • Leveraging legacy elements 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
    • Guaranteeing the animations labored easily with current trace 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 by utilizing responders. These are “top-level software occasions that you need to use to carry out your individual state updates, type updates, in addition to to make display reader bulletins.” The library required us to keep up the state of drag-and-drop data and to have a centralized place for state-specific actions.

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

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

Working with legacy Workflow Builder elements

The brand new Workflow Builder frontend is supported by the legacy Workflow Builder elements. This was an engineering resolution made once we first began constructing out the brand new expertise. By reusing current elements, we have been capable of develop rapidly, and get issues like validation, the step interface, and the set off interface out of the field. Nevertheless, 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 may enable each the outdated and new drag-and-drop help to coexist. Having a thought-out plan for utilizing our highly effective Workflow Builder elements, and testing totally, was key to the event of latest options.

Creating customized animations

Workflow Builder steps within the sidebar are a special dimension than the steps within the checklist. This prompted 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 seek out the width. Our customized drag-and-drop context wrapper labored completely to carry this data and was used to replace the type.

Making dynamic placeholders

After just a few iterations, we seen it was very obscure the place a step might 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 needed. Drawing some inspiration, we created a customized phase to dynamically render a placeholder primarily based on the place the person was dragging a step.

As drag was being up to date, we positioned the vacation spot DOM component, the dragged DOM component, and the width and top of the placeholder. To search 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.

{      (isDraggingOver 

Fixing trace field spacing issues

Workflow Builder has many transferring components and a kind of is trace containers. When a person clicks in between steps, a touch field seems and prompts the person so as to add a step. That is useful nevertheless it was inflicting points with drag-and-drop. Displaying the placeholder whereas dragging prompted spacing points as a result of it’s technically not a step. Moreover, it didn’t make sense to see the placeholder whereas the person was attempting to maneuver the step to a special place.

The clear answer 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 could not work. The state was not up to date in time. React-beautiful-dnd DOM detected the placeholder’s existence regardless 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 person expertise and resolve our drawback.

Experimenting with a tilt animation

Animations can all the time 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 intently with an engineer and the Design Know-how group, we created a proof-of-concept prototype. This was demoed to the group and everybody cherished the thought — why not make a repetitive motion thrilling? We knew we needed to share this with our prospects.

We created a Pure Drag element that took a method object and modified the rotation primarily based on how briskly the person was dragging. We added this animation by utilizing the requestAnimationFrame window technique and created a easy tilt impact that lasted so long as the person was dragging the step.

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

What animation taught our group

Animation within the Workflow Builder turned 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 realized a number of engineering classes alongside the best way — particularly round discovering artistic methods to work inside an advanced codebase. These challenges paved the best way 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 easy, 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