fix: add drag styles for improved UX (#7644)

Esri · Sep 1, 2023 · afbb764 · afbb764
1 parent b8bc11c
commit afbb764
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 0 deletions.
diff --git a/packages/calcite-components/src/assets/styles/_sortable.scss b/packages/calcite-components/src/assets/styles/_sortable.scss
@@ -0,0 +1,8 @@
+@mixin sortable-helper-classes() {
+  .calcite-sortable--chosen,
+  .calcite-sortable--ghost,
+  .calcite-sortable--drag {
+    @apply border border-dashed;
+    border-color: var(--calcite-ui-brand);
+  }
+}
diff --git a/packages/calcite-components/src/assets/styles/global.scss b/packages/calcite-components/src/assets/styles/global.scss
@@ -79,3 +79,5 @@
 @include animation-reduced-motion();
 
 @include animation-helper-classes();
+
+@include sortable-helper-classes();
diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss
@@ -7,6 +7,7 @@
 @import "host";
 @import "spacing";
 @import "floating-ui";
+@import "sortable";
 
 @mixin slotted($selector, $tag, $scope: "") {
   #{$scope} slot[name="#{$selector}"]::slotted(#{$tag}),

diff --git a/packages/calcite-components/src/utils/sortableComponent.ts b/packages/calcite-components/src/utils/sortableComponent.ts
@@ -7,6 +7,12 @@ export interface DragDetail {
   dragEl: HTMLElement;
 }
 
+export const CSS = {
+  ghostClass: "calcite-sortable--ghost",
+  chosenClass: "calcite-sortable--chosen",
+  dragClass: "calcite-sortable--drag",
+};
+
 /**
  * Defines interface for components with sorting functionality.
  */
@@ -81,6 +87,7 @@ export function connectSortableComponent(component: SortableComponent): void {
 
   component.sortable = Sortable.create(component.el, {
     dataIdAttr,
+    ...CSS,
     ...(!!draggable && { draggable }),
     ...(!!group && {
       group: {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -79,3 +79,5 @@
		@include animation-reduced-motion();

		@include animation-helper-classes();

		@include sortable-helper-classes();