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

Open
wants to merge 41 commits into
base: develop
Choose a base branch
from
Open

upcoming: CDS Redesign 2025 #11465

wants to merge 41 commits into from

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 colors work for light/dark mode
  • Verify pin icon opens/closes menu
  • Confirm mobile menu retains original functionality, including hamburger icon

Left Navigation:

  • 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: 87.17%
Current Coverage: 87.01%

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]>
@jaalah-akamai jaalah-akamai requested a review from a team as a code owner January 15, 2025 05:23
@jaalah-akamai jaalah-akamai requested review from dmcintyr-akamai and removed request for a team January 15, 2025 05:23
@jaalah-akamai
Copy link
Contributor Author

Decided to use Fontsource to self host fonts which fixed Safari

abailly-akamai and others added 8 commits January 15, 2025 17:19
This reverts commit 35ba8aa.
…-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]>
@linode-gh-bot
Copy link
Collaborator

Cloud Manager UI test results

🔺 12 failing tests on test run #31 ↗︎

❌ Failing✅ Passing↪️ Skipped🕐 Duration
12 Failing462 Passing2 Skipped143m 45s

Details

Failing Tests
SpecTest
smoke-linode-landing-table.spec.tslinode landing checks » checks the landing page side menu items
smoke-linode-landing-table.spec.tslinode landing checks » checks the landing top menu items
search-images.spec.tsSearch Images » creates two images and make sure they show up in the table and are searchable
clone-linode.spec.tsclone linode » shows DC-specific pricing information during clone flow
placement-groups-navigation.spec.tsPlacement Groups navigation » can navigate to Placement Groups landing page
vpc-navigation.spec.tsVPC navigation » can navigate to VPC landing page
search-volumes.spec.tsSearch Volumes » creates two volumes and make sure they show up in the table and are searchable
lke-update.spec.tswith LKE ACL account capability » can enable ACL on an LKE cluster with ACL pre-installed and edit IPs
lke-update.spec.tswith LKE ACL account capability » can disable ACL and edit IPs
search-linodes.spec.tsSearch Linodes » create a linode and make sure it shows up in the table and is searchable in main search tool
betas.spec.tsBetas landing page » can navigate to Betas landing page
cloudpulse-navigation.spec.tsCloudPulse navigation » can navigate to Cloudpulse landing page

Troubleshooting

Use this command to re-run the failing tests:

yarn cy:run -s "cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts,cypress/e2e/core/images/search-images.spec.ts,cypress/e2e/core/linodes/clone-linode.spec.ts,cypress/e2e/core/placementGroups/placement-groups-navigation.spec.ts,cypress/e2e/core/vpc/vpc-navigation.spec.ts,cypress/e2e/core/volumes/search-volumes.spec.ts,cypress/e2e/core/kubernetes/lke-update.spec.ts,cypress/e2e/core/linodes/search-linodes.spec.ts,cypress/e2e/core/account/betas.spec.ts,cypress/e2e/core/cloudpulse/cloudpulse-navigation.spec.ts"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants