change: [M3-9003] – CDS: Restructure Top Menu Design with Akamai Logo and CDS Compass Updates #11452
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…menu, rearrangement of top menu elements, reordering of components in MainConent.tsx & Root.tsx, addition of new icons for top menu
…nt hamburger icon in tablet/mobile view when side menu disappears; implement company name truncation
dwiley-akamai
commented
Jan 6, 2025
There was a problem hiding this comment.
Created constants.ts to avoid instances like this:
dwiley-akamai
commented
Jan 6, 2025
There was a problem hiding this comment.
Created constants.ts to avoid instances like this:
…r tokens; fix icon and text colors for Search bar; use chevron icons for KeyboardArrowUp & KeyboardArrowDown (color still needs adjusting)
|
@jaalah-akamai I think the remaining items now are:
|
Confirmed we don't need this |
…nu from covering up the search dropdown
dwiley-akamai
requested review from
jdamore-linode,
bnussman-akamai and
pmakode-akamai
and removed request for
a team
|
@jaalah-akamai The changes for the search bar at smaller viewport widths that we discussed weren't consistently good/matching the mockups so I punted on that for now to get this opened for review |
|
Looking into the unit test failures edit: |
Cloud Manager UI test results🔺 13 failing tests on test run #13 ↗︎
Details
TroubleshootingUse this command to re-run the failing tests: yarn cy:run -s "cypress/e2e/core/stackscripts/smoke-community-stackscripts.spec.ts,cypress/e2e/core/stackscripts/smoke-community-stackscripts.spec.ts,cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts,cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts,cypress/e2e/core/vpc/vpc-navigation.spec.ts,cypress/e2e/core/notificationsAndEvents/events-menu.spec.ts,cypress/e2e/core/notificationsAndEvents/events-menu.spec.ts,cypress/e2e/core/placementGroups/placement-groups-navigation.spec.ts,cypress/e2e/core/cloudpulse/cloudpulse-navigation.spec.ts,cypress/e2e/core/account/betas.spec.ts,cypress/e2e/core/oneClickApps/one-click-apps.spec.ts,cypress/e2e/core/linodes/clone-linode.spec.ts,cypress/e2e/core/linodes/clone-linode.spec.ts" |
|||||||||||||||||||||||||||||||||||||||||||||||||||||
…lt to prevent failures
jaalah-akamai
force-pushed
the
M3-9003-cds-restructure-top-menu
branch
from
9d1af14 to
8ec6160
Compare
jaalah-akamai
approved these changes
Jan 13, 2025
jaalah-akamai
merged commit 43a58d6
into
linode:cds-redesign-2025
18 of 23 checks passed
abailly-akamai
added a commit
that referenced
this pull request
Feb 6, 2025
* 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>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description 📝
Make an assortment of changes to the top menu and some additional accommodative changes elsewhere.
Changes 🔄
+in front of "Create"Target release date 🗓️
1/28/25
Preview 📷
How to test 🧪
Verification steps
Author Checklists
As an Author, to speed up the review process, I considered 🤔
👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support
As an Author, before moving this PR from Draft to Open, I confirmed ✅