From 1fce5a04ce9689209c9491fce92fc6008bd3af7a Mon Sep 17 00:00:00 2001
From: xjm <xjm@65776.no-reply.drupal.org>
Date: Fri, 8 Dec 2023 14:57:03 -0600
Subject: [PATCH] Issue #2519362 by Utkarsh_33, srishtiiee, lauriii, xjm,
 kostyashupenko, Frando, benjifisher, LewisNyman, rkoller, smustgrave, yoroy,
 worldlinemine, Emma Horrell, AaronMcHale, anushrikumari, NikMis, simohell,
 ckrina: Redesign the menu link add form to be less overwhelming

---
 core/modules/menu_ui/menu_ui.module           | 11 ++++
 .../templates/menu-link-form.html.twig        | 18 ++++++
 core/themes/claro/claro.libraries.yml         |  6 +-
 core/themes/claro/claro.theme                 | 62 ++++++++++++++++++-
 .../{node-add.css => form-two-columns.css}    | 14 ++---
 ...add.pcss.css => form-two-columns.pcss.css} | 14 ++---
 .../templates/form/form-two-columns.html.twig | 20 ++++++
 .../claro/templates/menu-link-form.html.twig  | 32 ++++++++++
 .../claro/templates/node-edit-form.html.twig  | 34 +++++-----
 .../templates/admin/menu-link-form.html.twig  | 16 +++++
 10 files changed, 188 insertions(+), 39 deletions(-)
 create mode 100644 core/modules/menu_ui/templates/menu-link-form.html.twig
 rename core/themes/claro/css/layout/{node-add.css => form-two-columns.css} (68%)
 rename core/themes/claro/css/layout/{node-add.pcss.css => form-two-columns.pcss.css} (62%)
 create mode 100644 core/themes/claro/templates/form/form-two-columns.html.twig
 create mode 100644 core/themes/claro/templates/menu-link-form.html.twig
 create mode 100644 core/themes/stable9/templates/admin/menu-link-form.html.twig

diff --git a/core/modules/menu_ui/menu_ui.module b/core/modules/menu_ui/menu_ui.module
index 0349a38b3c05..568f22fc4f67 100644
--- a/core/modules/menu_ui/menu_ui.module
+++ b/core/modules/menu_ui/menu_ui.module
@@ -455,3 +455,14 @@ function menu_ui_system_breadcrumb_alter(Breadcrumb $breadcrumb, RouteMatchInter
     }
   }
 }
+
+/**
+ * Implements hook_theme().
+ */
+function menu_ui_theme(): array {
+  return [
+    'menu_link_form' => [
+      'render element' => 'form',
+    ],
+  ];
+}
diff --git a/core/modules/menu_ui/templates/menu-link-form.html.twig b/core/modules/menu_ui/templates/menu-link-form.html.twig
new file mode 100644
index 000000000000..50a82923e7dd
--- /dev/null
+++ b/core/modules/menu_ui/templates/menu-link-form.html.twig
@@ -0,0 +1,18 @@
+{#
+/**
+ * @file
+ * Default theme implementation for menu_link_form.
+ *
+ * Two-column template for the menu link add/edit form.
+ *
+ * This template will be used when a menu link form specifies
+ * 'menu_link_form' as its #theme callback. Otherwise, by default,
+ * menu_link add/edit forms will be themed by form.html.twig.
+ *
+ * Available variables:
+ * - form: The menu link add/edit form.
+ *
+ * @ingroup themeable
+ */
+#}
+{{ form }}
diff --git a/core/themes/claro/claro.libraries.yml b/core/themes/claro/claro.libraries.yml
index 7a55c1749f06..718bbf6ec448 100644
--- a/core/themes/claro/claro.libraries.yml
+++ b/core/themes/claro/claro.libraries.yml
@@ -77,13 +77,11 @@ global-styling:
     # attached, therefore it is always attached.
     - core/drupal.touchevents-test
 
-node-form:
+form-two-columns:
   version: VERSION
   css:
     layout:
-      css/layout/node-add.css: {}
-  dependencies:
-    - node/form
+      css/layout/form-two-columns.css: {}
 
 maintenance-page:
   version: VERSION
diff --git a/core/themes/claro/claro.theme b/core/themes/claro/claro.theme
index f33e425c1659..b760ed3de079 100644
--- a/core/themes/claro/claro.theme
+++ b/core/themes/claro/claro.theme
@@ -664,7 +664,7 @@ function _claro_convert_link_to_action_link(array $link, $icon_name = NULL, $siz
  */
 function claro_form_node_form_alter(&$form, FormStateInterface $form_state) {
   $form['#theme'] = ['node_edit_form'];
-  $form['#attached']['library'][] = 'claro/node-form';
+  $form['#attached']['library'][] = 'claro/form-two-columns';
 
   $form['advanced']['#type'] = 'container';
   $form['advanced']['#accordion'] = TRUE;
@@ -676,6 +676,66 @@ function claro_form_node_form_alter(&$form, FormStateInterface $form_state) {
   $form['revision_information']['#attributes']['class'][] = 'entity-meta__revision';
 }
 
+/**
+ * Implements hook_form_BASE_FORM_ID_alter() for MenuLinkContentForm.
+ *
+ * Alters the menu_link_content_form by organizing form elements into different
+ * 'details' sections.
+ */
+function claro_form_menu_link_content_form_alter(&$form, FormStateInterface $form_state) {
+  $form['#theme'] = ['menu_link_form'];
+  $form['#attached']['library'][] = 'claro/form-two-columns';
+  $form['advanced'] = [
+    '#type' => 'container',
+    '#weight' => 10,
+    '#accordion' => TRUE,
+  ];
+  $form['menu_parent']['#wrapper_attributes'] = ['class' => ['accordion__item', 'entity-meta__header']];
+  $form['menu_parent']['#prefix'] = '<div class="accordion">';
+  $form['menu_parent']['#suffix'] = '</div>';
+  $form['menu_parent']['#group'] = 'advanced';
+
+  $form['menu_link_display_settings'] = [
+    '#type' => 'details',
+    '#group' => 'advanced',
+    '#title' => t('Display settings'),
+    '#attributes' => ['class' => ['entity-meta__options']],
+    '#tree' => TRUE,
+    '#accordion' => TRUE,
+  ];
+  if (!empty($form['weight'])) {
+    $form['menu_link_display_settings']['weight'] = $form['weight'];
+    unset($form['weight'], $form['menu_link_display_settings']['weight']['#weight']);
+  }
+  if (!empty($form['expanded'])) {
+    $form['menu_link_display_settings']['expanded'] = $form['expanded'];
+    unset($form['expanded']);
+  }
+
+  if (isset($form['description'])) {
+    $form['menu_link_description'] = [
+      '#type' => 'details',
+      '#group' => 'advanced',
+      '#title' => t('Description'),
+      '#attributes' => ['class' => ['entity-meta__description']],
+      '#tree' => TRUE,
+      '#accordion' => TRUE,
+      'description' => $form['description'],
+    ];
+    unset($form['description']);
+  }
+}
+
+/**
+ * Implements hook_form_FORM_ID_alter() for MenuLinkEditForm.
+ *
+ * Alters the menu_link_edit form by organizing form elements into different
+ * 'details' sections.
+ */
+function claro_form_menu_link_edit_alter(&$form, FormStateInterface $form_state) {
+  claro_form_menu_link_content_form_alter($form, $form_state);
+}
+
 /**
  * Implements hook_form_BASE_FORM_ID_alter() for \Drupal\media\MediaForm.
  */
diff --git a/core/themes/claro/css/layout/node-add.css b/core/themes/claro/css/layout/form-two-columns.css
similarity index 68%
rename from core/themes/claro/css/layout/node-add.css
rename to core/themes/claro/css/layout/form-two-columns.css
index a2c8cce02107..0c737bce8072 100644
--- a/core/themes/claro/css/layout/node-add.css
+++ b/core/themes/claro/css/layout/form-two-columns.css
@@ -5,34 +5,34 @@
  * @preserve
  */
 /**
- * Layout overrides for node add/edit form.
+ * Layout overrides for the menu link add/edit form.
  */
 .layout-region {
   box-sizing: border-box;
 }
-.layout-region--node-footer .layout-region__content {
+.layout-region--footer .layout-region__content {
   margin-top: var(--space-l);
 }
 /**
  * Move to two column layout at wider widths.
  */
 @media (min-width: 61rem) {
-  .layout-node-form {
+  .layout-form {
     display: grid;
     grid-template-rows: auto 1fr;
-    grid-template-columns: minmax(0, 3fr) minmax(22.5rem, 1fr);
+    grid-template-columns: 3fr minmax(22.5rem, 1fr);
     gap: var(--space-l);
   }
 
-  .layout-region--node-main,
-  .layout-region--node-footer {
+  .layout-region--main,
+  .layout-region--footer {
     grid-column: 1;
     margin-inline: auto;
     width: min(52rem, 100%);
   }
 
   /* Push sidebar down to horizontal align with form section. */
-  .layout-region--node-secondary {
+  .layout-region--secondary {
     grid-row: span 2;
     margin-block-start: var(--space-l);
   }
diff --git a/core/themes/claro/css/layout/node-add.pcss.css b/core/themes/claro/css/layout/form-two-columns.pcss.css
similarity index 62%
rename from core/themes/claro/css/layout/node-add.pcss.css
rename to core/themes/claro/css/layout/form-two-columns.pcss.css
index 8286afab6269..ff458b1f3e49 100644
--- a/core/themes/claro/css/layout/node-add.pcss.css
+++ b/core/themes/claro/css/layout/form-two-columns.pcss.css
@@ -1,11 +1,11 @@
 /**
- * Layout overrides for node add/edit form.
+ * Layout overrides for the menu link add/edit form.
  */
 .layout-region {
   box-sizing: border-box;
 }
 
-.layout-region--node-footer .layout-region__content {
+.layout-region--footer .layout-region__content {
   margin-top: var(--space-l);
 }
 
@@ -13,22 +13,22 @@
  * Move to two column layout at wider widths.
  */
 @media (min-width: 61rem) {
-  .layout-node-form {
+  .layout-form {
     display: grid;
     grid-template-rows: auto 1fr;
-    grid-template-columns: minmax(0, 3fr) minmax(360px, 1fr);
+    grid-template-columns: 3fr minmax(360px, 1fr);
     gap: var(--space-l);
   }
 
-  .layout-region--node-main,
-  .layout-region--node-footer {
+  .layout-region--main,
+  .layout-region--footer {
     grid-column: 1;
     margin-inline: auto;
     width: min(832px, 100%);
   }
 
   /* Push sidebar down to horizontal align with form section. */
-  .layout-region--node-secondary {
+  .layout-region--secondary {
     grid-row: span 2;
     margin-block-start: var(--space-l);
   }
diff --git a/core/themes/claro/templates/form/form-two-columns.html.twig b/core/themes/claro/templates/form/form-two-columns.html.twig
new file mode 100644
index 000000000000..a9571788f030
--- /dev/null
+++ b/core/themes/claro/templates/form/form-two-columns.html.twig
@@ -0,0 +1,20 @@
+<div class="layout-form clearfix">
+  <div class="layout-region layout-region--main">
+    <div class="layout-region__content">
+      {% block main %}
+      {% endblock %}
+    </div>
+  </div>
+  <div class="layout-region layout-region--secondary">
+    <div class="layout-region__content">
+      {% block secondary %}
+      {% endblock %}
+    </div>
+  </div>
+  <div class="layout-region layout-region--footer">
+    <div class="layout-region__content">
+      {% block footer %}
+      {% endblock %}
+    </div>
+  </div>
+</div>
diff --git a/core/themes/claro/templates/menu-link-form.html.twig b/core/themes/claro/templates/menu-link-form.html.twig
new file mode 100644
index 000000000000..4183188536fd
--- /dev/null
+++ b/core/themes/claro/templates/menu-link-form.html.twig
@@ -0,0 +1,32 @@
+{#
+/**
+ * @file
+ * Theme override for a menu link form.
+ *
+ * Two-column template for the menu link add/edit form.
+ *
+ * This template will be used when a menu link form specifies
+ * 'menu_link_form' as its #theme callback. Otherwise, by default,
+ * menu_link add/edit forms will be themed by form.html.twig.
+ *
+ * Available variables:
+ * - form: The menu link add/edit form.
+ *
+ * @see claro_form_menu_link_content_form_alter()
+ */
+#}
+{% extends '@claro/form/form-two-columns.html.twig' %}
+{% block main %}
+  {{ form|without('advanced', 'menu_parent', 'actions') }}
+{% endblock %}
+
+{% block secondary %}
+<div class="entity-meta">
+  {{ form.menu_parent }}
+  {{ form.advanced }}
+</div>
+{% endblock %}
+
+{% block footer %}
+  {{ form.actions }}
+{% endblock %}
diff --git a/core/themes/claro/templates/node-edit-form.html.twig b/core/themes/claro/templates/node-edit-form.html.twig
index 78f1b4fce102..9503b9b7719c 100644
--- a/core/themes/claro/templates/node-edit-form.html.twig
+++ b/core/themes/claro/templates/node-edit-form.html.twig
@@ -6,7 +6,7 @@
  * Two column template for the node add/edit form.
  *
  * This template will be used when a node edit form specifies 'node_edit_form'
- * as its #theme callback.  Otherwise, by default, node add/edit forms will be
+ * as its #theme callback. Otherwise, by default, node add/edit forms will be
  * themed by form.html.twig.
  *
  * Available variables:
@@ -15,22 +15,16 @@
  * @see claro_form_node_form_alter()
  */
 #}
-<div class="layout-node-form clearfix">
-  <div class="layout-region layout-region--node-main">
-    <div class="layout-region__content">
-      {{ form|without('advanced', 'footer', 'actions') }}
-    </div>
-  </div>
-  <div class="layout-region layout-region--node-secondary">
-    <div class="layout-region__content">
-      {{ form.advanced }}
-    </div>
-  </div>
-  <div class="layout-region layout-region--node-footer">
-    <div class="layout-region__content">
-      <div class="divider"></div>
-      {{ form.footer }}
-      {{ form.actions }}
-    </div>
-  </div>
-</div>
+{% extends '@claro/form/form-two-columns.html.twig' %}
+{% block main %}
+  {{ form|without('advanced', 'footer', 'actions') }}
+{% endblock %}
+
+{% block secondary %}
+  {{ form.advanced }}
+{% endblock %}
+
+{% block footer %}
+  {{ form.footer }}
+  {{ form.actions }}
+{% endblock %}
diff --git a/core/themes/stable9/templates/admin/menu-link-form.html.twig b/core/themes/stable9/templates/admin/menu-link-form.html.twig
new file mode 100644
index 000000000000..1a12dc1f8da3
--- /dev/null
+++ b/core/themes/stable9/templates/admin/menu-link-form.html.twig
@@ -0,0 +1,16 @@
+{#
+/**
+ * @file
+ * Theme override for menu_link_form.
+ *
+ * Two-column template for the menu link add/edit form.
+ *
+ * This template will be used when a menu link form specifies
+ * 'menu_link_form' as its #theme callback. Otherwise, by default,
+ * menu_link add/edit forms will be themed by form.html.twig.
+ *
+ * Available variables:
+ * - form: The menu link add/edit form.
+ */
+#}
+{{ form }}
-- 
GitLab