@patternfly/react-core 5.3.0-prerelease.20 → 5.3.0-prerelease.22

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

@@ -24,15 +24,27 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label variant="outline" href="#outline" onClose={() => Function.prototype}>
         Grey link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" onClick={() => logColor('grey')}>
         Grey clickable
       </Label>{' '}
       <Label variant="outline" onClick={() => logColor('grey')} onClose={() => Function.prototype}>
         Grey clickable removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Grey label with icon that overflows
+      </Label>{' '}
+      <Label variant="outline" isDisabled icon={<InfoCircleIcon />} href="#filled" onClose={() => Function.prototype}>
+        Grey link removable (disabled)
+      </Label>{' '}
+      <Label
+        variant="outline"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        onClick={() => logColor('grey')}
+        onClose={() => Function.prototype}
+      >
+        Grey clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -53,13 +65,13 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label variant="outline" color="blue" href="#outline" onClose={() => Function.prototype}>
         Blue link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" color="blue" onClick={() => logColor('blue')}>
         Blue clickable
       </Label>{' '}
       <Label variant="outline" color="blue" onClick={() => logColor('blue')} onClose={() => Function.prototype}>
         Blue clickable removable
-      </Label>
+      </Label>{' '}
       <Label
         variant="outline"
         color="blue"
@@ -68,6 +80,26 @@ export const LabelOutline: React.FunctionComponent = () => {
         textMaxWidth="16ch"
       >
         Blue label with icon that overflows
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="blue"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        href="#filled"
+        onClose={() => Function.prototype}
+      >
+        Blue link removable (disabled)
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="blue"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        onClick={() => logColor('blue')}
+        onClose={() => Function.prototype}
+      >
+        Blue clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -88,13 +120,13 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label variant="outline" color="green" href="#outline" onClose={() => Function.prototype}>
         Green link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" color="green" onClick={() => logColor('green')}>
         Green clickable
       </Label>{' '}
       <Label variant="outline" color="green" onClick={() => logColor('green')} onClose={() => Function.prototype}>
         Green clickable removable
-      </Label>
+      </Label>{' '}
       <Label
         variant="outline"
         color="green"
@@ -103,6 +135,26 @@ export const LabelOutline: React.FunctionComponent = () => {
         textMaxWidth="16ch"
       >
         Green label with icon that overflows
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="green"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        href="#filled"
+        onClose={() => Function.prototype}
+      >
+        Green link removable (disabled)
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="green"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        onClick={() => logColor('green')}
+        onClose={() => Function.prototype}
+      >
+        Green clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -123,13 +175,13 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label variant="outline" color="orange" href="#outline" onClose={() => Function.prototype}>
         Orange link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" color="orange" onClick={() => logColor('orange')}>
         Orange clickable
       </Label>{' '}
       <Label variant="outline" color="orange" onClick={() => logColor('orange')} onClose={() => Function.prototype}>
         Orange clickable removable
-      </Label>
+      </Label>{' '}
       <Label
         variant="outline"
         color="orange"
@@ -138,6 +190,26 @@ export const LabelOutline: React.FunctionComponent = () => {
         textMaxWidth="16ch"
       >
         Orange label with icon that overflows
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="orange"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        href="#filled"
+        onClose={() => Function.prototype}
+      >
+        Orange link removable (disabled)
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="orange"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        onClick={() => logColor('orange')}
+        onClose={() => Function.prototype}
+      >
+        Orange clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -158,13 +230,13 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label variant="outline" color="red" href="#outline" onClose={() => Function.prototype}>
         Red link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" color="red" onClick={() => logColor('red')}>
         Red clickable
       </Label>{' '}
       <Label variant="outline" color="red" onClick={() => logColor('red')} onClose={() => Function.prototype}>
         Red clickable removable
-      </Label>
+      </Label>{' '}
       <Label
         variant="outline"
         color="red"
@@ -173,6 +245,26 @@ export const LabelOutline: React.FunctionComponent = () => {
         textMaxWidth="16ch"
       >
         Red label with icon that overflows
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="red"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        href="#filled"
+        onClose={() => Function.prototype}
+      >
+        Red link removable (disabled)
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="red"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        onClick={() => logColor('red')}
+        onClose={() => Function.prototype}
+      >
+        Red clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -193,13 +285,13 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label variant="outline" color="purple" href="#outline" onClose={() => Function.prototype}>
         Purple link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" color="purple" onClick={() => logColor('purple')}>
         Purple clickable
       </Label>{' '}
       <Label variant="outline" color="purple" onClick={() => logColor('purple')} onClose={() => Function.prototype}>
         Purple clickable removable
-      </Label>
+      </Label>{' '}
       <Label
         variant="outline"
         color="purple"
@@ -208,6 +300,26 @@ export const LabelOutline: React.FunctionComponent = () => {
         textMaxWidth="16ch"
       >
         Purple label with icon that overflows
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="purple"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        href="#filled"
+        onClose={() => Function.prototype}
+      >
+        Purple link removable (disabled)
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="purple"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        onClick={() => logColor('purple')}
+        onClose={() => Function.prototype}
+      >
+        Purple clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -228,13 +340,13 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label variant="outline" color="cyan" href="#outline" onClose={() => Function.prototype}>
         Cyan link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" color="cyan" onClick={() => logColor('cyan')}>
         Cyan clickable
       </Label>{' '}
       <Label variant="outline" color="cyan" onClick={() => logColor('cyan')} onClose={() => Function.prototype}>
         Cyan clickable removable
-      </Label>
+      </Label>{' '}
       <Label
         variant="outline"
         color="cyan"
@@ -243,6 +355,26 @@ export const LabelOutline: React.FunctionComponent = () => {
         textMaxWidth="16ch"
       >
         Cyan label with icon that overflows
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="cyan"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        href="#filled"
+        onClose={() => Function.prototype}
+      >
+        Cyan link removable (disabled)
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="cyan"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        onClick={() => logColor('cyan')}
+        onClose={() => Function.prototype}
+      >
+        Cyan clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -263,13 +395,13 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label variant="outline" color="gold" href="#outline" onClose={() => Function.prototype}>
         Gold link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" color="gold" onClick={() => logColor('gold')}>
         Gold clickable
       </Label>{' '}
       <Label variant="outline" color="gold" onClick={() => logColor('gold')} onClose={() => Function.prototype}>
         Gold clickable removable
-      </Label>
+      </Label>{' '}
       <Label
         variant="outline"
         color="gold"
@@ -278,6 +410,26 @@ export const LabelOutline: React.FunctionComponent = () => {
         textMaxWidth="16ch"
       >
         Gold label with icon that overflows
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="gold"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        href="#filled"
+        onClose={() => Function.prototype}
+      >
+        Gold link removable (disabled)
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="gold"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        onClick={() => logColor('gold')}
+        onClose={() => Function.prototype}
+      >
+        Gold clickable removable (disabled)
       </Label>
     </React.Fragment>
   );

package/src/demos/RTL/RTL.md

@@ -26,6 +26,6 @@ This demonstrates how the UI adapts to the writing mode of the page.
 
 ### Paginated table
 
-```js file="./examples/PaginatedTable.jsx" isFullscreen
+```js file="./examples/PaginatedTable.tsx" isFullscreen
 
 ```

package/src/demos/RTL/examples/{PaginatedTable.jsx → PaginatedTable.tsx}

@@ -58,10 +58,22 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 import HandPaperIcon from '@patternfly/react-icons/dist/esm/icons/hand-paper-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 
-export const PaginatedTableAction = () => {
-  const [translation, setTranslation] = React.useState(translationsEn);
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(10);
+interface Row {
+  name: string;
+  status: string;
+  location: string;
+  lastModified: string;
+  url: string;
+}
+
+interface Translation {
+  [key: string]: any;
+}
+
+export const PaginatedTableAction: React.FunctionComponent = () => {
+  const [translation, setTranslation] = React.useState<Translation>(translationsEn);
+  const [page, setPage] = React.useState<number>(1);
+  const [perPage, setPerPage] = React.useState<number>(10);
 
   const columns = [
     translation.table.columns.servers,
@@ -71,13 +83,13 @@ export const PaginatedTableAction = () => {
     translation.table.columns.url
   ];
 
-  const numRows = 25;
-  const getRandomInteger = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+  const numRows: number = 25;
+  const getRandomInteger = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min;
   const createRows = () => {
-    const rows = [];
+    const rows: Row[] = [];
     for (let i = 0; i < numRows; i++) {
       const num = i + 1;
-      const rowObj = {
+      const rowObj: Row = {
         name: translation.table.rows.node + num,
         status: [
           translation.table.rows.status.stopped,
@@ -110,14 +122,14 @@ export const PaginatedTableAction = () => {
 
   const rows = createRows();
   const [managedRows, setManagedRows] = React.useState(rows);
-  const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10));
-  const [isDirRTL, setIsDirRTL] = React.useState(false);
+  const [paginatedRows, setPaginatedRows] = React.useState<Row[]>(rows.slice(0, 10));
+  const [isDirRTL, setIsDirRTL] = React.useState<boolean>(false);
 
-  const capitalize = (input) => input[0].toUpperCase() + input.substring(1);
+  const capitalize = (input: string) => input[0].toUpperCase() + input.substring(1);
 
   const switchTranslation = () => {
     setIsDirRTL((prevIsDirRTL) => !prevIsDirRTL);
-    setTranslation((prevTranslation) => (prevTranslation === translationsEn ? translationsHe : translationsEn));
+    setTranslation((prevTranslation: string) => (prevTranslation === translationsEn ? translationsHe : translationsEn));
   };
 
   React.useEffect(() => {
@@ -133,17 +145,29 @@ export const PaginatedTableAction = () => {
 
   // Pagination logic
 
-  const handleSetPage = (_evt, newPage, _perPage, startIdx, endIdx) => {
+  const handleSetPage = (
+    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPage: number,
+    _perPage: number | undefined,
+    startIdx: number | undefined,
+    endIdx: number | undefined
+  ) => {
     setPaginatedRows(managedRows.slice(startIdx, endIdx));
     setPage(newPage);
   };
 
-  const handlePerPageSelect = (_evt, newPerPage, _newPage, startIdx, endIdx) => {
+  const handlePerPageSelect = (
+    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    _newPage: number,
+    startIdx: number | undefined,
+    endIdx: number | undefined
+  ) => {
     setPaginatedRows(managedRows.slice(startIdx, endIdx));
     setPerPage(newPerPage);
   };
 
-  const renderPagination = (variant) => {
+  const renderPagination = (variant: PaginationVariant) => {
     const { pagination } = translation;
 
     return (
@@ -181,7 +205,7 @@ export const PaginatedTableAction = () => {
     }
   };
 
-  const renderLabel = (labelText) => {
+  const renderLabel = (labelText: string) => {
     switch (labelText) {
       case 'Running':
       case 'רץ':
@@ -280,9 +304,9 @@ export const PaginatedTableAction = () => {
     </PageSidebar>
   );
 
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState<boolean>(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState<boolean>(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState<boolean>(false);
 
   const kebabDropdownItems = (
     <>
@@ -434,15 +458,17 @@ export const PaginatedTableAction = () => {
     </Masthead>
   );
 
+  const breadcrumbItemsLength = Object.keys(breadcrumbItems).length;
+
   return (
     <React.Fragment>
       <Page sidebar={sidebar} header={masthead} isManagedSidebar>
         <PageBreadcrumb>
           <Breadcrumb aria-label={translation.breadcrumbs.ariaLabel || undefined}>
-            {Object.keys(breadcrumbItems).map((key, idx, arr) => (
+            {Object.keys(breadcrumbItems).map((key: string, idx: number, arr: string[]) => (
               <BreadcrumbItem key={idx} isActive={arr.length - 1 === idx} to={`${breadcrumbItems[key].url}`}>
                 {translation.breadcrumbs[key]}
-                {breadcrumbItems.length}
+                {breadcrumbItemsLength}
               </BreadcrumbItem>
             ))}
           </Breadcrumb>
@@ -465,7 +491,7 @@ export const PaginatedTableAction = () => {
                 </Tr>
               </Thead>
               <Tbody>
-                {paginatedRows.map((row, rowIndex) => (
+                {paginatedRows.map((row: Row, rowIndex: number) => (
                   <Tr key={rowIndex}>
                     <>
                       {Object.entries(row).map(([key, value]) => {