Angular material form style inconsistencies

[nmoreaud]

Describe the bug

• With showUnfocusedDescription, checkbox and slider description don't have the right style (should be the same as "GeoJSON geometry object")
• Array of values are missing a margin, they are not well separated
• Description of array of values is not shown
• When adding array of value items, each item input content is not vertically centered
• Slider doesn't use the default value set in json schema

Can we add a general description label for array of values? Do you plan to add the missing controls in the angular version? Code: test-jsonforms.zip

Expected behavior

_

Steps to reproduce the issue

Slider: choose "gzip" compression

Screenshots

Which Version of JSON Forms are you using?

v3.6.0

Package

Angular Material Renderers

Additional context

No response

[nmoreaud]

Current SCSS workaround:

:host ::ng-deep {
  mat-tab-body {
    /* top of form */
    margin-top: 10px;
  }

  /* support multiline descriptions */
  .mat-mdc-form-field-hint-wrapper, .mat-mdc-form-field-error-wrapper {
    margin-top: 10px; 
    position: static;
  }
  .mat-mdc-form-field-bottom-align::before {
    content: none;
    display: none;
  }

  mat-hint {
    /* description */
    color: #555;
  }

  mat-form-field, .mat-mdc-table, .boolean-control {
    /* space between input fields */
    margin-bottom: 10px;
  }

  .mat-mdc-table {
    /* list of values */
    border-bottom-color: var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, 0.12)));
    border-bottom-width: var(--mat-table-row-item-outline-width, 1px);
    border-bottom-style: solid;
    box-shadow: none;
     
    &:has(tbody tr) {
      padding-bottom: 10px;
    }
    .mat-mdc-header-cell, .mat-mdc-cell {
      border-bottom: none;
    }
    .mat-mdc-row {
      mat-form-field, .mat-mdc-table, .boolean-control, .mat-mdc-form-field-hint-wrapper {
        /* reduce space between list values */
        margin-bottom: 0;
        margin-top: 0;
      }

      .mat-mdc-form-field-infix {
        /* lists inputs have no label: center their content vertically */
        padding-top: 16px;
      }
    }
  }

  horizontallayoutrenderer .horizontal-layout {
    /* in case of dynamic form (conditions), do not add extra space between fields */
    row-gap: 0;
  }

  .boolean-control {
    mat-hint, mat-error {
      /* checkbox description should be wrapped in mat-mdc-form-field-subscript-wrapper + mat-mdc-form-field-hint-wrapper */
      padding: 0 16px;

      font-family: var(--mat-form-field-subscript-text-font,var(--mat-sys-body-small-font) );
      line-height: var(--mat-form-field-subscript-text-line-height, var(--mat-sys-body-small-line-height));
      font-size: var(--mat-form-field-subscript-text-size, var(--mat-sys-body-small-size));
      letter-spacing: var(--mat-form-field-subscript-text-tracking, var(--mat-sys-body-small-tracking));
      font-weight: var(--mat-form-field-subscript-text-weight, var(--mat-sys-body-small-weight));
    }
  }
}

[lucas-koehler]

Hi @nmoreaud , thanks for reporting this and sharing a workaround for other community members ❤️

If you would like to contribute fixes to one or multiple of your points, we are happy to review a contribution!

Can we add a general description label for array of values?

Sounds reasonable.

Do you plan to add the missing controls in the angular version?

We currently have no plans of adding more controls ourselves. However, if you want to contribute general-purpose controls that might be useful for the whole community (e.g. see the react material renderers for inspiration), we are happy to accept contributions :)