fix(sortable): allows sortable items to set handle prop to true when …

…parent type is 'handle'
Kajabi · May 8, 2024 · 436d35f · 436d35f
1 parent e78fa66
commit 436d35f
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 45 deletions.
diff --git a/libs/core/src/components/pds-sortable/docs/pds-sortable.mdx b/libs/core/src/components/pds-sortable/docs/pds-sortable.mdx
@@ -90,46 +90,44 @@ When `dividers` is set to `true`, a border will display between items.
 When `handle` is set to `true` on a `pds-sortable-item` a handle icon will be displayed within an item.
 
 <DocCanvas client:only mdxSource={{
-  react: `<PdsSortable componentId="handle">
-  <PdsSortableItem handle={true}>Item 1</PdsSortableItem>
-  <PdsSortableItem handle={true}>Item 2</PdsSortableItem>
-  <PdsSortableItem handle={true}>Item 3</PdsSortableItem>
+  react: `<PdsSortable componentId="handle" handleType="handle">
+  <PdsSortableItem>Item 1</PdsSortableItem>
+  <PdsSortableItem>Item 2</PdsSortableItem>
+  <PdsSortableItem>Item 3</PdsSortableItem>
 </PdsSortable>
   `,
-  webComponent: `<pds-sortable component-id="handle">
-  <pds-sortable-item handle>Item 1</pds-sortable-item>
-  <pds-sortable-item handle>Item 2</pds-sortable-item>
-  <pds-sortable-item handle>Item 3</pds-sortable-item>
+  webComponent: `<pds-sortable component-id="handle" handle-type="handle">
+  <pds-sortable-item>Item 1</pds-sortable-item>
+  <pds-sortable-item>Item 2</pds-sortable-item>
+  <pds-sortable-item>Item 3</pds-sortable-item>
 </pds-sortable>
 `}}>
-  <pds-sortable component-id="handle">
-    <pds-sortable-item handle>Item 1</pds-sortable-item>
-    <pds-sortable-item handle>Item 2</pds-sortable-item>
-    <pds-sortable-item handle>Item 3</pds-sortable-item>
+  <pds-sortable component-id="handle" handle-type="handle">
+    <pds-sortable-item>Item 1</pds-sortable-item>
+    <pds-sortable-item>Item 2</pds-sortable-item>
+    <pds-sortable-item>Item 3</pds-sortable-item>
   </pds-sortable>
 </DocCanvas>
 
 #### Handle vs. Row `handle-type`
 By default the full `row` is active for dragging/sorting. However, `handle-type` can be set to `handle` in order to allow only the handle to be used.
 
-This should be used in combination with `handle` set to `true` on the `pds-sortable-item`.
-
 <DocCanvas client:only mdxSource={{
   react: `<PdsSortable componentId="handle-only" handleType="handle">
-  <PdsSortableItem handle={true}>Item 1</PdsSortableItem>
-  <PdsSortableItem handle={true}>Item 2</PdsSortableItem>
-  <PdsSortableItem handle={true}>Item 3</PdsSortableItem>
+  <PdsSortableItem>Item 1</PdsSortableItem>
+  <PdsSortableItem>Item 2</PdsSortableItem>
+  <PdsSortableItem>Item 3</PdsSortableItem>
 </PdsSortable>`,
   webComponent: `<pds-sortable component-id="handle-only" handle-type="handle">
-  <pds-sortable-item handle>Item 1</pds-sortable-item>
-  <pds-sortable-item handle>Item 2</pds-sortable-item>
-  <pds-sortable-item handle>Item 3</pds-sortable-item>
+  <pds-sortable-item>Item 1</pds-sortable-item>
+  <pds-sortable-item>Item 2</pds-sortable-item>
+  <pds-sortable-item>Item 3</pds-sortable-item>
 </pds-sortable>
 `}}>
   <pds-sortable component-id="handle-only" handle-type="handle">
-    <pds-sortable-item handle>Item 1</pds-sortable-item>
-    <pds-sortable-item handle>Item 2</pds-sortable-item>
-    <pds-sortable-item handle>Item 3</pds-sortable-item>
+    <pds-sortable-item>Item 1</pds-sortable-item>
+    <pds-sortable-item>Item 2</pds-sortable-item>
+    <pds-sortable-item>Item 3</pds-sortable-item>
   </pds-sortable>
 </DocCanvas>
 
@@ -209,8 +207,8 @@ The `sortable-item-actions` slot is provided to place content within the `pds-so
 The following is a demo of how all the properties and slots can be used together to create a sortable list.
 
 <DocCanvas client:only mdxSource={{
-  react: `<PdsSortable border={true} dividers={true} componentId="demo">
-  <PdsSortableItem enable-actions handle>
+  react: `<PdsSortable border={true} dividers={true} componentId="demo" handleType="handle">
+  <PdsSortableItem enable-actions>
     <div>
       <div><strong>Item 1</strong></div>
       <div>Item 1 description copy text</div>
@@ -219,7 +217,7 @@ The following is a demo of how all the properties and slots can be used together
       <PdsLink href="#" variant="plain">action</PdsLink>
     </div>
   </PdsSortableItem>
-  <PdsSortableItem enable-actions handle>
+  <PdsSortableItem enable-actions>
     <div>
       <div><strong>Item 2</strong></div>
       <div>Item 2 description copy text</div>
@@ -228,7 +226,7 @@ The following is a demo of how all the properties and slots can be used together
       <PdsLink href="#" variant="plain">action</PdsLink>
     </div>
   </PdsSortableItem>
-  <PdsSortableItem enable-actions handle>
+  <PdsSortableItem enable-actions>
     <div>
       <div><strong>Item 3</strong></div>
       <div>Item 3 description copy text</div>
@@ -239,8 +237,8 @@ The following is a demo of how all the properties and slots can be used together
   </PdsSortableItem>
 </PdsSortable>
   `,
-  webComponent: `<pds-sortable border dividers component-id="demo">
-  <pds-sortable-item enable-actions handle>
+  webComponent: `<pds-sortable border dividers component-id="demo" handle-type="handle">
+  <pds-sortable-item enable-actions>
     <div>
       <div><strong>Item 1</strong></div>
       <div>Item 1 description copy text</div>
@@ -249,7 +247,7 @@ The following is a demo of how all the properties and slots can be used together
       <pds-link href="#" variant="plain">action</pds-link>
     </div>
   </pds-sortable-item>
-  <pds-sortable-item enable-actions handle>
+  <pds-sortable-item enable-actions>
     <div>
       <div><strong>Item 2</strong></div>
       <div>Item 2 description copy text</div>
@@ -258,7 +256,7 @@ The following is a demo of how all the properties and slots can be used together
       <pds-link href="#" variant="plain">action</pds-link>
     </div>
   </pds-sortable-item>
-  <pds-sortable-item enable-actions handle>
+  <pds-sortable-item enable-actions>
     <div>
       <div><strong>Item 3</strong></div>
       <div>Item 3 description copy text</div>
@@ -269,8 +267,8 @@ The following is a demo of how all the properties and slots can be used together
   </pds-sortable-item>
 </pds-sortable>
 `}}>
-  <pds-sortable border dividers component-id="demo">
-    <pds-sortable-item enable-actions handle>
+  <pds-sortable border dividers component-id="demo" handle-type="handle">
+    <pds-sortable-item enable-actions>
       <div>
         <div><strong>Item 1</strong></div>
         <div>Item 1 description text</div>
@@ -279,7 +277,7 @@ The following is a demo of how all the properties and slots can be used together
         <pds-link href="#" variant="plain">action</pds-link>
       </div>
     </pds-sortable-item>
-    <pds-sortable-item enable-actions handle>
+    <pds-sortable-item enable-actions>
       <div>
         <div><strong>Item 2</strong></div>
         <div>Item 2 description text</div>
@@ -288,7 +286,7 @@ The following is a demo of how all the properties and slots can be used together
         <pds-link href="#" variant="plain">action</pds-link>
       </div>
     </pds-sortable-item>
-    <pds-sortable-item enable-actions handle>
+    <pds-sortable-item enable-actions>
       <div>
         <div><strong>Item 3</strong></div>
         <div>Item 3 description text</div>

diff --git a/libs/core/src/components/pds-sortable/pds-sortable-item/pds-sortable-item.tsx b/libs/core/src/components/pds-sortable/pds-sortable-item/pds-sortable-item.tsx
@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop } from '@stencil/core';
+import { Component, Element, Host, h, Prop } from '@stencil/core';
 
 import { handle } from '@pine-ds/icons/icons';
 /**
@@ -10,6 +10,8 @@ import { handle } from '@pine-ds/icons/icons';
   scoped: true,
 })
 export class PdsSortableItem {
+  @Element() el: HTMLPdsSortableItemElement;
+  sortableRef: HTMLPdsSortableElement;
   /**
    * Determines whether `sortable-item-actions` slot should be enabled.
    * @defaultValue false
@@ -25,7 +27,17 @@ export class PdsSortableItem {
    * Determines whether `sortable-item` should have a handle.
    * @defaultValue false
    */
-  @Prop() handle = false;
+  @Prop({ mutable: true }) handle = false;
+
+  componentWillRender() {
+    // When the parent sortable has a type of 'handle', the sortable items
+    // will automatically set handle to 'true'.
+    this.sortableRef = this.el.closest('pds-sortable') as HTMLPdsSortableElement;
+
+    if (this.sortableRef && this.sortableRef.handleType === 'handle') {
+      this.handle = true;
+    }
+  }
 
   render() {
     return (

diff --git a/libs/core/src/components/pds-sortable/pds-sortable.tsx b/libs/core/src/components/pds-sortable/pds-sortable.tsx
@@ -1,4 +1,5 @@
 import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';
+import { SortableType } from './sortable-interface';
 import Sortable from 'sortablejs';
 
 @Component({
@@ -46,7 +47,7 @@ export class PdsSortable {
       classNames.push('pds-sortable--divided');
     }
 
-    if (this.handleType) {
+    if (this.handleType !== undefined) {
       classNames.push(`pds-sortable--handle-type-${this.handleType}`);
     }
 
@@ -55,7 +56,7 @@ export class PdsSortable {
 
   componentDidLoad() {
 
-    let sortableOptions: any = {
+    let sortableOptions: SortableType = {
       animation: 150,
       ghostClass: 'pds-sortable-item--ghost',
       dragClass: 'pds-sortable-item--drag',

diff --git a/libs/core/src/components/pds-sortable/sortable-interface.ts b/libs/core/src/components/pds-sortable/sortable-interface.ts
@@ -0,0 +1,7 @@
+export interface SortableType {
+  animation: number;
+  ghostClass: string;
+  dragClass: string;
+  onEnd: (evt: Event) => void;
+  handle?: string;
+}
diff --git a/libs/core/src/components/pds-sortable/stories/pds-sortable.stories.js b/libs/core/src/components/pds-sortable/stories/pds-sortable.stories.js
@@ -23,9 +23,9 @@ const BaseTemplate = (args) => html`
 
 const HandleTemplate = (args) => html`
 <pds-sortable border="${args.border}" component-id="${args.componentId}" dividers="${args.dividers}" handle-type="${args.handleType}">
-  <pds-sortable-item handle>Item 1</pds-sortable-item>
-  <pds-sortable-item handle>Item 2</pds-sortable-item>
-  <pds-sortable-item handle>Item 3</pds-sortable-item>
+  <pds-sortable-item>Item 1</pds-sortable-item>
+  <pds-sortable-item>Item 2</pds-sortable-item>
+  <pds-sortable-item>Item 3</pds-sortable-item>
 </pds-sortable>`;
 
 const ActionsTemplate = (args) => html`
@@ -52,7 +52,7 @@ const ActionsTemplate = (args) => html`
 
 const FullDemoTemplate = (args) => html`
 <pds-sortable border="${args.border}" component-id="${args.componentId}" dividers="${args.dividers}" handle-type="${args.handleType}">
-  <pds-sortable-item enable-actions handle>
+  <pds-sortable-item enable-actions>
     <div>
       <div><strong>Item 1</strong></div>
       <div>Item 1 description copy text</div>
@@ -61,7 +61,7 @@ const FullDemoTemplate = (args) => html`
       <pds-link href="#" variant="plain">action</pds-link>
     </div>
   </pds-sortable-item>
-  <pds-sortable-item enable-actions handle>
+  <pds-sortable-item enable-actions>
     <div>
       <div><strong>Item 2</strong></div>
       <div>Item 2 description copy text</div>
@@ -70,7 +70,7 @@ const FullDemoTemplate = (args) => html`
       <pds-link href="#" variant="plain">action</pds-link>
     </div>
   </pds-sortable-item>
-  <pds-sortable-item enable-actions handle>
+  <pds-sortable-item enable-actions>
     <div>
       <div><strong>Item 3</strong></div>
       <div>Item 3 description copy text</div>

diff --git a/libs/core/src/components/pds-sortable/test/pds-sortable.e2e.ts b/libs/core/src/components/pds-sortable/test/pds-sortable.e2e.ts
@@ -9,6 +9,20 @@ describe('pds-sortable', () => {
     expect(element).toHaveClass('hydrated');
   });
 
+  it('sets sortable item handle prop to true when handleType is set to "handle"', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent(`
+      <pds-sortable handle-type="handle">
+        <pds-sortable-item>Item 1</pds-sortable-item>
+        <pds-sortable-item>Item 2</pds-sortable-item>
+        <pds-sortable-item>Item 3</pds-sortable-item>
+      </pds-sortable>`);
+
+    const item = await page.find('.pds-sortable-item');
+    expect(await item.getProperty('handle')).toBe(true);
+  })
+
   it('reorders items when an item is dragged and dropped', async () => {
     const page = await newE2EPage();