Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UX] Disabling tabs #209

Open
wants to merge 2 commits into
base: 5.x
Choose a base branch
from

Conversation

andersonjeccel
Copy link
Contributor

Docs about not hiding things when you can disable and how to do it, specifically tabs for now.
Not related to feature.
Using active voice instead of passive voice.

Copy link
Member

@RCheesley RCheesley left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've made an attempt to change the terminology to remove 'disabled' and instead use a descriptor of the state - inactive or unavailable. See what you think (can't do anything about the actual code classes I guess without making a PR to mautic/mautic).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See comment on heading nesting, this is using the wrong underlines.

H1 ###
H2 ***
H3 ===
H4 ---
H5 ~~~

@@ -0,0 +1,55 @@
Disabling interface elements
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Disabling interface elements
Making interface elements inactive or unavailable

Let's not use disabling and instead talk about what we're actually doing - making something inactive or unavailable.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're doing this: making users become not allowed to interact with that thing, effectively removing their ability of taking actions

in the code, we use:
cursor: not-allowed;
to show the red X cursor as a feedback

another way to say is that we're removing pointer events, as this attribute is also appended to ensure users have their most deep desire and wishes to interact completely blocked:
pointer-events: none;

how would you find better to call?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's great to pick 1 word to avoid having the synonyms (inactive or unavailable) there in every use

docs/design/disabling_elements.rst Outdated Show resolved Hide resolved

Disabling interface elements is a crucial aspect of user interface design, providing visual feedback and preventing user interaction when certain actions are not allowed.

Disabling tabs
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Disabling tabs
Changing tab states

Disabling tabs
--------------

We use the following CSS code to style disabled tabs:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
We use the following CSS code to style disabled tabs:
Use the following CSS code to style inactive or unavailable tabs:

docs/design/disabling_elements.rst Outdated Show resolved Hide resolved
* Modifies the background color of the tab to visually represent its disabled state.
* Disables click events on the tab using ``pointer-events: none``.

To dynamically disable tabs, we use JavaScript to add or remove the ``disabled`` class. Here's an example function:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
To dynamically disable tabs, we use JavaScript to add or remove the ``disabled`` class. Here's an example function:
To dynamically deactivate tabs, use JavaScript to add or remove the ``disabled`` class. Here's an example function:

docs/design/disabling_elements.rst Outdated Show resolved Hide resolved
* 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 disabled states for tabs:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
To implement disabled states for tabs:
To implement inactive or unavailable states for tabs:

2. Use JavaScript to toggle the ``disabled`` class on the appropriate ``<li>`` elements.

.. note::
Always use disabled states instead of hiding elements.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Always use disabled states instead of hiding elements.
Always use inactive or unavailable states instead of hiding elements.

@RCheesley RCheesley added documentation Improvements or additions to documentation pending-feedback labels Oct 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation pending-feedback
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants