@patternfly/react-core 4.199.5 → 4.200.2

package/src/components/Select/__tests__/SelectOption.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import { shallow, mount } from 'enzyme';
+
+import { render, screen } from '@testing-library/react';
+
 import { SelectOption, SelectOptionObject } from '../SelectOption';
 import { SelectProvider } from '../selectConstants';
 
@@ -18,43 +19,48 @@ class User implements SelectOptionObject {
   toString = (): string => `${this.title}: ${this.firstName} ${this.lastName}`;
 }
 
-describe('select options', () => {
+describe('SelectOption', () => {
   test('renders with value parameter successfully', () => {
-    const view = mount(
+    render(
       <SelectProvider
         value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
       >
-        <SelectOption id="option-1" value="test" sendRef={jest.fn()} />
+        <SelectOption id="option-1" value="test" sendRef={jest.fn()} data-testid="test-id" />
       </SelectProvider>
     );
-    expect(view.instance().props).toHaveProperty('value', 'test');
-    expect(view).toMatchSnapshot();
+    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
   });
 
   test('renders with description successfully', () => {
-    const view = render(
+    render(
       <SelectProvider
         value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
       >
-        <SelectOption id="option-1" value="test" description="This is a description" sendRef={jest.fn()} />
+        <SelectOption
+          id="option-1"
+          value="test"
+          description="This is a description"
+          sendRef={jest.fn()}
+          data-testid="test-id"
+        />
       </SelectProvider>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
   });
 
   test('renders with item count successfully', () => {
-    const view = render(
+    render(
       <SelectProvider
         value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
       >
-        <SelectOption id="option-1" value="test" itemCount={3} sendRef={jest.fn()} />
+        <SelectOption id="option-1" value="test" itemCount={3} sendRef={jest.fn()} data-testid="test-id" />
       </SelectProvider>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
   });
 
   test('renders with custom display successfully', () => {
-    const view = render(
+    render(
       <SelectProvider
         value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
       >
@@ -63,22 +69,22 @@ describe('select options', () => {
         </SelectOption>
       </SelectProvider>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByText('test display').outerHTML).toMatchSnapshot();
   });
 
   test('renders with custom user object successfully', () => {
-    const view = render(
+    render(
       <SelectProvider
         value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
       >
-        <SelectOption id="option-1" value={new User('Mr.', 'Test', 'User')} sendRef={jest.fn()} />
+        <SelectOption id="option-1" value={new User('Mr.', 'Test', 'User')} sendRef={jest.fn()} data-testid="test-id" />
       </SelectProvider>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
   });
 
   test('renders with custom display and custom user object successfully', () => {
-    const view = render(
+    render(
       <SelectProvider
         value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
       >
@@ -87,11 +93,11 @@ describe('select options', () => {
         </SelectOption>
       </SelectProvider>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByText('test display').outerHTML).toMatchSnapshot();
   });
 
   test('renders custom component', () => {
-    const view = render(
+    render(
       <SelectProvider
         value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
       >
@@ -100,34 +106,47 @@ describe('select options', () => {
         </SelectOption>
       </SelectProvider>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByText('test display').outerHTML).toMatchSnapshot();
   });
 
   describe('disabled', () => {
     test('renders disabled successfully', () => {
-      const view = mount(
+      render(
         <SelectProvider
           value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
         >
-          <SelectOption id="option-1" isDisabled value="test" sendRef={jest.fn()} />
+          <SelectOption id="option-1" isDisabled value="test" sendRef={jest.fn()} data-testid="test-id" />
         </SelectProvider>
       );
-      expect(view.find('button').hasClass('pf-m-disabled')).toBe(true);
-      expect(view).toMatchSnapshot();
+
+      expect(screen.getByText('test').className).toContain('pf-m-disabled');
+      expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
     });
   });
 
   describe('is selected', () => {
     test('renders selected successfully', () => {
-      const view = shallow(<SelectOption id="option-1" isSelected value="test" sendRef={jest.fn()} />);
-      expect(view).toMatchSnapshot();
+      render(
+        <SelectProvider
+          value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
+        >
+          <SelectOption id="option-1" isSelected value="test" sendRef={jest.fn()} data-testid="test-id" />
+        </SelectProvider>
+      );
+      expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
     });
   });
 
   describe('checked', () => {
     test('renders with checked successfully', () => {
-      const view = shallow(<SelectOption id="option-1" isChecked value="test" sendRef={jest.fn()} />);
-      expect(view).toMatchSnapshot();
+      render(
+        <SelectProvider
+          value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
+        >
+          <SelectOption id="option-1" isChecked value="test" sendRef={jest.fn()} data-testid="test-id" />
+        </SelectProvider>
+      );
+      expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
     });
   });
 
@@ -135,6 +154,7 @@ describe('select options', () => {
     test('generates warning when id is undefined and isFavorites is set', () => {
       const myMock = jest.fn() as any;
       global.console = { error: myMock } as any;
+
       render(
         <SelectProvider
           value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
@@ -142,6 +162,7 @@ describe('select options', () => {
           <SelectOption isFavorite value="test" sendRef={jest.fn()} />
         </SelectProvider>
       );
+
       expect(myMock).toBeCalled();
     });
   });

package/src/components/Select/__tests__/__snapshots__/SelectGroup.test.tsx.snap

@@ -1,7 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`select group renders with children successfully 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
-`;
+exports[`SelectGroup renders with children successfully 1`] = `"<div data-testid=\\"test-id\\" class=\\"pf-c-select__menu-group\\"><div class=\\"pf-c-select__menu-group-title\\" id=\\"\\" aria-hidden=\\"true\\">test</div><ul role=\\"listbox\\"><div>child</div></ul></div>"`;

package/src/components/Select/__tests__/__snapshots__/SelectOption.test.tsx.snap

@@ -1,283 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`select options checked renders with checked successfully 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
-`;
+exports[`SelectOption checked renders with checked successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item\\" role=\\"option\\" type=\\"button\\">test</button>"`;
 
-exports[`select options disabled renders disabled successfully 1`] = `
-<SelectOption
-  className=""
-  component="button"
-  id="option-1"
-  index={0}
-  inputId=""
-  isChecked={false}
-  isDisabled={true}
-  isFavorite={null}
-  isLastOptionBeforeFooter={[Function]}
-  isLoad={false}
-  isLoading={false}
-  isNoResultsOption={false}
-  isPlaceholder={false}
-  isSelected={false}
-  keyHandler={[Function]}
-  onClick={[Function]}
-  sendRef={
-    [MockFunction] {
-      "calls": Array [
-        Array [
-          null,
-          null,
-          null,
-          0,
-        ],
-      ],
-      "results": Array [
-        Object {
-          "type": "return",
-          "value": undefined,
-        },
-      ],
-    }
-  }
-  setViewMoreNextIndex={[Function]}
-  value="test"
->
-  <li
-    className="pf-c-select__menu-wrapper"
-    id="option-1"
-    role="presentation"
-  >
-    <button
-      aria-selected={null}
-      className="pf-c-select__menu-item pf-m-disabled"
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      role="option"
-      type="button"
-    >
-      test
-    </button>
-  </li>
-</SelectOption>
-`;
+exports[`SelectOption disabled renders disabled successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item pf-m-disabled\\" role=\\"option\\" type=\\"button\\">test</button>"`;
 
-exports[`select options is selected renders selected successfully 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
-`;
+exports[`SelectOption is selected renders selected successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item pf-m-selected\\" role=\\"option\\" aria-selected=\\"true\\" type=\\"button\\">test<span class=\\"pf-c-select__menu-item-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 512 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\\"></path></svg></span></button>"`;
 
-exports[`select options renders custom component 1`] = `
-<div>
-  <li
-    class="pf-c-select__menu-wrapper"
-    id="option-1"
-    role="presentation"
-  >
-    <div
-      class="pf-c-select__menu-item"
-      role="option"
-      type="button"
-    >
-      <div>
-        test display
-      </div>
-    </div>
-  </li>
-</div>
-`;
+exports[`SelectOption renders custom component 1`] = `"<div>test display</div>"`;
 
-exports[`select options renders with custom display and custom user object successfully 1`] = `
-<div>
-  <li
-    class="pf-c-select__menu-wrapper"
-    id="option-1"
-    role="presentation"
-  >
-    <button
-      class="pf-c-select__menu-item"
-      role="option"
-      type="button"
-    >
-      <div>
-        test display
-      </div>
-    </button>
-  </li>
-</div>
-`;
+exports[`SelectOption renders with custom display and custom user object successfully 1`] = `"<div>test display</div>"`;
 
-exports[`select options renders with custom display successfully 1`] = `
-<div>
-  <li
-    class="pf-c-select__menu-wrapper"
-    id="option-1"
-    role="presentation"
-  >
-    <button
-      class="pf-c-select__menu-item"
-      role="option"
-      type="button"
-    >
-      <div>
-        test display
-      </div>
-    </button>
-  </li>
-</div>
-`;
+exports[`SelectOption renders with custom display successfully 1`] = `"<div>test display</div>"`;
 
-exports[`select options renders with custom user object successfully 1`] = `
-<div>
-  <li
-    class="pf-c-select__menu-wrapper"
-    id="option-1"
-    role="presentation"
-  >
-    <button
-      class="pf-c-select__menu-item"
-      role="option"
-      type="button"
-    >
-      Mr.: Test User
-    </button>
-  </li>
-</div>
-`;
+exports[`SelectOption renders with custom user object successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item\\" role=\\"option\\" type=\\"button\\">Mr.: Test User</button>"`;
 
-exports[`select options renders with description successfully 1`] = `
-<div>
-  <li
-    class="pf-c-select__menu-wrapper"
-    id="option-1"
-    role="presentation"
-  >
-    <button
-      class="pf-c-select__menu-item pf-m-description"
-      role="option"
-      type="button"
-    >
-      <span
-        class="pf-c-select__menu-item-main"
-      >
-        test
-      </span>
-      <span
-        class="pf-c-select__menu-item-description"
-      >
-        This is a description
-      </span>
-    </button>
-  </li>
-</div>
-`;
+exports[`SelectOption renders with description successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item pf-m-description\\" role=\\"option\\" type=\\"button\\"><span class=\\"pf-c-select__menu-item-main\\">test</span><span class=\\"pf-c-select__menu-item-description\\">This is a description</span></button>"`;
 
-exports[`select options renders with item count successfully 1`] = `
-<div>
-  <li
-    class="pf-c-select__menu-wrapper"
-    id="option-1"
-    role="presentation"
-  >
-    <button
-      class="pf-c-select__menu-item"
-      role="option"
-      type="button"
-    >
-      <span
-        class="pf-c-select__menu-item-row"
-      >
-        <span
-          class="pf-c-select__menu-item-text"
-        >
-          test
-        </span>
-        <span
-          class="pf-c-select__menu-item-count"
-        >
-          3
-        </span>
-      </span>
-    </button>
-  </li>
-</div>
-`;
+exports[`SelectOption renders with item count successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item\\" role=\\"option\\" type=\\"button\\"><span class=\\"pf-c-select__menu-item-row\\"><span class=\\"pf-c-select__menu-item-text\\">test</span><span class=\\"pf-c-select__menu-item-count\\">3</span></span></button>"`;
 
-exports[`select options renders with value parameter successfully 1`] = `
-<SelectOption
-  className=""
-  component="button"
-  id="option-1"
-  index={0}
-  inputId=""
-  isChecked={false}
-  isDisabled={false}
-  isFavorite={null}
-  isLastOptionBeforeFooter={[Function]}
-  isLoad={false}
-  isLoading={false}
-  isNoResultsOption={false}
-  isPlaceholder={false}
-  isSelected={false}
-  keyHandler={[Function]}
-  onClick={[Function]}
-  sendRef={
-    [MockFunction] {
-      "calls": Array [
-        Array [
-          <button
-            class="pf-c-select__menu-item"
-            role="option"
-            type="button"
-          >
-            test
-          </button>,
-          null,
-          <li
-            class="pf-c-select__menu-wrapper"
-            id="option-1"
-            role="presentation"
-          >
-            <button
-              class="pf-c-select__menu-item"
-              role="option"
-              type="button"
-            >
-              test
-            </button>
-          </li>,
-          0,
-        ],
-      ],
-      "results": Array [
-        Object {
-          "type": "return",
-          "value": undefined,
-        },
-      ],
-    }
-  }
-  setViewMoreNextIndex={[Function]}
-  value="test"
->
-  <li
-    className="pf-c-select__menu-wrapper"
-    id="option-1"
-    role="presentation"
-  >
-    <button
-      aria-selected={null}
-      className="pf-c-select__menu-item"
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      role="option"
-      type="button"
-    >
-      test
-    </button>
-  </li>
-</SelectOption>
-`;
+exports[`SelectOption renders with value parameter successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item\\" role=\\"option\\" type=\\"button\\">test</button>"`;

package/src/components/TextArea/TextArea.tsx

@@ -20,6 +20,8 @@ export interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'onC
   isDisabled?: boolean;
   /** Flag to show if the TextArea is read only. */
   isReadOnly?: boolean;
+  /** Use the external file instead of a data URI */
+  isIconSprite?: boolean;
   /** Flag to modify height based on contents. */
   autoResize?: boolean;
   /** Value to indicate if the textarea is modified to show that validation state.
@@ -46,6 +48,7 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
     className: '',
     isRequired: false,
     isDisabled: false,
+    isIconSprite: false,
     validated: 'default',
     resizeOrientation: 'both',
     'aria-label': null as string
@@ -86,6 +89,7 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
       validated,
       isRequired,
       isDisabled,
+      isIconSprite,
       isReadOnly,
       resizeOrientation,
       innerRef,
@@ -102,6 +106,7 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
       <textarea
         className={css(
           styles.formControl,
+          isIconSprite && styles.modifiers.iconSprite,
           className,
           resizeOrientation !== TextAreResizeOrientation.both && styles.modifiers[orientation],
           validated === ValidatedOptions.success && styles.modifiers.success,

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

@@ -116,6 +116,7 @@ exports[`validated text area success 1`] = `
     className=""
     innerRef={null}
     isDisabled={false}
+    isIconSprite={false}
     isRequired={false}
     onChange={[MockFunction]}
     required={true}
@@ -148,6 +149,7 @@ exports[`validated text area warning 1`] = `
     className=""
     innerRef={null}
     isDisabled={false}
+    isIconSprite={false}
     isRequired={false}
     onChange={[MockFunction]}
     required={true}

package/src/components/TextArea/examples/TextArea.md

@@ -207,3 +207,46 @@ import { TextArea } from '@patternfly/react-core';
 <TextArea aria-label="auto resizing text area example" autoResize />
 ```
 
+### Icon sprite variants
+
+**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.
+
+```js isBeta
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+IconSpriteTextArea = () => {
+  const [success, setSuccess] = React.useState('');
+  const [warning, setWarning] = React.useState('');
+  const [error, setError] = React.useState('');
+
+  return (
+    <>
+      <TextArea
+        validated={ValidatedOptions.success}
+        isIconSprite
+        type="text"
+        onChange={value => setSuccess(value)}
+        aria-label="success icon sprite text area example"
+      />
+      <br />
+      <br />
+      <TextArea
+        validated={ValidatedOptions.warning}
+        isIconSprite
+        type="text"
+        onChange={value => setWarning(value)}
+        aria-label="warning icon sprite text input example"
+      />
+      <br />
+      <br />
+      <TextArea
+        validated={ValidatedOptions.error}
+        isIconSprite
+        type="text"
+        onChange={value => setError(value)}
+        aria-label="error icon sprite text area example"
+      />
+    </>
+  );
+};

package/src/components/TextInput/TextInput.tsx

@@ -65,6 +65,8 @@ export interface TextInputProps
   onBlur?: (event?: any) => void;
   /** icon variant */
   iconVariant?: 'calendar' | 'clock' | 'search';
+  /** Use the external file instead of a data URI */
+  isIconSprite?: boolean;
   /** Custom icon url to set as the input's background-image */
   customIconUrl?: string;
   /** Dimensions for the custom icon set as the input's background-size */
@@ -84,6 +86,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
     validated: 'default' as 'success' | 'warning' | 'error' | 'default',
     isDisabled: false,
     isReadOnly: false,
+    isIconSprite: false,
     type: TextInputTypes.text,
     isLeftTruncated: false,
     onChange: (): any => undefined,
@@ -170,6 +173,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
       isReadOnly,
       isRequired,
       isDisabled,
+      isIconSprite,
       iconVariant,
       customIconUrl,
       customIconDimensions,
@@ -193,6 +197,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
         onBlur={this.onBlur}
         className={css(
           styles.formControl,
+          isIconSprite && styles.modifiers.iconSprite,
           validated === ValidatedOptions.success && styles.modifiers.success,
           validated === ValidatedOptions.warning && styles.modifiers.warning,
           ((iconVariant && iconVariant !== 'search') || customIconUrl) && styles.modifiers.icon,

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

@@ -90,6 +90,7 @@ exports[`validated text input success 1`] = `
     className=""
     innerRef={null}
     isDisabled={false}
+    isIconSprite={false}
     isLeftTruncated={false}
     isReadOnly={false}
     isRequired={false}
@@ -133,6 +134,7 @@ exports[`validated text input success 2`] = `
     className=""
     innerRef={null}
     isDisabled={false}
+    isIconSprite={false}
     isLeftTruncated={false}
     isReadOnly={false}
     isRequired={false}