Private props standardization - modifiers (#2583)

Author: dchyun

.changeset/violet-suns-scream.md

@@ -0,0 +1,8 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+Aligned private properties of the HDS modifiers to follow a standardized notation
+- `hds-anchored-position`
+- `hds-register-event`
+- `hds-tooltip`

packages/components/src/modifiers/hds-anchored-position.ts

@@ -166,21 +166,21 @@ export default modifier<HdsAnchoredPositionSignature>(
   (element, positional, named = {}) => {
     // the element that "floats" next to the "anchor" (whose position is calculated in relation to the anchor)
     // notice: this is the element the Ember modifier is attached to
-    const floatingElement = element;
+    const _floatingElement = element;
 
     // the element that acts as an "anchor" for the "floating" element
     // it can be a DOM (string) selector or a DOM element
     // notice: it's expressed as "positional" argument (array of arguments) for the modifier
     const _anchorTarget = positional[0];
-    const anchorElement =
+    const _anchorElement =
       typeof _anchorTarget === 'string'
         ? document.querySelector(_anchorTarget)
         : _anchorTarget;
 
     assert(
       '`hds-anchored-position` modifier - the provided "anchoring" element is not defined correctly',
-      anchorElement instanceof HTMLElement ||
-        anchorElement instanceof SVGElement
+      _anchorElement instanceof HTMLElement ||
+        _anchorElement instanceof SVGElement
     );
 
     // the "arrow" element (optional) associated with the "floating" element
@@ -221,14 +221,14 @@ export default modifier<HdsAnchoredPositionSignature>(
       // important to know: `computePosition()` is not stateful, it only positions the "floating" element once
       // see: https://floating-ui.com/docs/computePosition
       const state = await computePosition(
-        anchorElement,
-        floatingElement,
+        _anchorElement,
+        _floatingElement,
         floatingOptions
       );
 
       const { x, y, placement, strategy, middlewareData } = state;
 
-      Object.assign(floatingElement.style, {
+      Object.assign(_floatingElement.style, {
         position: strategy,
         top: `${y}px`,
         left: `${x}px`,
@@ -261,8 +261,8 @@ export default modifier<HdsAnchoredPositionSignature>(
     // it returns a "cleanup" function that should be invoked when the floating element is removed from the DOM or hidden from the screen.
     // see: https://floating-ui.com/docs/autoUpdate
     const cleanupFloatingUI = autoUpdate(
-      anchorElement,
-      floatingElement,
+      _anchorElement,
+      _floatingElement,
       computeFloatingPosition
     );
 

packages/components/src/modifiers/hds-register-event.ts

@@ -25,20 +25,20 @@ export default modifier<HdsRegisterEventSignature>(
   (element, positional, named = {}) => {
     // the "target" element the listeners are added to
     // notice: this is the element the Ember modifier is attached to
-    const targetElement = element;
+    const _targetElement = element;
     // the event name and handler to apply to the element
     // notice: it's expressed as "positional" argument (array) for the modifier
-    const [event, eventHandler] = positional;
+    const [_event, _eventHandler] = positional;
     // the options for the `addEventListener()` method
     // see: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
     // notice: it's expressed as "named" argument (object) for the modifier
     const { useCapture = false } = named;
 
-    targetElement.addEventListener(event, eventHandler, useCapture);
+    _targetElement.addEventListener(_event, _eventHandler, useCapture);
 
     // this (teardown) function is run when the element is removed from the DOM
     return (): void => {
-      targetElement.removeEventListener(event, eventHandler, useCapture);
+      _targetElement.removeEventListener(_event, _eventHandler, useCapture);
     };
   }
 );

packages/components/src/modifiers/hds-tooltip.ts

@@ -32,12 +32,12 @@ export interface HdsTooltipModifierSignature {
 }
 
 function cleanup(instance: HdsTooltipModifier): void {
-  const { interval, needsTabIndex, tooltip } = instance;
-  if (needsTabIndex) {
-    tooltip?.reference?.removeAttribute('tabindex');
+  const { _interval, _needsTabIndex, _tooltip } = instance;
+  if (_needsTabIndex) {
+    _tooltip?.reference?.removeAttribute('tabindex');
   }
-  clearInterval(interval);
-  tooltip?.destroy();
+  clearInterval(_interval);
+  _tooltip?.destroy();
 }
 
 /**
@@ -54,10 +54,10 @@ function cleanup(instance: HdsTooltipModifier): void {
  *
  */
 export default class HdsTooltipModifier extends Modifier<HdsTooltipModifierSignature> {
-  didSetup = false;
-  interval: number | undefined = undefined;
-  needsTabIndex = false;
-  tooltip: TippyInstance | undefined = undefined;
+  private _didSetup = false;
+  _interval: number | undefined = undefined;
+  _needsTabIndex = false;
+  _tooltip: TippyInstance | undefined = undefined;
 
   constructor(owner: unknown, args: ArgsFor<HdsTooltipModifierSignature>) {
     super(owner, args);
@@ -92,9 +92,9 @@ export default class HdsTooltipModifier extends Modifier<HdsTooltipModifierSigna
   ): void {
     assert('Tooltip must have an element', element);
 
-    if (!this.didSetup) {
+    if (!this._didSetup) {
       this.#setup(element, positional, named);
-      this.didSetup = true;
+      this._didSetup = true;
     }
 
     this.#update(element, positional, named);
@@ -106,7 +106,7 @@ export default class HdsTooltipModifier extends Modifier<HdsTooltipModifierSigna
     named: HdsTooltipModifierSignature['Args']['Named']
   ): void {
     const tooltipProps = this.#getTooltipProps(element, positional, named);
-    this.tooltip = tippy(element, tooltipProps);
+    this._tooltip = tippy(element, tooltipProps);
   }
 
   #update(
@@ -115,7 +115,7 @@ export default class HdsTooltipModifier extends Modifier<HdsTooltipModifierSigna
     named: HdsTooltipModifierSignature['Args']['Named']
   ): void {
     const tooltipProps = this.#getTooltipProps(element, positional, named);
-    this.tooltip?.setProps(tooltipProps);
+    this._tooltip?.setProps(tooltipProps);
   }
 
   #getTooltipProps(
@@ -167,8 +167,8 @@ export default class HdsTooltipModifier extends Modifier<HdsTooltipModifierSigna
       if (Array.isArray(delay) && delay.length) {
         if (typeof delay[1] !== 'undefined') {
           options.onShown = (tooltip) => {
-            clearInterval(this.interval);
-            this.interval = setTimeout(() => {
+            clearInterval(this._interval);
+            this._interval = setTimeout(() => {
               tooltip.hide();
             }, delay[1] ?? 0);
           };
@@ -179,7 +179,7 @@ export default class HdsTooltipModifier extends Modifier<HdsTooltipModifierSigna
     const $trigger = $anchor;
 
     if (!$trigger.hasAttribute('tabindex')) {
-      this.needsTabIndex = true;
+      this._needsTabIndex = true;
       $trigger.setAttribute('tabindex', '0');
     }