change: [M3-7710] - Table Collapsible row icon orientation (#10119)

* Change collapsible row icon orientation * Added changeset: Table Collapsible row icon orientation * Fix e2e suite
linode · Jan 30, 2024 · 9781197 · 9781197
1 parent 9a50d8f
commit 9781197
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/packages/manager/.changeset/pr-10119-changed-1706549896002.md b/packages/manager/.changeset/pr-10119-changed-1706549896002.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Table Collapsible row icon orientation ([#10119](https://github.com/linode/manager/pull/10119))
diff --git a/packages/manager/cypress/e2e/core/loadBalancers/load-balancer-routes.spec.ts b/packages/manager/cypress/e2e/core/loadBalancers/load-balancer-routes.spec.ts
@@ -527,7 +527,7 @@ describe('Akamai Cloud Load Balancer routes page', () => {
         '@getRoutes',
       ]);
 
-      cy.findByLabelText(`route-${routes[0].id} expand row`).click();
+      cy.findByLabelText(`expand route-${routes[0].id} row`).click();
 
       ui.actionMenu.findByTitle('Action Menu for Rule 0').click();
 
@@ -600,7 +600,7 @@ describe('Akamai Cloud Load Balancer routes page', () => {
       ]);
 
       // Expand the route table
-      cy.findByLabelText(`route-${routes[0].id} expand row`).click();
+      cy.findByLabelText(`expand route-${routes[0].id} row`).click();
 
       // Verify all rules are shown
       for (const rule of routes[0].rules) {

diff --git a/packages/manager/src/components/CollapsibleTable/CollapsibleRow.tsx b/packages/manager/src/components/CollapsibleTable/CollapsibleRow.tsx
@@ -1,5 +1,5 @@
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
 import IconButton from '@mui/material/IconButton';
@@ -25,12 +25,12 @@ export const CollapsibleRow = (props: Props) => {
       <StyledOuterTableRow>
         <TableCell component="th" scope="row">
           <IconButton
-            aria-label={`${label} expand row`}
+            aria-label={`expand ${label} row`}
             onClick={() => setOpen(!open)}
             size="small"
             sx={{ padding: 1 }}
           >
-            {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+            {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
           </IconButton>
           {label}
         </TableCell>