@patternfly/react-core 5.0.0-alpha.9 → 5.0.0-alpha.91

package/src/components/Tabs/examples/Tabs.md

@@ -2,7 +2,7 @@
 id: Tabs
 section: components
 cssPrefix: pf-c-tabs
-propComponents: ['Tabs', 'Tab', TabAction, 'TabContent', 'TabTitleText', 'TabTitleIcon', 'horizontalOverflowObject']
+propComponents: ['Tabs', 'Tab', 'TabContent', 'TabTitleText', 'TabTitleIcon', 'horizontalOverflowObject', 'TabAction']
 ouia: true
 ---
 
@@ -15,141 +15,217 @@ import ProjectDiagramIcon from '@patternfly/react-icons/dist/esm/icons/project-d
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
-Most tab variations are available as open (default) or box style tabs. Select the 'isBox' checkbox to preview an example with box styled tabs.
-The Tabs items background can be also toggled with 'Tab light variation' checkbox.
-Similarly the 'Tab content light variation' checkbox affects the TabContent background.
-
 ## Examples
 
-### Default
+### Default tabs
+
+A `<Tabs>` component contains multiple `<Tab>` components that may be used to navigate between sets of content within a page.
+
+You can adjust a tab in the following ways: 
+
+- To label a tab with text, pass a `<TabTitleText>` component into the `title` property of a `<Tab>`.
+- To disable a tab, use the `isDisabled` property. Tabs using `isDisabled` are not perceivable or operable by users navigating via assistive technologies. 
+- To disable a tab, but keep it perceivable to assistive technology users, use the `isAriaDisabled` property. If a disabled tab has a tooltip, use this property instead of `isDisabled`.
+- To add a tooltip to an aria-disabled tab, use the `tooltip` property. 
 
-When passing in a Tooltip component to the Tab component, the Tooltip can also be passed in directly to the `tooltip` prop.
+Most tab variations can either be 'default' or 'boxed': 
+
+- Default tabs do not have any borders and use a bottom line to distinguish between a selected tab, a hovered tab, and an inactive tab. 
+- Boxed tabs are outlined to emphasize the area that a tab spans. To preview boxed tabs in the following examples, select the 'isBox' checkbox, which sets the `isBox` property to true.
 
 ```ts file="./TabsDefault.tsx"
 ```
 
-### With tooltip react ref
+### Boxed light tabs
 
-When using a React ref to link a Tooltip to a Tab component via the `reference` prop, you should avoid manually passing in a value of "off" to the `aria-live` prop. Doing so may lead to the tooltip becoming less accessible to assistive technologies.
+To change the background color of boxed tabs, use the `variant` property. 
 
-The tooltip should also have the `id` prop passed in. The value given to this prop should then be passed into the tab's `aria-describedby` prop. This ensures a tooltip used with a React ref will be announced by the JAWS and NVDA screen readers.
+The following example passes `variant={isTabsLightScheme ? 'light300' : 'default'}` into the `<Tabs>` component to style the tabs with a lighter color.
 
-```ts file="./TabsTooltipReactRef.tsx"
+Toggle the tab color by selecting the 'Tabs light variation' checkbox in the following example.
+
+```ts file="./TabsBoxLight.tsx"
 ```
 
-### Uncontrolled
+### Vertical tabs
 
-```ts file="./TabsUncontrolled.tsx"
+Vertical tabs are placed on the left-hand side of a page or container and may appear in both 'default' and 'boxed' tab variations.
+
+To style tabs vertically, use the `isVertical` property. 
+
+```ts file="./TabsVertical.tsx"
 ```
 
-### Box light variation
+### Vertical expandable tabs
 
-```ts file="./TabsBoxLight.tsx"
+Vertical tabs can be made expandable to save space. Users can select the caret to expand a menu and switch between tabs. 
+
+Expandable tabs can be enabled at different breakpoints. The following example passes `expandable={{ default: 'expandable', md: 'nonExpandable', lg: 'expandable' }}` into the `<Tabs>` component.
+
+To flag vertical tabs when they're expanded, use the `isExpanded` property.
+
+```ts file="./TabsVerticalExpandable.tsx"
+```
+
+### Vertical expandable uncontrolled
+
+To flag the default expanded state for uncontrolled tabs, use the `defaultIsExpanded` property.
+
+```ts file="./TabsVerticalExpandableUncontrolled.tsx"
 ```
 
-### Default overflow
+### Default overflow tabs
+
+By default, overflow is applied when there are too many tabs for the width of the container they are in. This overflow can be navigated by side-scrolling within the tabs section, or by selecting the left and right arrows. 
 
 ```ts file="./TabsDefaultOverflow.tsx"
 ```
 
-### Horizontal overflow
+### Horizontal overflow tabs
+
+Horizontal overflow can be used instead of the default application. To navigate horizontal overflow tabs users can select the last tab, labeled “more”, to see the overflowed content. 
+
+To enable horizontal overflow, use the `isOverflowHorizontal` property.
+
+In the following example, select the 'Show overflowing tab count' checkbox to add a count of overflow items to the final “more” tab.
 
 ```ts file="./TabsHorizontalOverflow.tsx" isBeta
 ```
 
-### Vertical
+### With tooltip react ref
 
-```ts file="./TabsVertical.tsx"
-```
+When using a React ref to link a tooltip to a tab component via the `reference` property, you should avoid manually passing in a value of "off" to the `aria-live` property. Doing so may cause the tooltip to become less accessible to assistive technologies.
 
-### Vertical expandable
+The tooltip should also have the `id` property passed in. The value of `id` should be passed into the tab's `aria-describedby` property. This ensures a tooltip used with a React ref will be announced by the JAWS and NVDA screen readers.
 
-```ts file="./TabsVerticalExpandable.tsx"
+```ts file="./TabsTooltipReactRef.tsx"
 ```
 
-### Vertical expandable uncontrolled
+### Uncontrolled tabs
 
-```ts file="./TabsVerticalExpandableUncontrolled.tsx"
+To allow the `<Tabs>` component to manage setting the active tab and displaying correct content itself, use uncontrolled tabs, as shown in the following example. 
+
+
+```ts file="./TabsUncontrolled.tsx"
 ```
 
-### Inset
+### With adjusted inset
+
+To adjust the inset of tabs and visually separate them more, use the `inset` property. You can set the inset to "insetNone", "insetSm", "insetMd", "insetLg", "insetXl", or "inset2xl" at "default", "sm", "md", "lg, "xl, and "2xl" breakpoints.
 
 ```ts file="./TabsInset.tsx"
 ```
 
-### Page Insets
+### With page insets
+
+To adjust the left padding of tabs, use the `usePageInsets` property. This property aligns the tabs padding with the default padding of the page section, which makes it easier to align tabs with page section content.
 
 ```ts file="./TabsPageInsets.tsx"
 ```
 
-### Icons and text
+### With icons and text
+
+You can render different content in the `title` property of a tab to add icons and text. 
+
+To add an icon to a tab, pass a `<TabTitleIcon>` component that contains the icon of your choice into the `title`. To use an icon alongside styled text, keep the text in the `<TabTitleText>` component.
 
 ```ts file="./TabsIconAndText.tsx"
 ```
 
-### Tabs with sub tabs
+### Secondary tabs
 
-```ts file="./TabsSubtabs.tsx"
-```
+Use secondary tabs as "sub tabs" or within other components, like modals. Secondary tabs have less visually prominent styling. 
 
-### Filled
+To apply secondary styling to tabs, use the `isSecondary` property. 
 
-```ts file="TabsFilled.tsx"
+```ts file="./TabsSubtabs.tsx"
 ```
 
-### Filled with icons
+### Filled tabs with icons
+
+To allow tabs to fill the available width of the page section, use the `isFilled` property. 
 
 ```ts file="./TabsFilledWithIcons.tsx"
 ```
 
-### Using the nav element
+### Tabs linked to nav elements
+
+To let tabs link to nav elements, pass `{TabsComponent.nav}` into the `component` property. 
+
+Nav tabs should use the `href` property to link the tab to the URL of another page or page section. A tab with an `href` will render as an `<a>` instead of a `<button>`. 
 
 ```ts file="./TabsNav.tsx"
 ```
 
-### Sub nav using the nav element
+### Secondary tabs linked to nav elements
+
+Secondary tabs can also link to nav elements. 
 
 ```ts file="./TabsNavSecondary.tsx"
 ```
 
-### Separate content
+### With separate content
+
+If a `<TabContent>` component is defined outside of a `<Tabs>` component, use the `tabContentRef` and `tabContentId` properties 
 
 ```ts file="./TabsSeparateContent.tsx"
 ```
 
-### Tab content with body and padding
+### With tab content with body and padding
+
+To add a content body to a `<TabContent>` component, pass a `<TabContentBody>`. To add padding to the body section, use the `hasPadding` property. 
 
 ```ts file="./TabsContentWithBodyPadding.tsx"
 ```
 
 ### Children mounting on click
 
+To mount tab children (add to the DOM) when a tab is clicked, use the `mountOnEnter` property. 
+
+Note that this property does not create the tab children until the tab is clicked, so they are not preloaded into the DOM.
+
 ```ts file="./TabsChildrenMounting.tsx"
 ```
 
 ### Unmounting invisible children
 
+To unmount tab children (remove from the DOM) when they are no longer visible, use the `unmountOnExit` property.
+
 ```ts file="./TabsUnmountingInvisibleChildren.tsx"
 ```
 
-### Toggled separate content
+### Toggled tab content
+
+You may control tabs from outside of the tabs component. For example, select the "Hide tab 2" button below to make "Tab item  2" invisible.
+
+The tab its content should only be mounted when the tab is visible. 
 
 ```ts file="./TabsToggledSeparateContent.tsx"
 ```
 
-### Dynamic
+### Dynamic tabs
+
+To enable closeable tabs, pass the `onClose` property to the `<Tabs>` component. To enable a button that adds new tabs, pass the `onAdd` property to `<Tabs>`. 
 
-To enable closeable tabs, pass the `onClose` property to `Tabs`, and to enable the add button, pass the `onAdd` property to `Tabs`. Aria labels may be controlled manually by passing `closeButtonAriaLabel` to `Tab` and `addButtonAriaLabel` to `Tabs`.
+Aria labels may be controlled manually by passing the `closeButtonAriaLabel` property to a `<Tab>` and the `addButtonAriaLabel` property to `<Tabs>`.
 
-```ts file="./TabsDynamic.tsx" 
+```ts file="./TabsDynamic.tsx"
 ```
 
-### Help action
+### With help action popover
+
+You may add a help action to a tab to provide users with additional context in a popover. 
+
+To render an action beside the tab content, use the `actions` property of a `<Tab>`. Pass a popover and a `<TabsAction>` component into the `actions` property. 
 
 ```ts file="./TabsHelp.tsx" isBeta
 ```
 
-### Help and close actions
+### With help and close actions
+
+To add multiple actions to a tab, create a `<TabAction>` component for each action. 
+
+The following example passes in both help popover and close actions.
 
 ```ts file="./TabsHelpAndClose.tsx" isBeta
-```
+```

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/TabsHelp.tsx

@@ -16,7 +16,7 @@ export const TabsHelp: React.FunctionComponent = () => {
         </div>
       }
       footerContent="Popover footer"
-      reference={popoverRef}
+      triggerRef={popoverRef}
     />
   );
 

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

@@ -32,7 +32,7 @@ export const TabsHelpAndClose: React.FunctionComponent = () => {
         </div>
       }
       footerContent="Popover footer"
-      reference={popoverRef}
+      triggerRef={popoverRef}
     />
   );
 
@@ -68,7 +68,11 @@ export const TabsHelpAndClose: React.FunctionComponent = () => {
                 <TabAction aria-label={`Help for ${tab}`} ref={ref}>
                   <HelpIcon />
                 </TabAction>
-                <TabAction aria-label={`Close ${tab}`} onClick={e => onClose(e, index)} isDisabled={tabs.length === 1}>
+                <TabAction
+                  aria-label={`Close ${tab}`}
+                  onClick={(e) => onClose(e, index)}
+                  isDisabled={tabs.length === 1}
+                >
                   <TimesIcon />
                 </TabAction>
                 {helpPopover(`Help popover for ${tab}`, ref)}

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

@@ -55,13 +55,13 @@ export const TabsTooltipReactRef: React.FunctionComponent = () => {
       <Tooltip
         id="tooltip-ref1"
         content="Aria-disabled tabs are like disabled tabs, but focusable. Allows for tooltip support."
-        reference={tooltipRef}
+        triggerRef={tooltipRef}
       />
       <div style={{ marginTop: '20px' }}>
         <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/Text/__tests__/Generated/__snapshots__/TextContent.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`TextContent should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-content ''"
+    class="pf-v5-c-content ''"
   >
     ReactNode
   </div>

package/src/components/Text/__tests__/TextContent.test.tsx

@@ -18,7 +18,7 @@ test('Renders children', () => {
 
 test('Renders with class name pf-c-content', () => {
   render(<TextContent>Test</TextContent>);
-  expect(screen.getByText('Test')).toHaveClass('pf-c-content', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-content', { exact: true });
 });
 
 test('Renders with custom class name when className prop is provided', () => {

package/src/components/Text/__tests__/__snapshots__/TextContent.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-content"
+    class="pf-v5-c-content"
   >
     Test
   </div>

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

@@ -69,7 +69,7 @@ test('Text area is not read only by default', () => {
 
 test('Renders text area with default class name only', () => {
   render(<TextArea aria-label="validated textarea" />);
-  expect(screen.getByRole('textbox')).toHaveClass('pf-c-form-control', { exact: true });
+  expect(screen.getByRole('textbox')).toHaveClass('pf-v5-c-form-control', { exact: true });
 });
 
 test('Renders validated text area with success className', () => {

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

@@ -5,10 +5,10 @@ exports[`Matches the snapshot 1`] = `
   <textarea
     aria-invalid="false"
     aria-label="test textarea"
-    class="pf-c-form-control custom class"
+    class="pf-v5-c-form-control custom class"
     disabled=""
     required=""
-    style="--pf-c-form-control--textarea--Height: 6px;"
+    style="--pf-v5-c-form-control--textarea--Height: 6px;"
   />
 </DocumentFragment>
 `;

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

@@ -1,6 +1,7 @@
 ---
 id: Text area
 section: components
+subsection: forms
 cssPrefix: pf-c-form-control
 propComponents: ['TextArea']
 ---

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/TextArea/examples/TextAreaValidated.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { Form, FormGroup, TextArea } from '@patternfly/react-core';
+import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextArea } from '@patternfly/react-core';
 
 export const TextAreaValidated: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');
-  const [invalidText, setInvalidText] = React.useState('You must have something to say');
   const [validated, setValidated] = React.useState<'default' | 'error' | 'warning' | 'success' | undefined>('default');
   const [helperText, setHelperText] = React.useState('Share your thoughts.');
   const simulateNetworkCall = (callback: Function) => {
@@ -21,7 +20,7 @@ export const TextAreaValidated: React.FunctionComponent = () => {
           setHelperText('Thanks for your comments!');
         } else {
           setValidated('error');
-          setInvalidText("You're being too brief, please enter at least 10 characters.");
+          setHelperText("You're being too brief, please enter at least 10 characters.");
         }
       } else {
         setValidated('warning');
@@ -31,21 +30,19 @@ export const TextAreaValidated: React.FunctionComponent = () => {
   };
   return (
     <Form>
-      <FormGroup
-        label="Comments:"
-        type="string"
-        helperText={helperText}
-        helperTextInvalid={invalidText}
-        fieldId="selection"
-        validated={validated}
-      >
+      <FormGroup label="Comments:" type="string" fieldId="selection">
         <TextArea
           value={value}
-          onChange={value => handleTextAreaChange(value)}
+          onChange={(value) => handleTextAreaChange(value)}
           isRequired
           validated={validated}
           aria-label="invalid text area example"
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={validated}>{helperText}</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );

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

@@ -5,7 +5,7 @@ exports[`TextInput default read only text input 1`] = `
   <input
     aria-invalid="false"
     aria-label="default read only text input"
-    class="pf-c-form-control"
+    class="pf-v5-c-form-control"
     data-ouia-component-id="OUIA-Generated-TextInputBase-5"
     data-ouia-component-type="PF4/TextInput"
     data-ouia-safe="true"
@@ -21,7 +21,7 @@ exports[`TextInput disabled text input 1`] = `
   <input
     aria-invalid="false"
     aria-label="disabled text input"
-    class="pf-c-form-control"
+    class="pf-v5-c-form-control"
     data-ouia-component-id="OUIA-Generated-TextInputBase-3"
     data-ouia-component-type="PF4/TextInput"
     data-ouia-safe="true"
@@ -37,7 +37,7 @@ exports[`TextInput invalid text input 1`] = `
   <input
     aria-invalid="true"
     aria-label="invalid text input"
-    class="pf-c-form-control"
+    class="pf-v5-c-form-control"
     data-ouia-component-id="OUIA-Generated-TextInputBase-7"
     data-ouia-component-type="PF4/TextInput"
     data-ouia-safe="true"
@@ -52,7 +52,7 @@ exports[`TextInput plain read only text input 1`] = `
   <input
     aria-invalid="false"
     aria-label="plain read only text input"
-    class="pf-c-form-control pf-m-plain"
+    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"
@@ -68,7 +68,7 @@ exports[`TextInput read only text input using isReadOnly 1`] = `
   <input
     aria-invalid="false"
     aria-label="read only text input"
-    class="pf-c-form-control"
+    class="pf-v5-c-form-control"
     data-ouia-component-id="OUIA-Generated-TextInputBase-4"
     data-ouia-component-type="PF4/TextInput"
     data-ouia-safe="true"
@@ -84,7 +84,7 @@ exports[`TextInput simple text input 1`] = `
   <input
     aria-invalid="false"
     aria-label="simple text input"
-    class="pf-c-form-control"
+    class="pf-v5-c-form-control"
     data-ouia-component-id="OUIA-Generated-TextInputBase-2"
     data-ouia-component-type="PF4/TextInput"
     data-ouia-safe="true"
@@ -99,7 +99,7 @@ exports[`TextInput validated text input error 1`] = `
   <input
     aria-invalid="true"
     aria-label="validated text input"
-    class="pf-c-form-control"
+    class="pf-v5-c-form-control"
     data-ouia-component-id="OUIA-Generated-TextInputBase-10"
     data-ouia-component-type="PF4/TextInput"
     data-ouia-safe="true"

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

@@ -1,6 +1,7 @@
 ---
 id: Text input
 section: components
+subsection: forms
 cssPrefix: pf-c-form-control
 propComponents: ['TextInput']
 ---

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