Introduce compressed appearance for OuiSuperDatePicker

Also: * Sync changelog * Add compressed SuperDatePicker internal component Signed-off-by: Miki <miki@amazon.com>
AMoo-Miki · Jul 18, 2024 · dfe081b · dfe081b
1 parent 7a6a456
commit dfe081b
Show file tree

Hide file tree

Showing 11 changed files with 157 additions and 34 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,34 @@
 
 ### 📈 Features/Enhancements
 
+- Introduce compressed appearance for OuiSuperDatePicker ([#1307](https://github.com/opensearch-project/oui/pull/1307))
+
+### 🐛 Bug Fixes
+
+### 🚞 Infrastructure
+
+### 📝 Documentation
+
+### 🛠 Maintenance
+
+### 🪛 Refactoring
+
+### 🔩 Tests
+
+
+## [`1.7.0`](https://github.com/opensearch-project/oui/tree/1.7.0)
+
+### Deprecations
+
+### 🛡 Security
+
+### 📈 Features/Enhancements
+
+- Make Super Update Button secondary instead of primary ([#1286](https://github.com/opensearch-project/oui/pull/1286))
+- Use faster animations for modals, popovers, and tooltips ([#1282](https://github.com/opensearch-project/oui/pull/1282))
+- Use small font size consistently in buttons and button groups ([#1281](https://github.com/opensearch-project/oui/pull/1281))
+- Adjust popover and context menu title styles and tooltip padding ([#1283](https://github.com/opensearch-project/oui/pull/1283))
+- Remove Button translations and add inset shadow on active ([#1285](https://github.com/opensearch-project/oui/pull/1285))
 - [OuiFilterGroup] Allow popovers to size to content ([#1280](https://github.com/opensearch-project/oui/pull/1280))
 - Add compressed form, color-picker, and combo-box internal components ([#1301](https://github.com/opensearch-project/oui/pull/1301))
 - Add small button and filter-button internal components ([#1301](https://github.com/opensearch-project/oui/pull/1301))
@@ -20,13 +48,12 @@
 
 ### 📝 Documentation
 
-- Add instructions on how to test with OpenSearch Dashboards ([1279](https://github.com/opensearch-project/oui/pull/1279))
+- Add Explanation for external Prop in OuiLink ([#1182](https://github.com/opensearch-project/oui/pull/1182))
 
 ### 🛠 Maintenance
 
-### 🪛 Refactoring
+- Clean up unused runtime and dev dependencies ([#1135](https://github.com/opensearch-project/oui/pull/1135))
 
-### 🔩 Tests
 
 ## [`1.6.0`](https://github.com/opensearch-project/oui/tree/1.6.0)
 

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/__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,
     },
   ]);