[open-formulieren/open-forms#4917] Updated buttons styling

open-formulieren · Jan 27, 2025 · 9f211a5 · 9f211a5
1 parent 49bd7cb
commit 9f211a5
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 55 deletions.
diff --git a/src/components/ButtonsToolbar/index.jsx b/src/components/ButtonsToolbar/index.jsx
@@ -25,10 +25,21 @@ const ButtonsToolbar = ({
 
   return (
     <>
-      <Toolbar modifiers={['mobile-reverse-order', 'bottom']}>
+      <Toolbar modifiers={['bottom']}>
         <ToolbarList>
-          {previousPage && (
-            <PreviousLink to={previousPage} onClick={onNavigatePrevPage} position="end" />
+          {showSubmitButton && (
+            <OFButton
+              type="submit"
+              appearance="primary-action-button"
+              name="next"
+              disabled={!canSubmitStep}
+            >
+              {isCheckingLogic ? (
+                <Loader modifiers={['centered', 'only-child', 'small', 'gray']} />
+              ) : (
+                <Literal name="nextText" />
+              )}
+            </OFButton>
           )}
         </ToolbarList>
         <ToolbarList>
@@ -44,19 +55,10 @@ const ButtonsToolbar = ({
               <Literal name="saveText" />
             </OFButton>
           )}
-          {showSubmitButton && (
-            <OFButton
-              type="submit"
-              appearance="primary-action-button"
-              name="next"
-              disabled={!canSubmitStep}
-            >
-              {isCheckingLogic ? (
-                <Loader modifiers={['centered', 'only-child', 'small', 'gray']} />
-              ) : (
-                <Literal name="nextText" />
-              )}
-            </OFButton>
+        </ToolbarList>
+        <ToolbarList>
+          {previousPage && (
+            <PreviousLink to={previousPage} onClick={onNavigatePrevPage} position="end" />
           )}
         </ToolbarList>
       </Toolbar>

diff --git a/src/components/SummaryConfirmation/index.jsx b/src/components/SummaryConfirmation/index.jsx
@@ -34,14 +34,7 @@ const SummaryConfirmation = ({submissionAllowed, prevPage, onPrevPage}) => {
           showWarnings={showStatementWarnings}
         />
       )}
-      <Toolbar modifiers={['mobile-reverse-order', 'bottom']}>
-        <ToolbarList>
-          {!!onPrevPage && (
-            <Link onClick={onPrevPage} to={prevPage}>
-              <Literal name="previousText" />
-            </Link>
-          )}
-        </ToolbarList>
+      <Toolbar modifiers={['bottom']}>
         <ToolbarList>
           {canSubmit ? (
             <OFButton
@@ -55,6 +48,13 @@ const SummaryConfirmation = ({submissionAllowed, prevPage, onPrevPage}) => {
             </OFButton>
           ) : null}
         </ToolbarList>
+        <ToolbarList>
+          {!!onPrevPage && (
+            <Link onClick={onPrevPage} to={prevPage}>
+              <Literal name="previousText" />
+            </Link>
+          )}
+        </ToolbarList>
       </Toolbar>
     </>
   );

diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
@@ -27,7 +27,7 @@ const Toolbar = ({children, modifiers = []}) => {
 Toolbar.propTypes = {
   children: PropTypes.node,
   modifiers: PropTypes.arrayOf(
-    PropTypes.oneOf(['start', 'bottom', 'reverse', 'compact', 'mobile-reverse-order', 'column'])
+    PropTypes.oneOf(['start', 'bottom', 'reverse', 'compact', 'column'])
   ),
 };
 

diff --git a/src/scss/components/_toolbar.scss b/src/scss/components/_toolbar.scss
@@ -7,6 +7,7 @@
 
 .#{prefix(toolbar)} {
   display: flex;
+  flex-direction: column;
   align-items: flex-start;
   justify-content: space-between;
   position: relative;
@@ -21,6 +22,10 @@
 
   @include bem.modifier('bottom') {
     @include margin(true, $properties: margin-top);
+
+    .openforms-toolbar__list {
+      margin-block-end: 10px;
+    }
   }
 
   @include bem.modifier('reverse') {
@@ -45,31 +50,6 @@
       }
     }
 
-    @include bem.modifier('mobile-reverse-order') {
-      display: flex;
-      flex-direction: column-reverse;
-      margin-top: $typography-margin-text;
-
-      > * {
-        width: 100%;
-      }
-
-      @include bem.element('list') {
-        flex-direction: column-reverse;
-        &:not(:last-child) {
-          margin: $typography-margin-text 0 0 0;
-        }
-      }
-
-      @include bem.element('list-item') {
-        @include margin(auto, $properties: margin-bottom, $value-mobile: 0);
-        @include margin(auto, $properties: margin-top, $value-mobile: $typography-margin-list);
-        &:last-child {
-          padding-bottom: 0 !important;
-        }
-      }
-    }
-
     @include bem.element('list') {
       @include margin(auto, $properties: margin-bottom);
     }
@@ -86,8 +66,8 @@
   }
 
   @include bem.element('list') {
-    @include responsive(flex-direction, column, column, row);
     display: flex;
+    flex-direction: column;
     justify-content: flex-end;
     list-style: none;
     margin: 0;
@@ -104,10 +84,6 @@
     @include rows(1, 'min-height');
     display: flex;
     align-items: center;
-
-    @include laptop {
-      @include margin($properties: margin-right);
-    }
   }
 
   @include breakpoint($max: $breakpoint-laptop) {