Skip to content

refactor: [M3-9748] - Akamai Design System: Checkbox component - Sizes #12020

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

Conversation

pmakode-akamai
Copy link
Contributor

@pmakode-akamai pmakode-akamai commented Apr 14, 2025

Description 📝

We need to ensure that we account for the new sizes of the checkbox in our refactor.

All sizes (sm, md) should be accounted for in the checkboxes - right now they're too big

Changes 🔄

  • Added support for custom sizes in the Checkbox component
    • New size prop (which supports small & medium sizes per Akamai Design System)
  • Added a new story for the Checkbox component with the small size
  • Fixed the misaligned checkbox and label in the Create Linode flow
  • Applied the small size checkbox to all table/list/SelectableTableRow components
  • Removed hardcoded checkbox sizes from SelectableTableRow & TransferTable

Target release date 🗓️

N/A

How to test 🧪

  • Confirm CI is passing
  • Checkout the branch and verify figma changes for Checkbox component - Sizes
    • Verify the Checkbox component and its different variants in Storybook
    • Verify SelectableTableRow in storybook
  • Confirm no visual regression in application
    • Verify Checkbox wherever used in CM (in both light and dark modes)
    • Ensure checkboxes used in all table/list/SelectableTableRow components use the sm size variant
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

@pmakode-akamai pmakode-akamai added the Design Tokens Laying the groundwork for Design Tokens label Apr 14, 2025
@pmakode-akamai pmakode-akamai self-assigned this Apr 14, 2025
@pmakode-akamai pmakode-akamai marked this pull request as ready for review April 14, 2025 11:35
@pmakode-akamai pmakode-akamai requested a review from a team as a code owner April 14, 2025 11:35
@pmakode-akamai pmakode-akamai requested review from hana-akamai, hasyed-akamai and jaalah-akamai and removed request for a team April 14, 2025 11:35
@pmakode-akamai pmakode-akamai requested a review from jaalah April 15, 2025 07:39
@jaalah-akamai jaalah-akamai added the Requires UX Approval Design System Component Requires UX Approval label Apr 16, 2025
@jaalah-akamai jaalah-akamai requested review from davyd-akamai and removed request for jaalah April 16, 2025 17:03
Copy link
Contributor

@jaalah-akamai jaalah-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, but Davyd and Tetiana did you want the ripple disabled?

@davyd-akamai
Copy link

davyd-akamai commented Apr 17, 2025

I'm ok to leave the ripple, but I'm worrying about alignment of the elements. On a screenshot you might see that a checkbox is not aligned with a label. Is it caused by this ripple effect? Or it is a separate question?
image

Also, it wasn't covered in a ticket description, so it could be an improvement, but inside of a table / list components we're using small (16px) checkboxes (since we have pretty limited space keeping in mind how much complex our tables might be).

Anything else looks good!
Tetiana, what do you think?

@tzmiivsk-akamai
Copy link

I agree with Davyd's comments.
Other than that – it looks great, thank you!

@pmakode-akamai
Copy link
Contributor Author

@davyd-akamai @tzmiivsk-akamai @jaalah-akamai

On a screenshot you might see that a checkbox is not aligned with a label. Is it caused by this ripple effect? Or it is a separate question?

I think the 8px padding around the checkbox is necessary for the ripple effect to work correctly in that area, but it might be causing misalignment with the label. If needed, we can just disable the ripple effect and adjust the padding per ADS. Is that acceptable?

@davyd-akamai
Copy link

davyd-akamai commented Apr 17, 2025

@davyd-akamai @tzmiivsk-akamai @jaalah-akamai

On a screenshot you might see that a checkbox is not aligned with a label. Is it caused by this ripple effect? Or it is a separate question?

I think the 8px padding around the checkbox is necessary for the ripple effect to work correctly in that area, but it might be causing misalignment with the label. If needed, we can just disable the ripple effect and adjust the padding per ADS. Is that acceptable?

I think, in this case let's remove the ripple effect, so the label will be aligned with a checkbox. Is it ok @tzmiivsk-akamai ?

@tzmiivsk-akamai
Copy link

@pmakode-akamai @davyd-akamai @jaalah-akamai

@davyd-akamai @tzmiivsk-akamai @jaalah-akamai

On a screenshot you might see that a checkbox is not aligned with a label. Is it caused by this ripple effect? Or it is a separate question?

I think the 8px padding around the checkbox is necessary for the ripple effect to work correctly in that area, but it might be causing misalignment with the label. If needed, we can just disable the ripple effect and adjust the padding per ADS. Is that acceptable?

I think, in this case let's remove the ripple effect, so the label will be aligned with a checkbox. Is it ok @tzmiivsk-akamai ?

If that’s the reason why the alignment is broken, I’m okay with removing that effect.
At the same time, I do see checkboxes and labels aligned correctly in other places, so it seems like the issue might be with how this specific case (checkbox, label, and description) is structured.

@pmakode-akamai
Copy link
Contributor Author

At the same time, I do see checkboxes and labels aligned correctly in other places, so it seems like the issue might be with how this specific case (checkbox, label, and description) is structured.

@tzmiivsk-akamai Ah, I see. In that case, we can keep the ripple and just adjust this specific case.

@davyd-akamai @tzmiivsk-akamai @jaalah-akamai
✅ Fixed the misaligned checkbox and label in the Create Linode flow
✅ Applied the small size checkbox to all table/list/SelectableTableRow components

Could you take a look?

@pmakode-akamai pmakode-akamai added the Add'tl Approval Needed Waiting on another approval! label Apr 21, 2025
@hana-akamai
Copy link
Contributor

Is there a point to using a small checkbox for table row components if the table row remains the same height as when using a medium checkbox? It seems like we're just reducing the clickable area in that case

Prod This branch
prod this branch

@davyd-akamai
Copy link

At the same time, I do see checkboxes and labels aligned correctly in other places, so it seems like the issue might be with how this specific case (checkbox, label, and description) is structured.

@tzmiivsk-akamai Ah, I see. In that case, we can keep the ripple and just adjust this specific case.

@davyd-akamai @tzmiivsk-akamai @jaalah-akamai ✅ Fixed the misaligned checkbox and label in the Create Linode flow ✅ Applied the small size checkbox to all table/list/SelectableTableRow components

Could you take a look?

Thank you! Could you share a preview link one more time, please? I seem to be having trouble accessing Cloud Manager today...

@pmakode-akamai
Copy link
Contributor Author

pmakode-akamai commented Apr 22, 2025

Thank you! Could you share a preview link one more time, please? I seem to be having trouble accessing Cloud Manager today...

preview link: https://linode-cloud-pr-12020.website-us-east-1.linodeobjects.com/

@davyd-akamai
Copy link

Is there a point to using a small checkbox for table row components if the table row remains the same height as when using a medium checkbox? It seems like we're just reducing the clickable area in that case

It’s not just about the table component — the list, dropdown, and paginator will also have smaller checkboxes. Sometimes our data is quite dense, and we have limited space to display it effectively.

Also, according to the CDS table guidelines, the entire row should be selectable, not just the checkbox. However, since we’re updating the UI in stages, this behavior will be introduced later.

Copy link

@davyd-akamai davyd-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, thank you!

@linode-gh-bot
Copy link
Collaborator

Cloud Manager UI test results

🎉 565 passing tests on test run #9 ↗︎

❌ Failing✅ Passing↪️ Skipped🕐 Duration
0 Failing565 Passing5 Skipped123m 17s

@pmakode-akamai pmakode-akamai added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Apr 23, 2025
@pmakode-akamai pmakode-akamai merged commit be3f102 into linode:develop Apr 23, 2025
35 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Approved Multiple approvals and ready to merge! Design Tokens Laying the groundwork for Design Tokens Requires UX Approval Design System Component Requires UX Approval
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants