diff --git a/changelogs/upcoming/7502.md b/changelogs/upcoming/7502.md index 9bf2bf013e5..f4ff0ca7b86 100644 --- a/changelogs/upcoming/7502.md +++ b/changelogs/upcoming/7502.md @@ -1 +1 @@ -- Updated `EuiSuperDatePicker` with a new `preferLargerRelativeUnits` prop, which defaults to true (current behavior). To preserve displaying the unit that users select, set this to false. +- Updated `EuiSuperDatePicker` with a new `canRoundRelativeUnits` prop, which defaults to true (current behavior). To preserve displaying the unit that users select for relative time, set this to false. diff --git a/src-docs/src/views/super_date_picker/playground.js b/src-docs/src/views/super_date_picker/playground.js index de43f3fdbbf..31a5ab6f0ea 100644 --- a/src-docs/src/views/super_date_picker/playground.js +++ b/src-docs/src/views/super_date_picker/playground.js @@ -32,8 +32,8 @@ export const superDatePickerConfig = () => { value: true, }; - propsToUse.preferLargerRelativeUnits = { - ...propsToUse.preferLargerRelativeUnits, + propsToUse.canRoundRelativeUnits = { + ...propsToUse.canRoundRelativeUnits, type: PropTypes.Boolean, defaultValue: true, value: true, 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 5b1af6f28c8..e238d0df208 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 @@ -38,7 +38,7 @@ export interface EuiDatePopoverButtonProps { onPopoverClose: EuiPopoverProps['closePopover']; onPopoverToggle: MouseEventHandler; position: 'start' | 'end'; - preferLargerRelativeUnits?: boolean; + canRoundRelativeUnits?: boolean; roundUp?: boolean; timeFormat: string; value: string; @@ -57,7 +57,7 @@ export const EuiDatePopoverButton: FunctionComponent< needsUpdating, value, buttonProps, - preferLargerRelativeUnits, + canRoundRelativeUnits, roundUp, onChange, locale, @@ -87,7 +87,7 @@ export const EuiDatePopoverButton: FunctionComponent< const formattedValue = useFormatTimeString(value, dateFormat, { roundUp, locale, - preferLargerRelativeUnits, + canRoundRelativeUnits, }); let title = formattedValue; @@ -134,7 +134,7 @@ export const EuiDatePopoverButton: FunctionComponent< void; - preferLargerRelativeUnits?: boolean; + canRoundRelativeUnits?: boolean; roundUp?: boolean; dateFormat: string; timeFormat: string; @@ -42,7 +42,7 @@ export const EuiDatePopoverContent: FunctionComponent< EuiDatePopoverContentProps > = ({ value, - preferLargerRelativeUnits = true, + canRoundRelativeUnits = true, roundUp = false, onChange, dateFormat, @@ -111,7 +111,7 @@ export const EuiDatePopoverContent: FunctionComponent< dateFormat={dateFormat} locale={locale} value={ - preferLargerRelativeUnits ? toAbsoluteString(value, roundUp) : value + canRoundRelativeUnits ? toAbsoluteString(value, roundUp) : value } onChange={onChange} roundUp={roundUp} diff --git a/src/components/date_picker/super_date_picker/pretty_duration.test.tsx b/src/components/date_picker/super_date_picker/pretty_duration.test.tsx index b9db7f53885..c7b5cce5bd3 100644 --- a/src/components/date_picker/super_date_picker/pretty_duration.test.tsx +++ b/src/components/date_picker/super_date_picker/pretty_duration.test.tsx @@ -154,8 +154,8 @@ describe('useFormatTimeString', () => { ).toBe('~ 15分後'); }); - describe('preferLargerRelativeUnits', () => { - const option = { preferLargerRelativeUnits: false }; + describe('canRoundRelativeUnits', () => { + const option = { canRoundRelativeUnits: false }; it("allows skipping moment.fromNow()'s default rounding", () => { expect( diff --git a/src/components/date_picker/super_date_picker/pretty_duration.tsx b/src/components/date_picker/super_date_picker/pretty_duration.tsx index 7803c3a35fd..3f6f36d2ef0 100644 --- a/src/components/date_picker/super_date_picker/pretty_duration.tsx +++ b/src/components/date_picker/super_date_picker/pretty_duration.tsx @@ -149,13 +149,13 @@ export const useFormatTimeString = ( options?: { locale?: LocaleSpecifier; roundUp?: boolean; - preferLargerRelativeUnits?: boolean; + canRoundRelativeUnits?: boolean; } ): string => { const { locale = 'en', roundUp = false, - preferLargerRelativeUnits = true, + canRoundRelativeUnits = true, } = options || {}; // i18n'd strings @@ -180,7 +180,7 @@ export const useFormatTimeString = ( } if (moment.isMoment(tryParse)) { - if (preferLargerRelativeUnits) { + if (canRoundRelativeUnits) { return `~ ${tryParse.locale(locale).fromNow()}`; } else { // To force a specific unit to be used, we need to skip moment.fromNow() diff --git a/src/components/date_picker/super_date_picker/super_date_picker.test.tsx b/src/components/date_picker/super_date_picker/super_date_picker.test.tsx index 9384d97348d..418089185fa 100644 --- a/src/components/date_picker/super_date_picker/super_date_picker.test.tsx +++ b/src/components/date_picker/super_date_picker/super_date_picker.test.tsx @@ -320,7 +320,7 @@ describe('EuiSuperDatePicker', () => { }); }); - describe('preferLargerRelativeUnits', () => { + describe('canRoundRelativeUnits', () => { const props = { onTimeChange: noop, start: 'now-300m', @@ -329,7 +329,7 @@ describe('EuiSuperDatePicker', () => { it('defaults to true, which will round relative units up to the next largest unit', () => { const { getByTestSubject } = render( - + ); fireEvent.click(getByTestSubject('superDatePickerShowDatesButton')); @@ -355,7 +355,7 @@ describe('EuiSuperDatePicker', () => { it('when false, allows preserving the unit set in the start/end time timestamp', () => { const { getByTestSubject } = render( - + ); fireEvent.click(getByTestSubject('superDatePickerShowDatesButton')); 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 ceed9a315b6..4c7af4498e3 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 @@ -187,7 +187,7 @@ export type EuiSuperDatePickerProps = CommonProps & { * If you do not want this behavior and instead wish to keep the exact units * input by the user, set this flag to `false`. */ - preferLargerRelativeUnits?: boolean; + canRoundRelativeUnits?: boolean; }; type EuiSuperDatePickerInternalProps = EuiSuperDatePickerProps & { @@ -250,7 +250,7 @@ export class EuiSuperDatePickerInternal extends Component< recentlyUsedRanges: [], refreshInterval: 1000, showUpdateButton: true, - preferLargerRelativeUnits: true, + canRoundRelativeUnits: true, start: 'now-15m', timeFormat: 'HH:mm', width: 'restricted', @@ -478,7 +478,7 @@ export class EuiSuperDatePickerInternal extends Component< isQuickSelectOnly, showUpdateButton, commonlyUsedRanges, - preferLargerRelativeUnits, + canRoundRelativeUnits, timeOptions, dateFormat, refreshInterval, @@ -573,7 +573,7 @@ export class EuiSuperDatePickerInternal extends Component< utcOffset={utcOffset} timeFormat={timeFormat} locale={locale || contextLocale} - preferLargerRelativeUnits={preferLargerRelativeUnits} + canRoundRelativeUnits={canRoundRelativeUnits} isOpen={this.state.isStartDatePopoverOpen} onPopoverToggle={this.onStartDatePopoverToggle} onPopoverClose={this.onStartDatePopoverClose} @@ -594,7 +594,7 @@ export class EuiSuperDatePickerInternal extends Component< utcOffset={utcOffset} timeFormat={timeFormat} locale={locale || contextLocale} - preferLargerRelativeUnits={preferLargerRelativeUnits} + canRoundRelativeUnits={canRoundRelativeUnits} roundUp isOpen={this.state.isEndDatePopoverOpen} onPopoverToggle={this.onEndDatePopoverToggle}