feat(ui-date-time-input): add rowSpacing and colSpacing props to …

…DateTimeInput Closes: INSTUI-3486 The spacing props are passed to the underlying FormFieldGroup component.
instructure · Apr 14, 2022 · 5e829fa · 5e829fa
1 parent 4069706
commit 5e829fa
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 6 deletions.
diff --git a/packages/ui-date-time-input/src/DateTimeInput/__examples__/DateTimeInput.examples.ts b/packages/ui-date-time-input/src/DateTimeInput/__examples__/DateTimeInput.examples.ts
@@ -29,8 +29,11 @@ export default {
   sectionProp: 'layout',
   propValues: {
     datePlaceholder: [undefined, 'date placeholder'],
+    colSpacing: ['small', 'medium'],
+    rowSpacing: ['small', 'medium'],
     defaultValue: [undefined, '2018-01-18T16:00', 'intentionally wrong'],
     invalidDateTimeMessage: ['invalid date'],
+    timeStep: [10],
     messages: [
       undefined,
       [
@@ -40,17 +43,39 @@ export default {
     ],
     interaction: ['enabled', 'disabled']
   },
-  getComponentProps: () => {
+  getComponentProps: (props) => {
+    const defaultPropsForLayout =
+      props.interaction === 'enabled' &&
+      !props.datePlaceholder &&
+      !props.defaultValue &&
+      !props.isRequired &&
+      !props.messages
+
+    const defaultColSpacing = 'medium'
+    const defaultRowSpacing = 'small'
+
     return {
       description: 'desc',
-      dateLabel: 'date label',
+      dateRenderLabel: 'date render label',
+      timeRenderLabel: 'time render label',
       isRequired: false,
       prevMonthLabel: 'prev month',
       nextMonthLabel: 'next month',
       timeLabel: 'time label',
-      timeStep: 10,
       timezone: 'America/Tijuana',
-      locale: 'de-AT'
+      locale: 'de-AT',
+      colSpacing:
+        defaultPropsForLayout &&
+        props.rowSpacing === defaultRowSpacing &&
+        props.layout === 'columns'
+          ? props.colSpacing
+          : defaultColSpacing,
+      rowSpacing:
+        defaultPropsForLayout &&
+        props.colSpacing === defaultColSpacing &&
+        props.layout !== 'columns'
+          ? props.rowSpacing
+          : defaultRowSpacing
     }
   }
 } as StoryConfig<DateTimeInputProps>
diff --git a/packages/ui-date-time-input/src/DateTimeInput/index.tsx b/packages/ui-date-time-input/src/DateTimeInput/index.tsx
@@ -56,6 +56,8 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
   static allowedProps = allowedProps
   static defaultProps = {
     layout: 'inline',
+    colSpacing: 'medium',
+    rowSpacing: 'small',
     timeStep: 30,
     messageFormat: DateTimeInput.DEFAULT_MESSAGE_FORMAT,
     isRequired: false,
@@ -491,16 +493,19 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
       timezone,
       messages,
       layout,
+      rowSpacing,
+      colSpacing,
       isRequired,
       interaction,
       renderWeekdayLabels
     } = this.props
+
     return (
       <FormFieldGroup
         description={description}
-        colSpacing="medium"
-        rowSpacing="small"
         layout={layout}
+        rowSpacing={rowSpacing}
+        colSpacing={colSpacing}
         vAlign="top"
         elementRef={this.handleRef}
         messages={[

diff --git a/packages/ui-date-time-input/src/DateTimeInput/props.ts b/packages/ui-date-time-input/src/DateTimeInput/props.ts
@@ -152,6 +152,14 @@ type DateTimeInputProps = {
    * See [FormFieldGroup](#FormFieldGroup) for details.
    **/
   layout?: 'stacked' | 'columns' | 'inline'
+  /**
+   * Controls the spacing between the inputs when they are in a vertical layout.
+   **/
+  rowSpacing?: 'none' | 'small' | 'medium' | 'large'
+  /**
+   * Controls the spacing between the inputs when they are in a horizontal layout.
+   **/
+  colSpacing?: 'none' | 'small' | 'medium' | 'large'
   /**
    * An ISO 8601 formatted date string representing the current date-time
    * (must be accompanied by an onChange prop).
@@ -264,6 +272,8 @@ const propTypes: PropValidators<PropKeys> = {
   messages: PropTypes.arrayOf(FormPropTypes.message),
   messageFormat: PropTypes.string,
   layout: PropTypes.oneOf(['stacked', 'columns', 'inline']),
+  rowSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
+  colSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
   value: controllable(I18nPropTypes.iso8601, 'onChange'),
   defaultValue: I18nPropTypes.iso8601,
   renderWeekdayLabels: PropTypes.arrayOf(
@@ -293,6 +303,8 @@ const allowedProps: AllowedPropKeys = [
   'messages',
   'messageFormat',
   'layout',
+  'rowSpacing',
+  'colSpacing',
   'value',
   'defaultValue',
   'renderWeekdayLabels',