upcoming: [M3-9006] - Update Table Component with Design Tokens #11461

hasyed-akamai · 2024-12-26T07:55:05Z

Description 📝

Use design tokens to update table styles at the theme level.
Ensure nested tables are handled appropriately with table design token variants.
Ensure hover states are updated for tables.
Removed a lot of styled components with one-off table styles

Major Changes

Added zebra striping for most tables with large data
- ❗ This is a preference setting that can be toggled
- This works for nested tables such as VPC (nested tables don't have striping)
Added hover background color to tables rows
There's now a selected state for plans table

Target release date 🗓️

1/14 ⚠️

Preview 📷

Before	After

How to test 🧪

Verification steps

Check that table styles are updated with design tokens at the theme level.
Check nested tables for correct styling with table token variants.
Check hover states on table rows are working as expected.
Check tables with Pagination component

As an Author I have considered 🤔

Check all that apply

jaalah-akamai · 2024-12-27T03:30:36Z

packages/manager/src/components/LineGraph/LineGraph.tsx

-            </StyledTableBody>
-          </StyledTable>
+            </TableBody>
+          </Table>
        </StyledContainer>
      )}
      <StyledCanvasContainer>


LineGraph which is a deprecated component used in Longview is much cleaner... pretty much all deletions. Test via yarn storybook and search for LineGraph unless you have actual Longview data.

jaalah-akamai · 2024-12-27T03:33:13Z

packages/manager/src/components/PaginationFooter/PaginationFooter.tsx

@@ -15,6 +17,7 @@ export interface PaginationProps {
  page: number;
  pageSize: number;
  showAll?: boolean;
+  sx?: SxProps;


Added sx since the Pagination component departs from typical design for filter by tags, and list/grid views. Essentially used to remove the borders.

jaalah-akamai · 2024-12-27T03:34:35Z

packages/manager/src/components/Table/Table.tsx

-   * Optional boolean to remove the border from the table
-   * @default false
-   */
-  noBorder?: boolean;


Got rid of noBorder for tables. This can be handled via sx and we should rarely depart from our new table styles to keep things clean.

jaalah-akamai · 2024-12-27T03:36:23Z

packages/manager/src/components/TableCell/TableCell.tsx

-   * parent column will either be the name of the column this
-   * TableCell is listed under
-   */
-  parentColumn?: string;


parentColumn seemed like a pretty useless prop to me. Maybe I'm missing something but it looks like it was just used for identifying table cells easier?

jaalah-akamai · 2024-12-27T03:36:49Z

packages/manager/src/components/TableCell/TableCell.tsx

+        paddingRight: actionCell ? 0 : '',
+        textAlign: actionCell ? 'right' : center ? 'center' : '',
+        textTransform: statusCell ? 'capitalize' : '',
+        whiteSpace: noWrap ? 'nowrap' : '',


Narrowed classes down to essentials via sx

jaalah-akamai · 2024-12-27T03:38:41Z

packages/manager/src/features/Images/ImagesLanding/ImageRow.tsx

@@ -77,7 +79,7 @@ export const ImageRow = (props: Props) => {
  };

  return (
-    <TableRow data-qa-image-cell={id} key={id}>
+    <TableRow data-qa-image-cell={id} hover={hover} key={id}>


Added hover background transitions to tables, we need to do this is more places.

jaalah-akamai · 2024-12-27T03:39:36Z

packages/manager/src/features/Linodes/LinodesLanding/DisplayGroupedLinodes.tsx

                >
                  <GridView />
-                </StyledToggleButton>
+                </IconButton>


Converted both the List View and Tag View to IconButton. Allowed me to remove lots of styles and simplify this.

jaalah-akamai · 2024-12-27T03:40:08Z

packages/manager/src/features/Linodes/LinodesLanding/DisplayGroupedLinodes.tsx

+                    ':hover': {
+                      color: theme.tokens.color.Brand[60],
+                    },
+                    color: theme.tokens.table.HeaderFilled.Icon,


Using table tokens because it's in a table header

jaalah-akamai · 2024-12-27T03:41:44Z

packages/manager/src/features/Linodes/LinodesLanding/SortableTableHead.tsx

+            display="flex"
+            gap={3}
+            justifyContent="flex-end"
+            paddingRight={1.5}


This allowed me to get pretty close (design-wise) when swapping views

jaalah-akamai · 2024-12-27T03:56:58Z

packages/manager/src/features/ObjectStorage/BucketDetail/FolderTableRow.tsx

 export interface FolderTableRowProps extends TableRowProps {
  displayName: string;
  folderName: string;
  handleClickDelete: (objectName: string) => void;
-  manuallyCreated: boolean;


This seemed to be a really old prop that doesn't appear to be in use anymore. I looked through the history and it appears this was used to add a fill to the EntityIcon. Most the time it was missing or just set to false.

jaalah-akamai · 2024-12-27T03:57:19Z

packages/manager/src/features/ObjectStorage/utilities.ts

  _shouldDisplayObject: boolean;
 }

 export const extendObject = (
  object: ObjectStorageObject,
-  prefix: string,
-  manuallyCreated = false


See comment above about manuallyCreated

…ithub.com:hasyed-akamai/manager into M3-9006-update-table-component-with-design-tokens

jaalah-akamai · 2024-12-27T19:32:10Z

packages/manager/src/components/TableRow/TableRow.tsx

-        <Hidden lgDown>
-          <StyledTableDataCell />
-        </Hidden>
-      )}


This was used only in Longview, it's the little arrow next to the selected row. If we decide to keep this, it just adds more logic for a deprecated product since it utilizes the selected prop we want to use elsewhere.

jaalah-akamai · 2024-12-27T19:34:00Z

packages/manager/src/features/Billing/InvoiceDetail/InvoiceTable.tsx

+                      sx={{
+                        border: 0,
+                        width: '100%',
+                      }}


Unlike standard table layouts where the Pagination component follows the Table, invoices require totals to be embedded within the table structure itself.

This reverts commit bffeef5.

This reverts commit 0ecfc55.

This reverts commit 8f87cb6.

…with-design-tokens

github-actions · 2024-12-30T23:02:29Z

Coverage Report: ❌
Base Coverage: 86.94%
Current Coverage: 86.9%

…ithub.com:hasyed-akamai/manager into M3-9006-update-table-component-with-design-tokens

linode-gh-bot · 2024-12-31T03:23:13Z

Cloud Manager UI test results

🔺 1 failing test on test run #15 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`1 Failing`	`468 Passing`	`2 Skipped`	`117m 24s`

Details

Failing Tests
	Spec	Test
❌	`smoke-linode-landing-table.spec.ts`	linode landing checks » checks the landing page side menu items

Troubleshooting

Use this command to re-run the failing tests:

yarn cy:run -s "cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts"

@jdamore-linode

* upcoming: [M3-9001] - Footer Update (#11446) * upcoming: [M3-9002] - Footer Update * global tokens formatting * fix * left align for desktop - center for mobile --------- Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> * Adjust dev tools icon to the right * UX Request: Reduce spacing between footer items * upcoming: [M3-8982] - Update Left Navigation (#11463) * upcoming: [M3-9002] - Left Navigation Update * removed akamai color logo * updated pin icon tooltip text * upcoming: [M3-8982] - Update Left Navigation * updated theme file's format * updated standby values * corrected badge width and fixed colors for product family * Revert "corrected badge width and fixed colors for product family" This reverts commit 6fcb80b. * Fix font styles for side nav, adjust spacing, revert active states * Update product family icons * integrated footer updates and updated icon's svg colors to be dynamic * Fix borders for mobile --------- Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> * upcoming: [M3-9006] - Update Table Component with Design Tokens (#11461) * upcoming: [9006] - Update Table Component with Design Tokens * Change unit tests for `CollapsibleRow` component * Complete table overhaul * Second pass through tables * Update linode groups * Cleanup * Add hover background transitions to tables - `Part1` * Add zebra striping and selected states * Add selected state for plan table * Fix dark mode styles * Add hover background transitions to tables - `Part2` * Add hover background transitions to tables - `Part3` * Revert "Add hover background transitions to tables - `Part3`" This reverts commit bffeef5. * Revert "Add hover background transitions to tables - `Part2`" This reverts commit 0ecfc55. * Revert "Add hover background transitions to tables - `Part1`" This reverts commit 8f87cb6. * Make hover the default for TableRow * Add table striping as a setting preference * Add border to table attachment headers --------- Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> Co-authored-by: Jaalah Ramos <125309814+jaalah-akamai@users.noreply.github.com> * upcoming: [M3-9002] - Replace hamburger icon in left navigation (#11462) * upcoming: [M3-9002] - Left Navigation Update * removed akamai color logo * updated pin icon tooltip text * Fix table focus state and global header background * Update logo color * Revert logo change --------- Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> * [CDS Updates] - Handle cds sticky sidebar (#11479) * Handle dynamic sidebar * SideMenu temp fonts * Toggler * Toggler * better handling * better util * cleanup * cleanup * icon fix * remove chips and improve preference managing (#11492) * Simplify footer/toggle * change: [M3-9003] – CDS: Restructure Top Menu Design with Akamai Logo and CDS Compass Updates (#11452) * Initial changes: top menu spans full width of app, logo moved to top menu, rearrangement of top menu elements, reordering of components in MainConent.tsx & Root.tsx, addition of new icons for top menu * Update icon svg's; match mockups more closely and fix colors; implement hamburger icon in tablet/mobile view when side menu disappears; implement company name truncation * Adjust import path * Update MuiButton padding, remove minWidth on buttons; use GlobalHeader tokens; fix icon and text colors for Search bar; use chevron icons for KeyboardArrowUp & KeyboardArrowDown (color still needs adjusting) * Remove sx prop from CreateMenu button * Fix KeyboardArrowUp and KeyboardArrowDown color in UserMenu.tsx * MaxWidth initial * Remove search bar border on hover * Stop container holding x button in search bar from spilling outside of the bar * Reduce zIndex of <Box /> wrapping <SideMenu /> to prevent the side menu from covering up the search dropdown * Mock preference in PrimaryNav.test.tsx so items are expanded by default to prevent failures * Saving... * Saving... * Saving... * Final cleanup of top menu * Cleanup UserMenu * Remove commented code * Fix TS errors --------- Co-authored-by: Dajahi Wiley <dwiley@linode.com> Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> Co-authored-by: Jaalah Ramos <125309814+jaalah-akamai@users.noreply.github.com> * new sidebar styles * responsiveness adjustments * Remove parentColumn - No longer need * chore: [M3-9054] - CDS: Update all the fonts (#11517) * Initial commit: all the font things * smooth it all * side nav and some captions * small changes * more instances * more instances and linting rules + defensive props * ubuntu no longer * Update the footer and add hover to product families * Update fonts from fontsource; Hide logo for mobile < 430 * Add yarn lock * Fix the bolding of the active link * Use theme for tokens * cleanup and fixes * moar cleanup and fixes * fix test & linting errors * update snapshots * fix the e2e * small style adjustments * Revert "fix the e2e" This reverts commit 35ba8aa. * fix: [M3-9124] - Link styles in KubernetesClusterRow and clean up one-off styles (#11523) Cleans up one-off styles in KubernetesClusterRow Uses Link from src/components/Link rather than react-router-dom directly so that colors are correct In dark mode, the raw react-router-dom link is too dark Co-authored-by: Banks Nussman <banks@nussman.us> * CDS Feedback & Review Fixes * Footer & Notification Updates * Updates to Search, Search Menu, Accordion Icons * Algolia Search * Fix pin border issue * Badge Padding, Pin Toggle Adjustments * Small styling fixes * fix beta chip getting cut off * top nav responsiveness adjustments and fixes * dark mode table label link and padding fixes * refactor: [M3-8801] - Remove Individual Product Entity Icons (#11537) * refactor: [M3-8801] - Remove unused product icons and rename remaining SVG files to reflect product families * Replace EntityIcons with Product Family Icon and Update EntityIcon Story Accordingly * Added changeset: Remove Individual Product Entity Icons and Update Story Accordingly * Fix failed unit test cases * fix in-progress chip border radius * more dark mode table fixes * side nav refinements * update warning icon and notice component accordingly * default akamai accounts to blue * Update table header color * Finishing Touches * Fix issue with mobile visibility for search bar * Increase product icons in nav and search menu, adjust top menu spacing, search placeholder italicized * Padding around search * Update our primary nav headings * Update search final * Fix issue with product names disappearing * Prevent icon from shrinking when names are two lines, add padding * Convert product icon to span * fix lke-update.spec.ts * fix unit fail * fix remainning e2e tests- thx @jdamore-linode --------- Co-authored-by: Harsh Shankar Rao <hrao@akamai.com> Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> Co-authored-by: hasyed-akamai <hasyed@akamai.com> Co-authored-by: Alban Bailly <130582365+abailly-akamai@users.noreply.github.com> Co-authored-by: Alban Bailly <abailly@akamai.com> Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com> Co-authored-by: Dajahi Wiley <dwiley@linode.com> Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com> Co-authored-by: Banks Nussman <banks@nussman.us> Co-authored-by: Hana Xu <hxu@akamai.com>

upcoming: [9006] - Update Table Component with Design Tokens

9b408b7

hasyed-akamai added the Design Tokens Laying the groundwork for Design Tokens label Dec 26, 2024

hasyed-akamai self-assigned this Dec 26, 2024

hasyed-akamai requested a review from harsh-akamai December 26, 2024 07:55

Change unit tests for CollapsibleRow component

44d4652

hasyed-akamai requested a review from jaalah-akamai December 26, 2024 11:47

Complete table overhaul

86b72c2

jaalah-akamai self-assigned this Dec 26, 2024

jaalah-akamai added the Work in Progress label Dec 26, 2024

jaalah added 2 commits December 26, 2024 22:08

Second pass through tables

ae96b7e

Update linode groups

80ce95d

jaalah-akamai reviewed Dec 27, 2024

View reviewed changes

Cleanup

8af4227

jaalah-akamai reviewed Dec 27, 2024

View reviewed changes

hasyed-akamai and others added 5 commits December 27, 2024 23:00

Add hover background transitions to tables - Part1

8f87cb6

Add zebra striping and selected states

3a2d37f

Merge branch 'M3-9006-update-table-component-with-design-tokens' of g…

f3a51ba

…ithub.com:hasyed-akamai/manager into M3-9006-update-table-component-with-design-tokens

Add selected state for plan table

696c4dc

Fix dark mode styles

a9120db

jaalah-akamai reviewed Dec 27, 2024

View reviewed changes

hasyed-akamai added 2 commits December 30, 2024 13:54

Add hover background transitions to tables - Part2

0ecfc55

Add hover background transitions to tables - Part3

bffeef5

jaalah-akamai marked this pull request as ready for review December 30, 2024 16:22

jaalah-akamai requested a review from a team as a code owner December 30, 2024 16:22

jaalah-akamai requested review from bnussman-akamai, carrillo-erik, abailly-akamai, mjac0bs and hana-akamai and removed request for a team December 30, 2024 16:22

jaalah added 5 commits December 30, 2024 16:37

Revert "Add hover background transitions to tables - Part3"

24fffe8

This reverts commit bffeef5.

Revert "Add hover background transitions to tables - Part2"

e10ce68

This reverts commit 0ecfc55.

Revert "Add hover background transitions to tables - Part1"

b29fbf7

This reverts commit 8f87cb6.

Make hover the default for TableRow

39d9253

Update with latest from develop

197497d

jaalah-akamai requested a review from a team as a code owner December 30, 2024 22:19

jaalah-akamai requested review from jdamore-linode and removed request for a team December 30, 2024 22:19

Merge branch 'cds-redesign-2025' into M3-9006-update-table-component-…

c3da308

…with-design-tokens

jaalah added 2 commits December 30, 2024 21:35

Add table striping as a setting preference

268b98f

Merge branch 'M3-9006-update-table-component-with-design-tokens' of g…

d28c6f0

…ithub.com:hasyed-akamai/manager into M3-9006-update-table-component-with-design-tokens

hasyed-akamai added Ready for Review and removed Work in Progress labels Dec 31, 2024

jaalah added 2 commits December 31, 2024 10:21

Fix merge conflicts

173b1ea

Add border to table attachment headers

bb63c77

jaalah-akamai merged commit b7a8e87 into linode:cds-redesign-2025 Dec 31, 2024
7 of 11 checks passed

jaalah-akamai mentioned this pull request Dec 31, 2024

upcoming: CDS Redesign 2025 #11465

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

upcoming: [M3-9006] - Update Table Component with Design Tokens #11461

upcoming: [M3-9006] - Update Table Component with Design Tokens #11461

hasyed-akamai commented Dec 26, 2024 •

edited by jaalah-akamai

Loading

jaalah-akamai Dec 27, 2024

jaalah-akamai Dec 27, 2024

jaalah-akamai Dec 27, 2024

jaalah-akamai Dec 27, 2024

jaalah-akamai Dec 27, 2024

jaalah-akamai Dec 27, 2024

jaalah-akamai Dec 27, 2024

jaalah-akamai Dec 27, 2024

jaalah-akamai Dec 27, 2024

jaalah-akamai Dec 27, 2024

jaalah-akamai Dec 27, 2024

jaalah-akamai Dec 27, 2024

jaalah-akamai Dec 27, 2024 •

edited

Loading

github-actions bot commented Dec 30, 2024 •

edited

Loading

linode-gh-bot commented Dec 31, 2024

upcoming: [M3-9006] - Update Table Component with Design Tokens #11461

upcoming: [M3-9006] - Update Table Component with Design Tokens #11461

Conversation

hasyed-akamai commented Dec 26, 2024 • edited by jaalah-akamai Loading

Description 📝

Major Changes

Target release date 🗓️

Preview 📷

How to test 🧪

Verification steps

As an Author I have considered 🤔

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jaalah-akamai Dec 27, 2024 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Dec 30, 2024 • edited Loading

linode-gh-bot commented Dec 31, 2024

Cloud Manager UI test results

🔺 1 failing test on test run #15 ↗︎

Details

Troubleshooting

hasyed-akamai commented Dec 26, 2024 •

edited by jaalah-akamai

Loading

jaalah-akamai Dec 27, 2024 •

edited

Loading

github-actions bot commented Dec 30, 2024 •

edited

Loading