Merge pull request #16374 from craftcms/feature/fld-huds

Go all-in on HUDs for field layout designers’ element libraries

CHANGELOG-WIP.md

@@ -12,6 +12,7 @@
 - Improved how fields are sized in responsive field layouts. ([#16303](https://github.com/craftcms/cms/pull/16303))
 - Entry indexes now only show table column options and sort options for custom fields associated with the selected sections/entry types within custom entry sources’ conditions.
 - Structure views are now available to element indexes on mobile browsers. ([#16190](https://github.com/craftcms/cms/discussions/16190))
+- Heads-up displays now reposition themselves on window scroll.
 
 ### Accessibility
 - Improved the accessibility of Checkboxes and Radio Buttons fields that allow custom options. ([#16080](https://github.com/craftcms/cms/pull/16080))
@@ -36,6 +37,9 @@
 - The Updates utility now shows an action menu for each plugin, with “Copy plugin handle” and “Copy package name” options. ([#16281](https://github.com/craftcms/cms/discussions/16281))
 - The Queue Manager utility now shows jobs’ class names. ([#16228](https://github.com/craftcms/cms/pull/16228))
 - Improved the wording of field instance action labels. ([#16261](https://github.com/craftcms/cms/discussions/16261))
+- Field layout designers no longer show the element library in a persisting sidebar. Instead, tabs always show “Add” buttons, which open the element library within a heads-up display. ([#16374](https://github.com/craftcms/cms/pull/16374))
+- It’s now possible to add new field layout elements to tabs by clicking/tapping or pressing <kbd>Return</kbd>/<kbd>Spacebar</kbd> on them. ([#16374](https://github.com/craftcms/cms/pull/16374))
+- After creating a new field from a field layout designer, the field is now immediately added to the field layout tab. ([#16374](https://github.com/craftcms/cms/pull/16374))
 - Templates rendered for “Template” field layout UI elements can now call control panel template functions like `elementChip()` and `elementCard()`. ([#16267](https://github.com/craftcms/cms/issues/16267))
 - “Template” field layout UI elements now show suggestions for the Template input.
 - Improved the error output for nested elements when they can’t be resaved via `resave` commands.
@@ -128,3 +132,4 @@
 - Fixed a bug where `craft\config\GeneralConfig::safeMode()` set Safe Mode to `false` by default.
 - Fixed a bug where embedded element index filter HUDs were including condition rules for fields that weren’t applicable to the nested elements. ([#16289](https://github.com/craftcms/cms/discussions/16289))
 - Fixed a bug where element queries were ignoring params for custom fields that weren’t involved with the query, rather than returning zero results.
+- Fixed a bug where opening heads-up displays could cause the page to scroll to the focused element. 

src/helpers/Cp.php

@@ -2850,7 +2850,6 @@ private static function _setLayoutOnElements(array $elements, FieldLayout $field
      */
     private static function _fldTabHtml(FieldLayoutTab $tab, bool $customizable): string
     {
-        $menuId = sprintf('menu-%s', mt_rand());
         return
             Html::beginTag('div', [
                 'class' => 'fld-tab',
@@ -2871,11 +2870,6 @@ private static function _fldTabHtml(FieldLayoutTab $tab, bool $customizable): st
             implode('', array_map(fn(FieldLayoutElement $element) => self::layoutElementSelectorHtml($element, false), $tab->getElements())) .
             Html::button(Craft::t('app', 'Add'), [
                 'class' => ['btn', 'add', 'icon', 'dashed', 'fullwidth', 'fld-add-btn'],
-                'aria' => ['controls' => $menuId],
-            ]) .
-            Html::tag('div', options: [
-                'id' => $menuId,
-                'class' => ['menu', 'menu--disclosure', 'fld-library-menu'],
             ]) .
             Html::endTag('div') . // .fld-tabcontent
             Html::endTag('div'); // .fld-tab

src/web/assets/cp/src/css/_fld.scss

@@ -4,7 +4,7 @@
 
 $base: 24px;
 $tabPadding: 14px;
-$tabWidth: $base * 11;
+$tabWidth: $base * 12;
 $gridColor: var(--gray-100);
 
 @mixin workspace-bg {
@@ -25,7 +25,6 @@ $gridColor: var(--gray-100);
   @include mixins.input-styles;
   overflow: hidden;
   box-shadow: none;
-  padding-inline-end: $tabWidth + 1;
   min-height: 500px;
 
   .errors > & {
@@ -34,6 +33,7 @@ $gridColor: var(--gray-100);
 
   .fld-workspace {
     flex: 1;
+    max-width: 100%;
     border-start-start-radius: calc(var(--small-border-radius) - 1px);
     border-start-end-radius: 0;
     border-end-end-radius: 0;
@@ -51,20 +51,16 @@ $gridColor: var(--gray-100);
     }
   }
 
-  &:not(:has(.fld-library)) {
-    padding-inline-end: 0;
-
-    .fld-workspace {
-      padding-inline-end: $base;
-    }
+  .fld-library {
+    display: none;
   }
+}
 
-  .fld-library {
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-end: 0;
-    height: 100%;
-    width: $tabWidth + 1;
+.fld-library-hud {
+  width: $tabWidth - 1;
+  max-width: 100%;
+
+  .main {
     padding: $tabPadding;
   }
 }
@@ -73,13 +69,6 @@ $gridColor: var(--gray-100);
   background-color: var(--gray-050);
 }
 
-.fld-library-menu {
-  width: $tabWidth;
-  min-height: 200px;
-  margin-inline-start: $tabPadding * -1;
-  padding: $tabPadding;
-}
-
 .fld-library {
   display: flex;
   flex-direction: column;
@@ -119,15 +108,19 @@ $gridColor: var(--gray-100);
 
 .layoutdesigner .fld-library,
 .fld-tab .tabs .tab,
-.fld-tab .fld-tabcontent,
-.fld-new-tab-btn,
-.fld-new-tab-btn:hover {
+.fld-tab .fld-tabcontent {
   background-color: var(--white);
   box-shadow:
     0 0 0 1px color.adjust(mixins.$grey900, $alpha: -0.9),
     0 2px 5px -2px color.adjust(mixins.$grey900, $alpha: -0.8);
 }
 
+.fld-new-tab-btn {
+  --button-bg: var(--white);
+  --button-shadow: 0 0 0 1px #{color.adjust(mixins.$grey900, $alpha: -0.9)},
+    0 2px 5px -2px #{color.adjust(mixins.$grey900, $alpha: -0.8)};
+}
+
 .fld-tab .settings::before,
 .fld-element .settings::before {
   margin-block-start: -2px;
@@ -144,6 +137,7 @@ $gridColor: var(--gray-100);
 
 .fld-tab {
   width: $tabWidth + $base;
+  max-width: 100%;
   padding-inline: 0 $base + 1;
   padding-block: 0 $base;
   box-sizing: border-box;
@@ -192,10 +186,6 @@ $gridColor: var(--gray-100);
         margin-block-start: var(--s);
       }
     }
-
-    .fld-add-btn:not([aria-expanded='true']) {
-      display: none;
-    }
   }
 
   &.fld-insertion {
@@ -252,7 +242,7 @@ $gridColor: var(--gray-100);
     color: var(--medium-text-color);
     background-color: var(--gray-100);
 
-    &:not(.draghelper) {
+    &:not(.draghelper, :focus) {
       box-shadow: none;
     }
 
@@ -387,28 +377,6 @@ $gridColor: var(--gray-100);
   }
 }
 
-@container (width < #{$base + $tabWidth + $base + $tabWidth + 1}) {
-  .fld-container {
-    padding-inline-end: 0;
-
-    .fld-workspace {
-      padding-inline-end: $base;
-    }
-
-    & > .fld-library {
-      display: none;
-    }
-  }
-
-  .fld-tab {
-    .fld-tabcontent {
-      .fld-add-btn {
-        display: inline-flex !important;
-      }
-    }
-  }
-}
-
 // card view designer
 .card-view-designer {
   container: cvd / inline-size;