search

vmware-clarity / core

Clarity is a scalable, accessible, customizable, open-source design system built with web components. Works with any JavaScript framework, created for enterprises, and designed to be inclusive.
https://clarity.design
MIT License
163 stars 42 forks source link

Angular: Alignment issue with reusable component inside CDSFormGroup and multiple CDSFormGroup's are required to resolve #141

Closed jyothi530 closed 2 years ago

jyothi530 commented 2 years ago

Describe the bug

  1. Alignment is distorted when a reusable component is included within <cds-form-group>.
  2. HTML5 elements used within a <cds-form-group> are not displayed and a lot of whitespace is shown. When displayed the alignment is not proper.
  3. Multiple <cds-form-group> elements are required to resolve the alignment issue where only one is required for the entire form.

How to reproduce

Please take a look at the stackblitz.

In the stackblitz, I am having a form with two reusable components, <general-info>, <description>. Elements defined with in the reusable components when rendered, the control width is shrinked. "Description", "ISO Location" alignments are different even though the html used to render both of them is same.

The Details section is separated with a <hr/> tag which is not rendered even though it is present in the DOM. Lot of white space seen. We can use <cds-divider> component, but the General section and the Details section divider is not aligned when using the reusable component.

We are able to resolve the issues by having reusable components containing their own <cds-form-group> and in the main form component, create multiple form groups before and after a reusable component. Now the problem is the spacing between form group elements is not proper and they look like overlapped (WorkRegion, ProjectManager. WayBill, Description, ISO Location).

Expected behavior

  1. We should be using a single form group element for the entire form instead of multiple form group elements. The reusable components should inherit the form group attributes defined on the parent instead of defining their own form group.
  2. Any HTML5 elements included within a form group should be rendered properly.
  3. Spacing, Alignments should be proper.

Versions

Clarity project:

Clarity version:

Framework:

Framework version: Angular 13

Device:

Additional notes

We built all of our forms using @clr/angular and wanted to migrate to @cds/core, @cds/angular. All the forms use similar reusable components and the structure as defined in the stackblitz. We started the POC for migration and these are some major issues observed. Appreciate your response on the issue

ashleyryan commented 2 years ago

At this time, only CDS form elements (or a custom element with a cds-control attribute on it) render inside of a cds-form-group.

Because of the CSS used to lay things out, you're right that having an angular component wrapper in the DOM tree messes up the layout. Some amount of working around the issue is possible, I made a few changes to your demo, such as adding cds-control to the h3 elements, and adding cds-layout="vertical gap:lg" to your custom components - this mimics the gap that is used in the cds-form-group.

https://stackblitz.com/edit/clarity-light-theme-clr13-cds6-gedwte

github-actions[bot] commented 2 years ago

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.