@patternfly/react-core 6.0.0-alpha.57 → 6.0.0-alpha.59

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.56","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.58","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.56","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.58","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.56","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.58","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.57",
+  "version": "6.0.0-alpha.59",
   "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",
@@ -47,15 +47,15 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.20",
-    "@patternfly/react-styles": "^6.0.0-alpha.20",
-    "@patternfly/react-tokens": "^6.0.0-alpha.20",
+    "@patternfly/react-icons": "^6.0.0-alpha.21",
+    "@patternfly/react-styles": "^6.0.0-alpha.21",
+    "@patternfly/react-tokens": "^6.0.0-alpha.21",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.117",
+    "@patternfly/patternfly": "6.0.0-alpha.135",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -74,5 +74,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "b2e46fefe688b2809ccf36e1ca575867a0c82a78"
+  "gitHead": "6101cfe558acec0474dd1c0649e44c38bf01383f"
 }

package/src/components/Menu/Menu.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import breadcrumbStyles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
-import dropdownStyles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
 import { css } from '@patternfly/react-styles';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 import { MenuContext } from './MenuContext';
@@ -193,9 +192,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
 
     const parentMenu = this.activeMenu;
     const key = event.key;
-    const isFromBreadcrumb =
-      activeElement.classList.contains(breadcrumbStyles.breadcrumbLink) ||
-      activeElement.classList.contains(dropdownStyles.dropdownToggle);
+    const isFromBreadcrumb = activeElement.classList.contains(breadcrumbStyles.breadcrumbLink);
 
     if (key === ' ' || key === 'Enter') {
       event.preventDefault();
@@ -313,7 +310,6 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
             noHorizontalArrowHandling={
               document.activeElement &&
               (document.activeElement.classList.contains(breadcrumbStyles.breadcrumbLink) ||
-                document.activeElement.classList.contains(dropdownStyles.dropdownToggle) ||
                 document.activeElement.tagName === 'INPUT')
             }
             noEnterHandling

package/src/components/NotificationDrawer/NotificationDrawerHeader.tsx

@@ -3,8 +3,6 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/NotificationDrawer/notification-drawer';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-
-import { Text, TextVariants } from '../Text';
 import { Button, ButtonVariant } from '../Button';
 
 export interface NotificationDrawerHeaderProps extends React.HTMLProps<HTMLDivElement> {
@@ -38,9 +36,7 @@ export const NotificationDrawerHeader: React.FunctionComponent<NotificationDrawe
   ...props
 }: NotificationDrawerHeaderProps) => (
   <div {...props} className={css(styles.notificationDrawerHeader, className)}>
-    <Text component={TextVariants.h1} className={css(styles.notificationDrawerHeaderTitle)}>
-      {title}
-    </Text>
+    <h1 className={css(styles.notificationDrawerHeaderTitle)}>{title}</h1>
     {(customText !== undefined || count !== undefined) && (
       <span className={css(styles.notificationDrawerHeaderStatus)} aria-live="polite">
         {customText || `${count} ${unreadText}`}

package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerHeader.test.tsx.snap

@@ -7,10 +7,6 @@ exports[`NotificationDrawerHeader drawer header with count applied 1`] = `
   >
     <h1
       class="pf-v6-c-notification-drawer__header-title"
-      data-ouia-component-id="OUIA-Generated-Text-3"
-      data-ouia-component-type="PF6/Text"
-      data-ouia-safe="true"
-      data-pf-content="true"
     >
       Notifications
     </h1>
@@ -31,10 +27,6 @@ exports[`NotificationDrawerHeader drawer header with custom unread text applied
   >
     <h1
       class="pf-v6-c-notification-drawer__header-title"
-      data-ouia-component-id="OUIA-Generated-Text-5"
-      data-ouia-component-type="PF6/Text"
-      data-ouia-safe="true"
-      data-pf-content="true"
     >
       Notifications
     </h1>
@@ -55,10 +47,6 @@ exports[`NotificationDrawerHeader drawer header with title applied 1`] = `
   >
     <h1
       class="pf-v6-c-notification-drawer__header-title"
-      data-ouia-component-id="OUIA-Generated-Text-4"
-      data-ouia-component-type="PF6/Text"
-      data-ouia-safe="true"
-      data-pf-content="true"
     >
       Some Title
     </h1>
@@ -73,10 +61,6 @@ exports[`NotificationDrawerHeader renders with PatternFly Core styles 1`] = `
   >
     <h1
       class="pf-v6-c-notification-drawer__header-title"
-      data-ouia-component-id="OUIA-Generated-Text-1"
-      data-ouia-component-type="PF6/Text"
-      data-ouia-safe="true"
-      data-pf-content="true"
     >
       Notifications
     </h1>

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

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import { Page } from '../Page';
-import { PageHeader } from '../../../deprecated/components/PageHeader';
 import { PageSidebar } from '../PageSidebar';
 import { PageSidebarBody } from '../PageSidebarBody';
 import { PageSection } from '../PageSection';
@@ -13,6 +12,7 @@ import { SkipToContent } from '../../SkipToContent';
 import { PageBreadcrumb } from '../PageBreadcrumb';
 import { PageNavigation } from '../PageNavigation';
 import { PageGroup } from '../PageGroup';
+import { Masthead } from '../../Masthead';
 
 const props = {
   'aria-label': 'Page layout',
@@ -22,7 +22,7 @@ const props = {
 
 describe('Page', () => {
   test('Check page vertical layout example against snapshot', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" onNavToggle={() => undefined} />;
+    const Header = <Masthead />;
     const Sidebar = (
       <PageSidebar isSidebarOpen>
         <PageSidebarBody>Navigation</PageSidebarBody>
@@ -39,7 +39,7 @@ describe('Page', () => {
   });
 
   test('Check dark page against snapshot', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" onNavToggle={() => undefined} />;
+    const Header = <Masthead />;
     const Sidebar = (
       <PageSidebar isSidebarOpen>
         <PageSidebarBody>Navigation</PageSidebarBody>
@@ -56,7 +56,7 @@ describe('Page', () => {
   });
 
   test('Check page horizontal layout example against snapshot', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Header = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
@@ -69,7 +69,7 @@ describe('Page', () => {
   });
 
   test('Check page to verify breadcrumb is created', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Header = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = () => (
       <Breadcrumb>
@@ -93,7 +93,7 @@ describe('Page', () => {
   });
 
   test('Verify sticky top breadcrumb on all height breakpoints', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Header = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = () => (
       <Breadcrumb>
@@ -123,7 +123,7 @@ describe('Page', () => {
   });
 
   test('Verify sticky bottom breadcrumb on all height breakpoints', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Header = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = () => (
       <Breadcrumb>
@@ -155,7 +155,7 @@ describe('Page', () => {
   });
 
   test('Check page to verify breadcrumb is created - PageBreadcrumb syntax', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Header = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
@@ -179,7 +179,7 @@ describe('Page', () => {
   });
 
   test('Verify sticky top breadcrumb on all height breakpoints - PageBreadcrumb syntax', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Header = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
@@ -203,7 +203,7 @@ describe('Page', () => {
   });
 
   test('Sticky bottom breadcrumb on all height breakpoints - PageBreadcrumb syntax', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Header = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
@@ -229,7 +229,7 @@ describe('Page', () => {
   });
 
   test('Check page to verify nav is created - PageNavigation syntax', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Header = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
@@ -256,7 +256,7 @@ describe('Page', () => {
   });
 
   test('Check page to verify grouped nav and breadcrumb - new components syntax', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Header = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
@@ -295,7 +295,7 @@ describe('Page', () => {
   });
 
   test('Check page to verify grouped nav and breadcrumb - old / props syntax', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Header = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const crumb = (
       <PageBreadcrumb>
@@ -349,7 +349,7 @@ describe('Page', () => {
   });
 
   test('Check page to verify skip to content points to main content region', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Header = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = (
       <Breadcrumb>

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

@@ -8,19 +8,8 @@ exports[`Page Check dark page against snapshot 1`] = `
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -58,24 +47,8 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v6-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -107,24 +80,8 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v6-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -260,24 +217,8 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v6-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -413,24 +354,8 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v6-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -648,24 +573,8 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v6-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -890,24 +799,8 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v6-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -1032,24 +925,8 @@ exports[`Page Check page to verify skip to content points to main content region
       </a>
     </div>
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v6-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -1186,19 +1063,8 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -1236,24 +1102,8 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v6-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -1389,24 +1239,8 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v6-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -1542,24 +1376,8 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v6-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -1695,24 +1513,8 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v6-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"

package/src/components/Skeleton/examples/Skeleton.md

@@ -5,37 +5,42 @@ cssPrefix: pf-v5-c-skeleton
 propComponents: ['Skeleton']
 ---
 
-import global_FontSize_4xl from '@patternfly/react-tokens/dist/esm/global_FontSize_4xl';
-import global_FontSize_3xl from '@patternfly/react-tokens/dist/esm/global_FontSize_3xl';
-import global_FontSize_2xl from '@patternfly/react-tokens/dist/esm/global_FontSize_2xl';
-import global_FontSize_xl from '@patternfly/react-tokens/dist/esm/global_FontSize_xl';
-import global_FontSize_lg from '@patternfly/react-tokens/dist/esm/global_FontSize_lg';
-import global_FontSize_md from '@patternfly/react-tokens/dist/esm/global_FontSize_md';
-import global_FontSize_sm from '@patternfly/react-tokens/dist/esm/global_FontSize_sm';
+import global_font_size_4xl from '@patternfly/react-tokens/dist/esm/global_font_size_4xl';
+import global_font_size_3xl from '@patternfly/react-tokens/dist/esm/global_font_size_3xl';
+import global_font_size_2xl from '@patternfly/react-tokens/dist/esm/global_font_size_2xl';
+import global_font_size_xl from '@patternfly/react-tokens/dist/esm/global_font_size_xl';
+import global_font_size_lg from '@patternfly/react-tokens/dist/esm/global_font_size_lg';
+import global_font_size_md from '@patternfly/react-tokens/dist/esm/global_font_size_md';
+import global_font_size_sm from '@patternfly/react-tokens/dist/esm/global_font_size_sm';
 
 ## Examples
 
 ### Default
 
 ```ts file="./SkeletonDefault.tsx"
+
 ```
 
 ### Percentage widths
 
 ```ts file="./SkeletonPercentageWidth.tsx"
+
 ```
 
 ### Percentage heights
 
 ```ts file="./SkeletonPercentageHeight.tsx"
+
 ```
 
 ### Text modifiers
 
 ```ts file="./SkeletonText.tsx"
+
 ```
 
 ### Shapes
 
 ```ts file="./SkeletonShapes.tsx"
+
 ```