Implement view switcher, button row, image row, and link row components

jonatansteller · jonatansteller · commit 95009639843b · 2025-10-14T12:16:11.000+02:00
diff --git a/Resources/Private/Components/Molecule/BoxedData/Item/Item.html b/Resources/Private/Components/Molecule/BoxedData/Item/Item.html
@@ -1,9 +1,10 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
     <f:argument name="id" type="string" optional="{true}" default="" description="ID of the boxed data item" />
     <f:argument name="label" type="string" optional="{false}" description="Label to apply to the boxed data item" />
+    <f:argument name="hidden" type="bool" optional="{true}" default="{false}" description="Whether the item is hidden" />
     <f:comment>The component commonly wraps around text and an optional "atom.button" with variants="{0: 'tinyicon', 1: 'unobserved', 2: 'sidelined'}".</f:comment>
 
-    <div id="{id}">
+    <div id="{id}" {f:if(condition: '{hidden} == \'{false}\'', then: 'hidden')}>
         <dt>{label -> f:format.raw()}</dt>
         <dd>
             <f:slot />
diff --git a/Resources/Private/Components/Molecule/BoxedList/Item/Item.html b/Resources/Private/Components/Molecule/BoxedList/Item/Item.html
@@ -3,9 +3,10 @@
     <f:argument name="url" type="string" optional="{false}" description="URL of the boxed list item" />
     <f:argument name="label" type="string" optional="{false}" description="Label of the boxed list item" />
     <f:argument name="context" type="string" optional="{false}" description="Context string of the boxed list item" />
+    <f:argument name="hidden" type="bool" optional="{true}" default="{false}" description="Whether the item is hidden" />
     <f:comment>The component commonly wraps around an optional "atom.button" with variants="{0: 'icon', 1: 'transparent', 2: 'sidelined'}".</f:comment>
 
-    <li id="{id}">
+    <li id="{id}" {f:if(condition: '{hidden} == \'{false}\'', then: 'hidden')}>
         <f:slot />
         <f:if condition="{url}">
             <a href="{url}">
diff --git a/Resources/Private/Components/Molecule/ButtonRow/Item/Item.html b/Resources/Private/Components/Molecule/ButtonRow/Item/Item.html
@@ -0,0 +1,9 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+    <f:argument name="id" type="string" optional="{true}" default="" description="ID of the button row item" />
+    <f:argument name="hidden" type="bool" optional="{true}" default="{false}" description="Whether the item is hidden" />
+    <f:comment>Individual row item to use within a "molecule.buttonRow.wrap", usually wraps around "atom.button"s.</f:comment>
+
+    <li id="{id}" {f:if(condition: '{hidden} == \'{false}\'', then: 'hidden')}>
+        <f:slot />
+    </li>
+</html>
diff --git a/Resources/Private/Components/Molecule/ButtonRow/Wrap/Wrap.html b/Resources/Private/Components/Molecule/ButtonRow/Wrap/Wrap.html
@@ -0,0 +1,12 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+    <f:argument name="id" type="string" optional="{true}" default="" description="ID of the button row" />
+    <f:argument name="variants" type="string[]" optional="{true}" default="{}" description="Type of button row to produce (separate, nowrap)" />
+    <f:argument name="areas" type="string[]" optional="{true}" default="{}" description="Area stylings to apply (slot-a, slot-b, slot-c, slot-d, align-left, align-left-above-900, align-left-below-900, align-left-above-600, align-left-below-600, align-center, align-center-above-900, align-center-below-900, align-center-above-600, align-center-below-600, align-right, align-right-above-900, align-right-below-900, align-right-above-600, align-right-below-600, align-top, align-middle, align-bottom)" />
+    <f:argument name="function" type="string" optional="{true}" default="" description="JavaScript function to apply (watchlist-serialisations)" />
+    <f:argument name="hidden" type="bool" optional="{true}" default="{false}" description="Whether the button row is hidden" />
+    <f:comment>Component to align buttons in a row via "molecule.buttonRow.item"s.</f:comment>
+
+    <menu id="{id}" class="mdlr-buttonrow {f:if(condition: '{area} != \'\'', then: 'mdlr-area-{area} ') -> f:for(each: '{areas}', as: 'area')} {f:if(condition: '{variant} != \'\'', then: 'mdlr-variant-{variant} ') -> f:for(each: '{variants}', as: 'variant')} {f:if(condition: '{function} != \'\'', then: 'mdlr-function-{function}')}" {f:if(condition: '{hidden} == \'{false}\'', then: 'hidden')}>
+        <f:slot />
+    </menu>
+</html>
diff --git a/Resources/Private/Components/Molecule/Dropdown/Item/Item.html b/Resources/Private/Components/Molecule/Dropdown/Item/Item.html
@@ -2,9 +2,10 @@
     <f:argument name="id" type="string" optional="{true}" default="" description="ID of the dropdown item" />
     <f:argument name="role" type="string" optional="{true}" default="option" description="Role of the dropdown item (option)" />
     <f:argument name="selected" type="bool" optional="{true}" default="{false}" description="Whether to set aria-selected to true" />
+    <f:argument name="hidden" type="bool" optional="{true}" default="{false}" description="Whether the item is hidden" />
     <f:comment>The component usually wraps around an "atom.button" with variants="{0: 'mini', 1: 'unobtrusive'}".</f:comment>
 
-    <li id="{id}" role="{role}" aria-selected="{f:if(condition: '{selected}', then: 'true', else: 'false')}">
+    <li id="{id}" role="{role}" aria-selected="{f:if(condition: '{selected}', then: 'true', else: 'false')}" {f:if(condition: '{hidden} == \'{false}\'', then: 'hidden')}>
         <f:slot />
     </li>
 </html>
diff --git a/Resources/Private/Components/Molecule/ImageRow/Item/Item.html b/Resources/Private/Components/Molecule/ImageRow/Item/Item.html
@@ -0,0 +1,9 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+    <f:argument name="id" type="string" optional="{true}" default="" description="ID of the image row item" />
+    <f:argument name="hidden" type="bool" optional="{true}" default="{false}" description="Whether the item is hidden" />
+    <f:comment>Individual row item to use within a "molecule.imageRow.wrap", wraps around "atom.imageLink"s.</f:comment>
+
+    <li id="{id}" {f:if(condition: '{hidden} == \'{false}\'', then: 'hidden')}>
+        <f:slot />
+    </li>
+</html>
diff --git a/Resources/Private/Components/Molecule/ImageRow/Wrap/Wrap.html b/Resources/Private/Components/Molecule/ImageRow/Wrap/Wrap.html
@@ -0,0 +1,12 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+    <f:argument name="id" type="string" optional="{true}" default="" description="ID of the image row" />
+    <f:argument name="variants" type="string[]" optional="{true}" default="{}" description="Type of image row to produce (-)" />
+    <f:argument name="areas" type="string[]" optional="{true}" default="{}" description="Area stylings to apply (slot-a, slot-b, slot-c, slot-d, align-left, align-left-above-900, align-left-below-900, align-left-above-600, align-left-below-600, align-center, align-center-above-900, align-center-below-900, align-center-above-600, align-center-below-600, align-right, align-right-above-900, align-right-below-900, align-right-above-600, align-right-below-600, align-top, align-middle, align-bottom)" />
+    <f:argument name="function" type="string" optional="{true}" default="" description="JavaScript function to apply (-)" />
+    <f:argument name="hidden" type="bool" optional="{true}" default="{false}" description="Whether the button row is hidden" />
+    <f:comment>Component to align images in a row via "molecule.imageRow.item"s.</f:comment>
+
+    <ul id="{id}" class="mdlr-imagerow {f:if(condition: '{area} != \'\'', then: 'mdlr-area-{area} ') -> f:for(each: '{areas}', as: 'area')} {f:if(condition: '{variant} != \'\'', then: 'mdlr-variant-{variant} ') -> f:for(each: '{variants}', as: 'variant')} {f:if(condition: '{function} != \'\'', then: 'mdlr-function-{function}')}" {f:if(condition: '{hidden} == \'{false}\'', then: 'hidden')}>
+        <f:slot />
+    </ul>
+</html>
diff --git a/Resources/Private/Components/Molecule/LinkRow/Item/Item.html b/Resources/Private/Components/Molecule/LinkRow/Item/Item.html
@@ -0,0 +1,15 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+    <f:argument name="id" type="string" optional="{true}" default="" description="ID of the link row item" />
+    <f:argument name="pageUid" type="int" optional="{false}" description="Page UID of the link row item" />
+    <f:argument name="active" type="bool" optional="{true}" default="{false}" description="Whether the nav item is currently active" />
+    <f:argument name="text" type="string" optional="{false}" description="Label of the link row item" />
+    <f:argument name="hint" type="string" optional="{true}" default="" description="Nav item title if different from the text" />
+    <f:argument name="hidden" type="bool" optional="{true}" default="{false}" description="Whether the item is hidden" />
+    <f:comment>Individual row item to use within a "molecule.linkRow.wrap".</f:comment>
+
+    <li id="{id}" {f:if(condition: '{hidden} == \'{false}\'', then: 'hidden')}>
+        <f:link.page pageUid="{pageUid}" class="{f:if(condition: '{active}', then:'mdlr-variant-active')}" title="{f:if(condition: '{hint} != \'\'', then: '{hint}', else: '{text}')}">
+            <span>{text}</span>
+        </f:link.page>
+    </li>
+</html>
diff --git a/Resources/Private/Components/Molecule/LinkRow/Wrap/Wrap.html b/Resources/Private/Components/Molecule/LinkRow/Wrap/Wrap.html
@@ -0,0 +1,12 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+    <f:argument name="id" type="string" optional="{true}" default="" description="ID of the link row" />
+    <f:argument name="variants" type="string[]" optional="{true}" default="{}" description="Type of link row to produce (-)" />
+    <f:argument name="areas" type="string[]" optional="{true}" default="{}" description="Area stylings to apply (slot-a, slot-b, slot-c, slot-d, align-left, align-left-above-900, align-left-below-900, align-left-above-600, align-left-below-600, align-center, align-center-above-900, align-center-below-900, align-center-above-600, align-center-below-600, align-right, align-right-above-900, align-right-below-900, align-right-above-600, align-right-below-600, align-top, align-middle, align-bottom)" />
+    <f:argument name="function" type="string" optional="{true}" default="" description="JavaScript function to apply (-)" />
+    <f:argument name="hidden" type="bool" optional="{true}" default="{false}" description="Whether the button row is hidden" />
+    <f:comment>Component to align links in a row via "molecule.linkRow.item"s.</f:comment>
+
+    <menu id="{id}" class="mdlr-linkrow {f:if(condition: '{area} != \'\'', then: 'mdlr-area-{area} ') -> f:for(each: '{areas}', as: 'area')} {f:if(condition: '{variant} != \'\'', then: 'mdlr-variant-{variant} ') -> f:for(each: '{variants}', as: 'variant')} {f:if(condition: '{function} != \'\'', then: 'mdlr-function-{function}')}" {f:if(condition: '{hidden} == \'{false}\'', then: 'hidden')}>
+        <f:slot />
+    </menu>
+</html>
diff --git a/Resources/Private/Components/Molecule/Pills/Item/Item.html b/Resources/Private/Components/Molecule/Pills/Item/Item.html
@@ -3,9 +3,10 @@
     <f:argument name="url" type="string" optional="{false}" description="URL of the pill item" />
     <f:argument name="text" type="string" optional="{false}" description="Label of the pill item" />
     <f:argument name="hint" type="string" optional="{true}" default="" description="Pill title if different from the text" />
+    <f:argument name="hidden" type="bool" optional="{true}" default="{false}" description="Whether the item is hidden" />
     <f:comment>Individual pill to be used within a "molecule.pills.wrap".</f:comment>
 
-    <li id="{id}">
+    <li id="{id}" {f:if(condition: '{hidden} == \'{false}\'', then: 'hidden')}>
         <a href="{url}" title="{f:if(condition: '{hint} != \'\'', then: '{hint}', else: '{text}')}">
             <span>{text}</span>
         </a>
diff --git a/Resources/Private/Components/Molecule/ViewSwitcher/Item/Item.html b/Resources/Private/Components/Molecule/ViewSwitcher/Item/Item.html
@@ -0,0 +1,15 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+    <f:argument name="id" type="string" optional="{true}" default="" description="ID of the view switcher item" />
+    <f:argument name="pageUid" type="int" optional="{false}" description="Page UID of the view switcher item" />
+    <f:argument name="active" type="bool" optional="{true}" default="{false}" description="Whether the nav item is currently active" />
+    <f:argument name="text" type="string" optional="{false}" description="Label of the view switcher item" />
+    <f:argument name="hint" type="string" optional="{true}" default="" description="Nav item title if different from the text" />
+    <f:argument name="hidden" type="bool" optional="{true}" default="{false}" description="Whether the item is hidden" />
+    <f:comment>Individual navigation item to use within a "molecule.viewSwitcher.wrap".</f:comment>
+
+    <li id="{id}" {f:if(condition: '{hidden} == \'{false}\'', then: 'hidden')}>
+        <f:link.page pageUid="{pageUid}" class="{f:if(condition: '{active}', then:'mdlr-variant-active')}" title="{f:if(condition: '{hint} != \'\'', then: '{hint}', else: '{text}')}">
+            <span>{text}</span>
+        </f:link.page>
+    </li>
+</html>
diff --git a/Resources/Private/Components/Molecule/ViewSwitcher/Wrap/Wrap.html b/Resources/Private/Components/Molecule/ViewSwitcher/Wrap/Wrap.html
@@ -0,0 +1,11 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+    <f:argument name="id" type="string" optional="{true}" default="" description="ID of the view switcher" />
+    <f:argument name="variants" type="string[]" optional="{true}" default="{}" description="Type of view switcher to produce (-)" />
+    <f:argument name="areas" type="string[]" optional="{true}" default="{}" description="Area stylings to apply (slot-a, slot-b, slot-c, slot-d, align-left, align-left-above-900, align-left-below-900, align-left-above-600, align-left-below-600, align-center, align-center-above-900, align-center-below-900, align-center-above-600, align-center-below-600, align-right, align-right-above-900, align-right-below-900, align-right-above-600, align-right-below-600, align-top, align-middle, align-bottom)" />
+    <f:argument name="function" type="string" optional="{true}" default="" description="JavaScript function to apply (-)" />
+    <f:comment>Main navigation component that wraps around "molecule.viewSwitcher.item"s.</f:comment>
+
+    <menu id="{id}" class="mdlr-viewswitcher {f:if(condition: '{area} != \'\'', then: 'mdlr-area-{area} ') -> f:for(each: '{areas}', as: 'area')} {f:if(condition: '{variant} != \'\'', then: 'mdlr-variant-{variant} ') -> f:for(each: '{variants}', as: 'variant')} {f:if(condition: '{function} != \'\'', then: 'mdlr-function-{function}')}">
+        <f:slot />
+    </menu>
+</html>
diff --git a/Resources/Public/Css/mdlr.css b/Resources/Public/Css/mdlr.css
@@ -1022,11 +1022,7 @@ p.mdlr-attribution:hover {
     color: var(--mdlr-color-primary-main-text);
 }
 
-/* Hidden and tacit */
-
-.mdlr-variant-hidden { /* Removed from DOM and screenreaders */
-    display: none !important;
-}
+/* Tacit */
 
 .mdlr-variant-tacit { /* Merely visually hidden */
     position: absolute !important;
@@ -1215,7 +1211,6 @@ ul.mdlr-linkrow {
 
 /* Image row */
 
-ol.mdlr-imagerow,
 ul.mdlr-imagerow {
     display: flex;
     align-items: center;
@@ -1234,6 +1229,10 @@ menu.mdlr-buttonrow {
     gap: calc(0.5 * var(--mdlr-spacing-padding-vertical)) var(--mdlr-spacing-thin);
 }
 
+menu.mdlr-buttonrow[hidden] {
+    display: none;
+}
+
 menu.mdlr-buttonrow.mdlr-variant-separate {
     gap: var(--mdlr-spacing-extralarge);
 }
diff --git a/Resources/Public/JavaScript/mdlr.js b/Resources/Public/JavaScript/mdlr.js
@@ -711,11 +711,11 @@ function mdlrWatchlistView() {
 
         // Either hide empty note if the list has items
         if(Object.keys(watchlist).length > 0) {
-            watchlistEmpty.classList.add('mdlr-variant-hidden');
+            watchlistEmpty.hidden = true;
 
             // Show serialisations
             for(const watchlistSerialisation of watchlistSerialisations) {
-                watchlistSerialisation.classList.remove('mdlr-variant-hidden');
+                watchlistSerialisation.hidden = false;
             }
 
             // Build list
@@ -785,9 +785,9 @@ function mdlrWatchlistView() {
 
         // Or only show note if the list is empty
         } else {
-            watchlistEmpty.classList.remove('mdlr-variant-hidden');
+            watchlistEmpty.hidden = false;
             for(const watchlistSerialisation of watchlistSerialisations) {
-                watchlistSerialisation.classList.add('mdlr-variant-hidden');
+                watchlistSerialisation.hidden = true;
             }
         }
     }
