@patternfly/react-core 4.222.1 → 4.222.4

package/src/components/InputGroup/examples/InputGroupBasic.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
+import { InputGroup, InputGroupText, InputGroupTextVariant, TextInput, ValidatedOptions } from '@patternfly/react-core';
+
+export const InputGroupBasic: React.FunctionComponent = () => (
+  <React.Fragment>
+    <InputGroup>
+      <TextInput id="textInput6" type="email" aria-label="email input field" />
+      <InputGroupText id="email-example">@example.com</InputGroupText>
+    </InputGroup>
+    <br />
+    <InputGroup>
+      <InputGroupText id="username">
+        <AtIcon />
+      </InputGroupText>
+      <TextInput
+        validated={ValidatedOptions.error}
+        id="textInput7"
+        type="email"
+        aria-label="Error state username example"
+      />
+    </InputGroup>
+    <br />
+    <InputGroup>
+      <TextInput name="textIndex12" id="textInput12" type="text" aria-label="percentage" />
+      <InputGroupText id="plain-example" variant={InputGroupTextVariant.plain}>
+        %
+      </InputGroupText>
+    </InputGroup>
+  </React.Fragment>
+);

package/src/components/InputGroup/examples/InputGroupWithDropdown.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Button, InputGroup, TextInput, Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core';
+
+export const InputGroupWithDropdown: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="opt-1" value="Option 1" component="button">
+      Option 1
+    </DropdownItem>,
+    <DropdownItem key="opt-2" value="Option 2" component="button">
+      Option 2
+    </DropdownItem>,
+    <DropdownItem key="opt-3" value="Option 3" component="button">
+      Option 3
+    </DropdownItem>
+  ];
+
+  return (
+    <React.Fragment>
+      <InputGroup>
+        <Dropdown
+          onSelect={onSelect}
+          toggle={<DropdownToggle onToggle={onToggle}>Dropdown</DropdownToggle>}
+          isOpen={isOpen}
+          dropdownItems={dropdownItems}
+        />
+        <TextInput id="textInput3" aria-label="input with dropdown and button" />
+        <Button id="inputDropdownButton1" variant="control">
+          Button
+        </Button>
+      </InputGroup>
+    </React.Fragment>
+  );
+};

package/src/components/InputGroup/examples/InputGroupWithPopover.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import { Button, InputGroup, TextInput, Popover, PopoverPosition } from '@patternfly/react-core';
+
+export const InputGroupWithPopover: React.FunctionComponent = () => (
+  <React.Fragment>
+    <InputGroup>
+      <TextInput name="textInput10" id="textInput10" type="text" aria-label="input example with popover" />
+      <Popover
+        aria-label="popover example"
+        position={PopoverPosition.top}
+        bodyContent="This field is an example of an input group with a popover."
+      >
+        <Button variant="control" aria-label="popover for input">
+          <QuestionCircleIcon />
+        </Button>
+      </Popover>
+    </InputGroup>
+    <br />
+    <InputGroup>
+      <TextInput name="textInput12" id="textInput12" type="text" aria-label="input example with popover" />
+      <Popover
+        aria-label="popover example"
+        position={PopoverPosition.top}
+        bodyContent="This field is an example of an input group with a popover."
+      >
+        <Button variant="plain" aria-label="Popover for input">
+          <QuestionCircleIcon />
+        </Button>
+      </Popover>
+    </InputGroup>
+  </React.Fragment>
+);

package/src/components/InputGroup/examples/InputGroupWithSiblings.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
+import { Button, TextArea, InputGroup, InputGroupText, TextInput } from '@patternfly/react-core';
+
+export const InputGroupWithSiblings: React.FunctionComponent = () => (
+  <React.Fragment>
+    <InputGroup>
+      <Button id="textAreaButton1" variant="control">
+        Button
+      </Button>
+      <TextArea name="textarea1" id="textarea1" aria-label="textarea with buttons" />
+      <Button variant="control">Button</Button>
+    </InputGroup>
+    <br />
+    <InputGroup>
+      <Button id="textAreaButton3" variant="control">
+        Button
+      </Button>
+      <Button variant="control">Button</Button>
+      <TextArea name="textarea3" id="textarea3" aria-label="textarea with 3 buttons" />
+      <Button variant="control">Button</Button>
+    </InputGroup>
+    <br />
+    <InputGroup>
+      <InputGroupText>
+        <DollarSignIcon />
+      </InputGroupText>
+      <TextInput id="textInput5" type="number" aria-label="Dollar amount input example" />
+      <InputGroupText>.00</InputGroupText>
+    </InputGroup>
+  </React.Fragment>
+);

package/src/components/InputGroup/examples/InputGroupWithTextarea.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Button, TextArea, InputGroup } from '@patternfly/react-core';
+
+export const InputGroupWithTextarea: React.FunctionComponent = () => (
+  <React.Fragment>
+    <InputGroup>
+      <TextArea name="textarea2" id="textarea2" aria-label="textarea with button" />
+      <Button id="textAreaButton2" variant="control">
+        Button
+      </Button>
+    </InputGroup>
+  </React.Fragment>
+);

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

@@ -12,416 +12,22 @@ import { Link } from '@reach/router';
 
 ### Filled
 
-```js
-import React from 'react';
-import { Label } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-<React.Fragment>
-  <Label>Grey</Label> <Label icon={<InfoCircleIcon />}>Grey icon</Label>{' '}
-  <Label onClose={Function.prototype}>Grey removable</Label>{' '}
-  <Label icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Grey icon removable
-  </Label>{' '}
-  <Label href="#filled">Grey link</Label>{' '}
-  <Label href="#filled" onClose={Function.prototype}>
-    Grey link removable
-  </Label>
-  <Label icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Grey label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label color="blue">Blue</Label>{' '}
-  <Label color="blue" icon={<InfoCircleIcon />}>
-    Blue icon
-  </Label>{' '}
-  <Label color="blue" onClose={Function.prototype}>
-    Blue removable
-  </Label>{' '}
-  <Label color="blue" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Blue icon removable
-  </Label>{' '}
-  <Label color="blue" href="#filled">
-    Blue link
-  </Label>{' '}
-  <Label color="blue" href="#filled" onClose={Function.prototype}>
-    Blue link removable
-  </Label>
-  <Label color="blue" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Blue label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label color="green">Green</Label>{' '}
-  <Label color="green" icon={<InfoCircleIcon />}>
-    Green icon
-  </Label>{' '}
-  <Label color="green" onClose={Function.prototype}>
-    Green removable
-  </Label>{' '}
-  <Label color="green" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Green icon removable
-  </Label>{' '}
-  <Label color="green" href="#filled">
-    Green link
-  </Label>{' '}
-  <Label color="green" href="#filled" onClose={Function.prototype}>
-    Green link removable
-  </Label>
-  <Label color="green" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Green label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label color="orange">Orange</Label>{' '}
-  <Label color="orange" icon={<InfoCircleIcon />}>
-    Orange icon
-  </Label>{' '}
-  <Label color="orange" onClose={Function.prototype}>
-    Orange removable
-  </Label>{' '}
-  <Label color="orange" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Orange icon removable
-  </Label>{' '}
-  <Label color="orange" href="#filled">
-    Orange link
-  </Label>{' '}
-  <Label color="orange" href="#filled" onClose={Function.prototype}>
-    Orange link removable
-  </Label>
-  <Label color="orange" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Orange label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label color="red">Red</Label>{' '}
-  <Label color="red" icon={<InfoCircleIcon />}>
-    Red icon
-  </Label>{' '}
-  <Label color="red" onClose={Function.prototype}>
-    Red removable
-  </Label>{' '}
-  <Label color="red" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Red icon removable
-  </Label>{' '}
-  <Label color="red" href="#filled">
-    Red link
-  </Label>{' '}
-  <Label color="red" href="#filled" onClose={Function.prototype}>
-    Red link removable
-  </Label>
-  <Label color="red" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Red label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label color="purple">Purple</Label>{' '}
-  <Label color="purple" icon={<InfoCircleIcon />}>
-    Purple icon
-  </Label>{' '}
-  <Label color="purple" onClose={Function.prototype}>
-    Purple removable
-  </Label>{' '}
-  <Label color="purple" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Purple icon removable
-  </Label>{' '}
-  <Label color="purple" href="#filled">
-    Purple link
-  </Label>{' '}
-  <Label color="purple" href="#filled" onClose={Function.prototype}>
-    Purple link removable
-  </Label>
-  <Label color="purple" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Purple label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label color="cyan">Cyan</Label>{' '}
-  <Label color="cyan" icon={<InfoCircleIcon />}>
-    Cyan icon
-  </Label>{' '}
-  <Label color="cyan" onClose={Function.prototype}>
-    Cyan removable
-  </Label>{' '}
-  <Label color="cyan" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Cyan icon removable
-  </Label>{' '}
-  <Label color="cyan" href="#filled">
-    Cyan link
-  </Label>{' '}
-  <Label color="cyan" href="#filled" onClose={Function.prototype}>
-    Cyan link removable
-  </Label>
-  <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>;
+```ts file="LabelFilled.tsx"
 ```
 
 ### Outline
 
-```js
-import React from 'react';
-import { Label } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-<React.Fragment>
-  <Label variant="outline">Grey</Label>{' '}
-  <Label variant="outline" icon={<InfoCircleIcon />}>
-    Grey icon
-  </Label>{' '}
-  <Label variant="outline" onClose={Function.prototype}>
-    Grey removable
-  </Label>{' '}
-  <Label variant="outline" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Grey icon removable
-  </Label>{' '}
-  <Label variant="outline" href="#outline">
-    Grey link
-  </Label>{' '}
-  <Label variant="outline" href="#outline" onClose={Function.prototype}>
-    Grey link removable
-  </Label>
-  <Label variant="outline" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Grey label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label variant="outline" color="blue">
-    Blue
-  </Label>{' '}
-  <Label variant="outline" color="blue" icon={<InfoCircleIcon />}>
-    Blue icon
-  </Label>{' '}
-  <Label variant="outline" color="blue" onClose={Function.prototype}>
-    Blue removable
-  </Label>{' '}
-  <Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Blue icon removable
-  </Label>{' '}
-  <Label variant="outline" color="blue" href="#outline">
-    Blue link
-  </Label>{' '}
-  <Label variant="outline" color="blue" href="#outline" onClose={Function.prototype}>
-    Blue link removable
-  </Label>
-  <Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Blue label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label variant="outline" color="green">
-    Green
-  </Label>{' '}
-  <Label variant="outline" color="green" icon={<InfoCircleIcon />}>
-    Green icon
-  </Label>{' '}
-  <Label variant="outline" color="green" onClose={Function.prototype}>
-    Green removable
-  </Label>{' '}
-  <Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Green icon removable
-  </Label>{' '}
-  <Label variant="outline" color="green" href="#outline">
-    Green link
-  </Label>{' '}
-  <Label variant="outline" color="green" href="#outline" onClose={Function.prototype}>
-    Green link removable
-  </Label>
-  <Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Green label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label variant="outline" color="orange">
-    Orange
-  </Label>{' '}
-  <Label variant="outline" color="orange" icon={<InfoCircleIcon />}>
-    Orange icon
-  </Label>{' '}
-  <Label variant="outline" color="orange" onClose={Function.prototype}>
-    Orange removable
-  </Label>{' '}
-  <Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Orange icon removable
-  </Label>{' '}
-  <Label variant="outline" color="orange" href="#outline">
-    Orange link
-  </Label>{' '}
-  <Label variant="outline" color="orange" href="#outline" onClose={Function.prototype}>
-    Orange link removable
-  </Label>
-  <Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Orange label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label variant="outline" color="red">
-    Red
-  </Label>{' '}
-  <Label variant="outline" color="red" icon={<InfoCircleIcon />}>
-    Red icon
-  </Label>{' '}
-  <Label variant="outline" color="red" onClose={Function.prototype}>
-    Red removable
-  </Label>{' '}
-  <Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Red icon removable
-  </Label>{' '}
-  <Label variant="outline" color="red" href="#outline">
-    Red link
-  </Label>{' '}
-  <Label variant="outline" color="red" href="#outline" onClose={Function.prototype}>
-    Red link removable
-  </Label>
-  <Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Red label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label variant="outline" color="purple">
-    Purple
-  </Label>{' '}
-  <Label variant="outline" color="purple" icon={<InfoCircleIcon />}>
-    Purple icon
-  </Label>{' '}
-  <Label variant="outline" color="purple" onClose={Function.prototype}>
-    Purple removable
-  </Label>{' '}
-  <Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Purple icon removable
-  </Label>{' '}
-  <Label variant="outline" color="purple" href="#outline">
-    Purple link
-  </Label>{' '}
-  <Label variant="outline" color="purple" href="#outline" onClose={Function.prototype}>
-    Purple link removable
-  </Label>
-  <Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Purple label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label variant="outline" color="cyan">
-    Cyan
-  </Label>{' '}
-  <Label variant="outline" color="cyan" icon={<InfoCircleIcon />}>
-    Cyan icon
-  </Label>{' '}
-  <Label variant="outline" color="cyan" onClose={Function.prototype}>
-    Cyan removable
-  </Label>{' '}
-  <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Cyan icon removable
-  </Label>{' '}
-  <Label variant="outline" color="cyan" href="#outline">
-    Cyan link
-  </Label>{' '}
-  <Label variant="outline" color="cyan" href="#outline" onClose={Function.prototype}>
-    Cyan link removable
-  </Label>
-  <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>;
+```ts file="LabelOutline.tsx"
 ```
 
 ### Compact
 
-```js
-import React from 'react';
-import { Label } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-<React.Fragment>
-  <Label isCompact>Grey</Label>{' '}
-  <Label isCompact icon={<InfoCircleIcon />}>
-    Compact icon
-  </Label>{' '}
-  <Label isCompact onClose={Function.prototype}>
-    Compact removable
-  </Label>{' '}
-  <Label isCompact icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Compact icon removable
-  </Label>{' '}
-  <Label isCompact href="#outline">
-    Compact link
-  </Label>{' '}
-  <Label isCompact href="#outline" onClose={Function.prototype}>
-    Compact link removable
-  </Label>
-  <Label isCompact icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Compact label with icon that overflows
-  </Label>
-</React.Fragment>;
+```ts file="LabelCompact.tsx"
 ```
 
 ### Router link
 
-```js
-import React from 'react';
-import { Label } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import { Link } from '@reach/router';
-
-<Label
-  color="blue"
-  icon={<InfoCircleIcon />}
-  onClose={Function.prototype}
-  isTruncated
-  render={({ className, content, componentRef }) => (
-    <Link to="/" className={className} innerRef={componentRef}>
-      {content}
-    </Link>
-  )}
->
-  Blue label router link with icon that overflows
-</Label>;
+```ts file="LabelRouterLink.tsx"
 ```
 
 ### Editable
@@ -430,5 +36,5 @@ Click or press either enter or space to begin editing a label. After editing, cl
 
 You can also customize any Label's close button aria-label as this example shows with `closeBtnAriaLabel`.
 
-```js file="LabelEditable.tsx" isBeta 
+```ts file="LabelEditable.tsx" isBeta
 ```

package/src/components/Label/examples/LabelCompact.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Label } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelCompact: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Label isCompact>Grey</Label>{' '}
+    <Label isCompact icon={<InfoCircleIcon />}>
+      Compact icon
+    </Label>{' '}
+    <Label isCompact onClose={() => Function.prototype}>
+      Compact removable
+    </Label>{' '}
+    <Label isCompact icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Compact icon removable
+    </Label>{' '}
+    <Label isCompact href="#outline">
+      Compact link
+    </Label>{' '}
+    <Label isCompact href="#outline" onClose={() => Function.prototype}>
+      Compact link removable
+    </Label>
+    <Label isCompact icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Compact label with icon that overflows
+    </Label>
+  </React.Fragment>
+);