@patternfly/react-core 5.0.0-alpha.16 → 5.0.0-alpha.18

package/src/components/Select/examples/Select.md

@@ -117,7 +117,7 @@ class SingleSelectInput extends React.Component {
         <Checkbox
           label="isDisabled"
           isChecked={this.state.isDisabled}
-          onChange={this.toggleDisabled}
+          onChange={(_event, checked) => this.toggleDisabled(checked)} 
           aria-label="disabled checkbox"
           id="toggle-disabled"
           name="toggle-disabled"
@@ -133,7 +133,7 @@ class SingleSelectInput extends React.Component {
         <Checkbox
           label="Show icon"
           isChecked={isToggleIcon}
-          onChange={this.setIcon}
+          onChange={(_event, checked) => this.setIcon(checked)} 
           aria-label="show icon checkbox"
           id="toggle-icon"
           name="toggle-icon"
@@ -843,7 +843,7 @@ class FilteringSingleSelectInput extends React.Component {
         <Checkbox
           label="isInputValuePersisted"
           isChecked={isInputValuePersisted}
-          onChange={this.toggleInputValuePersisted}
+          onChange={(_event, checked) => this.toggleInputValuePersisted(checked)} 
           aria-label="toggle input value persisted"
           id="toggle-inline-filter-input-value-persisted"
           name="toggle-inline-filter-input-value-persisted"
@@ -851,7 +851,7 @@ class FilteringSingleSelectInput extends React.Component {
         <Checkbox
           label="isInputFilterPersisted"
           isChecked={isInputFilterPersisted}
-          onChange={this.toggleInputFilterPersisted}
+          onChange={(_event, checked) => this.toggleInputFilterPersisted(checked)} 
           aria-label="toggle input filter persisted"
           id="toggle-inline-filter-input-filter-persisted"
           name="toggle-inline-filter-input-filter-persisted"
@@ -859,7 +859,7 @@ class FilteringSingleSelectInput extends React.Component {
         <Checkbox
           label="isCreatable"
           isChecked={this.state.isCreatable}
-          onChange={this.toggleCreatable}
+          onChange={(_event, checked) => this.toggleCreatable(checked)} 
           aria-label="toggle creatable checkbox"
           id="toggle-inline-filter-creatable-typeahead"
           name="toggle-inline-filter-creatable-typeahead"
@@ -1359,7 +1359,7 @@ class TypeaheadSelectInput extends React.Component {
         <Checkbox
           label="isDisabled"
           isChecked={this.state.isDisabled}
-          onChange={this.toggleDisabled}
+          onChange={(_event, checked) => this.toggleDisabled(checked)} 
           aria-label="toggle disabled checkbox"
           id="toggle-disabled-typeahead"
           name="toggle-disabled-typeahead"
@@ -1367,7 +1367,7 @@ class TypeaheadSelectInput extends React.Component {
         <Checkbox
           label="isCreatable"
           isChecked={this.state.isCreatable}
-          onChange={this.toggleCreatable}
+          onChange={(_event, checked) => this.toggleCreatable(checked)} 
           aria-label="toggle creatable checkbox"
           id="toggle-creatable-typeahead"
           name="toggle-creatable-typeahead"
@@ -1375,7 +1375,7 @@ class TypeaheadSelectInput extends React.Component {
         <Checkbox
           label="isCreateOptionOnTop"
           isChecked={this.state.isCreateOptionOnTop}
-          onChange={this.toggleCreateOptionOnTop}
+          onChange={(_event, checked) => this.toggleCreateOptionOnTop(checked)} 
           aria-label="toggle createOptionOnTop checkbox"
           id="toggle-create-option-on-top-typeahead"
           name="toggle-create-option-on-top-typeahead"
@@ -1383,7 +1383,7 @@ class TypeaheadSelectInput extends React.Component {
         <Checkbox
           label="onCreateOption"
           isChecked={this.state.hasOnCreateOption}
-          onChange={this.toggleCreateNew}
+          onChange={(_event, checked) => this.toggleCreateNew(checked)} 
           aria-label="toggle new checkbox"
           id="toggle-new-typeahead"
           name="toggle-new-typeahead"
@@ -1391,7 +1391,7 @@ class TypeaheadSelectInput extends React.Component {
         <Checkbox
           label="isInputValuePersisted"
           isChecked={isInputValuePersisted}
-          onChange={this.toggleInputValuePersisted}
+          onChange={(_event, checked) => this.toggleInputValuePersisted(checked)} 
           aria-label="toggle input value persisted"
           id="toggle-input-value-persisted"
           name="toggle-input-value-persisted"
@@ -1399,7 +1399,7 @@ class TypeaheadSelectInput extends React.Component {
         <Checkbox
           label="isInputFilterPersisted"
           isChecked={isInputFilterPersisted}
-          onChange={this.toggleInputFilterPersisted}
+          onChange={(_event, checked) => this.toggleInputFilterPersisted(checked)} 
           aria-label="toggle input filter persisted"
           id="toggle-input-filter-persisted"
           name="toggle-input-filter-persisted"
@@ -1407,7 +1407,7 @@ class TypeaheadSelectInput extends React.Component {
         <Checkbox
           label="shouldResetOnSelect"
           isChecked={this.state.resetOnSelect}
-          onChange={this.toggleResetOnSelect}
+          onChange={(_event, checked) => this.toggleResetOnSelect(checked)} 
           aria-label="toggle reset checkbox"
           id="toggle-reset-typeahead"
           name="toggle-reset-typeahead"
@@ -1529,7 +1529,7 @@ class GroupedTypeaheadSelectInput extends React.Component {
         <Checkbox
           label="isCreatable"
           isChecked={this.state.isCreatable}
-          onChange={this.toggleCreatable}
+          onChange={(_event, checked) => this.toggleCreatable(checked)} 
           aria-label="toggle creatable checkbox"
           id="toggle-creatable-grouped-typeahead"
           name="toggle-creatable-grouped-typeahead"
@@ -1537,7 +1537,7 @@ class GroupedTypeaheadSelectInput extends React.Component {
         <Checkbox
           label="onCreateOption"
           isChecked={this.state.hasOnCreateOption}
-          onChange={this.toggleCreateNew}
+          onChange={(_event, checked) => this.toggleCreateNew(checked)} 
           aria-label="toggle new checkbox"
           id="toggle-new-grouped-typeahead"
           name="toggle-new-grouped-typeahead"
@@ -1756,7 +1756,7 @@ class MultiTypeaheadSelectInput extends React.Component {
         <Checkbox
           label="isCreatable"
           isChecked={this.state.isCreatable}
-          onChange={this.toggleCreatable}
+          onChange={(_event, checked) => this.toggleCreatable(checked)} 
           aria-label="toggle creatable checkbox"
           id="toggle-creatable-typeahead-multi"
           name="toggle-creatable-typeahead-multi"
@@ -1764,7 +1764,7 @@ class MultiTypeaheadSelectInput extends React.Component {
         <Checkbox
           label="onCreateOption"
           isChecked={this.state.hasOnCreateOption}
-          onChange={this.toggleCreateNew}
+          onChange={(_event, checked) => this.toggleCreateNew(checked)} 
           aria-label="toggle new checkbox"
           id="toggle-new-typeahead-multi"
           name="toggle-new-typeahead-multi"
@@ -1780,7 +1780,7 @@ class MultiTypeaheadSelectInput extends React.Component {
         <Checkbox
           label="shouldResetOnSelect"
           isChecked={this.state.resetOnSelect}
-          onChange={this.toggleResetOnSelect}
+          onChange={(_event, checked) => this.toggleResetOnSelect(checked)} 
           aria-label="toggle multi reset checkbox"
           id="toggle-reset-multi-typeahead"
           name="toggle-reset-multi-typeahead"
@@ -2228,7 +2228,7 @@ class SingleSelectInput extends React.Component {
         <Checkbox
           label="isDisabled"
           isChecked={this.state.isDisabled}
-          onChange={this.toggleDisabled}
+          onChange={(_event, checked) => this.toggleDisabled(checked)} 
           aria-label="disabled checkbox panel"
           id="toggle-disabled-panel"
           name="toggle-disabled-panel"

package/src/components/SkipToContent/SkipToContent.tsx

@@ -1,45 +1,28 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/SkipToContent/skip-to-content';
-import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 import { css } from '@patternfly/react-styles';
-import { PickOptional } from '../../helpers/typeUtils';
+import { Button, ButtonVariant } from '../Button';
 
-export interface SkipToContentProps extends React.HTMLProps<HTMLAnchorElement> {
+export interface SkipToContentProps extends React.HTMLProps<HTMLDivElement> {
   /** The skip to content link. */
   href: string;
   /** Content to display within the skip to content component, typically a string. */
   children?: React.ReactNode;
   /** Additional styles to apply to the skip to content component. */
   className?: string;
-  /** Forces the skip to content to display. This is primarily for demonstration purposes and would not normally be used. */
-  show?: boolean;
 }
 
-export class SkipToContent extends React.Component<SkipToContentProps> {
-  static displayName = 'SkipToContent';
-  static defaultProps: PickOptional<SkipToContentProps> = {
-    show: false
-  };
-  componentRef = React.createRef<HTMLAnchorElement>();
+export const SkipToContent: React.FunctionComponent<SkipToContentProps> = ({
+  children = null,
+  className = '',
+  href,
+  ...props
+}: SkipToContentProps) => (
+  <div className={css(styles.skipToContent, className)} {...props}>
+    <Button variant={ButtonVariant.primary} component="a" href={href}>
+      {children}
+    </Button>
+  </div>
+);
 
-  componentDidMount() {
-    if (this.props.show && this.componentRef.current) {
-      this.componentRef.current.focus();
-    }
-  }
-
-  render() {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { children, className, href, show, type, ...rest } = this.props;
-    return (
-      <a
-        {...rest}
-        className={css(buttonStyles.button, buttonStyles.modifiers.primary, styles.skipToContent, className)}
-        ref={this.componentRef}
-        href={href}
-      >
-        {children}
-      </a>
-    );
-  }
-}
+SkipToContent.displayName = 'SkipToContent';

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

@@ -10,8 +10,3 @@ test('Verify Skip To Content', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('Verify Skip To Content if forced to display', () => {
-  const { asFragment } = render(<SkipToContent href="#main-content" {...props} show />);
-  // Add a useful assertion here.
-  expect(asFragment()).toMatchSnapshot();
-});

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

@@ -2,18 +2,17 @@
 
 exports[`Verify Skip To Content 1`] = `
 <DocumentFragment>
-  <a
-    class="pf-c-button pf-m-primary pf-c-skip-to-content"
-    href="#main-content"
-  />
-</DocumentFragment>
-`;
-
-exports[`Verify Skip To Content if forced to display 1`] = `
-<DocumentFragment>
-  <a
-    class="pf-c-button pf-m-primary pf-c-skip-to-content"
-    href="#main-content"
-  />
+  <div
+    class="pf-c-skip-to-content"
+  >
+    <a
+      aria-disabled="false"
+      class="pf-c-button pf-m-primary"
+      data-ouia-component-id="OUIA-Generated-Button-primary-1"
+      data-ouia-component-type="PF4/Button"
+      data-ouia-safe="true"
+      href="#main-content"
+    />
+  </div>
 </DocumentFragment>
 `;

package/src/components/Slider/examples/SliderContinuous.tsx

@@ -12,7 +12,7 @@ export const SliderContinuous: React.FunctionComponent = () => {
         id="thumb-has-tooltip"
         label="hasTooltipOverThumb"
         isChecked={hasTooltipOverThumb}
-        onChange={setHasTooltipOverThumb}
+        onChange={(_event, checked) => setHasTooltipOverThumb(checked)}
         style={{ marginBottom: 20 }}
       />
       <Text component={TextVariants.h3}>Slider Value is: {value}</Text>

package/src/components/Tabs/examples/TabsBoxLight.tsx

@@ -52,7 +52,7 @@ export const TabsBoxLight: React.FunctionComponent = () => {
         <Checkbox
           label="Tabs light variation"
           isChecked={isTabsLightScheme}
-          onChange={toggleScheme}
+          onChange={(_event, checked) => toggleScheme(checked)}
           aria-label="show light scheme variation checkbox"
           id="toggle-scheme"
           name="toggle-scheme"

package/src/components/Tabs/examples/TabsDefault.tsx

@@ -51,7 +51,7 @@ export const TabsDefault: React.FunctionComponent = () => {
         <Checkbox
           label="isBox"
           isChecked={isBox}
-          onChange={toggleBox}
+          onChange={(_event, checked) => toggleBox(checked)}
           aria-label="show box variation checkbox"
           id="toggle-box-default"
           name="toggle-box-default"

package/src/components/Tabs/examples/TabsDefaultOverflow.tsx

@@ -63,7 +63,7 @@ export const TabsDefaultOverflow: React.FunctionComponent = () => {
         <Checkbox
           label="isBox"
           isChecked={isBox}
-          onChange={toggleBox}
+          onChange={(_event, checked) => toggleBox(checked)}
           aria-label="show box variation checkbox on overflow"
           id="toggle-box-overflow"
           name="toggle-box-overflow"

package/src/components/Tabs/examples/TabsFilled.tsx

@@ -40,7 +40,7 @@ export const TabsFilled: React.FunctionComponent = () => {
         <Checkbox
           label="isBox"
           isChecked={isBox}
-          onChange={toggleBox}
+          onChange={(_event, checked) => toggleBox(checked)}
           aria-label="show box variation checkbox with filled tabs"
           id="toggle-box-filled"
           name="toggle-box-filled"

package/src/components/Tabs/examples/TabsFilledWithIcons.tsx

@@ -74,7 +74,7 @@ export const TabsFilledWithIcons: React.FunctionComponent = () => {
         <Checkbox
           label="isBox"
           isChecked={isBox}
-          onChange={toggleBox}
+          onChange={(_event, checked) => toggleBox(checked)}
           aria-label="show box variation checkbox with filled icon tabs"
           id="toggle-box-filled-icon"
           name="toggle-box-filled-icon"

package/src/components/Tabs/examples/TabsInset.tsx

@@ -54,7 +54,7 @@ export const TabsInset: React.FunctionComponent = () => {
         <Checkbox
           label="isBox"
           isChecked={isBox}
-          onChange={toggleBox}
+          onChange={(_event, checked) => toggleBox(checked)}
           aria-label="show box variation checkbox with inset"
           id="toggle-box-inset"
           name="toggle-box-inset"

package/src/components/Tabs/examples/TabsPageInsets.tsx

@@ -49,7 +49,7 @@ export const TabsPageInsets: React.FunctionComponent = () => {
         <Checkbox
           label="isBox"
           isChecked={isBox}
-          onChange={toggleBox}
+          onChange={(_event, checked) => toggleBox(checked)}
           aria-label="show box variation checkbox with inset"
           id="toggle-box-page-inset"
           name="toggle-box-page-inset"

package/src/components/Tabs/examples/TabsSubtabs.tsx

@@ -104,7 +104,7 @@ export const TabsSubtabs: React.FunctionComponent = () => {
         <Checkbox
           label="isBox"
           isChecked={isBox}
-          onChange={toggleBox}
+          onChange={(_event, checked) => toggleBox(checked)}
           aria-label="show box variation checkbox with sub tabs"
           id="toggle-box-secondary"
           name="toggle-box-secondary"

package/src/components/Tabs/examples/TabsTooltipReactRef.tsx

@@ -61,7 +61,7 @@ export const TabsTooltipReactRef: React.FunctionComponent = () => {
         <Checkbox
           label="isBox"
           isChecked={isBox}
-          onChange={toggleBox}
+          onChange={(_event, checked) => toggleBox(checked)}
           aria-label="show box variation checkbox"
           id="toggle-box-tooltip-ref"
           name="toggle-box-tooltip-ref"

package/src/components/Tabs/examples/TabsVertical.tsx

@@ -61,7 +61,7 @@ export const TabsVertical: React.FunctionComponent = () => {
         <Checkbox
           label="isBox"
           isChecked={isBox}
-          onChange={toggleBox}
+          onChange={(_event, checked) => toggleBox(checked)}
           aria-label="show box variation checkbox with vertical"
           id="toggle-box-vertical"
           name="toggle-box-vertical"

package/src/components/TextArea/examples/TextAreaReadOnly.tsx

@@ -12,7 +12,7 @@ export const TextAreaReadOnly: React.FunctionComponent = () => {
           key="isPlain"
           label="Plain read only variant"
           isChecked={isPlainChecked}
-          onChange={checked => setIsPlainChecked(checked)}
+          onChange={(_event, checked) => setIsPlainChecked(checked)}
         />
       </div>
       <TextArea

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

@@ -11,7 +11,7 @@ export const TextInputReadOnly: React.FunctionComponent = () => {
           key="isPlain"
           label="Plain read only variant"
           isChecked={isPlainChecked}
-          onChange={checked => setIsPlainChecked(checked)}
+          onChange={(_event, checked) => setIsPlainChecked(checked)}
         />
       </div>
       <TextInput

package/src/components/Toolbar/examples/ToolbarSticky.tsx

@@ -19,7 +19,7 @@ export const ToolbarSticky: React.FunctionComponent = () => {
               <Checkbox
                 label="Show only even number items"
                 isChecked={showEvenOnly}
-                onChange={setShowEvenOnly}
+                onChange={(_event, checked) => setShowEvenOnly(checked)}
                 id="showOnlyEvenCheckbox"
               />
             </ToolbarItem>
@@ -31,7 +31,7 @@ export const ToolbarSticky: React.FunctionComponent = () => {
           ))}
         </ul>
       </div>
-      <Checkbox label="Is toolbar sticky" isChecked={isSticky} onChange={setIsSticky} id="isStickyCheckbox" />
+      <Checkbox label="Is toolbar sticky" isChecked={isSticky} onChange={(_event, checked) => setIsSticky(checked)} id="isStickyCheckbox" />
     </React.Fragment>
   );
 };

package/src/components/Tooltip/examples/TooltipOptions.tsx

@@ -33,7 +33,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
           <Checkbox
             label="trigger: mouseenter"
             isChecked={trigger.includes('mouseenter')}
-            onChange={checked => {
+            onChange={(_event, checked) => {
               const updatedTrigger = checked ? trigger.concat('mouseenter') : trigger.filter(t => t !== 'mouseenter');
               setIsVisible(false);
               setTrigger(updatedTrigger);
@@ -44,7 +44,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
           <Checkbox
             label="trigger: focus"
             isChecked={trigger.includes('focus')}
-            onChange={checked => {
+            onChange={(_event, checked) => {
               const updatedTrigger = checked ? trigger.concat('focus') : trigger.filter(t => t !== 'focus');
               setIsVisible(false);
               setTrigger(updatedTrigger);
@@ -55,7 +55,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
           <Checkbox
             label="trigger: click"
             isChecked={trigger.includes('click')}
-            onChange={checked => {
+            onChange={(_event, checked) => {
               const updatedTrigger = checked ? trigger.concat('click') : trigger.filter(t => t !== 'click');
               setIsVisible(false);
               setTimeout(() => setTrigger(updatedTrigger));
@@ -66,7 +66,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
           <Checkbox
             label="trigger: manual"
             isChecked={trigger.includes('manual')}
-            onChange={checked => {
+            onChange={(_event, checked) => {
               const updatedTrigger = checked ? trigger.concat('manual') : trigger.filter(t => t !== 'manual');
               setIsVisible(false);
               setTrigger(updatedTrigger);
@@ -79,7 +79,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
           <Checkbox
             label="content left-aligned"
             isChecked={contentLeftAligned}
-            onChange={checked => setContentLeftAligned(checked)}
+            onChange={(_event, checked) => setContentLeftAligned(checked)}
             aria-label="content left-aligned"
             id="content_left_aligned"
           />
@@ -88,7 +88,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
           <Checkbox
             label="enableFlip"
             isChecked={enableFlip}
-            onChange={checked => setEnableFlip(checked)}
+            onChange={(_event, checked) => setEnableFlip(checked)}
             aria-label="enableFlip"
             id="enable_flip"
           />
@@ -124,7 +124,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
           <Checkbox
             label="isVisible (also set trigger to only manual to programmatically control it)"
             isChecked={isVisible}
-            onChange={checked => setIsVisible(checked)}
+            onChange={(_event, checked) => setIsVisible(checked)}
             aria-label="isVisible"
             id="is_visible"
           />

package/src/demos/CardDemos.md

@@ -1484,7 +1484,7 @@ CardNestedDemo = () => {
           key="isToggleRightAligned"
           label="Align expand toggle on right"
           isChecked={isToggleOnRight}
-          onChange={checked => onCheckClick(!isToggleOnRight)}
+          onChange={(_event, checked) => onCheckClick(!isToggleOnRight)}
         />
       </div>
       <Card id="nested-cards-card">

package/src/demos/Toolbar.md

@@ -192,11 +192,11 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    this.handleFirstSwitchChange = (firstSwitchChecked, event) => {
+    this.handleFirstSwitchChange = (event, firstSwitchChecked) => {
       this.setState({ firstSwitchChecked });
     };
 
-    this.handleSecondSwitchChange = (secondSwitchChecked, event) => {
+    this.handleSecondSwitchChange = (event, secondSwitchChecked) => {
       this.setState({ secondSwitchChecked });
     };
 

package/src/next/components/Wizard/examples/WizardStepErrorStatus.tsx

@@ -29,7 +29,7 @@ const StepContentWithAction = () => {
     <Checkbox
       label="Give step 1 an error status"
       isChecked={!!errorMessage}
-      onChange={checked => setErrorMessage(checked ? 'Some error message' : undefined)}
+      onChange={(_event, checked) => setErrorMessage(checked ? 'Some error message' : undefined)}
       id="toggle-error-checkbox"
       name="Toggle Error Checkbox"
     />

package/src/next/components/Wizard/examples/WizardToggleStepVisibility.tsx

@@ -31,7 +31,7 @@ const StepContentWithAction: React.FunctionComponent = () => {
     <Checkbox
       label="Toggle visibility of the next step"
       isChecked={isToggleStepChecked}
-      onChange={checked => setIsToggleStepChecked(checked)}
+      onChange={(_event, checked) => setIsToggleStepChecked(checked)}
       id="toggle-hide-step-checkbox"
       name="Toggle Hide Step Checkbox"
     />