[Backport 1.x] Add compressed styling to OuiDatePicker and OuiDatePickerRange

src-docs/src/views/date_picker/date_picker.js

@@ -23,7 +23,7 @@ export default () => {
  };
 
  return (
- <OuiFormRow label="Select a date">
+ <OuiFormRow label="Select a date" fullWidth>
  <OuiDatePicker selected={startDate} onChange={handleChange} />
  </OuiFormRow>
  );

src-docs/src/views/date_picker/date_picker_example.js

@@ -22,6 +22,8 @@ import {
  OuiDatePickerRange,
 } from '../../../../src/components';
 
+import { datePickerConfig } from './playground';
+
 import DatePicker from './date_picker';
 const datePickerSource = require('!!raw-loader!./date_picker');
 const datePickerHtml = renderToHtml(DatePicker);
@@ -231,6 +233,7 @@ export const DatePickerExample = {
  snippet: datePickerSnippet,
  demo: <DatePicker />,
  props: { OuiDatePicker },
+ playground: datePickerConfig,
  },
  {
  title: 'Date picker states',

src-docs/src/views/date_picker/playground.js

@@ -0,0 +1,73 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import { PropTypes } from 'react-view';
+import { OuiDatePicker } from '../../../../src/components/';
+import {
+ propUtilityForPlayground,
+ iconValidator,
+} from '../../services/playground';
+import moment from 'moment';
+
+export const datePickerConfig = () => {
+ const docgenInfo = Array.isArray(OuiDatePicker.__docgenInfo)
+ ? OuiDatePicker.__docgenInfo[0]
+ : OuiDatePicker.__docgenInfo;
+ const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+ propsToUse.dateFormat = {
+ ...propsToUse.dateFormat,
+ type: PropTypes.String,
+ };
+
+ propsToUse.selected = {
+ ...propsToUse.selected,
+ type: PropTypes.Object,
+ value: 'moment()',
+ stateful: true,
+ };
+
+ propsToUse.onChange = {
+ ...propsToUse.onChange,
+ type: PropTypes.Function,
+ value: 'selected => setSelected(selected)',
+ propHook: {
+ what: 'selected',
+ into: 'selected',
+ },
+ };
+
+ propsToUse.iconType = iconValidator(propsToUse.iconType);
+
+ propsToUse.autoComplete = {
+ ...propsToUse.autoComplete,
+ hidden: true,
+ };
+
+ return {
+ config: {
+ componentName: 'OuiDatePicker',
+ props: propsToUse,
+ scope: {
+ OuiDatePicker,
+ moment,
+ },
+ imports: {
+ '@opensearch-project/oui': {
+ named: ['OuiDatePicker'],
+ },
+ moment: {
+ default: 'moment',
+ },
+ },
+ },
+ };
+};

src-docs/src/views/date_picker/range.js

@@ -14,35 +14,38 @@ import React, { useState } from 'react';
 import moment from 'moment';
 
 import { OuiDatePicker, OuiDatePickerRange } from '../../../../src/components';
+import { DisplayToggles } from '../form_controls/display_toggles';
 
 export default () => {
  const [startDate, setStartDate] = useState(moment());
  const [endDate, setEndDate] = useState(moment().add(11, 'd'));
 
  return (
- <OuiDatePickerRange
- startDateControl={
- <OuiDatePicker
- selected={startDate}
- onChange={setStartDate}
- startDate={startDate}
- endDate={endDate}
- isInvalid={startDate > endDate}
- aria-label="Start date"
- showTimeSelect
- />
- }
- endDateControl={
- <OuiDatePicker
- selected={endDate}
- onChange={setEndDate}
- startDate={startDate}
- endDate={endDate}
- isInvalid={startDate > endDate}
- aria-label="End date"
- showTimeSelect
- />
- }
- />
+ <DisplayToggles canDisabled={false} canLoading={false} canInvalid={false}>
+ <OuiDatePickerRange
+ startDateControl={
+ <OuiDatePicker
+ selected={startDate}
+ onChange={setStartDate}
+ startDate={startDate}
+ endDate={endDate}
+ isInvalid={startDate > endDate}
+ aria-label="Start date"
+ showTimeSelect
+ />
+ }
+ endDateControl={
+ <OuiDatePicker
+ selected={endDate}
+ onChange={setEndDate}
+ startDate={startDate}
+ endDate={endDate}
+ isInvalid={startDate > endDate}
+ aria-label="End date"
+ showTimeSelect
+ />
+ }
+ />
+ </DisplayToggles>
  );
 };

src-docs/src/views/date_picker/states.js

@@ -33,7 +33,7 @@ export default () => {
  return (
  /* DisplayToggles wrapper for Docs only */
  <div>
- <DisplayToggles canCompressed={false}>
+ <DisplayToggles>
  <OuiDatePicker
  showTimeSelect
  selected={startDate}

src/components/date_picker/__snapshots__/date_picker.test.tsx.snap

@@ -805,9 +805,11 @@ exports[`OuiDatePicker localization inherits locale from context 1`] = `
 
 exports[`OuiDatePicker popoverPlacement top-end is rendered 1`] = `
 <OuiDatePicker
+ accessibleMode={true}
  adjustDateOnChange={true}
  aria-label="aria-label"
  className="testClass1 testClass2"
+ compressed={false}
  data-test-subj="test subject string"
  dateFormat="MM/DD/YYYY"
  fullWidth={false}
@@ -817,8 +819,11 @@ exports[`OuiDatePicker popoverPlacement top-end is rendered 1`] = `
  shadow={true}
  shouldCloseOnSelect={true}
  showIcon={true}
+ showMonthDropdown={true}
  showTimeSelect={false}
+ showYearDropdown={true}
  timeFormat="hh:mm A"
+ yearDropdownItemNumber={7}
 >
  <span>
  <span

src/components/date_picker/_date_picker_range.scss

@@ -15,6 +15,11 @@
 
 .ouiDatePickerRange {
  @include ouiFormControlSize(auto, $includeAlternates: true);
+
+ .ouiDatePicker.ouiFieldText--compressed {
+ height: $ouiFormControlLayoutGroupInputCompressedHeight;
+ }
+
  // Match just the regular drop shadow of inputs
  @include ouiFormControlDefaultShadow();
  display: flex;

src/components/date_picker/date_picker.tsx

@@ -110,9 +110,27 @@ interface OuiExtendedDatePickerProps extends ReactDatePickerProps {
  * Sets the placement of the popover. It accepts: `"bottom"`, `"bottom-end"`, `"bottom-start"`, `"left"`, `"left-end"`, `"left-start"`, `"right"`, `"right-end"`, `"right-start"`, `"top"`, `"top-end"`, `"top-start"`
  */
  popoverPlacement?: ReactDatePickerProps['popperPlacement'];
+
+ /**
+ * Reduces the size to a typical (compressed) input
+ */
+ compressed?: boolean;
 }
 
-type _OuiDatePickerProps = CommonProps & OuiExtendedDatePickerProps;
+type _OuiDatePickerProps = CommonProps &
+ Omit<
+ OuiExtendedDatePickerProps,
+ | 'monthsShown'
+ | 'showWeekNumbers'
+ | 'fixedHeight'
+ | 'dropdownMode'
+ | 'useShortMonthInDropdown'
+ | 'todayButton'
+ | 'timeCaption'
+ | 'disabledKeyboardNavigation'
+ | 'isClearable'
+ | 'withPortal'
+ >;
 
 export type OuiDatePickerProps = ApplyClassComponentDefaults<
  typeof OuiDatePicker
@@ -127,10 +145,15 @@ export class OuiDatePicker extends Component<_OuiDatePickerProps> {
  isLoading: false,
  shadow: true,
  shouldCloseOnSelect: true,
+ showMonthDropdown: true,
+ showYearDropdown: true,
+ yearDropdownItemNumber: 7,
+ accessibleMode: true,
  showIcon: true,
  showTimeSelect: false,
  timeFormat: ouiDatePickerDefaultTimeFormat,
  popoverPlacement: 'bottom-start',
+ compressed: false,
  };
 
  render() {
@@ -170,6 +193,7 @@ export class OuiDatePicker extends Component<_OuiDatePickerProps> {
  showTimeSelectOnly,
  timeFormat,
  utcOffset,
+ compressed,
  ...rest
  } = this.props;
 
@@ -186,6 +210,7 @@ export class OuiDatePicker extends Component<_OuiDatePickerProps> {
  'ouiFieldText-isLoading': isLoading,
  'ouiFieldText--withIcon': !inline && showIcon,
  'ouiFieldText-isInvalid': isInvalid,
+ 'ouiFieldText--compressed': compressed,
  },
  className
  );
@@ -216,24 +241,34 @@ export class OuiDatePicker extends Component<_OuiDatePickerProps> {
  };
 
  if (
+ // @ts-ignore for guard against omitted prop
  // We don't want to show multiple months next to each other
  this.props.monthsShown ||
+ // @ts-ignore for guard against omitted prop
  // There is no need to show week numbers
  this.props.showWeekNumbers ||
+ // @ts-ignore for guard against omitted prop
  // Our css adapts to height, no need to fix it
  this.props.fixedHeight ||
+ // @ts-ignore for guard against omitted prop
  // We force the month / year selection UI. No need to configure it
  this.props.dropdownMode ||
+ // @ts-ignore for guard against omitted prop
  // Short month is unnecessary. Our UI has plenty of room for full months
  this.props.useShortMonthInDropdown ||
+ // @ts-ignore for guard against omitted prop
  // The today button is not needed. This should always be external to the calendar
  this.props.todayButton ||
+ // @ts-ignore for guard against omitted prop
  // We hide the time caption, so there is no need to overwrite its text
  this.props.timeCaption ||
+ // @ts-ignore for guard against omitted prop
  // We always want keyboard accessibility on
  this.props.disabledKeyboardNavigation ||
+ // @ts-ignore for guard against omitted prop
  // This is easy enough to do. It can conflict with isLoading state
  this.props.isClearable ||
+ // @ts-ignore for guard against omitted prop
  // There is no reason to launch the datepicker in its own modal. Can always build these ourselves
  this.props.withPortal
  ) {

src/components/date_picker/date_picker_range.tsx

@@ -109,6 +109,7 @@ export const OuiDatePickerRange: FunctionComponent<OuiDatePickerRangeProps> = ({
  readOnly: readOnly,
  iconType: typeof iconType === 'boolean' ? undefined : iconType,
  showIcon: !!iconType,
+ compressed,
  }
  );
 
@@ -119,6 +120,7 @@ export const OuiDatePickerRange: FunctionComponent<OuiDatePickerRangeProps> = ({
  fullWidth: fullWidth,
  readOnly: readOnly,
  popoverPlacement: 'bottom-end',
+ compressed,
  }
  );
  }