Contrib.social

Clean up Claro's tables/tablesort/tableselect CSS

Open on Drupal.org →
Created on 19 April 2025, 2 months ago

Problem/Motivation

Follow-up from 📌 Split tablesort.module.css out to its own library and attach it via tablesort Active .

Claro has several different files for table styling, but there is no clear separation between the files as to what's targeting what kind of table.

There are broadly three kinds of tables that get rendered by Drupal:

1. HTML table
2. HTML table with tablesort
3. HTML table with tableselect

These are styled by the following files:

css/components/tables.css
css/components/tableselect.css
css/classy/components/tablesort.css
css/components/tablesort-indicator.css

tables.css defines all of these styles, which afaict should be in tablesort.css:

.sortable-heading > a {
  display: block;
  padding-block: var(--space-xs);
  padding-inline: 0 1.5rem;
  -webkit-text-decoration: none;
  text-decoration: none;
  color: inherit;
}

.sortable-heading > a:focus,
.sortable-heading > a:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.sortable-heading > a:focus::before,
.sortable-heading > a:hover::before {
  border-color: inherit;
}

.sortable-heading > a:focus::after,
.sortable-heading > a:hover::after {
  opacity: 1;
}

.sortable-heading > a::before {
  position: absolute;
  z-index: 0;
  inset-block-start: 0;
  inset-inline-end: 1rem;
  inset-block-end: 0;
  inset-inline-start: 1rem;
  display: block;
  content: "";
  border-bottom: 0.125rem solid transparent;

.sortable-heading > a::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 1rem;
  width: 0.875rem;
  height: 1rem;
  margin-block-start: -0.5rem;
  content: "";
  opacity: 0.5;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z'    fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;
  background-size: contain;
}

[dir="rtl"] :is(.sortable-heading > a::after) {
  /* Horizontally flip the element. */
  transform: scaleX(-1);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1. 5z' fill='%23000f33'/%3e%3c/svg%3e");
}

@media (forced-colors: active) {
  [dir="rtl"] :is(.sortable-heading > a::after) {
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z'        fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;
  }
}

@media (forced-colors: active) {
  .sortable-heading > a::after {
    opacity: 1;
    background: linktext;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z'        fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;
  }
}

.sortable-heading.is-active > a {
  color: var(--color-absolutezero);
}

.sortable-heading.is-active > a::before {
  border-bottom: 0.1875rem solid var(--color-absolutezero);
}

.sortable-heading.is-active > a::after {
  content: none;
}

td.is-active {
  background: none;
}

Steps to reproduce

Proposed resolution

Move the tablesort-specific CSS to tablesort.css, manually test for regressions.

Additionally, we could audit for duplicated selectors and remove any rules that will never be used.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

📌 Task
Status

Active

Version

11.0 🔥

Component

Claro theme

Created by

🇬🇧United Kingdom catch

Live updates comments and jobs are added and updated live.
  • CSS

    It involves the content or handling of Cascading Style Sheets.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @catch
  • Comment 2 months ago →
    🇮🇳India sandip

    I am looking into it.

  • Merge request !11901Issue #3520057: Clean up Claro tables/tablesort/tableselect CSS. → (Open) created by Unnamed author
  • Pipeline finished with Success
    2 months ago
    Total: 507s
    #478387
  • Comment 2 months ago →
    🇮🇳India sandip

    Please review the changes.

    I removed this piece of code as i think we dont need this part and also tested in local.

    .sortable-heading > a:focus,
.sortable-heading > a:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
}
  • Comment 2 months ago →
    🇮🇳India snehal-chibde

    Hello @sandip, I have reviewed these changes on Drupal 11.x-dev, I see no regression but I have a question.
    Why are we placing the file tablesort.css in 'themes/claro/css/classy/components/tablesort.css' whereas we have all table related files such as table.css, tabledrag.css etc in 'themes/claro/css/components/tabledrag.css'? Ideally it should be placed in same components folder. Can you please check once.
    Added screenshots of tablesort part which is working fine.

  • Comment 2 months ago →
    🇮🇳India sandip

    Hi @snehal-chibde, your question sounds good to me.

    @catch, @nicxvan can you please guide here should i create tablesort.css inside claro/css/components folder or the above MR using claro/css/classy/components/tablesort.css is good to go ?

  • Comment about 2 months ago →
    needs-review-queue-bot

    The Needs Review Queue Bot → tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

    This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

    Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

  • First commit to issue fork.
  • Comment about 2 months ago →
    🇺🇸United States dcam

    Rebased MR 11901

  • Pipeline finished with Success
    about 2 months ago
    Total: 372s
    #495074
  • Comment 29 days ago →
    🇺🇸United States smustgrave

    Probably needs to be under components. I believe all the css under classy was from previous iterations where classy was a theme in Drupal.

  • Comment 26 days ago →
    🇮🇳India sandip

    Sure @smustgrave, I am working on it.

  • Pipeline finished with Success
    26 days ago
    Total: 494s
    #511932
  • Pipeline finished with Success
    26 days ago
    Total: 726s
    #511985
  • Comment 26 days ago →
    🇮🇳India sandip

    I have made the suggested changes please review the MR.

    One thing i noticed Do we still need to attach css/classy/components/tablesort.css to the drupal.tablesort library?
    I've added a tablesort.css under the components folder of the Claro theme and attached it to the same drupal.tablesort library. Just want to confirm whether the Classy version is still required.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024