@patternfly/react-core 5.0.0-alpha.2 → 5.0.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.2",
+  "version": "5.0.0-alpha.4",
   "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",
@@ -55,21 +55,21 @@
   },
   "devDependencies": {
     "@patternfly/patternfly": "5.0.0-alpha.3",
-    "@rollup/plugin-commonjs": "^21.0.0",
+    "@rollup/plugin-commonjs": "^24.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-replace": "^3.0.0",
+    "@rollup/plugin-replace": "^5.0.2",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
     "glob": "^7.1.2",
     "rimraf": "^3.0.2",
-    "rollup": "^2.58.0",
-    "rollup-plugin-scss": "^3.0.0",
-    "rollup-plugin-terser": "^7.0.0",
+    "rollup": "^3.10.0",
+    "rollup-plugin-scss": "^4.0.0",
+    "rollup-plugin-terser": "^7.0.2",
     "typescript": "^4.7.4"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "5c5e79f8ab23e8c173df7524ad2f1f59a9ba4300"
+  "gitHead": "e10574726614bbe29582d3212d04f2d3d28be6ca"
 }

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