feat: Carbonise dynamic list

packages/form-js-carbon-styles/src/carbon-styles.scss

@@ -401,6 +401,17 @@
         padding: 2px 0px;
       }
     }
+
+    &.fjs-form-field-dynamiclist button.fjs-repeat-render-add,
+    &.fjs-form-field-dynamiclist button .fjs-repeat-row-remove-icon-container {
+      color: var(--cds-text-on-color-disabled);
+
+      &:hover {
+        color: var(--cds-text-on-color-disabled);
+        background-color: transparent;
+        cursor: not-allowed;
+      }
+    }
   }
 }
 
@@ -1312,4 +1323,51 @@
   .fjs-table-nav-button {
     border-left: 1px solid var(--cds-border-subtle-02);
   }
+}
+
+// Dynamic lists ////////////
+
+
+.fjs-container .fjs-form-field-dynamiclist {
+  .fjs-repeat-row-container .fjs-repeat-row-remove-icon-container {
+    border-radius: 0;
+    color: var(--cds-button-danger-secondary);
+    min-width: rem(40);
+    min-height: rem(40);
+
+    &:hover {
+      color: var(--cds-text-on-color);
+      background-color: var(--cds-button-danger-hover);
+    }
+  }
+
+  .fjs-repeat-row-container .fjs-repeat-row-remove:focus-visible .fjs-repeat-row-remove-icon-container {
+    outline: 2px solid var(--cds-focus);
+    outline-offset: 1px;
+    border-radius: 0;
+  }
+
+  .fjs-repeat-render-footer {
+    padding-left: 8px;
+    padding-right: 8px;
+    margin-right: 0;
+  }
+
+  .fjs-repeat-render-add,
+  .fjs-repeat-render-collapse {
+    min-height: rem(40);
+    padding-inline-end: rem(15);
+
+    &:focus {
+      outline: 2px solid var(--cds-focus);
+      outline-offset: 1px;
+      border: none;
+      border-radius: 0;
+    }
+
+    &:hover {
+      color: var(--cds-link-primary-hover);
+      background-color: var(--cds-background-hover);
+    }
+  }
 }

packages/form-js-viewer/assets/form-js-base.css

@@ -1117,10 +1117,12 @@
 .fjs-container .fjs-repeat-row-container {
   display: flex;
   flex-direction: row;
+  gap: 1rem;
 }
 
 .fjs-container .fjs-repeat-row-rows {
   flex: 1;
+  margin-right: 1rem;
 }
 
 .fjs-container .fjs-repeat-row-container .fjs-repeat-row-remove {
@@ -1133,8 +1135,6 @@
   align-items: center;
   justify-content: center;
   padding: 0;
-  margin-left: 1rem;
-  margin-right: -1rem;
 }
 
 .fjs-container .fjs-repeat-row-container .fjs-repeat-row-remove:focus-visible {
@@ -1167,10 +1167,15 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
   padding: 12px 4px;
 }
 
+.fjs-container .fjs-repeat-render-footer.fjs-remove-allowed {
+  margin-right: 32px;
+  justify-content: space-between;
+}
+
 .fjs-container .fjs-repeat-render-footer button {
   background: none;
   border: none;

packages/form-js-viewer/src/features/repeatRender/RepeatRenderManager.js

@@ -12,6 +12,7 @@ import DeleteSvg from '../../render/components/form-fields/icons/Delete.svg';
 
 import { buildExpressionContext } from '../../util';
 import { useScrollIntoView } from '../../render/hooks';
+import classNames from 'classnames';
 
 export default class RepeatRenderManager {
 
@@ -115,7 +116,7 @@ export default class RepeatRenderManager {
   RepeatFooter(props) {
 
     const addButtonRef = useRef(null);
-    const { useSharedState, indexes, field: repeaterField } = props;
+    const { useSharedState, indexes, field: repeaterField, readonly, disabled } = props;
     const [ sharedRepeatState, setSharedRepeatState ] = useSharedState;
 
     const { data } = this._form._getState();
@@ -162,9 +163,14 @@ export default class RepeatRenderManager {
       offset: 20
     }, [ shouldScroll ]);
 
-    return <div className="fjs-repeat-render-footer" style={ repeaterField.allowAddRemove ? { marginRight: 32 } : { justifyContent: 'center' } }>
+    return <div
+      className={
+        classNames('fjs-repeat-render-footer', {
+          'fjs-remove-allowed':repeaterField.allowAddRemove
+        }) }
+    >
       {
-        showAdd ? <button class="fjs-repeat-render-add" type="button" ref={ addButtonRef } onClick={ onAddItem }>
+        showAdd ? <button readOnly={ readonly } disabled={ disabled || readonly } class="fjs-repeat-render-add" type="button" ref={ addButtonRef } onClick={ onAddItem }>
           <><AddSvg /> { 'Add new' }</>
         </button> : null
       }

packages/form-js-viewer/src/render/components/form-fields/DynamicList.js

@@ -8,7 +8,7 @@ import classNames from 'classnames';
 
 export default function DynamicList(props) {
 
-  const { field, domId } = props;
+  const { field, domId, readonly } = props;
   const { label, type, showOutline } = field;
 
   const {
@@ -18,7 +18,19 @@ export default function DynamicList(props) {
   const fullProps = { ...props, Empty };
 
   return (
-    <div className={ classNames(formFieldClasses(type), 'fjs-form-field-grouplike', { 'fjs-outlined' : showOutline }) } role="group" aria-labelledby={ domId }>
+    <div
+      className={
+        classNames(
+          formFieldClasses(type, { readonly }),
+          'fjs-form-field-grouplike',
+          {
+            'fjs-outlined' : showOutline
+          }
+        )
+      }
+      role="group"
+      aria-labelledby={ domId }
+    >
       <Label
         id={ domId }
         label={ label } />