@patternfly/react-core 4.268.2 → 5.0.0-alpha.2

package/src/components/SearchInput/examples/SearchInput.md

@@ -2,7 +2,7 @@
 id: 'Search input'
 section: components
 cssPrefix: 'pf-c-search-input'
-propComponents: ['SearchInput', 'SearchInputSearchAttribute', 'SearchInputExpandable']
+propComponents: ['SearchInput', 'SearchAttribute', 'ExpandableInput']
 beta: true
 ---
 

package/src/components/SearchInput/examples/SearchInputWithExpandable.tsx

@@ -9,7 +9,7 @@ export const SearchInputWithExpandable: React.FunctionComponent = () => {
     setValue(value);
   };
 
-  const onToggleExpand = (_event: React.SyntheticEvent<HTMLButtonElement>, isExpanded: boolean) => {
+  const onToggleExpand = (isExpanded: boolean) => {
     setIsExpanded(!isExpanded);
   };
 

package/src/components/Select/Select.tsx

@@ -33,7 +33,7 @@ import {
 } from '../../helpers';
 import { KeyTypes } from '../../helpers/constants';
 import { Divider } from '../Divider';
-import { ToggleMenuBaseProps, Popper } from '../../helpers/Popper/Popper';
+import { Popper } from '../../helpers/Popper/Popper';
 import { createRenderableFavorites, extendItemsWithFavorite } from '../../helpers/favorites';
 import { ValidatedOptions } from '../../helpers/constants';
 import { findTabbableElements } from '../../helpers/util';
@@ -48,8 +48,7 @@ export interface SelectViewMoreObject {
   onClick: (event: React.MouseEvent | React.ChangeEvent) => void;
 }
 export interface SelectProps
-  extends Omit<ToggleMenuBaseProps, 'menuAppendTo'>,
-    Omit<React.HTMLProps<HTMLDivElement>, 'onSelect' | 'ref' | 'checked' | 'selected'>,
+  extends Omit<React.HTMLProps<HTMLDivElement>, 'onSelect' | 'ref' | 'checked' | 'selected'>,
     OUIAProps {
   /** Content rendered inside the Select. Must be React.ReactElement<SelectGroupProps>[] */
   children?: React.ReactElement[];
@@ -184,8 +183,6 @@ export interface SelectProps
    * appended inline, e.g. `menuAppendTo="parent"`
    */
   isFlipEnabled?: boolean;
-  /** @beta Opt-in for updated popper that does not use findDOMNode. */
-  removeFindDomNode?: boolean;
   /** z-index of the select menu when menuAppendTo is not inline. */
   zIndex?: number;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -269,7 +266,6 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     isCreateSelectOptionObject: false,
     shouldResetOnSelect: true,
     isFlipEnabled: true,
-    removeFindDomNode: false,
     zIndex: 9999
   };
 
@@ -1036,7 +1032,6 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       isCreateOptionOnTop,
       shouldResetOnSelect,
       isFlipEnabled,
-      removeFindDomNode,
       zIndex,
       ...props
     } = this.props;
@@ -1481,7 +1476,6 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                 direction={direction}
                 appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
                 isVisible={isOpen}
-                removeFindDomNode={removeFindDomNode}
                 zIndex={zIndex}
               />
             )}

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

@@ -86,14 +86,7 @@ describe('Select', () => {
       const consoleError = jest.spyOn(console, 'error');
       const { asFragment } = render(
         <React.StrictMode>
-          <Select
-            removeFindDomNode
-            variant={SelectVariant.single}
-            onSelect={jest.fn()}
-            onToggle={jest.fn()}
-            isOpen
-            ouiaId="test-id"
-          >
+          <Select variant={SelectVariant.single} onSelect={jest.fn()} onToggle={jest.fn()} isOpen ouiaId="test-id">
             {selectOptions}
           </Select>
         </React.StrictMode>

package/src/components/SimpleList/SimpleList.tsx

@@ -16,8 +16,6 @@ export interface SimpleListProps extends Omit<React.HTMLProps<HTMLDivElement>, '
   ) => void;
   /** Indicates whether component is controlled by its internal state */
   isControlled?: boolean;
-  /** aria-label for the <ul> element that wraps the SimpleList items. */
-  'aria-label'?: string;
 }
 
 export interface SimpleListState {
@@ -59,7 +57,7 @@ export class SimpleList extends React.Component<SimpleListProps, SimpleListState
 
   render() {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { children, className, onSelect, isControlled, 'aria-label': ariaLabel, ...props } = this.props;
+    const { children, className, onSelect, isControlled, ...props } = this.props;
 
     let isGrouped = false;
     if (children) {
@@ -76,7 +74,7 @@ export class SimpleList extends React.Component<SimpleListProps, SimpleListState
       >
         <div className={css(styles.simpleList, className)} {...props}>
           {isGrouped && children}
-          {!isGrouped && <ul aria-label={ariaLabel}>{children}</ul>}
+          {!isGrouped && <ul>{children}</ul>}
         </div>
       </SimpleListContext.Provider>
     );

package/src/components/SimpleList/SimpleListItem.tsx

@@ -18,8 +18,6 @@ export interface SimpleListItemProps {
   componentProps?: any;
   /** Indicates if the link is current/highlighted */
   isActive?: boolean;
-  /** @deprecated please use isActive instead */
-  isCurrent?: boolean;
   /** OnClick callback for the SimpleList item */
   onClick?: (event: React.MouseEvent | React.ChangeEvent) => void;
   /** Type of button SimpleList item */
@@ -35,7 +33,6 @@ export class SimpleListItem extends React.Component<SimpleListItemProps> {
     children: null,
     className: '',
     isActive: false,
-    isCurrent: false,
     component: 'button',
     componentClassName: '',
     type: 'button',
@@ -46,7 +43,6 @@ export class SimpleListItem extends React.Component<SimpleListItemProps> {
   render() {
     const {
       children,
-      isCurrent,
       isActive,
       className,
       component: Component,
@@ -64,7 +60,7 @@ export class SimpleListItem extends React.Component<SimpleListItemProps> {
         {({ currentRef, updateCurrentRef, isControlled }) => {
           const isButton = Component === 'button';
           const isCurrentItem =
-            this.ref && currentRef && isControlled ? currentRef.current === this.ref.current : isActive || isCurrent;
+            this.ref && currentRef && isControlled ? currentRef.current === this.ref.current : isActive;
 
           const additionalComponentProps = isButton
             ? {

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

@@ -31,11 +31,6 @@ describe('SimpleList', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('renders aria-labelled content', () => {
-    const { asFragment } = render(<SimpleList aria-label="This is a simple list">{items}</SimpleList>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
   test('renders grouped content', () => {
     const { asFragment } = render(
       <SimpleList>

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

@@ -1,48 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SimpleList renders aria-labelled content 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-simple-list"
-  >
-    <ul
-      aria-label="This is a simple list"
-    >
-      <li
-        class=""
-      >
-        <button
-          class="pf-c-simple-list__item-link"
-          type="button"
-        >
-          Item 1
-        </button>
-      </li>
-      <li
-        class=""
-      >
-        <button
-          class="pf-c-simple-list__item-link"
-          type="button"
-        >
-          Item 2
-        </button>
-      </li>
-      <li
-        class=""
-      >
-        <button
-          class="pf-c-simple-list__item-link"
-          type="button"
-        >
-          Item 3
-        </button>
-      </li>
-    </ul>
-  </div>
-</DocumentFragment>
-`;
-
 exports[`SimpleList renders content 1`] = `
 <DocumentFragment>
   <div

package/src/components/Skeleton/examples/Skeleton.md

@@ -9,118 +9,25 @@ propComponents: ['Skeleton']
 
 ### Default
 
-```js
-import React from 'react';
-import { Skeleton } from '@patternfly/react-core';
-
-<Skeleton screenreaderText="Loading contents" />;
+```ts file="./SkeletonDefault.tsx"
 ```
 
 ### Percentage widths
 
-```js
-import React from 'react';
-import { Skeleton } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Skeleton width="25%" screenreaderText="Loading contents" />
-  <br />
-  <Skeleton width="33%" />
-  <br />
-  <Skeleton width="50%" />
-  <br />
-  <Skeleton width="66%" />
-  <br />
-  <Skeleton width="75%" />
-  <br />
-  <Skeleton />
-</React.Fragment>;
+```ts file="./SkeletonPercentageWidth.tsx"
 ```
 
 ### Percentage heights
 
-```js
-import React from 'react';
-import { Skeleton } from '@patternfly/react-core';
-
-<div style={{ height: '400px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
-  <Skeleton height="25%" width="15%" screenreaderText="Loading contents" />
-  <Skeleton height="33%" width="15%" />
-  <Skeleton height="50%" width="15%" />
-  <Skeleton height="66%" width="15%" />
-  <Skeleton height="75%" width="15%" />
-  <Skeleton height="100%" width="15%" />
-</div>;
+```ts file="./SkeletonPercentageHeight.tsx"
 ```
 
 ### Text modifiers
 
-```js
-import React from 'react';
-import { Skeleton } from '@patternfly/react-core';
-
-<React.Fragment>
-  --pf-global--FontSize--4xl
-  <Skeleton fontSize="4xl" screenreaderText="Loading font size 4xl" />
-  <br />
-  --pf-global--FontSize--3xl
-  <Skeleton fontSize="3xl" screenreaderText="Loading font size 3xl" />
-  <br />
-  --pf-global--FontSize--2xl
-  <Skeleton fontSize="2xl" screenreaderText="Loading font size 2xl" />
-  <br />
-  --pf-global--FontSize--xl
-  <Skeleton fontSize="xl" screenreaderText="Loading font size xl" />
-  <br />
-  --pf-global--FontSize--lg
-  <Skeleton fontSize="lg" screenreaderText="Loading font size lg" />
-  <br />
-  --pf-global--FontSize--md
-  <Skeleton fontSize="md" screenreaderText="Loading font size md" />
-  <br />
-  --pf-global--FontSize--sm
-  <Skeleton fontSize="sm" screenreaderText="Loading font size sm" />
-</React.Fragment>;
+```ts file="./SkeletonText.tsx"
 ```
 
 ### Shapes
 
-```js
-import React from 'react';
-import { Skeleton } from '@patternfly/react-core';
-
-<React.Fragment>
-  Small circle
-  <Skeleton shape="circle" width="15%" screenreaderText="Loading small circle contents" />
-  <br />
-  Medium circle
-  <Skeleton shape="circle" width="30%" screenreaderText="Loading medium circle contents" />
-  <br />
-  Large circle
-  <Skeleton shape="circle" width="50%" screenreaderText="Loading large circle contents" />
-  <br />
-  Small square
-  <Skeleton shape="square" width="15%" screenreaderText="Loading small square contents" />
-  <br />
-  Medium square
-  <Skeleton shape="square" width="30%" screenreaderText="Loading medium square contents" />
-  <br />
-  Large square
-  <Skeleton shape="square" width="50%" screenreaderText="Loading large square contents" />
-  <br />
-  Small rectangle
-  <div style={{ height: '200px' }}>
-    <Skeleton height="50%" width="50%" screenreaderText="Loading small rectangle contents" />
-  </div>
-  <br />
-  Medium rectangle
-  <div style={{ height: '200px' }}>
-    <Skeleton height="75%" width="75%" screenreaderText="Loading medium rectangle contents" />
-  </div>
-  <br />
-  Large rectangle
-  <div style={{ height: '200px' }}>
-    <Skeleton height="100%" screenreaderText="Loading large rectangle contents" />
-  </div>
-</React.Fragment>;
+```ts file="./SkeletonShapes.tsx"
 ```

package/src/components/Skeleton/examples/SkeletonDefault.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Skeleton } from '@patternfly/react-core';
+
+export const SkeletonDefault: React.FunctionComponent = () => <Skeleton screenreaderText="Loading contents" />;

package/src/components/Skeleton/examples/SkeletonPercentageHeight.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Skeleton } from '@patternfly/react-core';
+
+export const SkeletonPercentageHeight: React.FunctionComponent = () => (
+  <div style={{ height: '400px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
+    <Skeleton height="25%" width="15%" screenreaderText="Loaded 25% of content" />
+    <Skeleton height="33%" width="15%" screenreaderText="Loaded 33% of content" />
+    <Skeleton height="50%" width="15%" screenreaderText="Loaded 50% of content" />
+    <Skeleton height="66%" width="15%" screenreaderText="Loaded 66% of content" />
+    <Skeleton height="75%" width="15%" screenreaderText="Loaded 75% of content" />
+    <Skeleton height="100%" width="15%" screenreaderText="Loaded 100% of content" />
+  </div>
+);

package/src/components/Skeleton/examples/SkeletonPercentageWidth.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Skeleton } from '@patternfly/react-core';
+
+export const SkeletonPercentageWidth: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Skeleton width="25%" screenreaderText="Loaded 25% of content" />
+    <br />
+    <Skeleton width="33%" screenreaderText="Loaded 33% of content" />
+    <br />
+    <Skeleton width="50%" screenreaderText="Loaded 50% of content" />
+    <br />
+    <Skeleton width="66%" screenreaderText="Loaded 66% of content" />
+    <br />
+    <Skeleton width="75%" screenreaderText="Loaded 75% of content" />
+    <br />
+    <Skeleton />
+  </React.Fragment>
+);

package/src/components/Skeleton/examples/SkeletonShapes.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Skeleton } from '@patternfly/react-core';
+
+export const SkeletonShapes: React.FunctionComponent = () => (
+  <React.Fragment>
+    Small circle
+    <Skeleton shape="circle" width="15%" screenreaderText="Loading small circle contents" />
+    <br />
+    Medium circle
+    <Skeleton shape="circle" width="30%" screenreaderText="Loading medium circle contents" />
+    <br />
+    Large circle
+    <Skeleton shape="circle" width="50%" screenreaderText="Loading large circle contents" />
+    <br />
+    Small square
+    <Skeleton shape="square" width="15%" screenreaderText="Loading small square contents" />
+    <br />
+    Medium square
+    <Skeleton shape="square" width="30%" screenreaderText="Loading medium square contents" />
+    <br />
+    Large square
+    <Skeleton shape="square" width="50%" screenreaderText="Loading large square contents" />
+    <br />
+    Small rectangle
+    <div style={{ height: '200px' }}>
+      <Skeleton height="50%" width="50%" screenreaderText="Loading small rectangle contents" />
+    </div>
+    <br />
+    Medium rectangle
+    <div style={{ height: '200px' }}>
+      <Skeleton height="75%" width="75%" screenreaderText="Loading medium rectangle contents" />
+    </div>
+    <br />
+    Large rectangle
+    <div style={{ height: '200px' }}>
+      <Skeleton height="100%" screenreaderText="Loading large rectangle contents" />
+    </div>
+  </React.Fragment>
+);

package/src/components/Skeleton/examples/SkeletonText.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Skeleton } from '@patternfly/react-core';
+
+export const SkeletonText: React.FunctionComponent = () => (
+  <React.Fragment>
+    --pf-global--FontSize--4xl
+    <Skeleton fontSize="4xl" screenreaderText="Loading font size 4xl" />
+    <br />
+    --pf-global--FontSize--3xl
+    <Skeleton fontSize="3xl" screenreaderText="Loading font size 3xl" />
+    <br />
+    --pf-global--FontSize--2xl
+    <Skeleton fontSize="2xl" screenreaderText="Loading font size 2xl" />
+    <br />
+    --pf-global--FontSize--xl
+    <Skeleton fontSize="xl" screenreaderText="Loading font size xl" />
+    <br />
+    --pf-global--FontSize--lg
+    <Skeleton fontSize="lg" screenreaderText="Loading font size lg" />
+    <br />
+    --pf-global--FontSize--md
+    <Skeleton fontSize="md" screenreaderText="Loading font size md" />
+    <br />
+    --pf-global--FontSize--sm
+    <Skeleton fontSize="sm" screenreaderText="Loading font size sm" />
+  </React.Fragment>
+);

package/src/components/Slider/Slider.tsx

@@ -326,10 +326,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
       return (
         <InputGroup>
           {textInput}
-          <InputGroupText {...(isDisabled && { className: css(styles.modifiers.disabled) })}>
-            {' '}
-            {inputLabel}
-          </InputGroupText>
+          <InputGroupText variant="plain"> {inputLabel}</InputGroupText>
         </InputGroup>
       );
     } else {
@@ -419,6 +416,9 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
             {buildSteps()}
           </div>
         )}
+        {isInputVisible && inputPosition === 'aboveThumb' && (
+          <div className={css(styles.sliderValue, styles.modifiers.floating)}>{displayInput()}</div>
+        )}
         {hasTooltipOverThumb ? (
           <Tooltip entryDelay={0} content={findAriaTextValue()}>
             {thumbComponent}
@@ -426,9 +426,6 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
         ) : (
           thumbComponent
         )}
-        {isInputVisible && inputPosition === 'aboveThumb' && (
-          <div className={css(styles.sliderValue, styles.modifiers.floating)}>{displayInput()}</div>
-        )}
       </div>
       {isInputVisible && inputPosition === 'right' && <div className={css(styles.sliderValue)}>{displayInput()}</div>}
       {rightActions && <div className={css(styles.sliderActions)}>{rightActions}</div>}

package/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap

@@ -424,7 +424,7 @@ exports[`slider renders slider with input 1`] = `
           value="50"
         />
         <span
-          class="pf-c-input-group__text"
+          class="pf-c-input-group__text pf-m-plain"
         >
            %
         </span>
@@ -475,17 +475,6 @@ exports[`slider renders slider with input above thumb 1`] = `
           </div>
         </div>
       </div>
-      <div
-        aria-disabled="false"
-        aria-label="Value"
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="50"
-        aria-valuetext="50"
-        class="pf-c-slider__thumb"
-        role="slider"
-        tabindex="0"
-      />
       <div
         class="pf-c-slider__value pf-m-floating"
       >
@@ -503,12 +492,23 @@ exports[`slider renders slider with input above thumb 1`] = `
             value="50"
           />
           <span
-            class="pf-c-input-group__text"
+            class="pf-c-input-group__text pf-m-plain"
           >
              %
           </span>
         </div>
       </div>
+      <div
+        aria-disabled="false"
+        aria-label="Value"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="50"
+        aria-valuetext="50"
+        class="pf-c-slider__thumb"
+        role="slider"
+        tabindex="0"
+      />
     </div>
   </div>
 </DocumentFragment>
@@ -639,16 +639,20 @@ exports[`slider renders slider with tooltip on thumb 1`] = `
         </div>
       </div>
       <div
-        aria-disabled="false"
-        aria-label="Value"
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="50"
-        aria-valuetext="50"
-        class="pf-c-slider__thumb"
-        role="slider"
-        tabindex="0"
-      />
+        style="display: contents;"
+      >
+        <div
+          aria-disabled="false"
+          aria-label="Value"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          aria-valuenow="50"
+          aria-valuetext="50"
+          class="pf-c-slider__thumb"
+          role="slider"
+          tabindex="0"
+        />
+      </div>
     </div>
   </div>
 </DocumentFragment>

package/src/components/Spinner/Spinner.tsx

@@ -33,7 +33,7 @@ export const Spinner: React.FunctionComponent<SpinnerProps> = ({
   className = '',
   size = 'xl',
   'aria-valuetext': ariaValueText = 'Loading...',
-  isSVG = false,
+  isSVG = true,
   diameter,
   isInline = false,
   'aria-label': ariaLabel,

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

@@ -26,3 +26,9 @@ test('extra large spinner', () => {
   const { asFragment } = render(<Spinner size="xl" />);
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('non-SVG spinner', () => {
+  const { asFragment } = render(<Spinner isSVG={false} />)
+
+  expect(asFragment()).toMatchSnapshot();
+})