patternfly · tlabaj · Apr 5, 2023 · Mar 31, 2023 · Apr 5, 2023
diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx b/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx
@@ -2,6 +2,20 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { CodeEditor, Language } from '../CodeEditor';
 
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
 describe('CodeEditor', () => {
   beforeAll(() => {
     window.HTMLCanvasElement.prototype.getContext = () => ({} as any);

diff --git a/...act-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap b/...act-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
@@ -142,7 +142,7 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
         >
           <div
             class="react-monaco-editor-container"
-            data-keybinding-context="1"
+            data-keybinding-context="2"
             data-mode-id="plaintext"
             style="height: 400px;"
           >
@@ -199,6 +199,11 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
                       class="view-rulers"
                       role="presentation"
                     />
+                    <div
+                      aria-hidden="true"
+                      class="blockDecorations-container"
+                      role="presentation"
+                    />
                     <div
                       aria-hidden="true"
                       class="view-zones"
@@ -210,7 +215,7 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
                       class="view-lines monaco-mouse-cursor-text"
                       data-mprt="7"
                       role="presentation"
-                      style="position: absolute; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; width: 45px; height: 5px;"
+                      style="position: absolute; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; width: 54px; height: 19px;"
                     >
                       <div
                         class="view-line"
@@ -256,7 +261,7 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
                     aria-hidden="true"
                     class="decorationsOverviewRuler"
                     height="5"
-                    style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; right: 0px; width: 14px; height: 5px;"
+                    style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; right: 0px; width: 14px; height: 5px; display: block;"
                     width="14"
                   />
                   <div
@@ -267,7 +272,7 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
                   >
                     <div
                       class="slider"
-                      style="position: absolute; top: 0px; left: 0px; width: 14px; transform: translate3d(0px, 0px, 0px); contain: strict; height: 5px;"
+                      style="position: absolute; top: 0px; left: 0px; width: 14px; transform: translate3d(0px, 0px, 0px); contain: strict; height: 20px;"
                     />
                   </div>
                 </div>
@@ -286,7 +291,6 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
                   autocorrect="off"
                   class="inputarea monaco-mouse-cursor-text"
                   data-mprt="6"
-                  readonly="true"
                   role="textbox"
                   spellcheck="false"
                   style="font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; top: 0px; left: 0px; width: 1px; height: 1px;"
@@ -343,11 +347,6 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
                 class="overflowingContentWidgets"
                 data-mprt="2"
               />
-              <div
-                aria-hidden="true"
-                class="context-view"
-                style="display: none;"
-              />
             </div>
           </div>
         </div>
@@ -437,6 +436,11 @@ exports[`CodeEditor matches snapshot without props 1`] = `
                     class="view-rulers"
                     role="presentation"
                   />
+                  <div
+                    aria-hidden="true"
+                    class="blockDecorations-container"
+                    role="presentation"
+                  />
                   <div
                     aria-hidden="true"
                     class="view-zones"
@@ -448,7 +452,7 @@ exports[`CodeEditor matches snapshot without props 1`] = `
                     class="view-lines monaco-mouse-cursor-text"
                     data-mprt="7"
                     role="presentation"
-                    style="position: absolute; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; width: 26px; height: 5px;"
+                    style="position: absolute; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; width: 35px; height: 19px;"
                   >
                     <div
                       class="view-line"
@@ -490,7 +494,7 @@ exports[`CodeEditor matches snapshot without props 1`] = `
                   aria-hidden="true"
                   class="decorationsOverviewRuler"
                   height="5"
-                  style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; right: 0px; width: 14px; height: 5px;"
+                  style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; right: 0px; width: 14px; height: 5px; display: block;"
                   width="14"
                 />
                 <div
@@ -501,7 +505,7 @@ exports[`CodeEditor matches snapshot without props 1`] = `
                 >
                   <div
                     class="slider"
-                    style="position: absolute; top: 0px; left: 0px; width: 14px; transform: translate3d(0px, 0px, 0px); contain: strict; height: 5px;"
+                    style="position: absolute; top: 0px; left: 0px; width: 14px; transform: translate3d(0px, 0px, 0px); contain: strict; height: 20px;"
                   />
                 </div>
               </div>
@@ -576,11 +580,6 @@ exports[`CodeEditor matches snapshot without props 1`] = `
               class="overflowingContentWidgets"
               data-mprt="2"
             />
-            <div
-              aria-hidden="true"
-              class="context-view"
-              style="display: none;"
-            />
           </div>
         </div>
       </div>

diff --git a/packages/react-core/src/demos/CardDemos.md b/packages/react-core/src/demos/CardDemos.md
@@ -8,7 +8,7 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-ic
 import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, TimesCircleIcon, BellIcon } from '@patternfly/react-icons';
-import { TableComposable, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
+import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { Chart, ChartAxis, ChartGroup, ChartVoronoiContainer, ChartStack, ChartBar, ChartTooltip, ChartDonutThreshold, ChartDonutUtilization, ChartArea, ChartContainer, ChartLabel } from '@patternfly/react-charts';
 import chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100';
 import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300';
@@ -655,7 +655,7 @@ import {
   Popover,
   Title
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
+import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
 import BellIcon from '@patternfly/react-icons/dist/js/icons/bell-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
@@ -723,7 +723,7 @@ const StatusPlain: React.FunctionComponent = () => {
       <div>
         Components of the Control Panel are responsible for maintaining and reconciling the state of the cluster.
       </div>
-      <TableComposable variant="compact">
+      <Table variant="compact">
         <Thead>
           <Tr>
             <Th />
@@ -762,7 +762,7 @@ const StatusPlain: React.FunctionComponent = () => {
             </Tbody>
           );
         })}
-      </TableComposable>
+      </Table>
     </>
   );
 

diff --git a/packages/react-core/src/demos/Filters/FilterDemos.md b/packages/react-core/src/demos/Filters/FilterDemos.md
@@ -32,7 +32,7 @@ ToolbarToggleGroup
 } from '@patternfly/react-core';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
 ## Filtering demos
 

diff --git a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx
@@ -25,7 +25,7 @@ import {
   EmptyStateActions,
   EmptyStateIcon
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
@@ -649,7 +649,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -701,7 +701,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
             </Tr>
           )}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };
diff --git a/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx b/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx
@@ -15,7 +15,7 @@ import {
   Badge,
   Pagination
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 interface Repository {
@@ -375,7 +375,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -419,7 +419,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };
diff --git a/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx b/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx
@@ -24,7 +24,7 @@ import {
   EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
@@ -465,7 +465,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -517,7 +517,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
             </Tr>
           )}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };
diff --git a/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx b/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx
@@ -23,7 +23,7 @@ import {
   EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
@@ -515,7 +515,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -567,7 +567,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
             </Tr>
           )}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };
diff --git a/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx b/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx
@@ -21,7 +21,7 @@ import {
   EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
@@ -488,7 +488,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -540,7 +540,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
             </Tr>
           )}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };
diff --git a/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx b/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx
@@ -21,7 +21,7 @@ import {
   EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 interface Repository {
@@ -296,7 +296,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -348,7 +348,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
             </Tr>
           )}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };
diff --git a/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx b/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx
@@ -12,7 +12,7 @@ import {
   ToolbarItem,
   Pagination
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 interface Repository {
@@ -360,7 +360,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -404,7 +404,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };