@patternfly/react-core 4.221.6 → 4.221.9

package/src/components/HelperText/examples/HelperTextDynamicList.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const HelperTextDynamicList: React.FunctionComponent = () => (
+  <HelperText component="ul">
+    <HelperTextItem isDynamic variant="success" component="li">
+      Must be at least 14 characters
+    </HelperTextItem>
+    <HelperTextItem isDynamic variant="error" component="li">
+      Cannot contain any variation of the word "redhat"
+    </HelperTextItem>
+    <HelperTextItem isDynamic variant="success" component="li">
+      Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols
+    </HelperTextItem>
+  </HelperText>
+);

package/src/components/HelperText/examples/HelperTextMultipleStatic.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const HelperTextMultipleStatic: React.FunctionComponent = () => (
+  <HelperText>
+    <HelperTextItem>This is default helper text</HelperTextItem>
+    <HelperTextItem>This is another default helper text in the same block</HelperTextItem>
+    <HelperTextItem>And this is more default text in the same block</HelperTextItem>
+  </HelperText>
+);

package/src/components/HelperText/examples/HelperTextStatic.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const HelperTextStatic: React.FunctionComponent = () => (
+  <React.Fragment>
+    <HelperText>
+      <HelperTextItem>This is default helper text</HelperTextItem>
+    </HelperText>
+    <HelperText>
+      <HelperTextItem variant="indeterminate">This is indeterminate helper text</HelperTextItem>
+    </HelperText>
+    <HelperText>
+      <HelperTextItem variant="warning">This is warning helper text</HelperTextItem>
+    </HelperText>
+    <HelperText>
+      <HelperTextItem variant="success">This is success helper text</HelperTextItem>
+    </HelperText>
+    <HelperText>
+      <HelperTextItem variant="error">This is error helper text</HelperTextItem>
+    </HelperText>
+  </React.Fragment>
+);

package/src/components/HelperText/examples/HelperTextStaticWithCustomIcon.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { HelperText, HelperTextItem } from '@patternfly/react-core';
+import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
+import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
+import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+export const HelperTextStaticWithCustomIcon: React.FunctionComponent = () => (
+  <React.Fragment>
+    <HelperText>
+      <HelperTextItem icon={<InfoIcon />}>This is default helper text</HelperTextItem>
+    </HelperText>
+    <HelperText>
+      <HelperTextItem variant="indeterminate" icon={<QuestionIcon />}>
+        This is indeterminate helper text
+      </HelperTextItem>
+    </HelperText>
+    <HelperText>
+      <HelperTextItem variant="warning" icon={<ExclamationIcon />}>
+        This is warning helper text
+      </HelperTextItem>
+    </HelperText>
+    <HelperText>
+      <HelperTextItem variant="success" icon={<CheckIcon />}>
+        This is success helper text
+      </HelperTextItem>
+    </HelperText>
+    <HelperText>
+      <HelperTextItem variant="error" icon={<TimesIcon />}>
+        This is error helper text
+      </HelperTextItem>
+    </HelperText>
+  </React.Fragment>
+);

package/src/components/HelperText/examples/HelperTextStaticWithDefaultIcon.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const HelperTextStaticWithDefaultIcon: React.FunctionComponent = () => (
+  <React.Fragment>
+    <HelperText>
+      <HelperTextItem hasIcon>This is default helper text</HelperTextItem>
+    </HelperText>
+    <HelperText>
+      <HelperTextItem variant="indeterminate" hasIcon>
+        This is indeterminate helper text
+      </HelperTextItem>
+    </HelperText>
+    <HelperText>
+      <HelperTextItem variant="warning" hasIcon>
+        This is warning helper text
+      </HelperTextItem>
+    </HelperText>
+    <HelperText>
+      <HelperTextItem variant="success" hasIcon>
+        This is success helper text
+      </HelperTextItem>
+    </HelperText>
+    <HelperText>
+      <HelperTextItem variant="error" hasIcon>
+        This is error helper text
+      </HelperTextItem>
+    </HelperText>
+  </React.Fragment>
+);

package/src/components/Hint/examples/Hint.md

@@ -9,175 +9,10 @@ propComponents: ['Hint', 'HintTitle', 'HintBody', 'HintFooter']
 
 ### Basic with title
 
-```js
-import React from 'react';
-import {
-  Hint,
-  HintTitle,
-  HintBody,
-  HintFooter,
-  Button,
-  Dropdown,
-  DropdownToggle,
-  DropdownItem,
-  DropdownSeparator,
-  DropdownPosition,
-  DropdownDirection,
-  KebabToggle
-} from '@patternfly/react-core';
-
-class BasicHint extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false
-    };
-    this.onToggle = isOpen => {
-      this.setState({
-        isOpen
-      });
-    };
-    this.onSelect = event => {
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-    };
-  }
-
-  render() {
-    const { isOpen } = this.state;
-    const dropdownItems = [
-      <DropdownItem key="link">Link</DropdownItem>,
-      <DropdownItem key="action" component="button">
-        Action
-      </DropdownItem>,
-      <DropdownItem key="disabled link" isDisabled>
-        Disabled Link
-      </DropdownItem>,
-      <DropdownItem key="disabled action" isDisabled component="button">
-        Disabled Action
-      </DropdownItem>,
-      <DropdownSeparator key="separator" />,
-      <DropdownItem key="separated link">Separated Link</DropdownItem>,
-      <DropdownItem key="separated action" component="button">
-        Separated Action
-      </DropdownItem>
-    ];
-    const actions = (
-      <Dropdown
-        onSelect={this.onSelect}
-        toggle={<KebabToggle onToggle={this.onToggle} id="hint-kebab-toggle" />}
-        isOpen={isOpen}
-        dropdownItems={dropdownItems}
-        position="right"
-        isPlain
-      />
-    );
-    return (
-      <Hint actions={actions}>
-        <HintTitle>Do more with Find it Fix it capabilities</HintTitle>
-        <HintBody>
-          Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
-        </HintBody>
-        <HintFooter>
-          <Button variant="link" isInline>
-            Try it for 90 days
-          </Button>
-        </HintFooter>
-      </Hint>
-    );
-  }
-}
+```ts file="HintBasicWithTitle.tsx"
 ```
 
 ### Basic without title
 
-```js
-import React from 'react';
-import {
-  Hint,
-  HintBody,
-  HintFooter,
-  Button,
-  Dropdown,
-  DropdownToggle,
-  DropdownItem,
-  DropdownSeparator,
-  DropdownPosition,
-  DropdownDirection,
-  KebabToggle
-} from '@patternfly/react-core';
-
-class BasicHint extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false
-    };
-    this.onToggle = isOpen => {
-      this.setState({
-        isOpen
-      });
-    };
-    this.onSelect = event => {
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-    };
-  }
-
-  render() {
-    const { isOpen } = this.state;
-    const dropdownItems = [
-      <DropdownItem key="link">Link</DropdownItem>,
-      <DropdownItem key="action" component="button">
-        Action
-      </DropdownItem>,
-      <DropdownItem key="disabled link" isDisabled>
-        Disabled Link
-      </DropdownItem>,
-      <DropdownItem key="disabled action" isDisabled component="button">
-        Disabled Action
-      </DropdownItem>,
-      <DropdownSeparator key="separator" />,
-      <DropdownItem key="separated link">Separated Link</DropdownItem>,
-      <DropdownItem key="separated action" component="button">
-        Separated Action
-      </DropdownItem>
-    ];
-    const actions = (
-      <Dropdown
-        onSelect={this.onSelect}
-        toggle={<KebabToggle onToggle={this.onToggle} id="hint-notitle-kebab-toggle" />}
-        isOpen={isOpen}
-        dropdownItems={dropdownItems}
-        position="right"
-        isPlain
-      />
-    );
-    return (
-      <React.Fragment>
-        <Hint>
-          <HintBody>
-            Welcome to the new documentation experience.
-            <Button variant="link" isInline>
-              Learn more about the improved features.
-            </Button>
-          </HintBody>
-        </Hint>
-        <br />
-        <Hint actions={actions}>
-          <HintBody>
-            Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
-          </HintBody>
-          <HintFooter>
-            <Button variant="link" isInline>
-              Try it for 90 days
-            </Button>
-          </HintFooter>
-        </Hint>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="HintBasicWithoutTitle.tsx"
 ```

package/src/components/Hint/examples/HintBasicWithTitle.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import {
+  Hint,
+  HintTitle,
+  HintBody,
+  HintFooter,
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownSeparator,
+  KebabToggle
+} from '@patternfly/react-core';
+
+export const HintBasicWithTitle: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onSelect = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled>
+      Disabled Link
+    </DropdownItem>,
+    <DropdownItem key="disabled action" isDisabled component="button">
+      Disabled Action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated Link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated Action
+    </DropdownItem>
+  ];
+  const actions = (
+    <Dropdown
+      onSelect={onSelect}
+      toggle={<KebabToggle onToggle={onToggle} id="hint-kebab-toggle" />}
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+      position="right"
+      isPlain
+    />
+  );
+  return (
+    <Hint actions={actions}>
+      <HintTitle>Do more with Find it Fix it capabilities</HintTitle>
+      <HintBody>
+        Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
+      </HintBody>
+      <HintFooter>
+        <Button variant="link" isInline>
+          Try it for 90 days
+        </Button>
+      </HintFooter>
+    </Hint>
+  );
+};

package/src/components/Hint/examples/HintBasicWithoutTitle.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import {
+  Hint,
+  HintBody,
+  HintFooter,
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownSeparator,
+  KebabToggle
+} from '@patternfly/react-core';
+
+export const HintBasicWithoutTitle: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onSelect = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled>
+      Disabled Link
+    </DropdownItem>,
+    <DropdownItem key="disabled action" isDisabled component="button">
+      Disabled Action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated Link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated Action
+    </DropdownItem>
+  ];
+  const actions = (
+    <Dropdown
+      onSelect={onSelect}
+      toggle={<KebabToggle onToggle={onToggle} id="hint-notitle-kebab-toggle" />}
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+      position="right"
+      isPlain
+    />
+  );
+  return (
+    <React.Fragment>
+      <Hint>
+        <HintBody>
+          Welcome to the new documentation experience.
+          <Button variant="link" isInline>
+            Learn more about the improved features.
+          </Button>
+        </HintBody>
+      </Hint>
+      <br />
+      <Hint actions={actions}>
+        <HintBody>
+          Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
+        </HintBody>
+        <HintFooter>
+          <Button variant="link" isInline>
+            Try it for 90 days
+          </Button>
+        </HintFooter>
+      </Hint>
+    </React.Fragment>
+  );
+};

package/src/components/Label/Label.tsx

@@ -14,7 +14,7 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   /** Additional classes added to the label. */
   className?: string;
   /** Color of the label. */
-  color?: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey';
+  color?: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey' | 'gold';
   /** Variant of the label. */
   variant?: 'outline' | 'filled';
   /** Flag indicating the label is compact. */
@@ -78,6 +78,7 @@ const colorStyles = {
   orange: styles.modifiers.orange,
   purple: styles.modifiers.purple,
   red: styles.modifiers.red,
+  gold: styles.modifiers.gold,
   grey: ''
 };
 

package/src/components/Label/examples/Label.md

@@ -156,6 +156,27 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-i
   <Label color="cyan" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
     Cyan label with icon that overflows
   </Label>
+  <br />
+  <br />
+  <Label color="gold">Gold</Label>{' '}
+  <Label color="gold" icon={<InfoCircleIcon />}>
+    Gold icon
+  </Label>{' '}
+  <Label color="gold" onClose={Function.prototype}>
+    Gold removable
+  </Label>{' '}
+  <Label color="gold" icon={<InfoCircleIcon />} onClose={Function.prototype}>
+    Gold icon removable
+  </Label>{' '}
+  <Label color="gold" href="#filled">
+    Gold link
+  </Label>{' '}
+  <Label color="gold" href="#filled" onClose={Function.prototype}>
+    Gold link removable
+  </Label>
+  <Label color="gold" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
+    Gold label with icon that overflows
+  </Label>
 </React.Fragment>;
 ```
 
@@ -324,6 +345,29 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-i
   <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
     Cyan label with icon that overflows
   </Label>
+  <br />
+  <br />
+  <Label variant="outline" color="gold">
+    Gold
+  </Label>{' '}
+  <Label variant="outline" color="gold" icon={<InfoCircleIcon />}>
+    Gold icon
+  </Label>{' '}
+  <Label variant="outline" color="gold" onClose={Function.prototype}>
+    Gold removable
+  </Label>{' '}
+  <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={Function.prototype}>
+    Gold icon removable
+  </Label>{' '}
+  <Label variant="outline" color="gold" href="#outline">
+    Gold link
+  </Label>{' '}
+  <Label variant="outline" color="gold" href="#outline" onClose={Function.prototype}>
+    Gold link removable
+  </Label>
+  <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
+    Gold label with icon that overflows
+  </Label>
 </React.Fragment>;
 ```
 

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

@@ -640,8 +640,8 @@ class InsetTabs extends React.Component {
           inset={{
             default: 'insetNone',
             md: 'insetSm',
-            xl: 'inset2xl',
-            '2xl': 'insetLg'
+            xl: 'insetLg',
+            '2xl': 'inset2xl'
           }}
           isBox={isBox}
           aria-label="Tabs in the inset example"