@patternfly/react-core 6.0.0-alpha.21 → 6.0.0-alpha.23

package/src/components/Label/examples/LabelGroupEditableAdd.tsx

@@ -56,7 +56,7 @@ export const LabelGroupEditableAdd: React.FunctionComponent = () => {
       numLabels={5}
       isEditable
       addLabelControl={
-        <Label color="blue" variant="outline" isOverflowLabel onClick={onAdd}>
+        <Label variant="add" onClick={onAdd}>
           Add label
         </Label>
       }

package/src/components/Label/examples/LabelGroupEditableAddDropdown.tsx

@@ -102,7 +102,7 @@ export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
 
   const toggle = (
     <div ref={toggleRef}>
-      <Label color="blue" variant="outline" isOverflowLabel onClick={onToggleClick}>
+      <Label variant="overflow" onClick={onToggleClick}>
         Add label
       </Label>
     </div>

package/src/components/Label/examples/LabelGroupEditableAddModal.tsx

@@ -236,7 +236,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
         numLabels={5}
         isEditable
         addLabelControl={
-          <Label color="blue" variant="outline" isOverflowLabel onClick={handleModalToggle}>
+          <Label variant="overflow" onClick={handleModalToggle}>
             Add label
           </Label>
         }

package/src/components/Label/examples/LabelOutline.tsx

@@ -9,25 +9,25 @@ export const LabelOutline: React.FunctionComponent = () => {
   };
   return (
     <React.Fragment>
-      <Label variant="outline">Grey</Label>{' '}
+      <Label variant="outline">Grey</Label>
       <Label variant="outline" icon={<InfoCircleIcon />}>
         Grey icon
-      </Label>{' '}
+      </Label>
       <Label variant="outline" onClose={() => Function.prototype}>
         Grey removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Grey icon removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" href="#outline">
         Grey link
-      </Label>{' '}
+      </Label>
       <Label variant="outline" href="#outline" onClose={() => Function.prototype}>
         Grey link removable
       </Label>
       <Label variant="outline" onClick={() => logColor('grey')}>
         Grey clickable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" onClick={() => logColor('grey')} onClose={() => Function.prototype}>
         Grey clickable removable
       </Label>
@@ -38,25 +38,25 @@ export const LabelOutline: React.FunctionComponent = () => {
       <br />
       <Label variant="outline" color="blue">
         Blue
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="blue" icon={<InfoCircleIcon />}>
         Blue icon
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="blue" onClose={() => Function.prototype}>
         Blue removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Blue icon removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="blue" href="#outline">
         Blue link
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="blue" href="#outline" onClose={() => Function.prototype}>
         Blue link removable
       </Label>
       <Label variant="outline" color="blue" onClick={() => logColor('blue')}>
         Blue clickable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="blue" onClick={() => logColor('blue')} onClose={() => Function.prototype}>
         Blue clickable removable
       </Label>
@@ -73,25 +73,25 @@ export const LabelOutline: React.FunctionComponent = () => {
       <br />
       <Label variant="outline" color="green">
         Green
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="green" icon={<InfoCircleIcon />}>
         Green icon
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="green" onClose={() => Function.prototype}>
         Green removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Green icon removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="green" href="#outline">
         Green link
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="green" href="#outline" onClose={() => Function.prototype}>
         Green link removable
       </Label>
       <Label variant="outline" color="green" onClick={() => logColor('green')}>
         Green clickable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="green" onClick={() => logColor('green')} onClose={() => Function.prototype}>
         Green clickable removable
       </Label>
@@ -108,25 +108,25 @@ export const LabelOutline: React.FunctionComponent = () => {
       <br />
       <Label variant="outline" color="orange">
         Orange
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="orange" icon={<InfoCircleIcon />}>
         Orange icon
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="orange" onClose={() => Function.prototype}>
         Orange removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Orange icon removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="orange" href="#outline">
         Orange link
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="orange" href="#outline" onClose={() => Function.prototype}>
         Orange link removable
       </Label>
       <Label variant="outline" color="orange" onClick={() => logColor('orange')}>
         Orange clickable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="orange" onClick={() => logColor('orange')} onClose={() => Function.prototype}>
         Orange clickable removable
       </Label>
@@ -143,25 +143,25 @@ export const LabelOutline: React.FunctionComponent = () => {
       <br />
       <Label variant="outline" color="red">
         Red
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="red" icon={<InfoCircleIcon />}>
         Red icon
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="red" onClose={() => Function.prototype}>
         Red removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Red icon removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="red" href="#outline">
         Red link
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="red" href="#outline" onClose={() => Function.prototype}>
         Red link removable
       </Label>
       <Label variant="outline" color="red" onClick={() => logColor('red')}>
         Red clickable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="red" onClick={() => logColor('red')} onClose={() => Function.prototype}>
         Red clickable removable
       </Label>
@@ -176,27 +176,67 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
+      <Label variant="outline" color="orangered">
+        Orange red
+      </Label>
+      <Label variant="outline" color="orangered" icon={<InfoCircleIcon />}>
+        Orange red icon
+      </Label>
+      <Label variant="outline" color="orangered" onClose={() => Function.prototype}>
+        Orange red removable
+      </Label>
+      <Label variant="outline" color="orangered" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Orange red icon removable
+      </Label>
+      <Label variant="outline" color="orangered" href="#outline">
+        Orange red link
+      </Label>
+      <Label variant="outline" color="orangered" href="#outline" onClose={() => Function.prototype}>
+        Orange red link removable
+      </Label>
+      <Label variant="outline" color="orangered" onClick={() => logColor('orangered')}>
+        Orange red clickable
+      </Label>
+      <Label
+        variant="outline"
+        color="orangered"
+        onClick={() => logColor('orangered')}
+        onClose={() => Function.prototype}
+      >
+        Orange red clickable removable
+      </Label>
+      <Label
+        variant="outline"
+        color="orangered"
+        icon={<InfoCircleIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Orange red label with icon that overflows
+      </Label>
+      <br />
+      <br />
       <Label variant="outline" color="purple">
         Purple
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="purple" icon={<InfoCircleIcon />}>
         Purple icon
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="purple" onClose={() => Function.prototype}>
         Purple removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Purple icon removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="purple" href="#outline">
         Purple link
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="purple" href="#outline" onClose={() => Function.prototype}>
         Purple link removable
       </Label>
       <Label variant="outline" color="purple" onClick={() => logColor('purple')}>
         Purple clickable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="purple" onClick={() => logColor('purple')} onClose={() => Function.prototype}>
         Purple clickable removable
       </Label>
@@ -213,25 +253,25 @@ export const LabelOutline: React.FunctionComponent = () => {
       <br />
       <Label variant="outline" color="cyan">
         Cyan
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="cyan" icon={<InfoCircleIcon />}>
         Cyan icon
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="cyan" onClose={() => Function.prototype}>
         Cyan removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Cyan icon removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="cyan" href="#outline">
         Cyan link
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="cyan" href="#outline" onClose={() => Function.prototype}>
         Cyan link removable
       </Label>
       <Label variant="outline" color="cyan" onClick={() => logColor('cyan')}>
         Cyan clickable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="cyan" onClick={() => logColor('cyan')} onClose={() => Function.prototype}>
         Cyan clickable removable
       </Label>
@@ -248,25 +288,25 @@ export const LabelOutline: React.FunctionComponent = () => {
       <br />
       <Label variant="outline" color="gold">
         Gold
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="gold" icon={<InfoCircleIcon />}>
         Gold icon
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="gold" onClose={() => Function.prototype}>
         Gold removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Gold icon removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="gold" href="#outline">
         Gold link
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="gold" href="#outline" onClose={() => Function.prototype}>
         Gold link removable
       </Label>
       <Label variant="outline" color="gold" onClick={() => logColor('gold')}>
         Gold clickable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="gold" onClick={() => logColor('gold')} onClose={() => Function.prototype}>
         Gold clickable removable
       </Label>

package/src/components/Tabs/TabContent.tsx

@@ -27,10 +27,10 @@ export interface TabContentProps extends Omit<React.HTMLProps<HTMLElement>, 'ref
   ouiaSafe?: boolean;
 }
 
-// TODO: Update with issue #9909
-// const variantStyle = {
-//   default: ''
-// };
+const variantStyle = {
+  default: '',
+  secondary: styles.modifiers.secondary
+};
 
 const TabContentBase: React.FunctionComponent<TabContentProps> = ({
   id,
@@ -56,27 +56,30 @@ const TabContentBase: React.FunctionComponent<TabContentProps> = ({
 
     return (
       <TabsContextConsumer>
-        {({ variant }: TabsContextProps) => (
-          <section
-            ref={innerRef}
-            hidden={children ? null : child.props.eventKey !== activeKey}
-            // TODO: Update "variant" with issue #9909
-            className={
-              children
-                ? css(styles.tabContent, className, variant)
-                : css(styles.tabContent, child.props.className, variant)
-            }
-            id={children ? id : `pf-tab-section-${child.props.eventKey}-${id}`}
-            aria-label={ariaLabel}
-            aria-labelledby={labelledBy}
-            role="tabpanel"
-            tabIndex={0}
-            {...getOUIAProps('TabContent', ouiaId, ouiaSafe)}
-            {...props}
-          >
-            {children || child.props.children}
-          </section>
-        )}
+        {({ variant }: TabsContextProps) => {
+          const variantClass = variantStyle[variant];
+
+          return (
+            <section
+              ref={innerRef}
+              hidden={children ? null : child.props.eventKey !== activeKey}
+              className={
+                children
+                  ? css(styles.tabContent, className, variantClass)
+                  : css(styles.tabContent, child.props.className, variantClass)
+              }
+              id={children ? id : `pf-tab-section-${child.props.eventKey}-${id}`}
+              aria-label={ariaLabel}
+              aria-labelledby={labelledBy}
+              role="tabpanel"
+              tabIndex={0}
+              {...getOUIAProps('TabContent', ouiaId, ouiaSafe)}
+              {...props}
+            >
+              {children || child.props.children}
+            </section>
+          );
+        }}
       </TabsContextConsumer>
     );
   }

package/src/components/Tabs/TabTitleIcon.tsx

@@ -14,7 +14,7 @@ export const TabTitleIcon: React.FunctionComponent<TabTitleIconProps> = ({
   className = '',
   ...props
 }: TabTitleIconProps) => (
-  <span className={css(styles.tabsItemIcon, className)} {...props}>
+  <span className={css(`${styles.tabs}__item-icon`, className)} {...props}>
     {children}
   </span>
 );

package/src/components/Tabs/Tabs.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
-import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
@@ -38,7 +37,7 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   /** Additional classes added to the tabs */
   className?: string;
   /** Tabs background color variant */
-  variant?: 'default';
+  variant?: 'default' | 'secondary';
   /** The index of the active tab */
   activeKey?: number | string;
   /** The index of the default active tab. Set this for uncontrolled Tabs */
@@ -55,8 +54,8 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   id?: string;
   /** Enables the filled tab list layout */
   isFilled?: boolean;
-  /** Enables secondary tab styling */
-  isSecondary?: boolean;
+  /** Enables subtab tab styling */
+  isSubtab?: boolean;
   /** Enables box styling to the tab component */
   isBox?: boolean;
   /** Enables vertical tab styling */
@@ -119,7 +118,7 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
 
 const variantStyle = {
   default: '',
-  light300: styles.modifiers.colorSchemeLight_300
+  secondary: styles.modifiers.secondary
 };
 
 interface TabsState {
@@ -177,7 +176,7 @@ class Tabs extends React.Component<TabsProps, TabsState> {
     activeKey: 0,
     onSelect: () => undefined as any,
     isFilled: false,
-    isSecondary: false,
+    isSubtab: false,
     isVertical: false,
     isBox: false,
     hasNoBorderBottom: false,
@@ -247,7 +246,6 @@ class Tabs extends React.Component<TabsProps, TabsState> {
       if (container && !this.props.isVertical && !isOverflowHorizontal) {
         // get first element and check if it is in view
         const overflowOnLeft = !isElementInView(container, container.firstChild as HTMLElement, false);
-
         // get last element and check if it is in view
         const overflowOnRight = !isElementInView(container, container.lastChild as HTMLElement, false);
 
@@ -392,7 +390,7 @@ class Tabs extends React.Component<TabsProps, TabsState> {
       defaultActiveKey,
       id,
       isFilled,
-      isSecondary,
+      isSubtab,
       isVertical,
       isBox,
       hasNoBorderBottom,
@@ -473,7 +471,7 @@ class Tabs extends React.Component<TabsProps, TabsState> {
           className={css(
             styles.tabs,
             isFilled && styles.modifiers.fill,
-            isSecondary && styles.modifiers.secondary,
+            isSubtab && styles.modifiers.subtab,
             isVertical && styles.modifiers.vertical,
             isVertical && expandable && formatBreakpointMods(expandable, styles),
             isVertical && expandable && isExpandedLocal && styles.modifiers.expanded,
@@ -518,33 +516,35 @@ class Tabs extends React.Component<TabsProps, TabsState> {
             </GenerateId>
           )}
           {renderScrollButtons && (
-            <button
-              type="button"
-              className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
-              aria-label={backScrollAriaLabel || leftScrollAriaLabel}
-              onClick={this.scrollBack}
-              disabled={disableBackScrollButton}
-              aria-hidden={disableBackScrollButton}
-              ref={this.leftScrollButtonRef}
-            >
-              <AngleLeftIcon />
-            </button>
+            <div className={css(styles.tabsScrollButton)}>
+              <Button
+                aria-label={backScrollAriaLabel || leftScrollAriaLabel}
+                onClick={this.scrollBack}
+                isDisabled={disableBackScrollButton}
+                aria-hidden={disableBackScrollButton}
+                ref={this.leftScrollButtonRef}
+                variant="plain"
+              >
+                <AngleLeftIcon />
+              </Button>
+            </div>
           )}
           <ul className={css(styles.tabsList)} ref={this.tabList} onScroll={this.handleScrollButtons} role="tablist">
             {isOverflowHorizontal ? filteredChildrenWithoutOverflow : filteredChildren}
             {hasOverflowTab && <OverflowTab overflowingTabs={overflowingTabProps} {...overflowObjectProps} />}
           </ul>
           {renderScrollButtons && (
-            <button
-              type="button"
-              className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
-              aria-label={forwardScrollAriaLabel || rightScrollAriaLabel}
-              onClick={this.scrollForward}
-              disabled={disableForwardScrollButton}
-              aria-hidden={disableForwardScrollButton}
-            >
-              <AngleRightIcon />
-            </button>
+            <div className={css(styles.tabsScrollButton)}>
+              <Button
+                aria-label={forwardScrollAriaLabel || rightScrollAriaLabel}
+                onClick={this.scrollForward}
+                isDisabled={disableForwardScrollButton}
+                aria-hidden={disableForwardScrollButton}
+                variant="plain"
+              >
+                <AngleRightIcon />
+              </Button>
+            </div>
           )}
           {onAdd !== undefined && (
             <span className={css(styles.tabsAdd)}>

package/src/components/Tabs/TabsContext.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 export interface TabsContextProps {
-  variant: 'default' | 'light300';
+  variant: 'default' | 'secondary';
   mountOnEnter: boolean;
   unmountOnExit: boolean;
   localActiveKey: string | number;

package/src/components/Tabs/__tests__/Generated/__snapshots__/TabContent.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`TabContent should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <section
     aria-label="string"
-    class="pf-v5-c-tab-content string default"
+    class="pf-v5-c-tab-content string"
     data-ouia-component-type="PF5/TabContent"
     data-ouia-safe="true"
     id="string"

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

@@ -251,19 +251,19 @@ test('should render filled tabs', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('should render secondary tabs', () => {
+test('should render subtabs', () => {
   const { asFragment } = render(
     <Tabs id="primarieTabs">
       <Tab eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
-        <Tabs isSecondary id="secondaryTabs">
-          <Tab id="secondary tab1" eventKey={10} title={<TabTitleText>"Secondary Tab item 1"</TabTitleText>}>
-            Secondary Tab 1 section
+        <Tabs isSubtab id="subtabs">
+          <Tab id="subtab1" eventKey={10} title={<TabTitleText>"Subtab item 1"</TabTitleText>}>
+            Subtab 1 section
           </Tab>
-          <Tab id="secondary tab2" eventKey={11} title={<TabTitleText>"Secondary Tab item 2"</TabTitleText>}>
-            Secondary Tab 2 section
+          <Tab id="subtab2" eventKey={11} title={<TabTitleText>"Subtab item 2"</TabTitleText>}>
+            Subtab 2 section
           </Tab>
-          <Tab id="secondary tab3" eventKey={12} title={<TabTitleText>"Secondary Tab item 3"</TabTitleText>}>
-            Secondary Tab 3 section
+          <Tab id="subtab3" eventKey={12} title={<TabTitleText>"Subtab item 3"</TabTitleText>}>
+            Subtab 3 section
           </Tab>
         </Tabs>
       </Tab>
@@ -338,9 +338,9 @@ test('should render tabs with separate content', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('should render box tabs of light variant', () => {
+test('should render box tabs of secondary variant', () => {
   const { asFragment } = render(
-    <Tabs id="boxLightVariantTabs" isBox variant="light300">
+    <Tabs id="boxSecondaryVariantTabs" isBox variant="secondary">
       <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 render secondary tabs with no bottom border when passed hasNoBorderBottom', () => {
+test('should render subtabs with no bottom border when passed hasNoBorderBottom', () => {
   render(
-    <Tabs isSecondary hasNoBorderBottom id="noBottomBorderTabs" aria-label="Secondary bottom border">
+    <Tabs isSubtab hasNoBorderBottom id="noBottomBorderTabs" aria-label="Subtab bottom border">
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         Tab 1 section
       </Tab>
@@ -387,14 +387,14 @@ test('should render secondary tabs with no bottom border when passed hasNoBorder
     </Tabs>
   );
 
-  const tabsContainer = screen.queryByLabelText('Secondary bottom border');
+  const tabsContainer = screen.queryByLabelText('Subtab bottom border');
 
   expect(tabsContainer).toHaveClass('pf-m-no-border-bottom');
 });
 
-test('should render secondary tabs with border bottom', () => {
+test('should render subtabs with border bottom', () => {
   render(
-    <Tabs isSecondary id="bottomBorderTabs" aria-label="Secondary bottom border">
+    <Tabs isSubtab id="bottomBorderTabs" aria-label="Subtab bottom border">
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         Tab 1 section
       </Tab>
@@ -407,7 +407,7 @@ test('should render secondary tabs with border bottom', () => {
     </Tabs>
   );
 
-  const tabsContainer = screen.queryByLabelText('Secondary bottom border');
+  const tabsContainer = screen.queryByLabelText('Subtab bottom border');
 
   expect(tabsContainer).not.toHaveClass('pf-m-no-border-bottom');
 });