Rewrite jQuery .show() and .hide()

Created on 26 August 2020, about 4 years ago
Updated 14 March 2024, 8 months ago

Problem/Motivation

The jQuery .show() and .hide() is used in a few places. It's also specifically mentioned in core/modules/system/css/components/hidden.module.css as a way to toggle hidden elements.

Proposed resolution

Provide an API to toggle visibility of elements. However, we should probably use either .hidden or [hidden] for determining the visibility. As we do that, we should make the CSS rule use !important on the display: none property to ensure that it doesn't get overridden accidentally by arbitrary rules.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

📌 Task
Status

Needs work

Version

11.0 🔥

Component
Javascript 

Last updated 2 days ago

Created by

🇫🇮Finland lauriii Finland

Live updates comments and jobs are added and updated live.
  • Needs subsystem maintainer review

    It is used to alert the maintainer(s) of a particular core subsystem that an issue significantly impacts their subsystem, and their signoff is needed (see the governance policy draft for more information). Also, if you use this tag, make sure the issue component is set to the correct subsystem. If an issue significantly impacts more than one subsystem, use needs framework manager review instead.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇷🇸Serbia finnsky

    I got same results in Chrome Firefox and Safari for that codepen.

    https://codepen.io/finnsky/pen/eYxgLQO

    `hidden` actually hide div with class CSS specificity.
    But failure in cascade selector and obviously when !important.

  • Status changed to Needs review about 1 year ago
  • 🇷🇸Serbia finnsky

    Hi all!

    From my point of view we should not optionally use these functions as such. And those scripts that continue to be used are given a warning. Perhaps less strict. So that these warnings can pass functional tests.

    For reliable hiding, I added [data-hidden] as suggested.

    And reworked layout-builder.js for an example of work.

    I also think that .show() and .hide() are not the only functions that can be handled this way. So I renamed the script.

    I need a review of the approach here

  • Status changed to Needs work 11 months ago
  • 🇺🇸United States smustgrave

    Seems to have open threads but appears to have a failure in 5277, can the other MR be closed or hidden?

  • First commit to issue fork.
  • Status changed to Needs review 9 months ago
  • 🇷🇺Russia kostyashupenko Omsk

    To test replace
    "lint:core-js-passing": "node ./node_modules/eslint/bin/eslint.js --quiet --config=.eslintrc.passing.json .",
    by
    "lint:core-js-passing": "node ./node_modules/eslint/bin/eslint.js --config=.eslintrc.passing.json .",

    and run yarn lint:core-js-passing

  • 🇺🇸United States smustgrave

    smustgrave changed the visibility of the branch 3167377-rewrite-jquery-.show to hidden.

  • 🇺🇸United States smustgrave

    smustgrave changed the visibility of the branch 11.x to hidden.

  • Status changed to Needs work 8 months ago
  • 🇺🇸United States smustgrave

    Hiding patches and old MRs for clarity

    Current MR 5277 appears to have a test failure and may need a rebase (maybe it fixes the test)

Production build 0.71.5 2024