Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
OrangeCaterpillar opened this issue Sep 3, 2024 · 1 comment
Labels
Date input date input story & guidance, date picker story & guidance type: bug 🐛 Something isn't working
Milestone

Comments

@OrangeCaterpillar
Copy link

OrangeCaterpillar commented Sep 3, 2024

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.

@OrangeCaterpillar OrangeCaterpillar added the type: bug 🐛 Something isn't working label Sep 3, 2024
@OrangeCaterpillar OrangeCaterpillar changed the title with-helper css classes/styles still present after enabling hideHelperText on [Canary] IcDatePicker [canary][IcDatePicker] with-helper css classes/styles still present after enabling hideHelperText on IcDatePicker Sep 3, 2024
@GCHQ-Developer-299
Copy link
Contributor

GCHQ-Developer-299 commented Dec 19, 2024

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
Image

@GCHQ-Developer-299 GCHQ-Developer-299 added the Date input date input story & guidance, date picker story & guidance label Dec 19, 2024
@GCHQ-Developer-299 GCHQ-Developer-299 added this to the PI 10 V3 milestone Dec 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Date input date input story & guidance, date picker story & guidance type: bug 🐛 Something isn't working
Projects
Status: In Refinement
Development

No branches or pull requests

3 participants
@GCHQ-Developer-299 @OrangeCaterpillar and others