Allow arrow padding to be configured for a step.

shepherd.js/src/step.ts

@@ -68,9 +68,9 @@ export interface StepOptions {
   advanceOn?: StepOptionsAdvanceOn;
 
   /**
-   * Whether to display the arrow for the tooltip or not
+   * Whether to display the arrow for the tooltip or not, or options for the arrow.
    */
-  arrow?: boolean;
+  arrow?: boolean | StepOptionsArrow;
 
   /**
    * A function that returns a promise.
@@ -221,6 +221,14 @@ export type PopperPlacement =
   | 'left-start'
   | 'left-end';
 
+export interface StepOptionsArrow {
+  /*
+   * The padding from the edge for the arrow.
+   * Not used if this is not a -start or -end placement.
+   */
+  padding?: number
+}
+
 export interface StepOptionsAttachTo {
   element?:
     | HTMLElement

shepherd.js/src/utils/floating-ui.ts

@@ -211,8 +211,13 @@ export function getFloatingUIOptions(
     );
 
     if (arrowEl) {
+      const arrowOptions =
+        typeof step.options.arrow === "object"
+        ? step.options.arrow
+        : { padding: 4 };
+
       options.middleware.push(
-        arrow({ element: arrowEl, padding: hasEdgeAlignment ? 4 : 0 })
+        arrow({ element: arrowEl, padding: hasEdgeAlignment ? arrowOptions.padding : 0 })
       );
     }
 

test/unit/components/shepherd-element.spec.js

@@ -44,6 +44,44 @@ describe('components/ShepherdElement', () => {
         container.querySelectorAll('.shepherd-element .shepherd-arrow').length
       ).toBe(0);
     });
+
+    it('arrow: object with padding shows arrow', async () => {
+      const testElement = document.createElement('div');
+      const tour = new Tour();
+      const step = new Step(tour, {
+        arrow: { padding: 10 },
+        attachTo: { element: testElement, on: 'top' }
+      });
+
+      const { container } = render(ShepherdElement, {
+        props: {
+          step
+        }
+      });
+
+      expect(
+        container.querySelectorAll('.shepherd-element .shepherd-arrow').length
+      ).toBe(1);
+    });
+
+    it('arrow: empty object shows arrow', async () => {
+      const testElement = document.createElement('div');
+      const tour = new Tour();
+      const step = new Step(tour, {
+        arrow: {},
+        attachTo: { element: testElement, on: 'top' }
+      });
+
+      const { container } = render(ShepherdElement, {
+        props: {
+          step
+        }
+      });
+
+      expect(
+        container.querySelectorAll('.shepherd-element .shepherd-arrow').length
+      ).toBe(1);
+    });
   });
 
   describe('handleKeyDown', () => {