feature #1860 Allow to define a tooltip title for actions that don't …

…display an icon (javiereguiluz)

This PR was merged into the 1.16.x-dev branch.

Discussion
----------

Allow to define a tooltip title for actions that don't display an icon

This finally fixes #1237. Now you have `label`, `title` and `icon` properties to combine them and display the actions exactly as you want.

Commits
-------

f39fb37 Allow to define a tooltip title for actions that don't display an icon

doc/book/actions-configuration.rst

@@ -226,7 +226,12 @@ Then, define any of the following options to customize the action:
   underscores only).
 * ``label``, is the text displayed in the button or link associated with the
   action. If not defined, the action label is the *humanized* version of its
-  ``name`` option.
+  ``name`` option. Set it to ``null`` or an empty string to hide it and only
+  display the associated icon.
+* ``title``, is the text used in the ``title`` HTML attribute of the ``<a>``
+  element associated with the action. Most of the times you can safely ignore
+  this option, but it's useful to display a helpful message when the action
+  hides its label and only displays its icon.
 * ``css_class``, is the CSS class or classes applied to the link or button used
   to render the action.
 * ``icon``, is the name of the FontAwesome icon displayed next to the link or
@@ -236,3 +241,62 @@ Then, define any of the following options to customize the action:
 * ``target``, is the value of the ``target`` HTML attribute applied to the button
   or link associated with the action (e.g. ``_blank`` to open the action in a
   new browser tab/window).
+
+Removing Action Labels and Displaying Just Icons
+------------------------------------------------
+
+By default, the actions showed in the ``list`` view only display their label
+(``Edit``, ``Show``, etc.):
+
+.. image:: ../images/easyadmin-listing-actions-label-only.png
+   :alt: Action Labels in Entity Listing
+
+Adding an icon for each action is as easy as defining their ``icon`` option:
+
+.. code-block:: yaml
+
+    easy_admin:
+        list:
+            actions:
+                - { name: 'show', icon: 'search' }
+                - { name: 'edit', icon: 'pencil' }
+        # ...
+
+This configuration makes the entity listing looks as follow:
+
+.. image:: ../images/easyadmin-listing-actions-label-and-icon.png
+   :alt: Action Labels and Icons in Entity Listing
+
+When displaying entities with lots of information, it may be useful to remove
+the action label and display just their icons. To do so, define an empty string
+for the ``label`` option or set its value to ``false``:
+
+.. code-block:: yaml
+
+    easy_admin:
+        list:
+            actions:
+                - { name: 'show', icon: 'search', label: '' }
+                - { name: 'edit', icon: 'pencil', label: '' }
+                # if you prefer, set labels to false
+                # - { name: 'show', icon: 'search', label: false }
+                # - { name: 'edit', icon: 'pencil', label: false }
+        # ...
+
+This configuration makes the entity listing looks as follow:
+
+.. image:: ../images/easyadmin-listing-actions-icon-only.png
+   :alt: Action Icons in Entity Listing
+
+Finally, when displaying only the action icon, it's useful to define the
+``title`` attribute to display it when the user moves the cursor over the action
+icon:
+
+.. code-block:: yaml
+
+    easy_admin:
+        list:
+            actions:
+                - { name: 'show', icon: 'search', label: '', title: 'Search' }
+                - { name: 'edit', icon: 'pencil', label: '', title: 'Edit' }
+        # ...

doc/tutorials/tips-and-tricks.rst

@@ -54,52 +54,6 @@ override the default ``layout.html.twig`` template and empty the
 Read the :ref:`Advanced Design Customization <list-search-show-advanced-design-configuration>`
 section to learn how to override default templates.
 
-Removing Action Labels and Displaying Just Icons
-------------------------------------------------
-
-By default, the actions showed in the ``list`` view table only display their
-label (``Edit``, ``Show``, etc.):
-
-.. image:: ../images/easyadmin-listing-actions-label-only.png
-   :alt: Action Labels in Entity Listing
-
-Adding an icon for each action is as easy as defining their ``icon`` option:
-
-.. code-block:: yaml
-
-    easy_admin:
-        list:
-            actions:
-                - { name: 'show', icon: 'search' }
-                - { name: 'edit', icon: 'pencil' }
-        # ...
-
-This configuration makes the entity listing looks as follow:
-
-.. image:: ../images/easyadmin-listing-actions-label-and-icon.png
-   :alt: Action Labels and Icons in Entity Listing
-
-When displaying entities with lots of information, it may be useful to remove
-the action label and display just their icons. To do so, define an empty string
-for the ``label`` option or set its value to ``false``:
-
-.. code-block:: yaml
-
-    easy_admin:
-        list:
-            actions:
-                - { name: 'show', icon: 'search', label: '' }
-                - { name: 'edit', icon: 'pencil', label: '' }
-                # if you prefer, set labels to false
-                # - { name: 'show', icon: 'search', label: false }
-                # - { name: 'edit', icon: 'pencil', label: false }
-        # ...
-
-This configuration makes the entity listing looks as follow:
-
-.. image:: ../images/easyadmin-listing-actions-icon-only.png
-   :alt: Action Icons in Entity Listing
-
 Making the Backend Use a Different Language Than the Public Website
 -------------------------------------------------------------------
 

src/Resources/views/default/includes/_actions.html.twig

@@ -7,7 +7,7 @@
         {% set action_href = path(action.name, request_parameters|merge({ action: action.name, id: item_id })) %}
     {% endif %}
 
-    <a class="{{ action.css_class|default('') }}" href="{{ action_href }}" target="{{ action.target }}">
+    <a class="{{ action.css_class|default('') }}" title="{{ action.title|default('') }}" href="{{ action_href }}" target="{{ action.target }}">
         {%- if action.icon %}<i class="fa fa-{{ action.icon }}"></i> {% endif -%}
         {%- if action.label is defined and not action.label is empty -%}
             {{ action.label|trans(arguments = trans_parameters|merge({ '%entity_id%': item_id }), domain = translation_domain) }}

tests/Controller/CustomizedBackendTest.php

@@ -91,9 +91,11 @@ public function testListViewItemActions()
     {
         $crawler = $this->requestListView();
 
-        $this->assertSame('Show', trim($crawler->filter('#main .table td.actions a')->eq(0)->text()));
-        $this->assertSame('Edit', trim($crawler->filter('#main .table td.actions a')->eq(1)->text()));
-        $this->assertSame('Delete', trim($crawler->filter('#main .table td.actions a')->eq(2)->text()));
+        $this->assertCount(15, $crawler->filter('#main .table td.actions a:contains("Show")'));
+        $this->assertCount(15, $crawler->filter('#main .table td.actions a:contains("Edit")'));
+        $this->assertCount(15, $crawler->filter('#main .table td.actions a:contains("Delete")'));
+        $this->assertCount(15, $crawler->filter('#main .table td.actions a[title="Custom Action 1"]'));
+        $this->assertCount(15, $crawler->filter('#main .table td.actions a[title="Custom Action 2"]:contains("Action 2")'));
     }
 
     public function testListViewTableIdColumn()
@@ -600,9 +602,11 @@ public function testSearchViewItemActions()
     {
         $crawler = $this->requestSearchView();
 
-        $this->assertSame('Show', trim($crawler->filter('#main .table td.actions a')->eq(0)->text()));
-        $this->assertSame('Edit', trim($crawler->filter('#main .table td.actions a')->eq(1)->text()));
-        $this->assertSame('Delete', trim($crawler->filter('#main .table td.actions a')->eq(2)->text()));
+        $this->assertCount(15, $crawler->filter('#main .table td.actions a:contains("Show")'));
+        $this->assertCount(15, $crawler->filter('#main .table td.actions a:contains("Edit")'));
+        $this->assertCount(15, $crawler->filter('#main .table td.actions a:contains("Delete")'));
+        $this->assertCount(15, $crawler->filter('#main .table td.actions a[title="Custom Action 1"]'));
+        $this->assertCount(15, $crawler->filter('#main .table td.actions a[title="Custom Action 2"]:contains("Action 2")'));
     }
 
     public function testSearchViewShowActionReferer()

tests/Fixtures/App/config/config_customized_backend.yml

@@ -88,6 +88,8 @@ easy_admin:
                     - 'show'
                     - { name: 'new', label: 'New %%entity_name%%', icon: 'plus-circle', css_class: 'custom_class_new' }
                     - { name: 'search', label: 'Look for %%entity_label%%', css_class: 'custom_class_search' }
+                    - { name: 'custom_action_1', label: '', title: 'Custom Action 1', icon: 'custom-icon-1' }
+                    - { name: 'custom_action_2', label: 'Action 2', title: 'Custom Action 2', icon: 'custom-icon-2' }
                 fields:
                     - 'id'
                     - { property: 'name', label: 'Label', css_class: 'custom_class_list' }