fix(forms): updates Message to receive margin when intermediaries are present #1799
Conversation
| </Datepicker> | ||
| </Field> | ||
| <Col alignSelf="center"> | ||
| <div style={{ display: 'flex', justifyContent: 'center' }}> |
There was a problem hiding this comment.
Shouldn't be needed. I think you can apply justifyContent to the Row instead. Compare
react-components/packages/dropdowns.next/demo/stories/ComboboxStory.tsx
Lines 126 to 128 in e2cd75f
There was a problem hiding this comment.
Nice 👍🏻 I looked at the Col props and missed that prop for Row.
There was a problem hiding this comment.
Lookin good I think. Removed the hardcoded width so the input could adjust with the column.
geotrev
changed the title
| validation: { | ||
| options: ['success', 'warning', 'error'], | ||
| control: { type: 'radio' }, | ||
| table: { category: 'Message' } | ||
| }, |
There was a problem hiding this comment.
Let's restructure this to behave more like Input or Combobox
- default the message
childrento "Message" - add a Story category section control for toggling the
Messageon - move
validationto an Input category section and allow it to control validation styling for both the input and the message together (as there is no design recommendation for seeing them happen separately)
| <Row style={{ height: 'calc(100vh - 80px)' }}> | ||
| <Col textAlign="center" alignSelf="center"> | ||
| <Row justifyContent="center" style={{ height: 'calc(100vh - 80px)' }}> | ||
| <Col alignSelf="center" xs={12} md={4}> |
There was a problem hiding this comment.
| <Col alignSelf="center" xs={12} md={4}> | |
| <Col textAlign="center" alignSelf="center"> |
...let's avoid the change in order to remain consistent with all other centered non-responsive dropdown type stories
There was a problem hiding this comment.
Sure. It's more consistent (compared to what this demo looked like before, which I was attempting to recreate) so I'm all for it.
| }, | ||
| validationLabel: { | ||
| control: { type: 'text' }, | ||
| table: { category: 'Input' } |
There was a problem hiding this comment.
| table: { category: 'Input' } | |
| table: { category: 'Message' } |
[nit] the validationLabel actually belongs to the Message's icon. See https://garden.zendesk.com/components/input#message
There was a problem hiding this comment.
Ah, shoot, I see it now in the Input story too. Fixing.
Description
Implements a general sibling combinator for
Messages in aField. This way anInputandMessagecan have intermediary elements but the latter can still space correctly (like in the case ofDatePicker).Detail
Currently,
DatePickerdoesn't hvae any spacing when aMessageis present. This happens because the menu wrapper sits between them, and the existing adjacent sibling combinator invalidates this scenario:Compare to
Input, which has the correctmargin-topwhen aMessageis used:Now using the general sibling combinator:
Checklist
👌 design updates will be Garden Designer approved (add the designer as a reviewer)npm start)⬅️ renders as expected with reversed (RTL) direction?bedrock)💂♂️ includes new unit tests. Maintain existing coverage (always >= 96%)♿ tested for WCAG 2.1 AA accessibility compliance