Merge pull request #209 from andersonjeccel/disabling-tabs

[UX] Disabling tabs

Author: RCheesley

docs/design/availability.rst

@@ -0,0 +1,55 @@
+Depicting availability of interface elements
+############################################
+
+The state of interface elements is a crucial aspect of user interface design, providing visual feedback and preventing interaction when certain actions aren't allowed.
+
+Working with tabs
+*****************
+
+Mautic uses the following CSS code to style tabs which aren't available for interaction:
+
+.. code-block:: css
+
+   .nav-tabs.nav-tabs-contained > li.disabled {
+     cursor: not-allowed;
+     color: var(--text-disabled);
+   }
+
+   .nav-tabs.nav-tabs-contained > li.disabled > a {
+     background-color: var(--button-disabled);
+     pointer-events: none;
+   }
+
+This CSS accomplishes the following:
+
+* Sets the cursor to ``not-allowed`` for tabs which can't be interacted with, indicating that interaction is prohibited.
+* Changes the text color to a predefined inactive state color.
+* Modifies the background color of the tab to visually represent its inactive state.
+* Prevent click events on the tab using ``pointer-events: none``.
+
+To dynamically deactivate tabs, use JavaScript to add or remove the ``disabled`` class. Here's an example function:
+
+.. code-block:: javascript
+
+   Mautic.togglePermissionVisibility = function () {
+       setTimeout(function () {
+           if (mQuery('#role_isAdmin_0').prop('checked')) {
+               mQuery('#permissions-tab').removeClass('disabled');
+           } else {
+               mQuery('#permissions-tab').addClass('disabled');
+           }
+       }, 10);
+   };
+
+This function:
+
+* Checks the state of a checkbox - ``#role_isAdmin_0``.
+* Adds or removes the ``disabled`` class from the permissions tab based on the checkbox state.
+
+To implement inactive states for tabs:
+
+1. Assign unique IDs to your tab elements.
+2. Use JavaScript to toggle the ``disabled`` class on the appropriate ``<li>`` elements.
+
+.. note::
+   Always use inactive states instead of hiding elements.

docs/index.rst

@@ -57,6 +57,7 @@ There are several ways to support Mautic other than contributing with code.
    :hidden:
 
    design/accordion
+   design/availability
    design/feedback
    design/labelling
    design/notifications