From 0c7a1e71b7bd0635182f01004db41e341ac005c4 Mon Sep 17 00:00:00 2001 From: Miki Date: Thu, 18 Jul 2024 09:28:14 -0700 Subject: [PATCH] Introduce compressed appearance for OuiSuperDatePicker Also: * Sync changelog * Add compressed SuperDatePicker internal component Signed-off-by: Miki --- CHANGELOG.md | 33 ++++++++- i18ntokens.json | 74 ++++++++++++------- .../super_date_picker_config.js | 12 +++ .../date_picker/date_picker_range.tsx | 7 ++ .../super_date_picker/_super_date_picker.scss | 9 +++ .../date_popover/_date_popover_button.scss | 5 ++ .../date_popover/date_popover_button.tsx | 3 + .../super_date_picker/super_date_picker.tsx | 36 ++++++++- .../super_date_picker/super_update_button.tsx | 5 +- 9 files changed, 150 insertions(+), 34 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ff547030fa..9a0cc41445 100644 --- 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 index 31df32aa80..e66a1fb9d9 100644 --- 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 index 073c704204..f8ebe832f0 100644 --- 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 ( { onChange={toggleDisabled} checked={isDisabled} /> +   + { recentlyUsedRanges={recentlyUsedRanges} showUpdateButton={showUpdateButton} isAutoRefreshOnly={isAutoRefreshOnly} + compressed={compressed} /> diff --git a/src/components/date_picker/date_picker_range.tsx b/src/components/date_picker/date_picker_range.tsx index 14c88755cd..5214b2db2b 100644 --- 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 = ({ @@ -80,6 +85,7 @@ export const OuiDatePickerRange: FunctionComponent = ({ fullWidth, isCustom, readOnly, + compressed, ...rest }) => { const classes = classNames( @@ -87,6 +93,7 @@ export const OuiDatePickerRange: FunctionComponent = ({ { '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 index a316556712..79aad0a7e2 100644 --- 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 index 2930349584..6043cd76d1 100644 --- 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 index 4b52300462..7371ec59e2 100644 --- 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 = ( @@ -82,6 +83,7 @@ export const OuiDatePopoverButton: FunctionComponent isOpen, onPopoverToggle, onPopoverClose, + compressed, ...rest } = props; @@ -93,6 +95,7 @@ export const OuiDatePopoverButton: FunctionComponent '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 index 2e475e905a..51267ddda3 100644 --- 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<