Verified Commit 39502435 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3362276 by bnjmnm, smustgrave: Use position: sticky for views sticky table header

parent a01ef884

core/tests/Drupal/KernelTests/Core/Theme/ClaroTableTest.php

0 → 100644
+41 −0
Original line number Diff line number Diff line 
<?php



namespace Drupal\KernelTests\Core\Theme;



use Drupal\KernelTests\KernelTestBase;



/**

 * Tests Claro specific table functionality.

 *

 * @group Theme

 */

class ClaroTableTest extends KernelTestBase {



  /**

   * {@inheritdoc}

   */

  protected static $modules = ['system'];



  /**

   * Confirm that Claro tables override use of the `sticky-enabled` class.

   */

  public function testThemeTableStickyHeaders() {

    // Enable the Claro theme.

    \Drupal::service('theme_installer')->install(['claro']);

    $this->config('system.theme')->set('default', 'claro')->save();

    $header = ['one', 'two', 'three'];

    $rows = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

    $table = [

      '#type' => 'table',

      '#header' => $header,

      '#rows' => $rows,

      '#sticky' => TRUE,

    ];

    $this->render($table);



    // Confirm that position-sticky is used instead of sticky-enabled.

    $this->assertNoRaw('sticky-enabled');

    $this->assertRaw('position-sticky');

  }



}

core/themes/claro/claro.theme

+5 −0
Original line number Diff line number Diff line
@@ -295,6 +295,11 @@ function claro_element_info_alter(&$type) { 
  if (isset($type['status_messages'])) {

    $type['status_messages']['#pre_render'][] = [ClaroPreRender::class, 'messagePlaceholder'];

  }



  // Add a pre-render to tables to use CSS for sticky positioning.

  if (isset($type['table'])) {

    $type['table']['#pre_render'][] = [ClaroPreRender::class, 'tablePositionSticky'];

  }

}



/**

core/themes/claro/css/components/tableselect.css

+6 −0
Original line number Diff line number Diff line
@@ -130,3 +130,9 @@ tr.selected td { 
    width: auto;

  }

}



.position-sticky thead {

  position: sticky;

  z-index: 500;

  top: var(--drupal-displace-offset-top);

}

core/themes/claro/css/components/tableselect.pcss.css

+6 −0
Original line number Diff line number Diff line
@@ -116,3 +116,9 @@ tr.selected td { 
    width: auto;

  }

}



.position-sticky thead {

  position: sticky;

  z-index: 500;

  top: var(--drupal-displace-offset-top);

}

core/themes/claro/src/ClaroPreRender.php

+12 −0
Original line number Diff line number Diff line
@@ -189,6 +189,17 @@ public static function messagePlaceholder(array $element) { 
    return $element;

  }



  /**

   * Prerender callback for table elements.

   */

  public static function tablePositionSticky(array $element) {

    if (isset($element['#attributes']['class']) && in_array('sticky-enabled', $element['#attributes']['class'])) {

      unset($element['#attributes']['class'][array_search('sticky-enabled', $element['#attributes']['class'])]);

      $element['#attributes']['class'][] = 'position-sticky';

    }

    return $element;

  }



  /**

   * {@inheritdoc}

   */
@@ -200,6 +211,7 @@ public static function trustedCallbacks() { 
      'container',

      'textFormat',

      'messagePlaceholder',

      'tablePositionSticky',

    ];

  }