HDS-2508 Add private property standards to new component checklist, s…

…tandardize rich tooltip private properties
hashicorp · Nov 7, 2024 · 9218a8c · 9218a8c
1 parent cd9d4d9
commit 9218a8c
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/packages/components/NEW-COMPONENT-CHECKLIST.md b/packages/components/NEW-COMPONENT-CHECKLIST.md
@@ -112,6 +112,7 @@ The engineering checklist has six parts: creating the feature branch, component
   - write API comments in the [JS doc](https://jsdoc.app/) format (look at existing components for examples)
   - use the same naming as the Figma file for the components API, unless it conflicts with a pre-existing HTML attribute. If that is the case, document the difference in a comment.
   - booleans should start with a verb (is/has/etc)
+  - private properites and methods should be declared as `private` and start with an `_`, e.g., `private _elementId`
   - assertions should match the content style of the other components, e.g., `'@text for "Hds::Button" must have a valid value'`,
   - program with intent; think about the invocation for the developer who will use the component. The goal is a terse invocation, but we also want to consider the big picture. Try to get feedback when you can.
 - [ ] **component style**

diff --git a/packages/components/src/components/hds/rich-tooltip/index.hbs b/packages/components/src/components/hds/rich-tooltip/index.hbs
@@ -15,14 +15,14 @@
       (hash
         Toggle=(component
           "hds/rich-tooltip/toggle"
-          popoverId=this.popoverId
+          popoverId=this._popoverId
           setupPrimitiveToggle=PP.setupPrimitiveToggle
           isOpen=PP.isOpen
         )
         Bubble=(component
           "hds/rich-tooltip/bubble"
-          arrowId=this.arrowId
-          popoverId=this.popoverId
+          arrowId=this._arrowId
+          popoverId=this._popoverId
           setupPrimitivePopover=PP.setupPrimitivePopover
           isOpen=PP.isOpen
         )

diff --git a/packages/components/src/components/hds/rich-tooltip/index.ts b/packages/components/src/components/hds/rich-tooltip/index.ts
@@ -32,9 +32,9 @@ export interface HdsRichTooltipSignature {
 }
 
 export default class HdsRichTooltip extends Component<HdsRichTooltipSignature> {
-  elementId: string = getElementId(this);
-  arrowId: string = `arrow-${this.elementId}`;
-  popoverId: string = `popover-${this.elementId}`;
+  private _elementId: string = getElementId(this);
+  private _arrowId: string = `arrow-${this._elementId}`;
+  private _popoverId: string = `popover-${this._elementId}`;
 
   get enableSoftEvents(): boolean {
     return this.args.enableClickEvents !== true;