upcoming: CDS Redesign 2025 (#11465)

* 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> Co-authored-by: Jaalah Ramos <[email protected]> * 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 <[email protected]> * [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 <[email protected]> Co-authored-by: Jaalah Ramos <[email protected]> Co-authored-by: Jaalah Ramos <[email protected]> * 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 <[email protected]> * 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 <[email protected]> Co-authored-by: Jaalah Ramos <[email protected]> Co-authored-by: hasyed-akamai <[email protected]> Co-authored-by: Alban Bailly <[email protected]> Co-authored-by: Alban Bailly <[email protected]> Co-authored-by: Dajahi Wiley <[email protected]> Co-authored-by: Dajahi Wiley <[email protected]> Co-authored-by: Banks Nussman <[email protected]> Co-authored-by: Banks Nussman <[email protected]> Co-authored-by: Hana Xu <[email protected]>
linode · Feb 6, 2025 · 23a0d14 · 23a0d14
1 parent bbf396d
commit 23a0d14
Show file tree

Hide file tree

Showing 339 changed files with 2,942 additions and 3,508 deletions.
diff --git a/packages/manager/.changeset/pr-11537-tech-stories-1737536240938.md b/packages/manager/.changeset/pr-11537-tech-stories-1737536240938.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Remove Individual Product Entity Icons and Update Story Accordingly ([#11537](https://github.com/linode/manager/pull/11537))
diff --git a/packages/manager/.eslintrc.cjs b/packages/manager/.eslintrc.cjs
@@ -249,6 +249,12 @@ module.exports = {
       '@mui/core',
       '@mui/system',
       '@mui/icons-material',
+      {
+        importNames: ['Typography'],
+        message:
+          'Please use Typography component from @linode/ui instead of @mui/material',
+        name: '@mui/material',
+      },
     ],
     'no-throw-literal': 'warn',
     'no-trailing-spaces': 'warn',

diff --git a/packages/manager/.storybook/preview-head.html b/packages/manager/.storybook/preview-head.html
@@ -1,5 +1,3 @@
 <script>
   window.global = window;
-</script>
-
-<link rel="stylesheet" href="/fonts/fonts.css" />
+</script>
diff --git a/packages/manager/cypress/e2e/core/account/betas.spec.ts b/packages/manager/cypress/e2e/core/account/betas.spec.ts
@@ -29,7 +29,11 @@ describe('Betas landing page', () => {
     cy.visitWithLogin('/linodes');
     cy.wait('@getFeatureFlags');
 
-    ui.nav.findItemByTitle('Betas').should('be.visible').click();
+    ui.nav
+      .findItemByTitle('Betas')
+      .scrollIntoView()
+      .should('be.visible')
+      .click();
 
     cy.url().should('endWith', '/betas');
 

diff --git a/packages/manager/cypress/e2e/core/account/service-transfer.spec.ts b/packages/manager/cypress/e2e/core/account/service-transfer.spec.ts
@@ -166,7 +166,7 @@ describe('Account service transfers', () => {
     cy.get('[data-qa-panel="Received Service Transfers"]')
       .should('be.visible')
       .within(() => {
-        cy.get('[data-testid="KeyboardArrowDownIcon"]').click();
+        cy.get('[role="button"]').click();
         cy.findByText(serviceTransferEmptyState, { exact: false }).should(
           'be.visible'
         );
@@ -176,7 +176,7 @@ describe('Account service transfers', () => {
     cy.get('[data-qa-panel="Sent Service Transfers"]')
       .should('be.visible')
       .within(() => {
-        cy.get('[data-testid="KeyboardArrowDownIcon"]').click();
+        cy.get('[role="button"]').click();
         cy.findByText(serviceTransferEmptyState, { exact: false }).should(
           'be.visible'
         );

diff --git a/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts b/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts
@@ -2370,6 +2370,7 @@ describe('LKE ACL updates', () => {
           // Confirm submit button is disabled if form has not been changed
           ui.button
             .findByTitle('Update')
+            .scrollIntoView()
             .should('be.visible')
             .should('not.be.enabled');
 
@@ -2384,6 +2385,7 @@ describe('LKE ACL updates', () => {
           // confirm submit button is now enabled
           ui.button
             .findByTitle('Update')
+            .scrollIntoView()
             .should('be.visible')
             .should('be.enabled');
 
@@ -2404,6 +2406,7 @@ describe('LKE ACL updates', () => {
           // submit
           ui.button
             .findByTitle('Update')
+            .scrollIntoView()
             .should('be.visible')
             .should('be.enabled')
             .click();
@@ -2451,6 +2454,7 @@ describe('LKE ACL updates', () => {
           // Confirm submit button is disabled if form has not been changed
           ui.button
             .findByTitle('Update')
+            .scrollIntoView()
             .should('be.visible')
             .should('not.be.enabled');
 
@@ -2484,6 +2488,7 @@ describe('LKE ACL updates', () => {
           // submit
           ui.button
             .findByTitle('Update')
+            .scrollIntoView()
             .should('be.visible')
             .should('be.enabled')
             .click();
@@ -2568,6 +2573,7 @@ describe('LKE ACL updates', () => {
           // Confirm submit button is disabled if form has not been changed
           ui.button
             .findByTitle('Update')
+            .scrollIntoView()
             .should('be.visible')
             .should('not.be.enabled');
 
@@ -2582,6 +2588,7 @@ describe('LKE ACL updates', () => {
           // confirm submit button is now enabled
           ui.button
             .findByTitle('Update')
+            .scrollIntoView()
             .should('be.visible')
             .should('be.enabled');
 
@@ -2613,6 +2620,7 @@ describe('LKE ACL updates', () => {
           // submit
           ui.button
             .findByTitle('Update')
+            .scrollIntoView()
             .should('be.visible')
             .should('be.enabled')
             .click();
@@ -2729,6 +2737,7 @@ describe('LKE ACL updates', () => {
           // submit
           ui.button
             .findByTitle('Update')
+            .scrollIntoView()
             .should('be.visible')
             .should('be.enabled')
             .click();
@@ -2819,6 +2828,7 @@ describe('LKE ACL updates', () => {
           // submit
           ui.button
             .findByTitle('Update')
+            .scrollIntoView()
             .should('be.visible')
             .should('be.enabled')
             .click();

diff --git a/packages/manager/cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts b/packages/manager/cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts
@@ -91,7 +91,7 @@ describe('linode landing checks', () => {
     cy.findByTestId('menu-item-Object Storage').should('be.visible');
     cy.findByTestId('menu-item-Longview').should('be.visible');
     cy.findByTestId('menu-item-Marketplace').should('be.visible');
-    cy.findByTestId('menu-item-Account').should('be.visible');
+    cy.findByTestId('menu-item-Account').scrollIntoView().should('be.visible');
     cy.findByTestId('menu-item-Help & Support').should('be.visible');
   });
 

diff --git a/packages/manager/cypress/e2e/core/stackscripts/smoke-community-stackscripts.spec.ts b/packages/manager/cypress/e2e/core/stackscripts/smoke-community-stackscripts.spec.ts
@@ -221,10 +221,12 @@ describe('Community Stackscripts integration tests', () => {
                 'Unexpected response received when fetching StackScripts'
               );
             }
-
-            cy.contains(`${stackScripts[0].username} / ${stackScripts[0].label}`).should('be.visible');
+
+            cy.contains(
+              `${stackScripts[0].username} / ${stackScripts[0].label}`
+            ).should('be.visible');
+          });
         });
-      });
     }
   });
 

diff --git a/packages/manager/cypress/e2e/core/stackscripts/update-stackscripts.spec.ts b/packages/manager/cypress/e2e/core/stackscripts/update-stackscripts.spec.ts
@@ -265,10 +265,7 @@ describe('Update stackscripts', () => {
       .findByTitle(`Make StackScript ${stackScripts[0].label} Public?`)
       .should('be.visible')
       .within(() => {
-        ui.button
-          .findByTitle('Confirm')
-          .should('be.visible')
-          .click();
+        ui.button.findByTitle('Confirm').should('be.visible').click();
       });
     cy.wait('@mockUpdateStackScript');
     cy.wait('@mockGetStackScripts');

diff --git a/packages/manager/cypress/support/component/index.html b/packages/manager/cypress/support/component/index.html
@@ -4,7 +4,6 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="fonts/fonts.css">
     <title>Cloud Manager Components</title>
   </head>
   <body>

diff --git a/packages/manager/cypress/support/intercepts/profile.ts b/packages/manager/cypress/support/intercepts/profile.ts
@@ -78,7 +78,27 @@ export const mockGetProfileGrants = (
 export const mockGetUserPreferences = (
   preferences: UserPreferences
 ): Cypress.Chainable<null> => {
-  return cy.intercept('GET', apiMatcher('profile/preferences'), preferences);
+  const defaultPreferences = {
+    // All sidebar categories are expanded.
+    collapsedSideNavProductFamilies: [],
+
+    // Sidebar is not pinned.
+    desktop_sidebar_open: false,
+
+    // Type-to-confirm is enabled.
+    type_to_confirm: true,
+  };
+
+  const resolvedPreferences = {
+    ...defaultPreferences,
+    ...preferences,
+  };
+
+  return cy.intercept(
+    'GET',
+    apiMatcher('profile/preferences'),
+    resolvedPreferences
+  );
 };
 
 /**

diff --git a/packages/manager/cypress/support/ui/locators/common-locators.ts b/packages/manager/cypress/support/ui/locators/common-locators.ts
@@ -11,7 +11,7 @@ export const topMenuItemsLocator = {
   /** Top menu search field. */
   searchInput: '[data-qa-main-search]',
   /** Top menu navigation toggle. */
-  toggleSideMenuButton: '[aria-label="open menu"]',
+  toggleSideMenuButton: '[aria-label="unpin menu"]',
 };
 
 /** Top menu create dropdown items. */

diff --git a/packages/manager/index.html b/packages/manager/index.html
@@ -4,7 +4,6 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="/fonts/fonts.css" />
     <title>Akamai Cloud Manager</title>
   </head>
   <body>

diff --git a/packages/manager/package.json b/packages/manager/package.json
@@ -19,9 +19,11 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@fontsource/fira-code": "^5.1.1",
+    "@fontsource/nunito-sans": "^5.1.1",
     "@hookform/resolvers": "3.9.1",
     "@linode/api-v4": "*",
-    "@linode/design-language-system": "^2.6.1",
+    "@linode/design-language-system": "^3.0.0",
     "@linode/search": "*",
     "@linode/ui": "*",
     "@linode/validation": "*",

diff --git a/packages/manager/public/fonts/fonts.css b/packages/manager/public/fonts/fonts.css
diff --git a/packages/manager/public/fonts/fonts/FiraCode.ttf b/packages/manager/public/fonts/fonts/FiraCode.ttf
diff --git a/packages/manager/public/fonts/fonts/FiraCode.woff b/packages/manager/public/fonts/fonts/FiraCode.woff