From 4e3934eb289e22001b28861703e768046ade9db6 Mon Sep 17 00:00:00 2001
From: Chris Haynes <chris.haynes@gmail.com>
Date: Wed, 29 Jul 2020 12:15:47 +0100
Subject: [PATCH] Ensures there are no id clashes (#146)

Ensures there are no id clashes by renaming the internal id property to componentId
---
 src/components/details/details.tsx     | 10 +++++-----
 src/components/dialog/dialog.tsx       |  6 +++---
 src/components/drawer/drawer.tsx       |  6 +++---
 src/components/dropdown/dropdown.tsx   |  6 +++---
 src/components/tab-panel/tab-panel.tsx |  4 ++--
 src/components/tab/tab.tsx             |  4 ++--
 src/components/tooltip/tooltip.tsx     |  8 ++++----
 7 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/details/details.tsx b/src/components/details/details.tsx
index 4b0afa02..78ed98c6 100644
--- a/src/components/details/details.tsx
+++ b/src/components/details/details.tsx
@@ -24,7 +24,7 @@ let id = 0;
 export class Details {
   details: HTMLElement;
   header: HTMLElement;
-  id = `details-${++id}`;
+  componentId = `details-${++id}`;
   body: HTMLElement;
 
   /** Indicates whether or not the details is open. You can use this in lieu of the show/hide methods. */
@@ -156,11 +156,11 @@ export class Details {
       >
         <header
           ref={el => (this.header = el)}
-          id={`${this.id}-header`}
+          id={`${this.componentId}-header`}
           class="details__header"
           role="button"
           aria-expanded={this.open}
-          aria-controls={`${this.id}-content`}
+          aria-controls={`${this.componentId}-content`}
           aria-disabled={this.disabled}
           tabIndex={this.disabled ? -1 : 0}
           onClick={this.handleSummaryClick}
@@ -178,10 +178,10 @@ export class Details {
         <div ref={el => (this.body = el)} class="details__body" onTransitionEnd={this.handleBodyTransitionEnd}>
           <div
             part="content"
-            id={`${this.id}-content`}
+            id={`${this.componentId}-content`}
             class="details__content"
             role="region"
-            aria-labeledby={`${this.id}-header`}
+            aria-labeledby={`${this.componentId}-header`}
           >
             <slot />
           </div>
diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx
index fbf36eb1..1aeedd82 100644
--- a/src/components/dialog/dialog.tsx
+++ b/src/components/dialog/dialog.tsx
@@ -29,7 +29,7 @@ let id = 0;
 export class Dialog {
   panel: HTMLElement;
   dialog: HTMLElement;
-  id = `dialog-${++id}`;
+  componentId = `dialog-${++id}`;
 
   @Element() host: HTMLSlDialogElement;
 
@@ -196,12 +196,12 @@ export class Dialog {
           aria-modal="true"
           aria-hidden={!this.open}
           aria-label={this.noHeader ? this.label : null}
-          aria-labeledby={!this.noHeader ? `${this.id}-title` : null}
+          aria-labeledby={!this.noHeader ? `${this.componentId}-title` : null}
           tabIndex={0}
         >
           {!this.noHeader && (
             <header part="header" class="dialog__header">
-              <span part="title" class="dialog__title" id={`${this.id}-title`}>
+              <span part="title" class="dialog__title" id={`${this.componentId}-title`}>
                 {/* If there's no label, use an invisible character to prevent the heading from collapsing */}
                 {this.label || String.fromCharCode(65279)}
               </span>
diff --git a/src/components/drawer/drawer.tsx b/src/components/drawer/drawer.tsx
index 3065f874..df9f3a1b 100644
--- a/src/components/drawer/drawer.tsx
+++ b/src/components/drawer/drawer.tsx
@@ -28,7 +28,7 @@ let id = 0;
 export class Drawer {
   panel: HTMLElement;
   drawer: HTMLElement;
-  id = `drawer-${++id}`;
+  componentId = `drawer-${++id}`;
 
   @Element() host: HTMLSlDrawerElement;
 
@@ -216,12 +216,12 @@ export class Drawer {
           aria-modal="true"
           aria-hidden={!this.open}
           aria-label={this.noHeader ? this.label : null}
-          aria-labeledby={!this.noHeader ? `${this.id}-title` : null}
+          aria-labeledby={!this.noHeader ? `${this.componentId}-title` : null}
           tabIndex={0}
         >
           {!this.noHeader && (
             <header part="header" class="drawer__header">
-              <span part="title" class="drawer__title" id={`${this.id}-title`}>
+              <span part="title" class="drawer__title" id={`${this.componentId}-title`}>
                 {/* If there's no label, use an invisible character to prevent the heading from collapsing */}
                 {this.label || String.fromCharCode(65279)}
               </span>
diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
index 2eddc8fe..202e878f 100644
--- a/src/components/dropdown/dropdown.tsx
+++ b/src/components/dropdown/dropdown.tsx
@@ -21,7 +21,7 @@ let id = 0;
   shadow: true
 })
 export class Dropdown {
-  id = `dropdown-${++id}`;
+  componentId = `dropdown-${++id}`;
   ignoreMouseEvents = false;
   ignoreMouseTimeout: any;
   ignoreOpenWatcher = false;
@@ -265,7 +265,7 @@ export class Dropdown {
     return (
       <div
         part="base"
-        id={this.id}
+        id={this.componentId}
         class={{
           dropdown: true,
           'dropdown--open': this.open
@@ -289,7 +289,7 @@ export class Dropdown {
           class="dropdown__panel"
           role="menu"
           aria-hidden={!this.open}
-          aria-labeledby={this.id}
+          aria-labeledby={this.componentId}
           hidden
         >
           <slot />
diff --git a/src/components/tab-panel/tab-panel.tsx b/src/components/tab-panel/tab-panel.tsx
index 09e9f4a5..90ae0677 100644
--- a/src/components/tab-panel/tab-panel.tsx
+++ b/src/components/tab-panel/tab-panel.tsx
@@ -17,7 +17,7 @@ let id = 0;
   shadow: true
 })
 export class TabPanel {
-  id = `tab-panel-${++id}`;
+  componentId = `tab-panel-${++id}`;
 
   @Element() host: HTMLSlTabPanelElement;
 
@@ -30,7 +30,7 @@ export class TabPanel {
   render() {
     return (
       // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
-      <Host id={this.host.id || this.id} style={{ display: this.active ? 'block' : 'none' }}>
+      <Host id={this.host.id || this.componentId} style={{ display: this.active ? 'block' : 'none' }}>
         <div part="base" class="tab-panel" role="tabpanel" aria-selected={this.active} aria-hidden={!this.active}>
           <slot />
         </div>
diff --git a/src/components/tab/tab.tsx b/src/components/tab/tab.tsx
index bcd85d82..149bd939 100644
--- a/src/components/tab/tab.tsx
+++ b/src/components/tab/tab.tsx
@@ -17,7 +17,7 @@ let id = 0;
   shadow: true
 })
 export class Tab {
-  id = `tab-${++id}`;
+  componentId = `tab-${++id}`;
   tab: HTMLElement;
 
   @Element() host: HTMLSlTabElement;
@@ -46,7 +46,7 @@ export class Tab {
   render() {
     return (
       // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
-      <Host id={this.host.id || this.id}>
+      <Host id={this.host.id || this.componentId}>
         <div
           part="base"
           ref={el => (this.tab = el)}
diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx
index 0fff62b0..7ec12875 100644
--- a/src/components/tooltip/tooltip.tsx
+++ b/src/components/tooltip/tooltip.tsx
@@ -18,7 +18,7 @@ let id = 0;
   shadow: true
 })
 export class Tooltip {
-  id = `tooltip-${++id}`;
+  componentId = `tooltip-${++id}`;
   popover: Popover;
   target: HTMLElement;
   tooltip: any;
@@ -194,7 +194,7 @@ export class Tooltip {
 
     if (newTarget !== oldTarget) {
       oldTarget.removeAttribute('aria-describedby');
-      newTarget.setAttribute('aria-describedby', this.id);
+      newTarget.setAttribute('aria-describedby', this.componentId);
     }
   }
 
@@ -216,13 +216,13 @@ export class Tooltip {
   render() {
     return (
       <Host onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-        <slot aria-describedby={this.id} />
+        <slot aria-describedby={this.componentId} />
 
         {!this.disabled && (
           <div
             part="base"
             ref={el => (this.tooltip = el)}
-            id={this.id}
+            id={this.componentId}
             class={{
               tooltip: true,
               'tooltip--open': this.open