Generate IDs for HTML in a standard way (#1763)

Co-authored-by: Cameron Dutro <camertron@gmail.com>
primer · Jan 18, 2023 · a2c5b4c · a2c5b4c
1 parent fdd7bc1
commit a2c5b4c
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?