Text alignment issues on components with labels, helpertext or validation

[ad9242]

Summary of the bug

Text does not appear left aligned when a component is placed inside a container with textAlign: center

🪜 How to reproduce

With the following code in the React storybook:

<div style={{textAlign:"center"}}>
      <IcTextField
        label="What is your favourite coffee?"
        required
        placeholder="Placeholder"
        helperText="Such as Arabica, Robusta or Liberica"
        validationStatus="error"
        validationText="Now it has really gone to (coffee) pot"
      />
      <IcTextField
        rows="6"
        label="What is your favourite coffee?"
        required
        placeholder="Placeholder"
        helperText="Such as Arabica, Robusta or Liberica"
      />
    </div>

📸 Screenshots or code

🧐 Expected behaviour

To be confirmed with design, but expectation is all text should align with the left edge of the input

📝 Acceptance Criteria

Given a component had a label, helper text or validation message When it is placed in a container with textAlign: center Then the text should remain aligned to the left hand side of the input element

Additional info

Affects at least textfield, select, date input, checkbox, radio

[MI6-255]

Agreed to left align. Shouldn't the Shadow DOM stop this, or are they not shadow components?

[MI6-255]

Add a test

[GCHQ-Developer-530]

This occurs on footer as well