@patternfly/react-core 5.0.0-alpha.90 → 5.0.0-alpha.91

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

@@ -13,26 +13,15 @@ jest.mock('../../Tooltip', () => ({
 }));
 
 test('renders with class pf-c-truncate', () => {
-  render(
-    <Truncate
-      content={''}
-      aria-label='test-id'
-    />
-  );
+  render(<Truncate content={''} aria-label="test-id" />);
 
   const test = screen.getByLabelText('test-id');
 
-  expect(test).toHaveClass('pf-c-truncate');
+  expect(test).toHaveClass('pf-v5-c-truncate');
 });
 
 test('renders with custom class name passed via prop', () => {
-  render(
-    <Truncate
-      content={''}
-      aria-label='test-id'
-      className='custom-classname'
-    />
-  );
+  render(<Truncate content={''} aria-label="test-id" className="custom-classname" />);
 
   const test = screen.getByLabelText('test-id');
 
@@ -40,12 +29,7 @@ test('renders with custom class name passed via prop', () => {
 });
 
 test('renders truncate with empty content', () => {
-  render(
-    <Truncate
-      content={''}
-      aria-label='test-id'
-    />
-  );
+  render(<Truncate content={''} aria-label="test-id" />);
 
   const test = screen.getByLabelText('test-id');
 
@@ -53,12 +37,7 @@ test('renders truncate with empty content', () => {
 });
 
 test('renders truncate with content', () => {
-  render(
-    <Truncate
-      content={'Test'}
-      aria-label='test-id'
-    />
-  );
+  render(<Truncate content={'Test'} aria-label="test-id" />);
 
   const test = screen.getByLabelText('test-id');
 
@@ -66,16 +45,12 @@ test('renders truncate with content', () => {
 });
 
 test('only renders pf-c-truncate__start with default position', () => {
-  render(
-    <Truncate
-      content={'Testing truncate content'}
-    />
-  );
+  render(<Truncate content={'Testing truncate content'} />);
 
   const start = screen.getByText('Testing truncate content');
 
-  expect(start).toHaveClass('pf-c-truncate__start');
-  expect(start).not.toHaveClass('pf-c-truncate__end');
+  expect(start).toHaveClass('pf-v5-c-truncate__start');
+  expect(start).not.toHaveClass('pf-v5-c-truncate__end');
 });
 
 test('renders default truncation', () => {
@@ -105,11 +80,11 @@ test('renders middle truncation', () => {
 
   const start = screen.getByText('Vestibulum interdum risus et enim faucibus, sit amet molestie est ac');
 
-  expect(start).toHaveClass('pf-c-truncate__start');
+  expect(start).toHaveClass('pf-v5-c-truncate__start');
 
   const end = screen.getByText('cumsan.');
 
-  expect(end).toHaveClass('pf-c-truncate__end');
+  expect(end).toHaveClass('pf-v5-c-truncate__end');
 });
 
 test('renders different content when trailingNumChars is passed with middle truncate', () => {
@@ -117,39 +92,29 @@ test('renders different content when trailingNumChars is passed with middle trun
     <Truncate
       content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
       trailingNumChars={3}
-      position='middle'
+      position="middle"
     />
   );
 
   const start = screen.getByText('Vestibulum interdum risus et enim faucibus, sit amet molestie est accums');
 
-  expect(start).toHaveClass('pf-c-truncate__start');
+  expect(start).toHaveClass('pf-v5-c-truncate__start');
 
   const end = screen.getByText('an.');
 
-  expect(end).toHaveClass('pf-c-truncate__end');
+  expect(end).toHaveClass('pf-v5-c-truncate__end');
 });
 
 test('renders tooltip position', () => {
-  render(
-    <Truncate
-      content={''}
-      tooltipPosition='top'
-    />
-  );
+  render(<Truncate content={''} tooltipPosition="top" />);
 
   const input = screen.getByText('position: top');
-  
+
   expect(input).toBeVisible();
 });
 
 test('renders tooltip content', () => {
-  render(
-    <Truncate
-      content={'Another Tooltip'}
-      tooltipPosition='top'
-    />
-  );
+  render(<Truncate content={'Another Tooltip'} tooltipPosition="top" />);
 
   const input = screen.getByText('Test Another Tooltip');
 
@@ -157,13 +122,7 @@ test('renders tooltip content', () => {
 });
 
 test('renders with inherited element props spread to the component', () => {
-  render(
-    <Truncate
-      content={'Test'}
-      data-testid="test-id"
-      aria-label="labelling-id"
-    />
-  );
+  render(<Truncate content={'Test'} data-testid="test-id" aria-label="labelling-id" />);
 
   expect(screen.getByTestId('test-id')).toHaveAccessibleName('labelling-id');
 });

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

@@ -14,10 +14,10 @@ exports[`renders default truncation 1`] = `
       position: top
     </p>
     <span
-      class="pf-c-truncate"
+      class="pf-v5-c-truncate"
     >
       <span
-        class="pf-c-truncate__start"
+        class="pf-v5-c-truncate__start"
       >
         Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
       </span>
@@ -40,10 +40,10 @@ exports[`renders start truncation with &lrm; at end 1`] = `
       position: top
     </p>
     <span
-      class="pf-c-truncate"
+      class="pf-v5-c-truncate"
     >
       <span
-        class="pf-c-truncate__end"
+        class="pf-v5-c-truncate__end"
       >
         Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.‎
       </span>

package/src/components/Truncate/examples/TruncateExamples.css

@@ -4,6 +4,6 @@
   overflow: auto;
   min-width: 161px;
   max-width: 100%;
-  padding: var(--pf-global--spacer--md);
-  border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
+  padding: var(--pf-v5-global--spacer--md);
+  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
 }

package/src/components/Wizard/WizardNavItem.tsx

@@ -96,7 +96,7 @@ export const WizardNavItem = ({
           ? { tabIndex: isDisabled ? -1 : undefined, href, target }
           : { disabled: isDisabled })}
         {...(id && { id: id.toString() })}
-        onClick={e => {
+        onClick={(e) => {
           e.stopPropagation();
           isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onClick?.(e, stepIndex);
         }}
@@ -125,8 +125,8 @@ export const WizardNavItem = ({
             {content}
             {/* TODO, patternfly/patternfly#5142 */}
             {status === WizardNavItemStatus.Error && (
-              <span style={{ marginLeft: 'var(--pf-global--spacer--sm)' }}>
-                <ExclamationCircleIcon color="var(--pf-global--danger-color--100)" />
+              <span style={{ marginLeft: 'var(--pf-v5-global--spacer--sm)' }}>
+                <ExclamationCircleIcon color="var(--pf-v5-global--danger-color--100)" />
               </span>
             )}
           </>

package/src/components/Wizard/examples/WizardStepDrawerContent.tsx

@@ -39,13 +39,13 @@ const StepContentWithDrawer: React.FunctionComponent = () => {
         }
       >
         <Flex
-          className="pf-c-wizard__main-body"
+          className="pf-v5-c-wizard__main-body"
           direction={{ default: 'column' }}
           spaceItems={{ default: 'spaceItemsLg' }}
           height="100%"
         >
           {!isDrawerExpanded && (
-            <Button isInline variant="link" onClick={() => setIsDrawerExpanded(prevExpanded => !prevExpanded)}>
+            <Button isInline variant="link" onClick={() => setIsDrawerExpanded((prevExpanded) => !prevExpanded)}>
               Open drawer
             </Button>
           )}

package/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx

@@ -32,7 +32,7 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
 
   const tick = React.useCallback(() => {
     if (percentValidated < 100) {
-      setPercentValidated(prevValue => prevValue + 20);
+      setPercentValidated((prevValue) => prevValue + 20);
     }
   }, [percentValidated]);
 
@@ -45,7 +45,7 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
   }, [tick]);
 
   return (
-    <div className="pf-l-bullseye">
+    <div className="pf-v5-l-bullseye">
       <EmptyState variant="lg">
         <EmptyStateHeader
           headingLevel="h4"
@@ -183,7 +183,7 @@ export const WizardValidateOnButtonPress: React.FunctionComponent = () => {
         )}
         <SampleForm
           value={ageValue}
-          setValue={value => setAgeValue(value)}
+          setValue={(value) => setAgeValue(value)}
           isValid={!hasErrorOnSubmit || isFirstStepValid}
           setIsValid={setIsFirstStepValid}
         />

package/src/components/Wizard/examples/WizardWithCustomNavItem.tsx

@@ -10,7 +10,7 @@ export const WizardWithCustomNavItem: React.FunctionComponent = () => (
       id="custom-nav-item-second-step"
       name="Step 2"
       navItem={{
-        content: <span style={{ color: 'var(--pf-global--default-color--200)' }}>Custom item</span>
+        content: <span style={{ color: 'var(--pf-v5-global--default-color--200)' }}>Custom item</span>
       }}
     >
       Step 2 content with a custom navigation item

package/src/components/Wizard/examples/WizardWithSubmitProgress.tsx

@@ -35,7 +35,7 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
   }, [tick]);
 
   return (
-    <div className="pf-l-bullseye">
+    <div className="pf-v5-l-bullseye">
       <EmptyState variant="lg">
         <EmptyStateHeader
           headingLevel="h4"

package/src/demos/Banner.md

@@ -35,12 +35,12 @@ class BannerDemo extends React.Component {
               justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
               flexWrap={{ default: 'nowrap' }}
             >
-              <div className="pf-u-display-none pf-u-display-block-on-lg">Localhost</div>
-              <div className="pf-u-display-none pf-u-display-block-on-lg">
+              <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Localhost</div>
+              <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">
                 This message is sticky to the top of the page.
               </div>
-              <div className="pf-u-display-none-on-lg">Drop some text on mobile, truncate if needed.</div>
-              <div className="pf-u-display-none pf-u-display-block-on-lg">Ned Username</div>
+              <div className="pf-v5-u-display-none-on-lg">Drop some text on mobile, truncate if needed.</div>
+              <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Ned Username</div>
             </Flex>
           </Banner>
           <PageSection variant={PageSectionVariants.light}>
@@ -105,12 +105,12 @@ class BannerDemo extends React.Component {
                 justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
                 flexWrap={{ default: 'nowrap' }}
               >
-                <div className="pf-u-display-none pf-u-display-block-on-lg">Localhost</div>
-                <div className="pf-u-display-none pf-u-display-block-on-lg">
+                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Localhost</div>
+                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">
                   This message is sticky to the top of the page.
                 </div>
-                <div className="pf-u-display-none-on-lg">Drop some text on mobile, truncate if needed.</div>
-                <div className="pf-u-display-none pf-u-display-block-on-lg">Ned Username</div>
+                <div className="pf-v5-u-display-none-on-lg">Drop some text on mobile, truncate if needed.</div>
+                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Ned Username</div>
               </Flex>
             </Banner>
           </FlexItem>
@@ -144,12 +144,12 @@ class BannerDemo extends React.Component {
                 justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
                 flexWrap={{ default: 'nowrap' }}
               >
-                <div className="pf-u-display-none pf-u-display-block-on-lg">Localhost</div>
-                <div className="pf-u-display-none pf-u-display-block-on-lg">
+                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Localhost</div>
+                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">
                   This message is sticky to the bottom of the page.
                 </div>
-                <div className="pf-u-display-none-on-lg">Drop some text on mobile, truncate if needed.</div>
-                <div className="pf-u-display-none pf-u-display-block-on-lg">Ned Username</div>
+                <div className="pf-v5-u-display-none-on-lg">Drop some text on mobile, truncate if needed.</div>
+                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Ned Username</div>
               </Flex>
             </Banner>
           </FlexItem>