@patternfly/react-core 5.0.0-alpha.1 → 5.0.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.1",
+  "version": "5.0.0-alpha.3",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -71,5 +71,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "5204f0b671c8030ea8b9c1b80f653a4a2985d883"
+  "gitHead": "095f5b13df51b2fa9ffe73bee9e01e8613d54f06"
 }

package/src/components/Accordion/AccordionContent.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 import { AccordionContext } from './AccordionContext';
-import { AccordionExpandedContentBody } from './AccordionExpandedContentBody';
+import { AccordionExpandableContentBody } from './AccordionExpandableContentBody';
 
 export interface AccordionContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the Accordion  */
@@ -50,7 +50,7 @@ export const AccordionContent: React.FunctionComponent<AccordionContentProps> =
           aria-label={ariaLabel}
           {...props}
         >
-          {isCustomContent ? children : <AccordionExpandedContentBody>{children}</AccordionExpandedContentBody>}
+          {isCustomContent ? children : <AccordionExpandableContentBody>{children}</AccordionExpandableContentBody>}
         </Container>
       );
     }}

package/src/components/Accordion/AccordionExpandableContentBody.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
+
+export interface AccordionExpandableContentBodyProps {
+  /** Content rendered inside the accordion content body  */
+  children?: React.ReactNode;
+}
+
+export const AccordionExpandableContentBody: React.FunctionComponent<AccordionExpandableContentBodyProps> = ({
+  children = null
+}: AccordionExpandableContentBodyProps) => <div className={css(styles.accordionExpandableContentBody)}>{children}</div>;
+AccordionExpandableContentBody.displayName = 'AccordionExpandableContentBody';

package/src/components/Accordion/__tests__/AccordionContent.test.tsx

@@ -5,8 +5,8 @@ import { render, screen } from '@testing-library/react';
 import { AccordionContent } from '../AccordionContent';
 import { AccordionContext } from '../AccordionContext';
 
-jest.mock('../AccordionExpandedContentBody', () => ({
-  AccordionExpandedContentBody: ({ children }) => <div aria-label="Expanded content body mock">{children}</div>
+jest.mock('../AccordionExpandableContentBody', () => ({
+  AccordionExpandableContentBody: ({ children }) => <div aria-label="Expanded content body mock">{children}</div>
 }));
 
 test('Renders without children', () => {
@@ -29,7 +29,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with children wrapped in AccordionExpandedContentBody by default', () => {
+test('Renders with children wrapped in AccordionExpandableContentBody by default', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
       <AccordionContent>Test</AccordionContent>
@@ -39,7 +39,7 @@ test('Renders with children wrapped in AccordionExpandedContentBody by default',
   expect(screen.getByText('Test')).toHaveAccessibleName('Expanded content body mock');
 });
 
-test('Does not render children wrapped in AccordionExpandedContentBody when isCustomContent=true', () => {
+test('Does not render children wrapped in AccordionExpandableContentBody when isCustomContent=true', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
       <AccordionContent isCustomContent>Test</AccordionContent>

package/src/components/Accordion/__tests__/AccordionExpandedContentBody.test.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 
-import { AccordionExpandedContentBody } from '../AccordionExpandedContentBody';
+import { AccordionExpandableContentBody } from '../AccordionExpandableContentBody';
 
 test('Renders without children', () => {
-    const { asFragment } = render(<AccordionExpandedContentBody />);
+    const { asFragment } = render(<AccordionExpandableContentBody />);
 
     /* a snapshot test is used here because this component isn't selectable via better screen queries without children 
     as it doesn't spread other props to its container
@@ -14,20 +14,20 @@ test('Renders without children', () => {
 });
 
 test('Renders children', () => {
-  render(<AccordionExpandedContentBody>Test</AccordionExpandedContentBody>);
+  render(<AccordionExpandableContentBody>Test</AccordionExpandableContentBody>);
 
   expect(screen.getByText('Test')).toBeVisible();
 });
 
 test('Renders with class name pf-c-accordion__expandable-content-body', () => {
-  render(<AccordionExpandedContentBody>Test</AccordionExpandedContentBody>);
+  render(<AccordionExpandableContentBody>Test</AccordionExpandableContentBody>);
 
   expect(screen.getByText('Test')).toHaveClass('pf-c-accordion__expandable-content-body');
 });
 
 test('Matches the snapshot', () => {
   const { asFragment } = render(
-    <AccordionExpandedContentBody>Test</AccordionExpandedContentBody>
+    <AccordionExpandableContentBody>Test</AccordionExpandableContentBody>
   );
   expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Accordion/examples/Accordion.md

@@ -2,7 +2,7 @@
 id: Accordion
 section: components
 cssPrefix: pf-c-accordion
-propComponents: ['Accordion', 'AccordionItem', 'AccordionContent', 'AccordionToggle', AccordionExpandedContentBody]
+propComponents: ['Accordion', 'AccordionItem', 'AccordionContent', 'AccordionToggle', AccordionExpandableContentBody]
 ---
 
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';

package/src/components/Accordion/examples/AccordionBordered.tsx

@@ -4,7 +4,7 @@ import {
   AccordionItem,
   AccordionContent,
   AccordionToggle,
-  AccordionExpandedContentBody,
+  AccordionExpandableContentBody,
   Button,
   Checkbox
 } from '@patternfly/react-core';
@@ -88,7 +88,7 @@ export const AccordionBordered: React.FunctionComponent = () => {
             Item four
           </AccordionToggle>
           <AccordionContent id="bordered-expand4" isHidden={expanded !== 'bordered-toggle4'} isCustomContent>
-            <AccordionExpandedContentBody>
+            <AccordionExpandableContentBody>
               Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
               sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
               posuere cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper
@@ -96,12 +96,12 @@ export const AccordionBordered: React.FunctionComponent = () => {
               parturient montes, nascetur ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris,
               pellentesque imperdiet libero convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus.
               Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.
-            </AccordionExpandedContentBody>
-            <AccordionExpandedContentBody>
+            </AccordionExpandableContentBody>
+            <AccordionExpandableContentBody>
               <Button variant="link" size="lg" isInline>
                 Call to action <ArrowRightIcon />
               </Button>
-            </AccordionExpandedContentBody>
+            </AccordionExpandableContentBody>
           </AccordionContent>
         </AccordionItem>
         <AccordionItem>

package/src/components/Accordion/index.ts

@@ -1,5 +1,5 @@
 export * from './Accordion';
 export * from './AccordionContent';
-export * from './AccordionExpandedContentBody';
+export * from './AccordionExpandableContentBody';
 export * from './AccordionItem';
 export * from './AccordionToggle';

package/src/components/Tabs/Tabs.tsx

@@ -61,10 +61,8 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   isBox?: boolean;
   /** Enables vertical tab styling */
   isVertical?: boolean;
-  /** Enables border bottom tab styling on tabs. Defaults to true. To remove the bottom border, set this prop to false. */
-  hasBorderBottom?: boolean;
-  /** Enables border bottom styling for secondary tabs */
-  hasSecondaryBorderBottom?: boolean;
+  /** Disables border bottom tab styling on tabs. Defaults to false. To remove the bottom border, set this prop to true. */
+  hasNoBorderBottom?: boolean;
   /** Aria-label for the left scroll button */
   leftScrollAriaLabel?: string;
   /** Aria-label for the right scroll button */
@@ -177,7 +175,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
     isSecondary: false,
     isVertical: false,
     isBox: false,
-    hasBorderBottom: true,
+    hasNoBorderBottom: false,
     leftScrollAriaLabel: 'Scroll left',
     rightScrollAriaLabel: 'Scroll right',
     component: TabsComponent.div,
@@ -375,9 +373,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
       isSecondary,
       isVertical,
       isBox,
-      hasBorderBottom,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      hasSecondaryBorderBottom,
+      hasNoBorderBottom,
       leftScrollAriaLabel,
       rightScrollAriaLabel,
       'aria-label': ariaLabel,
@@ -460,7 +456,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
             isBox && styles.modifiers.box,
             showScrollButtons && styles.modifiers.scrollable,
             usePageInsets && styles.modifiers.pageInsets,
-            !hasBorderBottom && styles.modifiers.noBorderBottom,
+            hasNoBorderBottom && styles.modifiers.noBorderBottom,
             formatBreakpointMods(inset, styles),
             variantStyle[variant],
             hasOverflowTab && styles.modifiers.overflow,

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

@@ -357,7 +357,7 @@ test('should render box tabs of light variant', () => {
 
 test('should render tabs with no bottom border', () => {
   const { asFragment } = render(
-    <Tabs id="noBottomBorderTabs" hasBorderBottom={false}>
+    <Tabs id="noBottomBorderTabs" hasNoBorderBottom>
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         Tab 1 section
       </Tab>
@@ -372,9 +372,9 @@ test('should render tabs with no bottom border', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('should not render tabs with secondary border bottom when not passed hasSecondaryBorderBottom', () => {
+test('should render secondary tabs with no bottom border when passed hasNoBorderBottom', () => {
   render(
-    <Tabs id="noBottomBorderTabs" aria-label="Secondary bottom border">
+    <Tabs isSecondary hasNoBorderBottom id="noBottomBorderTabs" aria-label="Secondary bottom border">
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         Tab 1 section
       </Tab>
@@ -389,28 +389,28 @@ test('should not render tabs with secondary border bottom when not passed hasSec
 
   const tabsContainer = screen.queryByLabelText('Secondary bottom border');
 
-  expect(tabsContainer).not.toHaveClass('pf-m-border-bottom');
+  expect(tabsContainer).toHaveClass('pf-m-no-border-bottom');
 });
 
-// test('should render tabs with secondary border bottom when passed hasSecondaryBorderBottom', () => {
-//   render(
-//     <Tabs id="noBottomBorderTabs" aria-label="Secondary bottom border" hasSecondaryBorderBottom>
-//       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
-//         Tab 1 section
-//       </Tab>
-//       <Tab id="tab2" eventKey={1} title={<TabTitleText>"Tab item 2"</TabTitleText>}>
-//         Tab 2 section
-//       </Tab>
-//       <Tab id="tab3" eventKey={2} title={<TabTitleText>"Tab item 3"</TabTitleText>}>
-//         Tab 3 section
-//       </Tab>
-//     </Tabs>
-//   );
-//
-//   const tabsContainer = screen.queryByLabelText('Secondary bottom border');
-//
-//   expect(tabsContainer).toHaveClass('pf-m-border-bottom');
-// });
+test('should render secondary tabs with border bottom', () => {
+  render(
+    <Tabs isSecondary id="bottomBorderTabs" aria-label="Secondary bottom border">
+      <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
+        Tab 1 section
+      </Tab>
+      <Tab id="tab2" eventKey={1} title={<TabTitleText>"Tab item 2"</TabTitleText>}>
+        Tab 2 section
+      </Tab>
+      <Tab id="tab3" eventKey={2} title={<TabTitleText>"Tab item 3"</TabTitleText>}>
+        Tab 3 section
+      </Tab>
+    </Tabs>
+  );
+
+  const tabsContainer = screen.queryByLabelText('Secondary bottom border');
+
+  expect(tabsContainer).not.toHaveClass('pf-m-no-border-bottom');
+});
 
 test('should not render scroll buttons by default', () => {
   render(

package/src/demos/Tabs.md

@@ -383,7 +383,6 @@ TabsOpenWithSecondaryTabsDemo = () => {
           <TabContentBody>
             <Tabs
               isSecondary
-              hasSecondaryBorderBottom
               activeKey={activeTabKeySecondary}
               onSelect={handleTabClickSecondary}
               usePageInsets

package/dist/esm/components/Accordion/AccordionExpandedContentBody.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-export interface AccordionExpandedContentBodyProps {
-    /** Content rendered inside the accordion content body  */
-    children?: React.ReactNode;
-}
-export declare const AccordionExpandedContentBody: React.FunctionComponent<AccordionExpandedContentBodyProps>;
-//# sourceMappingURL=AccordionExpandedContentBody.d.ts.map

package/dist/esm/components/Accordion/AccordionExpandedContentBody.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AccordionExpandedContentBody.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/AccordionExpandedContentBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,iCAAiC;IAChD,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,4BAA4B,EAAE,KAAK,CAAC,iBAAiB,CAAC,iCAAiC,CAEiB,CAAC"}

package/dist/esm/components/Accordion/AccordionExpandedContentBody.js

@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
-export const AccordionExpandedContentBody = ({ children = null }) => React.createElement("div", { className: css(styles.accordionExpandableContentBody) }, children);
-AccordionExpandedContentBody.displayName = 'AccordionExpandedContentBody';
-//# sourceMappingURL=AccordionExpandedContentBody.js.map

package/dist/esm/components/Accordion/AccordionExpandedContentBody.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AccordionExpandedContentBody.js","sourceRoot":"","sources":["../../../../src/components/Accordion/AccordionExpandedContentBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,MAAM,MAAM,6DAA6D,CAAC;AAOjF,MAAM,CAAC,MAAM,4BAA4B,GAA+D,CAAC,EACvG,QAAQ,GAAG,IAAI,EACmB,EAAE,EAAE,CAAC,6BAAK,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,8BAA8B,CAAC,IAAG,QAAQ,CAAO,CAAC;AACtH,4BAA4B,CAAC,WAAW,GAAG,8BAA8B,CAAC"}

package/dist/js/components/Accordion/AccordionExpandedContentBody.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-export interface AccordionExpandedContentBodyProps {
-    /** Content rendered inside the accordion content body  */
-    children?: React.ReactNode;
-}
-export declare const AccordionExpandedContentBody: React.FunctionComponent<AccordionExpandedContentBodyProps>;
-//# sourceMappingURL=AccordionExpandedContentBody.d.ts.map

package/dist/js/components/Accordion/AccordionExpandedContentBody.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AccordionExpandedContentBody.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/AccordionExpandedContentBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,iCAAiC;IAChD,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,4BAA4B,EAAE,KAAK,CAAC,iBAAiB,CAAC,iCAAiC,CAEiB,CAAC"}

package/dist/js/components/Accordion/AccordionExpandedContentBody.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AccordionExpandedContentBody = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_styles_1 = require("@patternfly/react-styles");
-const accordion_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/Accordion/accordion"));
-const AccordionExpandedContentBody = ({ children = null }) => React.createElement("div", { className: react_styles_1.css(accordion_1.default.accordionExpandableContentBody) }, children);
-exports.AccordionExpandedContentBody = AccordionExpandedContentBody;
-exports.AccordionExpandedContentBody.displayName = 'AccordionExpandedContentBody';
-//# sourceMappingURL=AccordionExpandedContentBody.js.map

package/dist/js/components/Accordion/AccordionExpandedContentBody.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AccordionExpandedContentBody.js","sourceRoot":"","sources":["../../../../src/components/Accordion/AccordionExpandedContentBody.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,2DAA+C;AAC/C,oHAAiF;AAO1E,MAAM,4BAA4B,GAA+D,CAAC,EACvG,QAAQ,GAAG,IAAI,EACmB,EAAE,EAAE,CAAC,6BAAK,SAAS,EAAE,kBAAG,CAAC,mBAAM,CAAC,8BAA8B,CAAC,IAAG,QAAQ,CAAO,CAAC;AAFzG,QAAA,4BAA4B,gCAE6E;AACtH,oCAA4B,CAAC,WAAW,GAAG,8BAA8B,CAAC"}

package/src/components/Accordion/AccordionExpandedContentBody.tsx

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
-
-export interface AccordionExpandedContentBodyProps {
-  /** Content rendered inside the accordion content body  */
-  children?: React.ReactNode;
-}
-
-export const AccordionExpandedContentBody: React.FunctionComponent<AccordionExpandedContentBodyProps> = ({
-  children = null
-}: AccordionExpandedContentBodyProps) => <div className={css(styles.accordionExpandableContentBody)}>{children}</div>;
-AccordionExpandedContentBody.displayName = 'AccordionExpandedContentBody';