{
Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.
-
diff --git a/packages/react-core/src/components/Backdrop/examples/BackdropSpinner.tsx b/packages/react-core/src/components/Backdrop/examples/BackdropSpinner.tsx
index 9c395c1fe6e..65a0e67a584 100644
--- a/packages/react-core/src/components/Backdrop/examples/BackdropSpinner.tsx
+++ b/packages/react-core/src/components/Backdrop/examples/BackdropSpinner.tsx
@@ -4,7 +4,7 @@ import { Backdrop, Spinner, Bullseye } from '@patternfly/react-core';
export const BackdropSpinner: React.FunctionComponent = () => (
-
+
);
diff --git a/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx b/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx
index 1a7f8c64a7d..1dc8d86b33e 100644
--- a/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx
+++ b/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx
@@ -1,27 +1,92 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
import { Banner } from '../Banner';
-import React from 'react';
-import { render } from '@testing-library/react';
-
-['default', 'info', 'success', 'warning', 'danger'].forEach((variant: string) => {
- test(`${variant} banner`, () => {
- const { asFragment } = render(
-
- {variant} Banner
-
- );
- expect(asFragment()).toMatchSnapshot();
- });
-});
-
-test(`sticky banner`, () => {
- const { asFragment } = render(
-
- Sticky Banner
-
+
+test('Renders without children', () => {
+ render(
+
+
+
);
+ expect(screen.getByTestId('banner').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+ render(
Test);
+ expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class name pf-c-banner', () => {
+ render(
Test);
+ expect(screen.getByText('Test')).toHaveClass('pf-c-banner');
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+ render(
Test);
+ expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders without any modifier class when variant prop is not passed', () => {
+ render(
Test);
+ expect(screen.getByText('Test')).toHaveClass('pf-c-banner', { exact: true });
+});
+
+test('Renders with class name pf-m-success when "success" is passed to variant prop', () => {
+ render(
Test);
+ expect(screen.getByText('Test')).toHaveClass('pf-m-success');
+});
+
+test('Renders with class name pf-m-danger when "danger" is passed to variant prop', () => {
+ render(
Test);
+ expect(screen.getByText('Test')).toHaveClass('pf-m-danger');
+});
+
+test('Renders with class name pf-m-warning when "warning" is passed to variant prop', () => {
+ render(
Test);
+ expect(screen.getByText('Test')).toHaveClass('pf-m-warning');
+});
+
+test('Renders with class name pf-m-info when "info" is passed to variant prop', () => {
+ render(
Test);
+ expect(screen.getByText('Test')).toHaveClass('pf-m-info');
+});
+
+test('Renders pf-u-screen-reader class by default for screenReaderText', () => {
+ render(
Test);
+ expect(screen.getByText('default banner')).toHaveClass('pf-u-screen-reader', { exact: true });
+});
+
+test('Renders screenReaderText as "default banner" by default', () => {
+ render(
Test);
+ expect(screen.getByText('default banner')).toBeInTheDocument();
+});
+
+test('Renders screenReaderText as "success banner" when variant="success"', () => {
+ render(
Test);
+ expect(screen.getByText('success banner')).toBeInTheDocument();
+});
+
+test('Renders custom screenReaderText passed via prop', () => {
+ render(
Test);
+ expect(screen.getByText('Custom screen reader text')).toBeInTheDocument();
+});
+
+test('Renders without pf-m-sticky by default', () => {
+ render(
Test);
+ expect(screen.getByText('Test')).not.toHaveClass('pf-m-sticky');
+});
+
+test('Renders with class name pf-m-sticky when isSticky prop is passed', () => {
+ render(
Test);
+ expect(screen.getByText('Test')).toHaveClass('pf-m-sticky');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+ render(
Test);
+ expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+ const { asFragment } = render(
Test);
expect(asFragment()).toMatchSnapshot();
});
diff --git a/packages/react-core/src/components/Banner/__tests__/__snapshots__/Banner.test.tsx.snap b/packages/react-core/src/components/Banner/__tests__/__snapshots__/Banner.test.tsx.snap
index b55f80bace6..1d6551bd157 100644
--- a/packages/react-core/src/components/Banner/__tests__/__snapshots__/Banner.test.tsx.snap
+++ b/packages/react-core/src/components/Banner/__tests__/__snapshots__/Banner.test.tsx.snap
@@ -1,60 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`danger banner 1`] = `
+exports[`Matches the snapshot 1`] = `
- danger Banner
-
- danger banner
-
-
-
-`;
-
-exports[`default banner 1`] = `
-
-
- default Banner
-
- default banner
-
-
-
-`;
-
-exports[`info banner 1`] = `
-
-
- info Banner
-
- info banner
-
-
-
-`;
-
-exports[`sticky banner 1`] = `
-
-
- Sticky Banner
+ Test
@@ -63,35 +14,3 @@ exports[`sticky banner 1`] = `
`;
-
-exports[`success banner 1`] = `
-
-
- success Banner
-
- success banner
-
-
-
-`;
-
-exports[`warning banner 1`] = `
-
-
- warning Banner
-
- warning banner
-
-
-
-`;
diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx
index e3013421b37..7cfdb8fe470 100644
--- a/packages/react-core/src/components/Button/Button.tsx
+++ b/packages/react-core/src/components/Button/Button.tsx
@@ -22,6 +22,12 @@ export enum ButtonType {
reset = 'reset'
}
+export enum ButtonSize {
+ default = 'default',
+ sm = 'sm',
+ lg = 'lg'
+}
+
export interface BadgeCountObject {
/** Adds styling to the badge to indicate it has been read */
isRead?: boolean;
@@ -31,7 +37,7 @@ export interface BadgeCountObject {
className?: string;
}
-export interface ButtonProps extends Omit
, 'ref'>, OUIAProps {
+export interface ButtonProps extends Omit, 'ref' | 'size'>, OUIAProps {
/** Content rendered inside the button */
children?: React.ReactNode;
/** Additional classes added to the button */
@@ -58,6 +64,8 @@ export interface ButtonProps extends Omit, 'r
inoperableEvents?: string[];
/** Adds inline styling to a link button */
isInline?: boolean;
+ /** Adds styling which affects the size of the button */
+ size?: 'default' | 'sm' | 'lg';
/** Sets button type */
type?: 'button' | 'submit' | 'reset';
/** Adds button variant styles */
@@ -70,10 +78,6 @@ export interface ButtonProps extends Omit, 'r
icon?: React.ReactNode | null;
/** Sets the button tabindex. */
tabIndex?: number;
- /** Adds small styling to the button */
- isSmall?: boolean;
- /** Adds large styling to the button */
- isLarge?: boolean;
/** Adds danger styling to secondary or link button variants */
isDanger?: boolean;
/** Forwarded ref */
@@ -99,8 +103,7 @@ const ButtonBase: React.FunctionComponent = ({
spinnerAriaValueText,
spinnerAriaLabelledBy,
spinnerAriaLabel,
- isSmall = false,
- isLarge = false,
+ size = ButtonSize.default,
inoperableEvents = ['onClick', 'onKeyPress'],
isInline = false,
type = ButtonType.button,
@@ -157,8 +160,8 @@ const ButtonBase: React.FunctionComponent = ({
isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && styles.modifiers.danger,
isLoading !== null && children !== null && styles.modifiers.progress,
isLoading && styles.modifiers.inProgress,
- isSmall && styles.modifiers.small,
- isLarge && styles.modifiers.displayLg,
+ size === ButtonSize.sm && styles.modifiers.small,
+ size === ButtonSize.lg && styles.modifiers.displayLg,
className
)}
disabled={isButtonElement ? isDisabled : null}
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 b8d19a3472e..7625dd1890c 100644
--- a/packages/react-core/src/components/Button/__tests__/Button.test.tsx
+++ b/packages/react-core/src/components/Button/__tests__/Button.test.tsx
@@ -84,13 +84,13 @@ describe('Button', () => {
expect(asFragment()).toMatchSnapshot();
});
- test('isSmall', () => {
- const { asFragment } = render();
+ test('size small', () => {
+ const { asFragment } = render();
expect(asFragment()).toMatchSnapshot();
});
- test('isLarge', () => {
- const { asFragment } = render();
+ test('size large', () => {
+ const { asFragment } = render();
expect(asFragment()).toMatchSnapshot();
});
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 29332d1d569..38e9363506c 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
@@ -152,21 +152,6 @@ exports[`Button isInline 1`] = `
`;
-exports[`Button isLarge 1`] = `
-
-
-
-`;
-
exports[`Button isLoading 1`] = `
@@ -216,22 +200,21 @@ exports[`Button isLoading icon only 1`] = `
-
-
-
-
-
+
ICON
@@ -240,21 +223,6 @@ exports[`Button isLoading icon only 1`] = `
`;
-exports[`Button isSmall 1`] = `
-
-
-
-`;
-
exports[`Button link button 1`] = `