Open
Description
Describe in detail the issue you're having.
I noticed that the implementation for datepicker.component.ts and datepicker-input.component.ts have quite some duplication in the template.
This results in the DOM with a structure like this
<!-- start datepicker.component.ts -->
<div class="cds--form-item">
<div class="cds--date-picker">
<div class="cds--date-picker-container">
<!-- start datepicker-input.component.ts -->
<div class="cds--form-item">
<div class="cds--date-picker">
<div class="cds--date-picker-container">
<label>...</label>
<div class="cds--date-picker-input__wrapper>
<span>
<input />
</span>
</div>
</div>
</div>
</div>
<!-- end datepicker-input.component.ts -->
</div>
</div>
</div>
<!-- end datepicker.component.ts -->
This is a pretty bloated DOM structure and can be simplified a lot. The react implementation is a lot simpler and has not class duplication.
I created this table as comparison, hope this works to show the problem:
| component | angular | react |
|---|---|---|
| datepicker | .cds--form-item > .cds--date-picker > .cds--date-picker--container |
.cds--form-item > .cds--date-picker |
| datepicker-input | .cds--form-item > .cds--date-picker > .cds--date-picker--container |
.cds--date-picker--container |
Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
Milestone
Relationships
Development
Participants
Activity
[-]DatePicker and DatePickerInput share too many elements/classes[/-][+]DatePicker and DatePickerInput implementation duplicates too many classes[/+]klaascuvelier commentedon Mar 18, 2024
I just found out possible 2 reasons why it might be implemented this way:
datepickercomponent does not supportsimpleas a type, instead thedatepicker-inputis used directly. In the React implement thedatepicker-inputis not used directly but only throughdatepicker.Changing this implementation to align with React and to remove the duplication would result in a breaking change.
rangetype and having thecds--date-picker--containerclass inside thedatepicker-inputthere are no 2 elements withcds--date-picker--containernext to eachother in the DOM, so the carbon/styles for aligning 2 inputs next to each other don't apply (because of the wrappingcds-datepicker-inputelement that wraps it). This could be fixed however by adding the class to through hostbindingsAkshat55 commentedon Mar 21, 2024
I agree with you on this! The structure is bloated and the change is a breaking change. I'm thinking it might make sense to make the PR target the next branch where we can release a rc version and release it officially with v12 next year. 🤔
klaascuvelier commentedon Mar 21, 2024
Hi @Akshat55 thanks for the feedback. I agree that maybe targetting a later release is fine. For us this is not a blocking issue, just a nice improvement :)
Let me know if there's something more I can do.