chore(next): update from main@8.76.2 (#1801)

Author: ze-flo

CHANGELOG.md

@@ -9,6 +9,15 @@
 
 _Note: Gaps between patch versions are faulty, broken or test releases._
 
+## v8.76.2 (2024-05-02)
+
+#### :bug: Bug Fix
+* `datepickers`, `forms`
+  * [#1799](https://github.com/zendeskgarden/react-components/pull/1799) fix(forms): updates Message to receive margin when intermediaries are present ([@geotrev](https://github.com/geotrev))
+
+#### :seedling: Internal
+* [#1800](https://github.com/zendeskgarden/react-components/pull/1800) chore(deps-dev): bump ejs from 3.1.9 to 3.1.10 ([@dependabot[bot]](https://github.com/apps/dependabot))
+
 ## v8.76.1 (2024-04-18)
 
 #### :bug: Bug Fix

docs/changelogs/v8.md

@@ -16,7 +16,12 @@ import README from '../README.md';
 <Canvas>
   <Story
     name="DatePicker"
-    args={{ dateStyle: DATE_STYLE_OPTIONS[1], 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={{

package-lock.json

@@ -7,28 +7,45 @@
 
 import React from 'react';
 import { Story } from '@storybook/react';
-import { Field, Input } from '@zendeskgarden/react-forms';
 import { Grid } from '@zendeskgarden/react-grid';
+import { Field, Input } 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>
-      <Grid.Row style={{ height: 'calc(100vh - 80px)' }}>
-        <Grid.Col textAlign="center" alignSelf="center">
+      <Grid.Row justifyContent="center" style={{ height: 'calc(100vh - 80px)' }}>
+        <Grid.Col alignSelf="center">
           <Field>
             <Field.Label hidden>{DatePicker.displayName}</Field.Label>
             <DatePicker {...args} formatDate={formatDate} isCompact={isCompact}>
-              <Input isCompact={isCompact} style={{ width: isCompact ? 256 : 320 }} />
+              <Input isCompact={isCompact} validation={validation} />
             </DatePicker>
+            {hasMessage && (
+              <Field.Message validation={validation} validationLabel={validationLabel}>
+                {message}
+              </Field.Message>
+            )}
           </Field>
         </Grid.Col>
       </Grid.Row>

packages/datepickers/demo/datePicker.stories.mdx

@@ -192,7 +192,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 */