Disambiguate .toggle-bookmark

Previously we were using one class for three different levels of the bookmark tool. This has now been split into three different classes .toggle-bookmark, .toggle-bookmark-input, and .toggle-bookmark-label
projectblacklight · Aug 30, 2024 · bdc0b4e · bdc0b4e
1 parent 69373f2
commit bdc0b4e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 21 deletions.
diff --git a/app/assets/stylesheets/blacklight/_bookmark.scss b/app/assets/stylesheets/blacklight/_bookmark.scss
@@ -1,28 +1,28 @@
-label.toggle-bookmark {
-	font-weight: inherit;
-	min-width: 8.5em;
+.toggle-bookmark-label {
+  font-weight: inherit;
+  min-width: 8.5em;
 }
 
 /* override for line 3.
 Creates weird spacing in toolbar when min-width is set to 8rem */
-.header-tools label.toggle-bookmark {
+.header-tools .toggle-bookmark-label {
   min-width: 2rem;
 }
 
 .bookmark-toggle {
-	.no-js & {
-		input[type="submit"] {
-			display: inline
-		}
+  .no-js & {
+    input[type="submit"] {
+      display: inline;
+    }
 
-		div.toggle-bookmark {
-			display: none
-		}
-	}
+    .toggle-bookmark {
+      display: none;
+    }
+  }
 
-	input[type="submit"] {
-		display: none;
-	}
+  input[type="submit"] {
+    display: none;
+  }
 }
 .toggle-bookmark .blacklight-icons svg {
   height: 1.25rem;
@@ -35,12 +35,12 @@ Creates weird spacing in toolbar when min-width is set to 8rem */
   }
 }
 
-.toggle-bookmark[type="checkbox"]:checked+span svg {
+.toggle-bookmark-input:checked + span svg {
   &.bookmark-checked {
     display: inherit;
   }
 
   &.bookmark-unchecked {
     display: none;
   }
-}
+}
diff --git a/app/components/blacklight/document/bookmark_component.html.erb b/app/components/blacklight/document/bookmark_component.html.erb
@@ -8,9 +8,9 @@
                absent: t('blacklight.search.bookmarks.absent'),
                inprogress: t('blacklight.search.bookmarks.inprogress')
             }) do %>
-  <div class="checkbox toggle-bookmark">
-    <label class="toggle-bookmark" data-checkboxsubmit-target="label">
-      <input type="checkbox" class="toggle-bookmark <%= bookmark_icon ? 'd-none' : '' %>" data-checkboxsubmit-target="checkbox" <%= 'checked="checked"' if bookmarked? %>>
+  <div class="toggle-bookmark">
+    <label class="toggle-bookmark-label" data-checkboxsubmit-target="label">
+      <input type="checkbox" class="toggle-bookmark-input <%= bookmark_icon ? 'd-none' : '' %>" data-checkboxsubmit-target="checkbox" <%= 'checked="checked"' if bookmarked? %>>
       <%= bookmark_icon %>
       <span data-checkboxsubmit-target="span"><%= bookmarked? ? t('blacklight.search.bookmarks.present') : t('blacklight.search.bookmarks.absent') %></span>
     </label>

diff --git a/spec/features/bookmarks_spec.rb b/spec/features/bookmarks_spec.rb
@@ -92,7 +92,7 @@
       expect(page).to have_css('.blacklight-icons-bookmark')
       find('.blacklight-icons-bookmark').click
 
-      expect(find('.toggle-bookmark[type="checkbox"]', visible: false)).to be_checked
+      expect(find('.toggle-bookmark-input', visible: false)).to be_checked
       find('.blacklight-icons-bookmark').click
     end
   end