fix(theme): allow to separate submit button in field group

p3ol · Mar 3, 2023 · 4d8f849 · 4d8f849
1 parent ee93797
commit 4d8f849
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/packages/react/lib/FieldGroup/index.stories.js b/packages/react/lib/FieldGroup/index.stories.js
@@ -58,3 +58,14 @@ export const withSelectFieldSuffix = () => (
     </FieldGroup>
   </FieldControl>
 );
+
+export const withMultipleElements = () => (
+  <FieldGroup>
+    <FieldAddon>€</FieldAddon>
+    <TextField />
+    <FieldAddon>@</FieldAddon>
+    <TextField />
+    <FieldAddon className="last">seconds</FieldAddon>
+    <Button className="primary submit">Update</Button>
+  </FieldGroup>
+);
diff --git a/packages/theme/lib/FieldGroup.sass b/packages/theme/lib/FieldGroup.sass
@@ -2,6 +2,7 @@
   display: flex
   align-items: stretch
   width: fit-content
+  gap: 2px
 
   .junipero.select-field .field
     position: relative
@@ -13,16 +14,15 @@
     position: relative
     z-index: 2
 
-    &:not(:first-child)
+    &:not(.last) + .junipero.button:not(.submit):disabled
       margin-left: 2px
 
+    &:not(:first-child):not(.submit):not(.first)
       &.button, .field
         border-top-left-radius: 0
         border-bottom-left-radius: 0
 
-    &:not(:last-child)
-      margin-right: 2px
-
+    &:not(:last-child):not(.submit):not(.last)
       &.button, .field
         border-top-right-radius: 0
         border-bottom-right-radius: 0
@@ -31,17 +31,23 @@
     position: relative
     z-index: 1
 
-    &:not(:first-child)
+    &:not(.last) + .junipero.button:not(.submit):disabled
+      margin-left: 2px
+
+    &:not(:first-child):not(.first)
       border-top-left-radius: 0
       border-bottom-left-radius: 0
 
-    &:not(:last-child)
+    &:not(:last-child):not(.last)
       border-top-right-radius: 0
       border-bottom-right-radius: 0
 
   .junipero.button
     box-shadow: 0 0 0 2px var(--main-color)
 
+    &.submit
+      margin-left: 10px
+
     &:hover
       &:not(:disabled):not(.disabled)
         box-shadow: 0 0 0 2px var(--hover-color)