@patternfly/react-core 4.221.11 → 4.221.14

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.221.14 (2022-06-13)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+## 4.221.13 (2022-06-10)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+## 4.221.12 (2022-06-10)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 ## 4.221.11 (2022-06-09)
 
 **Note:** Version bump only for package @patternfly/react-core

package/dist/umd/react-core.min.css

@@ -9135,6 +9135,76 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-helper-text__item-text--m-success--Color: var(--pf-global--success-color--100);
 }
 
+.pf-c-hint {
+  --pf-c-hint--GridRowGap: var(--pf-global--spacer--md);
+  --pf-c-hint--PaddingTop: var(--pf-global--spacer--lg);
+  --pf-c-hint--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-hint--PaddingBottom: var(--pf-global--spacer--lg);
+  --pf-c-hint--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-hint--BackgroundColor: var(--pf-global--palette--blue-50);
+  --pf-c-hint--BorderColor: var(--pf-global--palette--blue-100);
+  --pf-c-hint--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-hint--BoxShadow: var(--pf-global--BoxShadow--sm);
+  --pf-c-hint--Color: var(--pf-global--Color--100);
+  --pf-c-hint__title--FontSize: var(--pf-global--FontSize--lg);
+  --pf-c-hint__body--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-hint__footer--child--MarginRight: var(--pf-global--spacer--md);
+  --pf-c-hint__actions--MarginLeft: var(--pf-global--spacer--2xl);
+  --pf-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-row-gap: var(--pf-c-hint--GridRowGap);
+  padding: var(--pf-c-hint--PaddingTop) var(--pf-c-hint--PaddingRight) var(--pf-c-hint--PaddingBottom) var(--pf-c-hint--PaddingLeft);
+  color: var(--pf-c-hint--Color);
+  background-color: var(--pf-c-hint--BackgroundColor);
+  border: var(--pf-c-hint--BorderWidth) solid var(--pf-c-hint--BorderColor);
+  box-shadow: var(--pf-c-hint--BoxShadow);
+}
+
+.pf-c-hint .pf-c-button.pf-m-link.pf-m-inline {
+  text-align: left;
+  white-space: normal;
+}
+
+.pf-c-hint__actions {
+  display: inline-grid;
+  grid-auto-flow: column;
+  margin-left: var(--pf-c-hint__actions--MarginLeft);
+  text-align: right;
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.pf-c-hint__actions .pf-c-dropdown .pf-c-dropdown__toggle.pf-m-plain {
+  margin-top: var(--pf-c-hint__actions--c-dropdown--MarginTop);
+}
+
+.pf-c-hint__actions + .pf-c-hint__body {
+  grid-column: 1;
+}
+
+.pf-c-hint__title {
+  font-size: var(--pf-c-hint__title--FontSize);
+}
+
+.pf-c-hint__body {
+  grid-column: 1/-1;
+  font-size: var(--pf-c-hint__body--FontSize);
+}
+
+.pf-c-hint__footer {
+  grid-column: 1/-1;
+}
+
+.pf-c-hint__footer > :not(:last-child) {
+  margin-right: var(--pf-c-hint__footer--child--MarginRight);
+}
+
+:where(.pf-theme-dark) .pf-c-hint {
+  --pf-c-hint--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-hint--BorderColor: var(--pf-global--BorderColor--300);
+}
+
 .pf-c-input-group {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -9237,76 +9307,6 @@ label.pf-c-input-group__text {
   --pf-c-input-group__text--BackgroundColor: transparent;
 }
 
-.pf-c-hint {
-  --pf-c-hint--GridRowGap: var(--pf-global--spacer--md);
-  --pf-c-hint--PaddingTop: var(--pf-global--spacer--lg);
-  --pf-c-hint--PaddingRight: var(--pf-global--spacer--lg);
-  --pf-c-hint--PaddingBottom: var(--pf-global--spacer--lg);
-  --pf-c-hint--PaddingLeft: var(--pf-global--spacer--lg);
-  --pf-c-hint--BackgroundColor: var(--pf-global--palette--blue-50);
-  --pf-c-hint--BorderColor: var(--pf-global--palette--blue-100);
-  --pf-c-hint--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-hint--BoxShadow: var(--pf-global--BoxShadow--sm);
-  --pf-c-hint--Color: var(--pf-global--Color--100);
-  --pf-c-hint__title--FontSize: var(--pf-global--FontSize--lg);
-  --pf-c-hint__body--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-hint__footer--child--MarginRight: var(--pf-global--spacer--md);
-  --pf-c-hint__actions--MarginLeft: var(--pf-global--spacer--2xl);
-  --pf-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
-  display: grid;
-  grid-template-columns: 1fr auto;
-  grid-row-gap: var(--pf-c-hint--GridRowGap);
-  padding: var(--pf-c-hint--PaddingTop) var(--pf-c-hint--PaddingRight) var(--pf-c-hint--PaddingBottom) var(--pf-c-hint--PaddingLeft);
-  color: var(--pf-c-hint--Color);
-  background-color: var(--pf-c-hint--BackgroundColor);
-  border: var(--pf-c-hint--BorderWidth) solid var(--pf-c-hint--BorderColor);
-  box-shadow: var(--pf-c-hint--BoxShadow);
-}
-
-.pf-c-hint .pf-c-button.pf-m-link.pf-m-inline {
-  text-align: left;
-  white-space: normal;
-}
-
-.pf-c-hint__actions {
-  display: inline-grid;
-  grid-auto-flow: column;
-  margin-left: var(--pf-c-hint__actions--MarginLeft);
-  text-align: right;
-  grid-column: 2;
-  grid-row: 1;
-}
-
-.pf-c-hint__actions .pf-c-dropdown .pf-c-dropdown__toggle.pf-m-plain {
-  margin-top: var(--pf-c-hint__actions--c-dropdown--MarginTop);
-}
-
-.pf-c-hint__actions + .pf-c-hint__body {
-  grid-column: 1;
-}
-
-.pf-c-hint__title {
-  font-size: var(--pf-c-hint__title--FontSize);
-}
-
-.pf-c-hint__body {
-  grid-column: 1/-1;
-  font-size: var(--pf-c-hint__body--FontSize);
-}
-
-.pf-c-hint__footer {
-  grid-column: 1/-1;
-}
-
-.pf-c-hint__footer > :not(:last-child) {
-  margin-right: var(--pf-c-hint__footer--child--MarginRight);
-}
-
-:where(.pf-theme-dark) .pf-c-hint {
-  --pf-c-hint--BackgroundColor: var(--pf-global--BackgroundColor--400);
-  --pf-c-hint--BorderColor: var(--pf-global--BorderColor--300);
-}
-
 .pf-c-jump-links {
   --pf-c-jump-links__list--Display: flex;
   --pf-c-jump-links__list--Visibility: visible;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.221.11",
+  "version": "4.221.14",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.72.11",
-    "@patternfly/react-styles": "^4.71.11",
-    "@patternfly/react-tokens": "^4.73.11",
+    "@patternfly/react-icons": "^4.72.14",
+    "@patternfly/react-styles": "^4.71.14",
+    "@patternfly/react-tokens": "^4.73.14",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "fd4459f338c4b07d600383d7204a240abd58d710"
+  "gitHead": "1fd312ec1387d48aafe63455c73a55c98ea3b120"
 }

package/src/components/ExpandableSection/examples/ExpandableSection.md

@@ -11,217 +11,37 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
 
 ### Basic
 
-```js
-import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
-
-class SimpleExpandableSection extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: false
-    };
-    this.onToggle = isExpanded => {
-      this.setState({
-        isExpanded
-      });
-    };
-  }
-
-  render() {
-    const { isExpanded } = this.state;
-    return (
-      <ExpandableSection
-        toggleText={isExpanded ? 'Show less' : 'Show more'}
-        onToggle={this.onToggle}
-        isExpanded={isExpanded}
-      >
-        This content is visible only when the component is expanded.
-      </ExpandableSection>
-    );
-  }
-}
+```ts file="ExpandableSectionBasic.tsx"
 ```
 
 ### Uncontrolled
 
-```js
-import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
-
-<ExpandableSection toggleText="Show more">
-  This content is visible only when the component is expanded.
-</ExpandableSection>;
+```ts file="ExpandableSectionUncontrolled.tsx"
 ```
 
 ### Uncontrolled with dynamic toggle text
 
-```js
-import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
-
-<ExpandableSection toggleTextExpanded="Show less" toggleTextCollapsed="Show more">
-  This content is visible only when the component is expanded.
-</ExpandableSection>;
+```ts file="ExpandableSectionUncontrolledDynamicToggleText.tsx"
 ```
 
 ### Detached
 
-```js
-import React from 'react';
-import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core';
-
-class DetachedExpandableSection extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: false
-    };
-    this.onToggle = isExpanded => {
-      this.setState({
-        isExpanded
-      });
-    };
-  }
-
-  render() {
-    const { isExpanded } = this.state;
-    const contentId = 'detached-toggle-content';
-    return (
-      <Stack hasGutter>
-        <StackItem>
-          <ExpandableSection isExpanded={isExpanded} isDetached contentId={contentId}>
-            This content is visible only when the component is expanded.
-          </ExpandableSection>
-        </StackItem>
-        <StackItem>
-          <ExpandableSectionToggle
-            isExpanded={isExpanded}
-            onToggle={this.onToggle}
-            contentId={contentId}
-            direction="up"
-          >
-            {isExpanded ? 'Show less' : 'Show more'}
-          </ExpandableSectionToggle>
-        </StackItem>
-      </Stack>
-    );
-  }
-}
+```ts file="ExpandableSectionDetached.tsx"
 ```
 
 ### Disclosure variation
 
-```js
-import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
-
-class DisclosureExpandableSection extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: false
-    };
-    this.onToggle = isExpanded => {
-      this.setState({
-        isExpanded
-      });
-    };
-  }
-
-  render() {
-    const { isExpanded } = this.state;
-    return (
-      <ExpandableSection
-        toggleText={isExpanded ? 'Show less' : 'Show more'}
-        onToggle={this.onToggle}
-        isExpanded={isExpanded}
-        displaySize="large"
-        isWidthLimited
-      >
-        This content is visible only when the component is expanded.
-      </ExpandableSection>
-    );
-  }
-}
+```ts file="ExpandableSectionDisclosure.tsx"
 ```
 
 ### Indented
 
-```js
-import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
-
-class SimpleExpandableSection extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: false
-    };
-    this.onToggle = isExpanded => {
-      this.setState({
-        isExpanded
-      });
-    };
-  }
-
-  render() {
-    const { isExpanded } = this.state;
-    return (
-      <ExpandableSection
-        toggleText={isExpanded ? 'Show less' : 'Show more'}
-        onToggle={this.onToggle}
-        isExpanded={isExpanded}
-        isIndented={true}
-      >
-        This content is visible only when the component is expanded.
-      </ExpandableSection>
-    );
-  }
-}
+```ts file="ExpandableSectionIndented.tsx"
 ```
 
 ### With custom toggle content
 
 By using the `toggleContent` prop, you can pass in content other than a simple string such as an icon or a badge. When passing in custom content in this way, you should not pass in any interactive element such as a button.
 
-```js
-import React from "react";
-import { ExpandableSection, Badge } from "@patternfly/react-core";
-import CheckCircleIcon from "@patternfly/react-icons/dist/esm/icons/check-circle-icon";
-
-class CustomExpandableSection extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: false
-    };
-    this.onToggle = (isExpanded) => {
-      this.setState({
-        isExpanded
-      });
-    };
-  }
-
-  render() {
-    const { isExpanded } = this.state;
-    return (
-      <ExpandableSection
-        toggleContent={
-          <div>
-            <span>You can also use icons </span>
-            <CheckCircleIcon />
-            <span> or badges </span>
-            <Badge isRead={true}>4</Badge>
-            <span> !</span>
-          </div>
-        }
-        onToggle={this.onToggle}
-        isExpanded={isExpanded}
-      >
-        This content is visible only when the component is expanded.
-      </ExpandableSection>
-    );
-  }
-}
+```ts file="ExpandableSectionCustomToggle.tsx"
 ```

package/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
+
+export const ExpandableSectionBasic: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <ExpandableSection toggleText={isExpanded ? 'Show less' : 'Show more'} onToggle={onToggle} isExpanded={isExpanded}>
+      This content is visible only when the component is expanded.
+    </ExpandableSection>
+  );
+};

package/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ExpandableSection, Badge } from '@patternfly/react-core';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+
+export const ExpandableSectionCustomToggle: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <ExpandableSection
+      toggleContent={
+        <div>
+          <span>You can also use icons </span>
+          <CheckCircleIcon />
+          <span> or badges </span>
+          <Badge isRead={true}>4</Badge>
+          <span> !</span>
+        </div>
+      }
+      onToggle={onToggle}
+      isExpanded={isExpanded}
+    >
+      This content is visible only when the component is expanded.
+    </ExpandableSection>
+  );
+};

package/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core';
+
+export const ExpandableSectionDetached: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  const contentId = 'detached-toggle-content';
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <ExpandableSection isExpanded={isExpanded} isDetached contentId={contentId}>
+          This content is visible only when the component is expanded.
+        </ExpandableSection>
+      </StackItem>
+      <StackItem>
+        <ExpandableSectionToggle isExpanded={isExpanded} onToggle={onToggle} contentId={contentId} direction="up">
+          {isExpanded ? 'Show less' : 'Show more'}
+        </ExpandableSectionToggle>
+      </StackItem>
+    </Stack>
+  );
+};

package/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
+
+export const ExpandableSectionDisclosure: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <ExpandableSection
+      toggleText={isExpanded ? 'Show less' : 'Show more'}
+      onToggle={onToggle}
+      isExpanded={isExpanded}
+      displaySize="large"
+      isWidthLimited
+    >
+      This content is visible only when the component is expanded.
+    </ExpandableSection>
+  );
+};

package/src/components/ExpandableSection/examples/ExpandableSectionIndented.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
+
+export const ExpandableSectionIndented: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <ExpandableSection
+      toggleText={isExpanded ? 'Show less' : 'Show more'}
+      onToggle={onToggle}
+      isExpanded={isExpanded}
+      isIndented
+    >
+      This content is visible only when the component is expanded.
+    </ExpandableSection>
+  );
+};

package/src/components/ExpandableSection/examples/ExpandableSectionUncontrolled.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
+
+export const ExpandableSectionUncontrolled: React.FunctionComponent = () => (
+  <ExpandableSection toggleText="Show more">
+    This content is visible only when the component is expanded.
+  </ExpandableSection>
+);

package/src/components/ExpandableSection/examples/ExpandableSectionUncontrolledDynamicToggleText.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
+
+export const ExpandableSectionUncontrolledDynamicToggle: React.FunctionComponent = () => (
+  <ExpandableSection toggleTextExpanded="Show less" toggleTextCollapsed="Show more">
+    This content is visible only when the component is expanded.
+  </ExpandableSection>
+);

package/src/components/FormSelect/examples/FormSelect.md

@@ -9,310 +9,24 @@ ouia: true
 ## Examples
 
 ### Basic
-```js
-import React from 'react';
-import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';
-
-class FormSelectInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 'mrs'
-    };
-    this.onChange = (value, event) => {
-      this.setState({ value });
-    };
-    this.options = [
-      { value: 'please choose', label: 'Select one', disabled: true },
-      { value: 'mr', label: 'Mr', disabled: false },
-      { value: 'miss', label: 'Miss', disabled: false },
-      { value: 'mrs', label: 'Mrs', disabled: false },
-      { value: 'ms', label: 'Ms', disabled: false },
-      { value: 'dr', label: 'Dr', disabled: false },
-      { value: 'other', label: 'Other', disabled: false }
-    ];
-  }
-
-  render() {
-    return (
-      <FormSelect value={this.state.value} onChange={this.onChange} aria-label="FormSelect Input">
-        {this.options.map((option, index) => (
-          <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
-        ))}
-      </FormSelect>
-    );
-  }
-}
-```
-
-### Invalid
-```js
-import React from 'react';
-import { FormSelect, FormSelectOption, FormSelectOptionGroup, ValidatedOptions } from '@patternfly/react-core';
-
-class FormSelectInputInvalid extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      validated: ValidatedOptions.default
-    };
-    this.isEmpty = () => this.state.value !== '';
-    this.onChange = (value, event) => {
-      const validated = this.isEmpty() && ValidatedOptions.error
-      this.setState({ value, validated });
-    };
-    this.options = [
-      { value: '', label: 'Select a number', disabled: false, isPlaceholder: true },
-      { value: '1', label: 'One', disabled: false, isPlaceholder: false },
-      { value: '2', label: 'Two', disabled: false, isPlaceholder: false  },
-      { value: '3', label: 'Three', disabled: false, isPlaceholder: false  }
-    ];
-  }
-
-  render() {
-    const { value, validated } = this.state;
-
-    return (
-      <FormSelect
-        validated={validated}
-        value={value}
-        onChange={this.onChange}
-        aria-label="FormSelect Input"
-      >
-        {this.options.map((option, index) => (
-          <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} isPlaceholder={option.isPlaceholder} />
-        ))}
-      </FormSelect>
-    );
-  }
-}
+```ts file='./FormSelectBasic.tsx'
 ```
 
 ### Validated
-```js
-import React from 'react';
-import { Form, FormGroup, FormSelect, FormSelectOption, FormSelectOptionGroup, ValidatedOptions } from '@patternfly/react-core';
-
-class FormSelectInputInvalid extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      invalidText: 'You must choose something',
-      validated: ValidatedOptions.default
-    };
-
-    this.simulateNetworkCall = callback => {
-      setTimeout(callback, 2000);
-    };
-
-    this.onChange = (value, event) => {
-      this.setState(
-        { value, validated: ValidatedOptions.default, helperText: 'Validating...' },
-        this.simulateNetworkCall(() => {
-          if (value === '3') {
-            this.setState({ validated: ValidatedOptions.success, helperText: 'You chose wisely' });
-          } else if (value === '') {
-              this.setState({ validated: ValidatedOptions.warning, helperText: 'You must select a value' });
-          } else {
-            this.setState({ validated: ValidatedOptions.error, invalidText: 'You must chose Three (thought that was obvious)' });
-          }
-        })
-      );
-    };
-
-    this.options = [
-      { value: '', label: 'Select a number', disabled: false, isPlaceholder: true  },
-      { value: '1', label: 'One', disabled: false, isPlaceholder: false  },
-      { value: '2', label: 'Two', disabled: false, isPlaceholder: false  },
-      { value: '3', label: 'Three - the only valid option', disabled: false, isPlaceholder: false  }
-    ];
-  }
-
-  render() {
-    const { value, validated, helperText, invalidText } = this.state;
-    return (
-      <Form>
-        <FormGroup
-          label="Selection:"
-          type="string"
-          helperText={helperText}
-          helperTextInvalid={invalidText}
-          fieldId="selection"
-          validated={validated}
-        >
-          <FormSelect
-            id="selection"
-            validated={validated}
-            value={value}
-            onChange={this.onChange}
-            aria-label="FormSelect Input"
-          >
-            {this.options.map((option, index) => (
-              <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} isPlaceholder={option.isPlaceholder} />
-            ))}
-          </FormSelect>
-        </FormGroup>
-      </Form>
-    );
-  }
-}
+```ts file='./FormSelectValidated.tsx'
 ```
 
 ### Disabled
-```js
-import React from 'react';
-import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';
-
-class FormSelectInputDisabled extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 'mrs'
-    };
-    this.onChange = (value, event) => {
-      this.setState({ value });
-    };
-    this.options = [
-      { value: 'please choose', label: 'Select one', disabled: true },
-      { value: 'mr', label: 'Mr', disabled: false },
-      { value: 'miss', label: 'Miss', disabled: false },
-      { value: 'mrs', label: 'Mrs', disabled: false },
-      { value: 'ms', label: 'Ms', disabled: false },
-      { value: 'dr', label: 'Dr', disabled: false },
-      { value: 'other', label: 'Other', disabled: false }
-    ];
-  }
-
-  render() {
-    return (
-      <FormSelect value={this.state.value} onChange={this.onChange} isDisabled aria-label="FormSelect Input">
-        {this.options.map((option, index) => (
-          <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
-        ))}
-      </FormSelect>
-    );
-  }
-}
+```ts file='./FormSelectDisabled.tsx'
 ```
 
 ### Grouped
-```js
-import React from 'react';
-import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';
-
-class FormSelectInputGrouped extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '2'
-    };
-    this.onChange = (value, event) => {
-      this.setState({ value });
-    };
-    this.groups = [
-      {
-        groupLabel: 'Group1',
-        disabled: false,
-        options: [
-          { value: '1', label: 'The first option', disabled: false },
-          { value: '2', label: 'Second option is selected by default', disabled: false }
-        ]
-      },
-      {
-        groupLabel: 'Group2',
-        disabled: false,
-        options: [
-          { value: '3', label: 'The third option', disabled: false },
-          { value: '4', label: 'The fourth option', disabled: false }
-        ]
-      },
-      {
-        groupLabel: 'Group3',
-        disabled: true,
-        options: [
-          { value: '5', label: 'The fifth option', disabled: false },
-          { value: '6', label: 'The sixth option', disabled: false }
-        ]
-      }
-    ];
-    this.getOptionLbl = option => option.label;
-    this.getOptionVal = option => option.value;
-    this.getOptionsGroupLbl = group => group && group.groupLabel;
-    this.getGroupOptions = group => group && group.options;
-  }
-
-  render() {
-    return (
-      <FormSelect value={this.state.value} onChange={this.onChange} aria-label="FormSelect Input">
-        {this.groups.map((group, index) => (
-          <FormSelectOptionGroup isDisabled={group.disabled} key={index} label={group.groupLabel}>
-            {group.options.map((option, i) => (
-              <FormSelectOption isDisabled={option.disabled} key={i} value={option.value} label={option.label} />
-            ))}
-          </FormSelectOptionGroup>
-        ))}
-      </FormSelect>
-    );
-  }
-}
+```ts file='./FormSelectGrouped.tsx'
 ```
 
 ### Icon sprite variant
 
 **Note:** The dropdown toggle icon is applied as a background image 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 { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';
-
-class FormSelectIconSpriteInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      validated: ValidatedOptions.default
-    };
-
-    this.onChange = (value, event) => {
-      if (value === '3') {
-        this.setState({ value, validated: ValidatedOptions.success, helperText: 'You chose wisely' });
-      } else if (value === '') {
-        this.setState({ value, validated: ValidatedOptions.warning, helperText: 'You must select a value' });
-      } else {
-        this.setState({
-          value,
-          validated: ValidatedOptions.error,
-          invalidText: 'You must chose Three (thought that was obvious)'
-        });
-      }
-    };
-
-    this.options = [
-      { value: '', label: 'Select a number', disabled: false, isPlaceholder: true },
-      { value: '1', label: 'One', disabled: false, isPlaceholder: false },
-      { value: '2', label: 'Two', disabled: false, isPlaceholder: false },
-      { value: '3', label: 'Three - the only valid option', disabled: false, isPlaceholder: false }
-    ];
-  }
-
-  render() {
-    const { value, validated, helperText, invalidText } = this.state;
-
-    return (
-      <FormSelect
-        validated={validated}
-        isIconSprite
-        value={value}
-        onChange={this.onChange}
-        aria-label="FormSelect Input"
-      >
-        {this.options.map((option, index) => (
-          <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
-        ))}
-      </FormSelect>
-    );
-  }
-}
+```ts file='./FormSelectIconSpriteVariant.tsx' isBeta
 ```

package/src/components/FormSelect/examples/FormSelectBasic.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { FormSelect, FormSelectOption } from '@patternfly/react-core';
+
+export const FormSelectBasic: React.FunctionComponent = () => {
+  const [formSelectValue, setFormSelectValue] = React.useState('mrs');
+
+  const onChange = (value: string) => {
+    setFormSelectValue(value);
+  };
+
+  const options = [
+    { value: 'please choose', label: 'Select one', disabled: true },
+    { value: 'mr', label: 'Mr', disabled: false },
+    { value: 'miss', label: 'Miss', disabled: false },
+    { value: 'mrs', label: 'Mrs', disabled: false },
+    { value: 'ms', label: 'Ms', disabled: false },
+    { value: 'dr', label: 'Dr', disabled: false },
+    { value: 'other', label: 'Other', disabled: false }
+  ];
+
+  return (
+    <FormSelect value={formSelectValue} onChange={onChange} aria-label="FormSelect Input">
+      {options.map((option, index) => (
+        <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
+      ))}
+    </FormSelect>
+  );
+};

package/src/components/FormSelect/examples/FormSelectDisabled.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { FormSelect, FormSelectOption } from '@patternfly/react-core';
+
+export const FormSelectDisabled: React.FunctionComponent = () => {
+  const [formSelectValue, setFormSelectValue] = React.useState('mrs');
+
+  const onChange = (value: string) => {
+    setFormSelectValue(value);
+  };
+
+  const options = [
+    { value: 'please choose', label: 'Select one', disabled: true },
+    { value: 'mr', label: 'Mr', disabled: false },
+    { value: 'miss', label: 'Miss', disabled: false },
+    { value: 'mrs', label: 'Mrs', disabled: false },
+    { value: 'ms', label: 'Ms', disabled: false },
+    { value: 'dr', label: 'Dr', disabled: false },
+    { value: 'other', label: 'Other', disabled: false }
+  ];
+
+  return (
+    <FormSelect value={formSelectValue} onChange={onChange} isDisabled aria-label="FormSelect Input">
+      {options.map((option, index) => (
+        <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
+      ))}
+    </FormSelect>
+  );
+};

package/src/components/FormSelect/examples/FormSelectGrouped.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';
+
+export const FormSelectGrouped: React.FunctionComponent = () => {
+  const [formSelectValue, setFormSelectValue] = React.useState('2');
+
+  const onChange = (value: string) => {
+    setFormSelectValue(value);
+  };
+
+  const groups = [
+    {
+      groupLabel: 'Group1',
+      disabled: false,
+      options: [
+        { value: '1', label: 'The first option', disabled: false },
+        { value: '2', label: 'Second option is selected by default', disabled: false }
+      ]
+    },
+    {
+      groupLabel: 'Group2',
+      disabled: false,
+      options: [
+        { value: '3', label: 'The third option', disabled: false },
+        { value: '4', label: 'The fourth option', disabled: false }
+      ]
+    },
+    {
+      groupLabel: 'Group3',
+      disabled: true,
+      options: [
+        { value: '5', label: 'The fifth option', disabled: false },
+        { value: '6', label: 'The sixth option', disabled: false }
+      ]
+    }
+  ];
+
+  return (
+    <FormSelect value={formSelectValue} onChange={onChange} aria-label="FormSelect Input">
+      {groups.map((group, index) => (
+        <FormSelectOptionGroup isDisabled={group.disabled} key={index} label={group.groupLabel}>
+          {group.options.map((option, i) => (
+            <FormSelectOption isDisabled={option.disabled} key={i} value={option.value} label={option.label} />
+          ))}
+        </FormSelectOptionGroup>
+      ))}
+    </FormSelect>
+  );
+};

package/src/components/FormSelect/examples/FormSelectIconSpriteVariant.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Form, FormGroup, FormSelect, FormSelectOption, ValidatedOptions } from '@patternfly/react-core';
+
+export const FormSelectIconSpriteVariant: React.FunctionComponent = () => {
+  const [formSelectValue, setFormSelectValue] = React.useState('');
+  const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.default);
+  const [invalidText, setInvalidText] = React.useState('You must choose something');
+  const [helperText, setHelperText] = React.useState('');
+
+  const onChange = (value: string) => {
+    if (value === '3') {
+      setFormSelectValue(value);
+      setValidated(ValidatedOptions.success);
+      setHelperText('You chose wisely');
+    } else if (value === '') {
+      setFormSelectValue(value);
+      setValidated(ValidatedOptions.warning);
+      setHelperText('You must select a value');
+    } else {
+      setFormSelectValue(value);
+      setValidated(ValidatedOptions.error);
+      setInvalidText('You must chose Three (thought that was obvious)');
+    }
+  };
+
+  const options = [
+    { value: '', label: 'Select a number', disabled: false, isPlaceholder: true },
+    { value: '1', label: 'One', disabled: false, isPlaceholder: false },
+    { value: '2', label: 'Two', disabled: false, isPlaceholder: false },
+    { value: '3', label: 'Three - the only valid option', disabled: false, isPlaceholder: false }
+  ];
+
+  return (
+    <Form>
+      <FormGroup
+        label="Selection:"
+        type="string"
+        helperText={helperText}
+        helperTextInvalid={invalidText}
+        fieldId="selection"
+        validated={validated}
+      >
+        <FormSelect
+          validated={validated}
+          isIconSprite
+          value={formSelectValue}
+          onChange={onChange}
+          aria-label="FormSelect Input"
+        >
+          {options.map((option, index) => (
+            <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
+          ))}
+        </FormSelect>
+      </FormGroup>
+    </Form>
+  );
+};

package/src/components/FormSelect/examples/FormSelectValidated.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Form, FormGroup, FormSelect, FormSelectOption, ValidatedOptions } from '@patternfly/react-core';
+
+export const FormSelectValidated: React.FunctionComponent = () => {
+  const [formValue, setFormValue] = React.useState('');
+  const [invalidText, setInvalidText] = React.useState('You must choose something');
+  const [helperText, setHelperText] = React.useState('');
+  const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.default);
+
+  const simulateNetworkCall = (callback: () => void) => {
+    setTimeout(callback, 2000);
+  };
+
+  const onChange = (value: string) => {
+    setFormValue(value);
+    setValidated(ValidatedOptions.default);
+    setHelperText('Validating...');
+    simulateNetworkCall(() => {
+      if (value === '3') {
+        setValidated(ValidatedOptions.success);
+        setHelperText('You chose wisely');
+      } else if (value === '') {
+        setValidated(ValidatedOptions.warning);
+        setHelperText('You must select a value');
+      } else {
+        setValidated(ValidatedOptions.error);
+        setInvalidText('You must chose Three (thought that was obvious)');
+      }
+    });
+  };
+
+  const options = [
+    { value: '', label: 'Select a number', disabled: false, isPlaceholder: true },
+    { value: '1', label: 'One', disabled: false, isPlaceholder: false },
+    { value: '2', label: 'Two', disabled: false, isPlaceholder: false },
+    { value: '3', label: 'Three - the only valid option', disabled: false, isPlaceholder: false }
+  ];
+
+  return (
+    <Form>
+      <FormGroup
+        label="Selection:"
+        type="string"
+        helperText={helperText}
+        helperTextInvalid={invalidText}
+        fieldId="selection"
+        validated={validated}
+      >
+        <FormSelect
+          id="selection"
+          validated={validated}
+          value={formValue}
+          onChange={onChange}
+          aria-label="FormSelect Input"
+        >
+          {options.map((option, index) => (
+            <FormSelectOption
+              isDisabled={option.disabled}
+              key={index}
+              value={option.value}
+              label={option.label}
+              isPlaceholder={option.isPlaceholder}
+            />
+          ))}
+        </FormSelect>
+      </FormGroup>
+    </Form>
+  );
+};