feat(list-item): Add dragDisabled property (#8285)

**Related Issue:** #8284

## Summary

- Adds dragDisabled property
- Adds interface for SortableItem with the dragDisabled property
- Updates SortableComponent to filter items with the `drag-disabled`
attribute
- Sets the `handle` component to disabled when `dragDisabled` is true.
- Adds screenshot test

packages/calcite-components/src/components/list-item/list-item.tsx

@@ -48,6 +48,7 @@ import {
   setComponentLoaded,
   setUpLoadableComponent,
 } from "../../utils/loadable";
+import { SortableComponentItem } from "../../utils/sortableComponent";
 
 /**
  * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
@@ -65,7 +66,12 @@ import {
   assetsDirs: ["assets"],
 })
 export class ListItem
-  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent
+  implements
+    InteractiveComponent,
+    LoadableComponent,
+    LocalizedComponent,
+    T9nComponent,
+    SortableComponentItem
 {
   // --------------------------------------------------------------------------
   //
@@ -113,6 +119,11 @@ export class ListItem
     this.emitCalciteInternalListItemChange();
   }
 
+  /**
+   * When `true`, the item is not draggable.
+   */
+  @Prop({ reflect: true }) dragDisabled = false;
+
   /**
    * When `true`, the component displays a draggable button.
    *
@@ -388,7 +399,12 @@ export class ListItem
   renderDragHandle(): VNode {
     return this.dragHandle ? (
       <td class={CSS.dragContainer} key="drag-handle-container">
-        <calcite-handle label={this.label} setPosition={this.setPosition} setSize={this.setSize} />
+        <calcite-handle
+          disabled={this.dragDisabled}
+          label={this.label}
+          setPosition={this.setPosition}
+          setSize={this.setSize}
+        />
       </td>
     ) : null;
   }

packages/calcite-components/src/components/list/list.stories.ts

@@ -53,6 +53,13 @@ export const simple = (): string => html`
       description="Vestibulum auctor dapibus neque.
     "
     ></calcite-list-item>
+    <calcite-list-item
+      drag-disabled
+      label="Vestibulum commodo felis quis tortor.
+    "
+      description="Vestibulum auctor dapibus neque.
+    "
+    ></calcite-list-item>
   </calcite-list>
 `;
 
@@ -697,6 +704,9 @@ export const sortableList_TestOnly = (): string => html`<calcite-list
   <calcite-list-item disabled label="test4" value="test4" description="hello world 4">
     <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-ui-success)"></calcite-icon>
   </calcite-list-item>
+  <calcite-list-item drag-disabled label="test5" value="test5" description="hello world 55">
+    <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-ui-success)"></calcite-icon>
+  </calcite-list-item>
 </calcite-list>`;
 
 export const sortableNestedList_TestOnly = (): string => html`<calcite-list

packages/calcite-components/src/demos/list.html

@@ -622,6 +622,9 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
             <calcite-list-item disabled label="test4" value="test4" description="hello world 4">
               <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-ui-success)"></calcite-icon>
             </calcite-list-item>
+            <calcite-list-item drag-disabled label="test5" value="test5" description="hello world 5">
+              <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-ui-success)"></calcite-icon>
+            </calcite-list-item>
           </calcite-list>
         </div>
       </div>
@@ -645,7 +648,7 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
               </calcite-list>
             </calcite-list-item>
             <calcite-list-item label="Hi! 6" description="hello world"></calcite-list-item>
-            <calcite-list-item label="Hi! 7" description="hello world"></calcite-list-item>
+            <calcite-list-item drag-disabled label="Hi! 7" description="hello world"></calcite-list-item>
           </calcite-list>
         </div>
       </div>

packages/calcite-components/src/utils/sortableComponent.ts

@@ -75,6 +75,13 @@ export interface SortableComponent {
   onDragEnd: () => void;
 }
 
+export interface SortableComponentItem {
+  /**
+   * When `true`, the item is not draggable.
+   */
+  dragDisabled: boolean;
+}
+
 /**
  * Helper to keep track of a SortableComponent. This should be called in the `connectedCallback` lifecycle method as well as any other method necessary to rebuild the sortable instance.
  *
@@ -105,6 +112,7 @@ export function connectSortableComponent(component: SortableComponent): void {
       },
     }),
     handle,
+    filter: "[drag-disabled]",
     onStart: () => {
       dragState.active = true;
       onDragStart();