@patternfly/react-core 5.0.0-alpha.99 → 5.0.0-prerelease.1

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

@@ -2,109 +2,167 @@
 
 exports[`TextInput default read only text input 1`] = `
 <DocumentFragment>
-  <input
-    aria-invalid="false"
-    aria-label="default read only text input"
-    class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-TextInputBase-5"
-    data-ouia-component-type="PF4/TextInput"
-    data-ouia-safe="true"
-    readonly=""
-    type="text"
-    value="read only default"
-  />
+  <div
+    class="pf-v5-c-form-control pf-m-readonly"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="default read only text input"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+      data-ouia-component-type="PF4/TextInput"
+      data-ouia-safe="true"
+      readonly=""
+      type="text"
+      value="read only default"
+    />
+  </div>
 </DocumentFragment>
 `;
 
 exports[`TextInput disabled text input 1`] = `
 <DocumentFragment>
-  <input
-    aria-invalid="false"
-    aria-label="disabled text input"
-    class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-    data-ouia-component-type="PF4/TextInput"
-    data-ouia-safe="true"
-    disabled=""
-    type="text"
-    value=""
-  />
+  <div
+    class="pf-v5-c-form-control pf-m-disabled"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="disabled text input"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+      data-ouia-component-type="PF4/TextInput"
+      data-ouia-safe="true"
+      disabled=""
+      type="text"
+      value=""
+    />
+  </div>
 </DocumentFragment>
 `;
 
 exports[`TextInput invalid text input 1`] = `
 <DocumentFragment>
-  <input
-    aria-invalid="true"
-    aria-label="invalid text input"
-    class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-TextInputBase-7"
-    data-ouia-component-type="PF4/TextInput"
-    data-ouia-safe="true"
-    type="text"
-    value="test input"
-  />
+  <div
+    class="pf-v5-c-form-control pf-m-error"
+  >
+    <input
+      aria-invalid="true"
+      aria-label="invalid text input"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-7"
+      data-ouia-component-type="PF4/TextInput"
+      data-ouia-safe="true"
+      type="text"
+      value="test input"
+    />
+    <div
+      class="pf-v5-c-form-control__utilities"
+    >
+      <div
+        class="pf-v5-c-form-control__icon pf-m-status"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`TextInput plain read only text input 1`] = `
 <DocumentFragment>
-  <input
-    aria-invalid="false"
-    aria-label="plain read only text input"
-    class="pf-v5-c-form-control pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-TextInputBase-6"
-    data-ouia-component-type="PF4/TextInput"
-    data-ouia-safe="true"
-    readonly=""
-    type="text"
-    value="read only plain"
-  />
+  <div
+    class="pf-v5-c-form-control pf-m-readonly pf-m-plain"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="plain read only text input"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-6"
+      data-ouia-component-type="PF4/TextInput"
+      data-ouia-safe="true"
+      readonly=""
+      type="text"
+      value="read only plain"
+    />
+  </div>
 </DocumentFragment>
 `;
 
 exports[`TextInput read only text input using isReadOnly 1`] = `
 <DocumentFragment>
-  <input
-    aria-invalid="false"
-    aria-label="read only text input"
+  <div
     class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-    data-ouia-component-type="PF4/TextInput"
-    data-ouia-safe="true"
-    readonly=""
-    type="text"
-    value="read only"
-  />
+  >
+    <input
+      aria-invalid="false"
+      aria-label="read only text input"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+      data-ouia-component-type="PF4/TextInput"
+      data-ouia-safe="true"
+      type="text"
+      value="read only"
+    />
+  </div>
 </DocumentFragment>
 `;
 
 exports[`TextInput simple text input 1`] = `
 <DocumentFragment>
-  <input
-    aria-invalid="false"
-    aria-label="simple text input"
+  <div
     class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-    data-ouia-component-type="PF4/TextInput"
-    data-ouia-safe="true"
-    type="text"
-    value="test input"
-  />
+  >
+    <input
+      aria-invalid="false"
+      aria-label="simple text input"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+      data-ouia-component-type="PF4/TextInput"
+      data-ouia-safe="true"
+      type="text"
+      value="test input"
+    />
+  </div>
 </DocumentFragment>
 `;
 
 exports[`TextInput validated text input error 1`] = `
 <DocumentFragment>
-  <input
-    aria-invalid="true"
-    aria-label="validated text input"
-    class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-TextInputBase-10"
-    data-ouia-component-type="PF4/TextInput"
-    data-ouia-safe="true"
-    type="text"
-    value="test input"
-  />
+  <div
+    class="pf-v5-c-form-control pf-m-error"
+  >
+    <input
+      aria-invalid="true"
+      aria-label="validated text input"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-10"
+      data-ouia-component-type="PF4/TextInput"
+      data-ouia-safe="true"
+      type="text"
+      value="test input"
+    />
+    <div
+      class="pf-v5-c-form-control__utilities"
+    >
+      <div
+        class="pf-v5-c-form-control__icon pf-m-status"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;

package/src/components/TextInput/examples/TextInput.md

@@ -2,50 +2,59 @@
 id: Text input
 section: components
 subsection: forms
-cssPrefix: pf-c-form-control
+cssPrefix: pf-v5-c-form-control
 propComponents: ['TextInput']
 ---
 
+import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';
+import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
+
 ## Examples
 
 ### Basic
 
 ```ts file="./TextInputBasic.tsx"
+
 ```
 
 ### Disabled
 
 ```ts file="./TextInputDisabled.tsx"
+
 ```
 
 ### Truncated on Left
 
 ```ts file="./TextInputLeftTruncated.tsx"
+
 ```
 
 ### Read only
 
 ```ts file="./TextInputReadOnly.tsx"
+
 ```
 
 ### Invalid
 
 ```ts file="./TextInputInvalid.tsx"
+
 ```
 
 ### Select text using ref
 
 ```ts file="./TextInputSelectUsingRef.tsx"
+
 ```
 
-### Icon variants
+### Custom icon
+
+```ts file="./TextInputCustomIcon.tsx"
 
-```ts file="./TextInputIcon.tsx"
 ```
 
-### Icon sprite variants
+### Custom icon and invalid
 
-**Note:** The icons for the success, invalid, calendar, etc. variations in form control elements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
+```ts file="./TextInputCustomIconInvalid.tsx"
 
-```ts file="./TextInputIconSprite.tsx"
 ```

package/src/components/TextInput/examples/TextInputCustomIcon.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { TextInput } from '@patternfly/react-core';
+import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';
+import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
+
+export const TextInputCustomIcon: React.FunctionComponent = () => {
+  const [calendar, setCalendar] = React.useState('');
+  const [clock, setClock] = React.useState('');
+
+  return (
+    <>
+      <TextInput
+        value={calendar}
+        type="text"
+        customIcon={<CalendarIcon />}
+        onChange={(_event, value) => setCalendar(value)}
+        aria-label="text input example with calendar icon"
+      />
+      <br />
+      <br />
+      <TextInput
+        value={clock}
+        type="text"
+        customIcon={<ClockIcon />}
+        onChange={(_event, value) => setClock(value)}
+        aria-label="text input example with clock icon"
+      />
+    </>
+  );
+};

package/src/components/TextInput/examples/TextInputCustomIconInvalid.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TextInput, ValidatedOptions } from '@patternfly/react-core';
+import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';
+
+export const TextInputCustomIconInvalid: React.FunctionComponent = () => {
+  const [calendar, setCalendar] = React.useState('');
+
+  return (
+    <>
+      <TextInput
+        value={calendar}
+        type="text"
+        validated={ValidatedOptions.error}
+        customIcon={<CalendarIcon />}
+        onChange={(_event, value) => setCalendar(value)}
+        aria-label="text input example with calendar icon"
+      />
+    </>
+  );
+};

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

@@ -17,7 +17,7 @@ describe('TextInputGroup', () => {
     expect(screen.getByText('Test')).toBeVisible();
   });
 
-  it('renders with class pf-c-text-input-group', () => {
+  it('renders with class pf-v5-c-text-input-group', () => {
     render(<TextInputGroup>Test</TextInputGroup>);
 
     const inputGroup = screen.getByText('Test');

package/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx

@@ -20,7 +20,7 @@ describe('TextInputGroupMain', () => {
     expect(screen.getByText('Test')).toBeVisible();
   });
 
-  it('renders with class pf-c-text-input-group__main', () => {
+  it('renders with class pf-v5-c-text-input-group__main', () => {
     render(<TextInputGroupMain>Test</TextInputGroupMain>);
 
     const inputGroupMain = screen.getByText('Test');
@@ -52,7 +52,7 @@ describe('TextInputGroupMain', () => {
     expect(inputGroupMain).toHaveClass('custom-class');
   });
 
-  it('renders with class pf-c-text-input-group__text on the inputs parent', () => {
+  it('renders with class pf-v5-c-text-input-group__text on the inputs parent', () => {
     render(<TextInputGroupMain>Test</TextInputGroupMain>);
 
     const inputGroupText = screen.getByRole('textbox').parentNode;
@@ -60,7 +60,7 @@ describe('TextInputGroupMain', () => {
     expect(inputGroupText).toHaveClass('pf-v5-c-text-input-group__text');
   });
 
-  it('renders the input with class pf-c-text-input-group__text-input', () => {
+  it('renders the input with class pf-v5-c-text-input-group__text-input', () => {
     render(<TextInputGroupMain>Test</TextInputGroupMain>);
 
     const input = screen.getByRole('textbox');
@@ -180,7 +180,7 @@ describe('TextInputGroupMain', () => {
     expect(hintInput).toBeInTheDocument();
   });
 
-  it('renders the hint input with classes pf-c-text-input-group__text-input and pf-m-hint', () => {
+  it('renders the hint input with classes pf-v5-c-text-input-group__text-input and pf-m-hint', () => {
     // we set the type of the main input to search here so that we can accurately target the hint input
     render(
       <TextInputGroupMain hint="Test" type="search">

package/src/components/TextInputGroup/__tests__/TextInputGroupUtilities.test.tsx

@@ -18,7 +18,7 @@ describe('TextInputGroupUtilities', () => {
     expect(screen.getByRole('button', { name: 'Test' })).toBeVisible();
   });
 
-  it('renders with class pf-c-text-input-group__utilities', () => {
+  it('renders with class pf-v5-c-text-input-group__utilities', () => {
     render(<TextInputGroupUtilities>Test</TextInputGroupUtilities>);
 
     const utilities = screen.getByText('Test');

package/src/components/TextInputGroup/examples/TextInputGroup.md

@@ -1,9 +1,8 @@
 ---
 id: Text input group
 section: components
-cssPrefix: pf-c-text-input-group
+cssPrefix: pf-v5-c-text-input-group
 propComponents: ['TextInputGroup', 'TextInputGroupMain', 'TextInputGroupUtilities']
-beta: true
 ---
 
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';

package/src/components/Tile/examples/Tile.md

@@ -1,9 +1,8 @@
 ---
 id: Tile
 section: components
-cssPrefix: pf-c-tile
+cssPrefix: pf-v5-c-tile
 propComponents: ['Tile']
-beta: true
 ---
 
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';

package/src/components/TimePicker/TimePicker.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import datePickerStyles from '@patternfly/react-styles/css/components/DatePicker/date-picker';
-import formStyles from '@patternfly/react-styles/css/components/FormControl/form-control';
 import menuStyles from '@patternfly/react-styles/css/components/Menu/menu';
 import { getUniqueId } from '../../helpers';
 import { Popper } from '../../helpers/Popper/Popper';
 import { Menu, MenuContent, MenuList, MenuItem } from '../Menu';
-import { InputGroup } from '../InputGroup';
+import { InputGroup, InputGroupItem } from '../InputGroup';
 import { TextInput, TextInputProps } from '../TextInput';
 import { KeyTypes } from '../../helpers/constants';
 import {
@@ -21,7 +20,7 @@ import {
   getSeconds
 } from './TimePickerUtils';
 import { HelperText, HelperTextItem } from '../HelperText';
-
+import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
 export interface TimePickerProps
   extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'> {
   /** Additional classes added to the time picker. */
@@ -502,18 +501,18 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     const textInput = (
       <TextInput
         aria-haspopup="menu"
-        className={css(formStyles.formControl)}
         id={`${randomId}-input`}
         aria-label={ariaLabel}
         validated={isInvalid ? 'error' : 'default'}
         placeholder={placeholder}
         value={timeState || ''}
         type="text"
-        iconVariant="clock"
+        customIcon={<OutlinedClockIcon />}
         onClick={this.onInputClick}
         onChange={this.onInputChange}
         autoComplete="off"
         isDisabled={isDisabled}
+        isExpanded={isTimeOptionsOpen}
         ref={this.inputRef}
         {...inputProps}
       />
@@ -535,19 +534,21 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
       <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' }}>
-                <Popper
-                  appendTo={calculatedAppendTo}
-                  trigger={textInput}
-                  triggerRef={this.inputRef}
-                  popper={menuContainer}
-                  popperRef={this.menuRef}
-                  isVisible={isTimeOptionsOpen}
-                  zIndex={zIndex}
-                />
+            <InputGroupItem>
+              <div id={randomId}>
+                <div ref={this.toggleRef} style={{ paddingLeft: '0' }}>
+                  <Popper
+                    appendTo={calculatedAppendTo}
+                    trigger={textInput}
+                    triggerRef={this.toggleRef}
+                    popper={menuContainer}
+                    popperRef={this.menuRef}
+                    isVisible={isTimeOptionsOpen}
+                    zIndex={zIndex}
+                  />
+                </div>
               </div>
-            </div>
+            </InputGroupItem>
           </InputGroup>
           {isInvalid && (
             <div className={css(datePickerStyles.datePickerHelperText)}>

package/src/components/TimePicker/examples/TimePicker.md

@@ -2,7 +2,7 @@
 id: Time picker
 section: components
 subsection: date-and-time
-cssPrefix: pf-c-time-picker
+cssPrefix: pf-v5-c-time-picker
 propComponents: ['TimePicker']
 beta: true
 ---

package/src/components/Timestamp/Timestamp.tsx

@@ -135,7 +135,7 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
       {...(tooltip && { tabIndex: 0 })}
       {...propsWithoutDateTime}
     >
-      <time className="pf-c-timestamp__text" dateTime={dateTime || new Date(date).toISOString()}>
+      <time className="pf-v5-c-timestamp__text" dateTime={dateTime || new Date(date).toISOString()}>
         {!children ? defaultDisplay : children}
       </time>
     </span>

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

@@ -141,16 +141,16 @@ test('Renders with 12 hour time for a 24 hour locale when is12Hour is passed', (
   expect(screen.getByText('01/02/2022, 1:00:00 pm')).toBeInTheDocument();
 });
 
-test('Renders with pf-c-timestamp by default', () => {
+test('Renders with pf-v5-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-v5-c-timestamp');
 });
 
-test('Renders with pf-c-timestamp__text by default', () => {
+test('Renders with pf-v5-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');
+  expect(screen.getByText('1/1/2022, 12:00:00 AM')).toHaveClass('pf-v5-c-timestamp__text');
 });
 
 test('Renders with custom class names', () => {

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

@@ -3,10 +3,10 @@
 exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <span
-    class="pf-c-timestamp"
+    class="pf-v5-c-timestamp"
   >
     <time
-      class="pf-c-timestamp__text"
+      class="pf-v5-c-timestamp__text"
       datetime="2022-01-01T00:00:00.000Z"
     >
       1/1/2022, 12:00:00 AM

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

@@ -1,7 +1,7 @@
 ---
 id: Timestamp
 section: components
-cssPrefix: pf-c-timestamp
+cssPrefix: pf-v5-c-timestamp
 propComponents: ['Timestamp', 'TimestampTooltip']
 beta: true
 ---

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

@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the pf-c-title', () => {
+test('Renders with the pf-v5-c-title', () => {
   render(<Title headingLevel="h1">Test</Title>);
   expect(screen.getByRole('heading')).toHaveClass('pf-v5-c-title');
 });
 
-test('Renders with only the class pf-c-title and the heading level modifier class pf-m-2xl by default', () => {
+test('Renders with only the class pf-v5-c-title and the heading level modifier class pf-m-2xl by default', () => {
   render(<Title headingLevel="h1">Test</Title>);
   expect(screen.getByRole('heading')).toHaveClass('pf-v5-c-title pf-m-2xl', { exact: true });
 });

package/src/components/Title/examples/Title.md

@@ -1,7 +1,7 @@
 ---
 id: Title
 section: components
-cssPrefix: pf-c-title
+cssPrefix: pf-v5-c-title
 propComponents: ['Title']
 ---
 

package/src/components/ToggleGroup/examples/ToggleGroup.md

@@ -1,7 +1,7 @@
 ---
 id: Toggle group
 section: components
-cssPrefix: pf-c-toggle-group
+cssPrefix: pf-v5-c-toggle-group
 propComponents: ['ToggleGroup', 'ToggleGroupItem']
 ---
 import './toggleGroup.css';

package/src/components/Toolbar/examples/Toolbar.md

@@ -1,6 +1,6 @@
 ---
 id: Toolbar
-cssPrefix: pf-c-toolbar
+cssPrefix: pf-v5-c-toolbar
 propComponents: ['Toolbar', 'ToolbarContent', 'ToolbarGroup', 'ToolbarItem', 'ToolbarToggleGroup', 'ToolbarFilter']
 section: components
 ---