[canary][IcDatePicker] with-helper css classes/styles still present after enabling hideHelperText on IcDatePicker

[OrangeCaterpillar]

Summary of the bug

When hideHelperText is enabled, the element remains in the DOM (likely for accessibility reasons), but the associated CSS classes are also still applied. The hydrated class is expected to provide the correct margins, but the with-helper class is overriding it with a smaller margin.

This ticket will fulfil #2864 (internal issue 2735)

🪜 How to reproduce

1. Enable hideHelperText on an IcDatePicker.
2. Navigate to a page where the IcDatePicker is visible.
3. Inspect the DOM using browser developer tools. Notice that the label styling differs slightly from IcSelect field labels, as the with-helper class is still applied.

📸 Code

Here are the DOM elements of the IcDatePicker with hideHelperText enabled:

<ic-input-label class="with-helper hydrated">
   <ic-typography class="ic-typography-label hydrated">
      <label for="ic-date-input-0" id="ic-date-input-0-label">Date<span id="asterisk-span" aria-hidden="true"> *</span></label>
   </ic-typography>
   <ic-typography class="helpertext helpertext-normal ic-typography-caption hydrated">
      <span id="ic-date-input-0-helper-text"></span>
   </ic-typography>
</ic-input-label>

🖥 📱 Device

• Type: Desktop/Mobile
• Device: Macbook
• OS version: macOS12
• Browser version: Chrome Version 126.0.6478.127 (Official Build)

🧐 Expected behaviour

CSS classes related to helper text should be removed when hideHelperText is enabled, ensuring that the input label's styling matches the standardized styling of other input labels in the form.

📝 Acceptance Criteria

Given that hideHelperText is enabled on an IcDatePicker,
When the component renders on the page,
Then the relevant CSS classes should be removed or their styling disabled,
And the input label styling should be consistent with other form inputs.

[GCHQ-Developer-299]

Hi @OrangeCaterpillar - thanks for raising this. Could you provide a screenshot showing the display discrepancy caused by the leftover CSS?

A screenshot might not be necessary, another user has raised a related issue showing the impact of HideHelperText styles sticking around

[OrangeCaterpillar]

Hi, apologies for the silence, been rather busy. I'll be taking a look at the bug tickets I've raised and providing details where necessary. The screenshot you show is a good example of what the styling issues are. Basically misalignment of the other labels due to the extra with-helper class being added