Tweaked the previous feature

Author: javiereguiluz

assets/css/easyadmin-theme/base.scss

@@ -344,6 +344,29 @@ body.ea-mobile-sidebar-visible .main-sidebar {
     margin: 0;
     padding: 15px 17px 15px 20px;
 }
+.content-panel-header.collapsible {
+    padding: 0;
+}
+.content-panel-header.collapsible > a {
+    color: inherit;
+    display: block;
+    padding: 15px 17px 15px 20px;
+}
+.content-panel-header.collapsible.with-help > a {
+    padding: 15px 17px 1px 20px;
+}
+.content-panel-header.collapsible .collapse-icon {
+    color: var(--color-primary);
+    margin-right: 5px;
+    transition: all .1s linear;
+}
+.content-panel-collapse:not(.collapsed) .collapse-icon {
+    transform: rotate(90deg);
+}
+.content-panel-header.collapsible.with-help .content-panel-header-help {
+    padding: 0 17px 15px 20px;
+}
+
 .content-panel-header-help {
     color: var(--gray-500);
     font-size: var(--font-size-base);

assets/css/easyadmin-theme/fields.scss

@@ -143,12 +143,3 @@
   max-height: 480px;
   overflow-y: auto;
 }
-
-// Collapsible panel
-.content-panel-collapse:not(.collapsed) .expand-icon {
-  display: none;
-}
-
-.content-panel-collapse.collapsed .collapse-icon {
-  display: none;
-}

src/Field/FormField.php

@@ -14,7 +14,6 @@ final class FormField implements FieldInterface
     use FieldTrait;
 
     public const OPTION_ICON = 'icon';
-
     public const OPTION_COLLAPSIBLE = 'collapsible';
     public const OPTION_COLLAPSED = 'collapsed';
 
@@ -53,15 +52,31 @@ public function setIcon(string $iconCssClass): self
 
     public function collapsible(bool $collapsible = true): self
     {
+        if (!$this->hasLabelOrIcon()) {
+            throw new \InvalidArgumentException(sprintf('The %s() method used in one of your panels requires that the panel defines either a label or an icon, but it defines none of them.', __METHOD__));
+        }
+
         $this->setCustomOption(self::OPTION_COLLAPSIBLE, $collapsible);
 
         return $this;
     }
 
-    public function collapsed(bool $collapsed = true): self
+    public function renderCollapsed(bool $collapsed = true): self
     {
+        if (!$this->hasLabelOrIcon()) {
+            throw new \InvalidArgumentException(sprintf('The %s() method used in one of your panels requires that the panel defines either a label or an icon, but it defines none of them.', __METHOD__));
+        }
+
+        $this->setCustomOption(self::OPTION_COLLAPSIBLE, true);
         $this->setCustomOption(self::OPTION_COLLAPSED, $collapsed);
 
         return $this;
     }
+
+    private function hasLabelOrIcon(): bool
+    {
+        // don't use empty() because the label can contain only white spaces (it's a valid edge-case)
+        return (null !== $this->dto->getLabel() && '' !== $this->dto->getLabel())
+            || null !== $this->dto->getCustomOption(self::OPTION_ICON);
+    }
 }

src/Resources/public/app.css

@@ -101,15 +101,18 @@
     {% set collapsed = field.customOption('collapsed') %}
     <div class="{{ field.cssClass }}">
         <div class="content-panel">
-            <div class="content-panel-header">
-                {% if field.customOption('icon') %}
-                    <i class="{{ field.customOption('icon') }}"></i>
-                {% endif %}
-                {{ field.label|raw }}
+            <div class="content-panel-header {{ collapsible ? 'collapsible' }} {{ field.help is not empty ? 'with-help' }}">
                 {% if collapsible %}
                     <a href="#content-{{ field.property }}" data-toggle="collapse" class="content-panel-collapse {{ collapsed ? 'collapsed' }}" aria-expanded="{{ collapsed ? 'false' : 'true' }}" aria-controls="content-{{ field.property }}">
-                        <i class="fa fa-plus-square expand-icon"></i>
-                        <i class="fa fa-minus-square collapse-icon"></i>
+                        <i class="fas fw fa-chevron-right collapse-icon"></i>
+                {% endif %}
+
+                        {% if field.customOption('icon') %}
+                            <i class="{{ field.customOption('icon') }}"></i>
+                        {% endif %}
+                        {{ field.label|raw }}
+
+                {% if collapsible %}
                     </a>
                 {% endif %}
 

src/Resources/public/app.rtl.css

@@ -371,15 +371,18 @@
         <div class="{{ panel_config.css_class ?? '' }}">
             <div class="content-panel">
                 {% if panel_has_header %}
-                    <div class="content-panel-header">
-                        {% if panel_config.icon|default(false) %}
-                            <i class="{{ panel_config.icon }}"></i>
-                        {% endif %}
-                        {{ panel_config.label|raw }}
+                    <div class="content-panel-header {{ collapsible ? 'collapsible' }} {{ panel_config.help|default(false) is not empty ? 'with-help' }}">
                         {% if collapsible %}
                             <a href="#content-{{ panel_name }}" data-toggle="collapse" class="content-panel-collapse {{ collapsed ? 'collapsed' }}" aria-expanded="{{ collapsed ? 'false' : 'true' }}" aria-controls="content-{{ panel_name }}">
-                                <i class="fa fa-plus-square expand-icon"></i>
-                                <i class="fa fa-minus-square collapse-icon"></i>
+                                <i class="fas fw fa-chevron-right collapse-icon"></i>
+                        {% endif %}
+
+                            {% if panel_config.icon|default(false) %}
+                                <i class="{{ panel_config.icon }}"></i>
+                            {% endif %}
+                            {{ panel_config.label|raw }}
+
+                        {% if collapsible %}
                             </a>
                         {% endif %}