Issue #3487842 by kd_ace, ericrubino, markfelton, chrisfromredfin: Filter by...

Issue #3487842 by kd_ace, ericrubino, markfelton, chrisfromredfin: Filter by category alignment is off by 2 pixels

css/pb.css

 /* WIP: Move from the style tags. */
 
 /* <Filter> */
-.pb-filter__fieldset {
-  margin: 0;
-  padding: 0;
-}
-
 .pb-filter__summary {
   padding: 1rem;
   cursor: pointer;

modules/project_browser_devel/src/Plugin/ProjectBrowserSource/RandomDataPlugin.php

@@ -133,21 +133,21 @@ class RandomDataPlugin extends ProjectBrowserSourceBase {
       TRUE,
       $this->t('Show projects covered by a security policy'),
       $this->t('Show all'),
-      $this->t('Security Advisory Coverage'),
+      $this->t('Security advisory coverage'),
       NULL,
     );
     $filters['maintenanceStatus'] = new BooleanFilter(
       TRUE,
       $this->t('Show actively maintained projects'),
       $this->t('Show all'),
-      $this->t('Maintenance Status'),
+      $this->t('Maintenance status'),
       NULL,
     );
     $filters['developmentStatus'] = new BooleanFilter(
       TRUE,
       $this->t('Show projects under active development'),
       $this->t('Show all'),
-      $this->t('Development Status'),
+      $this->t('Development status'),
       NULL,
     );
 

src/Plugin/ProjectBrowserSource/DrupalDotOrgJsonApi.php

@@ -251,21 +251,21 @@ class DrupalDotOrgJsonApi extends ProjectBrowserSourceBase {
       TRUE,
       $this->t('Show projects covered by a security policy'),
       $this->t('Show all'),
-      $this->t('Security Advisory Coverage'),
+      $this->t('Security advisory coverage'),
       NULL,
     );
     $filters['maintenanceStatus'] = new BooleanFilter(
       TRUE,
       $this->t('Show actively maintained projects'),
       $this->t('Show all'),
-      $this->t('Maintenance Status'),
+      $this->t('Maintenance status'),
       NULL,
     );
     $filters['developmentStatus'] = new BooleanFilter(
       TRUE,
       $this->t('Show projects under active development'),
       $this->t('Show all'),
-      $this->t('Development Status'),
+      $this->t('Development status'),
       NULL,
     );
 

sveltejs/src/MultipleChoiceFilter.svelte

@@ -151,57 +151,50 @@
   });
 </script>
 
-<section
-  aria-label={Drupal.t('Filter by category')}
-  class="search__form-item js-form-item form-item js-form-type-select form-type--select"
->
-  <fieldset class="pb-filter__fieldset">
-    <label for="pb-text" class="form-item__label"
-      >{Drupal.t('Filter by category')}</label
+<div class="filter-group__filter-options form-item">
+  <label for="pb-text" class="form-item__label"
+    >{Drupal.t('Filter by category')}</label
+  >
+  {#await apiModuleCategory then categoryList}
+    <div
+      role="button"
+      tabindex="0"
+      class="pb-filter__multi-dropdown form-element form-element--type-select"
+      on:click={() => {
+        showHideFilter();
+      }}
+      on:blur={onBlur}
+      on:keydown={onKeyDown}
     >
-    {#await apiModuleCategory then categoryList}
+      <span class="pb-filter__multi-dropdown__label"
+        >{$moduleCategoryFilter.length
+          ? $moduleCategoryFilter
+              .map((category) => $moduleCategoryVocabularies[category])
+              .join(', ')
+          : Drupal.t('Select categories')}</span
+      >
       <div
-        role="button"
-        tabindex="0"
-        class="pb-filter__multi-dropdown form-element form-element--type-select"
-        on:click={() => {
-          showHideFilter();
-        }}
-        on:blur={onBlur}
-        on:keydown={onKeyDown}
+        class="pb-filter__multi-dropdown__items
+      pb-filter__multi-dropdown__items--{filterVisible ? 'visible' : 'hidden'}"
       >
-        <span class="pb-filter__multi-dropdown__label"
-          >{$moduleCategoryFilter.length
-            ? $moduleCategoryFilter
-                .map((category) => $moduleCategoryVocabularies[category])
-                .join(', ')
-            : Drupal.t('Select categories')}</span
-        >
-        <div
-          class="pb-filter__multi-dropdown__items
-        pb-filter__multi-dropdown__items--{filterVisible
-            ? 'visible'
-            : 'hidden'}"
-        >
-          {#each categoryList[$activeTab] as dt}
-            <div class="pb-filter__checkbox-label">
-              <input
-                type="checkbox"
-                id={dt.id}
-                class="pb-filter__checkbox form-checkbox form-boolean form-boolean--type-checkbox"
-                bind:group={$moduleCategoryFilter}
-                on:change={onSelectCategory}
-                on:blur={onBlur}
-                on:keydown={onKeyDown}
-                value={dt.id}
-              />
-              <label for={dt.id} class="pb-filter__checkbox-label-txt">
-                {dt.name}
-              </label>
-            </div>
-          {/each}
-        </div>
+        {#each categoryList[$activeTab] as dt}
+          <div class="pb-filter__checkbox-label">
+            <input
+              type="checkbox"
+              id={dt.id}
+              class="pb-filter__checkbox form-checkbox form-boolean form-boolean--type-checkbox"
+              bind:group={$moduleCategoryFilter}
+              on:change={onSelectCategory}
+              on:blur={onBlur}
+              on:keydown={onKeyDown}
+              value={dt.id}
+            />
+            <label for={dt.id} class="pb-filter__checkbox-label-txt">
+              {dt.name}
+            </label>
+          </div>
+        {/each}
       </div>
-    {/await}
-  </fieldset>
-</section>
+    </div>
+  {/await}
+</div>

tests/modules/project_browser_test/src/Plugin/ProjectBrowserSource/ProjectBrowserTestMock.php

@@ -353,21 +353,21 @@ class ProjectBrowserTestMock extends ProjectBrowserSourceBase {
       TRUE,
       $this->t('Show projects covered by a security policy'),
       $this->t('Show all'),
-      $this->t('Security Advisory Coverage'),
+      $this->t('Security advisory coverage'),
       NULL,
     );
     $filters['maintenanceStatus'] = new BooleanFilter(
       TRUE,
       $this->t('Show actively maintained projects'),
       $this->t('Show all'),
-      $this->t('Maintenance Status'),
+      $this->t('Maintenance status'),
       NULL,
     );
     $filters['developmentStatus'] = new BooleanFilter(
       TRUE,
       $this->t('Show projects under active development'),
       $this->t('Show all'),
-      $this->t('Development Status'),
+      $this->t('Development status'),
       NULL,
     );
 

tests/src/FunctionalJavascript/ProjectBrowserUiTestJsonApi.php

@@ -472,12 +472,12 @@ class ProjectBrowserUiTestJsonApi extends WebDriverTestBase {
     // Drupal.org test mock defines only two filters (actively maintained filter
     // and security coverage filter).
     $assert_session->waitForElementVisible('css', '.search__form-filters-container');
-    $this->assertTrue($assert_session->waitForText('Maintenance Status'));
+    $this->assertTrue($assert_session->waitForText('Maintenance status'));
     $assert_session->waitForElementVisible('css', self::MAINTENANCE_OPTION_SELECTOR);
-    $this->assertTrue($assert_session->waitForText('Security Advisory Coverage'));
+    $this->assertTrue($assert_session->waitForText('Security advisory coverage'));
     $assert_session->waitForElementVisible('css', self::SECURITY_OPTION_SELECTOR);
     // Make sure no other filters are displayed.
-    $this->assertFalse($assert_session->waitForText('Development Status'));
+    $this->assertFalse($assert_session->waitForText('Development status'));
     $this->assertNull($assert_session->waitForElementVisible('css', self::DEVELOPMENT_OPTION_SELECTOR));
     $this->assertFalse($assert_session->waitForText('Filter by category'));
     // Make sure category filter element is not visible.

tests/src/Nightwatch/Tests/keyboardTest.js

@@ -195,7 +195,7 @@ module.exports = {
           'Assert category checkboxes are hidden again.',
         );
       assertFocus(
-        '.filter-group__filter-options:first-of-type .search__filter-select',
+        '.filter-group__filter-options:nth-child(2) .search__filter-select',
         'Assert that focus has moved to next filter drop-down.',
       );