fix(rtl-demo): update paginated table demo layout and status labels (#12491)

- Remove Card wrapper so toolbar and table render directly on the page
- Switch status labels from color variants to semantic LabelStatus props
- Fix button and label icons to use pf-v6-m-mirror-inline-rtl directly,
  removing the Icon wrapper that was overriding on-brand icon color tokens

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: andrew-ronaldson

packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx

@@ -6,16 +6,14 @@ import {
   BreadcrumbItem,
   Button,
   ButtonVariant,
-  Card,
   Content,
   Divider,
   Dropdown,
   DropdownGroup,
   DropdownItem,
   DropdownList,
-  Icon,
   Label,
-  LabelColor,
+  LabelStatus,
   Masthead,
   MastheadMain,
   MastheadLogo,
@@ -48,11 +46,11 @@ import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-i
 import ToolsIcon from '@patternfly/react-icons/dist/esm/icons/tools-icon';
 import RhUiRunningIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-running-icon';
 import RhUiClockFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clock-fill-icon';
+import RhUiStopCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-stop-circle-fill-icon';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import RhUiStopCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-stop-circle-fill-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import { rows } from '@patternfly/react-core/dist/esm/demos/sampleDataRTL';
@@ -180,42 +178,28 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
       case 'Running':
       case 'רץ':
         return (
-          <Label
-            color={LabelColor.green}
-            icon={
-              <Icon shouldMirrorRTL>
-                <RhUiRunningIcon />
-              </Icon>
-            }
-          >
+          <Label status={LabelStatus.success} icon={<RhUiRunningIcon className="pf-v6-m-mirror-inline-rtl" />}>
             {translation.table.rows.status.running}
           </Label>
         );
       case 'Stopped':
       case 'עצר':
         return (
-          <Label
-            icon={
-              <Icon shouldMirrorRTL>
-                <RhUiStopCircleFillIcon />
-              </Icon>
-            }
-            color={LabelColor.red}
-          >
+          <Label status={LabelStatus.danger} icon={<RhUiStopCircleFillIcon className="pf-v6-m-mirror-inline-rtl" />}>
             {translation.table.rows.status.stopped}
           </Label>
         );
       case 'Needs maintenance':
       case 'זקוק לתחזוקה':
         return (
-          <Label icon={<ToolsIcon />} color={LabelColor.blue}>
+          <Label status={LabelStatus.info} icon={<ToolsIcon />}>
             {translation.table.rows.status.needsMaintenance}
           </Label>
         );
       case 'Down':
       case 'מטה':
         return (
-          <Label icon={<RhUiClockFillIcon />} color={LabelColor.orange}>
+          <Label status={LabelStatus.warning} icon={<RhUiClockFillIcon />}>
             {translation.table.rows.status.down}
           </Label>
         );
@@ -229,11 +213,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
           <ToolbarItem>
             <Button
               variant="primary"
-              icon={
-                <Icon shouldMirrorRTL>
-                  <AlignRightIcon />
-                </Icon>
-              }
+              icon={<AlignRightIcon className="pf-v6-m-mirror-inline-rtl" />}
               iconPosition="end"
               onClick={switchTranslation}
             >
@@ -443,52 +423,50 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
           </Content>
         </PageSection>
         <PageSection>
-          <Card>
-            {toolbarItems}
-            <Table variant="compact" aria-label={translation.table.ariaLabel}>
-              <Thead>
-                <Tr>
-                  {columns.map((column, columnIndex) => (
-                    <Th key={columnIndex}>{column}</Th>
-                  ))}
-                </Tr>
-              </Thead>
-              <Tbody>
-                {paginatedRows.map((row: Row, rowIndex: number) => (
-                  <Tr key={rowIndex}>
-                    <>
-                      {Object.entries(row).map(([key, value]) => {
-                        if (key === 'status') {
-                          return (
-                            <Td key={key} width={15} dataLabel="Status">
-                              {renderLabel(value)}
-                            </Td>
-                          );
-                        } else if (key === 'url') {
-                          return (
-                            // Passing dir="rtl" forces truncation at the start of the URL,
-                            // resulting in the unique portion being visible regardless of language
-                            <Td key={key} dataLabel="URL" width={15}>
-                              <a href="#">
-                                <Truncate content={row.url} position={isDirRTL ? 'end' : 'start'} />
-                              </a>
-                            </Td>
-                          );
-                        } else {
-                          return (
-                            <Td key={key} dataLabel={key === 'lastModified' ? 'Last modified' : capitalize(key)}>
-                              {value}
-                            </Td>
-                          );
-                        }
-                      })}
-                    </>
-                  </Tr>
+          {toolbarItems}
+          <Table variant="compact" aria-label={translation.table.ariaLabel}>
+            <Thead>
+              <Tr>
+                {columns.map((column, columnIndex) => (
+                  <Th key={columnIndex}>{column}</Th>
                 ))}
-              </Tbody>
-            </Table>
-            {renderPagination(PaginationVariant.bottom)}
-          </Card>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {paginatedRows.map((row: Row, rowIndex: number) => (
+                <Tr key={rowIndex}>
+                  <>
+                    {Object.entries(row).map(([key, value]) => {
+                      if (key === 'status') {
+                        return (
+                          <Td key={key} width={15} dataLabel="Status">
+                            {renderLabel(value)}
+                          </Td>
+                        );
+                      } else if (key === 'url') {
+                        return (
+                          // Passing dir="rtl" forces truncation at the start of the URL,
+                          // resulting in the unique portion being visible regardless of language
+                          <Td key={key} dataLabel="URL" width={15}>
+                            <a href="#">
+                              <Truncate content={row.url} position={isDirRTL ? 'end' : 'start'} />
+                            </a>
+                          </Td>
+                        );
+                      } else {
+                        return (
+                          <Td key={key} dataLabel={key === 'lastModified' ? 'Last modified' : capitalize(key)}>
+                            {value}
+                          </Td>
+                        );
+                      }
+                    })}
+                  </>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+          {renderPagination(PaginationVariant.bottom)}
         </PageSection>
       </Page>
     </Fragment>