Introduce compressed appearance for OuiSuperDatePicker

Signed-off-by: Miki <miki@amazon.com>
AMoo-Miki · Jul 18, 2024 · bbfaefd · bbfaefd
1 parent 7a6a456
commit bbfaefd
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 31 deletions.
diff --git a/i18ntokens.json b/i18ntokens.json
@@ -2237,14 +2237,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 429,
+        "line": 439,
         "column": 14,
-        "index": 11292
+        "index": 11503
       },
       "end": {
-        "line": 432,
+        "line": 442,
         "column": 16,
-        "index": 11418
+        "index": 11629
       }
     },
     "filepath": "src/components/date_picker/super_date_picker/super_date_picker.tsx"
@@ -2255,14 +2255,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 127,
+        "line": 129,
         "column": 6,
-        "index": 3258
+        "index": 3324
       },
       "end": {
-        "line": 130,
+        "line": 132,
         "column": 8,
-        "index": 3357
+        "index": 3423
       }
     },
     "filepath": "src/components/date_picker/super_date_picker/super_update_button.tsx"
@@ -2273,14 +2273,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 134,
+        "line": 136,
         "column": 8,
-        "index": 3442
+        "index": 3508
       },
       "end": {
-        "line": 137,
+        "line": 139,
         "column": 10,
-        "index": 3549
+        "index": 3615
       }
     },
     "filepath": "src/components/date_picker/super_date_picker/super_update_button.tsx"
@@ -2291,14 +2291,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 139,
+        "line": 141,
         "column": 8,
-        "index": 3570
+        "index": 3636
       },
       "end": {
-        "line": 142,
+        "line": 144,
         "column": 10,
-        "index": 3673
+        "index": 3739
       }
     },
     "filepath": "src/components/date_picker/super_date_picker/super_update_button.tsx"
@@ -2309,14 +2309,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 149,
+        "line": 151,
         "column": 8,
-        "index": 3769
+        "index": 3835
       },
       "end": {
-        "line": 152,
+        "line": 154,
         "column": 10,
-        "index": 3881
+        "index": 3947
       }
     },
     "filepath": "src/components/date_picker/super_date_picker/super_update_button.tsx"
@@ -2327,14 +2327,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 156,
+        "line": 158,
         "column": 8,
-        "index": 3968
+        "index": 4034
       },
       "end": {
-        "line": 159,
+        "line": 161,
         "column": 10,
-        "index": 4081
+        "index": 4147
       }
     },
     "filepath": "src/components/date_picker/super_date_picker/super_update_button.tsx"
@@ -2345,14 +2345,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 134,
+        "line": 139,
         "column": 8,
-        "index": 3779
+        "index": 3813
       },
       "end": {
-        "line": 140,
+        "line": 145,
         "column": 55,
-        "index": 4046
+        "index": 4080
       }
     },
     "filepath": "src/components/filter_group/filter_button.tsx"
@@ -3635,6 +3635,24 @@
     },
     "filepath": "src/components/selectable/selectable.tsx"
   },
+  {
+    "token": "ouiSplitButton.screenReaderAnnouncement",
+    "defString": "You are in a selector of {optionsCount} items and must select a single option.\n              Use the up and down keys to navigate or escape to close.",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 317,
+        "column": 10,
+        "index": 8002
+      },
+      "end": {
+        "line": 322,
+        "column": 12,
+        "index": 8310
+      }
+    },
+    "filepath": "src/components/split_button/split_button.tsx"
+  },
   {
     "token": "ouiStat.loadingText",
     "defString": "Statistic is loading",

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/_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,
+  };
+}