Change main components naming

Created on 14 September 2023, about 1 year ago
Updated 20 September 2023, about 1 year ago

Problem/Motivation

As part of the 📌 Refactor CSS Needs work , we need to define which main components we'd need.

The main wrapper region (A) that will contain most of the things. We’ve been using this 3 options as interchangeable so far:

  • Navigation
  • Toolbar
  • Sidebar

The section “D” is the ”content” region of the component A. It can have menus placed in there like E (for example the Administriation menu) and F, that could be any block (like a title + text + CTA or the current Umami alert text that says it’s a site for testing purposes only).

Resolution

Rename the existing main component to:
A. .admin-toolbar
B. .admin-toolbar__header
C. .admin-toolbar__sticky-section <-- section or menu or bottom
D. .admin-toolbar__content
E. .admin-toolbar__item and/or .admin-toolbar__menu
D. .admin-toolbar__item

📌 Task
Status

Fixed

Version

1.0

Component

Code

Created by

🇪🇸Spain ckrina Barcelona

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @ckrina
  • 🇪🇸Spain ckrina Barcelona

    For A, I’d go with Toolbar, but my main concern is if in the future we add extra toolbars. My main pro point behind this is that it won’t contain only menus, but it will contain other custom block in the future. As con, it can collide with the existing toolbar name/classes and JS and saying to people “do not enable the 2 of them at the same time” won’t be enogh. Maybe as an alternative “main toolbar”?

    The second best option I think is sidebar: I don’t like it refers to where it is placed (in a side) because it can change it in the future, even if it’s only on the mobile.

    The 3rd option is “Navigation” and I don’t like this neither because it might end up having blocks that won’t only be “navigation” menus, as we can see with all the things people end up adding to the current toolbar.

  • 🇺🇸United States mherchel Gainesville, FL, US

    For A, I think we should use "toolbar". I don't think we should use "sidebar" as that's a typical region name in many themes. We also shouldn't use "navigation" because this isn't the primary navigation of the site.

    Maybe we can use "admin toolbar"?

  • 🇪🇸Spain ckrina Barcelona

    I thought admin toolbar too, but we might add other toolbars (like a top bar for the save button and other actions). So it'd mean we'd have other admin toolbars. That's why I said "main", assuming it'll keep being the "primary"... or even primary_toolbar?

    Plus the we will collide with the contrib module, and not sure if they will actually want to extend this new toolbar in any way and we'd be making their work more complicated (saying this without actually checking their code base). I think the CSS relies on the same .toolbar, but the JS adds behaviors with adminToolbar.

  • 🇺🇸United States mherchel Gainesville, FL, US

    We might add other toolbars (like a top bar for the save button and other actions)

    I would argue that this is the admin toolbar. Other toolbars will be something else (the top bar for save, etc would be "Action toolbar")

    Looking at the admin_toolbar css, it looks like they use .toolbar, .toolbar-tray-horizontal, .toolbar-menu. I think we can use .admin-toolbar.

    https://git.drupalcode.org/project/admin_toolbar/-/blob/3.x/css/admin.to...

  • 🇪🇸Spain ckrina Barcelona

    Updating the summary to reflect the agreement reached on Slack.

  • Status changed to Fixed about 1 year ago
  • 🇪🇸Spain ckrina Barcelona

    Discussed this on today's meeting: let's standardize on .admin-toolbar. We can change it later if needed.

  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024