[EuiDataGrid] Refactor & write unit tests for fullscreen control + Standardize 'fullscreen' copy

CHANGELOG.md

@@ -1,6 +1,12 @@
 ## [`main`](https://github.com/elastic/eui/tree/main)
+
 - Updated `testenv` mock for `EuiFlyout` to include default `aria-label` on the close button ([#5702](https://github.com/elastic/eui/pull/5702))
 
+**Breaking changes**
+
+- Changed the I18n token `euiDataGridToolbar.fullScreenButton` to `euiFullscreenSelector.fullscreenButton`, and its text to `Enter fullscreen` (with no space) ([#5680](https://github.com/elastic/eui/pull/5680))
+- Changed the I18n token `euiDataGridToolbar.fullScreenButtonActive` to `euiFullscreenSelector.fullscreenButtonActive`, and its text to `Exit fullscreen` (with no space) ([#5680](https://github.com/elastic/eui/pull/5680))
+
 ## [`51.0.0`](https://github.com/elastic/eui/tree/v51.0.0)
 
 - Enhanced `EuiSuggest` to fire the `onItemClick` callback on Enter key press as well as clicks ([#5693](https://github.com/elastic/eui/pull/5693))

src-docs/src/components/guide_page/_guide_page.scss

@@ -22,7 +22,7 @@ $guideSideNavWidth: 240px;
   }
 
   .euiHeader:not(.euiHeader--fixed) {
-    // Force headers below the full screen.
+    // Force headers below the fullscreen.
     // This shouldn't be necessary in consuming applications because headers should always be at the top of the page
     z-index: 0;
   }

src-docs/src/components/guide_section/guide_section.tsx

@@ -206,7 +206,7 @@ export const GuideSection: FunctionComponent<GuideSection> = ({
                     iconType="fullScreen"
                     href={`#${path}/${fullScreen.slug}`}
                   >
-                    Full screen demo
+                    Fullscreen demo
                   </EuiButton>
                 ) : (
                   demo

src-docs/src/views/code/code_example.js

@@ -172,7 +172,7 @@ export const CodeExample = {
         <p>
           For long content, you can set an <EuiCode>overflowHeight</EuiCode>{' '}
           which will scroll if the text exceeds that height, and allows users to
-          view the code in full-screen mode.
+          view the code in fullscreen mode.
         </p>
       ),
       source: [

src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx

@@ -289,7 +289,7 @@ const CollapsibleNavAll = () => {
           {
             items: [
               <EuiButtonEmpty href={exitPath} iconType="exit">
-                Exit full screen
+                Exit fullscreen
               </EuiButtonEmpty>,
             ],
           },

src-docs/src/views/collapsible_nav/collapsible_nav_example.js

@@ -179,7 +179,7 @@ export const CollapsibleNavExample = {
         <>
           <h3>Putting it all together</h3>
           <p>
-            The button below will launch a full screen example that includes{' '}
+            The button below will launch a fullscreen example that includes{' '}
             <Link to="/layout/header">
               <strong>EuiHeader</strong>
             </Link>{' '}

src-docs/src/views/context_menu/context_menu_with_content.js

@@ -60,7 +60,7 @@ export default () => {
       title: 'View options',
       items: [
         {
-          name: 'Show full screen',
+          name: 'Show fullscreen',
           icon: <EuiIcon type="search" size="m" />,
           onClick: () => {
             closePopover();

src-docs/src/views/datagrid/datagrid.js

@@ -256,7 +256,7 @@ const trailingControlColumns = [
                     <strong>EuiModal</strong>
                   </Link>{' '}
                   components have a higher <EuiCode>z-index</EuiCode> than{' '}
-                  <strong>EuiDataGrid</strong> components, even in full screen
+                  <strong>EuiDataGrid</strong> components, even in fullscreen
                   mode. This ensures that modals will never appear behind the
                   data grid.
                 </p>
@@ -305,15 +305,15 @@ const trailingControlColumns = [
                     <strong>EuiFlyout</strong>
                   </Link>{' '}
                   components have a higher <EuiCode>z-index</EuiCode> than{' '}
-                  <strong>EuiDataGrid</strong> components, even in full screen
+                  <strong>EuiDataGrid</strong> components, even in fullscreen
                   mode. This ensures that flyouts will never appear behind the
                   data grid.
                 </p>
 
                 <p>
                   Flyouts are also styled with a vertical offset that accounts
                   for the presence of fixed headers. However, when the data grid
-                  is in full screen mode, these offset styles are ignored to
+                  is in fullscreen mode, these offset styles are ignored to
                   allow the flyout to correctly appear at the top of the
                   viewport.
                 </p>

src-docs/src/views/datagrid/datagrid_ref_example.js

@@ -9,10 +9,10 @@ const dataGridRefSource = require('!!raw-loader!./ref');
 const dataGridRefSnippet = `const dataGridRef = useRef();
 <EuiDataGrid ref={dataGridRef} {...props} />
 
-// Mnaually toggle the data grid's full screen state
+// Manually toggle the data grid's fullscreen state
 dataGridRef.current.setIsFullScreen(true);
 
-// Mnaually focus a specific cell within the data grid
+// Manually focus a specific cell within the data grid
 dataGridRef.current.setFocusedCell({ rowIndex, colIndex });
 
 // Manually opens the popover of a specified cell within the data grid
@@ -45,7 +45,7 @@ export const DataGridRefExample = {
             <li>
               <p>
                 <EuiCode>setIsFullScreen(isFullScreen)</EuiCode> - controls the
-                full screen state of the data grid. Accepts a true/false boolean
+                fullscreen state of the data grid. Accepts a true/false boolean
                 flag.
               </p>
             </li>

src-docs/src/views/datagrid/ref.tsx

@@ -179,7 +179,7 @@ export default () => {
             size="s"
             onClick={() => dataGridRef.current!.setIsFullScreen(true)}
           >
-            Set grid to full screen
+            Set grid to fullscreen
           </EuiButton>
         </EuiFlexItem>
       </EuiFlexGroup>

src-docs/src/views/datagrid/styling.js

@@ -678,12 +678,12 @@ const DataGrid = () => {
 
                   <EuiFormRow
                     display="columnCompressed"
-                    label="Show full screen selector"
+                    label="Show fullscreen selector"
                   >
                     <EuiButtonGroup
                       isFullWidth
                       buttonSize="compressed"
-                      legend="Full screen options"
+                      legend="Fullscreen options"
                       options={showFullScreenSelectorOptions}
                       idSelected={showFullScreenSelector.toString()}
                       onChange={onShowFullScreenSelectorChange}

src-docs/src/views/header/header_elastic_pattern.js

@@ -363,7 +363,7 @@ export default () => {
                       color="primary"
                       href={`#${parentPath}`}
                     >
-                      Exit full screen
+                      Exit fullscreen
                     </EuiButton>
                   )}
                 </ExampleContext.Consumer>

src-docs/src/views/header/header_example.js

@@ -477,7 +477,7 @@ export const HeaderExample = {
         <>
           <h3>Putting it all together</h3>
           <p>
-            The button below will launch a full screen example that includes two{' '}
+            The button below will launch a fullscreen example that includes two{' '}
             <strong>EuiHeaders</strong> with all the appropriate navigation
             pieces including{' '}
             <Link to="/navigation/collapsible-nav">

src-docs/src/views/image/image_example.js

@@ -67,7 +67,7 @@ export const ImageExample = {
       playground: imageConfig,
     },
     {
-      title: 'Click an image for a full screen version',
+      title: 'Click an image for a fullscreen version',
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -77,7 +77,7 @@ export const ImageExample = {
       text: (
         <p>
           Apply the <EuiCode>allowFullScreen</EuiCode> prop to make the image
-          clickable and show a full screen version. Note that the second image
+          clickable and show a fullscreen version. Note that the second image
           also passes{' '}
           <EuiCode language="js">fullScreenIconColor=&quot;dark&quot;</EuiCode>{' '}
           to change icon color to better contrast against the light background

src-docs/src/views/loading/loading_example.js

@@ -82,7 +82,7 @@ export const LoadingExample = {
           <Link to="/display/icons#elastic-logos">
             <strong>EuiIcon</strong>
           </Link>{' '}
-          logos. It should only be used in very large panels, like full screen
+          logos. It should only be used in very large panels, like fullscreen
           pages.
         </p>
       ),

src-docs/src/views/page/_page_demo.tsx

@@ -22,7 +22,7 @@ const ExitFullscreenDemoButton = () => {
   const exitPath = useExitPath();
   return (
     <EuiButton fill href={exitPath} iconType="exit">
-      Exit full screen
+      Exit fullscreen
     </EuiButton>
   );
 };
@@ -69,7 +69,7 @@ export const PageDemo: FunctionComponent<{
     <ExitFullscreenDemoButton />
   ) : (
     <EuiButton fill href={`#${path}/${slug}`}>
-      Go full screen
+      Go fullscreen
     </EuiButton>
   );
 

src-docs/src/views/page/page_example.js

@@ -93,8 +93,8 @@ export const PageExample = {
       >
         <p>
           You&apos;ll find the code for each in their own tab and if you go to
-          full screen, you can see how they would behave in a typical
-          application layout.
+          fullscreen, you can see how they would behave in a typical application
+          layout.
         </p>
       </EuiCallOut>
     </>

src-docs/src/views/tour/fullscreen.js

@@ -173,7 +173,7 @@ export default () => {
           <ExampleContext.Consumer>
             {({ parentPath }) => (
               <EuiButton fill href={`#${parentPath}`} iconType="exit">
-                Exit full screen demo
+                Exit fullscreen demo
               </EuiButton>
             )}
           </ExampleContext.Consumer>,

src-docs/src/views/tour/tour_example.js

@@ -149,7 +149,7 @@ export const TourExample = {
       demo: <Managed />,
     },
     {
-      title: 'Full screen demo',
+      title: 'Fullscreen demo',
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -163,7 +163,7 @@ export const TourExample = {
         </p>
       ),
       fullScreen: {
-        slug: 'full-screen',
+        slug: 'fullscreen',
         demo: <FullScreen />,
       },
     },

src/components/code/__snapshots__/code_block.test.tsx.snap

@@ -40,7 +40,7 @@ exports[`EuiCodeBlock dynamic content updates DOM when input changes 2`] = `
 </div>
 `;
 
-exports[`EuiCodeBlock full screen displays content in fullscreen mode 1`] = `
+exports[`EuiCodeBlock fullscreen displays content in fullscreen mode 1`] = `
 <div
   className="testClass1 testClass2 euiCodeBlock euiCodeBlock--hasControl euiCodeBlock--fontLarge euiCodeBlock--paddingLarge euiCodeBlock-isFullScreen"
 >

src/components/code/code_block.test.tsx

@@ -146,7 +146,7 @@ describe('EuiCodeBlock', () => {
     });
   });
 
-  describe('full screen', () => {
+  describe('fullscreen', () => {
     it('displays content in fullscreen mode', () => {
       const component = mount(
         <EuiCodeBlock

src/components/code/code_block.tsx

@@ -191,14 +191,14 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
     FullScreenDisplay,
   } = useFullScreen({ overflowHeight });
 
-  // Classes used in both full-screen and non-full-screen mode
+  // Classes used in both fullscreen and non-fullscreen mode
   const wrapperClasses = classNames(className, 'euiCodeBlock', {
     'euiCodeBlock--hasControl': showCopyButton || showFullScreenButton,
     'euiCodeBlock--hasBothControls': showCopyButton && showFullScreenButton,
     'euiCodeBlock--hasLineNumbers': lineNumbersConfig.show,
   });
 
-  // Classes used in non-full-screen mode only
+  // Classes used in non-fullscreen mode only
   const classes = classNames(
     wrapperClasses,
     fontSizeToClassNameMap[fontSize],

src/components/datagrid/__snapshots__/data_grid.test.tsx.snap

@@ -1012,7 +1012,7 @@ Array [
             class="euiToolTipAnchor"
           >
             <button
-              aria-label="Full screen"
+              aria-label="Enter fullscreen"
               class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
               data-test-subj="dataGridFullScreenButton"
               type="button"
@@ -1436,7 +1436,7 @@ Array [
             class="euiToolTipAnchor"
           >
             <button
-              aria-label="Full screen"
+              aria-label="Enter fullscreen"
               class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
               data-test-subj="dataGridFullScreenButton"
               type="button"
@@ -2201,7 +2201,7 @@ Array [
             class="euiToolTipAnchor"
           >
             <button
-              aria-label="Full screen"
+              aria-label="Enter fullscreen"
               class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
               data-test-subj="dataGridFullScreenButton"
               type="button"
@@ -2624,7 +2624,7 @@ Array [
             class="euiToolTipAnchor"
           >
             <button
-              aria-label="Full screen"
+              aria-label="Enter fullscreen"
               class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
               data-test-subj="dataGridFullScreenButton"
               type="button"

src/components/datagrid/controls/data_grid_toolbar.test.tsx

@@ -21,11 +21,10 @@ describe('EuiDataGridToolbar', () => {
     gridWidth: 500,
     toolbarVisibility: true,
     isFullScreen: false,
+    fullScreenSelector: <div>mock fullscreen selector</div>,
     displaySelector: <div>mock style selector</div>,
-    controlBtnClasses: '',
     columnSelector: <div>mock column selector</div>,
     columnSorting: <div>mock column sorting</div>,
-    setIsFullScreen: jest.fn(),
   };
 
   it('renders', () => {
@@ -52,21 +51,9 @@ describe('EuiDataGridToolbar', () => {
           <div>
             mock style selector
           </div>
-          <EuiToolTip
-            content="Full screen"
-            delay="long"
-            display="inlineBlock"
-            position="top"
-          >
-            <EuiButtonIcon
-              aria-label="Full screen"
-              color="text"
-              data-test-subj="dataGridFullScreenButton"
-              iconType="fullScreen"
-              onClick={[Function]}
-              size="xs"
-            />
-          </EuiToolTip>
+          <div>
+            mock fullscreen selector
+          </div>
         </div>
       </div>
     `);
@@ -131,29 +118,6 @@ describe('EuiDataGridToolbar', () => {
       </div>
     `);
   });
-
-  it('handles full screen toggling', () => {
-    const component = shallow(<EuiDataGridToolbar {...requiredProps} />);
-    component.setProps({
-      setIsFullScreen: () => component.setProps({ isFullScreen: true }),
-    });
-
-    component
-      .find('[data-test-subj="dataGridFullScreenButton"]')
-      .simulate('click');
-
-    expect(component.find('[data-test-subj="dataGridFullScreenButton"]'))
-      .toMatchInlineSnapshot(`
-      <EuiButtonIcon
-        aria-label="Exit full screen"
-        color="text"
-        data-test-subj="dataGridFullScreenButton"
-        iconType="fullScreenExit"
-        onClick={[Function]}
-        size="xs"
-      />
-    `);
-  });
 });
 
 describe('checkOrDefaultToolBarDisplayOptions', () => {