Don't select the item if it's an href (#3057)

Co-authored-by: owenniblock <[email protected]>
primer · Sep 5, 2024 · 96b42db · 96b42db
1 parent 269b02f
commit 96b42db
Show file tree

Hide file tree

Showing 10 changed files with 9 additions and 1 deletion.
diff --git a/.changeset/three-points-cross.md b/.changeset/three-points-cross.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Don't select SelectPanel::Item when item is a link
diff --git a/...ts/snapshots.test.ts-snapshots/primer/alpha/select_panel/list_of_links/dark.png b/...ts/snapshots.test.ts-snapshots/primer/alpha/select_panel/list_of_links/dark.png
diff --git a/...s.test.ts-snapshots/primer/alpha/select_panel/list_of_links/dark_colorblind.png b/...s.test.ts-snapshots/primer/alpha/select_panel/list_of_links/dark_colorblind.png
diff --git a/...shots.test.ts-snapshots/primer/alpha/select_panel/list_of_links/dark_dimmed.png b/...shots.test.ts-snapshots/primer/alpha/select_panel/list_of_links/dark_dimmed.png
diff --git a/...est.ts-snapshots/primer/alpha/select_panel/list_of_links/dark_high_contrast.png b/...est.ts-snapshots/primer/alpha/select_panel/list_of_links/dark_high_contrast.png
diff --git a/...s/snapshots.test.ts-snapshots/primer/alpha/select_panel/list_of_links/light.png b/...s/snapshots.test.ts-snapshots/primer/alpha/select_panel/list_of_links/light.png
diff --git a/....test.ts-snapshots/primer/alpha/select_panel/list_of_links/light_colorblind.png b/....test.ts-snapshots/primer/alpha/select_panel/list_of_links/light_colorblind.png
diff --git a/...st.ts-snapshots/primer/alpha/select_panel/list_of_links/light_high_contrast.png b/...st.ts-snapshots/primer/alpha/select_panel/list_of_links/light_high_contrast.png
diff --git a/app/components/primer/alpha/select_panel_element.ts b/app/components/primer/alpha/select_panel_element.ts
@@ -882,6 +882,9 @@ export class SelectPanelElement extends HTMLElement {
     const itemContent = this.#getItemContent(item)
 
     if (this.selectVariant === 'single') {
+      // Don't check anything if we have an href
+      if (itemContent?.getAttribute('href')) return
+
       // disallow unchecking checked item in single-select mode
       if (!currentlyChecked) {
         for (const el of this.items) {

diff --git a/previews/primer/alpha/select_panel_preview/list_of_links.html.erb b/previews/primer/alpha/select_panel_preview/list_of_links.html.erb
@@ -8,7 +8,7 @@
 )) do |panel| %>
   <% panel.with_show_button { "Panel" } %>
   <% panel.with_item(label: "GitHub", href: "https://github.com") %>
-  <% panel.with_item(label: "Microsoft", href: "https://microsoft.com") %>
+  <% panel.with_item(label: "Microsoft", href: "https://microsoft.com", active: true) %>
   <% panel.with_item(label: "Primer", href: "https://primer.style") %>
   <% panel.with_item(label: "Catalyst", href: "https://catalyst.rocks") %>
 <% end %>