Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

upcoming: CDS Redesign 2025 #11465

Merged
merged 72 commits into from
Feb 6, 2025
Merged

upcoming: CDS Redesign 2025 #11465

merged 72 commits into from
Feb 6, 2025

Conversation

jaalah-akamai
Copy link
Contributor

@jaalah-akamai jaalah-akamai commented Dec 30, 2024

Description 📝

Core Design System Redesign of Cloud Manager

Changes 🔄

Target release date 🗓️

Mid-February

Preview 📷

See respective PRs

How to test 🧪

Prerequisites

  • Checkout branch or view preview link

Verification steps

Left Navigation:

  • Verify spacing is consistent to designs
  • Verify search functionality works as before
  • Confirm notification badge is red/white

Left Navigation:

  • Verify colors work for light/dark mode
  • Verify pin icon opens/closes menu
  • Desktop: Confirm hovering collapsed navigation open menu
  • Confirm mobile menu retains original functionality, including hamburger icon

Tables:

  • Verify colors work for light/dark mode
  • Verify tables across app that they don't look odd
  • Confirm table striping preference works
  • Ensure table striping works with nested tables (VPC)
    • Note: Nested tables should not have striping
  • Ensure Linode tables look good in list/grid/group by tag views

Footer:

  • Verify colors work for light/dark mode
  • Verify existing links still work and alignment is good for desktop/mobile
  • Confirm copyright text appears
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


  • I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

  • All unit tests are passing
  • TypeScript compilation succeeded without errors
  • Code passes all linting rules

* upcoming: [M3-9002] - Footer Update

* global tokens formatting

* fix

* left align for desktop - center for mobile

---------

Co-authored-by: Jaalah Ramos <[email protected]>
@jaalah-akamai jaalah-akamai added the Design Tokens Laying the groundwork for Design Tokens label Dec 30, 2024
jaalah and others added 7 commits December 30, 2024 16:07
* 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: [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] - 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]>
@jaalah-akamai jaalah-akamai marked this pull request as ready for review January 2, 2025 19:19
@jaalah-akamai jaalah-akamai requested a review from a team as a code owner January 2, 2025 19:19
@jaalah-akamai jaalah-akamai requested review from bnussman-akamai and hkhalil-akamai and removed request for a team January 2, 2025 19:19
jaalah and others added 3 commits January 6, 2025 12:32
* Handle dynamic sidebar

* SideMenu temp fonts

* Toggler

* Toggler

* better handling

* better util

* cleanup

* cleanup

* icon fix
Copy link

github-actions bot commented Jan 8, 2025

Coverage Report:
Base Coverage: 79.25%
Current Coverage: 79.02%

abailly-akamai and others added 5 commits January 8, 2025 13:47
… 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]>
@linode-gh-bot
Copy link
Collaborator

Cloud Manager UI test results

🎉 500 passing tests on test run #58 ↗︎

❌ Failing✅ Passing↪️ Skipped🕐 Duration
0 Failing500 Passing2 Skipped113m 49s

@abailly-akamai abailly-akamai merged commit 23a0d14 into develop Feb 6, 2025
25 checks passed
Copy link

cypress bot commented Feb 6, 2025

Cloud Manager E2E    Run #7189

Run Properties:  status check passed Passed #7189  •  git commit 23a0d143c3: upcoming: CDS Redesign 2025 (#11465)
Project Cloud Manager E2E
Branch Review develop
Run status status check passed Passed #7189
Run duration 37m 43s
Commit git commit 23a0d143c3: upcoming: CDS Redesign 2025 (#11465)
Committer Jaalah Ramos
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 9
Tests that did not run due to a developer annotating a test with .skip  Pending 2
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 500
View all changes introduced in this branch ↗︎

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Design Tokens Laying the groundwork for Design Tokens Ready for Review
Projects
None yet
Development

Successfully merging this pull request may close these issues.