@patternfly/react-core 4.232.13 → 4.234.0

package/src/components/NumberInput/examples/NumberInput.md

@@ -270,6 +270,11 @@ class DisabledNumberInput extends React.Component {
     );
   }
 }
+
+```
+### With status
+
+```ts file="./WithStatus.tsx"
 ```
 
 ### Varying sizes

package/src/components/NumberInput/examples/WithStatus.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { NumberInput, ValidatedOptions } from '@patternfly/react-core';
+
+export const WithStatus: React.FunctionComponent = () => {
+  const max = 10;
+  const min = 0;
+
+  const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.success);
+  const [value, setValue] = React.useReducer((state, newVal) => Math.max(min, Math.min(max, Number(newVal))), 5);
+
+  const onPlus = () => {
+    const newVal = value + 1;
+    setValue(newVal);
+    validate(newVal);
+  };
+
+  const onMinus = () => {
+    const newVal = value - 1;
+    setValue(newVal);
+    validate(newVal);
+  };
+
+  const onChange = event => {
+    const newVal = isNaN(event.target.value) ? 5 : Number(event.target.value);
+    setValue(newVal);
+    validate(newVal);
+  };
+
+  const validate = newVal => {
+    const diff = Math.abs(5 - newVal);
+    if (diff > 3) {
+      setValidated(ValidatedOptions.error);
+    } else if (diff > 1) {
+      setValidated(ValidatedOptions.warning);
+    } else {
+      setValidated(ValidatedOptions.success);
+    }
+  };
+  return (
+    <>
+      In the following example, the validated status will update based on the value of the number input and how far from
+      the number 5 it is.
+      <br />
+      <NumberInput
+        validated={validated}
+        value={value}
+        min={0}
+        max={10}
+        onMinus={onMinus}
+        onPlus={onPlus}
+        onChange={onChange}
+        inputName="input"
+        inputAriaLabel="number input"
+        minusBtnAriaLabel="minus"
+        plusBtnAriaLabel="plus"
+      />
+    </>
+  );
+};

package/src/components/TimePicker/TimePicker.tsx

@@ -107,6 +107,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     inputProps: {},
     minTime: '',
     maxTime: '',
+    isOpen: false,
     setIsOpen: () => {}
   };
 
@@ -490,24 +491,31 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
       />
     );
 
+    let calculatedAppendTo;
+    switch (menuAppendTo) {
+      case 'inline':
+        calculatedAppendTo = () => this.toggleRef.current;
+        break;
+      case 'parent':
+        calculatedAppendTo = getParentElement;
+        break;
+      default:
+        calculatedAppendTo = menuAppendTo as HTMLElement;
+    }
+
     return (
       <div ref={this.baseComponentRef} className={css(datePickerStyles.datePicker, className)}>
         <div className={css(datePickerStyles.datePickerInput)} style={style} {...props}>
           <InputGroup>
             <div id={randomId}>
               <div ref={this.toggleRef} style={{ paddingLeft: '0' }}>
-                {menuAppendTo !== 'inline' ? (
-                  <Popper
-                    appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
-                    trigger={textInput}
-                    popper={menuContainer}
-                    isVisible={isTimeOptionsOpen}
-                  />
-                ) : (
-                  textInput
-                )}
+                <Popper
+                  appendTo={calculatedAppendTo}
+                  trigger={textInput}
+                  popper={menuContainer}
+                  isVisible={isTimeOptionsOpen}
+                />
               </div>
-              {isTimeOptionsOpen && menuAppendTo === 'inline' && menuContainer}
             </div>
           </InputGroup>
           {isInvalid && (

package/src/components/Timestamp/Timestamp.tsx

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Timestamp/timestamp';
+import { css } from '@patternfly/react-styles';
+import { Tooltip } from '../Tooltip';
+
+export enum TimestampFormat {
+  full = 'full',
+  long = 'long',
+  medium = 'medium',
+  short = 'short'
+}
+
+export enum TimestampTooltipVariant {
+  default = 'default',
+  custom = 'custom'
+}
+
+export interface TimestampTooltip {
+  /** The variant of the tooltip. The "default" variant displays the date passed into
+   * the timestamp's date prop as a UTC string.
+   */
+  variant: 'default' | 'custom';
+  /** Content displayed in the tooltip when using the "custom" variant. */
+  content?: React.ReactNode;
+  /** Additional props passed to the tooltip. */
+  tooltipProps?: any;
+  /** A custom suffix to apply to a "default" variant tooltip. */
+  suffix?: string;
+}
+
+export interface TimestampProps extends React.HTMLProps<HTMLSpanElement> {
+  /** Displays custom content inside the timestamp, such as a relative time. This prop will
+   * override the default content that is displayed. Custom content will not be affected by
+   * any props that format or add to displayed content.
+   */
+  children?: React.ReactNode;
+  /** Class to add to the outer span. */
+  className?: string;
+  /** Applies custom formatting to the displayed date and/or time. Passing this prop in will
+   * override the dateFormat and timeFormat props.
+   */
+  customFormat?: { [key: string]: string };
+  /** Determines the default content that is displayed inside the timestamp and the value of
+   * the inner time element's datetime attribute. */
+  date?: Date;
+  /** Determines the format of the displayed date in the timestamp and UTC tooltip. Examples:
+   * "Full" => Tuesday, August 9, 2022;
+   * "Long" => August 9, 2022;
+   * "Medium" => Aug 9, 2022;
+   * "Short" => 8/9/22
+   */
+  dateFormat?: 'full' | 'long' | 'medium' | 'short';
+  /** Applies a custom suffix to the displayed content, usually after the time, such as a
+   * custom time zone.
+   */
+  displaySuffix?: string;
+  /** Flag for displaying the time in a 12 hour format. If this prop is not passed in,
+   * the hour format will be based on the locale prop's value.
+   */
+  is12Hour?: boolean;
+  /** Determines which locale to use in the displayed content. Defaults to the current locale
+   * when this prop is not passed in. For more information about locale's:
+   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
+   */
+  locale?: string;
+  /** Determines the format of the displayed time in the timestamp and UTC tooltip. Examples:
+   * "Full" => 11:25:00 AM Eastern Daylight Time
+   * "Long" => 11:25:00 AM EDT
+   * "Medium" => 11:25:00 AM
+   * "Short" => 11:25 AM
+   */
+  timeFormat?: 'full' | 'long' | 'medium' | 'short';
+  /** Adds a tooltip to the timestamp. */
+  tooltip?: TimestampTooltip;
+}
+
+export const Timestamp: React.FunctionComponent<TimestampProps> = ({
+  children,
+  className,
+  customFormat,
+  date: dateProp = new Date(),
+  dateFormat,
+  displaySuffix = '',
+  is12Hour,
+  locale,
+  timeFormat,
+  tooltip,
+  ...props
+}: TimestampProps) => {
+  const hasTimeFormat = timeFormat && !customFormat;
+  const formatOptions = {
+    ...(dateFormat && !customFormat && { dateStyle: dateFormat }),
+    ...(customFormat && { ...customFormat }),
+    ...(is12Hour !== undefined && { hour12: is12Hour })
+  };
+
+  const dateAsLocaleString = new Date(dateProp).toLocaleString(locale, {
+    ...formatOptions,
+    ...(hasTimeFormat && { timeStyle: timeFormat })
+  });
+  const defaultDisplay = `${dateAsLocaleString}${displaySuffix ? ' ' + displaySuffix : ''}`;
+
+  const utcTimeFormat = timeFormat !== 'short' ? 'medium' : 'short';
+  const convertToUTCString = (date: Date) => new Date(date).toUTCString().slice(0, -3);
+  const utcDateString = new Date(convertToUTCString(dateProp)).toLocaleString(locale, {
+    ...formatOptions,
+    ...(hasTimeFormat && { timeStyle: utcTimeFormat })
+  });
+  const defaultTooltipContent = `${utcDateString}${tooltip?.suffix ? ' ' + tooltip.suffix : ' UTC'}`;
+
+  const timestamp = (
+    <span
+      className={css(styles.timestamp, tooltip && styles.modifiers.helpText, className)}
+      {...(tooltip && { tabIndex: 0 })}
+      {...props}
+    >
+      <time className="pf-c-timestamp__text" dateTime={props.dateTime || new Date(dateProp).toISOString()}>
+        {!children ? defaultDisplay : children}
+      </time>
+    </span>
+  );
+
+  return tooltip ? (
+    <Tooltip
+      content={tooltip.variant === TimestampTooltipVariant.default ? defaultTooltipContent : tooltip.content}
+      {...tooltip.tooltipProps}
+    >
+      {timestamp}
+    </Tooltip>
+  ) : (
+    timestamp
+  );
+};
+Timestamp.displayName = 'Timestamp';

package/src/components/Timestamp/__tests__/Timestamp.test.tsx

@@ -0,0 +1,177 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Timestamp, TimestampFormat, TimestampTooltipVariant } from '../Timestamp';
+
+jest.mock('../../Tooltip', () => ({
+  Tooltip: ({ content, children, ...props }) => (
+    <div data-testid="timestamp-tooltip-mock" {...props}>
+      <div data-testid="timestamp-tooltip-mock-content">{content}</div>
+      {children}
+    </div>
+  )
+}));
+
+test('Matches snapshot', () => {
+  /** Due to how the datetime attribute is contstructed internally, dateTime must be
+   * manually passed for this snapshot to pass on GitHub.
+   */
+  const { asFragment } = render(<Timestamp dateTime="2022-01-01T00:00:00.000Z" date={new Date(2022, 0, 1)} />);
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders component', () => {
+  render(
+    <div data-testid="timestamp-container">
+      <Timestamp />
+    </div>
+  );
+
+  expect(screen.getByTestId('timestamp-container').firstChild).toBeVisible();
+});
+
+test('Renders with current date by default with default formatting', () => {
+  render(<Timestamp />);
+
+  expect(screen.getByText(new Date().toLocaleString())).toBeInTheDocument();
+});
+
+test('Renders passed in date with default formatting', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} />);
+
+  expect(screen.getByText('1/1/2022, 12:00:00 AM')).toBeInTheDocument();
+});
+
+test('Renders with custom formatting when dateFormat and timeFormat are passed in', () => {
+  render(
+    <Timestamp date={new Date(2022, 0, 1)} dateFormat={TimestampFormat.full} timeFormat={TimestampFormat.short} />
+  );
+
+  expect(screen.getByText('Saturday, January 1, 2022 at 12:00 AM')).toBeInTheDocument();
+});
+
+test('Renders with only date when dateFormat is passed in', () => {
+  render(<Timestamp date={new Date('1 Jan 2022 00:00:00 EST')} dateFormat={TimestampFormat.full} />);
+
+  expect(screen.getByText('Saturday, January 1, 2022')).toBeInTheDocument();
+});
+
+test('Renders with only time when timeFormat is passed in', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} timeFormat={TimestampFormat.short} />);
+
+  expect(screen.getByText('12:00 AM')).toBeInTheDocument();
+});
+
+test('Renders with custom formatting when customFormat is passed in', () => {
+  render(
+    <Timestamp
+      date={new Date(2022, 0, 1)}
+      customFormat={{ year: '2-digit', month: 'short', weekday: 'short', day: 'numeric', hour: 'numeric' }}
+    />
+  );
+
+  expect(screen.getByText('Sat, Jan 1, 22, 12 AM')).toBeInTheDocument();
+});
+
+test('Renders with custom content', () => {
+  render(<Timestamp>2 days ago</Timestamp>);
+
+  expect(screen.getByText('2 days ago')).toBeInTheDocument();
+});
+
+test('Renders with a custom suffix when displaySuffix is passed in', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} displaySuffix="US Eastern" />);
+
+  expect(screen.getByText('1/1/2022, 12:00:00 AM US Eastern')).toBeInTheDocument();
+});
+
+test('Renders with 12 hour time when is12Hour is passed', () => {
+  render(<Timestamp date={new Date(2022, 0, 1, 13, 0)} is12Hour />);
+
+  expect(screen.getByText('1/1/2022, 1:00:00 PM')).toBeInTheDocument();
+});
+
+test('Renders with 24 hour time when is12Hour is set to false', () => {
+  render(<Timestamp date={new Date(2022, 0, 1, 13, 0)} is12Hour={false} />);
+
+  expect(screen.getByText('1/1/2022, 13:00:00')).toBeInTheDocument();
+});
+
+test('Renders with locale passed in', () => {
+  render(<Timestamp date={new Date(2022, 1, 1)} locale="en-GB" />);
+
+  expect(screen.getByText('01/02/2022, 00:00:00')).toBeInTheDocument();
+});
+
+test('Renders with 12 hour time by default for US locale', () => {
+  render(<Timestamp date={new Date(2022, 1, 1, 13, 0)} locale="en-US" />);
+
+  expect(screen.getByText('2/1/2022, 1:00:00 PM')).toBeInTheDocument();
+});
+
+test('Renders with 24 hour time for US locale when is12Hour is false', () => {
+  render(<Timestamp date={new Date(2022, 1, 1, 13, 0)} locale="en-US" is12Hour={false} />);
+
+  expect(screen.getByText('2/1/2022, 13:00:00')).toBeInTheDocument();
+});
+
+test('Renders with 12 hour time for a 24 hour locale when is12Hour is passed', () => {
+  render(<Timestamp date={new Date(2022, 1, 1, 13, 0)} locale="en-GB" is12Hour />);
+
+  expect(screen.getByText('01/02/2022, 1:00:00 pm')).toBeInTheDocument();
+});
+
+test('Renders with pf-c-timestamp by default', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} />);
+
+  expect(screen.getByText('1/1/2022, 12:00:00 AM').parentElement).toHaveClass('pf-c-timestamp');
+});
+
+test('Renders with pf-c-timestamp__text by default', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} />);
+
+  expect(screen.getByText('1/1/2022, 12:00:00 AM')).toHaveClass('pf-c-timestamp__text');
+});
+
+test('Renders with custom class names', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} className="custom-time-class" />);
+
+  expect(screen.getByText('1/1/2022, 12:00:00 AM').parentElement).toHaveClass('custom-time-class');
+});
+
+test('Renders with pf-m-help-text class when tooltip is passed in with default variant', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} tooltip={{ variant: TimestampTooltipVariant.default }} />);
+
+  expect(screen.getByText('1/1/2022, 12:00:00 AM').parentElement).toHaveClass('pf-m-help-text');
+});
+
+test('Renders with pf-m-help-text class when tooltip is passed in with custom variant', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} tooltip={{ variant: TimestampTooltipVariant.custom }} />);
+
+  expect(screen.getByText('1/1/2022, 12:00:00 AM').parentElement).toHaveClass('pf-m-help-text');
+});
+
+test('Renders with default tooltip content for default variant', () => {
+  render(
+    <Timestamp date={new Date('1 Jan 2022 00:00:00 EST')} tooltip={{ variant: TimestampTooltipVariant.default }} />
+  );
+
+  expect(screen.getByText('1/1/2022, 5:00:00 AM UTC')).toBeInTheDocument();
+});
+
+test('Renders with custom tooltip suffix for default variant', () => {
+  render(
+    <Timestamp
+      date={new Date('1 Jan 2022 00:00:00 EST')}
+      tooltip={{ variant: TimestampTooltipVariant.default, suffix: 'Coordinated Universal Time' }}
+    />
+  );
+
+  expect(screen.getByText('1/1/2022, 5:00:00 AM Coordinated Universal Time')).toBeInTheDocument();
+});
+
+test('Renders with custom tooltip content', () => {
+  render(<Timestamp tooltip={{ variant: TimestampTooltipVariant.custom, content: 'Custom tooltip content' }} />);
+
+  expect(screen.getByText('Custom tooltip content')).toBeInTheDocument();
+});

package/src/components/Timestamp/__tests__/__snapshots__/Timestamp.test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-timestamp"
+    datetime="2022-01-01T00:00:00.000Z"
+  >
+    <time
+      class="pf-c-timestamp__text"
+      datetime="2022-01-01T00:00:00.000Z"
+    >
+      1/1/2022, 12:00:00 AM
+    </time>
+  </span>
+</DocumentFragment>
+`;

package/src/components/Timestamp/examples/Timestamp.md

@@ -0,0 +1,57 @@
+---
+id: Timestamp
+section: components
+cssPrefix: pf-c-timestamp
+propComponents: ['Timestamp', 'TimestampTooltip']
+beta: true
+---
+
+## Examples
+
+### Default
+
+By default, a timestamp will display the current date and time based on the current locale if the `date` prop is not passed in.
+
+```ts file="./TimestampDefault.tsx"
+```
+
+### Basic formats
+
+The format of the displayed content can be customized by passing in the `dateFormat` and/or `timeFormat` props. Passing in only one of the props will display only the date or time, depending on which prop is passed in. The possible options are "full", "long", "medium", and "short".
+
+You can also pass in the `displaySuffix` prop to display a custom suffix at the end of the displayed content. This will not override a timezone that is already displayed from the applied time format.
+
+```ts file="./TimestampBasicFormats.tsx"
+```
+
+### Custom format
+
+The format of the displayed content can be further customized by passing in the `customFormat` prop. Read [datetime format options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) for a list of options that can be passed in.
+
+```ts file="./TimestampCustomFormat.tsx"
+```
+
+### Default tooltip
+
+To render a tooltip that displays the timestamp content as a UTC time, you can pass in the `tooltip` prop with a variant of "default". The format of the default tooltip content will match the format of the timestamp content.
+
+You can customize the suffix of this default tooltip variant by passing in `suffix` to the `tooltip` prop.
+
+```ts file="./TimestampDefaultTooltip.tsx"
+```
+
+### Custom content
+
+To display custom content, such as a relative time or prefacing text, you can pass in content to the `children` prop.
+
+When also rendering a default tooltip with the `tooltip` prop, you can pass in the `dateFormat` and/or `timeFormat` props to customize the tooltip content without affecting the custom timestamp content.
+
+```ts file="TimestampCustomContent.tsx"
+```
+
+### Custom tooltip
+
+By passing in `variant="custom"` and `content` to the `tooltip` prop, you can display custom content within the timestamp's tooltip.
+
+```ts file="TimestampCustomTooltip.tsx"
+```

package/src/components/Timestamp/examples/TimestampBasicFormats.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Timestamp, TimestampFormat } from '@patternfly/react-core';
+
+export const TimestampBasicFormats: React.FunctionComponent = () => {
+  const currentDate = new Date();
+
+  return (
+    <>
+      <Timestamp date={currentDate} dateFormat={TimestampFormat.full} timeFormat={TimestampFormat.full} />
+      <br />
+      <br />
+      <Timestamp date={currentDate} dateFormat={TimestampFormat.full} />
+      <br />
+      <br />
+      <Timestamp date={currentDate} timeFormat={TimestampFormat.full} />
+      <br />
+      <br />
+      <Timestamp
+        date={currentDate}
+        dateFormat={TimestampFormat.medium}
+        timeFormat={TimestampFormat.short}
+        displaySuffix="US Eastern"
+      />
+    </>
+  );
+};

package/src/components/Timestamp/examples/TimestampCustomContent.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Timestamp, TimestampFormat, TimestampTooltipVariant } from '@patternfly/react-core';
+
+export const TimestampCustomContent: React.FunctionComponent = () => (
+  <>
+    <Timestamp date={new Date(2022, 7, 9, 14, 57, 0)} tooltip={{ variant: TimestampTooltipVariant.default }}>
+      1 hour ago
+    </Timestamp>
+    <br />
+    <br />
+    <Timestamp
+      date={new Date(2022, 7, 9, 14, 57, 0)}
+      dateFormat={TimestampFormat.medium}
+      timeFormat={TimestampFormat.short}
+      tooltip={{ variant: TimestampTooltipVariant.default }}
+    >
+      Last updated August 9th, 2022 at 2:57 PM EDT
+    </Timestamp>
+  </>
+);

package/src/components/Timestamp/examples/TimestampCustomFormat.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Timestamp } from '@patternfly/react-core';
+
+export const TimestampCustomFormat: React.FunctionComponent = () => (
+  <Timestamp customFormat={{ year: '2-digit', month: 'short', weekday: 'short', day: 'numeric', hour: 'numeric' }} />
+);

package/src/components/Timestamp/examples/TimestampCustomTooltip.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core';
+
+export const TimestampCustomTooltip: React.FunctionComponent = () => (
+  <>
+    <Timestamp
+      date={new Date(2022, 7, 9, 14, 57, 0)}
+      tooltip={{ variant: TimestampTooltipVariant.custom, content: 'Last updated on August 9th, 2022 - 2:57 PM UTC' }}
+    />
+    <br />
+    <br />
+    <Timestamp
+      date={new Date(2022, 9, 31)}
+      tooltip={{ variant: TimestampTooltipVariant.custom, content: '31st of October, 2022' }}
+    >
+      Halloween
+    </Timestamp>
+  </>
+);

package/src/components/Timestamp/examples/TimestampDefault.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Timestamp } from '@patternfly/react-core';
+
+export const TimestampDefault: React.FunctionComponent = () => <Timestamp />;

package/src/components/Timestamp/examples/TimestampDefaultTooltip.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core';
+
+export const TimestampDefaultTooltip: React.FunctionComponent = () => {
+  const currentDate = new Date();
+
+  return (
+    <>
+      <Timestamp date={currentDate} tooltip={{ variant: TimestampTooltipVariant.default }} />
+      <br />
+      <br />
+      <Timestamp
+        date={currentDate}
+        tooltip={{ variant: TimestampTooltipVariant.default, suffix: 'Coordinated Universal Time' }}
+      />
+    </>
+  );
+};

package/src/components/Timestamp/index.ts

@@ -0,0 +1 @@
+export * from './Timestamp';

package/src/components/index.ts

@@ -73,6 +73,7 @@ export * from './TextArea';
 export * from './TextInput';
 export * from './Tile';
 export * from './TimePicker';
+export * from './Timestamp';
 export * from './Title';
 export * from './ToggleGroup';
 export * from './Toolbar';

package/src/demos/Button.md

@@ -5,10 +5,14 @@ section: components
 
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
-## Demos
+## Demos 
 
 ### Progress button
 
+The following demo shows the intended flow for a button that visually indicates progress. This example demonstrates a login process, which updates the button label based on the `loginState`. 
+
+Please note that only the button can be interacted with in this example. The username and password input fields cannot be edited as the focus is on the button behavior. 
+
 ```ts
 import React from 'react';
 import { Form, FormGroup, ActionGroup, InputGroup, TextInput, Button } from '@patternfly/react-core';