blacklight 8.8.0 → 9.0.0.beta1

data/app/assets/stylesheets/blacklight/_bookmark.scss

@@ -1,50 +1,53 @@
-label.toggle-bookmark {
-	font-weight: inherit;
-	min-width: 8.5em;
-}
-
-div.toggle-bookmark {
-  cursor: pointer;
-}
+.bookmark-toggle {
+  --bl-icon-color: var(--bs-primary);
 
-/* override for line 3.
-Creates weird spacing in toolbar when min-width is set to 8rem */
-.header-tools label.toggle-bookmark {
-  min-width: 2rem;
-}
+  .no-js & {
+    input[type="submit"] {
+      display: inline;
+    }
 
-.bookmark-toggle {
-	.no-js & {
-		input[type="submit"] {
-			display: inline
-		}
-
-		div.toggle-bookmark {
-			display: none
-		}
-	}
-
-	input[type="submit"] {
-		display: none;
-	}
-}
-.toggle-bookmark .blacklight-icons svg {
-  height: 1.25rem;
-  width: 1.25rem;
-  overflow: visible;
-  fill: var(--bs-primary);
+    .toggle-bookmark {
+      display: none;
+    }
+  }
 
-  &.bookmark-checked {
+  input[type="submit"] {
     display: none;
   }
-}
 
-.toggle-bookmark[type="checkbox"]:checked+span svg {
-  &.bookmark-checked {
-    display: inherit;
+  .toggle-bookmark {
+    cursor: pointer;
+
+    .toggle-bookmark-label {
+      font-weight: inherit;
+      min-width: 8.5em;
+
+      .blacklight-icons svg {
+        height: 1.25rem;
+        width: 1.25rem;
+        overflow: visible;
+        fill: var(--bl-icon-color);
+
+        &.bookmark-checked {
+          display: none;
+        }
+      }
+    }
+
+    .toggle-bookmark-input:checked + span svg {
+      &.bookmark-checked {
+        display: inherit;
+      }
+
+      &.bookmark-unchecked {
+        display: none;
+      }
+    }
   }
 
-  &.bookmark-unchecked {
-    display: none;
+  /* override for line 21.
+      Creates weird spacing in toolbar when min-width is set to 8rem */
+  .header-tools .toggle-bookmark-label {
+    min-width: 2rem;
   }
-}
+}

data/app/assets/stylesheets/blacklight/_bootstrap_overrides.scss

@@ -1,36 +1,17 @@
-// Facet field headings and buttons
-.facet-field-heading {
-  --bl-facet-field-heading-font-weight: #{$headings-font-weight};
-  border-bottom: 0;
-
-  button {
-    font-weight: var(--bl-facet-field-heading-font-weight);
-
-    &::after {
-      content: "❯";
-      float: right;
-      transform: rotate(90deg);
-    }
-
-    &.collapsed {
-      border-bottom: 0;
-
-      &::after {
-        transform: rotate(0deg);
-        transition: transform 0.1s ease;
-      }
-    }
-  }
-}
-
 .page-link {
   white-space: nowrap;
 }
 
-.modal[open] {
+// Blacklight's decision to try to use bootstrap modal CSS with an html5 dialog --
+// in such a way the <dialog> element actually serves as the modal backdrop --
+// requires some fixes to both bootstrap CSS and user-agent default css
+dialog.modal[open] {
   // override bootstrap .modal class default display: none
   // since we aren't using bootstrap JS that sets and unsets the display
   display: block;
   background: none;
   border: none;
+
+  max-height: unset; // override user-agent dialog
+  max-width: unset; // override user-agent dialog
 }

data/app/assets/stylesheets/blacklight/_constraints.scss

@@ -1,41 +1,32 @@
 .constraints-container {
-  @extend .mb-2;
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem 0.25rem;
 }
 
 .applied-filter {
-  @extend .mx-1;
+  --separator-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
 
   .constraint-value {
     cursor: default;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-
-    @media (max-width: breakpoint-min(sm)) {
-      max-width: breakpoint-min(sm) * 0.5;
-    }
-
-    @media (min-width: breakpoint-min(sm)) and (max-width: breakpoint-max(sm)) {
-      max-width: breakpoint-min(sm) * 0.5;
-    }
-
-    @media (min-width: breakpoint-min(md)) and (max-width: breakpoint-max(md)) {
-      max-width: breakpoint-min(md) * 0.5;
+    max-width: clamp(288px, calc(30vw), 500px);
+
+    .filter-name:after {
+      background-color: var(--bs-btn-color);
+      content: "";
+      mask: var(--separator-icon);
+      mask-repeat: no-repeat;
+      display: inline-block;
+      height: 1.1rem;
+      width: 1.25rem;
+      vertical-align: text-bottom;
+      margin-right: -0.2rem;
+      margin-left: 0.25rem;
+      transition: background-color 0.15s ease-in-out;
     }
-
-    @media (min-width: breakpoint-min(lg)) {
-      max-width: breakpoint-min(lg) * 0.5;
-    }
-  }
-
-  .filter-name:after {
-    color: $gray-500;
-    content: "❯";
-    font-size: 90%;
-    padding-left: $caret-width;
   }
 
   .remove {

data/app/assets/stylesheets/blacklight/_controls.scss

@@ -1,21 +1,10 @@
 .search-widgets {
   display: flex;
-
-  > * {
-    @extend .mx-1;
-  }
 }
 
 .sort-pagination,
 .pagination-search-widgets {
-  border-bottom: $pagination-border-width solid $pagination-border-color;
-  margin-bottom: 1em;
-  padding-bottom: 1em;
-}
-
-.pagination-search-widgets {
-  padding-top: 1px;
-  padding-bottom: $spacer;
+  border-bottom: var(--bs-border-width) solid var(--bs-border-color);
 }
 
 .sort-pagination .dropdown-toggle {
@@ -25,18 +14,13 @@
 .no-js {
   .btn-group:focus-within {
     .dropdown-menu {
-      @extend .show;
+      display: block; /* show menu when tabbing to it, without Javascript */
     }
   }
 }
 
 .view-type {
   display: inline-block;
-
-  .caption {
-    @extend .sr-only !optional;
-    @extend .visually-hidden !optional;
-  }
 }
 
 .modal_form {

data/app/assets/stylesheets/blacklight/_facets.scss

@@ -1,18 +1,11 @@
 .sidenav {
-  --bl-facet-active-bg: #{$facet-active-bg};
-  --bl-facet-active-item-color: #{$facet-active-item-color};
-  --bl-facet-margin-bottom: #{$spacer};
+  --bl-facet-active-bg: var(--bs-success);
+  --bl-facet-active-item-color: var(--bs-success);
   --bl-facet-remove-color: var(--bs-secondary-color);
+  --bl-facet-remove-hover-color: var(--bs-danger);
   --bl-facet-label-indent: -15px;
   --bl-facet-label-padding-left: 15px;
-
-  --bl-facet-limit-body-padding: #{$spacer};
-
-  --bl-facets-smallish-padding: 0.25rem;
-  --bl-facets-smallish-border: var(--bs-border-width) solid
-    var(--bs-border-color);
-  --bl-facets-smallish-margin-bottom: #{$spacer};
-  --bl-facets-smallish-border-radius: #{$border-radius};
+  --bl-facet-header-padding-y: 0.5rem;
 
   .facet-toggle-button {
     [data-hide-label] {
@@ -33,34 +26,6 @@
   }
 }
 
-.facets-toggleable {
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    $next: breakpoint-next($breakpoint, $grid-breakpoints);
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    &#{$infix} {
-      @include media-breakpoint-down($next) {
-        border: var(--bl-facets-smallish-border);
-        padding: var(--bl-facets-smallish-padding);
-        margin-bottom: var(--bl-facets-smallish-margin-bottom);
-        border-radius: var(--bl-facets-smallish-border-radius);
-      }
-      @include media-breakpoint-up($next) {
-        // scss-lint:disable ImportantRule
-        .facets-collapse {
-          display: block !important;
-          width: 100%;
-        }
-        // scss-lint:enable ImportantRule
-
-        .navbar-toggler {
-          display: none;
-        }
-      }
-    }
-  }
-}
-
 .no-js {
   @include media-breakpoint-down(lg) {
     #sidebar {
@@ -88,49 +53,25 @@
 .facets-header {
   display: flex;
   justify-content: space-between;
-  padding-bottom: 0.5rem;
-  padding-top: 0.5rem;
+  padding-block: var(--bl-facet-header-padding-y);
 }
 
 .facets-heading {
-  @extend .h4;
   line-height: inherit;
 }
 
 .facet-limit {
-  margin-bottom: var(--bl-facet-margin-bottom);
-
-  .card-body {
-    padding: var(--bl-facet-limit-body-padding);
-  }
-
-  /* Provide a focus ring on the expand/collapse button */
-  .btn {
-    --bs-btn-focus-shadow-rgb: 50, 50, 50;
-    &:focus-visible {
-      border-color: var(--bs-btn-hover-border-color);
-      outline: 0;
-      box-shadow: var(--bs-btn-focus-box-shadow);
-    }
-  }
+  --bs-accordion-btn-bg: var(--bs-gray-100);
+  --bs-btn-hover-bg: var(--bs-gray-200);
+  --bs-accordion-active-bg: var(--bs-accordion-btn-bg);
 }
 
 .facet-limit-active {
-  border-color: $facet-active-border;
-
-  .card-header {
-    background-color: var(--bl-facet-active-bg);
-
-    .btn {
-      @if function-exists(color-contrast) {
-        color: color-contrast($facet-active-bg);
-      }
-
-      @if function-exists(color-yiq) {
-        color: color-yiq($facet-active-bg);
-      }
-    }
-  }
+  --bs-accordion-btn-bg: var(--bl-facet-active-bg);
+  --bs-btn-hover-bg: var(--bs-accordion-btn-bg);
+  --bs-accordion-btn-color: var(--bs-light);
+  --bs-btn-hover-color: var(--bs-accordion-btn-color);
+  --bs-accordion-active-color: var(--bs-accordion-btn-color);
 }
 
 .facet-values {
@@ -145,7 +86,7 @@
     align-items: flex-start;
     padding: 3px 0;
 
-    &[role="treeitem"] {
+    &.treeitem {
       display: block;
     }
 
@@ -161,7 +102,7 @@
     text-decoration: none;
 
     &:hover {
-      color: $danger;
+      color: var(--bl-facet-remove-hover-color);
       text-decoration: none;
     }
   }
@@ -194,8 +135,6 @@
 }
 
 .facet-field-heading {
-  @extend .h6;
-
   a {
     color: inherit;
   }
@@ -207,12 +146,6 @@
 /* Sidenav
 -------------------------------------------------- */
 
-.facet-pagination {
-  &.top {
-    padding: $modal-inner-padding;
-  }
-}
-
 .pivot-facet {
   &.show {
     display: flex;

data/app/assets/stylesheets/blacklight/_group.scss

@@ -1,5 +1,6 @@
 .group-key {
-  border-bottom: 1px solid darken($border-color, 60%);
+  --bl-border-color: var(--bs-gray-600);
+  border-bottom: 1px solid var(--bl-border-color);
   clear: right;
 }
 
@@ -8,7 +9,3 @@
     border-bottom: 0;
   }
 }
-
-.more-in-group {
-  float: right;
-}

data/app/assets/stylesheets/blacklight/_header.scss

@@ -4,15 +4,13 @@
 
 .navbar-logo {
   /* The main logo image for the Blacklight instance */
-  @if $logo-image {
-    background: transparent $logo-image no-repeat top left;
-    background-size: $logo-width $logo-height;
-  }
-  height: $logo-height;
+  background: transparent var(--bl-logo-image) no-repeat top left;
+  background-size: var(--bl-logo-width) var(--bl-logo-height);
+  height: var(--bl-logo-height);
   overflow: hidden;
   text-indent: 100%;
   white-space: nowrap;
-  width: $logo-width;
+  width: var(--bl-logo-width);
 }
 
 .navbar-search {
@@ -26,9 +24,4 @@
     // This prevents the widget from being squished so the text overflows
     min-width: 7em;
   }
-
-  .search-query-form {
-    @extend .col-md-12;
-    @extend .col-lg-8;
-  }
 }

data/app/assets/stylesheets/blacklight/_icons.scss

@@ -1,11 +1,3 @@
-.btn.btn-icon {
-  padding: $btn-padding-y;
-
-  &.btn-sm {
-    padding: $btn-padding-y-sm;
-  }
-}
-
 .remove .bi {
   height: 1em;
   width: 1em;

data/app/assets/stylesheets/blacklight/_modal.scss

@@ -4,7 +4,7 @@
 
 .modal-content {
   .facet-pagination.top {
-  	display: none;
+    display: none; /* Doesn't display in a modal, but would display on a new page (e.g. without Javascript) */
   }
 
   .page-sidebar {
@@ -23,5 +23,5 @@
 // app/views/catalog/facet.html.erb may be rendered as a modal or a whole page.
 // When it's a whole page, don't show the close button.
 .blacklight-modal-close {
-	display: none;
+  display: none;
 }

data/app/assets/stylesheets/blacklight/_pagination.scss

@@ -5,10 +5,6 @@
   padding-left: 0;
 }
 
-.record-padding {
-  margin-top: $spacer * .5;
-}
-
 .pagination {
   @media (max-width: breakpoint-max(sm)) {
     flex-wrap: wrap;

data/app/assets/stylesheets/blacklight/_search_form.scss

@@ -5,7 +5,6 @@
 }
 
 .input-group > .search-autocomplete-wrapper {
-  @extend .form-control;
   display: inline-block;
   flex-grow: 4;
   padding: 0;
@@ -27,3 +26,10 @@
   border-bottom-left-radius: 0;
   display: flex;
 }
+
+// ensure that the search bar appears at the top of the page when focused using
+// anchor links, e.g. from the skip links navigation
+.search-field,
+.search-q {
+  scroll-margin: 5rem;
+}

data/app/assets/stylesheets/blacklight/_search_history.scss

@@ -6,10 +6,6 @@
     padding: $spacer;
   }
 
-  .constraints-container {
-    @extend .mb-0;
-  }
-
   .constraint {
     padding-inline-end: $spacer;
     display: block;

data/app/assets/stylesheets/blacklight/_search_results.scss

@@ -5,28 +5,14 @@
 
   .document {
     display: flex;
-    border-bottom: 1px dotted $table-border-color;
+    border-bottom: 1px dotted var(--bs-border-color);
     margin-top: var(--bl-results-document-margin-top);
     padding-top: var(--bl-results-document-padding-top);
 
-    .document-title-heading {
-      @extend h5;
-    }
-
     .document-main-section {
       flex-grow: 1;
     }
 
-    // bookmarks checkbox on index, give it some
-    // lower margin when it collapses
-    .index-document-functions {
-      margin-bottom: ($spacer * 1.5);
-
-      @media (min-width: breakpoint-min(sm)) {
-        margin-bottom: 0;
-      }
-    }
-
     .document-thumbnail {
       flex-grow: 0;
       margin-bottom: ($spacer * 3);

data/app/assets/stylesheets/blacklight/blacklight_defaults.scss

@@ -1,18 +1,13 @@
-/* Warning! If you want to change these, just copy them into your own theme css. But you want to remove the !default, which only will set them if not already set. */
-
-$logo-image: image_url("blacklight/logo.png") !default;
-$logo-width: 150px !default;
-$logo-height: 50px !default;
-
-$facet-active-border: $success !default;
-$facet-active-bg: $success !default;
-$facet-active-item-color: $success !default;
-
-/* for compatability with BS < 5.3  */
-$body-secondary-color: rgba($body-color, 0.75) !default;
-
 :root {
-  --bs-secondary-color: #{$body-secondary-color}; /* for compatability with BS < 5.3  */
+  --bl-logo-image: url("blacklight/logo.png");
+  --bl-logo-width: 150px;
+  --bl-logo-height: 50px;
+  --bs-secondary-color: rgba(
+    33,
+    37,
+    41,
+    0.75
+  ); /* for compatability with BS < 5.3  */
 
   --bl-main-padding-y: 0.5rem;
 

data/app/assets/stylesheets/blacklight/build.scss

@@ -0,0 +1,4 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/mixins/breakpoints";
+@import "bootstrap/scss/variables";
+@import "blacklight";

data/app/components/blacklight/advanced_search_form_component.rb

@@ -24,7 +24,7 @@ module Blacklight
 
     def default_operator_menu
       options_with_labels = [:must, :should].index_by { |op| t(op, scope: 'blacklight.advanced_search.op') }
-      label_tag(:op, t('blacklight.advanced_search.op.label'), class: 'sr-only visually-hidden') + select_tag(:op, options_for_select(options_with_labels, params[:op]), class: 'input-small')
+      label_tag(:op, t('blacklight.advanced_search.op.label'), class: 'visually-hidden') + select_tag(:op, options_for_select(options_with_labels, params[:op]), class: 'input-small')
     end
 
     def sort_fields_select

data/app/components/blacklight/constraint_component.rb

@@ -4,7 +4,7 @@ module Blacklight
   class ConstraintComponent < Blacklight::Component
     with_collection_parameter :facet_item_presenter
 
-    def initialize(facet_item_presenter:, classes: 'filter', layout: Blacklight::ConstraintLayoutComponent)
+    def initialize(facet_item_presenter:, classes: %w[filter mx-1], layout: Blacklight::ConstraintLayoutComponent)
       @facet_item_presenter = facet_item_presenter
       @classes = classes
       @layout = layout

data/app/components/blacklight/constraint_layout_component.html.erb

@@ -9,8 +9,8 @@
   </span>
   <% if @remove_path.present? %>
     <%= link_to(@remove_path, class: 'btn btn-outline-secondary remove') do %>
-      <%= render Blacklight::Icons::RemoveComponent.new %>
-      <span class="sr-only visually-hidden"><%= remove_aria_label %></span>
+      <%= render Blacklight::Icons::RemoveComponent.new(aria_hidden: true) %>
+      <span class="visually-hidden"><%= remove_aria_label %></span>
     <% end %>
   <% end %>
 </span>

data/app/components/blacklight/constraints_component.html.erb

@@ -1,12 +1,12 @@
 <%= content_tag @tag || :div, id: @id, class: @classes do %>
   <% if @render_headers %>
-    <h2 class="sr-only visually-hidden"><%= t('blacklight.search.search_constraints_header') %></h2>
+    <h2 class="visually-hidden"><%= t('blacklight.search.search_constraints_header') %></h2>
   <% end %>
 
   <%= render @start_over_component.new if @start_over_component %>
 
   <% if @render_headers %>
-    <span class="constraints-label sr-only visually-hidden"><%= t('blacklight.search.filters.title') %></span>
+    <span class="constraints-label visually-hidden"><%= t('blacklight.search.filters.title') %></span>
   <% end %>
   <% if query_constraints_area.present? %>
     <% query_constraints_area.each do |constraint| %>

data/app/components/blacklight/constraints_component.rb

@@ -20,7 +20,7 @@ module Blacklight
     def initialize(search_state:,
                    tag: :div,
                    render_headers: true,
-                   id: 'appliedParams', classes: 'clearfix constraints-container',
+                   id: 'appliedParams', classes: 'clearfix constraints-container mb-2',
                    query_constraint_component: Blacklight::ConstraintLayoutComponent,
                    query_constraint_component_options: {},
                    facet_constraint_component: Blacklight::ConstraintComponent,

data/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>

data/app/components/blacklight/document/group_component.html.erb

@@ -4,6 +4,6 @@
     <%= grouped_documents %>
   </div>
   <%- if @group_limit > 0 && @group.total > @group_limit %>
-    <%= helpers.link_to t('blacklight.search.group.more'), add_group_facet_params_and_redirect(@group), class: 'more-in-group' %>
+    <%= helpers.link_to t('blacklight.search.group.more'), add_group_facet_params_and_redirect(@group), class: 'more-in-group float-right' %>
   <%- end %>
 </div>

data/app/components/blacklight/document/page_header_component.rb

@@ -40,7 +40,7 @@ module Blacklight
       end
 
       def header_container_classes
-        has_header_tools? ? 'row pagination-search-widgets pb-2' : 'pagination-search-widgets'
+        has_header_tools? ? 'row pagination-search-widgets pb-3' : 'pagination-search-widgets pb-3'
       end
 
       def header_actions