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

Adds horizontal variant in CheckboxGroup #16583

Merged

Conversation

2nikhiltom
Copy link
Contributor

@2nikhiltom 2nikhiltom commented May 27, 2024

Closes #16486

Adds horizontal variant in CheckboxGroup

Changelog

New

  • Adds new orientation optional prop (reference from RadioButtonGroup)
  • Adds orientation to playground
  • Updates storybook to demo horizontal variant in CheckboxGroup
  • New styles are added
  • Adds a test to verify if correct classnames are applied when orientation is set to horizontal

The parent <fieldset> uses display: flex for horizontal alignment, causing issues with the alignment of the warning messages.
To avoid breaking changes in the DOM structure, class usage and styles , I have applied position: absolute to the warning message <div> to ensure it appears correctly below the <fieldset>.

image

Testing / Reviewing

Open deploy preview and navigate to CheckboxGroup story to verify if horizontal variant is working good.
Also verify orientation prop working in playground

@2nikhiltom 2nikhiltom requested review from a team as code owners May 27, 2024 13:42
Copy link

netlify bot commented May 27, 2024

Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 473250b
🔍 Latest deploy log https://app.netlify.com/sites/v11-carbon-react/deploys/6656030466c81d0009338fda
😎 Deploy Preview https://deploy-preview-16583--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented May 27, 2024

Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit 473250b
🔍 Latest deploy log https://app.netlify.com/sites/carbon-elements/deploys/66560304da527b000860ee71
😎 Deploy Preview https://deploy-preview-16583--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Contributor

@Kritvi-bhatia17 Kritvi-bhatia17 left a comment

Choose a reason for hiding this comment

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

Nice work, @2nikhiltom! 🔥

Just a small question:
Would it be possible to add a prop for a horizontal checkbox? This way, we could include it in the Playground state also and better interact with the horizontal checkbox in different states (warning, error, disabled, etc).

@2nikhiltom
Copy link
Contributor Author

@Kritvi-bhatia17 ! Yeah good catch
orientation prop is available in Playground now 🥳

Copy link
Contributor

@Gururajj77 Gururajj77 left a comment

Choose a reason for hiding this comment

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

LGTM 🚀

Copy link
Contributor

@Kritvi-bhatia17 Kritvi-bhatia17 left a comment

Choose a reason for hiding this comment

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

LGTM Nikhil from design perspective! 🎉

@2nikhiltom 2nikhiltom requested a review from alisonjoseph May 28, 2024 16:54
Copy link
Member

@alisonjoseph alisonjoseph left a comment

Choose a reason for hiding this comment

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

Awesome, looks great after those small changes 🚀

@2nikhiltom
Copy link
Contributor Author

Awesome!! Thanks for looking into this @alisonjoseph 💯

@2nikhiltom 2nikhiltom added this pull request to the merge queue May 28, 2024
Merged via the queue into carbon-design-system:main with commit 89907da May 28, 2024
21 checks passed
@2nikhiltom 2nikhiltom deleted the 16486_horizental_checkbox branch May 28, 2024 18:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

CheckboxGroup missing horizontal variant
4 participants