carbon
carbon copied to clipboard
Sage
DateRange validation breaks layout
Current behaviour
If validation message is longer than input field than it breaks layout.
Expected behaviour
Layout should be the same - text should overflow.
CodeSandbox or Storybook URL
https://codesandbox.io/s/reverent-https-xq88p6
JIRA Ticket (Sage Only)
SBS-41049
Suggested Solution
No response
Carbon Version
110.1.1
Design Tokens Version
No response
What browsers are you seeing the problem on?
Chrome
What Operating System are you seeing the problem on?
MacOS
Anything else we should know?
No response
Confidentiality
- [X] I confirm there is no confidential or commercially sensitive information included.
@ljemmo can we have some design input on how to handle this scenario?
@nicktitchmarsh I agree with the expected behaviour proposed here. Otherwise the input will jump around the screen which will be quite jarring for the user. @clairedenning do you agree?
@ljemmo for clarificaiton, should we keep the labels and inputs level, or are we ok with things getting pushed around?
@nicktitchmarsh we should keep the labels and inputs on the same Y-coordinate of the page and push the inputs down as opposed to pushing inputs right. Hope that helps?
@ljemmo we think it might be possible to keep both the labels and inputs level and flex both the validation areas whilst adding a text wrap. If that isn't possible do we want to keep the labels or the inputs on the same level?
@nicktitchmarsh Yes please. So the input's X co-ordinates wouldn't jump around ideally if possible.
:tada: This issue has been resolved in version 111.12.6 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
