-
Notifications
You must be signed in to change notification settings - Fork 29
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
base: 5.x
Are you sure you want to change the base?
[UX] Disabling tabs #209
Conversation
There was a problem hiding this 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).
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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
|
||
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Disabling tabs | |
Changing tab states |
Disabling tabs | ||
-------------- | ||
|
||
We use the following CSS code to style disabled tabs: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We use the following CSS code to style disabled tabs: | |
Use the following CSS code to style inactive or unavailable tabs: |
* 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: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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: |
* 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: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Always use disabled states instead of hiding elements. | |
Always use inactive or unavailable states instead of hiding elements. |
Co-authored-by: Ruth Cheesley <[email protected]>
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.