@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.11

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

@@ -1,417 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Button aria-disabled is set to true and tabIndex to -1 if component is not a button and is disabled 1`] = `
-<DocumentFragment>
-  <a
-    aria-disabled="true"
-    class="pf-v5-c-button pf-m-primary pf-m-disabled"
-    data-ouia-component-id="OUIA-Generated-Button-primary-12"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    tabindex="-1"
-  >
-    Disabled Anchor Button
-  </a>
-</DocumentFragment>
-`;
-
-exports[`Button control button 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="control"
-    class="pf-v5-c-button pf-m-control"
-    data-ouia-component-id="OUIA-Generated-Button-control-1"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    control Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button danger button 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="danger"
-    class="pf-v5-c-button pf-m-danger"
-    data-ouia-component-id="OUIA-Generated-Button-danger-1"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    danger Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button isAriaDisabled button 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="true"
-    class="pf-v5-c-button pf-m-primary pf-m-aria-disabled"
-    data-ouia-component-id="OUIA-Generated-Button-primary-5"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    Disabled yet focusable button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button isAriaDisabled link button 1`] = `
-<DocumentFragment>
-  <a
-    aria-disabled="true"
-    class="pf-v5-c-button pf-m-primary pf-m-aria-disabled"
-    data-ouia-component-id="OUIA-Generated-Button-primary-6"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-  >
-    Disabled yet focusable button
-  </a>
-</DocumentFragment>
-`;
-
-exports[`Button isBlock 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    class="pf-v5-c-button pf-m-primary pf-m-block"
-    data-ouia-component-id="OUIA-Generated-Button-primary-3"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    Block Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button isDanger link 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    class="pf-v5-c-button pf-m-link pf-m-danger"
-    data-ouia-component-id="OUIA-Generated-Button-link-3"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    Disabled Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button isDanger secondary 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    class="pf-v5-c-button pf-m-secondary pf-m-danger"
-    data-ouia-component-id="OUIA-Generated-Button-secondary-2"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    Disabled Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button isDisabled 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="true"
-    class="pf-v5-c-button pf-m-primary pf-m-disabled"
-    data-ouia-component-id="OUIA-Generated-Button-primary-4"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    disabled=""
-    type="button"
-  >
-    Disabled Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button isInline 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    class="pf-v5-c-button pf-m-link pf-m-inline"
-    data-ouia-component-id="OUIA-Generated-Button-link-4"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    Hovered Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button isLoading 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    class="pf-v5-c-button pf-m-primary pf-m-progress pf-m-in-progress"
-    data-ouia-component-id="OUIA-Generated-Button-primary-9"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    <span
-      class="pf-v5-c-button__progress"
-    >
-      <svg
-        aria-label="Contents"
-        aria-valuetext="Loading"
-        class="pf-v5-c-spinner pf-m-md"
-        role="progressbar"
-        viewBox="0 0 100 100"
-      >
-        <circle
-          class="pf-v5-c-spinner__path"
-          cx="50"
-          cy="50"
-          fill="none"
-          r="45"
-        />
-      </svg>
-    </span>
-    Loading Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button isLoading icon only 1`] = `
+exports[`Renders basic button 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="false"
-    aria-label="Upload"
-    class="pf-v5-c-button pf-m-plain pf-m-in-progress"
-    data-ouia-component-id="OUIA-Generated-Button-plain-2"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    <span
-      class="pf-v5-c-button__progress"
-    >
-      <svg
-        aria-label="Contents"
-        aria-valuetext="Loading"
-        class="pf-v5-c-spinner pf-m-md"
-        role="progressbar"
-        viewBox="0 0 100 100"
-      >
-        <circle
-          class="pf-v5-c-spinner__path"
-          cx="50"
-          cy="50"
-          fill="none"
-          r="45"
-        />
-      </svg>
-    </span>
-    <div>
-      ICON
-    </div>
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button isLoading inline link 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="Loading"
-    class="pf-v5-c-button pf-m-link pf-m-inline pf-m-progress pf-m-in-progress"
-    data-ouia-component-id="OUIA-Generated-Button-link-5"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    <span
-      class="pf-v5-c-button__progress"
-    >
-      <svg
-        aria-label="Contents"
-        aria-valuetext="Loading"
-        class="pf-v5-c-spinner pf-m-inline"
-        role="progressbar"
-        viewBox="0 0 100 100"
-      >
-        <circle
-          class="pf-v5-c-spinner__path"
-          cx="50"
-          cy="50"
-          fill="none"
-          r="45"
-        />
-      </svg>
-    </span>
-    Loading Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button link button 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="link"
-    class="pf-v5-c-button pf-m-link"
-    data-ouia-component-id="OUIA-Generated-Button-link-1"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    link Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button link with icon 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    class="pf-v5-c-button pf-m-link"
-    data-ouia-component-id="OUIA-Generated-Button-link-2"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    <span
-      class="pf-v5-c-button__icon pf-m-start"
-    >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 576 512"
-        width="1em"
-      >
-        <path
-          d="M504.717 320H211.572l6.545 32h268.418c15.401 0 26.816 14.301 23.403 29.319l-5.517 24.276C523.112 414.668 536 433.828 536 456c0 31.202-25.519 56.444-56.824 55.994-29.823-.429-54.35-24.631-55.155-54.447-.44-16.287 6.085-31.049 16.803-41.548H231.176C241.553 426.165 248 440.326 248 456c0 31.813-26.528 57.431-58.67 55.938-28.54-1.325-51.751-24.385-53.251-52.917-1.158-22.034 10.436-41.455 28.051-51.586L93.883 64H24C10.745 64 0 53.255 0 40V24C0 10.745 10.745 0 24 0h102.529c11.401 0 21.228 8.021 23.513 19.19L159.208 64H551.99c15.401 0 26.816 14.301 23.403 29.319l-47.273 208C525.637 312.246 515.923 320 504.717 320zM403.029 192H360v-60c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v60h-43.029c-10.691 0-16.045 12.926-8.485 20.485l67.029 67.029c4.686 4.686 12.284 4.686 16.971 0l67.029-67.029c7.559-7.559 2.205-20.485-8.486-20.485z"
-        />
-      </svg>
-    </span>
-    Block Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button plain button 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="plain"
-    class="pf-v5-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-1"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    plain Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button primary button 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="primary"
+    aria-label="basic button"
     class="pf-v5-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-1"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    primary Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button secondary button 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="secondary"
-    class="pf-v5-c-button pf-m-secondary"
-    data-ouia-component-id="OUIA-Generated-Button-secondary-1"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    secondary Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button size large 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    class="pf-v5-c-button pf-m-primary pf-m-display-lg"
-    data-ouia-component-id="OUIA-Generated-Button-primary-8"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    Large Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button size small 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    class="pf-v5-c-button pf-m-primary pf-m-small"
-    data-ouia-component-id="OUIA-Generated-Button-primary-7"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    Small Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button tertiary button 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="tertiary"
-    class="pf-v5-c-button pf-m-tertiary"
-    data-ouia-component-id="OUIA-Generated-Button-tertiary-1"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    tertiary Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button warning button 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="warning"
-    class="pf-v5-c-button pf-m-warning"
-    data-ouia-component-id="OUIA-Generated-Button-warning-1"
+    data-ouia-component-id="OUIA-Generated-Button-primary-27"
     data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
-    warning Button
+    Basic Button
   </button>
 </DocumentFragment>
 `;

package/src/components/Button/examples/Button.md

@@ -12,6 +12,8 @@ import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/ex
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import { Link } from '@reach/router';
 
 ## Examples
@@ -32,7 +34,8 @@ PatternFly supports several button styling variants to be used in different scen
 | Warning | Warning buttons may be used for actions that change an important setting or behavior, but not in a destructive or irreversible way. |
 | Link | Links are labeled, but have no background or border. Use for actions that require less emphasis, actions that navigate users to another page within the same window, and/or actions that navigate to external pages in a new window. Links may be placed inline with text using the `isInline` property.|
 | Plain | Plain buttons have no styling and are intended to be labeled with icons. |
-| Control | Control buttons can be labeled with text or icons. Primarily intended to be paired with other controls in an [input group](https://www.patternfly.org/v4/components/input-group). | 
+| Control | Control buttons can be labeled with text or icons. Primarily intended to be paired with other controls in an [input group](/components/input-group). |
+| Stateful | Stateful buttons are ideal for displaying the state of notifications. They have 3 states: `read`, `unread` and `attention`.
 
 ### Disabled buttons
 
@@ -107,3 +110,17 @@ Buttons can display a `count` in the form of a badge to indicate some value or n
 
 ```ts file="./ButtonWithCount.tsx" isBeta
 ```
+
+### Plain with no padding
+
+To display a plain/icon button inline with text, use `noPadding` prop in addition to `variant="plain"`.
+
+```ts file="./ButtonPlainHasNoPadding.tsx"
+```
+
+### Stateful
+
+Stateful buttons are ideal for displaying the state of notifications. Use `variant="stateful"` alongside with the `state` property, which can have these 3 values: `read`, `unread` (used as default) and `attention` (which means unread and requires attention).
+
+```ts file="./ButtonStateful.tsx"
+```

package/src/components/Button/examples/ButtonAriaDisabled.tsx

@@ -1,52 +1,28 @@
 import React from 'react';
-import { Button, Tooltip } from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import { Button, Flex, Tooltip } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const ButtonAriaDisabled: React.FunctionComponent = () => (
-  <React.Fragment>
-    <Button isAriaDisabled>Primary aria disabled</Button>
-    <Button isAriaDisabled>Secondary aria disabled</Button>{' '}
-    <Button variant="secondary" isDanger isAriaDisabled>
-      Danger secondary aria disabled
-    </Button>{' '}
-    <Button isAriaDisabled variant="tertiary">
-      Tertiary aria disabled
-    </Button>{' '}
-    <Button isAriaDisabled variant="danger">
-      Danger disabled
-    </Button>{' '}
-    <Button isAriaDisabled variant="warning">
-      Warning disabled
-    </Button>
-    <br />
-    <br />
-    <Button isAriaDisabled variant="link" icon={<PlusCircleIcon />}>
-      Link aria disabled
-    </Button>{' '}
-    <Button isAriaDisabled variant="link" isInline>
-      Inline link aria disabled
-    </Button>{' '}
-    <Button variant="link" isDanger isAriaDisabled>
-      Danger link disabled
-    </Button>{' '}
-    <Button isAriaDisabled variant="plain" aria-label="Action">
-      <TimesIcon />
-    </Button>{' '}
-    <Button isAriaDisabled variant="control">
-      Control aria disabled
-    </Button>
-    <br />
-    <br />
-    <Tooltip content="Aria-disabled buttons are like disabled buttons, but focusable. Allows for tooltip support.">
-      <Button isAriaDisabled variant="secondary">
-        Secondary button to core docs
+  <>
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <Button isAriaDisabled>Primary aria disabled</Button>
+      <Button isAriaDisabled variant="link" icon={<PlusCircleIcon />}>
+        Link aria disabled
       </Button>
-    </Tooltip>{' '}
-    <Tooltip content="Aria-disabled link as button with tooltip">
-      <Button component="a" isAriaDisabled href="https://pf4.patternfly.org/" target="_blank" variant="tertiary">
-        Tertiary link as button to core docs
+      <Button isAriaDisabled variant="link" isInline>
+        Inline link aria disabled
       </Button>
-    </Tooltip>
-  </React.Fragment>
+    </Flex>
+    <br />
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <Tooltip content="Aria-disabled buttons are like disabled buttons, but focusable. Allows for tooltip support.">
+        <Button isAriaDisabled>Primary button with tooltip</Button>
+      </Tooltip>
+      <Tooltip content="Aria-disabled link as button with tooltip">
+        <Button component="a" isAriaDisabled href="https://www.patternfly.org/" target="_blank" variant="secondary">
+          Secondary link as button to PatternFly home
+        </Button>
+      </Tooltip>
+    </Flex>
+  </>
 );

package/src/components/Button/examples/ButtonCallToAction.tsx

@@ -1,22 +1,20 @@
 import React from 'react';
-import { Button } from '@patternfly/react-core';
+import { Button, Flex } from '@patternfly/react-core';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 
 export const ButtonCallToAction: React.FunctionComponent = () => (
-  <React.Fragment>
+  <Flex columnGap={{ default: 'columnGapSm' }}>
     <Button variant="primary" size="lg">
       Call to action
-    </Button>{' '}
+    </Button>
     <Button variant="secondary" size="lg">
       Call to action
-    </Button>{' '}
+    </Button>
     <Button variant="tertiary" size="lg">
       Call to action
-    </Button>{' '}
-    <Button variant="link" size="lg">
-      Call to action <ArrowRightIcon />
     </Button>
-    <br />
-    <br />
-  </React.Fragment>
+    <Button variant="link" size="lg" icon={<ArrowRightIcon />} iconPosition="end">
+      Call to action
+    </Button>
+  </Flex>
 );

package/src/components/Button/examples/ButtonDisabled.tsx

@@ -1,39 +1,52 @@
 import React from 'react';
-import { Button } from '@patternfly/react-core';
+import { Button, Flex } from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 
 export const ButtonDisabled: React.FunctionComponent = () => (
-  <React.Fragment>
-    <Button isDisabled>Primary disabled</Button> <Button isDisabled>Secondary disabled</Button>{' '}
-    <Button variant="secondary" isDanger isDisabled>
-      Danger secondary disabled
-    </Button>{' '}
-    <Button isDisabled variant="tertiary">
-      Tertiary disabled
-    </Button>{' '}
-    <Button isDisabled variant="danger">
-      Danger disabled
-    </Button>{' '}
-    <Button isDisabled variant="warning">
-      Warning disabled
-    </Button>
+  <>
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <Button isDisabled>Primary</Button>
+      <Button variant="secondary" isDisabled>
+        Secondary
+      </Button>
+      <Button variant="secondary" isDanger isDisabled>
+        Danger secondary
+      </Button>
+      <Button isDisabled variant="tertiary">
+        Tertiary
+      </Button>
+      <Button isDisabled variant="danger">
+        Danger
+      </Button>
+      <Button isDisabled variant="warning">
+        Warning
+      </Button>
+    </Flex>
     <br />
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <Button isDisabled variant="link" icon={<PlusCircleIcon />}>
+        Link
+      </Button>
+      <Button isDisabled variant="link" isInline>
+        Inline link
+      </Button>
+      <Button variant="link" isDanger isDisabled>
+        Danger link
+      </Button>
+      <Button isDisabled variant="plain" aria-label="Action">
+        <TimesIcon />
+      </Button>
+    </Flex>
     <br />
-    <Button isDisabled variant="link" icon={<PlusCircleIcon />}>
-      Link disabled
-    </Button>{' '}
-    <Button isDisabled variant="link" isInline>
-      Inline link disabled
-    </Button>{' '}
-    <Button variant="link" isDanger isDisabled>
-      Danger link disabled
-    </Button>{' '}
-    <Button isDisabled variant="plain" aria-label="Action">
-      <TimesIcon />
-    </Button>{' '}
-    <Button isDisabled variant="control">
-      Control disabled
-    </Button>
-  </React.Fragment>
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <Button isDisabled variant="control">
+        Control
+      </Button>
+      <Button isDisabled variant="control" aria-label="Copy">
+        <CopyIcon />
+      </Button>
+    </Flex>
+  </>
 );

package/src/components/Button/examples/ButtonLinks.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
-import { Button } from '@patternfly/react-core';
+import { Button, Flex } from '@patternfly/react-core';
 
 export const ButtonLinks: React.FunctionComponent = () => (
-  <React.Fragment>
-    <Button component="a" href="https://pf4.patternfly.org/" target="_blank" variant="primary">
-      Link to core docs
-    </Button>{' '}
-    <Button component="a" href="https://pf4.patternfly.org/" target="_blank" variant="secondary">
-      Secondary link to core docs
-    </Button>{' '}
-    <Button isDisabled component="a" href="https://pf4.patternfly.org/" target="_blank" variant="tertiary">
-      Tertiary link to core docs
-    </Button>{' '}
-    <Button component="a" href="https://pf4.patternfly.org/contribution/#modifiers" variant="link">
-      Jump to modifiers in contribution guidelines
+  <Flex>
+    <Button component="a" href="https://www.patternfly.org/" target="_blank" variant="primary">
+      Link to PatternFly home
     </Button>
-  </React.Fragment>
+    <Button component="a" href="https://www.patternfly.org/" target="_blank" variant="secondary">
+      Secondary link to PatternFly home
+    </Button>
+    <Button isDisabled component="a" href="https://www.patternfly.org/" target="_blank" variant="tertiary">
+      Tertiary link to PatternFly home
+    </Button>
+    <Button component="a" href="https://www.patternfly.org/" variant="link">
+      Jump to PatternFly home
+    </Button>
+  </Flex>
 );