fix(forms): updates Message to receive margin when intermediaries are present (#1799)

Author: geotrev

packages/datepickers/demo/datepicker.stories.mdx

@@ -16,7 +16,12 @@ import README from '../README.md';
 <Canvas>
   <Story
     name="Datepicker"
-    args={{ dateStyle: DATE_STYLE_OPTIONS[1], eventsEnabled: true, isAnimated: true }}
+    args={{
+      dateStyle: DATE_STYLE_OPTIONS[1],
+      eventsEnabled: true,
+      isAnimated: true,
+      message: 'Message'
+    }}
     argTypes={{
       value: { control: 'date' },
       minValue: { control: 'date' },
@@ -25,6 +30,17 @@ import README from '../README.md';
         control: 'radio',
         options: DATE_STYLE_OPTIONS,
         table: { category: 'Story' }
+      },
+      hasMessage: { name: 'Message', control: { type: 'boolean' }, table: 'Story' },
+      message: { name: 'children', control: { type: 'text' }, table: { category: 'Message' } },
+      validation: {
+        options: ['success', 'warning', 'error'],
+        control: { type: 'radio' },
+        table: { category: 'Input' }
+      },
+      validationLabel: {
+        control: { type: 'text' },
+        table: { category: 'Message' }
       }
     }}
     parameters={{

packages/datepickers/demo/stories/DatepickerStory.tsx

@@ -8,27 +8,44 @@
 import React from 'react';
 import { Story } from '@storybook/react';
 import { Col, Grid, Row } from '@zendeskgarden/react-grid';
-import { Field, Input, Label } from '@zendeskgarden/react-forms';
+import { Field, Input, Label, Message } from '@zendeskgarden/react-forms';
 import { Datepicker, IDatepickerProps } from '@zendeskgarden/react-datepickers';
 import { DATE_STYLE } from './types';
 
 interface IArgs extends IDatepickerProps {
   dateStyle: DATE_STYLE;
+  hasMessage?: boolean;
+  message?: string;
+  validation?: 'success' | 'warning' | 'error';
+  validationLabel?: string;
 }
 
-export const DatepickerStory: Story<IArgs> = ({ dateStyle, isCompact, ...args }) => {
+export const DatepickerStory: Story<IArgs> = ({
+  dateStyle,
+  isCompact,
+  hasMessage,
+  message,
+  validation,
+  validationLabel,
+  ...args
+}) => {
   const formatDate = (date: Date) =>
     new Intl.DateTimeFormat(args.locale, { dateStyle }).format(date);
 
   return (
     <Grid>
-      <Row style={{ height: 'calc(100vh - 80px)' }}>
-        <Col textAlign="center" alignSelf="center">
+      <Row justifyContent="center" style={{ height: 'calc(100vh - 80px)' }}>
+        <Col alignSelf="center">
           <Field>
             <Label hidden>{Datepicker.displayName}</Label>
             <Datepicker {...args} formatDate={formatDate} isCompact={isCompact}>
-              <Input isCompact={isCompact} style={{ width: isCompact ? 256 : 320 }} />
+              <Input isCompact={isCompact} validation={validation} />
             </Datepicker>
+            {hasMessage && (
+              <Message validation={validation} validationLabel={validationLabel}>
+                {message}
+              </Message>
+            )}
           </Field>
         </Col>
       </Row>

packages/forms/src/styled/text/StyledTextInput.ts

@@ -193,7 +193,7 @@ const sizeStyles = (props: IStyledTextInputProps & ThemeProps<DefaultTheme>) =>
     ${StyledHint} + &&,
     ${StyledMessage} + &&,
     && + ${StyledHint},
-    && + ${StyledMessage} {
+    && ~ ${StyledMessage} {
       margin-top: ${props.theme.space.base * (props.isCompact ? 1 : 2)}px;
     }
     /* stylelint-enable */