@patternfly/react-core 5.1.1 → 5.2.0-prerelease.10

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

@@ -32,7 +32,7 @@ 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). |
 
 ### Disabled buttons
 

package/src/components/Checkbox/__tests__/Checkbox.test.tsx

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Checkbox } from '../Checkbox';
+import styles from '@patternfly/react-styles/css/components/Check/check';
 
 describe('Checkbox', () => {
   test('controlled', () => {
@@ -90,6 +91,6 @@ describe('Checkbox', () => {
       <Checkbox component="span" label="label" aria-labelledby="labelId" id="check" isChecked aria-label="check" />
     );
     const span = container.querySelector('span');
-    expect(span).toHaveClass('pf-v5-c-check');
+    expect(span).toHaveClass(styles.check);
   });
 });

package/src/components/Chip/Chip.tsx

@@ -6,6 +6,7 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import styles from '@patternfly/react-styles/css/components/Chip/chip';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+import cssChipTextMaxWidth from '@patternfly/react-tokens/dist/esm/c_chip__text_MaxWidth';
 
 export interface ChipProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   /** Badge to add to the chip. The badge will be rendered after the chip text. */
@@ -81,7 +82,7 @@ class Chip extends React.Component<ChipProps, ChipState> {
   }
 
   setChipStyle = () => ({
-    '--pf-v5-c-chip__text--MaxWidth': this.props.textMaxWidth
+    [cssChipTextMaxWidth.name]: this.props.textMaxWidth
   });
 
   renderOverflowChip = () => {

package/src/components/CodeBlock/CodeBlockAction.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/CodeBlock/code-block';
 
 export interface CodeBlockActionProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the code block action */
@@ -13,7 +14,7 @@ export const CodeBlockAction: React.FunctionComponent<CodeBlockActionProps> = ({
   className,
   ...props
 }: CodeBlockActionProps) => (
-  <div className={css('pf-v5-c-code-block__actions-item', className)} {...props}>
+  <div className={css(`${styles.codeBlockActions}-item`, className)} {...props}>
     {children}
   </div>
 );

package/src/components/CodeBlock/__tests__/CodeBlock.test.tsx

@@ -1,30 +1,35 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { CodeBlock } from '../CodeBlock';
-import { CodeBlockAction } from '../CodeBlockAction';
-import { CodeBlockCode } from '../CodeBlockCode';
+import styles from '@patternfly/react-styles/css/components/CodeBlock/code-block';
 
-test('CodeBlock renders successfully', () => {
-  const { asFragment } = render(<CodeBlock>test text</CodeBlock>);
-  expect(asFragment()).toMatchSnapshot();
+test('CodeBlock renders', () => {
+  render(<CodeBlock>test text</CodeBlock>);
+  expect(screen.getByText('test text')).toBeVisible();
 });
 
-test('CodeBlockAction renders successfully', () => {
-  const { asFragment } = render(<CodeBlockAction>action</CodeBlockAction>);
-  expect(asFragment()).toMatchSnapshot();
-});
+test(`CodeBlock content renders with class ${styles.codeBlockContent} by default`, () => {
+  render(<CodeBlock>Test</CodeBlock>);
 
-test('CodeBlockCode renders successfully', () => {
-  const { asFragment } = render(<CodeBlockCode>action</CodeBlockCode>);
-  expect(asFragment()).toMatchSnapshot();
+  expect(screen.getByText('Test')).toHaveClass(styles.codeBlockContent);
 });
 
-test('CodeBlock with components renders successfully', () => {
-  const { asFragment } = render(
-    <CodeBlock actions={<CodeBlockAction>button</CodeBlockAction>}>
-      <CodeBlockCode>inside pre/code tags</CodeBlockCode>
-      test outer text
+test('CodeBlock renders with custom class', () => {
+  render(
+    <CodeBlock data-testid="code-block" className="tester">
+      Test
     </CodeBlock>
   );
+
+  expect(screen.getByTestId('code-block')).toHaveClass('tester');
+});
+
+test('Renders when actions are passed to CodeBlock', () => {
+  render(<CodeBlock actions={<div>actions</div>} />);
+  expect(screen.getByText('actions')).toBeVisible();
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CodeBlock actions={<div>actions</div>}>children</CodeBlock>);
   expect(asFragment()).toMatchSnapshot();
 });

package/src/components/CodeBlock/__tests__/CodeBlockAction.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { CodeBlockAction } from '../CodeBlockAction';
+import styles from '@patternfly/react-styles/css/components/CodeBlock/code-block';
+
+test('CodeBlockAction renders', () => {
+  render(<CodeBlockAction>action</CodeBlockAction>);
+  expect(screen.getByText('action')).toBeVisible();
+});
+
+test(`CodeBlockAction renders with class ${styles.codeBlockActions}-item by default`, () => {
+  render(<CodeBlockAction>Test</CodeBlockAction>);
+
+  expect(screen.getByText('Test')).toHaveClass(`${styles.codeBlockActions}-item`);
+});
+
+test('CodeBlockAction renders with custom class', () => {
+  render(<CodeBlockAction className="tester">Test</CodeBlockAction>);
+
+  expect(screen.getByText('Test')).toHaveClass('tester');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CodeBlockAction>children</CodeBlockAction>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/CodeBlock/__tests__/CodeBlockCode.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { CodeBlockCode } from '../CodeBlockCode';
+import styles from '@patternfly/react-styles/css/components/CodeBlock/code-block';
+
+test('CodeBlockCode renders', () => {
+  render(<CodeBlockCode>action</CodeBlockCode>);
+  expect(screen.getByText('action')).toBeVisible();
+});
+
+test(`Renders with class ${styles.codeBlockPre} by default`, () => {
+  render(
+    <CodeBlockCode data-testid="code-block-code" className="test">
+      Test
+    </CodeBlockCode>
+  );
+
+  expect(screen.getByTestId('code-block-code')).toHaveClass(`${styles.codeBlockPre} test`);
+});
+
+test(`Renders with class ${styles.codeBlockCode} by default`, () => {
+  render(<CodeBlockCode>Test</CodeBlockCode>);
+
+  expect(screen.getByText('Test')).toHaveClass(styles.codeBlockCode);
+});
+
+test('Renders with custom class', () => {
+  render(<CodeBlockCode codeClassName="tester">Test</CodeBlockCode>);
+
+  expect(screen.getByText('Test')).toHaveClass('tester');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CodeBlockCode>children</CodeBlockCode>);
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -1,20 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CodeBlock renders successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-code-block"
-  >
-    <div
-      class="pf-v5-c-code-block__content"
-    >
-      test text
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`CodeBlock with components renders successfully 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-code-block"
@@ -25,51 +11,16 @@ exports[`CodeBlock with components renders successfully 1`] = `
       <div
         class="pf-v5-c-code-block__actions"
       >
-        <div
-          class="pf-v5-c-code-block__actions-item"
-        >
-          button
+        <div>
+          actions
         </div>
       </div>
     </div>
     <div
       class="pf-v5-c-code-block__content"
     >
-      <pre
-        class="pf-v5-c-code-block__pre"
-      >
-        <code
-          class="pf-v5-c-code-block__code"
-        >
-          inside pre/code tags
-        </code>
-      </pre>
-      test outer text
+      children
     </div>
   </div>
 </DocumentFragment>
 `;
-
-exports[`CodeBlockAction renders successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-code-block__actions-item"
-  >
-    action
-  </div>
-</DocumentFragment>
-`;
-
-exports[`CodeBlockCode renders successfully 1`] = `
-<DocumentFragment>
-  <pre
-    class="pf-v5-c-code-block__pre"
-  >
-    <code
-      class="pf-v5-c-code-block__code"
-    >
-      action
-    </code>
-  </pre>
-</DocumentFragment>
-`;

package/src/components/CodeBlock/__tests__/__snapshots__/CodeBlockAction.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-code-block__actions-item"
+  >
+    children
+  </div>
+</DocumentFragment>
+`;