diff --git a/packages/react-core/src/components/Button/examples/Button.md b/packages/react-core/src/components/Button/examples/Button.md index d24aa6a4135..90b14770407 100644 --- a/packages/react-core/src/components/Button/examples/Button.md +++ b/packages/react-core/src/components/Button/examples/Button.md @@ -96,21 +96,9 @@ Router links can be used for in-app linking in React environments to prevent pag Buttons that are aria-disabled are similar to normal disabled buttons, except they can receive focus. Every button variant can be aria-disabled using the `isAriaDisabled` property. -```ts file="./ButtonAriaDisabled.tsx" -``` - -### Aria-disabled with tooltip - -Unlike normal disabled buttons, aria-disabled buttons can support tooltips. - -```ts file="./ButtonAriaDisabledTooltip.tsx" -``` - -### Aria-disabled link as button with tooltip - -Aria-disabled buttons can operate as links, which also support tooltips. +Unlike normal disabled buttons, aria-disabled buttons can support tooltips. Furthermore, aria-disabled buttons can operate as links, which also support tooltips. -```ts file="./ButtonAriaDisabledLinkTooltip.tsx" +```ts file="./ButtonAriaDisabled.tsx" ``` ### Button with count @@ -118,4 +106,4 @@ Aria-disabled buttons can operate as links, which also support tooltips. Buttons can display a `count` in the form of a badge to indicate some value or number by passing in the `countOptions` prop as a `BadgeCountObject` object. The `BadgeCountObject` object will handle `count`, `isRead`, and `className` props for the badge count. ```ts file="./ButtonWithCount.tsx" isBeta -``` \ No newline at end of file +``` diff --git a/packages/react-core/src/components/Button/examples/ButtonAriaDisabled.tsx b/packages/react-core/src/components/Button/examples/ButtonAriaDisabled.tsx index 1bea26b7b56..4a12af3ec9a 100644 --- a/packages/react-core/src/components/Button/examples/ButtonAriaDisabled.tsx +++ b/packages/react-core/src/components/Button/examples/ButtonAriaDisabled.tsx @@ -1,11 +1,12 @@ import React from 'react'; -import { Button } from '@patternfly/react-core'; +import { Button, Tooltip } 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'; export const ButtonAriaDisabled: React.FunctionComponent = () => ( - {' '} + + {' '} {' '} @@ -35,5 +36,17 @@ export const ButtonAriaDisabled: React.FunctionComponent = () => ( +
+
+ + + {' '} + + +
); diff --git a/packages/react-core/src/components/Button/examples/ButtonAriaDisabledLinkTooltip.tsx b/packages/react-core/src/components/Button/examples/ButtonAriaDisabledLinkTooltip.tsx deleted file mode 100644 index 68acdfe15ec..00000000000 --- a/packages/react-core/src/components/Button/examples/ButtonAriaDisabledLinkTooltip.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import { Button, Tooltip } from '@patternfly/react-core'; - -export const ButtonAriaDisabledLinkTooltip: React.FunctionComponent = () => ( - - - -); diff --git a/packages/react-core/src/components/Button/examples/ButtonAriaDisabledTooltip.tsx b/packages/react-core/src/components/Button/examples/ButtonAriaDisabledTooltip.tsx deleted file mode 100644 index 24c35bb1965..00000000000 --- a/packages/react-core/src/components/Button/examples/ButtonAriaDisabledTooltip.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import { Button, Tooltip } from '@patternfly/react-core'; - -export const ButtonAriaDisabledTooltip: React.FunctionComponent = () => ( - - - -);