[PR feedback] naming: final_FINAL_v4.docx

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.

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,

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<HTMLButtonElement>;
   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<
       <EuiDatePopoverContent
         value={value}
         roundUp={roundUp}
-        preferLargerRelativeUnits={preferLargerRelativeUnits}
+        canRoundRelativeUnits={canRoundRelativeUnits}
         onChange={onChange}
         dateFormat={dateFormat}
         timeFormat={timeFormat}

src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx

@@ -28,7 +28,7 @@ import { LocaleSpecifier } from 'moment'; // eslint-disable-line import/named
 export interface EuiDatePopoverContentProps {
   value: string;
   onChange: (date: string) => 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}

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(

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()

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(
-          <EuiSuperDatePicker {...props} preferLargerRelativeUnits={true} />
+          <EuiSuperDatePicker {...props} canRoundRelativeUnits={true} />
         );
         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(
-          <EuiSuperDatePicker {...props} preferLargerRelativeUnits={false} />
+          <EuiSuperDatePicker {...props} canRoundRelativeUnits={false} />
         );
         fireEvent.click(getByTestSubject('superDatePickerShowDatesButton'));
 

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}