@patternfly/react-core 5.2.0-prerelease.1 → 5.2.0-prerelease.10

package/src/demos/examples/Card/CardWithAccordion.tsx

@@ -0,0 +1,514 @@
+import React from 'react';
+import {
+  Card,
+  CardTitle,
+  CardBody,
+  CardHeader,
+  Title,
+  Accordion,
+  AccordionItem,
+  AccordionToggle,
+  AccordionContent,
+  Divider,
+  Grid,
+  GridItem,
+  Flex,
+  FlexItem
+} from '@patternfly/react-core';
+import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
+import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
+import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
+
+export const CardWithAccordion: React.FunctionComponent = () => {
+  const [openCPU, setOpenCPU] = React.useState('cpu1');
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>
+          <Title headingLevel="h4" size="lg">
+            Hardware Monitor
+          </Title>
+        </CardTitle>
+      </CardHeader>
+      <CardBody>
+        <Accordion>
+          <AccordionItem>
+            <AccordionToggle
+              id="cpu1-toggle"
+              onClick={() => {
+                if (openCPU === 'cpu1') {
+                  setOpenCPU(null);
+                } else {
+                  setOpenCPU('cpu1');
+                }
+              }}
+              isExpanded={openCPU === 'cpu1'}
+            >
+              CPU 1
+            </AccordionToggle>
+            <AccordionContent isHidden={openCPU !== 'cpu1'}>
+              <Grid hasGutter>
+                <Grid hasGutter>
+                  <GridItem md={4}>
+                    <Flex
+                      className={sizing.h_100OnMd}
+                      direction={{ md: 'column' }}
+                      spaceItems={{ md: 'spaceItemsNone' }}
+                      justifyContent={{ md: 'justifyContentCenter' }}
+                    >
+                      <FlexItem>
+                        <b>Temperature</b>
+                      </FlexItem>
+                      <Divider
+                        className={accessibility.hiddenOnMd}
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
+                      <FlexItem>
+                        <span>64C</span>
+                      </FlexItem>
+                    </Flex>
+                  </GridItem>
+                  <GridItem md={8}>
+                    <Grid hasGutter>
+                      <GridItem span={2}>
+                        <Flex
+                          direction={{ default: 'column' }}
+                          spaceItems={{ default: 'spaceItemsNone' }}
+                          alignItems={{ md: 'alignItemsFlexEnd' }}
+                        >
+                          <FlexItem>100C</FlexItem>
+                          <FlexItem>50C</FlexItem>
+                          <FlexItem>0C</FlexItem>
+                        </Flex>
+                      </GridItem>
+                      <GridItem span={10}>
+                        <ChartGroup
+                          ariaDesc="Mock CPU temperature"
+                          ariaTitle="Mock CPU temperature sparkline chart"
+                          containerComponent={
+                            <ChartVoronoiContainer
+                              labels={({ datum }) => `${datum.name}: ${datum.y}`}
+                              constrainToVisibleArea
+                            />
+                          }
+                          height={60}
+                          maxDomain={{ y: 100 }}
+                          padding={0}
+                          width={400}
+                        >
+                          <ChartArea
+                            data={[
+                              { name: 'Temp', x: '1', y: 25 },
+                              { name: 'Temp', x: '2', y: 40 },
+                              { name: 'Temp', x: '3', y: 20 },
+                              { name: 'Temp', x: '4', y: 60 },
+                              { name: 'Temp', x: '5', y: 20 },
+                              { name: 'Temp', x: '6', y: 41 },
+                              { name: 'Temp', x: '7', y: 45 },
+                              { name: 'Temp', x: '8', y: 41 },
+                              { name: 'Temp', x: '9', y: 62 }
+                            ]}
+                          />
+                        </ChartGroup>
+                      </GridItem>
+                    </Grid>
+                  </GridItem>
+                </Grid>
+                <Divider className={accessibility.hiddenOnMd} />
+                <Grid hasGutter>
+                  <GridItem md={4}>
+                    <Flex
+                      className={sizing.h_100OnMd}
+                      direction={{ md: 'column' }}
+                      spaceItems={{ md: 'spaceItemsNone' }}
+                      justifyContent={{ md: 'justifyContentCenter' }}
+                    >
+                      <FlexItem>
+                        <b>Speed</b>
+                      </FlexItem>
+                      <Divider
+                        className={accessibility.hiddenOnMd}
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
+                      <FlexItem>
+                        <span>2.3Ghz</span>
+                      </FlexItem>
+                    </Flex>
+                  </GridItem>
+                  <GridItem md={8}>
+                    <Grid hasGutter>
+                      <GridItem span={2}>
+                        <Flex
+                          direction={{ default: 'column' }}
+                          spaceItems={{ default: 'spaceItemsNone' }}
+                          alignItems={{ md: 'alignItemsFlexEnd' }}
+                        >
+                          <FlexItem>3.6Ghz</FlexItem>
+                          <FlexItem>1.5Ghz</FlexItem>
+                          <FlexItem>0GHZ</FlexItem>
+                        </Flex>
+                      </GridItem>
+                      <GridItem span={10}>
+                        <ChartGroup
+                          ariaDesc="Mock CPU speed"
+                          ariaTitle="Mock CPU speed sparkline chart"
+                          containerComponent={
+                            <ChartVoronoiContainer
+                              labels={({ datum }) => `${datum.name}: ${datum.y}`}
+                              constrainToVisibleArea
+                            />
+                          }
+                          height={60}
+                          maxDomain={{ y: 3.6 }}
+                          padding={0}
+                          width={400}
+                        >
+                          <ChartArea
+                            data={[
+                              { name: 'Temp', x: '1', y: 0.9 },
+                              { name: 'Temp', x: '2', y: 1.44 },
+                              { name: 'Temp', x: '3', y: 0.72 },
+                              { name: 'Temp', x: '4', y: 2.16 },
+                              { name: 'Temp', x: '5', y: 0.72 },
+                              { name: 'Temp', x: '6', y: 1.48 },
+                              { name: 'Temp', x: '7', y: 1.62 },
+                              { name: 'Temp', x: '8', y: 1.48 },
+                              { name: 'Temp', x: '9', y: 2.23 }
+                            ]}
+                          />
+                        </ChartGroup>
+                      </GridItem>
+                    </Grid>
+                  </GridItem>
+                </Grid>
+              </Grid>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionToggle
+              id="cpu2-toggle"
+              onClick={() => {
+                if (openCPU === 'cpu2') {
+                  setOpenCPU(null);
+                } else {
+                  setOpenCPU('cpu2');
+                }
+              }}
+              isExpanded={openCPU === 'cpu2'}
+            >
+              CPU 2
+            </AccordionToggle>
+            <AccordionContent isHidden={openCPU !== 'cpu2'}>
+              <Grid hasGutter>
+                <Grid hasGutter>
+                  <GridItem md={4}>
+                    <Flex
+                      className={sizing.h_100OnMd}
+                      direction={{ md: 'column' }}
+                      spaceItems={{ md: 'spaceItemsNone' }}
+                      justifyContent={{ md: 'justifyContentCenter' }}
+                    >
+                      <FlexItem>
+                        <b>Temperature</b>
+                      </FlexItem>
+                      <Divider
+                        className={accessibility.hiddenOnMd}
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
+                      <FlexItem>
+                        <span>64C</span>
+                      </FlexItem>
+                    </Flex>
+                  </GridItem>
+                  <GridItem md={8}>
+                    <Grid hasGutter>
+                      <GridItem span={2}>
+                        <Flex
+                          direction={{ default: 'column' }}
+                          spaceItems={{ default: 'spaceItemsNone' }}
+                          alignItems={{ md: 'alignItemsFlexEnd' }}
+                        >
+                          <FlexItem>100C</FlexItem>
+                          <FlexItem>50C</FlexItem>
+                          <FlexItem>0C</FlexItem>
+                        </Flex>
+                      </GridItem>
+                      <GridItem span={10}>
+                        <ChartGroup
+                          ariaDesc="Mock CPU temperature"
+                          ariaTitle="Mock CPU temperature sparkline chart"
+                          containerComponent={
+                            <ChartVoronoiContainer
+                              labels={({ datum }) => `${datum.name}: ${datum.y}`}
+                              constrainToVisibleArea
+                            />
+                          }
+                          height={60}
+                          maxDomain={{ y: 100 }}
+                          padding={0}
+                          width={400}
+                        >
+                          <ChartArea
+                            data={[
+                              { name: 'Temp', x: '1', y: 25 },
+                              { name: 'Temp', x: '2', y: 40 },
+                              { name: 'Temp', x: '3', y: 20 },
+                              { name: 'Temp', x: '4', y: 60 },
+                              { name: 'Temp', x: '5', y: 20 },
+                              { name: 'Temp', x: '6', y: 41 },
+                              { name: 'Temp', x: '7', y: 45 },
+                              { name: 'Temp', x: '8', y: 41 },
+                              { name: 'Temp', x: '9', y: 62 }
+                            ]}
+                          />
+                        </ChartGroup>
+                      </GridItem>
+                    </Grid>
+                  </GridItem>
+                </Grid>
+                <Divider className={accessibility.hiddenOnMd} />
+                <Grid hasGutter>
+                  <GridItem md={4}>
+                    <Flex
+                      className={sizing.h_100OnMd}
+                      direction={{ md: 'column' }}
+                      spaceItems={{ md: 'spaceItemsNone' }}
+                      justifyContent={{ md: 'justifyContentCenter' }}
+                    >
+                      <FlexItem>
+                        <b>Speed</b>
+                      </FlexItem>
+                      <Divider
+                        className={accessibility.hiddenOnMd}
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
+                      <FlexItem>
+                        <span>2.3Ghz</span>
+                      </FlexItem>
+                    </Flex>
+                  </GridItem>
+                  <GridItem md={8}>
+                    <Grid hasGutter>
+                      <GridItem span={2}>
+                        <Flex
+                          direction={{ default: 'column' }}
+                          spaceItems={{ default: 'spaceItemsNone' }}
+                          alignItems={{ md: 'alignItemsFlexEnd' }}
+                        >
+                          <FlexItem>3.6Ghz</FlexItem>
+                          <FlexItem>1.5Ghz</FlexItem>
+                          <FlexItem>0GHZ</FlexItem>
+                        </Flex>
+                      </GridItem>
+                      <GridItem span={10}>
+                        <ChartGroup
+                          ariaDesc="Mock CPU speed"
+                          ariaTitle="Mock CPU speed sparkline chart"
+                          containerComponent={
+                            <ChartVoronoiContainer
+                              labels={({ datum }) => `${datum.name}: ${datum.y}`}
+                              constrainToVisibleArea
+                            />
+                          }
+                          height={60}
+                          maxDomain={{ y: 3.6 }}
+                          padding={0}
+                          width={400}
+                        >
+                          <ChartArea
+                            data={[
+                              { name: 'Temp', x: '1', y: 0.9 },
+                              { name: 'Temp', x: '2', y: 1.44 },
+                              { name: 'Temp', x: '3', y: 0.72 },
+                              { name: 'Temp', x: '4', y: 2.16 },
+                              { name: 'Temp', x: '5', y: 0.72 },
+                              { name: 'Temp', x: '6', y: 1.48 },
+                              { name: 'Temp', x: '7', y: 1.62 },
+                              { name: 'Temp', x: '8', y: 1.48 },
+                              { name: 'Temp', x: '9', y: 2.23 }
+                            ]}
+                          />
+                        </ChartGroup>
+                      </GridItem>
+                    </Grid>
+                  </GridItem>
+                </Grid>
+              </Grid>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionToggle
+              id="cpu3-toggle"
+              onClick={() => {
+                if (openCPU === 'cpu3') {
+                  setOpenCPU(null);
+                } else {
+                  setOpenCPU('cpu3');
+                }
+              }}
+              isExpanded={openCPU === 'cpu3'}
+            >
+              CPU 3
+            </AccordionToggle>
+            <AccordionContent isHidden={openCPU !== 'cpu3'}>
+              <Grid hasGutter>
+                <Grid hasGutter>
+                  <GridItem md={4}>
+                    <Flex
+                      className={sizing.h_100OnMd}
+                      direction={{ md: 'column' }}
+                      spaceItems={{ md: 'spaceItemsNone' }}
+                      justifyContent={{ md: 'justifyContentCenter' }}
+                    >
+                      <FlexItem>
+                        <b>Temperature</b>
+                      </FlexItem>
+                      <Divider
+                        className={accessibility.hiddenOnMd}
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
+                      <FlexItem>
+                        <span>64C</span>
+                      </FlexItem>
+                    </Flex>
+                  </GridItem>
+                  <GridItem md={8}>
+                    <Grid hasGutter>
+                      <GridItem span={2}>
+                        <Flex
+                          direction={{ default: 'column' }}
+                          spaceItems={{ default: 'spaceItemsNone' }}
+                          alignItems={{ md: 'alignItemsFlexEnd' }}
+                        >
+                          <FlexItem>100C</FlexItem>
+                          <FlexItem>50C</FlexItem>
+                          <FlexItem>0C</FlexItem>
+                        </Flex>
+                      </GridItem>
+                      <GridItem span={10}>
+                        <ChartGroup
+                          ariaDesc="Mock CPU temperature"
+                          ariaTitle="Mock CPU temperature sparkline chart"
+                          containerComponent={
+                            <ChartVoronoiContainer
+                              labels={({ datum }) => `${datum.name}: ${datum.y}`}
+                              constrainToVisibleArea
+                            />
+                          }
+                          height={60}
+                          maxDomain={{ y: 100 }}
+                          padding={0}
+                          width={400}
+                        >
+                          <ChartArea
+                            data={[
+                              { name: 'Temp', x: '1', y: 25 },
+                              { name: 'Temp', x: '2', y: 40 },
+                              { name: 'Temp', x: '3', y: 20 },
+                              { name: 'Temp', x: '4', y: 60 },
+                              { name: 'Temp', x: '5', y: 20 },
+                              { name: 'Temp', x: '6', y: 41 },
+                              { name: 'Temp', x: '7', y: 45 },
+                              { name: 'Temp', x: '8', y: 41 },
+                              { name: 'Temp', x: '9', y: 62 }
+                            ]}
+                          />
+                        </ChartGroup>
+                      </GridItem>
+                    </Grid>
+                  </GridItem>
+                </Grid>
+                <Divider className={accessibility.hiddenOnMd} />
+                <Grid hasGutter>
+                  <GridItem md={4}>
+                    <Flex
+                      className={sizing.h_100OnMd}
+                      direction={{ md: 'column' }}
+                      spaceItems={{ md: 'spaceItemsNone' }}
+                      justifyContent={{ md: 'justifyContentCenter' }}
+                    >
+                      <FlexItem>
+                        <b>Speed</b>
+                      </FlexItem>
+                      <Divider
+                        className={accessibility.hiddenOnMd}
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
+                      <FlexItem>
+                        <span>2.3Ghz</span>
+                      </FlexItem>
+                    </Flex>
+                  </GridItem>
+                  <GridItem md={8}>
+                    <Grid hasGutter>
+                      <GridItem span={2}>
+                        <Flex
+                          direction={{ default: 'column' }}
+                          spaceItems={{ default: 'spaceItemsNone' }}
+                          alignItems={{ md: 'alignItemsFlexEnd' }}
+                        >
+                          <FlexItem>3.6Ghz</FlexItem>
+                          <FlexItem>1.5Ghz</FlexItem>
+                          <FlexItem>0GHZ</FlexItem>
+                        </Flex>
+                      </GridItem>
+                      <GridItem span={10}>
+                        <ChartGroup
+                          ariaDesc="Mock CPU speed"
+                          ariaTitle="Mock CPU speed sparkline chart"
+                          containerComponent={
+                            <ChartVoronoiContainer
+                              labels={({ datum }) => `${datum.name}: ${datum.y}`}
+                              constrainToVisibleArea
+                            />
+                          }
+                          height={60}
+                          maxDomain={{ y: 3.6 }}
+                          padding={0}
+                          width={400}
+                        >
+                          <ChartArea
+                            data={[
+                              { name: 'Temp', x: '1', y: 0.9 },
+                              { name: 'Temp', x: '2', y: 1.44 },
+                              { name: 'Temp', x: '3', y: 0.72 },
+                              { name: 'Temp', x: '4', y: 2.16 },
+                              { name: 'Temp', x: '5', y: 0.72 },
+                              { name: 'Temp', x: '6', y: 1.48 },
+                              { name: 'Temp', x: '7', y: 1.62 },
+                              { name: 'Temp', x: '8', y: 1.48 },
+                              { name: 'Temp', x: '9', y: 2.23 }
+                            ]}
+                          />
+                        </ChartGroup>
+                      </GridItem>
+                    </Grid>
+                  </GridItem>
+                </Grid>
+              </Grid>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </CardBody>
+    </Card>
+  );
+};

package/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js

@@ -19,7 +19,8 @@ import {
   TextContent,
   getResizeObserver
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
 
 export const JumpLinksWithDrawer = () => {
   const headings = ['First', 'Second', 'Third', 'Fourth', 'Fifth'];
@@ -29,7 +30,7 @@ export const JumpLinksWithDrawer = () => {
   const drawerRef = React.useRef();
 
   React.useEffect(() => {
-    const masthead = document.getElementsByClassName('pf-v5-c-masthead')[0];
+    const masthead = document.getElementsByClassName(mastheadStyles.masthead)[0];
     const drawerToggleSection = document.getElementById('drawer-toggle');
 
     getResizeObserver(

package/src/demos/examples/Tabs/NestedTabs.tsx

@@ -17,6 +17,7 @@ import {
   FlexItem
 } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
 
 export const NestedTabs: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = React.useState(0);
@@ -108,7 +109,7 @@ export const NestedTabs: React.FunctionComponent = () => {
         </Card>
       </GridItem>
       <GridItem xl={4} md={6}>
-        <Flex direction={{ default: 'column' }} className="pf-v5-u-h-100">
+        <Flex direction={{ default: 'column' }} className={sizing.h_100}>
           <FlexItem flex={{ default: 'flex_1' }}>
             <Card isFullHeight>
               <CardHeader>

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -56,6 +56,7 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import { KeyTypes } from '../../../helpers';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 interface Repository {
@@ -191,7 +192,7 @@ export const TablesAndTabs = () => {
           </MenuToggle>
         </ToolbarItem>
         <OverflowMenu breakpoint="md">
-          <OverflowMenuContent className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">
+          <OverflowMenuContent className={`${display.displayNone} ${display.displayBlockOnLg}`}>
             <OverflowMenuGroup groupType="button" isPersistent>
               <OverflowMenuItem isPersistent>
                 <Button variant="primary">Generate</Button>

package/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx

@@ -143,6 +143,12 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
     console.log('Logs cleared!');
   };
 
+  const onClearLogsMobile = () => {
+    setOptionExpandedMobile(false);
+    // eslint-disable-next-line no-console
+    console.log('Logs cleared!');
+  };
+
   const onSearchChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setSearchValue(value);
     setSearchResultsCount(3);
@@ -169,7 +175,10 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
     });
   };
 
-  const onPageResize = (_event: React.SyntheticEvent, { windowSize }: { windowSize: number }) => {
+  const onPageResize = (
+    _event: MouseEvent | TouchEvent | React.KeyboardEvent<Element>,
+    { windowSize }: { windowSize: number }
+  ) => {
     if (windowSize >= 1450) {
       setMobileView(false);
     } else {
@@ -210,23 +219,28 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
       <SelectOption key="switch-2" hasCheckbox isSelected={secondSwitchChecked} onClick={handleSecondSwitchChange}>
         Wrap lines
       </SelectOption>
-      <MenuFooter key="clear-log" onClick={onClearLogs}>
-        <Button variant="link" isInline>
-          Clear logs
-        </Button>
-      </MenuFooter>
     </>
   );
 
   const selectDropdownContent = (
-    <SelectList>
-      {Object.entries(firstOptions).map(([value, { type }]) => (
-        <SelectOption key={value} hasCheckbox value={value} isSelected={containerSelected === value}>
-          <Badge key={value}>{type}</Badge>
-          {` ${value}`}
-        </SelectOption>
-      ))}
-    </SelectList>
+    <>
+      <SelectList>
+        {Object.entries(firstOptions).map(([value, { type }]) => (
+          <SelectOption key={value} hasCheckbox value={value} isSelected={containerSelected === value}>
+            <Badge key={value}>{type}</Badge>
+            {` ${value}`}
+          </SelectOption>
+        ))}
+      </SelectList>
+    </>
+  );
+
+  const clearLogsFooter = (type: string) => (
+    <MenuFooter key="clear-log" onClick={type === 'mobile' ? onClearLogsMobile : onClearLogs}>
+      <Button variant="link" isInline>
+        Clear logs
+      </Button>
+    </MenuFooter>
   );
 
   const selectToggleContent = ({ showText }: { showText: boolean }) => {
@@ -261,6 +275,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
     <React.Fragment>
       <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
         <Select
+          role="menu"
           toggle={(toggleRef) => (
             <MenuToggle
               ref={toggleRef}
@@ -282,7 +297,9 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
       <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
         <Select
           isOpen={optionExpanded}
+          role="menu"
           onOpenChange={(isOpen) => setOptionExpanded(isOpen)}
+          onOpenChangeKeys={['Escape']}
           onSelect={onOptionSelect}
           toggle={(toggleRef) => (
             <MenuToggle ref={toggleRef} isExpanded={optionExpanded} onClick={onOptionToggle} icon={<CogIcon />}>
@@ -291,6 +308,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
           )}
         >
           <SelectList>{optionSelectItems}</SelectList>
+          {clearLogsFooter('desktop')}
         </Select>
       </ToolbarItem>
       <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
@@ -325,8 +343,10 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
       <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
         <Tooltip position="top" content={<div>Options</div>}>
           <Select
+            role="menu"
             isOpen={optionExpandedMobile}
             onOpenChange={(isOpen) => setOptionExpandedMobile(isOpen)}
+            onOpenChangeKeys={['Escape']}
             onSelect={onOptionSelectMobile}
             toggle={(toggleRef) => (
               <MenuToggle
@@ -339,6 +359,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
             )}
           >
             <SelectList>{optionSelectItems}</SelectList>
+            {clearLogsFooter('mobile')}
           </Select>
         </Tooltip>
       </ToolbarItem>