Generate IDs for HTML in a standard way

Tooltips were getting IDs that would occasionally conflict in CI. In order to prevent that, we are standardizing our ID generation to start with the component class name plus a random UUID. Co-authored-by: Cameron Dutro <camertron@gmail.com>
primer · Jan 18, 2023 · 4c17893 · 4c17893
1 parent fdd7bc1
commit 4c17893
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 14 deletions.
diff --git a/.changeset/brown-tigers-suffer.md b/.changeset/brown-tigers-suffer.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Standardize how we generate ids for HTML
diff --git a/app/components/primer/alpha/action_list.rb b/app/components/primer/alpha/action_list.rb
@@ -60,7 +60,7 @@ def initialize(
         show_dividers: false,
         **system_arguments
       )
-        @id = "action-list-#{SecureRandom.uuid}"
+        @id = self.class.generate_id
         @role = role
 
         @system_arguments = system_arguments

diff --git a/app/components/primer/alpha/action_list/item.rb b/app/components/primer/alpha/action_list/item.rb
@@ -155,7 +155,7 @@ def initialize(
           description_scheme: DEFAULT_DESCRIPTION_SCHEME,
           active: false,
           on_click: nil,
-          id: SecureRandom.hex,
+          id: self.class.generate_id,
           **system_arguments
         )
           @list = list

diff --git a/app/components/primer/alpha/dialog.rb b/app/components/primer/alpha/dialog.rb
@@ -121,14 +121,14 @@ def initialize(
         position: DEFAULT_POSITION,
         position_narrow: DEFAULT_POSITION_NARROW,
         visually_hide_title: false,
-        id: "dialog-#{(36**3 + rand(36**4)).to_s(36)}",
+        id: self.class.generate_id,
         **system_arguments
       )
         @system_arguments = deny_tag_argument(**system_arguments)
 
         @system_arguments[:tag] = "modal-dialog"
         @system_arguments[:role] = "dialog"
-        @system_arguments[:id] = id.to_s
+        @system_arguments[:id] = id
         @system_arguments[:aria] = { modal: true }
         @system_arguments[:classes] = class_names(
           "Overlay",

diff --git a/app/components/primer/alpha/tool_tip.ts b/app/components/primer/alpha/tool_tip.ts
@@ -197,10 +197,6 @@ class ToolTipElement extends HTMLElement {
     this.hiddenFromView = true
     this.#allowUpdatePosition = true
 
-    if (!this.id) {
-      this.id = `tooltip-${Date.now()}-${(Math.random() * 10000).toFixed(0)}`
-    }
-
     if (!this.control) return
 
     this.setAttribute('role', 'tooltip')

diff --git a/app/components/primer/alpha/tooltip.rb b/app/components/primer/alpha/tooltip.rb
@@ -107,10 +107,11 @@ def initialize(type:, for_id:, text:, direction: DIRECTION_DEFAULT, **system_arg
 
         @text = text
         @system_arguments = system_arguments
+        @system_arguments[:id] ||= self.class.generate_id
         @system_arguments[:tag] = :"tool-tip"
         @system_arguments[:for] = for_id
-        system_arguments[:classes] = class_names(
-          system_arguments[:classes],
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
           "sr-only"
         )
         @system_arguments[:position] = :absolute
@@ -121,6 +122,6 @@ def initialize(type:, for_id:, text:, direction: DIRECTION_DEFAULT, **system_arg
       def call
         render(Primer::BaseComponent.new(**@system_arguments)) { @text }
       end
-      end
     end
   end
+end
diff --git a/app/components/primer/beta/icon_button.rb b/app/components/primer/beta/icon_button.rb
@@ -63,7 +63,7 @@ def initialize(icon:, scheme: DEFAULT_SCHEME, wrapper_arguments: {}, show_toolti
         @wrapper_arguments = wrapper_arguments
         @show_tooltip = show_tooltip
         @system_arguments = system_arguments
-        @system_arguments[:id] ||= "icon-button-#{SecureRandom.hex(4)}"
+        @system_arguments[:id] ||= self.class.generate_id
 
         @system_arguments[:classes] = class_names(
           "Button",

diff --git a/app/components/primer/component.rb b/app/components/primer/component.rb
@@ -22,6 +22,10 @@ def self.deprecated?
       status == :deprecated
     end
 
+    def self.generate_id
+      "#{name.demodulize.underscore.dasherize}-#{SecureRandom.uuid}"
+    end
+
     private
 
     def raise_on_invalid_options?

diff --git a/app/components/primer/icon_button.rb b/app/components/primer/icon_button.rb
@@ -65,7 +65,7 @@ def initialize(icon:, scheme: DEFAULT_SCHEME, box: false, tooltip_direction: Pri
 
       @system_arguments = system_arguments
 
-      @system_arguments[:id] ||= "icon-button-#{SecureRandom.hex(4)}"
+      @system_arguments[:id] ||= self.class.generate_id
 
       @system_arguments[:classes] = class_names(
         "btn-octicon",

diff --git a/lib/primer/forms/dsl/input.rb b/lib/primer/forms/dsl/input.rb
@@ -76,7 +76,7 @@ def initialize(builder:, form:, **system_arguments)
 
           @input_arguments[:invalid] = "true" if invalid?
 
-          base_id = SecureRandom.hex[0..5]
+          base_id = SecureRandom.uuid
 
           @ids = {}.tap do |id_map|
             id_map[:validation] = "validation-#{base_id}" if invalid?