From 4c3dd2812bff289398577563a6b577cac985da60 Mon Sep 17 00:00:00 2001
From: adamviktora <viktora.adam@gmail.com>
Date: Thu, 4 Jan 2024 16:32:42 +0100
Subject: [PATCH 1/4] feat(Button): consume Penta tokens and update examples

---
 .../src/components/Button/Button.tsx          |  30 ++--
 .../Button/__tests__/Button.test.tsx          |  25 ++-
 .../__snapshots__/Button.test.tsx.snap        |   2 +-
 .../src/components/Button/examples/Button.md  |  17 +++
 .../Button/examples/ButtonAriaDisabled.tsx    |  66 +++-----
 .../Button/examples/ButtonCallToAction.tsx    |  18 +--
 .../Button/examples/ButtonDisabled.tsx        |  71 +++++----
 .../Button/examples/ButtonLinks.tsx           |  28 ++--
 .../Button/examples/ButtonPlainNoPadding.tsx  |  13 ++
 .../Button/examples/ButtonProgress.tsx        |  39 ++---
 .../Button/examples/ButtonSmall.tsx           |  16 +-
 .../Button/examples/ButtonStateful.tsx        |  34 +++++
 .../Button/examples/ButtonTypes.tsx           |  10 +-
 .../Button/examples/ButtonVariations.tsx      | 101 +++++++------
 .../Button/examples/ButtonWithCount.tsx       | 143 +++++++++---------
 15 files changed, 359 insertions(+), 254 deletions(-)
 create mode 100644 packages/react-core/src/components/Button/examples/ButtonPlainNoPadding.tsx
 create mode 100644 packages/react-core/src/components/Button/examples/ButtonStateful.tsx

diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx
index d9b2ff8f8a5..13d2004b88f 100644
--- a/packages/react-core/src/components/Button/Button.tsx
+++ b/packages/react-core/src/components/Button/Button.tsx
@@ -13,7 +13,8 @@ export enum ButtonVariant {
   warning = 'warning',
   link = 'link',
   plain = 'plain',
-  control = 'control'
+  control = 'control',
+  stateful = 'stateful'
 }
 
 export enum ButtonType {
@@ -28,6 +29,12 @@ export enum ButtonSize {
   lg = 'lg'
 }
 
+export enum ButtonState {
+  read = 'read',
+  unread = 'unread',
+  attention = 'attention'
+}
+
 export interface BadgeCountObject {
   /**  Adds styling to the badge to indicate it has been read */
   isRead?: boolean;
@@ -44,8 +51,8 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   className?: string;
   /** Sets the base component to render. defaults to button */
   component?: React.ElementType<any> | React.ComponentType<any>;
-  /** Adds active styling to button. */
-  isActive?: boolean;
+  /** Adds clicked styling to button. */
+  isClicked?: boolean;
   /** Adds block styling to button */
   isBlock?: boolean;
   /** Adds disabled styling and disables the button using the disabled html attribute */
@@ -69,7 +76,11 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   /** Sets button type */
   type?: 'button' | 'submit' | 'reset';
   /** Adds button variant styles */
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control';
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control' | 'stateful';
+  /** Sets state of the stateful button variant. Default is "unread" */
+  state?: 'read' | 'unread' | 'attention';
+  /** Applies no padding on a plain button variant. Use when plain button is placed inline with text */
+  noPadding?: boolean;
   /** Sets position of the icon. Note: "left" and "right" are deprecated. Use "start" and "end" instead */
   iconPosition?: 'start' | 'end' | 'left' | 'right';
   /** Adds accessible text to the button. */
@@ -94,9 +105,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   children = null,
   className = '',
   component = 'button',
-  // TODO: Update  eslint ignore when issue #9907 is resolved
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  isActive = false,
+  isClicked = false,
   isBlock = false,
   isDisabled = false,
   isAriaDisabled = false,
@@ -110,6 +119,8 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   isInline = false,
   type = ButtonType.button,
   variant = ButtonVariant.primary,
+  state = ButtonState.unread,
+  noPadding = false,
   iconPosition = 'start',
   'aria-label': ariaLabel = null,
   icon = null,
@@ -157,12 +168,13 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         isBlock && styles.modifiers.block,
         isDisabled && styles.modifiers.disabled,
         isAriaDisabled && styles.modifiers.ariaDisabled,
-        // TODO: Update when issue #9907 is resolved
-        // isActive && styles.modifiers.active,
+        isClicked && styles.modifiers.clicked,
         isInline && variant === ButtonVariant.link && styles.modifiers.inline,
         isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && styles.modifiers.danger,
         isLoading !== null && variant !== ButtonVariant.plain && styles.modifiers.progress,
         isLoading && styles.modifiers.inProgress,
+        noPadding && variant === ButtonVariant.plain && styles.modifiers.noPadding,
+        variant === ButtonVariant.stateful && styles.modifiers[state],
         size === ButtonSize.sm && styles.modifiers.small,
         size === ButtonSize.lg && styles.modifiers.displayLg,
         className
diff --git a/packages/react-core/src/components/Button/__tests__/Button.test.tsx b/packages/react-core/src/components/Button/__tests__/Button.test.tsx
index 738821facff..ca895903c40 100644
--- a/packages/react-core/src/components/Button/__tests__/Button.test.tsx
+++ b/packages/react-core/src/components/Button/__tests__/Button.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 
-import { Button, ButtonVariant } from '../Button';
+import { Button, ButtonState, ButtonVariant } from '../Button';
 
 Object.values(ButtonVariant).forEach((variant) => {
   if (variant !== 'primary') {
@@ -55,10 +55,9 @@ test('Renders with class pf-m-block when isBlock = true', () => {
   expect(screen.getByRole('button')).toHaveClass('pf-m-block');
 });
 
-// TODO:  Reenable or remove with issue #9907
-xtest('Renders with class pf-m-active when isActive = true', () => {
-  render(<Button isActive>Active Button</Button>);
-  expect(screen.getByRole('button')).toHaveClass('pf-m-active');
+xtest('Renders with class pf-m-clicked when isClicked = true', () => {
+  render(<Button isClicked>Clicked Button</Button>);
+  expect(screen.getByRole('button')).toHaveClass('pf-m-clicked');
 });
 
 test('Renders with class pf-m-disabled when isDisabled = true', () => {
@@ -80,6 +79,22 @@ test('Does not disable button when isDisabled = true and component = a', () => {
   expect(screen.getByText('Disabled yet focusable button')).not.toHaveProperty('disabled');
 });
 
+test('Renders with class pf-m-unread by default when variant = stateful', () => {
+  render(<Button variant="stateful">Stateful Button</Button>);
+  expect(screen.getByRole('button')).toHaveClass('pf-m-stateful', 'pf-m-unread');
+});
+
+Object.values(ButtonState).forEach((state) => {
+  test(`Renders with class pf-m-${state} when state = ${state} and variant = stateful`, () => {
+    render(
+      <Button variant="stateful" state={state}>
+        Stateful Button - {state}
+      </Button>
+    );
+    expect(screen.getByRole('button')).toHaveClass('pf-m-stateful', `pf-m-${state}`);
+  });
+});
+
 test('Renders with class pf-m-danger when isDanger = true and variant = secondary', () => {
   render(
     <Button variant="secondary" isDanger>
diff --git a/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
index f5f4828c50f..b0cb22e0620 100644
--- a/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Renders basic button 1`] = `
     aria-disabled="false"
     aria-label="basic button"
     class="pf-v5-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-26"
+    data-ouia-component-id="OUIA-Generated-Button-primary-27"
     data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
diff --git a/packages/react-core/src/components/Button/examples/Button.md b/packages/react-core/src/components/Button/examples/Button.md
index dc280242e1a..eafbbd4785c 100644
--- a/packages/react-core/src/components/Button/examples/Button.md
+++ b/packages/react-core/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
@@ -33,6 +35,7 @@ PatternFly supports several button styling variants to be used in different scen
 | 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](/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="./ButtonPlainNoPadding.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"
+```
diff --git a/packages/react-core/src/components/Button/examples/ButtonAriaDisabled.tsx b/packages/react-core/src/components/Button/examples/ButtonAriaDisabled.tsx
index 4a12af3ec9a..0becd377cff 100644
--- a/packages/react-core/src/components/Button/examples/ButtonAriaDisabled.tsx
+++ b/packages/react-core/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>
+  </>
 );
diff --git a/packages/react-core/src/components/Button/examples/ButtonCallToAction.tsx b/packages/react-core/src/components/Button/examples/ButtonCallToAction.tsx
index 8413ca91fd4..3c3887a478e 100644
--- a/packages/react-core/src/components/Button/examples/ButtonCallToAction.tsx
+++ b/packages/react-core/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>
 );
diff --git a/packages/react-core/src/components/Button/examples/ButtonDisabled.tsx b/packages/react-core/src/components/Button/examples/ButtonDisabled.tsx
index 3deb37bff32..70d13a24514 100644
--- a/packages/react-core/src/components/Button/examples/ButtonDisabled.tsx
+++ b/packages/react-core/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>
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <Button isDisabled variant="control">
+        Control
+      </Button>
+      <Button isDisabled variant="control" aria-label="Copy">
+        <CopyIcon />
+      </Button>
+    </Flex>
   </React.Fragment>
 );
diff --git a/packages/react-core/src/components/Button/examples/ButtonLinks.tsx b/packages/react-core/src/components/Button/examples/ButtonLinks.tsx
index 232be49f72a..5a6ec5a1ead 100644
--- a/packages/react-core/src/components/Button/examples/ButtonLinks.tsx
+++ b/packages/react-core/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>
 );
diff --git a/packages/react-core/src/components/Button/examples/ButtonPlainNoPadding.tsx b/packages/react-core/src/components/Button/examples/ButtonPlainNoPadding.tsx
new file mode 100644
index 00000000000..1cf0d045bc0
--- /dev/null
+++ b/packages/react-core/src/components/Button/examples/ButtonPlainNoPadding.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+
+export const ButtonStateful: React.FunctionComponent = () => (
+  <p>
+    This is an example of a button
+    <Button variant="plain" noPadding>
+      <QuestionCircleIcon />
+    </Button>
+    which is placed inline with text
+  </p>
+);
diff --git a/packages/react-core/src/components/Button/examples/ButtonProgress.tsx b/packages/react-core/src/components/Button/examples/ButtonProgress.tsx
index 61642eb7e0d..39fb0ca3f47 100644
--- a/packages/react-core/src/components/Button/examples/ButtonProgress.tsx
+++ b/packages/react-core/src/components/Button/examples/ButtonProgress.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '@patternfly/react-core';
+import { Button, Flex } from '@patternfly/react-core';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 interface LoadingPropsType {
@@ -36,19 +36,24 @@ export const ButtonProgress: React.FunctionComponent = () => {
   uploadingProps.isLoading = isUploading;
 
   return (
-    <React.Fragment>
-      <Button
-        variant="primary"
-        id="primary-loading-button"
-        onClick={() => setIsPrimaryLoading(!isPrimaryLoading)}
-        {...primaryLoadingProps}
-      >
-        {isPrimaryLoading ? 'Click to stop loading' : 'Click to start loading'}
-      </Button>{' '}
-      <Button variant="secondary" onClick={() => setIsSecondaryLoading(!isSecondaryLoading)} {...secondaryLoadingProps}>
-        {isSecondaryLoading ? 'Click to stop loading' : 'Click to start loading'}
-      </Button>{' '}
-      <br />
+    <>
+      <Flex columnGap={{ default: 'columnGapSm' }}>
+        <Button
+          variant="primary"
+          id="primary-loading-button"
+          onClick={() => setIsPrimaryLoading(!isPrimaryLoading)}
+          {...primaryLoadingProps}
+        >
+          {isPrimaryLoading ? 'Click to stop loading' : 'Click to start loading'}
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() => setIsSecondaryLoading(!isSecondaryLoading)}
+          {...secondaryLoadingProps}
+        >
+          {isSecondaryLoading ? 'Click to stop loading' : 'Click to start loading'}
+        </Button>
+      </Flex>
       <br />
       <Button
         variant="plain"
@@ -56,12 +61,12 @@ export const ButtonProgress: React.FunctionComponent = () => {
         onClick={() => setIsUploading(!isUploading)}
         icon={<UploadIcon />}
         {...uploadingProps}
-      />{' '}
+      />
       <br />
       <br />
       <Button variant="link" isInline onClick={() => setIsInlineLoading(!isInlineLoading)} {...inlineLoadingProps}>
         {isInlineLoading ? 'Pause loading logs' : 'Resume loading logs'}
-      </Button>{' '}
-    </React.Fragment>
+      </Button>
+    </>
   );
 };
diff --git a/packages/react-core/src/components/Button/examples/ButtonSmall.tsx b/packages/react-core/src/components/Button/examples/ButtonSmall.tsx
index b4a1d30c048..2fea0b9be89 100644
--- a/packages/react-core/src/components/Button/examples/ButtonSmall.tsx
+++ b/packages/react-core/src/components/Button/examples/ButtonSmall.tsx
@@ -1,24 +1,22 @@
 import React from 'react';
-import { Button } from '@patternfly/react-core';
+import { Button, Flex } from '@patternfly/react-core';
 
 export const ButtonSmall: React.FunctionComponent = () => (
-  <React.Fragment>
+  <Flex columnGap={{ default: 'columnGapSm' }}>
     <Button variant="primary" size="sm">
       Primary
-    </Button>{' '}
+    </Button>
     <Button variant="secondary" size="sm">
       Secondary
-    </Button>{' '}
+    </Button>
     <Button variant="tertiary" size="sm">
       Tertiary
-    </Button>{' '}
+    </Button>
     <Button variant="danger" size="sm">
       Danger
-    </Button>{' '}
+    </Button>
     <Button variant="warning" size="sm">
       Warning
     </Button>
-    <br />
-    <br />
-  </React.Fragment>
+  </Flex>
 );
diff --git a/packages/react-core/src/components/Button/examples/ButtonStateful.tsx b/packages/react-core/src/components/Button/examples/ButtonStateful.tsx
new file mode 100644
index 00000000000..a702457c409
--- /dev/null
+++ b/packages/react-core/src/components/Button/examples/ButtonStateful.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Button, Flex } from '@patternfly/react-core';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
+export const ButtonStateful: React.FunctionComponent = () => (
+  <>
+    <Flex>
+      <div>
+        <div>
+          <strong>Read</strong>
+        </div>
+        <Button variant="stateful" state="read" icon={<BellIcon />}>
+          10 <span className="pf-v5-screen-reader">items</span>
+        </Button>
+      </div>
+      <div>
+        <div>
+          <strong>Unread</strong>
+        </div>
+        <Button variant="stateful" state="unread" icon={<BellIcon />}>
+          10 <span className="pf-v5-screen-reader">unread items</span>
+        </Button>
+      </div>
+      <div>
+        <div>
+          <strong>Attention</strong>
+        </div>
+        <Button variant="stateful" state="attention" icon={<BellIcon />}>
+          10 <span className="pf-v5-screen-reader">unread items, needs attention</span>
+        </Button>
+      </div>
+    </Flex>
+  </>
+);
diff --git a/packages/react-core/src/components/Button/examples/ButtonTypes.tsx b/packages/react-core/src/components/Button/examples/ButtonTypes.tsx
index 7fd63e119b1..fb2fd288835 100644
--- a/packages/react-core/src/components/Button/examples/ButtonTypes.tsx
+++ b/packages/react-core/src/components/Button/examples/ButtonTypes.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
-import { Button } from '@patternfly/react-core';
+import { Button, Flex } from '@patternfly/react-core';
 
 export const ButtonTypes: React.FunctionComponent = () => (
-  <React.Fragment>
-    <Button type="submit">Submit</Button> <Button type="reset">Reset</Button> <Button>Default</Button>
-  </React.Fragment>
+  <Flex columnGap={{ default: 'columnGapSm' }}>
+    <Button type="submit">Submit</Button>
+    <Button type="reset">Reset</Button>
+    <Button>Default</Button>
+  </Flex>
 );
diff --git a/packages/react-core/src/components/Button/examples/ButtonVariations.tsx b/packages/react-core/src/components/Button/examples/ButtonVariations.tsx
index e808916fd07..dd679cfd43a 100644
--- a/packages/react-core/src/components/Button/examples/ButtonVariations.tsx
+++ b/packages/react-core/src/components/Button/examples/ButtonVariations.tsx
@@ -1,54 +1,69 @@
 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 ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 export const ButtonVariations: React.FunctionComponent = () => (
-  <React.Fragment>
-    <Button variant="primary" ouiaId="Primary">
-      Primary
-    </Button>{' '}
-    <Button variant="secondary" ouiaId="Secondary">
-      Secondary
-    </Button>{' '}
-    <Button variant="secondary" ouiaId="DangerSecondary" isDanger>
-      Danger Secondary
-    </Button>{' '}
-    <Button variant="tertiary" ouiaId="Tertiary">
-      Tertiary
-    </Button>{' '}
-    <Button variant="danger" ouiaId="Danger">
-      Danger
-    </Button>{' '}
-    <Button variant="warning" ouiaId="Warning">
-      Warning
-    </Button>
+  <>
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <Button variant="primary" ouiaId="Primary">
+        Primary
+      </Button>
+      <Button variant="secondary" ouiaId="Secondary">
+        Secondary
+      </Button>
+      <Button variant="secondary" ouiaId="DangerSecondary" isDanger>
+        Danger Secondary
+      </Button>
+      <Button variant="tertiary" ouiaId="Tertiary">
+        Tertiary
+      </Button>
+      <Button variant="danger" ouiaId="Danger">
+        Danger
+      </Button>
+      <Button variant="warning" ouiaId="Warning">
+        Warning
+      </Button>
+    </Flex>
     <br />
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <Button variant="link" icon={<PlusCircleIcon />}>
+        Link
+      </Button>
+      <Button variant="link" icon={<ExternalLinkSquareAltIcon />} iconPosition="end">
+        Link
+      </Button>
+      <Button variant="link" isInline>
+        Inline link
+      </Button>
+      <Button variant="link" isDanger>
+        Danger link
+      </Button>
+      <Button variant="plain" aria-label="Action">
+        <TimesIcon />
+      </Button>
+    </Flex>
     <br />
-    <Button variant="link" icon={<PlusCircleIcon />}>
-      Link
-    </Button>{' '}
-    <Button variant="link" icon={<ExternalLinkSquareAltIcon />} iconPosition="end">
-      Link
-    </Button>{' '}
-    <Button variant="link" isInline>
-      Inline link
-    </Button>{' '}
-    <Button variant="link" isDanger>
-      Danger link
-    </Button>
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <Button variant="control">Control</Button>
+      <Button variant="control" aria-label="Copy">
+        <CopyIcon />
+      </Button>
+    </Flex>
     <br />
-    <br />
-    <Button variant="plain" aria-label="Action">
-      <TimesIcon />
-    </Button>
-    <br />
-    <br />
-    <Button variant="control">Control</Button>{' '}
-    <Button variant="control" aria-label="Copy">
-      <CopyIcon />
-    </Button>
-  </React.Fragment>
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <Button variant="stateful" icon={<BellIcon />} state="read">
+        Stateful read
+      </Button>
+      <Button variant="stateful" icon={<BellIcon />} state="unread">
+        Stateful unread
+      </Button>
+      <Button variant="stateful" icon={<BellIcon />} state="attention">
+        Stateful attention
+      </Button>
+    </Flex>
+  </>
 );
diff --git a/packages/react-core/src/components/Button/examples/ButtonWithCount.tsx b/packages/react-core/src/components/Button/examples/ButtonWithCount.tsx
index 766ae5b3041..644ef31dfd2 100644
--- a/packages/react-core/src/components/Button/examples/ButtonWithCount.tsx
+++ b/packages/react-core/src/components/Button/examples/ButtonWithCount.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { BadgeCountObject, Button } from '@patternfly/react-core';
+import { BadgeCountObject, Button, Flex } from '@patternfly/react-core';
 
 export const ButtonWithCount: React.FunctionComponent = () => {
   const badgeCountObjectNotRead: BadgeCountObject = {
@@ -15,75 +15,82 @@ export const ButtonWithCount: React.FunctionComponent = () => {
   };
 
   return (
-    <React.Fragment>
-      <p>Unread:</p>
-      <Button variant="primary" countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="secondary" countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="tertiary" countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="control" countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="link" countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
+    <>
+      <div>Unread:</div>
+      <Flex columnGap={{ default: 'columnGapSm' }}>
+        <Button variant="primary" countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="secondary" countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="tertiary" countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="control" countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="link" countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+      </Flex>
       <br />
-      <p>Unread disabled:</p>
-      <Button variant="primary" isDisabled countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="secondary" isDisabled countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="tertiary" isDisabled countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="control" isDisabled countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="link" isDisabled countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
+      <div>Unread disabled:</div>
+      <Flex columnGap={{ default: 'columnGapSm' }}>
+        <Button variant="primary" isDisabled countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="secondary" isDisabled countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="tertiary" isDisabled countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="control" isDisabled countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="link" isDisabled countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+      </Flex>
       <br />
-      <p>Read:</p>
-      <Button variant="primary" countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="secondary" countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="tertiary" countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="control" countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="link" countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
+      <div>Read:</div>
+      <Flex columnGap={{ default: 'columnGapSm' }}>
+        <Button variant="primary" countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="secondary" countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="tertiary" countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="control" countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="link" countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+      </Flex>
       <br />
-      <p>Read disabled:</p>
-      <Button variant="primary" isDisabled countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="secondary" isDisabled countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="tertiary" isDisabled countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="control" isDisabled countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="link" isDisabled countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <br />
-    </React.Fragment>
+      <div>Read disabled:</div>
+      <Flex columnGap={{ default: 'columnGapSm' }}>
+        <Button variant="primary" isDisabled countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="secondary" isDisabled countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="tertiary" isDisabled countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="control" isDisabled countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="link" isDisabled countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+      </Flex>
+    </>
   );
 };

From 27fd5443fe21d4ea197f274d5a8111665474f065 Mon Sep 17 00:00:00 2001
From: adamviktora <viktora.adam@gmail.com>
Date: Thu, 11 Jan 2024 09:49:29 +0100
Subject: [PATCH 2/4] fix (Button docs): add aria-label to pass a11y tests

---
 .../src/components/Button/examples/ButtonPlainNoPadding.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Button/examples/ButtonPlainNoPadding.tsx b/packages/react-core/src/components/Button/examples/ButtonPlainNoPadding.tsx
index 1cf0d045bc0..d92fb5eaef5 100644
--- a/packages/react-core/src/components/Button/examples/ButtonPlainNoPadding.tsx
+++ b/packages/react-core/src/components/Button/examples/ButtonPlainNoPadding.tsx
@@ -5,7 +5,7 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-
 export const ButtonStateful: React.FunctionComponent = () => (
   <p>
     This is an example of a button
-    <Button variant="plain" noPadding>
+    <Button variant="plain" noPadding aria-label="More info">
       <QuestionCircleIcon />
     </Button>
     which is placed inline with text

From d076af7acf9030af16432c9fc6876c244395d462 Mon Sep 17 00:00:00 2001
From: adamviktora <viktora.adam@gmail.com>
Date: Tue, 16 Jan 2024 10:26:03 +0100
Subject: [PATCH 3/4] fix(Button): rename noPadding to hasNoPadding

---
 packages/react-core/src/components/Button/Button.tsx        | 6 +++---
 .../react-core/src/components/Button/examples/Button.md     | 2 +-
 ...ButtonPlainNoPadding.tsx => ButtonPlainHasNoPadding.tsx} | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)
 rename packages/react-core/src/components/Button/examples/{ButtonPlainNoPadding.tsx => ButtonPlainHasNoPadding.tsx} (68%)

diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx
index 13d2004b88f..886c67fcf48 100644
--- a/packages/react-core/src/components/Button/Button.tsx
+++ b/packages/react-core/src/components/Button/Button.tsx
@@ -80,7 +80,7 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   /** Sets state of the stateful button variant. Default is "unread" */
   state?: 'read' | 'unread' | 'attention';
   /** Applies no padding on a plain button variant. Use when plain button is placed inline with text */
-  noPadding?: boolean;
+  hasNoPadding?: boolean;
   /** Sets position of the icon. Note: "left" and "right" are deprecated. Use "start" and "end" instead */
   iconPosition?: 'start' | 'end' | 'left' | 'right';
   /** Adds accessible text to the button. */
@@ -120,7 +120,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   type = ButtonType.button,
   variant = ButtonVariant.primary,
   state = ButtonState.unread,
-  noPadding = false,
+  hasNoPadding = false,
   iconPosition = 'start',
   'aria-label': ariaLabel = null,
   icon = null,
@@ -173,7 +173,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && styles.modifiers.danger,
         isLoading !== null && variant !== ButtonVariant.plain && styles.modifiers.progress,
         isLoading && styles.modifiers.inProgress,
-        noPadding && variant === ButtonVariant.plain && styles.modifiers.noPadding,
+        hasNoPadding && variant === ButtonVariant.plain && styles.modifiers.noPadding,
         variant === ButtonVariant.stateful && styles.modifiers[state],
         size === ButtonSize.sm && styles.modifiers.small,
         size === ButtonSize.lg && styles.modifiers.displayLg,
diff --git a/packages/react-core/src/components/Button/examples/Button.md b/packages/react-core/src/components/Button/examples/Button.md
index eafbbd4785c..fd9eade8ce4 100644
--- a/packages/react-core/src/components/Button/examples/Button.md
+++ b/packages/react-core/src/components/Button/examples/Button.md
@@ -115,7 +115,7 @@ Buttons can display a `count` in the form of a badge to indicate some value or n
 
 To display a plain/icon button inline with text, use `noPadding` prop in addition to `variant="plain"`.
 
-```ts file="./ButtonPlainNoPadding.tsx"
+```ts file="./ButtonPlainHasNoPadding.tsx"
 ```
 
 ### Stateful
diff --git a/packages/react-core/src/components/Button/examples/ButtonPlainNoPadding.tsx b/packages/react-core/src/components/Button/examples/ButtonPlainHasNoPadding.tsx
similarity index 68%
rename from packages/react-core/src/components/Button/examples/ButtonPlainNoPadding.tsx
rename to packages/react-core/src/components/Button/examples/ButtonPlainHasNoPadding.tsx
index d92fb5eaef5..4c86ad06f25 100644
--- a/packages/react-core/src/components/Button/examples/ButtonPlainNoPadding.tsx
+++ b/packages/react-core/src/components/Button/examples/ButtonPlainHasNoPadding.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { Button } from '@patternfly/react-core';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 
-export const ButtonStateful: React.FunctionComponent = () => (
+export const ButtonPlainHasNoPadding: React.FunctionComponent = () => (
   <p>
     This is an example of a button
-    <Button variant="plain" noPadding aria-label="More info">
+    <Button variant="plain" hasNoPadding aria-label="More info">
       <QuestionCircleIcon />
     </Button>
     which is placed inline with text

From 8572a61bac748583e78b3b7319ad157c806f56c1 Mon Sep 17 00:00:00 2001
From: adamviktora <viktora.adam@gmail.com>
Date: Tue, 16 Jan 2024 10:26:18 +0100
Subject: [PATCH 4/4] docs(Button): update fragments

---
 .../Button/examples/ButtonDisabled.tsx        |  4 +-
 .../Button/examples/ButtonStateful.tsx        | 42 +++++++++----------
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/packages/react-core/src/components/Button/examples/ButtonDisabled.tsx b/packages/react-core/src/components/Button/examples/ButtonDisabled.tsx
index 70d13a24514..63d1339eee3 100644
--- a/packages/react-core/src/components/Button/examples/ButtonDisabled.tsx
+++ b/packages/react-core/src/components/Button/examples/ButtonDisabled.tsx
@@ -5,7 +5,7 @@ import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-i
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 
 export const ButtonDisabled: React.FunctionComponent = () => (
-  <React.Fragment>
+  <>
     <Flex columnGap={{ default: 'columnGapSm' }}>
       <Button isDisabled>Primary</Button>
       <Button variant="secondary" isDisabled>
@@ -48,5 +48,5 @@ export const ButtonDisabled: React.FunctionComponent = () => (
         <CopyIcon />
       </Button>
     </Flex>
-  </React.Fragment>
+  </>
 );
diff --git a/packages/react-core/src/components/Button/examples/ButtonStateful.tsx b/packages/react-core/src/components/Button/examples/ButtonStateful.tsx
index a702457c409..3444b2b7fc9 100644
--- a/packages/react-core/src/components/Button/examples/ButtonStateful.tsx
+++ b/packages/react-core/src/components/Button/examples/ButtonStateful.tsx
@@ -3,32 +3,30 @@ import { Button, Flex } from '@patternfly/react-core';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 export const ButtonStateful: React.FunctionComponent = () => (
-  <>
-    <Flex>
+  <Flex>
+    <div>
       <div>
-        <div>
-          <strong>Read</strong>
-        </div>
-        <Button variant="stateful" state="read" icon={<BellIcon />}>
-          10 <span className="pf-v5-screen-reader">items</span>
-        </Button>
+        <strong>Read</strong>
       </div>
+      <Button variant="stateful" state="read" icon={<BellIcon />}>
+        10 <span className="pf-v5-screen-reader">items</span>
+      </Button>
+    </div>
+    <div>
       <div>
-        <div>
-          <strong>Unread</strong>
-        </div>
-        <Button variant="stateful" state="unread" icon={<BellIcon />}>
-          10 <span className="pf-v5-screen-reader">unread items</span>
-        </Button>
+        <strong>Unread</strong>
       </div>
+      <Button variant="stateful" state="unread" icon={<BellIcon />}>
+        10 <span className="pf-v5-screen-reader">unread items</span>
+      </Button>
+    </div>
+    <div>
       <div>
-        <div>
-          <strong>Attention</strong>
-        </div>
-        <Button variant="stateful" state="attention" icon={<BellIcon />}>
-          10 <span className="pf-v5-screen-reader">unread items, needs attention</span>
-        </Button>
+        <strong>Attention</strong>
       </div>
-    </Flex>
-  </>
+      <Button variant="stateful" state="attention" icon={<BellIcon />}>
+        10 <span className="pf-v5-screen-reader">unread items, needs attention</span>
+      </Button>
+    </div>
+  </Flex>
 );