fix(forms): updates Message to receive margin when intermediaries are…

… present
zendeskgarden · Apr 29, 2024 · c77f777 · c77f777
1 parent e2cd75f
commit c77f777
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 10 deletions.
diff --git a/packages/datepickers/demo/datepicker.stories.mdx b/packages/datepickers/demo/datepicker.stories.mdx
@@ -25,6 +25,16 @@ import README from '../README.md';
         control: 'radio',
         options: DATE_STYLE_OPTIONS,
         table: { category: 'Story' }
+      },
+      message: { name: 'children', control: { type: 'text' }, table: { category: 'Message' } },
+      validation: {
+        options: ['success', 'warning', 'error'],
+        control: { type: 'radio' },
+        table: { category: 'Message' }
+      },
+      validationLabel: {
+        control: { type: 'text' },
+        table: { category: 'Message' }
       }
     }}
     parameters={{

diff --git a/packages/datepickers/demo/stories/DatepickerStory.tsx b/packages/datepickers/demo/stories/DatepickerStory.tsx
@@ -8,28 +8,45 @@
 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;
+  message?: string;
+  validation?: 'success' | 'warning' | 'error';
+  validationLabel?: string;
 }
 
-export const DatepickerStory: Story<IArgs> = ({ dateStyle, isCompact, ...args }) => {
+export const DatepickerStory: Story<IArgs> = ({
+  dateStyle,
+  isCompact,
+  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">
-          <Field>
-            <Label hidden>{Datepicker.displayName}</Label>
-            <Datepicker {...args} formatDate={formatDate} isCompact={isCompact}>
-              <Input isCompact={isCompact} style={{ width: isCompact ? 256 : 320 }} />
-            </Datepicker>
-          </Field>
+        <Col alignSelf="center">
+          <div style={{ display: 'flex', justifyContent: 'center' }}>
+            <Field style={{ width: isCompact ? 256 : 320 }}>
+              <Label hidden>{Datepicker.displayName}</Label>
+              <Datepicker {...args} formatDate={formatDate} isCompact={isCompact}>
+                <Input isCompact={isCompact} />
+              </Datepicker>
+              {message && (
+                <Message validation={validation} validationLabel={validationLabel}>
+                  {message}
+                </Message>
+              )}
+            </Field>
+          </div>
         </Col>
       </Row>
     </Grid>

diff --git a/packages/forms/src/styled/text/StyledTextInput.ts b/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 */