Introduce compressed appearance for OuiSuperDatePicker (#1307) (#1322)

Also: * Sync changelog * Add compressed SuperDatePicker internal component (cherry picked from commit c3c02d5) Signed-off-by: Miki <[email protected]>
opensearch-project · Jul 22, 2024 · ef2066f · ef2066f
1 parent 9c30710
commit ef2066f
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,13 @@
 
 ### 🔩 Tests
 
+## [`1.8.1`](https://github.com/opensearch-project/oui/tree/1.8.1)
+
+### 🐛 Bug Fixes
+
+- Fix compressed appearance for OuiSuperDatePicker ([#1307](https://github.com/opensearch-project/oui/pull/1307))
+
+
 ## [`1.8.0`](https://github.com/opensearch-project/oui/tree/1.8.0)
 
 ### Deprecations

diff --git a/src-docs/src/views/super_date_picker/super_date_picker_config.js b/src-docs/src/views/super_date_picker/super_date_picker_config.js
@@ -23,6 +23,7 @@ export default () => {
   const [isLoading, setIsLoading] = useState(false);
   const [showUpdateButton, setShowUpdateButton] = useState(true);
   const [isAutoRefreshOnly, setIsAutoRefreshOnly] = useState(false);
+  const [compressed, setCompressed] = useState(false);
   const [start, setStart] = useState('now-30m');
   const [end, setEnd] = useState('now');
   const [isPaused, setIsPaused] = useState(true);
@@ -78,6 +79,10 @@ export default () => {
     setIsAutoRefreshOnly(!isAutoRefreshOnly);
   };
 
+  const toggleCompressed = () => {
+    setCompressed(!compressed);
+  };
+
   return (
     <Fragment>
       <OuiSwitch
@@ -98,6 +103,12 @@ export default () => {
         onChange={toggleDisabled}
         checked={isDisabled}
       />
+      &emsp;
+      <OuiSwitch
+        label="Compressed"
+        onChange={toggleCompressed}
+        checked={compressed}
+      />
       <OuiSpacer />
       <OuiSuperDatePicker
         isDisabled={isDisabled}
@@ -112,6 +123,7 @@ export default () => {
         recentlyUsedRanges={recentlyUsedRanges}
         showUpdateButton={showUpdateButton}
         isAutoRefreshOnly={isAutoRefreshOnly}
+        compressed={compressed}
       />
       <OuiSpacer />
     </Fragment>

diff --git a/src/components/date_picker/date_picker_range.tsx b/src/components/date_picker/date_picker_range.tsx
@@ -69,6 +69,11 @@ export type OuiDatePickerRangeProps = CommonProps & {
    * The start date `OuiDatePicker` element
    */
   startDateControl: ReactNode;
+
+  /**
+   * when `true` creates a shorter input
+   */
+  compressed?: boolean;
 };
 
 export const OuiDatePickerRange: FunctionComponent<OuiDatePickerRangeProps> = ({
@@ -80,13 +85,15 @@ export const OuiDatePickerRange: FunctionComponent<OuiDatePickerRangeProps> = ({
   fullWidth,
   isCustom,
   readOnly,
+  compressed,
   ...rest
 }) => {
   const classes = classNames(
     'ouiDatePickerRange',
     {
       'ouiDatePickerRange--fullWidth': fullWidth,
       'ouiDatePickerRange--readOnly': readOnly,
+      'ouiDatePickerRange--compressed': compressed,
     },
     className
   );

diff --git a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
@@ -9,6 +9,7 @@ exports[`OuiSuperDatePicker is rendered 1`] = `
   <OuiFlexItem>
     <OuiFormControlLayout
       className="ouiSuperDatePicker"
+      compressed={false}
       isDisabled={false}
       prepend={
         <OuiQuickSelectPopover
@@ -98,6 +99,7 @@ exports[`OuiSuperDatePicker is rendered 1`] = `
     grow={false}
   >
     <OuiSuperUpdateButton
+      compressed={false}
       data-test-subj="superDatePickerApplyTimeButton"
       isDisabled={false}
       isLoading={false}

diff --git a/src/components/date_picker/super_date_picker/__snapshots__/super_update_button.test.tsx.snap b/src/components/date_picker/super_date_picker/__snapshots__/super_update_button.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`OuiSuperUpdateButton is rendered 1`] = `
     isDisabled={false}
     isLoading={false}
     onClick={[Function]}
+    size="m"
     textProps={
       Object {
         "className": "ouiSuperUpdateButton__text",
@@ -44,6 +45,7 @@ exports[`OuiSuperUpdateButton isDisabled 1`] = `
     isDisabled={true}
     isLoading={false}
     onClick={[Function]}
+    size="m"
     textProps={
       Object {
         "className": "ouiSuperUpdateButton__text",
@@ -70,6 +72,7 @@ exports[`OuiSuperUpdateButton isLoading 1`] = `
     isDisabled={false}
     isLoading={true}
     onClick={[Function]}
+    size="m"
     textProps={
       Object {
         "className": "ouiSuperUpdateButton__text",
@@ -102,6 +105,7 @@ exports[`OuiSuperUpdateButton needsUpdate 1`] = `
     isDisabled={false}
     isLoading={false}
     onClick={[Function]}
+    size="m"
     textProps={
       Object {
         "className": "ouiSuperUpdateButton__text",
@@ -128,6 +132,7 @@ exports[`OuiSuperUpdateButton showTooltip 1`] = `
     isDisabled={false}
     isLoading={false}
     onClick={[Function]}
+    size="m"
     textProps={
       Object {
         "className": "ouiSuperUpdateButton__text",

diff --git a/src/components/date_picker/super_date_picker/_super_date_picker.scss b/src/components/date_picker/super_date_picker/_super_date_picker.scss
@@ -44,6 +44,10 @@
   // Fixes margin around delimiter
   // Only needed on first popover since basic .ouiFormControlLayout takes care of the last one
   margin-right: -$ouiSizeM;
+
+  &.ouiSuperDatePicker__startPopoverButton--compressed {
+    margin-right: -$ouiSizeS;
+  }
 }
 
 .ouiSuperDatePicker__prettyFormat {
@@ -70,6 +74,11 @@
       display: none;
     }
   }
+
+  &--compressed {
+    line-height: $ouiFormControlLayoutGroupInputCompressedHeight;
+    height: $ouiFormControlLayoutGroupInputCompressedHeight;
+  }
 }
 
 .ouiSuperDatePicker__prettyFormatLink {

diff --git a/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss b/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss
@@ -49,6 +49,11 @@
     color: $ouiColorDarkShade;
     cursor: default;
   }
+
+  &-compressed {
+    line-height: $ouiFormControlLayoutGroupInputCompressedHeight;
+    height: $ouiFormControlLayoutGroupInputCompressedHeight;
+  }
 }
 
 .ouiDatePopoverButton--start {

diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx
@@ -61,6 +61,7 @@ export interface OuiDatePopoverButtonProps {
   timeFormat: string;
   value: string;
   utcOffset?: number;
+  compressed?: boolean;
 }
 
 export const OuiDatePopoverButton: FunctionComponent<OuiDatePopoverButtonProps> = (
@@ -82,6 +83,7 @@ export const OuiDatePopoverButton: FunctionComponent<OuiDatePopoverButtonProps>
     isOpen,
     onPopoverToggle,
     onPopoverClose,
+    compressed,
     ...rest
   } = props;
 
@@ -93,6 +95,7 @@ export const OuiDatePopoverButton: FunctionComponent<OuiDatePopoverButtonProps>
       'ouiDatePopoverButton-isInvalid': isInvalid,
       'ouiDatePopoverButton-needsUpdating': needsUpdating,
       'ouiDatePopoverButton-disabled': isDisabled,
+      'ouiDatePopoverButton-compressed': compressed,
     },
   ]);
 

diff --git a/src/components/date_picker/super_date_picker/super_date_picker.tsx b/src/components/date_picker/super_date_picker/super_date_picker.tsx
@@ -144,6 +144,11 @@ export type OuiSuperDatePickerProps = CommonProps & {
       'needsUpdate' | 'showTooltip' | 'isLoading' | 'isDisabled' | 'onClick'
     >
   >;
+
+  /**
+   * when `true` creates a shorter input
+   */
+  compressed?: boolean;
 };
 
 interface OuiSuperDatePickerState {
@@ -198,6 +203,7 @@ export class OuiSuperDatePicker extends Component<
     showUpdateButton: true,
     start: 'now-15m',
     timeFormat: 'HH:mm',
+    compressed: false,
   };
 
   asyncInterval?: AsyncInterval;
@@ -387,6 +393,7 @@ export class OuiSuperDatePicker extends Component<
       refreshInterval,
       timeFormat,
       utcOffset,
+      compressed,
     } = this.props;
 
     if (isAutoRefreshOnly) {
@@ -420,6 +427,7 @@ export class OuiSuperDatePicker extends Component<
           <button
             className={classNames('ouiSuperDatePicker__prettyFormat', {
               'ouiSuperDatePicker__prettyFormat--disabled': isDisabled,
+              'ouiSuperDatePicker__prettyFormat--compressed': compressed,
             })}
             data-test-subj="superDatePickerShowDatesButton"
             disabled={isDisabled}
@@ -445,7 +453,12 @@ export class OuiSuperDatePicker extends Component<
             isCustom
             startDateControl={
               <OuiDatePopoverButton
-                className="ouiSuperDatePicker__startPopoverButton"
+                className={classNames(
+                  'ouiSuperDatePicker__startPopoverButton',
+                  {
+                    'ouiSuperDatePicker__startPopoverButton--compressed': compressed,
+                  }
+                )}
                 position="start"
                 needsUpdating={hasChanged}
                 isInvalid={isInvalid}
@@ -459,6 +472,7 @@ export class OuiSuperDatePicker extends Component<
                 isOpen={this.state.isStartDatePopoverOpen}
                 onPopoverToggle={this.onStartDatePopoverToggle}
                 onPopoverClose={this.onStartDatePopoverClose}
+                compressed={compressed}
               />
             }
             endDateControl={
@@ -477,6 +491,7 @@ export class OuiSuperDatePicker extends Component<
                 isOpen={this.state.isEndDatePopoverOpen}
                 onPopoverToggle={this.onEndDatePopoverToggle}
                 onPopoverClose={this.onEndDatePopoverClose}
+                compressed={compressed}
               />
             }
           />
@@ -507,6 +522,7 @@ export class OuiSuperDatePicker extends Component<
             !this.state.isStartDatePopoverOpen &&
             !this.state.isEndDatePopoverOpen
           }
+          compressed={this.props.compressed}
           isLoading={this.props.isLoading}
           isDisabled={this.props.isDisabled || this.state.isInvalid}
           onClick={this.handleClickUpdateButton}
@@ -531,6 +547,7 @@ export class OuiSuperDatePicker extends Component<
       refreshInterval,
       showUpdateButton,
       start,
+      compressed,
     } = this.props;
 
     const quickSelect = (
@@ -566,7 +583,8 @@ export class OuiSuperDatePicker extends Component<
           <OuiFormControlLayout
             className="ouiSuperDatePicker"
             isDisabled={isDisabled}
-            prepend={quickSelect}>
+            prepend={quickSelect}
+            compressed={compressed}>
             {this.renderDatePickerRange()}
           </OuiFormControlLayout>
         </OuiFlexItem>
@@ -575,3 +593,17 @@ export class OuiSuperDatePicker extends Component<
     );
   }
 }
+
+// @internal
+export type OuiCompressedSuperDatePickerProps = Omit<
+  OuiSuperDatePickerProps,
+  'compressed'
+>;
+
+// @internal
+export class OuiCompressedSuperDatePicker extends OuiSuperDatePicker {
+  static defaultProps = {
+    ...OuiSuperDatePicker.defaultProps,
+    compressed: true,
+  };
+}
diff --git a/src/components/date_picker/super_date_picker/super_update_button.tsx b/src/components/date_picker/super_date_picker/super_update_button.tsx
@@ -53,6 +53,7 @@ export type OuiSuperUpdateButtonProps = CommonProps &
      * Show the "Click to apply" tooltip
      */
     showTooltip: boolean;
+    compressed?: boolean;
   };
 
 export class OuiSuperUpdateButton extends Component<OuiSuperUpdateButtonProps> {
@@ -61,6 +62,7 @@ export class OuiSuperUpdateButton extends Component<OuiSuperUpdateButtonProps> {
     isLoading: false,
     isDisabled: false,
     showTooltip: false,
+    compressed: false,
   };
 
   _isMounted = false;
@@ -116,7 +118,7 @@ export class OuiSuperUpdateButton extends Component<OuiSuperUpdateButtonProps> {
       onClick,
       toolTipProps,
       showTooltip,
-
+      compressed,
       textProps: restTextProps,
       ...rest
     } = this.props;
@@ -180,6 +182,7 @@ export class OuiSuperUpdateButton extends Component<OuiSuperUpdateButtonProps> {
           isDisabled={isDisabled}
           onClick={onClick}
           isLoading={isLoading}
+          size={compressed ? 's' : 'm'}
           {...rest}>
           {buttonText}
         </OuiButton>